integrate-with-wagmi.md

description
You can easily use Blocto on Wagmi

Integrate with Wagmi

Wagmi is a collection of React Hooks containing everything you need to start working with Ethereum. Wagmi makes it easy to "Connect Wallet," display ENS and balance information, sign messages, interact with contracts, and much more — all with caching, request deduplication, and persistence.

Installation

Install from npm/yarn/pnpm

{% tabs %} {% tab title="npm" %}

npm i @blocto/wagmi-connector@^2 wagmi [email protected] @tanstack/react-query

{% endtab %}

{% tab title="yarn" %}

yarn add @blocto/wagmi-connector@^2 wagmi [email protected] @tanstack/react-query

{% endtab %}

{% tab title="pnpm" %}

pnpm add @blocto/wagmi-connector@^2 wagmi [email protected] @tanstack/react-query

{% endtab %} {% endtabs %}

Create config with Blocto

import { blocto } from '@blocto/wagmi-connector'
import { http, createConfig } from 'wagmi'
import { polygonAmoy, mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [polygonAmoy, mainnet, sepolia],
  connectors: [blocto({ appId: 'REPLACE_WITH_YOUR_DAPP_ID' })],
  transports: {
    [polygonAmoy.id]: http(),
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

blocto parameters

Paramter	Type	Description	Required
appId	String	Blocto dApp ID	NO

Blocto supportedChains

Mainnet	Testnet
Ethereum	Sepolia
Arbitrum	ArbitrumSepolia
Optimism	OptimismSepolia
Polygon	Amoy
Binance	BinanceTestnet
Avalanche	AvalancheFuji
Base	BaseSepolia
Zora	ZoraTestnet
Scroll	ScrollSepolia

Wrap app with <WagmiConfig /> and <QueryClientProvider />

import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 
import { WagmiProvider } from 'wagmi'
import { config } from './config'

const queryClient = new QueryClient() 

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}> 
        {/** ... */} 
      </QueryClientProvider> 
    </WagmiProvider>
  )
}

Use Blocto with Wagmi

import { useAccount, useEnsName } from 'wagmi'

function Profile() {
  const { address } = useAccount()
  const { data, error, status } = useEnsName({ address })
  if (status === 'pending') return <div>Loading ENS name</div>
  if (status === 'error')
    return <div>Error fetching ENS name: {error.message}</div>
  return <div>ENS name: {data}</div>
}

Sample Code

{% embed url="https://codesandbox.io/s/github/blocto/blocto-sdk-examples/tree/main/src/adapter/evm/with-wagmi" %}

Resources

Getting Started

Wagmi Docs