0基础从前端入门到Web3 —— 从测试网 a + b 到主网领Sui挑战

Nigdle
更新于 2024-04-21 14:29
阅读 1249

0基础从前端入门到Web3 —— 从测试网 a + b 到主网领Sui挑战从最基础的 Typescript 环境，到测试网合约调用，篇尾还有挑战任务等你发掘！

# 一：简介

本篇需要大家事先准备好 $\mathit {TypeScript}$ 最基础的环境（能简单运行跑出来 $\mathit {Hello\ World}$ 就够了），然后一步一步带着大家完成调用 $\mathit {Sui}\ \mathit {test}$  链上的 $\mathit {a\ +\ b}$ 合约（该合约在前面的篇章当中部署，感兴趣的可以自行翻阅，如果后续本篇中用到的 $\mathit {ObjectID}$ 失效了，那应该是测试链重置了吧，届时请按照前面的篇章自行部署相关的合约），所有用到的依赖本篇都会一一阐述（从安装到简单的用途），系统环境是 $\mathit {MacOS}$，$\mathit {Node.js}$ 的替代包管理器使用的是 $\mathit {pnpm}$。

# 二：功能剖析

## 2.1 我是谁？

### 2.1.1 介绍

在 $\mathit {Sui\ Move}$ 当中，不论是部署还是调用合约，都需要事先创建一个 $\mathit {address}$，它既是你的钱包，也是你身份对外的象征，而在 $\mathit {TypeScript}$ 当中，想要调用链上的合约，自然也需要表明是谁在调用。 这一点可能在本篇当中体现不出其重要性，但是在今后尤其是涉及到资产方面的转赠与获取将至关重要，因为区块链一切都是匿名的，如果资产出了问题（被钓鱼被骗被盗），几乎没有找回的可能。 当然，每一次合约调用都将支付一笔费用，这要求你在 $\mathit {TypeScript}$ 中表明的身份需要拥有一定的资产（由于是 $\mathit {test}$ 链，可以领水，所以不存在这个问题，相关操作也可以自行翻阅前篇）。

### 2.1.2 助记词

本篇选择通过助记词来表明身份，通过 $\mathit {Sui\ CLI}$ 创建 $\mathit {address}$ 后（本篇选择的加密方式是`Ed25519`），会给你私钥和助记词（$\text {12}$ 个单词），大家应该精心保存好。 当然， 你大可以大大咧咧地将这个助记词写进代码里，但是一旦你将这份代码公开（例如 $\mathit {git\ push}$ 到 $\mathit {github}$ 上，没有人能够 $\text {100\%}$ 保证每一次都将助记词隐去），这就存在严重的安全隐患，因为所有人都可以通过这一份助记词来盗取你的资产。 因此，我们借助`dotenv`来读取环境变量。

- 创建项目目录并初始化

```bash
mkdir sui_sdk_call_a_add_b
cd sui_sdk_call_a_add_b
pnpm init
# 后续的代码写在 index.ts 文件当中
touch index.ts
```

- 安装（如果已经安装过了请跳过这一步，本篇后续所有的安装选项皆是如此）

`pnpm install -g dotenv`

- 在项目目录下添加依赖

`pnpm add -D dotenv`

此时在`package.json`当中的`devDependencies`字段里，就会出现`"dotenv": "^16.4.5"`，后面的数字代表版本号，请以你自己的版本为准。

- 设置环境变量

`export MNEMONIC="if you want to try it then try it it is ok"`

**注意：** 上面双引号内的内容请自行替换成你的助记词 ~~不会真有人直接复制粘贴吧~~

- 测试代码

```ts
import dotenv from "dotenv";

dotenv.config();
const MNEMONIC = process.env.MNEMONIC!;
console.log(MNEMONIC);
```

`process.env.MNEMONIC`就是用来读取环境变量的值，它可能不存在，此时`MNEMONIC`的类型就是`string | undefined`（这一点可能会对后续使用该值造成困扰，具体困扰的原因后面再解释），而在最后添加`!`的目的就是人为标注保证这个值一定存在，此时`MNEMONIC`的类型就是固定的`string`，方便后续使用。

这里顺便提一下如何运行 $\mathit {ts}$ 代码，本篇选择用`ts-node`来跳过生成 $\mathit {js}$ 文件再运行这一步骤，想要使用它只需要通过`pnpm install -g ts-node`安装即可。

- 运行

`ts-node index.ts`

得到的输出就是你之前设置的环境变量的值，如果你真是直接复制粘贴的上面，那么这里得到的就是`if you want to try it then try it it is ok`

如果你无法运行，可能是你缺少`@types/node`这个依赖，请按照安装并添加`dotenv`依赖的方式，将其添加到`package.json`文件的依赖项字段里。

### 2.1.3 密钥对

在 $\mathit {Sui\ TypeScript\ SDK}$ 当中，提供了`Keypair`类来处理与 $\mathit {Sui\ address}$ 相关的加密密钥对，提供了签名并验证的逻辑，当然，想要使用它，首先你得需要有这个 $\mathit {SDK}$。

