tessl/npm-wagmi

React Hooks for Ethereum providing reactive primitives for wallet connections, smart contract interactions, and blockchain data

—

Pending

Overview

Eval results

Files

ENS Integration

Name: tessl/npm-wagmi
Author: tessl

Ethereum Name Service functionality for resolving names, addresses, avatars, and text records. This module provides comprehensive ENS support including forward and reverse resolution, avatar fetching, and custom text records.

Capabilities

useEnsAddress

Hook to resolve ENS names to Ethereum addresses with caching and automatic revalidation.

/**
 * Hook to resolve ENS name to address
 * @param parameters - ENS name resolution parameters
 * @returns Resolved Ethereum address for the ENS name
 */
function useEnsAddress<config = Config, selectData = UseEnsAddressReturnType>(
  parameters: UseEnsAddressParameters<config, selectData>
): UseEnsAddressReturnType<selectData>;

interface UseEnsAddressParameters<config = Config, selectData = UseEnsAddressReturnType> {
  /** ENS name to resolve (e.g., 'vitalik.eth') */
  name: string;
  /** Block number to resolve at */
  blockNumber?: bigint;
  blockTag?: 'latest' | 'earliest' | 'pending' | 'safe' | 'finalized';
  /** Chain to use (must support ENS) */
  chainId?: config['chains'][number]['id'];
  /** Specific coin type (default: 60 for Ethereum) */
  coinType?: number;
  /** Universal resolver address override */
  universalResolverAddress?: Address;
  config?: Config | config;
  query?: {
    enabled?: boolean;
    staleTime?: number;
    gcTime?: number;
    select?: (data: UseEnsAddressReturnType) => selectData;
  };
}

type UseEnsAddressReturnType = Address | null;

Usage Example:

import { useEnsAddress } from "wagmi";

function EnsProfile({ ensName }: { ensName: string }) {
  const { data: address, isLoading, error } = useEnsAddress({
    name: ensName,
  });

  if (isLoading) return <div>Resolving...</div>;
  if (error) return <div>Resolution failed</div>;
  if (!address) return <div>Name not found</div>;

  return (
    <div>
      <p>ENS: {ensName}</p>
      <p>Address: {address}</p>
    </div>
  );
}

useEnsName

Hook to get ENS name for an Ethereum address (reverse resolution).

/**
 * Hook to get ENS name for address
 * @param parameters - Address to ENS name resolution parameters
 * @returns ENS name associated with the address
 */
function useEnsName<config = Config, selectData = UseEnsNameReturnType>(
  parameters: UseEnsNameParameters<config, selectData>
): UseEnsNameReturnType<selectData>;

interface UseEnsNameParameters<config = Config, selectData = UseEnsNameReturnType> {
  /** Address to resolve to ENS name */
  address: Address;
  /** Block number to resolve at */
  blockNumber?: bigint;
  blockTag?: 'latest' | 'earliest' | 'pending' | 'safe' | 'finalized';
  /** Chain to use */
  chainId?: config['chains'][number]['id'];
  /** Universal resolver address override */
  universalResolverAddress?: Address;
  config?: Config | config;
  query?: {
    enabled?: boolean;
    staleTime?: number;
    gcTime?: number;
    select?: (data: UseEnsNameReturnType) => selectData;
  };
}

type UseEnsNameReturnType = string | null;

useEnsAvatar

Hook to get avatar URL associated with an ENS name.

/**
 * Hook to get ENS avatar
 * @param parameters - ENS avatar query parameters
 * @returns Avatar URL for the ENS name
 */
function useEnsAvatar<config = Config, selectData = UseEnsAvatarReturnType>(
  parameters: UseEnsAvatarParameters<config, selectData>
): UseEnsAvatarReturnType<selectData>;

interface UseEnsAvatarParameters<config = Config, selectData = UseEnsAvatarReturnType> {
  /** ENS name to get avatar for */
  name: string;
  /** Whether to gateway IPFS URLs */
  gatewayUrls?: string[];
  /** Block number to query at */
  blockNumber?: bigint;
  blockTag?: 'latest' | 'earliest' | 'pending' | 'safe' | 'finalized';
  /** Chain to use */
  chainId?: config['chains'][number]['id'];
  /** Universal resolver address override */
  universalResolverAddress?: Address;
  config?: Config | config;
  query?: {
    enabled?: boolean;
    staleTime?: number;
    gcTime?: number;
    select?: (data: UseEnsAvatarReturnType) => selectData;
  };
}

type UseEnsAvatarReturnType = string | null;

Usage Example:

import { useEnsName, useEnsAvatar } from "wagmi";

function UserProfile({ address }: { address: `0x${string}` }) {
  const { data: ensName } = useEnsName({ address });
  const { data: avatar } = useEnsAvatar({ 
    name: ensName || '',
    query: { enabled: !!ensName }
  });

  return (
    <div>
      {avatar && <img src={avatar} alt="Avatar" />}
      <p>{ensName || address}</p>
    </div>
  );
}

useEnsText

Hook to get text records associated with an ENS name.

/**
 * Hook to get ENS text record
 * @param parameters - ENS text record query parameters
 * @returns Text record value for the specified key
 */
function useEnsText<config = Config, selectData = UseEnsTextReturnType>(
  parameters: UseEnsTextParameters<config, selectData>
): UseEnsTextReturnType<selectData>;

