Solana

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 (converted to lamports).

If you want to impose a specific registration amount, you can do so in the names array. Input these amounts in Wei and they'll be converted to SOL. Check out the documentation on getting the transaction data to learn more.

const names = [{ name: 'mynewname' }];
const signerAddress = 'A59..iHqw';
const chainId = 'solana';
const data = await getRegistrationTransaction(names, signerAddress, chainId);

5. You can now display the registration fee

import { LAMPORTS_PER_SOL } from '@solana/web3.js';

const registrationFee = Number(data.registrationFee) / LAMPORTS_PER_SOL;

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

6. Submit the transaction

// Example of a solana provider
// https://docs.phantom.app/solana/detecting-the-provider
const solanaProvider = window.phantom?.solana;

for (let transaction of data.transactionData) {
    const { signature } = await solanaProvider.signAndSendTransaction(transaction);
}

7. Track the status of the transaction

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

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