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

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

yarn

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

pnpm

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 { mainnet, sepolia } from 'wagmi/chains'

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

blocto parameters

Paramter	Type	Description	Required
appId	String	Blocto dApp ID	NO

Blocto supportedChains

Mainnet	Testnet
Ethereum	Goerli
Ethereum	Sepolia
Arbitrum	ArbitrumGoerli
Optimism	OptimismGoerli
Polygon	Mumbai
Binance	BinanceTestnet
Avalanche	AvalancheFuji
Base	BaseGoerli
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

Resources

Getting Started

Wagmi Docs