跳转到内容
Use Ethereum

前端集成概览

前端集成概览

本页内容正在整理中，欢迎贡献。

概述

构建以太坊 DApp 的前端涉及钱包连接、合约读写、链上数据查询等多个环节。本章汇总主流技术栈和最佳实践，帮助你选择合适的工具组合。

主要内容

技术栈全景

前端 DApp 技术栈
├── 框架          React / Next.js / Vue
├── 链接库        wagmi + viem（推荐）/ ethers.js
├── 钱包连接      WalletConnect / RainbowKit / ConnectKit
├── 数据查询      The Graph / Alchemy SDK / 直接 RPC
├── 状态管理      Zustand / TanStack Query（react-query）
└── UI 组件       Tailwind CSS + shadcn/ui

核心工具对比

工具类别推荐度说明
wagmi v2React Hooks 库⭐⭐⭐⭐⭐以太坊 React 开发首选
viem底层 TypeScript 库⭐⭐⭐⭐⭐wagmi 底层，类型安全
RainbowKit钱包 UI 组件⭐⭐⭐⭐⭐开箱即用的钱包连接 UI
ethers.js v6JS 库⭐⭐⭐⭐成熟稳定，迁移成本低
The Graph数据索引⭐⭐⭐⭐⭐GraphQL 查询链上数据
Alchemy SDK节点 + 增强 API⭐⭐⭐⭐NFT API、Webhooks 等增强功能

快速开始（wagmi + RainbowKit + Next.js）

Terminal window
# 创建 Next.js 应用
npx create-next-app@latest my-dapp --typescript --tailwind --app


# 安装核心依赖
npm install wagmi viem @tanstack/react-query
npm install @rainbow-me/rainbowkit
app/providers.tsx
"use client";
import { WagmiProvider } from "wagmi";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { getDefaultConfig } from "@rainbow-me/rainbowkit";
import { mainnet, sepolia } from "wagmi/chains";
import "@rainbow-me/rainbowkit/styles.css";


const config = getDefaultConfig({
  appName: "My DApp",
  projectId: "YOUR_WALLETCONNECT_PROJECT_ID",
  chains: [mainnet, sepolia],
});


const queryClient = new QueryClient();


export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>{children}</RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
app/page.tsx
"use client";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import { useAccount, useReadContract } from "wagmi";


export default function Home() {
  const { address, isConnected } = useAccount();


  return (
    <main>
      <ConnectButton />
      {isConnected && <p>已连接: {address}</p>}
    </main>
  );
}

本章内容导航

页面内容
钱包连接MetaMask、WalletConnect、RainbowKit 详细配置
The Graph 数据查询部署 Subgraph、GraphQL 查询链上数据
Next.js 最佳实践SSR/SSG 与 Web3 结合、SEO、性能优化

常见开发模式

读取链上数据（useReadContract）

const { data: balance } = useReadContract({
  address: TOKEN_ADDRESS,
  abi: erc20Abi,
  functionName: "balanceOf",
  args: [address],
});

发送交易（useWriteContract）

const { writeContract, isPending } = useWriteContract();


const handleTransfer = () => {
  writeContract({
    address: TOKEN_ADDRESS,
    abi: erc20Abi,
    functionName: "transfer",
    args: [recipient, amount],
  });
};

深入阅读