Zilliqa ENS Hooks

React hooks for Zilliqa ENS resolution (name, address, avatar).

Installation

npm install zilliqa-ens-hooks
# or
yarn add zilliqa-ens-hooks

Requirements

This package has peer dependencies on:

• react (>=16.8.0)
• @tanstack/react-query (>=4.0.0)
• viem (>=1.0.0)

Usage

Setup React Query

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  );
}

Resolving ENS name from an address

import { useZilliqaEnsName } from 'zilliqa-ens-hooks';
import { zilliqa } from 'zilliqa-ens-hooks';

function Profile({ address }) {
  const { name, isLoading } = useZilliqaEnsName({
    address,
    chainId: zilliqa.id
  });

  if (isLoading) return <div>Loading...</div>;
  
  return (
    <div>
      <h1>{name || address}</h1>
    </div>
  );
}

Resolving address from ENS name

import { useZilliqaEnsAddress } from 'zilliqa-ens-hooks';
import { zilliqa } from 'zilliqa-ens-hooks';

function AddressLookup({ ensName }) {
  const { address, isLoading, error } = useZilliqaEnsAddress({
    name: ensName,
    chainId: zilliqa.id
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <p>Address: {address || 'Not found'}</p>
    </div>
  );
}

Getting avatar for an ENS name

import { useZilEnsAvatar } from 'zilliqa-ens-hooks';
import { zilliqa } from 'zilliqa-ens-hooks';

function ProfileAvatar({ address }) {
  const { avatar, isLoading } = useZilEnsAvatar({
    address,
    chainId: zilliqa.id
  });

  if (isLoading) return <div>Loading...</div>;
  
  return (
    <div>
      {avatar ? (
        <img src={avatar} alt="ENS Avatar" />
      ) : (
        <div>No avatar set</div>
      )}
    </div>
  );
}

License

MIT