CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-wagmi--core

VanillaJS library for Ethereum blockchain interactions with reactive primitives and utilities for building Ethereum applications

Pending
Overview
Eval results
Files

account-chain-state.mddocs/

Account & Chain State

Access to current account information, chain details, and connection status. Essential for understanding application state.

Capabilities

Get Account Information

Retrieves current connected account details and connection status.

/**
 * Gets current connected account information
 * @param config - Wagmi configuration
 * @returns Current account state
 */
function getAccount<config extends Config>(config: config): GetAccountReturnType<config>;

interface GetAccountReturnType<config extends Config> {
  /** Primary connected address */
  address?: Address;
  /** All connected addresses */
  addresses?: readonly Address[];
  /** Current chain information */
  chain?: Chain;
  /** Current chain ID */
  chainId?: config['chains'][number]['id'];
  /** Active connector */
  connector?: Connector;
  /** Whether wallet is connected */
  isConnected: boolean;
  /** Whether connection is in progress */
  isConnecting: boolean;
  /** Whether wallet is disconnected */
  isDisconnected: boolean;
  /** Whether reconnection is in progress */
  isReconnecting: boolean;
  /** Current connection status */
  status: 'connected' | 'connecting' | 'disconnected' | 'reconnecting';
}

Usage Example:

import { getAccount } from '@wagmi/core'

const account = getAccount(config)

if (account.isConnected) {
  console.log('Connected address:', account.address)
  console.log('All addresses:', account.addresses)
  console.log('Current chain:', account.chain?.name)
  console.log('Connector:', account.connector?.name)
} else if (account.isConnecting) {
  console.log('Connection in progress...')
} else {
  console.log('Not connected')
}

// Check specific connection states
if (account.isReconnecting) {
  console.log('Attempting to reconnect...')
}

Get Chain ID

Retrieves the current chain ID.

/**
 * Gets current chain ID
 * @param config - Wagmi configuration
 * @returns Current chain ID
 */
function getChainId<config extends Config>(config: config): GetChainIdReturnType<config>;

type GetChainIdReturnType<config extends Config> = config['chains'][number]['id'];

Usage Example:

import { getChainId } from '@wagmi/core'

const chainId = getChainId(config)
console.log('Current chain ID:', chainId)

// Use with chain information
const currentChain = config.chains.find(chain => chain.id === chainId)
console.log('Current chain name:', currentChain?.name)

Get Configured Chains

Retrieves all configured blockchain networks.

/**
 * Gets all configured chains
 * @param config - Wagmi configuration
 * @returns Array of configured chains
 */
function getChains<config extends Config>(config: config): GetChainsReturnType<config>;

type GetChainsReturnType<config extends Config> = config['chains'];

Usage Example:

import { getChains } from '@wagmi/core'

const chains = getChains(config)
console.log('Available chains:')
chains.forEach(chain => {
  console.log(`- ${chain.name} (${chain.id})`)
})

// Find specific chain
const mainnet = chains.find(chain => chain.id === 1)

Get Active Connections

Retrieves all active wallet connections.

/**
 * Gets current active connections
 * @param config - Wagmi configuration
 * @returns Array of active connections
 */
function getConnections<config extends Config>(config: config): GetConnectionsReturnType<config>;

interface GetConnectionsReturnType<config extends Config> {
  /** Connected accounts */
  accounts: readonly Address[];
  /** Connection chain ID */
  chainId: config['chains'][number]['id'];
  /** Connected connector */
  connector: Connector;
}[]

Usage Example:

import { getConnections } from '@wagmi/core'

const connections = getConnections(config)

if (connections.length > 0) {
  console.log('Active connections:')
  connections.forEach((connection, index) => {
    console.log(`Connection ${index + 1}:`)
    console.log('- Connector:', connection.connector.name)
    console.log('- Chain ID:', connection.chainId)
    console.log('- Accounts:', connection.accounts)
  })
} else {
  console.log('No active connections')
}

