DOCSEARCHbyAlgolia
Submit Docs

wagmi

website·Indexed 37 days ago

https://wagmi.sh

A collection of React hooks and actions for interacting with blockchain services, including AMM (Automated Market Maker) operations like minting and burning liquidity, and Stablecoin DEX orderbook functionality such as placing limit orders, buying, and selling tokens.

Tokens
320.3K
Snippets
1.6K
Records
2.1K
Agent score
70%

What's inside wagmi

  1. Overview of TanStack Query in Wagmi Vue

    Wagmi Composables use TanStack Query to manage asynchronous data in Vue applications, handling loading/error states, race conditions, and caching.

    • Queries: Used for fetching data (e.g., reading a contract). They are tied to a unique Query Key and typically run on mount.
    • Mutations: Used for changing data or triggering side-effects (e.g., writing to a contract, switching chains). They are not tied to a query key and are typically triggered by user interaction.

  2. Overview of wagmi React Hooks

    wagmi provides a comprehensive set of React Hooks designed for interacting with the Ethereum blockchain. These hooks cover essential functionality including account management, wallet connectivity, contract interactions, transaction handling, signing, and ENS (Ethereum Name Service) resolution.
    import { useConnection } from 'wagmi'

  3. Overview of Wagmi CLI

    Wagmi CLI is a command line interface designed to automate the management of ABIs (from sources like Etherscan, block explorers, Foundry, or Hardhat projects) and generate corresponding code, such as React Hooks, to accelerate Ethereum application development.

  4. Overview of Wagmi Core

    Wagmi Core is a library designed to simplify the development of Ethereum applications by providing modular and composable APIs for common blockchain tasks. It handles complex requirements such as wallet connections, multi-chain support, signing messages/data, sending transactions, and listening for events, allowing developers to focus on application-specific logic rather than blockchain infrastructure intricacies.

  5. Overview of Wagmi for Ethereum Application Development

    Wagmi is a library designed to simplify the development of Ethereum applications by providing modular and composable APIs for common blockchain tasks. It abstracts the complexities of connecting wallets, managing multi-chain support, signing messages/data, sending transactions, and listening for events. It is built by the same team as Viem and integrates with TanStack Query for data layer performance (caching, deduplication, and persistence).

  6. Overview of supported Tempo connectors

    Tempo provides several connectors that serve as thin Wagmi wrappers around the root accounts package. Available connectors include:

    • tempoWallet: Used for the Tempo Wallet dialog.
    • webAuthn: Used for WebAuthn EOAs (Externally Owned Accounts).
    • dangerous_secp256k1: Used for secp256k1 private key EOAs.

  7. Understand Wagmi's use of TanStack Query

    Wagmi Hooks use TanStack Query to handle the complexities of asynchronous data fetching, such as loading/error/success states, race conditions, and caching. Wagmi operations are categorized into two types:

    • Queries: Used for fetching data (e.g., reading a block number or contract). They are tied to a unique Query Key and typically run on mount.
    • Mutations: Used for changing data or triggering side-effects (e.g., writing to a contract, switching chains). They are typically triggered by user interaction and are not tied to a query key.

  8. Understand the amm.mint return type

    The return type for the amm.mint action (or the extracted event data) provides detailed information about the liquidity provision:
    type ReturnType = {
  amountUserToken: bigint      // Amount of user tokens provided
  amountValidatorToken: bigint // Amount of validator tokens provided
  liquidity: bigint            // Amount of liquidity tokens minted
  receipt: TransactionReceipt // Transaction receipt
  sender: Address             // Address that initiated the mint
  userToken: Address          // Address of the user token
  validatorToken: Address     // Address of the validator token
}

  9. Retrieve Tempo zone authorization token info with `zone.useAuthorizationTokenInfo`

    The zone.useAuthorizationTokenInfo hook retrieves information about the current Tempo zone authorization token. This hook requires that a zone authorization token already exists in storage; if one has not been created, use the zone.useSignAuthorizationToken hook first.

    Requirement: This hook requires viem >= 2.56.0.

    import { Hooks } from 'wagmi/tempo'
import { Zone } from 'viem/tempo'

const zoneChain = Zone.b

const { data } = Hooks.zone.useAuthorizationTokenInfo({
  chainId: zoneChain.id,
  query: {
    initialData: {
      account: '0x20c0000000000000000000000000000000000000',
      expiresAt: 1_700_000_000n,
    },
  },
})

console.log('Expires At:', data?.expiresAt)

  10. Configure JSON-RPC Transports in wagmi

    In wagmi, a Transport is the intermediary layer responsible for executing outgoing JSON-RPC requests to an RPC Provider (such as Alchemy or Infura). Transports are defined within the createConfig function and are specified for each chain in the configuration.

  11. Get the current connection using getConnection

    The getConnection action from @wagmi/core retrieves the current connection state. It requires a wagmi config object to function. The returned connection object contains details about the connected account, the chain, and the current connection status.
    import { getConnection } from '@wagmi/core'
import { config } from './config'

const connection = getConnection(config)

  12. Simulate contract interactions with useSimulateContract

    The useSimulateContract hook from @wagmi/solid is a primitive used to simulate or validate a contract interaction before actually sending a transaction. It leverages TanStack Query for state management, providing detailed information about the simulation status, including whether the call is pending, successful, or resulted in an error. The return type's data property is automatically inferred based on the provided abi, functionName, and args.
    import { useSimulateContract } from '@wagmi/solid'