web3前端最佳实践指南

午时已到
更新于 2024-06-03 11:15
阅读 354

框架的选择众所周知，目前前端开发有三大主流框架

# 框架的选择

众所周知，目前前端开发有三大主流框架：

- `React`
- `Vue`
- `Angular`

在 `Web2` 中，这三个框架都或多或少的被使用，尤其是 `Vue`，在国内前端开发者中更为受欢迎。

然而，在 `Web3` 领域，`React` 算是一家独大。无论是去中心化应用（dApps）、生态项目的官网，还是区块链浏览器，`React` 都是开发者的首选框架。可以说，超过 90% 的区块链项目前端都采用 `React` 进行开发，究其原因是因为在`Web3`中，`React` 拥有这更广泛的生态系统和丰富社区资源。

同时，为了优化用户体验，近年来前端开发者越来越倾向于使用服务端渲染（SSR），将需要展示的 HTML 数据提前在服务器端生成。这也造就了 `React` 服务端渲染框架 `Next.js` 的流行, 尽管推上有很多人吐槽 `Next.js`，但无疑其目前是最好的`React` 服务端渲染框架。

而且`Next.js` 也可以用来写后端 api, 集成数据库等。所以框架的最佳选择非  `Next.js` 莫属。

## 服务端组件 or 客户端组件

`Next.js` 支持服务端组件和客户端组件

- 服务端组件：服务端渲染的组件，在服务端生成 HTML
- 客户端组件:  客户端渲染的组件,  通常用于展示具有交互和动态数据的组件上，由客户端加载js后执行渲染, 需要在文件顶部添加 `"use client";`

作为开发者，需要正确的区分是使用服务端组件还是客户端组件。不然可能会出现意外的  **水合(hydration)**  错误。这里有一个简单的判断标准，凡是涉及到连接的用户钱包地址的组件都使用客户端组件。例如

- 连接钱包的按钮
- 展示用户地址下的 `token` 数量
- 用户进行链上交互等

其他的诸如，展示智能合约的余额、读取智能合约的变量等用户地址无关的组件则使用服务端组件。而且在请求数据时，还可以利用服务端组件的缓存能力。例如在读取智能合约的某个变量时，设置缓存时间为 10秒钟，在这10秒内，任何用户请求都不会再次发起 RPC 请求，如果使用的是付费RPC节点，则可以很大程度上减少 RPC 的用量。

## 链上交互

作为 `web3` 项目，首先要做的就是在页面上添加连接钱包的按钮。以 `EVM` 系的生态为例，可供选择的库有

- `rabinbowkit`

- `connectkit`
- `web3modal`

这三者并无较大的不同，区别在于UI上，底层都用到了 `wagmi`

`wagmi` 是一套用于链上交互的 React hooks, 基于 `viem` 构建。例如

- 连接钱包 `useConnect`
- 获取当前连接的用户地址 `useAccount`
- 发送交易 `useSendTransaction`
- 读取合约变量 `useReadContract`

如果当前组件是服务端组件，无法使用 `hook`, 则建议直接使用 `viem`，其无需另外安装，`wagmi` 已默认导出了 `viem` 的所有方法。

## 请求状态跟踪

对于服务端组件而言，本身就具有异步的特性，对于RPC请求来说，可以轻易的跟踪请求状态

```tsx
import { createPublicClient, erc20Abi, http } from 'viem'
import { mainnet } from 'viem/chains'

export const revalidate = 10 // 缓存10秒
export const runtime = 'edge'

export const publicClient = createPublicClient({
  chain: mainnet,
  transport: http(process.env.RPC_ENDPOINT)
})

// 异步组件
export default async function TotalSupply() {
  
  // 读取合约数据
  const data = await publicClient.readContract({
    address: '0x123...',
    abi: erc20Abi,
    functionName: 'totalSupply'
  })

return <div>{data.toString()}</div>
}
```

上面是一个展示 erc20 合约中 `totalSupply` 变量值的组件，设置了组件缓存时间是10秒。意味着，这10秒内有用户访问这个组件时不会再次发送RPC请求。如果你要读取的是一个永远不会变的值，则可以将缓存设置为**`'force-cache'`**

