为互连合约设计多链感知dApp（上）lg...

大多数去中心化应用只部署在单条链上，且只熟悉所部署的生态系统。一些最大的dApp在不同链上部署相同的合约，但它们的智能合约没有链之间的互操作性：每一个智能合约仍局限于它们所处的网络。

智能合约互操作性的未来正通过Connected Contracts互连合约在Moonbeam的生态系统上扩张，这使得数据和流动性可以在网络间无缝跨越。来看看一个多链感知dApp的例子，它将useDApp和Next.js这样的传统Web3前端工具与Axelar的通用消息传递（一个跨链消息传递）协议相结合。类似于这样的dApp已在Moonbeam部署，且未来还会有更多。

一个新的趋势使得这些多链感知智能合约可以运用来自波卡、以太坊、Avalanche、Cosmos等等的逻辑和功能。就连dApp巨头SushiSwap也通过创建其自己的跨链AMM，SushiXSwap，来开始运用这个科技。在今后，互连合约会使更多、更大规模、不受单链限制的交换、市场和借贷协议成为可能。

当在智能合约改变时，前端也随之变化。

1 Axelar合约介绍

在介绍前端的设计之前，您至少应该对互连合约运作方式有基础了解。Moonbeam为互连合约提供如LayerZero等多种解决方案，且更多即将上线。在本文的示例dApp中，Axelar是我们的互连合约解决方案，但即便您不打算使用Axelar，该文中的许多设计理念也值得思考。

Axelar是一个连接不同区块链的区块网络，其提供安全的跨链沟通。Axelar网络中的每个验证人都在Axelar支持的链上运行轻节点。这种动态验证人组通过监控每条链的Axelar网关合约，也就是该示例合约所交互的两个Axelar合约之一，以达成共识来确认消息从一条链传递到另一条链上。

另一个合约是Axelar Gas Receiver微服务。每当一个dApp使用Axelar网关来发送一个跨链交易时，IAxelarGasReceiver会让用户为目标链上后续的交易付费。它允许终端用户只需发送一个交易便可以自动更新目标链，并可以用他们已有的源链Token来支付所有的交易费。

2 多链设计策略

该计划是设计一个能够从一个EVM链的互连合约（如Moonbeam）向另一个EVM链的互连合约（如以太坊）发送数据的前端。您可能已经很熟悉大部分dApp是如何运作的：

1. 用户决定将dApp连接到他们的钱包

2. 前端呈现一个用户可能想确认的交易

3. 用户使用MetaMask或其他钱包来签署并发送交易

4. 交易被发送至一个节点，然后前端会监控它是否成功

5. 在交易成功确认后前端进行更新

示例前端与此无太大差别，只不过因为这是多链情景，每一步都会有更多要管理的选项！用户可以连接至多条链，所以可以使用多个合约进行交易。因为有多条链和多个合约，您需要展示每一条链和每一个合约的数据。然而最复杂的是，取决于使用的是哪一个互连合约解决方案，您需要监控至多三个不同的网络以确认交易成功！

对于大多数这些问题，许多Ethers.js对象的阵列都可以解决。只要一个dApp能够从一条链上的一个合约中读取数据，它就也能从另一条链上的合约读取数据。相比之下，更困难的问题是监控跨链交易。

首先，用户需要签署并向源链上的跨链互连智能合约发送一个交易。因为本示例使用的跨链中介是Axelar，该跨链互连智能合约会提醒源链上Axelar网关合约有一个新的待处理跨链消息。其次，Axelar网络会接收到该消息并以去中心化的方式来批准它。第三，当跨链消息被批准后，Axelar网路会尝试使用跨链消息中的数据来更新目标链。

所以有三个网络：源链、Axelar网络、和目标链。那么您该如何追踪这么多东西？

如果您是个有经验的dApp开发者，您或许不用学习任何新东西就能够熟练运用某些工具。像Ethers.js这样能够与以太坊JSON RPC交互的库已经可以监控支持EVM的链上的交易，这样的链包括源链和目标链

此外，Axelar SDK允许开发者们追踪并恢复发送到Axelar链的交易。虽然在源链被包含在源链区块前查询SDK不会提供任何关于交易的信息，这么做能够告诉您关于Axelar和目标链交易的细节。

有几种方法能够让您结合这些工具来查询您需要的数据。该示例实施选择了：

1. 用Ethers.js来监控源链交易，直到其被发现。

2. 使用Axelar SDK持续查询在Axelar网络和目标链上的消息状态。

3 前端

您可以尝试使用一个简单的前端来展示一个跨链dApp可行的运用（如下图所示）。与其交互的合约将从链到链发送一个短串字符，该合约与首篇Axelar博客文章中使用的智能合约很相似。举个例子，我把“fantom 2 moonbase <3”这句短语从Moonbase Alpha（Moonbeam的测试网）发送到了Fantom的测试网。

前端是由TypeScript Next.js（React）作为框架构建的，因为React的受欢迎性及其广泛支持性。useDApp是与EVM进行交互的首选工具库，因为它是在备受欢迎的Ethers.js库基础上构建的、是专门为React前端构建的、且拥有多链支持。最后的一个原因是它采用了Semantic UI的组件和主题库以提供简便性。

React是一个十分受欢迎的框架，但其他还有很多框架，我们鼓励大家去探索。useDApp和Semantic UI也是一个道理：有很多能达成类似目的的其他方式，取决于大家的使用习惯和上手速度。本文将会提及实施要注意的一些重要概念，但主要还是展示上手实施的细节。

现在我们来看看示例前端。本文不会涵盖所有内容，我们假设您已经知道React以及一般网络开发的运作方式，但本文会针对一些习惯于使用某些库的开发者们可能不熟悉的部分来展开。我们建议您使用GitHub代码库来查看关于实施的更多细节。

4 在不同链间切换

能够在不同链间切换可以说是一个多链dApp中最重要的特性。大多允许您连接至钱包的前端库都或多或少会允许您切换链，但本文会向您展示如何在useDApp中使用该功能。

如果您从未使用过useDApp，那么您需要知道它需要带有配置的上下文提供者才能运作。该提供者位于_app.tsx文件中。该配置允许您轻易定义哪些网络是被接受的。在下面的示例中，我们配置了Moonbase Alpha以及其他一些测试网。

现在如果您的用户在错误的网络上，或是如果他们在您的dApp中表明他们想用useEthers hook的switchNetwork功能更改网络的话，您可以提示用户去更改他们的网络。值得注意的是，useEthers可以提供很多信息，包括当前连接的账户地址和用户所选择的网络。

所以在该dApp中，每当有人想要更改源链，前端就会自动提醒他们更改他们的钱包网络。这对允许用户经常在网络间转换的多链dApp十分方便。请注意这只对MetaMask有用。

无论您是否选择在您的个人项目中选择useDApp，您都应该追踪您的用户所连接的链ID并根据该数字来组织您的对象。

来源：金色财经