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

5 从多个合约中读取

使用useDApp从多个合约中读取也非常简单。前端将与其交互的合约HelloWorldMessage.sol位于GitHub代码库的以太坊文件中。所有的都是从映射（地址到字符串）中读取，在本合约中，每个用户都有其自己的消息。

项目如何从互连合约中读取数据：

1. 表明一个状态变量，代表您想要读取合约所在的网络

2. 从Ethers.js构建一个合约对象，该对象代表您想要读取互连合约的来源

3. 使用自定义hook：useCall以获取数据对象

useCall由useDApp提供。这允许您会以比Ethers.js更简单的方式从合约读取数据。同时，这也会提供一个互连合约的合约对象，一个方式（lastMessage）和一个参数（用户地址）。

请注意useCall也有另一个可选的输入值，包括chainId元素。useDApp内置多链支持，允许开发者轻松决定他们想要读取的网络，这正是目前情况所需的。

如果您在没有使用useDApp的情况下，您可以使用useEffect hook来监测的networkToRead变量更改，然后使用您希望查询相关数据的库。

6 提交交易

在查看与Moonbase Alpha之间的信息之前，先查看合约以了解发送信息所使用的dApp。

sendMessage将会通过Axelar来跨链发送编码字符串和地址消息，并可选择在目标链上支付gas费用。请注意，为了支付此gas费用，您必须在交易中发送原生Token，以确保该函数可使用。

参数包含信息本身、目标链上Connected contract互连合约的地址，以及目标链的名称（无论是在主网还是测试网上，Axelar将显示主网名称，例如显示Moonbeam而非Moonbase）。

Axelar将在目标链合约上调用_execute函数以便接收消息。此合约将解码消息并将其存储在用于检索消息的映射中：

如果您想要学习如何部署此合约并使用您自己的合约，而不是GitHub代码库中提供的合约，请查看Axelar入门博客文章，其中介绍了如何在Moonbeam上使用Axelar。请确保使用此前端repo中的更新合约，而非之前博客中所提供的合约。

然而，发送交易的代码有些许复杂。目前可以先查看Axelar SDK部分的useAxelarFunction hook，并使用此函数发送交易。

useAxelarFunction hook是一个自定义hook，旨在帮助解决一条链上的交易涉及多个网络的事实。这将在下文展开描述，目前，假设从send函数导出的函数与useDApp useContractFunction hook所导出的send函数相同。

useContractFunction hook用于与改变状态的合约函数进行交互。对于dApp来说，这将监测交易状态并提供发送函数，以提示用户使用其钱包签署和发送交易。这也将为事件提供对象，但不会在场景中使用。

深入来了解一下如何在sendTransaction函数中使用发送函数，该函数将在UI中按键时触发。在以下代码片段的最下方，代码发送交易。这将传送sendMessage函数需要的所有参数，以及一个包含value元素的附加对象，来指定支付AxelarGasServices合约的原生Token数量。但是如何获取需要发送的原生Token数量呢？

如果您查看发送函数上方的代码，您将发现正在使用Axelar SDK。必须预估在目标链上需要花费的gas费用，因为很难预估，只能由特定合约调用的函数。在本示例中，预估需要花费不到200,000的gas费用。在真实生产环境中，您可能希望对您花费的gas数量进行基准测试。但是，如果您实际所花费费用远远超出了您的预估费用，您可以通过Axelar的gas服务获得退款。

由Axelar SDK的AxelarQueryAPI提供的estimateGasFee函数将找到源链和目标链之间的转换，以找到正确的数量发送至目标链。此数值将最终包含在Axelar SDK函数中。

最后，如之前所述，此函数会在按下提交按钮时触发。

7 监控交易

现在来到最复杂的部分：监控多条链之间的交易。项目必须实施在设计策略中讨论的内容。

