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.
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
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.Mainnet | Testnet |
|---|---|
Ethereum | Goerli |
Arbitrum | ArbitrumGoerli |
Optimism | OptimismGoerli |
Polygon | Mumbai |
Binance | BinanceTestnet |
Avalanche | AvalancheFuji |
import { BloctoConnector } from '@blocto/wagmi-connector'
const config = createConfig({
autoConnect: true,
connectors: [new BloctoConnector({ chains, options: { appId: 'REPLACE_WITH_YOUR_DAPP_ID' } })]
publicClient,
webSocketPublicClient,
})
Paramter | Type | Description | Required |
|---|---|---|---|
chains | Chain[] | Connector supports Chains | YES |
options.appId | String | Blocto dApp ID | NO |
function App() {
return (
<WagmiConfig config={config}>
<YourRoutes />
</WagmiConfig>
)
}
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>
}
Last modified 4d ago