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

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

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}$ 当中,想要调用链上的合约,自然也需要表明是谁在调用。<br>这一点可能在本篇当中体现不出其重要性,但是在今后尤其是涉及到资产方面的转赠与获取将至关重要,因为区块链一切都是匿名的,如果资产出了问题(被钓鱼被骗被盗),几乎没有找回的可能。<br>当然,每一次合约调用都将支付一笔费用,这要求你在 $\mathit {TypeScript}$ 中表明的身份需要拥有一定的资产(由于是 $\mathit {test}$​​ 链,可以领水,所以不存在这个问题,相关操作也可以自行翻阅前篇)。

2.1.2 助记词

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

接触过 $\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 testnetlocalnet这里不做展开,就像上面说的,大多数人都不会用到本地模拟的链上环境。

我们调用的合约在测试网上,所以我们可以这么做: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 介绍

至此,我们已经明确了身份信息和所在的链,那么如何进行交易,也就是合约调用?<br>我们需要创建交易相关的信息,也就是调用合约时的必要参数,包括 $\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的形式组成的字符串,按照前面篇章当中的部署上链的信息,我们可以编写以下代码:
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}$ 当中提供了两个相关的接口:executeTransactionBlocksignAndExecuteTransactionBlock<br>前者将签字画押和发送执行交易这两个过程分开了,本篇的内容我们选择使用后者,也就是将签名和交易二合一的方法。

2.4.2 交易

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

  • $\mathit {transactionBlock:}$ 序列化后的交易数据,也就是上面处理好的txb
  • $\mathit {signer:}$ 交易发起者(签字画押的人),也就是上面早早就得到的keyPair
  • $\mathit {requestType:}$ 确定 $\mathit {RPC}$ 节点应何时返回响应,有WaitForEffectsCertWaitForLocalExecution可选,默认是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&lt;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}$ 上的 (可能就在这几天吧),先到先得,抓紧做起来(๑•̀ㅂ•́)و✧

五:加入组织,共同进步!

点赞 2
收藏 1
分享
本文参与登链社区写作激励计划 ,好文好收益,欢迎正在阅读的你也加入。

0 条评论

请先 登录 后评论
Nigdle
Nigdle
0xa745...Fe19
江湖只有他的大名,没有他的介绍。