// Get primary connection
const primaryConnection = connections[0]

Get Available Connectors

Retrieves all available wallet connectors.

/**
 * Gets available connectors
 * @param config - Wagmi configuration
 * @returns Array of available connectors
 */
function getConnectors<config extends Config>(config: config): GetConnectorsReturnType<config>;

type GetConnectorsReturnType<config extends Config> = readonly Connector[];

Usage Example:

import { getConnectors } from '@wagmi/core'

const connectors = getConnectors(config)

console.log('Available connectors:')
connectors.forEach(connector => {
  console.log(`- ${connector.name} (${connector.id})`)
  console.log(`  Type: ${connector.type}`)
  if (connector.icon) {
    console.log(`  Icon: ${connector.icon}`)
  }
})

// Find specific connector
const metaMask = connectors.find(connector => connector.id === 'metaMask')
const injectedWallets = connectors.filter(connector => connector.type === 'injected')

Get Clients

Retrieves viem clients for blockchain interactions.

/**
 * Gets viem client for chain operations
 * @param config - Wagmi configuration
 * @param parameters - Client parameters (optional)
 * @returns Viem client instance
 */
function getClient<config extends Config>(
  config: config,
  parameters?: GetClientParameters<config>
): GetClientReturnType<config>;

interface GetClientParameters<config extends Config> {
  /** Chain ID to get client for */
  chainId?: config['chains'][number]['id'];
}

type GetClientReturnType<config extends Config> = Client;

/**
 * Gets public (read-only) viem client
 * @param config - Wagmi configuration
 * @param parameters - Public client parameters (optional)
 * @returns Public viem client
 */
function getPublicClient<config extends Config>(
  config: config,
  parameters?: GetPublicClientParameters<config>
): GetPublicClientReturnType<config>;

interface GetPublicClientParameters<config extends Config> {
  /** Chain ID to get public client for */
  chainId?: config['chains'][number]['id'];
}

type GetPublicClientReturnType<config extends Config> = PublicClient;

Usage Example:

import { getClient, getPublicClient } from '@wagmi/core'

// Get client for current chain
const client = getClient(config)

// Get client for specific chain
const mainnetClient = getClient(config, { chainId: 1 })

// Get read-only client
const publicClient = getPublicClient(config)

// Use clients directly with viem
const blockNumber = await publicClient.getBlockNumber()
console.log('Latest block:', blockNumber)

State Watching

Watch Account Changes

Monitor account state changes in real-time.

/**
 * Watches for account changes
 * @param config - Wagmi configuration
 * @param parameters - Watch parameters
 * @returns Unsubscribe function
 */
function watchAccount<config extends Config>(
  config: config,
  parameters: WatchAccountParameters<config>
): WatchAccountReturnType;

interface WatchAccountParameters<config extends Config> {
  /** Callback when account changes */
  onChange(account: GetAccountReturnType<config>): void;
}

type WatchAccountReturnType = () => void; // Unsubscribe function

Usage Example:

import { watchAccount } from '@wagmi/core'

const unsubscribe = watchAccount(config, {
  onChange(account) {
    if (account.isConnected) {
      console.log('Account connected:', account.address)
    } else if (account.isDisconnected) {
      console.log('Account disconnected')
    }
    
    // Handle account changes
    if (account.address) {
      // Update UI, fetch user data, etc.
      updateUserInterface(account.address)
    }
  },
})

// Cleanup when component unmounts
// unsubscribe()

Watch Chain Changes

Monitor chain ID changes in real-time.

/**
 * Watches for chain ID changes
 * @param config - Wagmi configuration
 * @param parameters - Watch parameters
 * @returns Unsubscribe function
 */
function watchChainId<config extends Config>(
  config: config,
  parameters: WatchChainIdParameters<config>
): WatchChainIdReturnType;

interface WatchChainIdParameters<config extends Config> {
  /** Callback when chain ID changes */
  onChange(chainId: GetChainIdReturnType<config>): void;
}

