【引介】Contracts UI Builder：只需点击几下即可为智能合约搭建前端

我们很高兴推出 Contracts UI Builder，它能帮助你为部署的智能合约快速启动一个 React 前端。这个开发向导能够立即生成完整的 dapp 界面，包含钱包集成和多网络支持，无需从头构建合约交互 UI。

什么是 Contracts UI Builder?

OpenZeppelin Contracts UI Builder 是一个智能合约前端生成器，可以将任何已部署的合约转换为一个简单、功能完善的 React 应用程序。通过分析合约的 ABI，它可以自动为所有合约功能创建用户友好的界面，并具备完整的钱包集成和跨链兼容性。

主要特性：

• 即时生成 React 前端

• 内置钱包连接功能

• 多网络支持

• 零代码要求

• 可导出的、可用于生产环境的代码

• • *

为什么使用 Contracts UI Builder 进行智能合约开发？

消除前端开发瓶颈

传统上，构建区块链应用程序的前端需要广泛的钱包集成、区块链库和 React 开发知识。Contracts UI Builder 通过自动生成可用于生产环境的界面，消除了这些障碍。

加速 Dapp 原型设计

非常适合快速原型设计、MVP 开发和合约测试。只需点击几下即可生成功能性界面，而无需花费数天时间进行前端开发。

内置最佳实践

每个生成的界面都包含：

• 针对失败交易的适当错误处理

• 区块链交互期间的加载状态

• 网络切换功能

• Gas 预估和交易确认

• 适用于桌面和移动设备的响应式设计

• 可选的 OpenZeppelin Relayer 集成，用于无 gas 交易执行

• • *

智能合约前端生成器的用例

合约测试和 QA

为测试网上部署的合约生成测试界面。QA 团队可以与所有合约功能进行交互，而无需自定义工具或技术区块链知识。

演示和演示界面

为利益相关者演示、投资者演示或用户测试会话创建专业外观的 dapp 界面。在不暴露技术复杂性的情况下展示合约功能。

MVP dapp 开发

通过使用生成的前端作为起点，快速启动最小可行产品。立即部署或随着项目的增长扩展自定义功能。

内部团队工具

为团队成员创建简单的界面以与已部署的合约进行交互。非常适合需要合约访问权限的非技术利益相关者。

如何为你的智能合约创建前端

步骤 1：输入你部署的合约

导航到 builder.openzeppelin.com，选择你的网络，然后输入你的合约地址。该工具会自动获取合约的 ABI 并显示所有可用功能。

步骤 2：选择合约功能

选择要在你的 dapp 界面上执行哪个写入函数。根据需要自定义函数名称、添加描述和配置输入验证。

步骤 3：生成并导出 React 代码

然后只需生成你的完整 React 应用程序。预览界面，测试功能，然后导出完整的代码库以进行部署或进一步开发。

视频教程：如何使用 Contracts UI Builder 为你的智能合约构建一个简单的无代码前端

观看我们对 Contracts UI Builder 实际操作的演示。这个 4 分钟的教程将引导你完成从合约输入到前端导出的完整过程，准确地展示了使用 OpenZeppelin Contracts UI Builder 为已部署的智能合约创建前端界面是多么的快速和简单。

支持的网络和协议

目前，Contracts UI Builder 支持所有主要的 EVM 兼容网络：

• 以太坊主网和测试网
• Layer 2： Arbitrum、Base、Polygon、OP Mainnet、BNB Chain、Avalanche、Linea、Scroll、ZkSync
• 以及更多即将推出

选定的非 EVM 网络也将被集成，目前 Solana、Stellar 和 Midnight 的集成正在开发中。

该工具会自动检测网络要求并相应地配置前端。

常见问题

哪些类型的智能合约可以使用 Contracts UI Builder？

Contracts UI Builder 适用于任何已部署的智能合约。这包括 ERC-20 代币、ERC-721 NFT、DeFi 协议、DAO、游戏合约和自定义业务逻辑合约。

我需要 React 经验才能使用生成的代码吗？

使用生成的界面不需要 React 经验。但是，如果你想修改或扩展代码，基本的 React 知识可能会有所帮助。导出的代码遵循标准的 React 模式并包含清晰的文档。

我可以自定义生成的前端设计吗？

是的，生成的 React 组件使用标准的 CSS 类，并且可以使用任何 CSS 框架或自定义样式进行样式设置。该代码是完全可导出和可修改的。

生成的代码是否可以用于生产环境？

是的，所有生成的代码都遵循 React 最佳实践，并包含适当的错误处理、加载状态和安全注意事项。你可以将生成的界面直接部署到生产环境。

钱包连接在生成的前端中如何工作？

生成界面包括使用流行的 Web3 库（例如 viem、wagmi 和 RainbowKit）的钱包连接功能。用户可以连接 MetaMask、WalletConnect 兼容钱包和其他主要钱包提供商。

我可以将生成的前端添加到现有的 React 应用程序吗？

当然可以。生成的组件是模块化的，可以导入到现有的 React 应用程序中。每个合约函数都成为一个独立的 React 组件。

我可以在生成的前端中启用无 gas 交易吗？

是的，Contracts UI Builder 支持与 OpenZeppelin Relayer 集成以实现无 gas 交易执行。这允许用户与你的智能合约进行交互而无需 gas，从而显着改善用户体验。

快速开始为你的智能合约构建前端

准备好将你部署的智能合约转换为用户友好的 React 应用程序了吗？访问 builder.openzeppelin.com 并在几秒钟内生成你的第一个合约前端。

立即开始：

1. 导航到 builder.openzeppelin.com
2. 选择你的网络
3. 输入你的合约地址
4. 选择一个函数并自定义你的界面
5. 生成并导出你的 React 应用程序

有反馈或发现问题？在 GitHub 上提交 以帮助我们不断改进 Contracts UI Builder！

• 原文链接： blog.openzeppelin.com/in...
• 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～