SuperAPI AI 工具集

frontend-ux

前端与建站

查看项目

更新于 10-15 17:21

技能介绍

用途:为以太坊 dApp 前端提供一套强制 UX 规则,减少 AI 智能体生成界面时的常见缺陷,重点覆盖链上交互、授权、地址与金额展示、RPC 可靠性和发布前检查。

主要能力与必要用法:

  1. 链上按钮独立状态:任何触发链上交易的按钮需在点击后立即禁用、显示 spinner 与动作文案(Approving...、Staking...),直到链上确认才解除,并给出成功/错误反馈。禁止多个按钮共用同一 isLoading。授权流程需两个状态:approvalSubmitting(点击时置位,finally 中清除)覆盖钱包到确认的间隙,approveCooldown(确认后置位,4 秒加重新获取后清除)覆盖确认到缓存的间隙,二者都用于 disabled;finally 必须存在,否则交易被拒会永久锁死按钮。
  2. 四态动作流:一次只显示一个主操作——未连接显示 Connect Wallet,网络错误显示 Switch Network,需授权显示 Approve,就绪显示执行动作。网络检查须先于授权/动作检查,不得同时显示 Approve 与 Execute,授权状态须来自最新链上状态。
  3. 地址 UX:展示地址应支持 ENS/名称解析、浏览器链接、复制、安全截断与视觉标识;输入地址应支持校验、粘贴规范化及 ENS 解析,关键地址输入不要用裸文本框。
  4. 美元上下文:余额、输入实时预览、确认文本、持仓摘要中的代币/ETH 数量都应附带美元估值,不要只显示代币单位。
  5. RPC 可靠性:生产环境使用专用 RPC;轮询间隔通常约 2-5 秒;回退传输需有意为之并注意限流;警惕失控请求模式。
  6. 主题语义:不要硬编码整页深色背景而忽略系统主题,应使用语义化主题 token;若仅提供深色模式,应移除无效主题控件。
  7. 合约错误翻译:从 ABI/自定义错误提取信息并映射为可读文案,处理钱包层错误并给出兜底提示,在触发操作附近做持久内联错误 UI。
  8. 发布前元数据:OG 图片须为可访问的绝对 URL,正确设置 OG/Twitter 标题与描述,移除模板品牌,favicon 与标签标题反映应用身份。
  9. 金额与精度:在合约单位与显示单位间转换,可用 viem 的 formatEther、formatUnits、parseEther、parseUnits,避免展示原始最小单位。

适用场景:需要与钱包和链上合约交互的以太坊 dApp 前端界面开发与审查。

限制:资料为规则说明,暂未提供具体框架绑定、完整组件实现、收费或价格信息。