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:
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';
-
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 ...
}
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);
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);
}
};
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>
)