import React from 'react' import { ethers } from 'ethers' import { useProofOfBurnData } from '../hooks' const ProofOfBurn = () => { const data = useProofOfBurnData() return data.isLoaded ? ( <div className='box has-background-light'> <div className='content'> <strong>Group managed by contract</strong> <small>{data.address}</small> </div> <nav className='level'> <div className='level-item has-text-centered'> <div> <p className='heading'>Members in the group</p> <p className='title is-4'>{data.commitments}</p> </div> </div> <div className='level-item has-text-centered'> <div> <p className='heading'>Registration Fee</p> <p className='title is-4'> {ethers.utils.formatEther(data.registrationFee)} ETH </p> </div> </div> </nav> </div> ) : ( <p>Waiting contract data...</p> ) } export { ProofOfBurn }