Links
Comment on page

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.
Blocto currently supported various wallet connect solutions based on wagmi,
these solutions provide an amazing user experience. before you begin reading, you can take a look at the links above.

Installation

Install from npm/yarn/pnpm
npm
yarn
pnpm
npm i @blocto/wagmi-connector wagmi viem
yarn add @blocto/wagmi-connector wagmi viem
pnpm add @blocto/wagmi-connector wagmi viem

Configure chains

import { configureChains, mainnet } from 'wagmi'
import { mainnet, arbitrum, optimism, polygon, bsc, avalanche } from 'wagmi/chains'
import { goerli, arbitrumGoerli, optimismGoerli, polygonMumbai, bscTestnet, avalancheFuji } from 'wagmi/chains'
import { publicProvider } from 'wagmi/providers/public'
// Mainnet
const BLOCTO_SUPPORTED_MAINNET_CHAIN = [mainnet, arbitrum, optimism, polygon, bsc, avalanche];
// Testnet
const BLOCTO_SUPPORTED_TESTNET_CHAIN = [goerli, arbitrumGoerli, optimismGoerli, polygonMumbai, bscTestnet, avalancheFuji];
const { chains, publicClient, webSocketPublicClient } = configureChains(
BLOCTO_SUPPORTED_TESTNET_CHAIN,
[publicProvider()],
)
Using publicProvider in a production environment is not recommended. It's advisable to use alchemyProvider or infuraProvider as alternatives for the production environment's provider.

Blocto supportedChains

Mainnet
Testnet
Ethereum
Goerli
Arbitrum
ArbitrumGoerli
Optimism
OptimismGoerli
Polygon
Mumbai
Binance
BinanceTestnet
Avalanche
AvalancheFuji

Create config with Blocto

import { BloctoConnector } from '@blocto/wagmi-connector'
const config = createConfig({
autoConnect: true,
connectors: [new BloctoConnector({ chains, options: { appId: 'REPLACE_WITH_YOUR_DAPP_ID' } })]
publicClient,
webSocketPublicClient,
})

BloctoConnector parameters

Paramter
Type
Description
Required
chains
Chain[]
Connector supports Chains
YES
options.appId
String
Blocto dApp ID
NO

Wrap app with <WagmiConfig />

function App() {
return (
<WagmiConfig config={config}>
<YourRoutes />
</WagmiConfig>
)
}

Use Blocto with wagmi

import { useAccount, useConnect, useEnsName } from 'wagmi'
function Profile() {
const { address, isConnected } = useAccount()
const { data: ensName } = useEnsName({ address })
const { connect, connectors } = useConnect()
const [blocto] = connectors
if (isConnected) return <div>Connected to {ensName ?? address}</div>
return <button onClick={() => connect({ connector: blocto })}>Connect Wallet</button>
}

Sample Code

Resources

Example