Widget Light 概览

​

何时使用 Widget Light 而非完整 Widget

​

架构

+----------------------------------+       +----------------------------------+
|         YOUR APPLICATION         |       |      IFRAME (widget.li.fi)       |
|                                  |       |                                  |
|  LiFiWidgetLight component       | <---> |  Full LI.FI Widget               |
|  + Ecosystem handlers (wagmi...) | post  |  Receives config, sends RPC      |
|  + Event subscriptions           | Msg   |  requests back to your wallets   |
+----------------------------------+       +----------------------------------+

1. 你的应用渲染 <LiFiWidgetLight>，它会在 iframe 中加载托管的 widget URL
2. iframe 发送 READY 信号；你的应用以配置和钱包状态作为响应
3. 当 widget 需要签名或切换链时，它会通过 postMessage 发送一个 RPC 请求
4. 你的生态系统处理器（例如用于 EVM 的 wagmi）执行该请求并返回结果
5. 钱包状态变化（账户切换、网络更改）会自动推送到 iframe

​

主要优势

• iframe 隔离 — widget 在沙箱化的 iframe 中运行；你的页面保持完全的控制权
• 零核心依赖 — 除了作为对等依赖的 React 之外，@lifi/widget-light 不附带任何东西；链特定的处理器是可 tree-shake 的子路径导入
• 你的钱包，你的 UX — 交易由你已经管理的钱包（wagmi、wallet-standard、bigmi、dapp-kit）进行签名
• 响应式配置 — 随时更新配置而无需重新加载 iframe
• 类型化事件系统 — 订阅路由执行、钱包和 UI 事件，具备完整的 TypeScript 支持

​

支持的生态系统

​

托管的 Widget

​

后续步骤

• 安装 Widget Light — 设置包和依赖
• 配置 Widget Light — 了解所有配置选项
• Widget Light 事件 — 订阅 widget 事件
• Widget Light 钱包管理 — 理解生态系统处理器
• Widget Light API 参考 — 完整的组件和钩子参考