《7 天 AI + Web3 起步挑战》：Day 5

这是我在「AI+Web3学习交流群」发起《7 天 AI + Web3 起步挑战》后的第 5 天，前 4 天的分享可跳转以下链接前往查看：

• Day 1
• Day 2
• Day 3
• Day 4

今天 Day 5 的目标是：完成前端开发并连接上合约。

我今天提供的参考 Prompt 是这样的：

你是一个 Web3 前端工程师。
请帮我完成前端页面开发并连接上合约。

要求：
- 使用 Next.js + rainbowkit + wagmi
- 包含：连接钱包、和合约交互

合约地址如下：
【粘贴合约地址】

我今天依然使用 Claude Code 来帮我干活，它也没让我失望，很好地实现了我的要求。先给大家看看目前的成果。

以下是首页：

以下是 Invoices 列表页：

以下则是创建发票页面：

这是 Invoice 详情页，待支付的状态：

这是已支付的状态：

下面则是合约在区块浏览器的截图，可看到有多笔交易，这些都是我在页面上操作产生的：

另外，合约方面，我还做了一个调整，增加了费用机制，在支付的时候收取，但默认没设置费率的时候则不收取。

我还增加了一个水龙头页面，用于领取测试用的 USDT 代币。

今天的工作我就先完成到这里，明天我再将其部署并配置好域名访问。

原文链接：https://mp.weixin.qq.com/s/ubnJkOy-XLV548vhGfm5cg