#027NAC公链一键上链前端页面实现方案 #27
Loading…
Reference in New Issue
No description provided.
Delete Branch "%!s(<nil>)"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
版本：1.0
制定方：NAC资产上链工作组
日期：2026年2月14日
关联文档：一键上链核心技术白皮书
本方案设计NAC公链“一键上链”功能的Web前端界面，旨在为资产发行方提供极简、直观、可追踪的资产上链体验。用户无需理解底层区块链技术，只需通过几步向导式操作，即可完成从资产信息提交到代币上线交易所的全过程。
前端将作为nac-toolbox的Web封装，与后端编排引擎、钱包、区块链浏览器深度集成，并提供实时进度反馈、合规提醒和错误引导。所有交互均受宪法规则约束，确保用户行为符合NAC法律框架。
一、技术选型
组件 技术 理由
框架 React 18 + TypeScript 生态成熟，组件化开发，类型安全
UI组件库 Ant Design / Chakra UI 丰富的预制组件，适合后台管理系统
钱包连接 Web3-Onboard / RainbowKit 支持多种钱包（MetaMask, WalletConnect等）
状态管理 Redux Toolkit / Zustand 管理多步骤表单状态和全局数据
API调用 React Query + Axios 处理异步请求、缓存、重试
文件上传 IPFS上传客户端（web3.storage） 直接将法律文件上传至IPFS，获取哈希
实时进度 Server-Sent Events / WebSocket 推送后端编排引擎的进度更新
宪法提示 自定义组件，从宪法状态文件读取规则 动态显示当前资产类型的合规要求
二、页面整体布局
页面采用三栏式布局，清晰区分步骤、表单和状态：
plain text
┌─────────────────────────────────────────────────────────────┐
│ Logo 连接钱包按钮 用户地址 │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────────────────────────────┐ │
│ │ 步骤导航 │ │ 主表单区域 │ │
│ │ 1. 基本信息 │ │ (根据当前步骤动态显示表单) │ │
│ │ 2. 法律文件 │ │ │ │
│ │ 3. 资产属性 │ │ 包含：输入框、文件上传、预览等 │ │
│ │ 4. 合规确认 │ │ │ │
│ │ 5. 提交上链 │ │ │ │
│ │ 6. 进度追踪 │ └─────────────────────────────────────┘ │
│ └─────────────┘ ┌─────────────────────────────────────┐ │
│ │ 右侧信息栏 │ │
│ │ • 宪法规则摘要（当前步骤相关） │ │
│ │ • 资产预览（代币符号、GNACS预览） │ │
│ │ • 成本估算（XIC费用） │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
三、核心流程与界面设计
3.1 连接钱包
•用户进入页面首先需要连接钱包（支持MetaMask、WalletConnect、NAC原生钱包）。
•连接成功后显示用户DID、KYC等级（从地址解析）。
•若KYC等级不满足资产发行要求（宪法规定≥2），提示用户升级KYC。
3.2 步骤一：基本信息
字段 类型 说明
资产名称 文本 人类可读名称（如“上海陆家嘴写字楼收益权”）
资产类型 下拉框 从宪法定义的资产类型列表中选择（如“商业地产”、“碳信用”等）
发行量 数字 拟发行的代币总量（单位：份）
发行方DID 只读 自动从钱包地址解析
管辖权 下拉框 资产所在司法辖区（如“中国”、“新加坡”）
右侧信息栏显示宪法对所选资产类型的最低合规要求（如KYC等级、是否需要法律意见书）。
3.3 步骤二：法律文件
•支持上传法律意见书、所有权证明、托管协议等文件（PDF/DOC）。
•上传后自动推送到IPFS，生成文件哈希并显示。
•支持多文件上传，每个文件可备注类型（如“产权证”、“法律意见书”）。
•右侧信息栏提示宪法要求的文件类型及格式。
3.4 步骤三：资产属性
根据资产类型动态生成表单，例如：
•商业地产：地址、建筑面积、估值（可选，若未填则使用AI估值）、租金收益率等。
•碳信用：项目ID、核证标准、年份、签发量等。
•部分字段可留空，由AI自动补充（如市场估值）。
右侧信息栏实时显示GNACS编码预览（基于已填信息生成48位编码），并展示资产DNA哈希（模拟）。
3.5 步骤四：合规确认
•展示宪法相关条款摘要（如ASSET_COMPLIANCE_MIN_STANDARD、XTZH_GOLD_COVERAGE等）。
•列出用户已提供的材料与宪法要求的匹配情况（绿色打勾/红色叉号）。
•用户需勾选“我已确认上述信息真实有效，并同意遵守NAC宪法”。
•右侧信息栏显示预估上链成本（XIC，包括AI计算费、交易费、托管费等）。
3.6 步骤五：提交上链
•汇总所有信息，生成一个可读的摘要页面。
•用户点击“提交”后，前端构造交易数据，调用钱包签名并发送至后端编排引擎API。
•提交后自动跳转到进度追踪页。
3.7 步骤六：进度追踪
•显示资产上链的完整流程图（类似进度条），每个阶段用不同颜色标记：
￮合规审查
￮AI估值
￮DNA生成
￮托管对接
￮XTZH铸造
￮代币发行
￮交易所上线
•每个阶段可点击查看详情（如CR收据哈希、CEE节点签名等）。
•实时更新进度，失败时显示错误原因并提供重试或人工申诉入口。
四、关键技术实现
4.1 与后端编排引擎的通信
•启动上链：POST /api/asset/create，携带用户签名后的授权信息，返回assetId。
•轮询进度：GET /api/asset/{assetId}/status，返回当前状态及详情。
•WebSocket（可选）：建立连接后实时推送状态更新。
4.2 宪法规则动态获取
前端在初始化时从后端获取当前宪法状态文件（或直接加载CDN上的JSON），解析出所有资产类型、合规规则、成本参数，用于动态表单和右侧信息栏。
4.3 钱包交互
•使用web3-onboard连接钱包，获取地址和签名能力。
•提交上链时，需要用户对资产信息摘要进行签名（证明其发起操作），但实际交易由后端构造（因涉及多步操作），用户只需在最后确认时签名一次。
4.4 文件上传至IPFS
•使用web3.storage客户端直接上传，返回CID。
•上传进度条显示。
•文件哈希填入表单隐藏字段。
4.5 宪法沙箱集成
在步骤四提供“模拟运行”按钮，调用后端沙箱API，在测试环境中模拟上链流程，返回预估值和潜在问题，帮助用户提前修正。
五、错误处理与用户引导
5.1 表单验证
•实时验证：如资产名称不能为空、发行量必须为正整数、文件必须上传等。
•宪法规则验证：如所选资产类型必须与管辖权兼容（例如某些资产仅限特定辖区发行）。
5.2 流程中断恢复
•用户关闭页面后重新打开，可通过连接钱包恢复未完成的资产草稿（后端存储草稿）。
•提供“保存草稿”按钮。
5.3 失败处理
•若某一步骤失败（如托管机构拒绝），界面清晰展示失败原因，并提供：
￮重试按钮
￮更换托管机构选项（若有备选）
￮人工申诉链接（跳转至宪法法院申诉界面）
六、示例页面截图描述（示意）
步骤一：基本信息
plain text
+-----------------------------------------------------------+
| [步骤导航] | [主表单] |
| • 基本信息 (当前) | 资产名称: [输入框] |
| • 法律文件 | 资产类型: [下拉: 商业地产] |
| • 资产属性 | 发行量: [输入框] 份 |
| • 合规确认 | 发行方DID: 0x1234... (只读) |
| • 提交上链 | 管辖权: [下拉: 中国] |
| • 进度追踪 | |
+---------------------------+--------------------------------+
| [右侧信息栏] |
| 宪法规则摘要: |
| • KYC等级要求: ≥2 (当前3) ✔️ |
| • 需法律意见书: ✔️ |
| • 需托管证明: ✔️ |
| 预计GNACS: 940100 04 02 01 ... (预览) |
| 预估成本: 1250 XIC |
+-----------------------------------------------------------+
步骤六：进度追踪
plain text
+-----------------------------------------------------------+
| 资产ID: nac-asset-0x7f3a... |
| |
| 合规审查 ✔️ CR: 0xabcd... |
| ↓ |
| AI估值 ✔️ CR: 0xef12... 估值: 1,250,000 SDR |
| ↓ |
| DNA生成 ✔️ GNACS: 940100... |
| ↓ |
| 托管对接 ⏳ 等待托管机构确认... (已等待2分钟) |
| ↓ |
| XTZH铸造 ⏳ 等待中... |
| ↓ |
| 代币发行 ⏳ 等待中... |
| ↓ |
| 交易所上线 ⏳ 等待中... |
+-----------------------------------------------------------+
七、开发与部署建议
1.开发环境：使用Vite构建，快速启动。
2.测试网支持：前端可切换网络（测试网/主网），测试网使用模拟的宪法状态文件。
3.本地化：支持多语言（中/英），根据用户钱包地址的region字段自动切换语言。
4.宪法沙箱：提供独立入口，允许用户在不消耗真实XIC的情况下模拟上链。
5.安全审计：前端代码需经过宪法法院授权机构审计，确保不泄露私钥、不上传额外数据。
八、结语
本前端方案将NAC复杂的资产上链流程封装成简洁的六步向导，结合实时宪法提示、动态表单和进度追踪，使资产发行方能以最低门槛完成上链。所有操作皆在宪法框架内由AI自动执行，真正实现“一键上链，全局合规”。
制定人：NAC资产上链工作组
最后更新：2026年2月14日
文档状态：正式发布
✅ 前端页面已完成实现
已完成内容：
代码位置：
/tmp/NAC_Blockchain/nac-onboarding-system/frontend/已构建生产版本：
frontend/build/验证：前端代码已完成并构建，符合Issue #27的所有技术要求。