在父组件中展示请求中的状态

```tsx
<Suspense fallback={<div>Loading</div>}>
  <TotalSupply />
</Suspense>
```

对于客户端组件来说，由于 `wagmi`  内部使用 `Tanstack Query`  对于每一次的链上交互都可以轻易的获取请求状态。例如

```tsx
'use client'
import { erc20Abi } from 'viem'
import { useReadContract } from 'wagmi'

export default function TotalSupply() {
  const { data, isLoading, isError } = useReadContract({
    address: '0x123...',
    abi: erc20Abi,
    functionName: 'totalSupply',
    query: {
      staleTime: 10 * 1000 // 缓存10秒
    }
  })

if (isLoading) return <div>Loading...</div>
  if (isError) return <div>Error</div>

return <div>{data?.toString()}</div>
}
```

## 善用 MultiCall

经常出现的业务场景是，需要在页面展示多个合约的数据。例如

- 用户持有的 token 数量

- A合约中用户的质押 token 数量
- B合约中用户可领取的奖励数量

如果对于每个数据都进行一次查询，首先会多消耗 RPC的请求额度，其次会增加页面最终展示数据的时间。使用 `multiCall` 则可以一次性查询所有数据。

```tsx
import { multicall } from 'wagmi/actions'

export const App = async () => {
    const result = await multicall(config, {
      contracts: [
        {
          address: '0x122',
          abi: [],
          functionName: 'balanceOf',
          args: [userAddress]
        },
        {
          address: '0x122',
          abi: [],
          functionName: 'staked',
          args: [userAddress]
        },
        {
          address: '0x122',
          abi: [],
          functionName: 'reward',
          args: [userAddress]
        }
      ]
    })
}
```

> multiCall 是一个智能合约，通过合约的方式进行一次性调用

## 样式库的选择

React 中有几种书写 CSS 样式的方法

- 内联样式
- 通过 `className` 添加外部样式
- css module: 创建一个跟组件同名的文件 `组件名.module.css` 
- 样式组件：使用库 `styled-components`  创建具有 CSS 样式的组件

相比于上面的几种方案更加推荐使用 `tailwind` 。

`tailwind` 是一款移动端优先的原子化CSS框架。内置了多个标准化的CSS样式，具有高度可定制化的特点。

而且 `web3` 项目通常都要做移动端兼容，如果不使用 `tailwind`，这就意味着你需要写一大堆的 `media query`, 类似于 `@media (min-width: 640px)`  用来监听浏览器宽度的变化，并对不同的宽度设置不同的样式。但使用  `tailwind` 则可以轻易的对不同的浏览器宽度使用不同的样式。`tailwind` 内置了5种浏览器宽度

- `sm`:  640px
- `md`: 768px
- `lg`: 2014px
- `xl`: 1280px
- `2xl`:  1536px

例如想要一个div在不同的浏览器宽度下显示不同的颜色,则可以

```tsx
<div className='bg-red-600 md:bg-green-600 w-8 h-8'></div>
```

由于 `tailwind` 是一款移动端优先的CSS框架。 在浏览器宽度低于 `sm`  时，将显示`red-600`。  浏览器宽度达到 `md` 或大于 `md`  后将显示`green-600`

## 组件库

由于 `web3` 项目通常都具有很强的个性化。因此对于一些样式固定的组件库而言就显得不太适合。即使组件库中的组件提供了一些外部参数可以让开发者动态的调整样式，但总归有一些无法满足的情况。

因此就不得不重新去写相关的基础组件。但从头开始写又过于麻烦。所以我们需要一种包含基础样式的组件库。

那么不得不推荐 `shadcn/ui` 这个组件库。作为目前**最受欢迎的组件库**，不同于其他组件库的全局安装模式。`shadcn/ui` 可以分组件安装。而且安装的是组件源码。你可以轻松的根据自己的项目需要去调整样式。亦或者是做一些定制化的修改。

```bash
# 安装 shadcn-ui
npx shadcn-ui@latest init

# 安装 button 组件
npx shadcn-ui@latest add button
```