- 添加依赖

`pnpm add -D @mysten/sui.js`

- 根据助记词创建`Keypair`

```ts
// 这里根据你选择的加密方式进行选择，还有两个是
// @mysten/sui.js/keypairs/secp256k1 和
// @mysten/sui.js/keypairs/secp256r1
import { Ed25519Keypair } from '@mysten/sui.js/keypairs/ed25519';

const keyPair = Ed25519Keypair.deriveKeypair(MNEMONIC);
```

如果在从环境变量读取助记词的时候不在末尾添加`!`，那么这里就会报错，因为这个函数只能接受类型为`string`的参数（这就是上面提到的可能产生的困扰）。

通过这个`Keypair`类，我们可以轻松获得其对应的私钥、公钥及更多信息，但在本篇当中，我们只需要这个实例化的类即可，具体作用请继续向下阅读。

## 2.2 我在哪？

### 2.2.1 介绍

接触过 $\mathit {Sui\ Move}$ 或多或少都应该了解，它分为主网 $\mathit {mainnet}$，开发网 $\mathit {devnet}$，测试网 $\mathit {testnet}$ 以及本地网络（其实绝大多数开发者都不会用到本地网），本篇想要调用的合约在测试网上，那么我们如何确定我在哪条链上呢？

### 2.2.2 获取对应的 rpcUrl

依赖`@mysten/sui.js`上面已经添加，所以可以直接使用，在`@mysten/sui.js/client`里有一个`getFullnodeUrl`可以用来获取对应的 $\mathit {url}$，传入的参数也很简单 —— `mainnet or devnet or testnet`，`localnet`这里不做展开，就像上面说的，大多数人都不会用到本地模拟的链上环境。

我们调用的合约在测试网上，所以我们可以这么做：`const rpcUrl = getFullnodeUrl('testnet');`

### 2.2.3 获取对应的 client

光有 $\mathit {url}$ 还不够，我们需要通过这个 $\mathit {url}$ 来获取对应的 $\mathit {client}$，同样的，在`@mysten/sui.js/client`里有一个`SuiClient`可以做到这一点，就像是这样：`const client = new SuiClient({ url: rpcUrl });`

## 2.3 无内鬼，如何交易？

### 2.3.1 介绍

至此，我们已经明确了身份信息和所在的链，那么如何进行交易，也就是合约调用？ 我们需要创建交易相关的信息，也就是调用合约时的必要参数，包括 $\mathit {PackageID},\ \mathit {Module},\ \mathit {Function},\ \mathit {Arguments}$ 等，这些内容组合在一起，可以称之为交易块（$\mathit {TransactionBlock}$），每一笔交易（$\mathit {Transaction}$）都接受一组输入并产生结果，在本篇当中，我们只需要一笔交易。

### 2.3.2 交易块

在`@mysten/sui.js/transactions`当中提供了`TransactionBlock`来创建交易块，代码也十分简单：`const txb = new TransactionBlock();`

接下去，我们来预处理一些信息：

- $\mathit {target}:$ 按照`PackageID::Module::Function`的形式组成的字符串，按照前面篇章当中的部署上链的信息，我们可以编写以下代码：

```ts
const PACKAGE = "0xe2496799139225a06e7251857cdf46a32c20d773030c62b9bf24095cd60aac43";
const MODULE = "my_module";
const FUN = "add";
const target = `${PACKAGE}::${MODULE}::${FUN}`;
// console.log(target);
```

- $\mathit {arguments:}$ 该函数需要两个 $\mathit u \text {64}$ 的参数，这个参数并不是链对象上的值，所以我们需要将这些值序列化后传入，在这里可以使用`txb.pure`，例如：`txb.pure.u64(a)`，其中 $\mathit a$ 在 $\mathit {Typescript}$ 文件当中是一个`number`类型的值。

紧接着，我们就可以通过 $\mathit {moveCall}$ 将这些信息导入：

```ts
txb.moveCall({
    target,
    arguments: [txb.pure.u64(a), txb.pure.u64(b)],
});
```

## 2.4 签字画押！

### 2.4.1 介绍

交易信息已经处理好了，就差签字画押提供费用进行交易了，在 $\mathit {SDK}$ 当中提供了两个相关的接口：`executeTransactionBlock`和`signAndExecuteTransactionBlock` 前者将签字画押和发送执行交易这两个过程分开了，本篇的内容我们选择使用后者，也就是将签名和交易二合一的方法。

### 2.4.2 交易

在之前得到的`client`当中，存在刚刚提到的`signAndExecuteTransactionBlock`函数，需要向其提供如下参数：

