Using @lestprotocol/sdk to Resolve Domains

This technical documentation provides a guide on how to use the @lestprotocol/sdk library to resolve domain information

Prerequisites

Before proceeding with the usage of @lestprotocol/sdk, make sure you have the following:

Node.js and npm installed on your system. Installation

To get started, install the @lestprotocol/sdk library in your project. Open your terminal and run the following command:

npm install @lestprotocol/sdk

Usage

Follow these steps to use @lestprotocol/sdk for domain resolution:

1. Import Dependencies

In your JavaScript/TypeScript file, import the required dependencies:

import Resolution from '@lestprotocol/sdk';
import { useEffect, useState } from 'react';
import { ConnectButton } from '@rainbow-me/rainbowkit';

2. Create React Component

   create a React component to handle the domain resolution.

   Here's an example of a React component called Home:

const Home = () => {
  // ... State and other variable declarations ...
}

3. Define State Variables

Define the state variables that will store the domain name, address, balance, and loading status:

const [name, setName] = useState("");
const [address, setAddress] = useState("");
const [balance, setBalance] = useState({} as {
  formatted: string;
  value: bigint;
});
const [loading, setLoading] = useState(false);

4. Implement the Resolve Function

Create an asynchronous function to resolve the domain using the @lestprotocol/sdk. The resolve function uses the Resolution class to fetch the domain information and updates the state variables accordingly:

const resolve = async () => {
  setLoading(true);
  const resolution = new Resolution({
    chain: "hela" // hela chain
  });
  try {
    const resolvedDomain = await resolution.resolveDomain(name);
    setLoading(false);
    setAddress(resolvedDomain.address);
    setBalance(resolvedDomain.balance);
  } catch (error) {
    console.error('Error occurred while resolving domain:', error);
    setLoading(false);
  }
};

5. Render the Component

Render the component with appropriate HTML elements and CSS styles:

return (
    <main className={styles.main}>
      <ConnectButton />

      <div style={{ marginTop: "10px" }}>
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
        <button onClick={resolve}>{loading ? "Loading....." : "Resolve your name"}</button>
        <h1>{name}</h1>
        <p>Address: {loading ? "Loading...." : address}</p>
        <p>Balance: {loading ? "Loading...." : balance.formatted}</p>
      </div>
    </main>
)

Built by the Lestprotocol Team