1. 概述

常规信息

在编写并部署智能合约后，下一步是构建一个用户界面（UI），以便用户能够直观、简便地与智能合约进行交互，而无需费力地直接操作智能合约函数。

目前，React（以及基于 React 构建的框架）是 Web3 行业中最受欢迎的选择。得益于 React 庞大的库资源和开放生态，像 Vue 或 Angular 这样的其他框架很少被使用。

界面如何与智能合约交互？

前端 UI 可以通过连接 RPC 区块链节点来与智能合约交互。RPC 代表远程过程调用（Remote Procedure Call），它本质上是一种协议，帮助客户端（此处指界面）连接到区块链网络以请求数据，或执行诸如发送交易、与智能合约交互等操作。

你可以使用自己在服务器上安装并运行的区块链节点，也可以使用节点即服务提供商（Node-as-a-Service）。如果你的连接需求较小，使用节点即服务提供商将为你节省大量成本。

2. 前端项目结构

我们将使用以下技术栈来构建前端：

• Next.JS - React 生产级框架
• TailwindCSS - 实用优先的 CSS 类库
• Shadcn UI - 基于 Tailwind 的 React 组件库
• Wagmi v2 - 用于与区块链交互的 React Hook 库
• WalletConnect - 用于连接 DApp 与钱包的通信协议
• Rainbowkit - 用于将钱包连接至 DApp 的组件库
• React Query Tanstack - 用于在 React 中执行数据查询的库

以下是为 Solidity 部分中的 FundMe 智能合约构建 UI 的示例项目布局。

.
├── README.md
├── abi
│   └── FundMe.json
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.tsx
│   └── providers.tsx
├── components
│   ├── abi.ts
│   ├── fund-me-balance.tsx
│   ├── fund.tsx
│   ├── my-fund.tsx
│   └── ui
├── components.json
├── lib
│   └── utils.ts
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── next.svg
│   └── vercel.svg
├── tailwind.config.ts
└── tsconfig.json