ENSToAddressPage.tsx
For the full content of this gist, refer to https://gist.github.com/CodingAbdullah/8d6d0788390a6ba2dd8923159b5eb7f2
McMaster. Software Engineer with a keen interest in blockchain and web3.
import React, { FC } from 'react';
import { useENSAddressLookup } from 'ethereum-hooks/ens';
// Incorporating the ENS to Address Client Hook.. using Vitalik Buterin's address
// No server setup required - connects directly to AWS Lambda
const ENSToAddressPage: FC = () => {
// Hook automatically connects to AWS Lambda - no server setup required
const addressInformation = useENSAddressLookup('vitalik.eth');
// Each client hook uses the useFetch custom hook
// It returns three states: data, error, loading
// We capture these states in a variable (like above) and conditionally render the component
if (addressInformation.loading){
return <div>Loading..</div>
}
else if (addressInformation.error){
return <div>Error loading data...</div>
}
else {
// Hardcoded some parts for demonstrative purposes only
return (
<div className='home-page'>
<table>
<tr>
<th>ENS</th>
<th>Address</th>
</tr>
<tr>
<td>vitalik.eth</td>
<td>{ addressInformation.data?.information }</td>
</tr>
</table>
</div>
)
}
}
export default ENSToAddressPage;