Skip to content

Latest commit

 

History

History
163 lines (130 loc) · 4.26 KB

integrate-with-wagmi-1.md

File metadata and controls

163 lines (130 loc) · 4.26 KB
Raw
description
You can easily use Blocto on Wagmi

Integrate with Wagmi v1

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

{% tabs %} {% tab title="npm" %}

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

{% endtab %}

{% tab title="yarn" %}

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

{% endtab %}

{% tab title="pnpm" %}

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

{% endtab %} {% endtabs %}

Configure chains

import { configureChains, mainnet } from 'wagmi'
import { mainnet, arbitrum, optimism, polygon, bsc, avalanche } from 'wagmi/chains'
import { bscTestnet, sepolia  } 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 = [bscTestnet, sepolia];

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 Sepolia
Arbitrum ArbitrumSepolia
Optimism OptimismSepolia
Polygon X
Binance BinanceTestnet
Avalanche AvalancheFuji
Base BaseSepolia
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

ParamterTypeDescriptionRequired
chainsChain[]Connector supports ChainsYES
options.appIdStringBlocto dApp IDNO

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

{% embed url="https://codesandbox.io/s/github/blocto/blocto-sdk-examples/tree/main/src/adapter/evm/with-wagmi-v1?file=/src/wagmi.ts" %}

Resources

Getting Started

Example