Chain Abstraction

Overview

note

💡 Support for Chain Abstraction is currently in experimental phase.

Chain abstraction simplifies interactions across different blockchains, allowing users to transact seamlessly without worrying about network-specific tokens.

To fully leverage chain abstraction, wallets need to support its implementation, and minor adjustments are required on the Dapp side.

Dapps may not always be aware of the balances across different chains or accounts that wallets can access. Therefore, it’s crucial to ensure that the call does not fail on the Dapp side.

This guide focuses on the most common ways Dapps interact with wallets using the Wagmi library.

Implementations

useWriteContract

Wagmi

This is the basic example of the useWriteContract hook. You need to include the __mode: “prepared” parameter when calling the writeContract or writeContractAsync method

import { useWriteContract } from 'wagmi'
import { abi } from './abi'

function App() {
  const { writeContract } = useWriteContract()

  return (
    <button
      onClick={() =>
        writeContract({
          abi,
          address: '0x6b175474e89094c44da98b954eedeac495271d0f',
          functionName: 'transferFrom',
          args: [
            '0xd2135CfB216b74109775236E36d4b433F1DF507B',
            '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e',
            123n
          ],
          __mode: 'prepared' // <- Add this
        })
      }
    >
      Transfer
    </button>
  )
}

useSendTransaction

Wagmi

The useSendTransaction hook attempts to estimate gas on the Dapp side before forwarding the call to the wallet. However, gas estimation might fail because the Dapp may not account for all the funds available to the wallet across different chains.

To ensure the call is sent successfully, the wallet must handle gas estimation. You need to pass gas: null to the sendTransaction method.

import { useSendTransaction } from 'wagmi'
import { parseEther } from 'viem'

function App() {
  const { sendTransaction } = useSendTransaction()

  return (
    <button
      onClick={() =>
        sendTransaction({
          to: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
          value: parseEther('0.01'),
          gas: null // <- Add this
        })
      }
    >
      Send transaction
    </button>
  )
}