Nervos x Gitcoin bounty 任务8: 修改移植的 dApp，使之支持透过 Force Bridge 来的以太坊资产

CKB 中文
更新于 2021-09-12 00:07
阅读 2947

大规模采用的最大挑战之一是让应用程序对终端用户来说既安全又简单。对于开发人员来说，工具和基础设施是一个挑战，他们必须努力的在难用的工具和交付给用户的良好体验之间取得微妙平衡。这些工具通常很复杂，很难使用。基础设施缺乏标准化和无缝兼容性。

大规模采用的最大挑战之一是让应用程序对终端用户来说既安全又简单。对于开发人员来说，工具和基础设施是一个挑战，他们必须努力的在难用的工具和交付给用户的良好体验之间取得微妙平衡。这些工具通常很复杂，很难使用。基础设施缺乏标准化和无缝兼容性。虽然继续取得进展，但终点仍遥遥无期。区块链世界的竞争是激烈的，协议被采用的同时也被重新发明。区块链还存在许多有待解决的巨大挑战，多个行业领导者正在采取非常不同的方法来解决它们的问题。已经出现的标准仍在发展中，在这些不同的基础设施之间集成的能力仍然是一个有待解决的挑战。Nervos 底层平台的灵活性能让未来深度集成的体验迈出的一大步，这种体验可以简化并方便普通用户使用，而开发人员也可以对平台进行调整和扩展，以适应目前正在使用的任何解决方案，而不必等待解决方案的开发。开发者能够像乐高积木一样混合和匹配各种基础设施，然后为用户将一系列动作统一为一个单一的简化动作。我们将在本任务中演示一个这样的范例。

## 任务说明

注意:在开始任务之前，建议您检查任务提交部分，这样您就知道您需要提供哪些材料给裁判，以审查您的任务提交。

