在区块链项目中，我们往往需要跟链进行交互，而在浏览器中最直接最大众的就是使用Metamask小狐狸钱包，只要链接到了小狐狸，那就可以跟链上进行交互。
在区块链项目中，往往不会直接使用ethers.js或者web3.js来与小狐狸交互，因为这样会比较麻烦，为了解决更快的与链上连接和交互，衍生出了很多第三方库web3-react、web3-modal、rainbow-kit(基于wagmi进行封装)、wagmi，当然还有很多，这里只说了在项目中使用相对来说比较多的一些库。
就拿YaSol我自己来说，刚开始是用web3-modal后面朋友推荐说用web3-react,然后就一直使用web3-react,毕竟web3-react是uniswap搞得，所以热度还是比较高，但是在去年年底左右，发现了一个黑马wagmi,发现这头黑马还是因为在年底的一些区块链项目中，好多项目都在使用rainbowKit作为链接小狐狸的工具
下面就简单介绍一下rainbowKit的使用，后续也会继续讲解wagmi的一些使用方法
简介
借用官方的描述： rainbowKit是连接钱包的最佳方法，转为每个人设计，专为开发人员打造。其实这句话也确实是有道理，rainbowKit其实有点像web3-modal他都是提供好了一套连接钱包的UI给你，你直接用就行，而web3-react只是提供了一些功能，需要自己配置和开发UI，下面是rainbowKit的弹窗样式，感觉还是挺不错的。全部帮你搞定了，不需要你再设置UI界面，不需要你再去配置钱包，开箱即用，还自带移动端
官网链接: www.rainbowkit.com/
使用
rainbowkit提供了官方demo
demo使用的技术栈是Next.js+wagmi+rainbowKit
npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit
当然我们也可以直接安装使用
1.第一步：在项目中安装库
yarn add @rainbow-me/rainbowkit wagmi ethers
2.在项目的/pages/_app.tsxor/app/layout.tsx中引入并配置
next.js12版本配置方法
// pages/_app.tsx
import '../styles/globals.css';
import '@rainbow-me/rainbowkit/styles.css';
import type { AppProps } from 'next/app';
import { RainbowKitProvider, getDefaultWallets, darkTheme, lightTheme } from '@rainbow-me/rainbowkit';
import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum, goerli, polygonMumbai } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';
import { NextPage } from 'next';
import { ReactElement, ReactNode } from 'react';
//配置支持的链以及rpc
const { chains, provider, webSocketProvider } = configureChains(
[
mainnet,
polygon,
goerli,
polygonMumbai
// 下面这行可以检测不同的环境
// 比如在测试环境中支持测试网
// ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [goerli] : []),
],
[
publicProvider(),
]
);
//配置名字，链接coinbase的时候或者有些地方链接会显示名字，则在这里配置
const { connectors } = getDefaultWallets({
appName: 'YaSol RainbowKit demo',
chains,
});
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
webSocketProvider,
});
function MyApp({ Component, pageProps }:AppProps) {
return (
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains}>
<Component {...pageProps} />
</RainbowKitProvider>
</WagmiConfig>
);
}
export default MyApp;
next13.js配置方法
//app/layout.tsx
/* eslint-disable @next/next/no-head-element */
import Link from 'next/link';
import './globals.css';
import '@rainbow-me/rainbowkit/styles.css';
import { RainbowKitProvider, getDefaultWallets, darkTheme, lightTheme } from '@rainbow-me/rainbowkit';
import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum, goerli, polygonMumbai } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';
//配置支持的链以及rpc
const { chains, provider, webSocketProvider } = configureChains(
[
mainnet,
polygon,
goerli,
polygonMumbai
// 下面这行可以检测不同的环境
// 比如在测试环境中支持测试网
// ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [goerli] : []),
],
[
publicProvider(),
]
);
//配置名字，链接coinbase的时候或者有些地方链接会显示名字，则在这里配置
const { connectors } = getDefaultWallets({
appName: 'YaSol RainbowKit demo',
chains,
});
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
webSocketProvider,
});
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains}>
<main>
{children}
</main>
</RainbowKitProvider>
</WagmiConfig>
</body>
</html>
);
}
3.在项目中使用
rainbowKit已经帮我们定制好了UI，我们只需要调用特定的方法或者特定的组件就可以
//index.tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';
const Home = () => {
return(
<div>
<ConnectButton />
</div>
)
};
export default Home
将上面的<ConnectButton/>组件加载到页面中即可看见Connect Wallet按钮
点击connect Wallet按钮后，会弹窗rainbowKit自带的连接钱包弹窗
选择其中一个钱包进行连接，连接后就能看到我们选择的链，我们的余额，我们的ENS或者钱包地址
3.1修改按钮文字
如果需要更改按钮的字体，可以使用在组件中转入label属性
<ConnectButton label="我是自定义按钮文字" />
3.2 链接钱包后链的显示
// 只显示全部
<ConnectButton chainStatus="full" />
// 只显示图标
<ConnectButton chainStatus="icon" />
//只显示名字
<ConnectButton chainStatus="name" />
//不显示
<ConnectButton chainStatus="none" />
3.3 连接钱包后不显示余额
<ConnectButton showBalance={false} />
3.4 用户不显示头像或者不显示Ens或者全部显示
//显示全部
<ConnectButton accountStatus={"full"} />
//显示头像
<ConnectButton accountStatus={"avatar"} />
//显示ENS或者地址
<ConnectButton accountStatus={"address"} />
3.5自定义按钮以及主题
自定义这块，YaSol就不过多的讲解了，下面是官方的一些demo，可以根据demo中的一些参数进行定义自己的样式
import { ConnectButton } from '@rainbow-me/rainbowkit';
export const YourApp = () => {
return (
<ConnectButton.Custom>
{({
account,
chain,
openAccountModal,
openChainModal,
openConnectModal,
authenticationStatus,
mounted,
}) => {
// Note: If your app doesn't use authentication, you
// can remove all 'authenticationStatus' checks
const ready = mounted && authenticationStatus !== 'loading';
const connected =
ready &&
account &&
chain &&
(!authenticationStatus ||
authenticationStatus === 'authenticated');
return (
<div
{...(!ready && {
'aria-hidden': true,
'style': {
opacity: 0,
pointerEvents: 'none',
userSelect: 'none',
},
})}
>
{(() => {
if (!connected) {
return (
<button onClick={openConnectModal} type="button">
Connect Wallet
</button>
);
}
if (chain.unsupported) {
return (
<button onClick={openChainModal} type="button">
Wrong network
</button>
);
}
return (
<div style={{ display: 'flex', gap: 12 }}>
<button
onClick={openChainModal}
style={{ display: 'flex', alignItems: 'center' }}
type="button"
>
{chain.hasIcon && (
<div
style={{
background: chain.iconBackground,
width: 12,
height: 12,
borderRadius: 999,
overflow: 'hidden',
marginRight: 4,
}}
>
{chain.iconUrl && (
<img
alt={chain.name ?? 'Chain icon'}
src={chain.iconUrl}
style={{ width: 12, height: 12 }}
/>
)}
</div>
)}
{chain.name}
</button>
<button onClick={openAccountModal} type="button">
{account.displayName}
{account.displayBalance
? ` (${account.displayBalance})`
: ''}
</button>
</div>
);
})()}
</div>
);
}}
</ConnectButton.Custom>
);
};
👆🏻上面代码的样式就是原始样式，大家可以自行更改就自己的UI风格
3.6更改主题
现在越来越多的网站都会有有暗色和亮色双模式，或者设置为跟随系统，那RainbowKit在默认就自带了light和dark双色系主题的
下面是我这边使用next-theme来控制RainbowKit的暗色和亮色主题，大家可以根据自己的项目自行改
function MyApp({ Component, pageProps }:AppProps) {
return (
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider theme={
isDark ?
// lightMode: lightTheme({ ...lightTheme, borderRadius: "medium" }),
darkTheme({ ...darkTheme, borderRadius: "medium" })
:
lightTheme({ ...lightTheme, borderRadius: "medium" })
} chains={chains}>
<Component {...pageProps} />
</RainbowKitProvider>
</WagmiConfig>
);
}
4.部分方法
有时候并不想通过用户点击来触发连接钱包弹窗，或者说并不想通过他的按钮组件来触发弹窗，那我们要咋办呢，方法还是有的，只能说RainbowKit考虑还是比较周到的，还特意提供了钩子方法
import {
useConnectModal,
useAccountModal,
useChainModal,
} from '@rainbow-me/rainbowkit';
export const YourApp = () => {
const { openConnectModal } = useConnectModal();
const { openAccountModal } = useAccountModal();
const { openChainModal } = useChainModal();
return (
<>
//调用openConnectModal即可调起连接钱包弹窗
{openConnectModal && (
<button onClick={openConnectModal} type="button">
Open Connect Modal
</button>
)}
//调用openAccountModal即可调起用户弹窗可以复制和退出
{openAccountModal && (
<button onClick={openAccountModal} type="button">
Open Account Modal
</button>
)}
//调用openChainModal即可调起切换链的弹窗
{openChainModal && (
<button onClick={openChainModal} type="button">
Open Chain Modal
</button>
)}
</>
);
};
🔥调用openChainModal方法即可调起切换链的弹窗
🔥 调用openAccountModa方法l即可调起用户弹窗可以复制和退出
🔥调用openConnectModal方法即可调起连接钱包弹窗
总结
其实RainbowKit真的比web3-react方便很多，开箱即用，web3-react需要自己配置各种东西，且需要自己设计UI，只能说各有优劣，web3-react给你提供很多，你想要哪个就哪个，你想要UI长什么样就什么样，定制化程度高，而rainbowKit则全部帮你封装好了，你不需要经过复杂的配置即可使用，当然也提供自定义方法，就是有些地方定制化会比较麻烦一些而已，总的来说，RainbowKit确实是一款很优秀的库，目前用起来少了很多bug。
后续会继续写一篇关于wagmi库的使用，欢迎大家持续关注和交流学习
