tessl/npm-wagmi

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

—

Pending

Overview

Eval results

Files

Account Management

Name: tessl/npm-wagmi
Author: tessl

Wallet connection, disconnection, and account switching functionality with full connector lifecycle management. This module handles the complete wallet interaction flow from initial connection through account switching and disconnection.

Capabilities

useAccount

Hook to get current account information including connection status, address, and active connector.

/**
 * Hook to get current account information
 * @param parameters - Optional configuration parameters
 * @returns Current account data and connection status
 */
function useAccount<config = Config>(
  parameters?: UseAccountParameters<config>
): UseAccountReturnType<config>;

interface UseAccountParameters<config = Config> {
  config?: Config | config;
}

interface UseAccountReturnType<config = Config> {
  /** Primary account address */
  address?: Address;
  /** All connected addresses */
  addresses?: readonly Address[];
  /** Current chain information */
  chain?: Chain;
  /** Current chain ID */
  chainId?: number;
  /** Active connector instance */
  connector?: Connector;
  /** Connection status flags */
  isConnected: boolean;
  isConnecting: boolean;
  isDisconnected: boolean;
  isReconnecting: boolean;
  /** Current connection status */
  status: 'connecting' | 'connected' | 'disconnected' | 'reconnecting';
}

Usage Example:

import { useAccount } from "wagmi";

function Profile() {
  const { 
    address, 
    isConnected, 
    isConnecting, 
    connector 
  } = useAccount();

  if (isConnecting) return <div>Connecting...</div>;
  if (!isConnected) return <div>Not connected</div>;

  return (
    <div>
      <p>Address: {address}</p>
      <p>Connected via: {connector?.name}</p>
    </div>
  );
}

useConnect

Hook to connect to a wallet with support for multiple connectors and connection parameters.

/**
 * Hook to connect to a wallet
 * @param parameters - Optional connection configuration
 * @returns Connect mutation and available connectors
 */
function useConnect<config = Config, context = unknown>(
  parameters?: UseConnectParameters<config, context>
): UseConnectReturnType<config, context>;

interface UseConnectParameters<config = Config, context = unknown> {
  config?: Config | config;
  mutation?: {
    onMutate?: (variables: ConnectVariables) => Promise<context> | context;
    onError?: (error: ConnectErrorType, variables: ConnectVariables, context?: context) => Promise<void> | void;
    onSuccess?: (data: ConnectData, variables: ConnectVariables, context?: context) => Promise<void> | void;
    onSettled?: (data?: ConnectData, error?: ConnectErrorType, variables?: ConnectVariables, context?: context) => Promise<void> | void;
  };
}

interface UseConnectReturnType<config = Config, context = unknown> {
  /** Available connectors */
  connectors: readonly Connector[];
  /** Connect to a specific connector */
  connect: (variables: ConnectVariables, options?: ConnectMutateOptions) => void;
  /** Async version of connect */
  connectAsync: (variables: ConnectVariables, options?: ConnectMutateAsyncOptions) => Promise<ConnectData>;
  /** Current connection data */
  data?: ConnectData;
  /** Connection error */
  error: ConnectErrorType | null;
  /** Connection status flags */
  isError: boolean;
  isIdle: boolean;
  isPending: boolean;
  isSuccess: boolean;
  /** Reset connection state */
  reset: () => void;
  /** Current status */
  status: 'error' | 'idle' | 'pending' | 'success';
  /** Additional variables */
  variables?: ConnectVariables;
}

interface ConnectVariables {
  /** Connector to connect with */
  connector: Connector;
  /** Optional chain ID to connect to */
  chainId?: number;
}

interface ConnectData {
  /** Connected accounts */
  accounts: readonly Address[];
  /** Connected chain ID */
  chainId: number;
}

Usage Example:

import { useConnect } from "wagmi";
import { metaMask, walletConnect } from "wagmi/connectors";

function ConnectWallet() {
  const { connectors, connect, isPending } = useConnect();

  return (
    <div>
      {connectors.map((connector) => (
        <button
          key={connector.id}
          onClick={() => connect({ connector })}
          disabled={isPending}
        >
          {isPending ? 'Connecting...' : `Connect ${connector.name}`}
        </button>
      ))}
    </div>
  );
}

useDisconnect

Hook to disconnect from the currently connected wallet.

/**
 * Hook to disconnect from wallet
 * @param parameters - Optional disconnection configuration
 * @returns Disconnect mutation
 */
function useDisconnect<config = Config, context = unknown>(
  parameters?: UseDisconnectParameters<config, context>
): UseDisconnectReturnType<config, context>;

interface UseDisconnectParameters<config = Config, context = unknown> {
  config?: Config | config;
  mutation?: {
    onMutate?: (variables: DisconnectVariables) => Promise<context> | context;
    onError?: (error: DisconnectErrorType, variables: DisconnectVariables, context?: context) => Promise<void> | void;
    onSuccess?: (data: DisconnectData, variables: DisconnectVariables, context?: context) => Promise<void> | void;
    onSettled?: (data?: DisconnectData, error?: DisconnectErrorType, variables?: DisconnectVariables, context?: context) => Promise<void> | void;
  };
}

