ENS (Ethereum Name Service) enables decentralized usernames based on Ethereum smart contracts. Domain names (e.g. joystream.eth
) can be registered with an Ethereum transaction and can be used to resolve an Ethereum address (just like you would resolve an IP address via a DNS).
Your task is to build a simple ENS dashboard that has the following functionalities:
- Allows doing a name lookup (e.g. user inputs
joystream.eth
) and gets back the domain info:- Registrant address
- Assigned ETH address
- Registration date
- Expiry date
- Shows the list of the most recent domain registrations:
- The list should be updated in real time as the registrations happen
- The list should be paginated and only necessary data should be fetched
- The list should be sorted by newest registrations
- For each registration, same details as in step 1. should be displayed
- The app should support ENS Reverse Resolution. The linked docs should give you a good understanding what this feature is. Example: if I can control a given address (let's say
0x0000000000000000000000000000dddd
), I can set a reverse record for it to say that it should be resolved toexample.eth
. Whenever an Ethereum address is presented (domain assigned address is the exception), the app should try a reverse lookup and if the address resolves to a name, that name should be used instead of the raw address. So to follow the example, if there is a domain registration by0x0000000000000000000000000000dddd
, the app should displayexample.eth
as the registrant. - The app should handle all loading states and always present the current status to the user
- To submit the task, publish it in a Github repository (can be public or private with invite) and send the link to @kdembler
- Deadline to submit the task is 7 days from the moment you got the link
- You should write all the code yourself. If there are some small pieces authored by others you would like to use, that's fine, as long as you give proper attribution
- If anything is unclear, please ask questions
- For all the ENS data, ENS subgraph can be used. This way, you can easily fetch the data with GraphQL. If you are new to GraphQL, I recommend using Apollo Client, it also has docs on pagination.
- You are free to use whatever libraries/tech you'd like, the only requirement is React
- Try to focus on proper logic/clean code instead of UI aesthetics
- Bonus points:
- Publicly available deployment (e.g. Netlify, Vercel, etc)
- Sexy look
- Responsive design