Integrate with Wagmi

You can easily use Blocto on 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

npm i @blocto/wagmi-connector@^2 wagmi viem@2.x @tanstack/react-query

yarn add @blocto/wagmi-connector@^2 wagmi viem@2.x @tanstack/react-query

pnpm add @blocto/wagmi-connector@^2 wagmi viem@2.x @tanstack/react-query

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

Blocto supportedChains

Mainnet

Testnet

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>
}