- $\mathit {transactionBlock:}$ 序列化后的交易数据，也就是上面处理好的`txb`
- $\mathit {signer:}$ 交易发起者（签字画押的人），也就是上面早早就得到的`keyPair`
- $\mathit {requestType:}$ 确定 $\mathit {RPC}$ 节点应何时返回响应，有`WaitForEffectsCert`和`WaitForLocalExecution`可选，默认是`WaitForLocalExecution`
- $\mathit {options:}$ 设置一系列布尔值，来确定返回响应时得到哪些信息（默认值都是`False`）：
- - $\mathit {showBalanceChanges:}$ 是否显示余额变化
  - $\mathit {showEffects:}$ 是否显示交易效果
  - $\mathit {showEvents:}$ 是否显示交易事件
  - $\mathit {showInput:}$ 是否显示输入数据
  - $\mathit {showObjectChanges:}$ 是否显示对象变化
  - $\mathit {showRawInput:}$ 是否显示 $\mathit {bcs}$ 编码的交易输入数据

在这里，我们选择将 $\mathit {showObjectChanges}$ 设置为 `True`，根据得到的 $\mathit {ObjectID}$ 来查询里面存储的值是否为 $\mathit a\ +\ \mathit b$ 的和，由于各种数据都在前面经过处理，这段代码就非常简洁：

```ts
const result = await client.signAndExecuteTransactionBlock({
    transactionBlock: txb,
    signer: keyPair,
    requestType: "WaitForLocalExecution",
    options: {
        showObjectChanges: true,
    }
});

console.log(
    `executeTransactionBlock result: ${JSON.stringify(result, null, 2)}`
);
```

最后`console.log`的内容，将会是本次交易的 $\mathit {ObjectChanges}$ 的相关信息。

## 2.5 由我来决定！

### 2.5.1 介绍

每次 $\mathit a\ +\ \mathit b$ 的参数，都只能通过代码修改？不！我要自己决定！

怎么决定？

从终端输入！

**注意：** 这里并非本篇文章的重点，所以简单带过。

### 2.5.2 输入

利用`readline`当中的`createInterface`来创建标准输入输出：

```ts
const readline = createInterface({
    input: process.stdin,
    output: process.stdout,
});
```

定义一个用来接受输入的空的字符串，并将得到的值传递给它：

```ts
var strNumber = "";
readline.question("Please enter two numbers, separated by spaces: ", inputNumber => {
    strNumber = inputNumber;
    readline.close();
});
```

从逻辑上来讲，我们需要等待用户完成输入再进行后续操作（交易块数据处理以及发送交易等环节），所以我们判断`strNumber`是否为空，再循环`sleep`：

```ts
while (strNumber == "")
    await new Promise(resolve => setTimeout(resolve, 100));
```

由于这里用到了`await`（等待一个异步函数的结果），所以这段输入的代码需要放在`async`声明的异步函数当中，如果有返回值也应该是`Promise<Type>`：

```ts
async function read(): Promise<string[]> {
 	// TODO
 	// ......
		return strNumber.split(' ');
}
```

## 2.6 完整代码

```ts
import dotenv from "dotenv";
import { Ed25519Keypair } from '@mysten/sui.js/keypairs/ed25519';
import { getFullnodeUrl, SuiClient } from "@mysten/sui.js/client";
import { TransactionBlock } from "@mysten/sui.js/transactions";
import { createInterface } from "readline";

dotenv.config();
const MNEMONIC = process.env.MNEMONIC!;
// console.log(MNEMONIC);

const keyPair = Ed25519Keypair.deriveKeypair(MNEMONIC);

const client = new SuiClient({url: getFullnodeUrl("testnet")});

const txb = new TransactionBlock();

async function read(): Promise<string[]> {
 const readline = createInterface({
 input: process.stdin,
 output: process.stdout,
 });

var strNumber = "";
    readline.question("Please enter two numbers, separated by spaces: ", inputNumber => {
        strNumber = inputNumber;
        readline.close();
    });

while (strNumber == "")
        await new Promise(resolve => setTimeout(resolve, 100));
    return strNumber.split(' ');
}

async function callAdd(a: number, b: number) {
    txb.moveCall({
        target,
        arguments: [txb.pure.u64(a), txb.pure.u64(b)],
    });
    
    const result = await client.signAndExecuteTransactionBlock({
        transactionBlock: txb,
        signer: keyPair,
        requestType: "WaitForLocalExecution",
        options: {
            showObjectChanges: true,
        }
    });
    
    console.log(
        `executeTransactionBlock result: ${JSON.stringify(result, null, 2)}`
    );
}

async function main() {
    const nums = await read();
    // const a = Number(nums[0]);
    // const b = Number(nums[1]);
    // console.log(typeof a, typeof b, a, b);
    callAdd(Number(nums[0]), Number(nums[1]));
}

main();
```

# 三：运行校验

- 运行命令

`ts-node index.ts`

- 得到如下信息并且等待输入：

`Please enter two numbers, separated by spaces:`

- 根据提示输入两个数：

`Please enter two numbers, separated by spaces: 369 963`

- 得到信息：

