Comment on page
Integrate with RainbowKit
You can easily add Blocto wallet to RainbowKit
RainbowKit provides a fast, easy and highly customizable way for developers to add a great wallet experience to their application. It handle the hard stuff so developers and teams can focus on building amazing products and communities for their users.
Note that Blocto SDK for EVM-compatible chains is still in Beta. APIs are subject to breaking changes.
If you wish to use autoconnect, ensure that your version of @blocto/rainbowkit-connector is 0.2.4 or higher.
Install from npm/yarn/pnpm
npm
yarn
pnpm
npm install @rainbow-me/rainbowkit wagmi viem @blocto/rainbowkit-connector
yarn add @rainbow-me/rainbowkit wagmi viem @blocto/rainbowkit-connector
pnpm add @rainbow-me/rainbowkit wagmi viem @blocto/rainbowkit-connector
Import RainbowKit, wagmi, and bloctoWallet.
import '@rainbow-me/rainbowkit/styles.css';
import {
getDefaultWallets,
connectorsForWallets,
RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { polygon, optimism, arbitrum, bsc, mainnet } from "wagmi/chains";
import { publicProvider } from 'wagmi/providers/public';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { bloctoWallet } from '@blocto/rainbowkit-connector';
Configure your desired chains and generate the required connectors. You will also need to setup a wagmi client.
Note: Note: Every dApp that relies on WalletConnect now needs to obtain a projectId from WalletConnect Cloud. This is absolutely free and only takes a few minutes.
const { chains, publicClient, webSocketPublicClient } = configureChains(
[polygon, optimism, arbitrum, bsc, mainnet],
[alchemyProvider({ apiKey: process.env.ALCHEMY_ID || "" }), publicProvider()]
);
const { wallets } = getDefaultWallets({
appName: "My RainbowKit App",
projectId: "YOUR_PROJECT_ID",
chains
});
const connectors = connectorsForWallets([
...wallets,
{
groupName: "Other",
wallets: [
bloctoWallet({ chains }), // add BloctoWallet
]
}
]);
const wagmiConfig = createConfig({
autoConnect: true,
connectors,
publicClient,
webSocketPublicClient,
});
Wrap your application with RainbowKitProvider and WagmiConfig.
const App = () => {
return (
<WagmiConfig client={wagmiConfig}>
<RainbowKitProvider chains={chains}>
<YourApp />
</RainbowKitProvider>
</WagmiConfig>
);
};
Then, in your app, import and render the
ConnectButton component.import { ConnectButton } from '@rainbow-me/rainbowkit';
export const YourApp = () => {
return <ConnectButton />;
};
RainbowKit will now handle your user's wallet selection, display wallet/transaction information and handle network/wallet switching.
Now you can easily use
Rainbowkit connect BloctoWalletTo see more configurations, please check out
Last modified 4d ago