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

appId

String

Blocto dApp ID

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