```bash
executeTransactionBlock result: {
 "digest": "BiFBgM2AdpAGSkpsYcgWUFUK7osETW3NFNhdyUkWxKG",
 "objectChanges": [
 {
 "type": "mutated",
 "sender": "0x9e4092b6a894e6b168aa1c6c009f5c1c1fcb83fb95e5aa39144e1d2be4ee0d67",
 "owner": {
 "AddressOwner": "0x9e4092b6a894e6b168aa1c6c009f5c1c1fcb83fb95e5aa39144e1d2be4ee0d67"
 },
 "objectType": "0x2::coin::Coin<0x2::sui::SUI>",
 "objectId": "0x03335f68ff3616af7e000b113c56a5ad53e8e8209784ca0a5623f70997c8d948",
 "version": "28131890",
 "previousVersion": "28131889",
 "digest": "C6kmRbL5LB5wvikk8bEij1YgZTN4gnyLCvSSu1aRPpv3"
 },
 {
 "type": "created",
 "sender": "0x9e4092b6a894e6b168aa1c6c009f5c1c1fcb83fb95e5aa39144e1d2be4ee0d67",
 "owner": {
 "AddressOwner": "0x9e4092b6a894e6b168aa1c6c009f5c1c1fcb83fb95e5aa39144e1d2be4ee0d67"
 },
 "objectType": "0xe2496799139225a06e7251857cdf46a32c20d773030c62b9bf24095cd60aac43::my_module::Result",
 "objectId": "0xafd346ba388f626f2bbc364ed507a33b3e8073bf0e610f538803ac0c986183f7",
 "version": "28131890",
 "digest": "CByybjYC9EKoGAGWvY2T3zuY8TLsmdkgJtyLh1rUd536"
 }
 ],
 "confirmedLocalExecution": true
}
```

- 根据新创建的`Result ObjectID`进行查询：

`sui client object 0xafd346ba388f626f2bbc364ed507a33b3e8073bf0e610f538803ac0c986183f7`

- $\mathit a\ +\ \mathit b$ 的和：

```bash
╭───────────────┬─────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ objectId      │  0xafd346ba388f626f2bbc364ed507a33b3e8073bf0e610f538803ac0c986183f7                                             │
│ version       │  28131890                                                                                                       │
│ digest        │  CByybjYC9EKoGAGWvY2T3zuY8TLsmdkgJtyLh1rUd536                                                                   │
│ objType       │  0xe2496799139225a06e7251857cdf46a32c20d773030c62b9bf24095cd60aac43::my_module::Result                          │
│ owner         │ ╭──────────────┬──────────────────────────────────────────────────────────────────────╮                         │
│               │ │ AddressOwner │  0x9e4092b6a894e6b168aa1c6c009f5c1c1fcb83fb95e5aa39144e1d2be4ee0d67  │                         │
│               │ ╰──────────────┴──────────────────────────────────────────────────────────────────────╯                         │
│ prevTx        │  BiFBgM2AdpAGSkpsYcgWUFUK7osETW3NFNhdyUkWxKG                                                                    │
│ storageRebate │  1368000                                                                                                        │
│ content       │ ╭───────────────────┬─────────────────────────────────────────────────────────────────────────────────────────╮ │
│               │ │ dataType          │  moveObject                                                                             │ │
│               │ │ type              │  0xe2496799139225a06e7251857cdf46a32c20d773030c62b9bf24095cd60aac43::my_module::Result  │ │
│               │ │ hasPublicTransfer │  false                                                                                  │ │
│               │ │ fields            │ ╭─────┬───────────────────────────────────────────────────────────────────────────────╮ │ │
│               │ │                   │ │ id  │ ╭────┬──────────────────────────────────────────────────────────────────────╮ │ │ │
│               │ │                   │ │     │ │ id │  0xafd346ba388f626f2bbc364ed507a33b3e8073bf0e610f538803ac0c986183f7  │ │ │ │
│               │ │                   │ │     │ ╰────┴──────────────────────────────────────────────────────────────────────╯ │ │ │
│               │ │                   │ │ res │  1332                                                                         │ │ │
│               │ │                   │ ╰─────┴───────────────────────────────────────────────────────────────────────────────╯ │ │
│               │ ╰───────────────────┴─────────────────────────────────────────────────────────────────────────────────────────╯ │
╰───────────────┴─────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
```

不难发现，其中存储的 $\mathit {res}$ 值为 $\text {1332}$，大成功(๑•̀ㅂ•́)و✧

# 四：挑战任务在主网领 Sui

有了上述内容打底，你是否对安装、添加依赖，简单调用相关的 $\mathit {API}$ 有了一定的了解？

现在就到了实践的时刻！

