Integrate with Wagmi v1

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,

• Integrate with RainbowKit(v1)

• Integrate with web3modal

• Integrate with thirdweb

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

npm i @blocto/wagmi-connector@^1.3.1 wagmi@^1.4.12 viem@~1.0.0

yarn

yarn add @blocto/wagmi-connector@^1.3.1 wagmi@^1.4.12 viem@~1.0.0

pnpm

pnpm add @blocto/wagmi-connector@^1.3.1 wagmi@^1.4.12 viem@~1.0.0

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
Ethereum	Sepolia
Arbitrum	ArbitrumGoerli
Optimism	OptimismGoerli
Polygon	Mumbai
Binance	BinanceTestnet
Avalanche	AvalancheFuji
Base	BaseGoerli
Zora	ZoraTestnet
Scroll	ScrollSepolia

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

Getting Started

Example