interface UseDisconnectReturnType<config = Config, context = unknown> {
  /** Disconnect from wallet */
  disconnect: (variables?: DisconnectVariables, options?: DisconnectMutateOptions) => void;
  /** Async version of disconnect */
  disconnectAsync: (variables?: DisconnectVariables, options?: DisconnectMutateAsyncOptions) => Promise<DisconnectData>;
  /** Disconnection data */
  data?: DisconnectData;
  /** Disconnection error */
  error: DisconnectErrorType | null;
  /** Disconnection status flags */
  isError: boolean;
  isIdle: boolean;
  isPending: boolean;
  isSuccess: boolean;
  /** Reset disconnection state */
  reset: () => void;
  /** Current status */
  status: 'error' | 'idle' | 'pending' | 'success';
  /** Additional variables */
  variables?: DisconnectVariables;
}

interface DisconnectVariables {
  /** Optional connector to disconnect specifically */
  connector?: Connector;
}

interface DisconnectData {
  /** Whether disconnection was successful */
  success: boolean;
}

useConnectors

Hook to get all available connectors configured in the wagmi instance.

/**
 * Hook to get available connectors
 * @param parameters - Optional configuration parameters
 * @returns Array of available connectors
 */
function useConnectors<config = Config>(
  parameters?: UseConnectorsParameters<config>
): UseConnectorsReturnType;

interface UseConnectorsParameters<config = Config> {
  config?: Config | config;
}

interface UseConnectorsReturnType {
  0: readonly Connector[];
}

useConnections

Hook to get all current connections across multiple connectors.

/**
 * Hook to get current connections
 * @param parameters - Optional configuration parameters
 * @returns Array of active connections
 */
function useConnections<config = Config>(
  parameters?: UseConnectionsParameters<config>
): UseConnectionsReturnType<config>;

interface UseConnectionsParameters<config = Config> {
  config?: Config | config;
}

interface UseConnectionsReturnType<config = Config> {
  0: readonly Connection[];
}

interface Connection {
  /** Connected accounts */
  accounts: readonly Address[];
  /** Chain ID */
  chainId: number;
  /** Connector instance */
  connector: Connector;
}

useReconnect

Hook to reconnect to previously connected wallets on app initialization.

/**
 * Hook to reconnect to previously connected wallets
 * @param parameters - Optional reconnection configuration
 * @returns Reconnect mutation
 */
function useReconnect<config = Config, context = unknown>(
  parameters?: UseReconnectParameters<config, context>
): UseReconnectReturnType<config, context>;

interface UseReconnectParameters<config = Config, context = unknown> {
  config?: Config | config;
  mutation?: {
    onMutate?: (variables: ReconnectVariables) => Promise<context> | context;
    onError?: (error: ReconnectErrorType, variables: ReconnectVariables, context?: context) => Promise<void> | void;
    onSuccess?: (data: ReconnectData, variables: ReconnectVariables, context?: context) => Promise<void> | void;
    onSettled?: (data?: ReconnectData, error?: ReconnectErrorType, variables?: ReconnectVariables, context?: context) => Promise<void> | void;
  };
}

interface UseReconnectReturnType<config = Config, context = unknown> {
  /** Reconnect to wallets */
  reconnect: (variables?: ReconnectVariables, options?: ReconnectMutateOptions) => void;
  /** Async version of reconnect */
  reconnectAsync: (variables?: ReconnectVariables, options?: ReconnectMutateAsyncOptions) => Promise<ReconnectData>;
  /** Reconnection data */
  data?: ReconnectData;
  /** Reconnection error */
  error: ReconnectErrorType | null;
  /** Reconnection status flags */
  isError: boolean;
  isIdle: boolean;
  isPending: boolean;
  isSuccess: boolean;
  /** Reset reconnection state */
  reset: () => void;
  /** Current status */
  status: 'error' | 'idle' | 'pending' | 'success';
  /** Additional variables */
  variables?: ReconnectVariables;
}

interface ReconnectVariables {
  /** Optional specific connectors to reconnect */
  connectors?: Connector[];
}

interface ReconnectData {
  /** Successfully reconnected connections */
  connections: Connection[];
}

useSwitchChain

Hook to switch between different blockchain networks.

/**
 * Hook to switch between chains
 * @param parameters - Optional switch chain configuration
 * @returns Switch chain mutation
 */
function useSwitchChain<config = Config, context = unknown>(
  parameters?: UseSwitchChainParameters<config, context>
): UseSwitchChainReturnType<config, context>;

