部署 Hyperlane Warp Routes 的桥接 UI

在成功部署 Warp Route后，您有两个现成的选项来设置前端 UI，以支持跨链代币转移：

1. 分叉、定制并部署 Hyperlane Warp UI 模板
2. 使用托管的 Superbridge 实例

1. Hyperlane Warp UI 模板

Hyperlane Warp UI 模板是一个预构建的 Next.JS 应用，您可以轻松定制并部署。

• 配置：请按照配置说明了解如何配置 Warp UI Web 应用并在本地运行。
• 定制：请按照定制说明了解如何配置 UI 的代币并更改默认品牌资产/主题。

注册表

默认情况下，应用将使用在 NPM 上发布的规范 Hyperlane 注册表。要使用不同的注册表，您可以使用 NEXT_PUBLIC_REGISTRY_URL 环境变量设置 URL。

Warp Route 配置示例

以下是一个连接 Sepolia 上的 USDC 到 Alfajores 的 Warp Route 示例配置。您可以使用 Typescript 或 YAML 进行路由配置。

{
  tokens: [
    {
      // 代币的 ChainName
      chainName: "sepolia",
      // 参见 https://github.com/hyperlane-xyz/hyperlane-monorepo/blob/main/typescript/sdk/src/token/TokenStandard.ts
      standard: TokenStandard.EvmHypCollateral,
      // 代币元数据（小数位数、符号、名称）
      decimals: 6,
      symbol: "USDC",
      name: "USD Coin",
      // 路由器地址
      addressOrDenom: "YOUR_ROUTER_ADDRESS_1",
      // 基础抵押代币的地址
      collateralAddress: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238",
      // 代币 logo 图片的路径
      logoURI: "/logos/usdc.png",
      // 此代币连接的代币列表
      connections: [{ token: "ethereum|alfajores|YOUR_ROUTER_ADDRESS_2" }],
    },
    {
      chainName: "alfajores",
      standard: TokenStandard.EvmHypSynthetic,
      decimals: 6,
      symbol: "USDC",
      name: "USD Coin",
      addressOrDenom: "YOUR_ROUTER_ADDRESS_2",
      logoURI: "/logos/usdc.png",
      connections: [{ token: "ethereum|alfajores|YOUR_ROUTER_ADDRESS_2" }],
    },
  ];
}

链配置示例

链元数据也可以根据需要进行配置。这些配置与 CLI 中用于任何部署或发送命令的配置相同（例如，来自部署指南的配置）。

{
anvil1: {
    chainId: 31337,
    name: 'anvil1',
    displayName: 'Anvil 1 本地',
    nativeToken: { name: '以太', symbol: 'ETH', decimals: 18 },
    publicRpcUrls: [{ http: 'http://127.0.0.1:8545' }],
    blocks: {
      confirmations: 1,
      reorgPeriod: 0,
      estimateBlockTime: 10,
    },
    logoURI: '/logo.svg'
  }
}

部署 UI

由于 UI 是一个 Next.js 应用，您可以使用您喜欢的托管服务来托管它。我们推荐 Vercel，它与 Next 配合良好。AWS Amplify 是另一个流行的选择。

1. 注册 Vercel
2. 创建一个新项目并将其连接到您的 GitHub 仓库
3. 点击部署！

就这样！现在您和您的用户可以使用 UI 将代币从抵押链发送到远程链，从一个远程链发送到另一个远程链，以及从任何远程链返回到抵押链。

提示

如果这些链上没有生产中继器在运行，您可以在后台运行一个轻量级 CLI 中继器，仅为您的 Warp Route 提供服务：

hyperlane relayer --symbol TOKEN

这将允许您在本地测试 Warp UI 或进行快速演示，而无需在云中运行完整的生产中继器。

返回 gas

像 Warp Routes 这样的代币桥接的一个常见问题是，用户可能会将代币（如 USDC）转移到新链上，但在此之后才意识到他们没有本地 gas 代币来将这些代币转移到任何地方，包括返回。

为了改善用户体验，您可以通过水龙头提供一些本地 gas 代币，此外还可以提供 UI 警告。要创建水龙头，请修改 Warp Route 合约以持有一定数量的本地代币，以便与接收者共享。

提示

对于希望进一步自定义Warp UI以适应自己项目的开发者，或者构建自己的跨链应用程序，我们鼓励您探索Typescript SDK。

该SDK包含一系列不断增长的工具和抽象，用于在不同协议（EVM、Cosmos、Solana）之间与Hyperlane进行交互。

2. Superbridge

Superbridge 是一个自定义桥接提供商，他们为数百个 rollup、各种代币和不同生态系统管理桥接前端。

获取一个托管的 Superbridge 以支持您的 Warp Route 是一种无忧的桥接操作方式。他们一些最受欢迎的 Hyperlane 驱动的桥接包括 Renzo 的 ezETH 桥接 和 Elixir 的 deUSD 桥接。通过托管的桥接实例，Superbridge 将处理托管、主题、升级和用户支持请求。

他们还构建了一个方便的功能，允许自助测试最近部署的 Warp Routes。

测试您的 Warp Route

1. 导航到 Superbridge Hyperlane Playground
2. 点击设置齿轮，然后点击自定义
3. 粘贴您在部署 Warp Routes 时生成的 YAML 文件
4. 指定的代币和网络现在将可用于桥接。

提示

如果在粘贴 YAML 文件后缺少任何代币或网络，可能是 Superbridge 尚不支持该网络上的 Hyperlane。联系 Superbridge 以了解添加支持的时间表。

桥接小部件

除了托管的 UI，Superbridge 还提供了一个桥接小部件，您可以将其嵌入到您自己的网站中。查看他们的 小部件演示 网站，以了解所有可用的配置选项。

上线生产

要将您的 Warp Route 上线生产与 Superbridge，联系 Superbridge 团队。他们通常可以在大约一天内启动并运行前端。