修改[之前任务中](https://learnblockchain.cn/article/2984) 既存的 EVM dApp，以支持使用 Force Bridge 进行资产转移。这可以通过将`nervos-godwoken-integration`库集成到您的应用程序中来实现。

你的 dApp 将为透过 Force Bridge 从以太坊传输而来的资产计算特殊的接收地址。这些地址将允许用户通过 Force Bridge直接将资产转移到 Layer2，以便您的应用程序进行交互。

在这个任务中，我们将描述需要进行的更改，但是没有示范的项目。您需要对自己的应用程序进行这些更改，以完成这个任务。

### 1. 安装 Godwoken Integration Package

第一步是安装 nervos-godwoken-integration 包 。这个包中包含将 Nervos 的 Layer2 基础设施集成到您的应用程序所需的工具。

```jsx
yarn add nervos-godwoken-integration@0.0.2
```

### 2.在 Layer1 上生成 Layer2 的存款地址

Layer2 存款地址是 Nervos 的 Layer1 地址，作为进入 Layer2 的网关。所有的 CKBytes 和 SUDT token 会从 Layer1 转移到这个地址，将被区块生产的节点自动收集并交付给 Layer2 。

的代码将可以用来生成一个 Layer2 的存款地址，我们只需要将用户在 Layer2 的以太坊地址替换下方代码中的 `<ETHEREUM_ADDRESS>` 即可。

```jsx
const { AddressTranslator } = require('nervos-godwoken-integration');

const addressTranslator = new AddressTranslator();
const depositAddress = await addressTranslator.getLayer2DepositAddress(web3, <ETHEREUM_ADDRESS>);

console.log(`Layer 2 Deposit Address on Layer 1: \\n${depositAddress.addressString}`);
```

### 3. 将用户重新导到 ForceBridge 网站中

当你的应用程序计算并显示用户的存款地址后，你可以引导他们使用 Force Bridge :
[https://force-bridge-test.ckbapp.dev/bridge/Ethereum/Nervos](https://force-bridge-test.ckbapp.dev/bridge/Ethereum/Nervos)

您还可以指定要交易的资产，以便它已经被转移。下面是 ETH 跨链的预选链接:
[https://force-bridge-test.ckbapp.dev/bridge/Ethereum/Nervos?xchain-asset=0x0000000000000000000000000000000000000000](https://force-bridge-test.ckbapp.dev/bridge/Ethereum/Nervos?xchain-asset=0x0000000000000000000000000000000000000000)

应该指示用户输入他们的 Layer2 存款地址作为上一步的接收地址。

[本教程](https://github.com/Kuzirashi/gw-gitcoin-instruction/blob/master/src/tasks/6.use.force.bridge.to.deposit.md#3-initiate-a-force-bridge-transfer)提供了一个完整的指南，介绍如何通过 ForceBridge 进行转移。

### 4. 计算用户的 Polyjuice 地址

用户完成 Force Bridge 的传输以后，应用程序需要去检测它。最简单的方法之一是显示特定资产的用户余额，并定期更新余额。

为了检查一个用户的任何资产的余额，你首先需要 Polyjuice 地址在此作为他们的以太坊地址。这是必需的，因为 SUDT-ERC20 代理合约需要一个 Polyjuice 地址。

以下代码用于从以太坊地址计算出一个 Polyjuice地址:

```jsx
const { AddressTranslator } = require('nervos-godwoken-integration');

const addressTranslator = new AddressTranslator();
const polyjuiceAddress = addressTranslator.ethAddressToGodwokenShortAddress(ETHEREUM_ADDRESS);

console.log(`Polyjuice Address: ${polyjuiceAddress}\\n`);
```

### 5.在你的应用程序上赠添用户的 Layer2 余额

当一个资产被转移到 Nervos的 Layer2 时，它以 SUDT token 的形式存在。为了让 EVM 兼容的应用程序与之交互，必须使用 SUDT-ERC20 代理合约。

在此我们要确定用户的 SUDT 余额，在 SUDT- erc20 代理合约上调用`balanceOf()`函数，该合约已经部署了与正确资产匹配的 SUDT ID。`balanceOf()`函数将用户的 Polyjuice 地址作为参数，这是我们在前面的步骤中找到的。

如果您需要关于如何部署 ERC20代理合约和检查余额的提示，请查看[任务5](https://github.com/Kuzirashi/gw-gitcoin-instruction/blob/master/src/tasks/5.deploy.erc20.proxy.contract.md)，并在这里查看示[范例代码。](https://github.com/Kuzirashi/gw-gitcoin-instruction/blob/master/src/examples/5-erc20-proxy/check-sudt-balance.js)

用上了这些资源，您应该能够在 dApp 的网站上显示用户的资产余额。

## 任务提交

为了完成这项任务，你需要提交以下材料供评委评审:

1. 您的 EVM 应用程序在 Layer2 成功支持了 ForceBridge 的屏幕截图或视频。
2. 您部署的 SUDT-ERC20 代理合约的地址( text 格式)。
3. 你集成了Force Bridge 的 EVM 应用程序的 Github 链接。

### Bonus :添加集成 ForceBridge 支持到您的应用程序

虽然 ForceBridge 有自己的网站，但所有的功能都可以直接集成到你的应用程序中。这意味着终端用户可以从以太坊，直接将资产转移到 Nervos的 Layer2 ，而且不用在进行任一部分的过程时，需要离开您的应用程序。

这可以通过在应用程序中为 Force Bridge 构建一个前端接口来实现，该接口利用了由 `nervos-godwoken-integration`暴露的 [BridgeRPCHandler](https://github.com/Roger-RumbleFish/nervos-godwoken-integration/blob/master/src/bridge/force-bridge-handler.ts)。这可以消除将用户重定向到应用程序之外的需求。当然，这是更高级的功能，本质上可能更难以集成，所以这个教程没有涉及它。

export const CONFIG = {
WEB3_PROVIDER_URL: '[](http://godwoken-testnet-web3-rpc.ckbapp.dev/)[http://godwoken-testnet-web3-rpc.ckbapp.dev](http://godwoken-testnet-web3-rpc.ckbapp.dev)',
ROLLUP_TYPE_HASH: '0x4cc2e6526204ae6a2e8fcf12f7ad472f41a1606d5b9624beebd215d780809f6a',
ETH_ACCOUNT_LOCK_CODE_HASH: '0xdeec13a7b8e100579541384ccaf4b5223733e4a5483c3aec95ddc4c1d5ea5b22'
};

[https://force-bridge-test.ckbapp.dev/bridge/Ethereum/Nervos?xchain-asset=0x0000000000000000000000000000000000000000](https://force-bridge-test.ckbapp.dev/bridge/Ethereum/Nervos?xchain-asset=0x0000000000000000000000000000000000000000)

任务说明

注意:在开始任务之前，建议您检查任务提交部分，这样您就知道您需要提供哪些材料给裁判，以审查您的任务提交。

修改之前任务中既存的 EVM dApp，以支持使用 Force Bridge 进行资产转移。这可以通过将nervos-godwoken-integration库集成到您的应用程序中来实现。

在这个任务中，我们将描述需要进行的更改，但是没有示范的项目。您需要对自己的应用程序进行这些更改，以完成这个任务。

1. 安装 Godwoken Integration Package

第一步是安装 nervos-godwoken-integration 包。这个包中包含将 Nervos 的 Layer2 基础设施集成到您的应用程序所需的工具。

yarn add nervos-godwoken-integration@0.0.2

2.在 Layer1 上生成 Layer2 的存款地址

的代码将可以用来生成一个 Layer2 的存款地址，我们只需要将用户在 Layer2 的以太坊地址替换下方代码中的 <ETHEREUM_ADDRESS> 即可。

const { AddressTranslator } = require('nervos-godwoken-integration');

const addressTranslator = new AddressTranslator();
const depositAddress = await addressTranslator.getLayer2DepositAddress(web3, &lt;ETHEREUM_ADDRESS>);

console.log(`Layer 2 Deposit Address on Layer 1: \\n${depositAddress.addressString}`);

3. 将用户重新导到 ForceBridge 网站中

当你的应用程序计算并显示用户的存款地址后，你可以引导他们使用 Force Bridge : https://force-bridge-test.ckbapp.dev/bridge/Ethereum/Nervos

您还可以指定要交易的资产，以便它已经被转移。下面是 ETH 跨链的预选链接: https://force-bridge-test.ckbapp.dev/bridge/Ethereum/Nervos?xchain-asset=0x0000000000000000000000000000000000000000

应该指示用户输入他们的 Layer2 存款地址作为上一步的接收地址。

本教程提供了一个完整的指南，介绍如何通过 ForceBridge 进行转移。

4. 计算用户的 Polyjuice 地址

用户完成 Force Bridge 的传输以后，应用程序需要去检测它。最简单的方法之一是显示特定资产的用户余额，并定期更新余额。

以下代码用于从以太坊地址计算出一个 Polyjuice地址:

const { AddressTranslator } = require('nervos-godwoken-integration');

const addressTranslator = new AddressTranslator();
const polyjuiceAddress = addressTranslator.ethAddressToGodwokenShortAddress(ETHEREUM_ADDRESS);

console.log(`Polyjuice Address: ${polyjuiceAddress}\\n`);

5.在你的应用程序上赠添用户的 Layer2 余额

当一个资产被转移到 Nervos的 Layer2 时，它以 SUDT token 的形式存在。为了让 EVM 兼容的应用程序与之交互，必须使用 SUDT-ERC20 代理合约。

在此我们要确定用户的 SUDT 余额，在 SUDT- erc20 代理合约上调用balanceOf()函数，该合约已经部署了与正确资产匹配的 SUDT ID。balanceOf()函数将用户的 Polyjuice 地址作为参数，这是我们在前面的步骤中找到的。

如果您需要关于如何部署 ERC20代理合约和检查余额的提示，请查看任务5，并在这里查看示范例代码。

用上了这些资源，您应该能够在 dApp 的网站上显示用户的资产余额。

任务提交

为了完成这项任务，你需要提交以下材料供评委评审:

您的 EVM 应用程序在 Layer2 成功支持了 ForceBridge 的屏幕截图或视频。
您部署的 SUDT-ERC20 代理合约的地址( text 格式)。
你集成了Force Bridge 的 EVM 应用程序的 Github 链接。

Bonus :添加集成 ForceBridge 支持到您的应用程序

这可以通过在应用程序中为 Force Bridge 构建一个前端接口来实现，该接口利用了由 nervos-godwoken-integration暴露的 BridgeRPCHandler。这可以消除将用户重定向到应用程序之外的需求。当然，这是更高级的功能，本质上可能更难以集成，所以这个教程没有涉及它。

export const CONFIG = { WEB3_PROVIDER_URL: 'http://godwoken-testnet-web3-rpc.ckbapp.dev', ROLLUP_TYPE_HASH: '0x4cc2e6526204ae6a2e8fcf12f7ad472f41a1606d5b9624beebd215d780809f6a', ETH_ACCOUNT_LOCK_CODE_HASH: '0xdeec13a7b8e100579541384ccaf4b5223733e4a5483c3aec95ddc4c1d5ea5b22' };

https://force-bridge-test.ckbapp.dev/bridge/Ethereum/Nervos?xchain-asset=0x0000000000000000000000000000000000000000