Guide on how to use Namespace backend API and Smart Contracts to integrate and mint a subname on Ethereum mainnet or a Test network.
This guide is deprecated. It can still be used to implement minting functionality but it would be much easier to use Namespace-SDK, which abstracts all the logic and has support for both l1 and l2 subnames
In this tutorial, we will create a simple dapp using React, RainbowKit, and Viem.
The dapp will:
Allow user to connect a wallet
Search for mintable subnames
Mint a subname
The code for the demo project can also be found on our GitHub.
If at any point you require some assistance or help implementing this, make sure to reach out to us in our Discord and we will answer all your questions.
Project setup
To start, we first need to initialize a blank React project.
yarn create-vite-app
npm create-vite-app
Then, we would need to install RainbowKit and Viem so that we can connect our wallet and communicate with the Ethereum protocol.
I will not go into details on how to configure Rainbowkit and get a Connect button, since RainbowKit already has pretty decent documentation: Raibowkit Docs
After setting up everything, we should see a nice-looking ConnectButtonwhich allows us to connect our wallet.
Find mintable subnames
After we set up our project successfully, the next thing we need is to find mintable subnames under ENS names which are listed on the Namespace platform.
If you would like to list your own ENS name to test it while doing this tutorial, you cancreate a listing on a Sepolia network. Head over to https://app.namespace.tech and switch to Sepolia.
If you'd like to do it on the Mainnet, go to: https://app.namespace.tech, connect your wallet, and visit Account -> Manager.
Instructions on how to list your ENS Name and issue/sell Subnames can be found in the Manager page.
Namespace backend API exposes an endpoint that allows searching for mintable subnames. GET /api/v1/listings/availabe
We'll create a React hook, which will use this endpoint to fetch subname data.
First, we need to install a lib for making HTTP requests. I will use Axios but you are free to use whatever you prefer.
Now that we have our available listings, we can create a form that will show the user's available subnames for minting and allow him to search and select.
Since I don't like a plain UI, I will use Thorin components to make my UI look nicer. They have pretty good documentation for setup, so I will not copy the code here. Thorin Docs
We will then create s simple form. The form has two inputs, which are used for filtering the subnames based on parentLabel and subnameLabel. The form also allows the user to select subname, and if a subname is selected, a mint button will appear.
The form will initially show the subnames as we change inputs, as soon as we click, the subname will be selected and the Mint button will appear.
Mint L1 Subname
Now that we know which subnames are available for minting, the last step is to mint an actual NTF on the blockchain.
Since the listing data is stored and verification is done offchain, the Namespace backend will have to validate whether a subname can be minted and provide the minter with the required mint parameters and a signature. Using these, the minter can call a smart contract and mint a subname NFT.
Third and the final part we need, is to actually mint a subname by calling the mint function of the NamespaceMinter smart contract. Since contracts are verified on Etherscan, we can find the ABI there.
Now that we have all the react components, the last piece of the puzzle is to actually implement minting functionality in the minting form we have previously created so that when subname is selected and the mint button is clicked, the user can send a transaction and mint subname.