使用组件

```tsx
import { Button } from "@/components/ui/button"

export function App() {
  // 通过 className 进行样式定制
  return <Button className="bg-orange-600 w-8 h-8">Button</Button>
}
```

或者可以使用别人提供的酷炫的组件效果：

- https://ui.aceternity.com
- https://magicui.design

## 链接

- Next.js:  https://nextjs.org/
- wagmi:  https://wagmi.sh/
- viem:  https://viem.sh/
- RainbowKit:  https://www.rainbowkit.com/
- ConnectKit:  https://docs.family.co/connectkit
- Tailwind:  https://tailwindcss.com/
- shadcn/ui:  https://ui.shadcn.com/

框架的选择

众所周知，目前前端开发有三大主流框架：

React
Vue
Angular

在 Web2 中，这三个框架都或多或少的被使用，尤其是 Vue，在国内前端开发者中更为受欢迎。

然而，在 Web3 领域，React 算是一家独大。无论是去中心化应用（dApps）、生态项目的官网，还是区块链浏览器，React 都是开发者的首选框架。可以说，超过 90% 的区块链项目前端都采用 React 进行开发，究其原因是因为在Web3中，React 拥有这更广泛的生态系统和丰富社区资源。

同时，为了优化用户体验，近年来前端开发者越来越倾向于使用服务端渲染（SSR），将需要展示的 HTML 数据提前在服务器端生成。这也造就了 React 服务端渲染框架 Next.js 的流行, 尽管推上有很多人吐槽 Next.js，但无疑其目前是最好的React 服务端渲染框架。

而且Next.js 也可以用来写后端 api, 集成数据库等。所以框架的最佳选择非 Next.js 莫属。

服务端组件 or 客户端组件

Next.js 支持服务端组件和客户端组件

服务端组件：服务端渲染的组件，在服务端生成 HTML
客户端组件: 客户端渲染的组件, 通常用于展示具有交互和动态数据的组件上，由客户端加载js后执行渲染, 需要在文件顶部添加 "use client";

作为开发者，需要正确的区分是使用服务端组件还是客户端组件。不然可能会出现意外的 水合(hydration) 错误。这里有一个简单的判断标准，凡是涉及到连接的用户钱包地址的组件都使用客户端组件。例如

连接钱包的按钮
展示用户地址下的 token 数量
用户进行链上交互等

链上交互

作为 web3 项目，首先要做的就是在页面上添加连接钱包的按钮。以 EVM 系的生态为例，可供选择的库有

rabinbowkit
connectkit
web3modal

这三者并无较大的不同，区别在于UI上，底层都用到了 wagmi

wagmi 是一套用于链上交互的 React hooks, 基于 viem 构建。例如

连接钱包 useConnect
获取当前连接的用户地址 useAccount
发送交易 useSendTransaction
读取合约变量 useReadContract

如果当前组件是服务端组件，无法使用 hook, 则建议直接使用 viem，其无需另外安装，wagmi 已默认导出了 viem 的所有方法。

请求状态跟踪

对于服务端组件而言，本身就具有异步的特性，对于RPC请求来说，可以轻易的跟踪请求状态

import { createPublicClient, erc20Abi, http } from 'viem'
import { mainnet } from 'viem/chains'

export const revalidate = 10 // 缓存10秒
export const runtime = 'edge'

export const publicClient = createPublicClient({
  chain: mainnet,
  transport: http(process.env.RPC_ENDPOINT)
})

// 异步组件
export default async function TotalSupply() {

  // 读取合约数据
  const data = await publicClient.readContract({
    address: '0x123...',
    abi: erc20Abi,
    functionName: 'totalSupply'
  })

  return &lt;div>{data.toString()}&lt;/div>
}

上面是一个展示 erc20 合约中 totalSupply 变量值的组件，设置了组件缓存时间是10秒。意味着，这10秒内有用户访问这个组件时不会再次发送RPC请求。如果你要读取的是一个永远不会变的值，则可以将缓存设置为'force-cache'

在父组件中展示请求中的状态

