RainbowKit是干什么用的

一 RainbowKit

可能有些人有点晕，不是已经有viem了，怎么又来一个，那这个RainbowKit又是干什么的？RainbowKit 提供开箱即用的钱包管理，处理钱包的连接与断开、支持众多钱包类型、切换区块链网络、解析地址到 ENS（以太坊域名服务）、显示余额等。它内置了美观且​​可定制​​的 UI 组件（如连接按钮、账户菜单），支持深色模式，并且可以匹配你的品牌风格。

一句话 “你就把它当作是帮你搞好的一个模版ui”，真实的开发中这种一般适合没有前端的公司

核心知识点：

1.RainbowKitProvider

    这个使用起来很简单，直接包裹你的根组件即可，示例代码

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

// 导入 RainbowKit 样式和依赖
import '@rainbow-me/rainbowkit/styles.css';
import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum, base, sepolia } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// 配置 Wagmi 和 RainbowKit
const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_WALLETCONNECT_PROJECT_ID', // 替换成你的 WalletConnect projectId
  chains: [mainnet, sepolia], // 你可以根据需要添加或修改链
});

// 设置 React Query 的 client
const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <App />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>,
)

2.ConnectButton​

在你的应用组件（例如 App.tsx）中，使用 ConnectButton组件。

import { ConnectButton } from '@rainbow-me/rainbowkit';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>My DApp</h1>
      <ConnectButton />
      {/* 你的其他应用内容 */}
    </div>
  )
}

export default App

3.getDefaultWallets

getDefaultWallets是 ​​RainbowKit​​ 中的一个核心函数，主要用于配置和返回一组​​默认的钱包连接选项​​。

简单来说，它为你提供了一套开箱即用的流行钱包列表，让用户在连接你的 DApp 时可以选择他们习惯的钱包，例如 MetaMask、Coinbase Wallet 等。

import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { mainnet, polygon } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';

// 1. 配置你希望支持的链和提供者（Provider）
const { chains, publicClient } = configureChains(
  [mainnet, polygon], // 你可以替换或添加其他链
  [publicProvider()]  // 你可以添加如 alchemyProvider 或 infuraProvider
);

// 2. 获取默认钱包配置
const { connectors } = getDefaultWallets({
  appName: 'My RainbowKit App', // 你的DApp名称
  projectId: 'YOUR_PROJECT_ID',  // 从 WalletConnect Cloud 获取的 projectId
  chains,                       // 传入上面配置的链
});

// 3. 创建 Wagmi 客户端配置
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,      // 使用从 getDefaultWallets 返回的连接器
  publicClient,
});

// 4. 在你的应用组件中，用 WagmiConfig 和 RainbowKitProvider 包裹你的应用
function App() {
  return (
    <WagmiConfig config={wagmiConfig}>
      <RainbowKitProvider chains={chains}>
        <YourAppComponent />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

二 @tanstack/react-query

它专注于处理数据的​​获取、缓存、同步和更新​​。它会帮你打理好那些繁琐的异步数据操作，

面是一个快速体验的 Demo，展示了如何查询和更新数据：

优点：

智能缓存与自动同步​​	自动缓存请求结果，​​相同请求只发一次​​。支持窗口聚焦、网络重连时自动重新获取数据，保持数据新鲜。
​​强大的状态管理​​	提供 isLoading, isError, isSuccess等标准状态，简化 UI 逻辑。
​​乐观更新​​	可在请求完成前​​先更新 UI​​，失败后自动回滚，用户体验更流畅。
​​分页与无限滚动​​	内置 useInfiniteQuery等钩子，简化分页和无限滚动逻辑。
​​自动重试​​	请求失败时可自动按策略重试。

import { QueryClient, QueryClientProvider, useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useState } from 'react';

// 1. 创建 QueryClient 实例
const queryClient = new QueryClient();

// 2. 示例：获取待办事项
function fetchTodos() {
  return fetch('https://jsonplaceholder.typicode.com/todos').then(res => res.json());
}

// 3. 示例：添加新待办
function addTodo(newTodo) {
  return fetch('https://jsonplaceholder.typicode.com/todos', {
    method: 'POST',
    body: JSON.stringify(newTodo),
    headers: { 'Content-type': 'application/json; charset=UTF-8' },
  }).then(res => res.json());
}

// 使用 useQuery 获取数据
function TodoList() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['todos'], // 查询的唯一标识
    queryFn: fetchTodos, // 获取数据的函数
  });

  if (isLoading) return <div>加载中...</div>;
  if (isError) return <div>出错啦: {error.message}</div>;

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

// 使用 useMutation 修改数据
function AddTodo() {
  const queryClient = useQueryClient();
  const [title, setTitle] = useState('');

  // 定义 mutation
  const mutation = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      // (1) 使缓存失效，触发重新获取
      queryClient.invalidateQueries({ queryKey: ['todos'] });
      // (2) 清空输入框
      setTitle('');
    },
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    mutation.mutate({ title, completed: false, userId: 1 });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="输入新待办"
      />
      <button type="submit" disabled={mutation.isPending}>
        {mutation.isPending ? '添加中...' : '添加'}
      </button>
    </form>
  );
}

// 4. 用 Provider 包裹应用
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AddTodo />
      <TodoList />
    </QueryClientProvider>
  );
}

export default App;

​