ens-components

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

@thenamespace/ens-components

React UI kit for ENS and Namespace flows. Built on wagmi; no wallet UI library is required.

用于ENS和Namespace流程的React UI工具包。基于wagmi构建；无需钱包UI库。

Which One To Use

如何选择组件

Need	Use
Register a `.eth` name	`EnsNameRegistrationForm`
Edit records on an ENS name the user already owns	`EnsRecordsForm`
Embed the records UI inside a custom flow	`SelectRecordsForm`
Mint a subname from a Namespace onchain listing	`SubnameMintForm`
Create or update gasless subnames through Namespace	`OffchainSubnameForm`

Routing rules:

Default to
```
EnsNameRegistrationForm
```
when the user asks for a general quickstart.
Use
```
EnsRecordsForm
```
only when the user already has an ENS name and wants to edit records.
Use
```
SelectRecordsForm
```
only for custom or controlled UIs.
Use
```
SubnameMintForm
```
for onchain subname listings.
Use
```
OffchainSubnameForm
```
for gasless Namespace subnames.
If the user wants direct offchain-manager SDK CRUD, filtering, or record queries instead of the UI component, use the
```
offchain-ens-subname-sdk
```
skill.

需求	使用组件
注册 `.eth` 域名	`EnsNameRegistrationForm`
编辑用户已拥有的ENS域名记录	`EnsRecordsForm`
在自定义流程中嵌入记录UI	`SelectRecordsForm`
从Namespace链上列表铸造子域名	`SubnameMintForm`
通过Namespace创建或更新无gas费的链下子域名	`OffchainSubnameForm`

路由规则：

当用户询问通用快速入门时，默认使用
```
EnsNameRegistrationForm
```
。
仅当用户已拥有ENS域名并想要编辑记录时，才使用
```
EnsRecordsForm
```
。
仅在自定义或受控UI场景下使用
```
SelectRecordsForm
```
。
链上子域名列表场景使用
```
SubnameMintForm
```
。
无gas费的Namespace子域名场景使用
```
OffchainSubnameForm
```
。
如果用户需要的是链下管理器SDK的CRUD、过滤或记录查询功能，而非UI组件，请使用
```
offchain-ens-subname-sdk
```
技能。

后续阅读

Read
```
advanced.md
```
for records flows, onchain subnames, offchain subnames, theming, callback-driven customization, exact props, and common issues.

阅读
```
advanced.md
```
了解记录流程、链上子域名、链下子域名、主题定制、回调驱动的自定义配置、详细属性及常见问题。

ENS Quickstart

ENS快速入门

Use this as the default first answer unless the user clearly asked for records or subnames.

除非用户明确询问记录或子域名相关内容，否则默认以此作为首次回复。

0. Prerequisites

0. 前置条件

Assume these are already present in the app:

```
wagmi
```
```
viem
```
```
@tanstack/react-query
```

假设应用中已存在以下依赖：

```
wagmi
```
```
viem
```
```
@tanstack/react-query
```

1. Install

1. 安装

bash

npm install @thenamespace/ens-components

Import the stylesheet once at the app root:

tsx

import "@thenamespace/ens-components/styles.css";

bash

npm install @thenamespace/ens-components

在应用根目录导入样式表一次：

tsx

import "@thenamespace/ens-components/styles.css";

2. Render The ENS Form

2. 渲染ENS表单

In the default quickstart, include

avatarUploadDomain

. Treat it as required for the quickstart because image upload and SIWE signing should use the app's own hostname, not the fallback Namespace domain.

tsx

import { EnsNameRegistrationForm } from "@thenamespace/ens-components";

<EnsNameRegistrationForm
  isTestnet={false}
  avatarUploadDomain="app.example.com"
  onRegistrationSuccess={result => {
    console.log(result.total, result.expiryDate);
  }}
/>;

Rules for

avatarUploadDomain

Pass the bare hostname only, for example
```
app.example.com
```
.
Do not include
```
https://
```
or a trailing slash.

在默认快速入门中，请包含

avatarUploadDomain

。在快速入门中需将其视为必填项，因为图片上传和SIWE签名应使用应用自身的主机名，而非默认的Namespace域名。

tsx

import { EnsNameRegistrationForm } from "@thenamespace/ens-components";

<EnsNameRegistrationForm
  isTestnet={false}
  avatarUploadDomain="app.example.com"
  onRegistrationSuccess={result => {
    console.log(result.total, result.expiryDate);
  }}
/>;

avatarUploadDomain

的规则：

仅传入裸主机名，例如
```
app.example.com
```
。
请勿包含
```
https://
```
或末尾斜杠。

3. Explain What The Component Handles

3. 说明组件处理的流程

Call out that

EnsNameRegistrationForm

already handles the normal ENS flow:

commit transaction
wait period
register transaction
success screen

需要指出

EnsNameRegistrationForm

已处理常规ENS流程：

提交交易
等待期
注册交易
成功页面

4. Add Extras Only When Asked

4. 仅在被询问时添加额外配置

Common follow-ups:

```
referrer
```
if they want reward attribution
```
isTestnet={true}
```
for Sepolia
custom connect flow through
```
onConnectWallet
```
banner copy and styling tweaks

常见后续需求：

若需要奖励归因，添加
```
referrer
```
针对Sepolia测试网，设置
```
isTestnet={true}
```
通过
```
onConnectWallet
```
实现自定义连接流程
横幅文案和样式调整

ens-components

Original

Translation

@thenamespace/ens-components

@thenamespace/ens-components

Which One To Use

如何选择组件

Read Next

后续阅读

ENS Quickstart

ENS快速入门

0. Prerequisites

0. 前置条件

1. Install

1. 安装

2. Render The ENS Form

2. 渲染ENS表单

3. Explain What The Component Handles

3. 说明组件处理的流程

4. Add Extras Only When Asked

4. 仅在被询问时添加额外配置