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

Prerequisites

1. Node.js and npm installed on your machine.
2. React or similar application setup.
3. Install required dependencies: @web3auth/modal, @web3auth/ethereum-provider, viem, and clusters.

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

Step 1: Import Required Libraries

In your React component, start by importing the necessary libraries and modules.

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";

Step 2: Initialize Web3Auth

Configure the Web3Auth with the client ID and network details.

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,
});

Step 3: Connect to Web3Auth

Establish a connection to Web3Auth after connecting with any of the Social provider provider with the Web3Auth Plug n Play Modal.

const w3aProvider = await web3auth.connect();

Step 4: Create Public and Wallet Clients

Set up the public and wallet clients for interacting with the blockchain.

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

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

Step 5: Initialize Clusters

Set up Clusters with your API key.

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

Step 6: Check Name Availability

Validate the name and check its availability.

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,
  };
};

Summary

This guide outlines how to:

1. Initialize Web3Auth with the required configurations.
2. Connect to Web3Auth and obtain the provider.
3. Create public and wallet clients for blockchain interactions.
4. Initialize Clusters with your API key.
5. Check name availability and register the name if available.

Make sure to handle errors and edge cases in a production environment.