&lt;Suspense fallback={&lt;div>Loading&lt;/div>}>
  &lt;TotalSupply />
&lt;/Suspense>

对于客户端组件来说，由于 wagmi 内部使用 Tanstack Query 对于每一次的链上交互都可以轻易的获取请求状态。例如

'use client'
import { erc20Abi } from 'viem'
import { useReadContract } from 'wagmi'

export default function TotalSupply() {
  const { data, isLoading, isError } = useReadContract({
    address: '0x123...',
    abi: erc20Abi,
    functionName: 'totalSupply',
    query: {
      staleTime: 10 * 1000 // 缓存10秒
    }
  })

  if (isLoading) return &lt;div>Loading...&lt;/div>
  if (isError) return &lt;div>Error&lt;/div>

  return &lt;div>{data?.toString()}&lt;/div>
}

善用 MultiCall

经常出现的业务场景是，需要在页面展示多个合约的数据。例如

用户持有的 token 数量
A合约中用户的质押 token 数量
B合约中用户可领取的奖励数量

如果对于每个数据都进行一次查询，首先会多消耗 RPC的请求额度，其次会增加页面最终展示数据的时间。使用 multiCall 则可以一次性查询所有数据。

import { multicall } from 'wagmi/actions'

export const App = async () => {
    const result = await multicall(config, {
      contracts: [
        {
          address: '0x122',
          abi: [],
          functionName: 'balanceOf',
          args: [userAddress]
        },
        {
          address: '0x122',
          abi: [],
          functionName: 'staked',
          args: [userAddress]
        },
        {
          address: '0x122',
          abi: [],
          functionName: 'reward',
          args: [userAddress]
        }
      ]
    })
}

multiCall 是一个智能合约，通过合约的方式进行一次性调用

样式库的选择

React 中有几种书写 CSS 样式的方法

内联样式
通过 className 添加外部样式
css module: 创建一个跟组件同名的文件 组件名.module.css
样式组件：使用库 styled-components 创建具有 CSS 样式的组件

相比于上面的几种方案更加推荐使用 tailwind 。

tailwind 是一款移动端优先的原子化CSS框架。内置了多个标准化的CSS样式，具有高度可定制化的特点。

而且 web3 项目通常都要做移动端兼容，如果不使用 tailwind，这就意味着你需要写一大堆的 media query, 类似于 @media (min-width: 640px) 用来监听浏览器宽度的变化，并对不同的宽度设置不同的样式。但使用 tailwind 则可以轻易的对不同的浏览器宽度使用不同的样式。tailwind 内置了5种浏览器宽度

sm: 640px
md: 768px
lg: 2014px
xl: 1280px
2xl: 1536px

例如想要一个div在不同的浏览器宽度下显示不同的颜色,则可以

&lt;div className='bg-red-600 md:bg-green-600 w-8 h-8'>&lt;/div>

由于 tailwind 是一款移动端优先的CSS框架。在浏览器宽度低于 sm 时，将显示red-600。浏览器宽度达到 md 或大于 md 后将显示green-600

组件库

由于 web3 项目通常都具有很强的个性化。因此对于一些样式固定的组件库而言就显得不太适合。即使组件库中的组件提供了一些外部参数可以让开发者动态的调整样式，但总归有一些无法满足的情况。

因此就不得不重新去写相关的基础组件。但从头开始写又过于麻烦。所以我们需要一种包含基础样式的组件库。

那么不得不推荐 shadcn/ui 这个组件库。作为目前最受欢迎的组件库，不同于其他组件库的全局安装模式。shadcn/ui 可以分组件安装。而且安装的是组件源码。你可以轻松的根据自己的项目需要去调整样式。亦或者是做一些定制化的修改。

# 安装 shadcn-ui
npx shadcn-ui@latest init

# 安装 button 组件
npx shadcn-ui@latest add button

使用组件

import { Button } from "@/components/ui/button"

export function App() {
  // 通过 className 进行样式定制
  return &lt;Button className="bg-orange-600 w-8 h-8">Button&lt;/Button>
}

或者可以使用别人提供的酷炫的组件效果：