A React Component which resolves ENS Names. It does a reverse lookup of an Ethereum Address to accomplish this. This component also caches ENS names using Zustand on the client side.
If the address cannot be resolved, the address will be formatted for you. There are a variety of ways to format the address. The default is to display the last 4 digits of an ETH Address (0x...F314).
Note: customDisplay
is favored over any other fallback address display preferences.
Note: No styling on the component is provided.
Using npm:
npm install react-ens-name
Using yarn:
yarn add react-ens-name
Provide ENSName component an ethereum address and it will resolve it
const IndexPage = () => {
return (
<div className="index">
Index
<ENSName address="0xD286064cc27514B914BAB0F2FaD2E1a89A91F314"></ENSName>
<style jsx>{`
.index {
}
`}</style>
</div>
);
};
const IndexPage = () => {
import { ethers } from ethers
const provider =new ethers.providers.JsonRpcProvider(
"https://mainnet.infura.io/v3/<INFURA_KEY>"
);
return (
<div className="index">
Index
<ENSName
address="0xD286064cc27514B914BAB0F2FaD2E1a89A91F314",
provider={provider}
></ENSName>
<style jsx>{`
.index {
}
`}</style>
</div>
);
};
const randomFormat = (address: string | undefined) => {
return address.slice(0, getRandomInt(40) + 2)
}
const IndexPage = () => {
import { ethers } from ethers
return (
<div className="index">
Index
<ENSName
address="0xD286064cc27514B914BAB0F2FaD2E1a89A91F314",
customDisplay={randomFormat}
></ENSName>
<style jsx>{`
.index {
}
`}</style>
</div>
);
};
address
- the ethereum address to resolve the ens name forprovider
- can choose to provide a custom provider to resolve the ENS name (infura, metamask). By default the mainnet will be useddisplayType
- How to display the address if ENS can't resolve the name- "FULL", // display: 0xAb5801a7D398351b8bE11C439e05C5B3259aeC9B
- "LAST4", // display: 0xeC9B
- "LAST6", // display: 0x9aeC9B
- "FIRST4", // display: 0xAb58
- "FIRST6", // display: 0xAb5801
- "FIRST4_LAST4", // display: 0xAb58...eC9B
- "FIRST6_LAST6", // display: 0xAb5801...9aeC9B
- "withEllipses" - Adds "..." where it makes sense for the display
customDisplay
- provide a function which takes the address (0x...) and formats it in a custom way
- Validate ETH Address
- Handle API failure cleanly
- Use decentralized way of resolving ENS name (using The Graph subgraph for ENS?)
- Cleanup Codebase
- Request Feedback & Suggestions
- Component Styling?