1. 概述

一般信息

编写并部署智能合约后，下一步是构建交互界面，让用户能够直观简便地操作，而非笨拙地与智能合约功能进行交互。

目前，React（以及基于React构建的框架）在Web3行业中最为流行。得益于React丰富的库资源和开放的生态系统，其他框架如Vue或Angular在该领域鲜少被采用。

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

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

您可以使用自行在服务器上安装和运行的区块链节点，或采用节点即服务提供商（Node service providers）。若您的连接需求较小，节点即服务提供商将助您节省大量成本。

2. 前端项目的结构

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

• Next.JS- React 生产环境框架
• TailwindCSS- CSS 实用类库
• Shadcn UI- 基于 Tailwind 的 React 组件库
• Wagmi v2- 用于与区块链交互的 React 钩子库
• WalletConnect- 连接去中心化应用程序（DApp）与钱包的通信协议
• Rainbowkit- 连接钱包与去中心化应用的组件库
• React Query Tanstack- 用于执行 React 查询的库

以下是Solidity部分中用于构建FundMe智能合约用户界面的示例项目布局。

├── 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