[$\mathit {twitter}$](https://twitter.com/navi_protocol/status/1780254667328442656) 以及 [$\mathit {let's\ move\ task}\text 6$](https://github.com/move-cn/letsmove)，完成相关任务就可以领 $\mathit {Sui}$（主网的，可在交易所变现的那种），与本篇的差异就是需要你添加`navi-sdk`，通过助记词在`NAVISDKClient`上表明身份，再调用`depositToNavi`向 $\mathit {Navi}$ 转 $\text 1 \mathit {Sui}$，最后根据这笔交易的信息提交并等待 $\mathit {Sui}$ 到账即可，甚至都不需要自己创建并处理交易块信息。

$\mathit {navi\ sdk}$ 相关可以[点击](https://naviprotocol.gitbook.io/navi-protocol-developer-docs/how-to-interact-with-the-contract/navi-sdk/api-interface)查看文档。

**注意：** 任务奖励随时可能截止，尤其是 $\mathit {twitter}$ 上的 ~~（可能就在这几天吧）~~，先到先得，抓紧做起来(๑•̀ㅂ•́)و✧

# 五：加入组织，共同进步！

- [Sui 中文开发群(TG)](https://t.me/move_cn)
- $\mathit{Move}$ 语言学习交流群: 79489587

一：简介

本篇需要大家事先准备好 $\mathit {TypeScript}$ 最基础的环境（能简单运行跑出来 $\mathit {Hello\ World}$ 就够了），然后一步一步带着大家完成调用 $\mathit {Sui}\ \mathit {test}$ 链上的 $\mathit {a\ +\ b}$ 合约（该合约在前面的篇章当中部署，感兴趣的可以自行翻阅，如果后续本篇中用到的 $\mathit {ObjectID}$ 失效了，那应该是测试链重置了吧，届时请按照前面的篇章自行部署相关的合约），所有用到的依赖本篇都会一一阐述（从安装到简单的用途），系统环境是 $\mathit {MacOS}$，$\mathit {Node.js}$ 的替代包管理器使用的是 $\mathit {pnpm}$。

二：功能剖析

2.1 我是谁？

2.1.1 介绍

2.1.2 助记词

本篇选择通过助记词来表明身份，通过 $\mathit {Sui\ CLI}$ 创建 $\mathit {address}$ 后（本篇选择的加密方式是Ed25519），会给你私钥和助记词（$\text {12}$ 个单词），大家应该精心保存好。 当然，你大可以大大咧咧地将这个助记词写进代码里，但是一旦你将这份代码公开（例如 $\mathit {git\ push}$ 到 $\mathit {github}$ 上，没有人能够 $\text {100\%}$ 保证每一次都将助记词隐去），这就存在严重的安全隐患，因为所有人都可以通过这一份助记词来盗取你的资产。 因此，我们借助dotenv来读取环境变量。

mkdir sui_sdk_call_a_add_b
cd sui_sdk_call_a_add_b
pnpm init
# 后续的代码写在 index.ts 文件当中
touch index.ts

安装（如果已经安装过了请跳过这一步，本篇后续所有的安装选项皆是如此）

pnpm install -g dotenv

pnpm add -D dotenv

此时在package.json当中的devDependencies字段里，就会出现"dotenv": "^16.4.5"，后面的数字代表版本号，请以你自己的版本为准。

设置环境变量

export MNEMONIC="if you want to try it then try it it is ok"

注意： 上面双引号内的内容请自行替换成你的助记词 ~~不会真有人直接复制粘贴吧~~

测试代码

import dotenv from "dotenv";

dotenv.config();
const MNEMONIC = process.env.MNEMONIC!;
console.log(MNEMONIC);

process.env.MNEMONIC就是用来读取环境变量的值，它可能不存在，此时MNEMONIC的类型就是string | undefined（这一点可能会对后续使用该值造成困扰，具体困扰的原因后面再解释），而在最后添加!的目的就是人为标注保证这个值一定存在，此时MNEMONIC的类型就是固定的string，方便后续使用。

这里顺便提一下如何运行 $\mathit {ts}$ 代码，本篇选择用ts-node来跳过生成 $\mathit {js}$ 文件再运行这一步骤，想要使用它只需要通过pnpm install -g ts-node安装即可。

运行

ts-node index.ts

得到的输出就是你之前设置的环境变量的值，如果你真是直接复制粘贴的上面，那么这里得到的就是if you want to try it then try it it is ok

如果你无法运行，可能是你缺少@types/node这个依赖，请按照安装并添加dotenv依赖的方式，将其添加到package.json文件的依赖项字段里。

2.1.3 密钥对

在 $\mathit {Sui\ TypeScript\ SDK}$ 当中，提供了Keypair类来处理与 $\mathit {Sui\ address}$ 相关的加密密钥对，提供了签名并验证的逻辑，当然，想要使用它，首先你得需要有这个 $\mathit {SDK}$。

添加依赖

pnpm add -D @mysten/sui.js

根据助记词创建Keypair

// 这里根据你选择的加密方式进行选择，还有两个是
// @mysten/sui.js/keypairs/secp256k1 和
// @mysten/sui.js/keypairs/secp256r1
import { Ed25519Keypair } from '@mysten/sui.js/keypairs/ed25519';

const keyPair = Ed25519Keypair.deriveKeypair(MNEMONIC);

如果在从环境变量读取助记词的时候不在末尾添加!，那么这里就会报错，因为这个函数只能接受类型为string的参数（这就是上面提到的可能产生的困扰）。

通过这个Keypair类，我们可以轻松获得其对应的私钥、公钥及更多信息，但在本篇当中，我们只需要这个实例化的类即可，具体作用请继续向下阅读。

2.2 我在哪？

2.2.1 介绍

2.2.2 获取对应的 rpcUrl

依赖@mysten/sui.js上面已经添加，所以可以直接使用，在@mysten/sui.js/client里有一个getFullnodeUrl可以用来获取对应的 $\mathit {url}$，传入的参数也很简单 —— mainnet or devnet or testnet，localnet这里不做展开，就像上面说的，大多数人都不会用到本地模拟的链上环境。

我们调用的合约在测试网上，所以我们可以这么做：const rpcUrl = getFullnodeUrl('testnet');

2.2.3 获取对应的 client

光有 $\mathit {url}$ 还不够，我们需要通过这个 $\mathit {url}$ 来获取对应的 $\mathit {client}$，同样的，在@mysten/sui.js/client里有一个SuiClient可以做到这一点，就像是这样：const client = new SuiClient({ url: rpcUrl });

2.3 无内鬼，如何交易？

2.3.1 介绍

2.3.2 交易块

在@mysten/sui.js/transactions当中提供了TransactionBlock来创建交易块，代码也十分简单：const txb = new TransactionBlock();

接下去，我们来预处理一些信息：

$\mathit {target}:$ 按照PackageID::Module::Function的形式组成的字符串，按照前面篇章当中的部署上链的信息，我们可以编写以下代码：

const PACKAGE = "0xe2496799139225a06e7251857cdf46a32c20d773030c62b9bf24095cd60aac43";
const MODULE = "my_module";
const FUN = "add";
const target = `${PACKAGE}::${MODULE}::${FUN}`;
// console.log(target);

$\mathit {arguments:}$ 该函数需要两个 $\mathit u \text {64}$ 的参数，这个参数并不是链对象上的值，所以我们需要将这些值序列化后传入，在这里可以使用txb.pure，例如：txb.pure.u64(a)，其中 $\mathit a$ 在 $\mathit {Typescript}$ 文件当中是一个number类型的值。

紧接着，我们就可以通过 $\mathit {moveCall}$ 将这些信息导入：

txb.moveCall({
    target,
    arguments: [txb.pure.u64(a), txb.pure.u64(b)],
});

2.4 签字画押！

2.4.1 介绍

交易信息已经处理好了，就差签字画押提供费用进行交易了，在 $\mathit {SDK}$ 当中提供了两个相关的接口：executeTransactionBlock和signAndExecuteTransactionBlock 前者将签字画押和发送执行交易这两个过程分开了，本篇的内容我们选择使用后者，也就是将签名和交易二合一的方法。

2.4.2 交易

在之前得到的client当中，存在刚刚提到的signAndExecuteTransactionBlock函数，需要向其提供如下参数：

$\mathit {transactionBlock:}$ 序列化后的交易数据，也就是上面处理好的txb
$\mathit {signer:}$ 交易发起者（签字画押的人），也就是上面早早就得到的keyPair
$\mathit {requestType:}$ 确定 $\mathit {RPC}$ 节点应何时返回响应，有WaitForEffectsCert和WaitForLocalExecution可选，默认是WaitForLocalExecution
$\mathit {options:}$ 设置一系列布尔值，来确定返回响应时得到哪些信息（默认值都是False）：
- $\mathit {showBalanceChanges:}$ 是否显示余额变化
- $\mathit {showEffects:}$ 是否显示交易效果
- $\mathit {showEvents:}$ 是否显示交易事件
- $\mathit {showInput:}$ 是否显示输入数据
- $\mathit {showObjectChanges:}$ 是否显示对象变化
- $\mathit {showRawInput:}$ 是否显示 $\mathit {bcs}$ 编码的交易输入数据

在这里，我们选择将 $\mathit {showObjectChanges}$ 设置为 True，根据得到的 $\mathit {ObjectID}$ 来查询里面存储的值是否为 $\mathit a\ +\ \mathit b$ 的和，由于各种数据都在前面经过处理，这段代码就非常简洁：

const result = await client.signAndExecuteTransactionBlock({
    transactionBlock: txb,
    signer: keyPair,
    requestType: "WaitForLocalExecution",
    options: {
        showObjectChanges: true,
    }
});

console.log(
    `executeTransactionBlock result: ${JSON.stringify(result, null, 2)}`
);

最后console.log的内容，将会是本次交易的 $\mathit {ObjectChanges}$ 的相关信息。

2.5 由我来决定！

2.5.1 介绍

每次 $\mathit a\ +\ \mathit b$ 的参数，都只能通过代码修改？不！我要自己决定！

怎么决定？

从终端输入！

注意： 这里并非本篇文章的重点，所以简单带过。

2.5.2 输入

利用readline当中的createInterface来创建标准输入输出：

const readline = createInterface({
    input: process.stdin,
    output: process.stdout,
});

定义一个用来接受输入的空的字符串，并将得到的值传递给它：

var strNumber = "";
readline.question("Please enter two numbers, separated by spaces: ", inputNumber => {
    strNumber = inputNumber;
    readline.close();
});

从逻辑上来讲，我们需要等待用户完成输入再进行后续操作（交易块数据处理以及发送交易等环节），所以我们判断strNumber是否为空，再循环sleep：

while (strNumber == "")
    await new Promise(resolve => setTimeout(resolve, 100));

由于这里用到了await（等待一个异步函数的结果），所以这段输入的代码需要放在async声明的异步函数当中，如果有返回值也应该是Promise<Type>：

async function read(): Promise&lt;string[]> {
    // TODO
    // ......
        return strNumber.split(' ');
}

2.6 完整代码

import dotenv from "dotenv";
import { Ed25519Keypair } from '@mysten/sui.js/keypairs/ed25519';
import { getFullnodeUrl, SuiClient } from "@mysten/sui.js/client";
import { TransactionBlock } from "@mysten/sui.js/transactions";
import { createInterface } from "readline";

dotenv.config();
const MNEMONIC = process.env.MNEMONIC!;
// console.log(MNEMONIC);

const keyPair = Ed25519Keypair.deriveKeypair(MNEMONIC);

const client = new SuiClient({url: getFullnodeUrl("testnet")});

const txb = new TransactionBlock();

const PACKAGE = "0xe2496799139225a06e7251857cdf46a32c20d773030c62b9bf24095cd60aac43";
const MODULE = "my_module";
const FUN = "add";
const target = `${PACKAGE}::${MODULE}::${FUN}`;
// console.log(target);

async function read(): Promise&lt;string[]> {
    const readline = createInterface({
        input: process.stdin,
        output: process.stdout,
    });

    var strNumber = "";
    readline.question("Please enter two numbers, separated by spaces: ", inputNumber => {
        strNumber = inputNumber;
        readline.close();
    });

    while (strNumber == "")
        await new Promise(resolve => setTimeout(resolve, 100));
    return strNumber.split(' ');
}

async function callAdd(a: number, b: number) {
    txb.moveCall({
        target,
        arguments: [txb.pure.u64(a), txb.pure.u64(b)],
    });

    const result = await client.signAndExecuteTransactionBlock({
        transactionBlock: txb,
        signer: keyPair,
        requestType: "WaitForLocalExecution",
        options: {
            showObjectChanges: true,
        }
    });

    console.log(
        `executeTransactionBlock result: ${JSON.stringify(result, null, 2)}`
    );
}

async function main() {
    const nums = await read();
    // const a = Number(nums[0]);
    // const b = Number(nums[1]);
    // console.log(typeof a, typeof b, a, b);
    callAdd(Number(nums[0]), Number(nums[1]));
}

main();

三：运行校验

运行命令

ts-node index.ts

得到如下信息并且等待输入：

Please enter two numbers, separated by spaces:

根据提示输入两个数：

Please enter two numbers, separated by spaces: 369 963

得到信息：

executeTransactionBlock result: {
  "digest": "BiFBgM2AdpAGSkpsYcgWUFUK7osETW3NFNhdyUkWxKG",
  "objectChanges": [
    {
      "type": "mutated",
      "sender": "0x9e4092b6a894e6b168aa1c6c009f5c1c1fcb83fb95e5aa39144e1d2be4ee0d67",
      "owner": {
        "AddressOwner": "0x9e4092b6a894e6b168aa1c6c009f5c1c1fcb83fb95e5aa39144e1d2be4ee0d67"
      },
      "objectType": "0x2::coin::Coin&lt;0x2::sui::SUI>",
      "objectId": "0x03335f68ff3616af7e000b113c56a5ad53e8e8209784ca0a5623f70997c8d948",
      "version": "28131890",
      "previousVersion": "28131889",
      "digest": "C6kmRbL5LB5wvikk8bEij1YgZTN4gnyLCvSSu1aRPpv3"
    },
    {
      "type": "created",
      "sender": "0x9e4092b6a894e6b168aa1c6c009f5c1c1fcb83fb95e5aa39144e1d2be4ee0d67",
      "owner": {
        "AddressOwner": "0x9e4092b6a894e6b168aa1c6c009f5c1c1fcb83fb95e5aa39144e1d2be4ee0d67"
      },
      "objectType": "0xe2496799139225a06e7251857cdf46a32c20d773030c62b9bf24095cd60aac43::my_module::Result",
      "objectId": "0xafd346ba388f626f2bbc364ed507a33b3e8073bf0e610f538803ac0c986183f7",
      "version": "28131890",
      "digest": "CByybjYC9EKoGAGWvY2T3zuY8TLsmdkgJtyLh1rUd536"
    }
  ],
  "confirmedLocalExecution": true
}

根据新创建的Result ObjectID进行查询：

sui client object 0xafd346ba388f626f2bbc364ed507a33b3e8073bf0e610f538803ac0c986183f7

$\mathit a\ +\ \mathit b$ 的和：

╭───────────────┬─────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ objectId      │  0xafd346ba388f626f2bbc364ed507a33b3e8073bf0e610f538803ac0c986183f7                                             │
│ version       │  28131890                                                                                                       │
│ digest        │  CByybjYC9EKoGAGWvY2T3zuY8TLsmdkgJtyLh1rUd536                                                                   │
│ objType       │  0xe2496799139225a06e7251857cdf46a32c20d773030c62b9bf24095cd60aac43::my_module::Result                          │
│ owner         │ ╭──────────────┬──────────────────────────────────────────────────────────────────────╮                         │
│               │ │ AddressOwner │  0x9e4092b6a894e6b168aa1c6c009f5c1c1fcb83fb95e5aa39144e1d2be4ee0d67  │                         │
│               │ ╰──────────────┴──────────────────────────────────────────────────────────────────────╯                         │
│ prevTx        │  BiFBgM2AdpAGSkpsYcgWUFUK7osETW3NFNhdyUkWxKG                                                                    │
│ storageRebate │  1368000                                                                                                        │
│ content       │ ╭───────────────────┬─────────────────────────────────────────────────────────────────────────────────────────╮ │
│               │ │ dataType          │  moveObject                                                                             │ │
│               │ │ type              │  0xe2496799139225a06e7251857cdf46a32c20d773030c62b9bf24095cd60aac43::my_module::Result  │ │
│               │ │ hasPublicTransfer │  false                                                                                  │ │
│               │ │ fields            │ ╭─────┬───────────────────────────────────────────────────────────────────────────────╮ │ │
│               │ │                   │ │ id  │ ╭────┬──────────────────────────────────────────────────────────────────────╮ │ │ │
│               │ │                   │ │     │ │ id │  0xafd346ba388f626f2bbc364ed507a33b3e8073bf0e610f538803ac0c986183f7  │ │ │ │
│               │ │                   │ │     │ ╰────┴──────────────────────────────────────────────────────────────────────╯ │ │ │
│               │ │                   │ │ res │  1332                                                                         │ │ │
│               │ │                   │ ╰─────┴───────────────────────────────────────────────────────────────────────────────╯ │ │
│               │ ╰───────────────────┴─────────────────────────────────────────────────────────────────────────────────────────╯ │
╰───────────────┴─────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

不难发现，其中存储的 $\mathit {res}$ 值为 $\text {1332}$，大成功(๑•̀ㅂ•́)و✧

四：挑战任务在主网领 Sui

有了上述内容打底，你是否对安装、添加依赖，简单调用相关的 $\mathit {API}$ 有了一定的了解？

现在就到了实践的时刻！

$\mathit {twitter}$ 以及 $\mathit {let's\ move\ task}\text 6$，完成相关任务就可以领 $\mathit {Sui}$（主网的，可在交易所变现的那种），与本篇的差异就是需要你添加navi-sdk，通过助记词在NAVISDKClient上表明身份，再调用depositToNavi向 $\mathit {Navi}$ 转 $\text 1 \mathit {Sui}$，最后根据这笔交易的信息提交并等待 $\mathit {Sui}$ 到账即可，甚至都不需要自己创建并处理交易块信息。

$\mathit {navi\ sdk}$ 相关可以点击查看文档。

注意： 任务奖励随时可能截止，尤其是 $\mathit {twitter}$ 上的 ~~（可能就在这几天吧）~~，先到先得，抓紧做起来(๑•̀ㅂ•́)و✧

五：加入组织，共同进步！

Sui 中文开发群(TG)
$\mathit{Move}$ 语言学习交流群: 79489587

原创
学分: 36
分类: Sui
标签: Sui Move

本文参与登链社区写作激励计划，好文好收益，欢迎正在阅读的你也加入。

0基础从前端入门到Web3 —— 从测试网 a + b 到主网领Sui挑战

一：简介

二：功能剖析

2.1 我是谁？

2.1.1 介绍

2.1.2 助记词

2.1.3 密钥对

2.2 我在哪？

2.2.1 介绍

2.2.2 获取对应的 rpcUrl

2.2.3 获取对应的 client

2.3 无内鬼，如何交易？

2.3.1 介绍

2.3.2 交易块

2.4 签字画押！

2.4.1 介绍

2.4.2 交易

2.5 由我来决定！

2.5.1 介绍

2.5.2 输入

2.6 完整代码

三：运行校验

四：挑战任务在主网领 Sui

五：加入组织，共同进步！

0 条评论

文章目录