事实上，并非Moonbeam上的每个Connected contracts互连合约解决方案都有监控工具：对于部分解决方案来说，您只会在交易成功或者失败的时候知道交易的最终状态。如果您决定使用没有监控的互连合约解决方案，您可能需要在状态变更时，直接查询目标链的状态。另一方面，Axelar在其SDK中包含了许多状态和更强大的监控系统。

在其他基于React的项目中可能会再调用到与Axelar连接的函数，这就是为什么此处存在自定义的React hook useAxelarFunction。它位于项目ethereum文件夹中的axelar文件夹中，文件名为useAxelarFunction.ts。

hook旨在扩展useContractFunction hook。它将结合多个来源（所有三个链）的多个状态组合到一个状态枚举中，同时仍然可以根据需求提供所有查询的信息。

这篇博客删掉了很多冗长的状态更新代码，并专注于重要的部分，如下方的代码片段。以下代码段出现在脚本文件的最顶部。

可以看到，useContractFunction hook被使用，这代表它的功能正在扩展。同时，还有两个状态变量，一个通过枚举追踪所有三个交易的状态（被命名为AxelarTransactionState，不包含在SDK中），另一个保存SDK追踪提供的通用消息返回对象。useContractFunction状态已重新命名为originState，因为新状态将追踪所有三个交易。

现在我们来快速查看如何使用useEffect hook。

在应用中，useEffect将在观察到的值变动时触发，在本例中为originState。虽然 useEffect返回函数中有额外的代码改变entierState枚举，但最重要的部分是当它遇到来自源链交易的成功返回时。它将适当地设置entireState枚举，然后调用beginAxelarStatusCheck。

在此复习监控交易的策略如下：

1. 监控源链交易

2. 通过Axelar SDK监控下个交易

useDApp将通过useContractFunction hook帮助监控源链交易。beginAxelarStatusCheck将让我们监控下一个交易。

虽然在下面的代码片段中，删除了许多的状态解释逻辑，但主要逻辑仍然存在。首先，Axelar SDK中的AxelarGMPRecoveryAPI被初始化，因为它提供了查询交易状态的功能，直接让前端知道是否有任何交易失败。接着，该状态可被查询并呈现存储的状态。最后，除非事务已经完成，程序将在再次查询之前等待5秒。

虽然每5秒重新查询一次似乎不是最佳解决方案，但它是能通过Axelar执行此类操作的最简单方法。如果您选择使用Moonbeam的其他互连合约提供者，您可能会执行类似的事情或是找到可用的pub/sub服务。无论是哪种方式，只要向前端提供有关每个网络交易的数据并适当地处理它，就可以顺利运行。

由useAxelarFunction hook提供的数据将会允许程序更新前端。举例来说，用户可以决定Axelar网络的交易是否处于待处理、成功、失败或是状态尚未决定：

接着数据将会向用户显示。

如果您有需要，您可以查看整个代码库了解这一部分是如何运作的，以及数据是如何处理并被制作成可阅读界面的详细步骤。

8 使用前端

您可以尝试使用前端来查看它是如何作用的。您可以在网站上访问它，也可以通过复制公共代码库并自行运行它。如果您选择复制代码库，则可以使用以下命令启动（在软件包安装完成后）：

接着，点击右上角的按钮以连接到您的钱包。您可以通过输入消息、设置源链和目标链并按下提交按钮来发送交易。通过选择要从中读取的链，从底部的每个链的互连合约中读取。

当您从当前的开发背景过渡到可以在Moonbeam上使用互连合约的背景时，您会发现更多处理多链dApp的方法。无论您为自己的项目选择哪种技术堆栈，除了一般创建dApp的困难之外，您还必须找到一种方法来管理（来自多个链）多个交易、链和合约。

9 深入了解互连合约

最好的学习方式为进行实际操作，因此鼓励每位读者都尝试创建一个自己的Connected Contracts互连合约dApp！Moonbeam提供广泛的开发者支持，Axelar（以及其他的互连合约社区）很荣幸能够在您构建应用时全程提供帮助。

来源：金色财经