Skip to main content

部署一个用于您的Warp路由的用户界面

在成功deployed a Warp Route之后，您可能希望部署一个前端用户界面来促进跨链代币转账。您可以forkHyperlane Warp UI 模板并根据您的需求进行定制。

配置和定制用户界面​

请按照customization instructions中的说明，了解如何配置UI的代币和更改默认的品牌资产/主题。

代币配置示例​

下面是一个连接Sepolia的USDC到Alfajores的Warp Route的示例配置。你可以使用Typescript、JSON或YAML来进行令牌配置。

{
  tokens: [
    {
      // The ChainName of the token
      chainName: 'sepolia',
      // See https://github.com/hyperlane-xyz/hyperlane-monorepo/blob/main/typescript/sdk/src/token/TokenStandard.ts
      standard: TokenStandard.EvmHypCollateral,
      // The token metadata (decimals, symbol, name)
      decimals: 6,
      symbol: 'USDC',
      name: 'USD Coin',
      // The router address
      addressOrDenom: 'YOUR_ROUTER_ADDRESS_1',
      // The address of the underlying collateral token
      collateralAddress: '0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238',
      // A path to a token logo image
      logoURI: '/logos/usdc.png',
      // The list of tokens this one is connected to
      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/weth.png',
      connections: [ { token: 'ethereum|alfajores|YOUR_YOUR_ROUTER_ADDRESS_2' } ]
    }
  ]
}

链配置示例​

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

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

部署用户界面​

由于用户界面是一个Next.js应用程序，您可以使用您喜欢的托管服务来托管它。我们推荐使用 Vercel，它与Next.js兼容。AWS Amplify是另一个流行的选择。

  • 注册Vercel
  • 创建新项目
  • 将其连接到您的Git仓库
  • 点击部署！

就是这样！现在您和您的用户可以使用该用户界面将代币从抵押链（collateral chain）发送到远程链，从一个远程链发送到另一个远程链，并从任何远程链发送回抵押链。

返回燃料​

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

除了在用户界面中警告用户确保他们拥有燃料之外，您还可以为他们提供一些本地燃料代币，以改善他们的初始体验。要实现这个水龙头，您可以修改Warp路由合约以持有一些本地代币的余额，并与接收者分享。此外，您还可以构建一个离线服务，该服务只需观察 ReceivedTransferRemote events 并将本地燃料代币转移到接收者。

tip

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

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