A Step-by-Step Guide on how to Register a Name on Ethereum Using Web3Auth and Clusters.xyz

npm install @web3auth/modal @web3auth/ethereum-provider viem clusters

import { Web3Auth } from "@web3auth/modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { WEB3AUTH_NETWORK } from "@web3auth/base";
import { createWalletClient, createPublicClient, formatUnits, custom } from "viem";
import { sepolia } from "viem/chains";
import { Clusters, isNameValid } from "@clustersxyz/sdk";
import { RegistrationTransactionData_evm } from "@clustersxyz/sdk/types";

const clientId = "YOUR_WEB3AUTH_CLIENT_ID"; // Replace with your Web3Auth client ID
const chainConfig = {
  chainId: "0xaa36a7", // Replace with appropriate chain ID
  rpcTarget: "RPC_URL", // Replace with your RPC url
  displayName: "Ethereum Sepolia Testnet",
  blockExplorer: "https://sepolia.etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig: chainConfig }
});

const web3auth = new Web3Auth({
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  privateKeyProvider: privateKeyProvider,
});

const w3aProvider = await web3auth.connect();

const publicClient = createPublicClient({
  chain: sepolia,
  transport: custom(w3aProvider),
});

const walletClient = createWalletClient({
  chain: sepolia,
  transport: custom(w3aProvider), // Ensure you use the correct provider
});

const clusters = new Clusters({ apiKey: "YOUR_CLUSTER_API_KEY" }); // Replace with your Clusters API key

const name = "desiredName"; // Replace with the name you want to register

const registerName = async (name: string) => {
  if (!isNameValid(name)) {
    console.error("Invalid name format");
    return;
  }

  const nameAvailability = await clusters.getNameAvailability(name);
  if (!nameAvailability.isAvailable) {
    console.error("Name already taken!");
    return;
  }

  const names = [{ name }];
  const signerAddress = await walletClient.getAddresses();
  const chainId = "11155111"; // Sepolia

  const data = await clusters.getRegistrationTransaction(names, signerAddress[0], chainId);
  if (!data?.registrationFee || !data?.gasToken || !data?.bridgeFee || !data?.transactionData) {
    console.error("Failed to get registration transaction data");
    return;
  }

  const registrationFee = formatUnits(BigInt(data.registrationFee), data.gasToken.decimals);
  const bridgeFee = formatUnits(BigInt(data.bridgeFee), data.gasToken.decimals);
  const totalFees = `Total Registration fee: ${registrationFee} ${data.gasToken.symbol}\nBridge fee: ${bridgeFee} ${data.gasToken.symbol}`;

  const transactionDetails = {
    data: data.transactionData.data,
    account: signerAddress[0],
    to: data.transactionData.to,
    value: BigInt(data.transactionData.value),
  };

  const hash = await walletClient.sendTransaction(transactionDetails);
  const receipt = await publicClient.waitForTransactionReceipt({ hash });
  const transactionStatus = await clusters.getTransactionStatus(hash);

  const result = {
    hash,
    receipt,
    transactionStatus: transactionStatus.status,
    registrationMessage: `${name} registered successfully!`,
  };

  return {
    totalFees,
    result,
  };
};