interface UseEnsTextParameters<config = Config, selectData = UseEnsTextReturnType> {
  /** ENS name to get text record for */
  name: string;
  /** Text record key (e.g., 'email', 'url', 'twitter', 'github') */
  key: string;
  /** Block number to query at */
  blockNumber?: bigint;
  blockTag?: 'latest' | 'earliest' | 'pending' | 'safe' | 'finalized';
  /** Chain to use */
  chainId?: config['chains'][number]['id'];
  /** Universal resolver address override */
  universalResolverAddress?: Address;
  config?: Config | config;
  query?: {
    enabled?: boolean;
    staleTime?: number;
    gcTime?: number;
    select?: (data: UseEnsTextReturnType) => selectData;
  };
}

type UseEnsTextReturnType = string | null;

Usage Example:

import { useEnsText } from "wagmi";

function EnsTextRecords({ ensName }: { ensName: string }) {
  const { data: email } = useEnsText({
    name: ensName,
    key: 'email',
  });

  const { data: twitter } = useEnsText({
    name: ensName,
    key: 'com.twitter',
  });

  const { data: github } = useEnsText({
    name: ensName,
    key: 'com.github',
  });

  return (
    <div>
      <h3>{ensName}</h3>
      {email && <p>Email: {email}</p>}
      {twitter && <p>Twitter: @{twitter}</p>}
      {github && <p>GitHub: {github}</p>}
    </div>
  );
}

useEnsResolver

Hook to get the resolver address for an ENS name.

/**
 * Hook to get ENS resolver
 * @param parameters - ENS resolver query parameters
 * @returns Resolver contract address for the ENS name
 */
function useEnsResolver<config = Config, selectData = UseEnsResolverReturnType>(
  parameters: UseEnsResolverParameters<config, selectData>
): UseEnsResolverReturnType<selectData>;

interface UseEnsResolverParameters<config = Config, selectData = UseEnsResolverReturnType> {
  /** ENS name to get resolver for */
  name: string;
  /** Block number to query at */
  blockNumber?: bigint;
  blockTag?: 'latest' | 'earliest' | 'pending' | 'safe' | 'finalized';
  /** Chain to use */
  chainId?: config['chains'][number]['id'];
  /** Universal resolver address override */
  universalResolverAddress?: Address;
  config?: Config | config;
  query?: {
    enabled?: boolean;
    staleTime?: number;
    gcTime?: number;
    select?: (data: UseEnsResolverReturnType) => selectData;
  };
}

type UseEnsResolverReturnType = Address | null;

Advanced ENS Usage

Multiple Text Records

import { useEnsText } from "wagmi";

function ComprehensiveEnsProfile({ ensName }: { ensName: string }) {
  // Common text record keys
  const textRecords = [
    'email',
    'url', 
    'avatar',
    'description',
    'notice',
    'keywords',
    'com.discord',
    'com.github',
    'com.reddit',
    'com.twitter',
    'org.telegram',
  ];

  const records = textRecords.map(key => ({
    key,
    ...useEnsText({ name: ensName, key })
  }));

  return (
    <div>
      <h2>{ensName}</h2>
      {records
        .filter(record => record.data)
        .map(record => (
          <p key={record.key}>
            {record.key}: {record.data}
          </p>
        ))
      }
    </div>
  );
}

ENS Profile Component

import { useEnsAddress, useEnsName, useEnsAvatar, useEnsText } from "wagmi";

interface EnsProfileProps {
  nameOrAddress: string;
}

function EnsProfile({ nameOrAddress }: EnsProfileProps) {
  // Determine if input is ENS name or address
  const isAddress = nameOrAddress.startsWith('0x');
  
  // Get address if ENS name provided
  const { data: resolvedAddress } = useEnsAddress({
    name: nameOrAddress,
    query: { enabled: !isAddress }
  });
  
  // Get ENS name if address provided
  const { data: ensName } = useEnsName({
    address: nameOrAddress as Address,
    query: { enabled: isAddress }
  });

  const finalAddress = isAddress ? nameOrAddress as Address : resolvedAddress;
  const finalName = isAddress ? ensName : nameOrAddress;

  // Get avatar and description
  const { data: avatar } = useEnsAvatar({
    name: finalName || '',
    query: { enabled: !!finalName }
  });

  const { data: description } = useEnsText({
    name: finalName || '',
    key: 'description',
    query: { enabled: !!finalName }
  });

  if (!finalAddress && !finalName) {
    return <div>Unable to resolve ENS name or address</div>;
  }

  return (
    <div className="ens-profile">
      {avatar && <img src={avatar} alt="ENS Avatar" className="avatar" />}
      <div>
        {finalName && <h3>{finalName}</h3>}
        <p className="address">{finalAddress}</p>
        {description && <p className="description">{description}</p>}
      </div>
    </div>
  );
}

Common Types

type Address = `0x${string}`;

interface EnsRecord {
  /** The resolved value */
  value: string | null;
  /** Whether the record exists */
  exists: boolean;
}

// Standard ENS text record keys
type StandardTextRecordKey = 
  | 'avatar'
  | 'description' 
  | 'display'
  | 'email'
  | 'keywords'
  | 'mail'
  | 'notice'
  | 'location'
  | 'phone'
  | 'url'
  | 'com.discord'
  | 'com.github'
  | 'com.peepeth'
  | 'com.linkedin'
  | 'com.reddit'
  | 'com.twitter'
  | 'io.keybase'
  | 'org.telegram';

// Coin types for address resolution (SLIP-44)
type CoinType = 
  | 0   // Bitcoin
  | 2   // Litecoin
  | 3   // Dogecoin
  | 60  // Ethereum (default)
  | 61  // Ethereum Classic
  | 144 // Ripple
  | 145 // Bitcoin Cash
  | 714 // Binance Chain;

interface EnsConfig {
  /** ENS registry address */
  ensRegistry?: Address;
  /** Universal resolver address */
  universalResolverAddress?: Address;
}

Install with Tessl CLI