interface UseSwitchChainParameters<config = Config, context = unknown> {
  config?: Config | config;
  mutation?: {
    onMutate?: (variables: SwitchChainVariables) => Promise<context> | context;
    onError?: (error: SwitchChainErrorType, variables: SwitchChainVariables, context?: context) => Promise<void> | void;
    onSuccess?: (data: SwitchChainData, variables: SwitchChainVariables, context?: context) => Promise<void> | void;
    onSettled?: (data?: SwitchChainData, error?: SwitchChainErrorType, variables?: SwitchChainVariables, context?: context) => Promise<void> | void;
  };
}

interface UseSwitchChainReturnType<config = Config, context = unknown> {
  /** Available chains to switch to */
  chains: readonly Chain[];
  /** Switch to a specific chain */
  switchChain: (variables: SwitchChainVariables, options?: SwitchChainMutateOptions) => void;
  /** Async version of switch chain */
  switchChainAsync: (variables: SwitchChainVariables, options?: SwitchChainMutateAsyncOptions) => Promise<SwitchChainData>;
  /** Switch chain data */
  data?: SwitchChainData;
  /** Switch chain error */
  error: SwitchChainErrorType | null;
  /** Switch chain status flags */
  isError: boolean;
  isIdle: boolean;
  isPending: boolean;
  isSuccess: boolean;
  /** Reset switch chain state */
  reset: () => void;
  /** Current status */
  status: 'error' | 'idle' | 'pending' | 'success';
  /** Additional variables */
  variables?: SwitchChainVariables;
}

interface SwitchChainVariables {
  /** Chain ID to switch to */
  chainId: number;
  /** Optional specific connector */
  connector?: Connector;
}

interface SwitchChainData {
  /** Switched chain ID */
  chainId: number;
}

useSwitchAccount

Hook to switch between different accounts within the same wallet.

/**
 * Hook to switch between accounts
 * @param parameters - Optional switch account configuration
 * @returns Switch account mutation
 */
function useSwitchAccount<config = Config, context = unknown>(
  parameters?: UseSwitchAccountParameters<config, context>
): UseSwitchAccountReturnType<config, context>;

interface UseSwitchAccountParameters<config = Config, context = unknown> {
  config?: Config | config;
  mutation?: {
    onMutate?: (variables: SwitchAccountVariables) => Promise<context> | context;
    onError?: (error: SwitchAccountErrorType, variables: SwitchAccountVariables, context?: context) => Promise<void> | void;
    onSuccess?: (data: SwitchAccountData, variables: SwitchAccountVariables, context?: context) => Promise<void> | void;
    onSettled?: (data?: SwitchAccountData, error?: SwitchAccountErrorType, variables?: SwitchAccountVariables, context?: context) => Promise<void> | void;
  };
}

interface UseSwitchAccountReturnType<config = Config, context = unknown> {
  /** Switch to a specific account */
  switchAccount: (variables: SwitchAccountVariables, options?: SwitchAccountMutateOptions) => void;
  /** Async version of switch account */
  switchAccountAsync: (variables: SwitchAccountVariables, options?: SwitchAccountMutateAsyncOptions) => Promise<SwitchAccountData>;
  /** Switch account data */
  data?: SwitchAccountData;
  /** Switch account error */
  error: SwitchAccountErrorType | null;
  /** Switch account status flags */
  isError: boolean;
  isIdle: boolean;
  isPending: boolean;
  isSuccess: boolean;
  /** Reset switch account state */
  reset: () => void;
  /** Current status */
  status: 'error' | 'idle' | 'pending' | 'success';
  /** Additional variables */
  variables?: SwitchAccountVariables;
}

interface SwitchAccountVariables {
  /** Account address to switch to */
  account: Address;
  /** Optional specific connector */
  connector?: Connector;
}

interface SwitchAccountData {
  /** Switched account address */
  account: Address;
}

useAccountEffect

Hook to react to account changes with custom effect callbacks.

/**
 * Hook to react to account changes
 * @param parameters - Effect configuration with callbacks
 * @returns void
 */
function useAccountEffect(parameters: UseAccountEffectParameters): void;

interface UseAccountEffectParameters {
  /** Called when account connects */
  onConnect?: (data: {
    address: Address;
    addresses: readonly Address[];
    chainId: number;
    connector: Connector;
    isReconnected: boolean;
  }) => void;
  /** Called when account disconnects */
  onDisconnect?: () => void;
}

Usage Example:

import { useAccountEffect } from "wagmi";

function App() {
  useAccountEffect({
    onConnect(data) {
      console.log('Connected!', data.address);
    },
    onDisconnect() {
      console.log('Disconnected!');
    },
  });

  return <div>My App</div>;
}

Common Types

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

interface Chain {
  id: number;
  name: string;
  network: string;
  nativeCurrency: {
    name: string;
    symbol: string;
    decimals: number;
  };
  rpcUrls: {
    default: { http: readonly string[] };
    public: { http: readonly string[] };
  };
  blockExplorers?: {
    default: { name: string; url: string };
  };
  contracts?: {
    ensRegistry?: { address: Address };
    multicall3?: { address: Address };
  };
}

interface Connector {
  id: string;
  name: string;
  type: string;
  icon?: string;
}

Install with Tessl CLI