Ethereum Networks

We currently support the following networks for name registration

ID	Name
1	Mainnet
10	Optimism
56	BNB Smart Chain
137	Polygon
8453	Base
42161	Arbitrum One
43114	Avalanche
11155111	Sepolia
17000	Holesky (testnet)

1. Let the user decide what name they want

You'll want to provide some sort of input box that allows a user to see if the name they want is available.

2. Check if the name is valid

There are some restrictions for registering a name. In short, the name must fit in 32 bytes, must not have a space, or a /.

import { isNameValid } from "@clustersxyz/sdk"

const validName = "clusters";
console.log(isNameValid(validName)); // true

const invalidName = "c/c/c/c";
console.log(isNameValid(invalidName)); // false

3. Once you know the name is valid, make sure the name is not taken

import { isNameValid } from "@clustersxyz/sdk"

const name = "clusters";
const nameAvailability = await getNameAvailability(name);
console.log(nameAvailability.isAvailable) // false

4. Get the raw transaction data for the on-chain transaction

This call will get you the on-chain transaction data to register the names you want at the minimum registration fee of 0.01 ETH. If you are on a chain, such as Polygon, that has a different gas token than ETH, you'll receive back the converted value in MATIC.

If you want to impose a specific registration amount, you can do so in the names array. Check out the documentation on getting the transaction data to learn more.

const names = [{ name: 'mynewname' }];
const signerAddress = '0x..123';
const chainId = '1';
const data = await getRegistrationTransaction(names, signerAddress, chainId);

5. You can now display the registration fee, bridge fee (if any), and what gas token the user will be paying with

import { formatUnits } from 'viem';

const registrationFee = formatUnits(BigInt(data.registrationFee), data.gasToken.decimals);
const bridgeFee = formatUnits(BigInt(data.bridgeFee), data.gasToken.decimals);

// Total Registration fee: 0.01 ETH
console.log(`Total Registration fee: ${registrationFee} ${data.gasToken.symbol}`);

// Bridge fee: 0 ETH
console.log(`Bridge fee: ${bridgeFee} ${data.gasToken.symbol}`);

6. Submit the transaction

// https://viem.sh/docs/actions/wallet/sendTransaction

const hash = await walletClient.sendTransaction({
  data: data.tranasctionData.data, 
  account: signerAddress,
  to: data.tranasctionData.to,
  value: BigInt(data.transactionData.value)
})

7. Track the status of the transaction

Once the transaction is submitted, you can check when the registration has been processed. This is especially useful when bridging. An alternative method is pinging the getNameAvailability() function to see when the name becomes taken.

const getStatus = await getTransactionStatus(hash);
console.log(getStatus.status) // finalized