| description |
|---|
Simplest step-by-step guide on how to resolve .crypto domain |
In this tutorial we are going to take a look on Unstoppable domains, specifically how one can resolve a .crypto domain using nothing but html, js, and ethers.js library.
- Initialize the project folder
- Get a namehash of a domain
- Making the call to the contract
- Displaying results
- Error handling
- Links
In order to resolve a .crypto domain, we will need to
- Tokenize the domain
- Configure ethers.js library to call Unstoppable contract
- Make a call and fetch the data
Let's visualize the resolution process using some of the simplest tools web developer has: knowledge of HTML and javascript.
As has been said above all we need is to create a folder and three files index.html, index.js, and ethers.js respectively
https://gist.github.com/f794caf3adf3573f359ff26095b5d833
Your project folder should look exactly like the following: https://gist.github.com/f44b18b66aeb2469de120e123faa2cba
Let's open and configure our html page for the resolution.
From UI perspective we are going to need an input bar, a button to trigger the resolution and a <div> where we are going to display our records.
From dependencies perspective we are going to connect js-sha3, so we can use keccak_256 hash function, and ethers.js for a simple way of communication with blockchain contract.
{% hint style="info" %}
We will need the keccak_256 hash function to calculate ERC-721 token id for .crypto domain.
To see a full description of namehashing algorithm
read namehashing article..
{% endhint %}
https://gist.github.com/9882951ba7366aeca1a946279f244491
We are going to start by putting some basic code to capture the text from the input field and print it in our console.
We can open index.html in a browser to make sure everything is connected and launches.
https://gist.github.com/009d4c7dcdf0105933c051e288a1a0f5
Namehashing is an algorithm that tokenizes your domain name in a way that a UD smart contract can understand.
To tokenize our domain we need to split it by the "." character into separate labels, reverse the array, and reduce it to a single hash.
We will implement a recursive hash function that does all the above, arrayToHex function to get the result as string and a wrapper function namehash
This process is described in more details over our namehashing article
https://gist.github.com/377fb0b081f651f744e67a76ca3bd73c
Below you can find a table of some examples for namehashing
| label | namehash |
|---|---|
| "" | 0x88d4843af302c2093286898cd34cba7a471c3cdce4c78514fc971c3c6a53891e |
| crypto | 0x0f4a10a4f46c288cea365fcf45cccf0e9d901b945b9829ccdb54c10dc3cb7a6f |
| brad.crypto | 0x756e4e998dbffd803c21d23b06cd855cdc7a4b57706c95964a37e24b47c10fc9 |
In order to talk with any blockchain contract using ethers.js we need to know the following
- Contract address
- Contract ABI
- Ethereum provider
Let's add the following information to our ethers.js file
https://gist.github.com/ebe2d019cc57ecc79aeafedec7cc0068
{% hint style="info" %}
For the scope of this project, we are going to need only getData function from
.crypto proxy reader contract.
{% endhint %}
Next, we need to create a contract instance and create a function to query our contract
https://gist.github.com/7fdf9f62827b746373a66359c6a7e589
By inspecting the getData function interface we can see that it requires from us an array of keys and tokenId. We can get tokenId by calling namehash function from above.
Although any string can be stored as a key under the domain, Unstoppable domains has standardized the keys across many applications.
In this tutorial, we are going to be looking up for the following records:
| Key | Description |
|---|---|
| crypto.BTC.address | BTC address attached to the domain |
| crypto.ETH.address | ETH address attached to the domain |
Let's update our resolve function to use namehash, and look up the desired record keys from the input domain name. We are going to print them in the console to inspect in more details before visualizing them
https://gist.github.com/485546b5193b267751612ef93f477695
Trying to resolve brad.crypto with the above keys returns us the following in the console
https://gist.github.com/71a316996539ae3795dfbba36b03e6f6
{% hint style="info" %} data[2] is an array containing all resolved records in the same order as has been queried. In this case, the first argument is BTC address and the last one is an ETH address attached to the domain. {% endhint %}
Since this is a simple example we won't get too fancy. We'll just create a span element for each record containing its key and value, its owner address, and its resolver address. And if the record is not found we are going to say so in red color.
https://gist.github.com/4d4c5f655d9b7698cf92d0e039b5e7fa
Before we can use this function we will need to combine the records values with the keys.
https://gist.github.com/a0c496b02652f9b796f1d1dc23b383f8
Now we can easily show the records on our page:
https://gist.github.com/efeaba82ccccc6885ea5cc49f88c2c94
We should see the following on successful resolution.
Now that we have made a successful call let's deal with all possible errors that could happen during the resolution. For this purpose, we can create a function to place an error in our records div. We also added a boolean argument cleanDom to remove everything from the records div before we put an error if needed.
https://gist.github.com/47bd91cd60d66ea1440948a87b5ec3b0
| Error | Thrown when |
|---|---|
| Domain is not registered | Owner address is equal to 0x00000000000000000000000000000000 |
| Domain is not supported | We are trying to resolve a domain that doesn't end with .crypto |
| Domain is not configured | It is possible that the owner address exists while the resolver address is set to 0x00000000000000000000000000000000 |
| Record is not found | This is returned when you query a domain for records such as crypto.BTC.address which the domain owner has not set |
In our case we will update the callback to the fetchContractData function to include these possible errors.
https://gist.github.com/c9ab99bf3ede3cdb1d475c47f8e3fdd0
At this point you can now resolve any .crypto domain and show an appropriate error message for your users. Just open index.html file in your browser and play a little with a results to get a taste of it.
| Domain | result |
|---|---|
| brd.crypto | resolve without any errors |
| brad.anything | domain is not supported |
| homecakes.crypto | domain has no BTC record |
| unregistered.crypto | domain is not registered |
| reseller-test-paul2.crypto | domain is not configured |
If you have questions, visit our Unstoppable Domains Developer Community on Discord.