VanillaJS library for Ethereum blockchain interactions with reactive primitives and utilities for building Ethereum applications
—
Access to current account information, chain details, and connection status. Essential for understanding application state.
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...')
}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)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)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]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')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)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 functionUsage 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()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()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)
},
})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