type WatchChainIdReturnType = () => void;

Usage Example:

import { watchChainId } from '@wagmi/core'

const unsubscribe = watchChainId(config, {
  onChange(chainId) {
    console.log('Chain changed to:', chainId)
    
    // Find chain information
    const chain = config.chains.find(c => c.id === chainId)
    if (chain) {
      console.log('Chain name:', chain.name)
      // Update app state, refresh data, etc.
      handleChainChange(chain)
    }
  },
})

// Cleanup
// unsubscribe()

Watch Client Changes

Monitor viem client changes.

/**
 * Watches for client changes
 * @param config - Wagmi configuration
 * @param parameters - Watch parameters
 * @returns Unsubscribe function
 */
function watchClient<config extends Config>(
  config: config,
  parameters: WatchClientParameters<config>
): WatchClientReturnType;

interface WatchClientParameters<config extends Config> {
  /** Callback when client changes */
  onChange(client: GetClientReturnType<config>): void;
}

type WatchClientReturnType = () => void;

/**
 * Watches for public client changes
 * @param config - Wagmi configuration
 * @param parameters - Watch parameters
 * @returns Unsubscribe function
 */
function watchPublicClient<config extends Config>(
  config: config,
  parameters: WatchPublicClientParameters<config>
): WatchPublicClientReturnType;

interface WatchPublicClientParameters<config extends Config> {
  /** Callback when public client changes */
  onChange(publicClient: GetPublicClientReturnType<config>): void;
}

type WatchPublicClientReturnType = () => void;

Usage Example:

import { watchClient, watchPublicClient } from '@wagmi/core'

// Watch for client changes (typically when chain switches)
const unsubscribeClient = watchClient(config, {
  onChange(client) {
    console.log('Client changed:', client.chain?.name)
    // Update app with new client
    updateBlockchainConnection(client)
  },
})

// Watch public client changes
const unsubscribePublicClient = watchPublicClient(config, {
  onChange(publicClient) {
    console.log('Public client changed')
    // Refresh read-only data
    refreshBlockchainData(publicClient)
  },
})

Combined State Example

Here's a comprehensive example showing how to use multiple state functions together:

import { 
  getAccount, 
  getChainId, 
  getChains, 
  getConnections,
  getConnectors,
  watchAccount,
  watchChainId 
} from '@wagmi/core'

// Get current state
function getCurrentState() {
  const account = getAccount(config)
  const chainId = getChainId(config)
  const chains = getChains(config)
  const connections = getConnections(config)
  const connectors = getConnectors(config)
  
  return {
    // Account info
    isConnected: account.isConnected,
    address: account.address,
    connector: account.connector?.name,
    
    // Chain info
    chainId,
    chainName: chains.find(c => c.id === chainId)?.name,
    availableChains: chains.map(c => ({ id: c.id, name: c.name })),
    
    // Connection info
    connectionCount: connections.length,
    availableConnectors: connectors.map(c => ({ id: c.id, name: c.name })),
  }
}

// Set up watchers
const unsubscribeAccount = watchAccount(config, {
  onChange: (account) => {
    console.log('Account changed:', {
      address: account.address,
      isConnected: account.isConnected,
      status: account.status,
    })
  },
})

const unsubscribeChain = watchChainId(config, {
  onChange: (chainId) => {
    const chain = config.chains.find(c => c.id === chainId)
    console.log('Chain changed:', { chainId, name: chain?.name })
  },
})

// Use in your app
const currentState = getCurrentState()
console.log('Current app state:', currentState)

Install with Tessl CLI

npx tessl i tessl/npm-wagmi--core

docs

account-chain-state.md

advanced-features.md

blockchain-data-reading.md

configuration.md

connection-management.md

contract-interactions.md

ens-operations.md

event-watching.md

index.md

signing-verification.md

tanstack-query.md

transaction-management.md

tile.json