第一个 Move dApp | Move dApp极速入门（二）

Hello Move | Move dApp极速入门（一）

本系列将以 Starcoin 为例，讲解 Move 语言以及 Move dApp 的开发，及其背后的计算机原理。

本系列的全文更新中，见：

https://github.com/WeLightProject/Web3-dApp-Camp/tree/main/move-dapp

同步的打卡任务：

https://github.com/WeLightProject/Web3-dApp-Camp/discussions/categories/projects-others

0x01 源码下载

本教程中dApp 采用 react框架，下载starcoin-test-dapp-react：

$ git clone [e-mail]:starcoinorg/starcoin-test-dapp-react.git

0x02 极速启动

$ yarn
$ yarn start

image-20220729090935566

0x03 配置 Starmask

Starmask 是和 Metamask 一样的浏览器插件。

因此，我们可以使用相同的方式去配置：

• 确保节点 RPC 端口能访问

$ lsof -i:9851

image-20220729092714792

• 添加端口为9851 的本地网络

image-20220729092609290

• 在 Starmask 中导入测试账户

控制台中的导出私钥命令：

starcoin% account export 0x23dc2c167fcd16e28917765848e189ce

然后通过导入账户功能导入：

image-20220729092931382

• 余额显示

此时 Starmask、Starcoin Console 与 RPC 接口所查询到同一账户的 STC 余额应该一致。

其中 Starcoin RPC 的 Postman Collection 链接如下：

https://www.postman.com/starcoinorg/workspace/starcoin-blockchain-api/request/13565741-fa891c12-6684-452a-86cb-6d938fc72f4e

image-20220729093042286

image-20220729093116486

image-20220729093132604

0x04 修改调用代码

调整 demo 中的合约。首先我们定位到相关代码处：

src/app.jsx

找到标签 {/* Contracts Function */}：

{/* Contracts Function */}
                <div className="mt-4 shadow-2xl rounded-2xl border-2 border-slate-50 p-2">
                  <div className="font-bold">Contract Function</div>
                  <div
                    className="mt-4 rounded-2xl bg-blue-900 flex justify-center text-white p-4 font-bold cursor-pointer hover:bg-blue-700 duration-300"
                    onClick={() => {
                      makeModal({
                        children: ({ onClose }) => {
                          return (
                            <>
                              <Mask onClose={onClose} />
                              <Account />
                            </>
                          );
                        },
                      });
                    }}
                  >
                    0x1::TransferScripts::peer_to_peer_v2
                  </div>
                </div>

将 0x1::TransferScripts::peer_to_peer_v2改为Init_counter。

定位到src/modal.jsx，修改!! KEY PLACE为相应的 func：

try {
      // !! KEY PLACE
      const functionId = "0x2fe27a8d6a04d57583172cdda79df0e9::MyCounter::init_counter";
      // !! KEY PLACE
      const strTypeArgs = [];
      
      const tyArgs = utils.tx.encodeStructTypeTags(strTypeArgs);
      const sendAmount = parseFloat(amount, 10);
      if (!(sendAmount > 0)) {
        window.alert("Invalid sendAmount: should be a number!");
        return false;
      }
      const BIG_NUMBER_NANO_STC_MULTIPLIER = new BigNumber("1000000000");
      const sendAmountSTC = new BigNumber(String(sendAmount), 10);
      const sendAmountNanoSTC = sendAmountSTC.times(
        BIG_NUMBER_NANO_STC_MULTIPLIER
      );
      const sendAmountHex = `0x${sendAmountNanoSTC.toString(16)}`; // Multiple BcsSerializers should be used in different closures, otherwise, the latter will be contaminated by the former.
      const amountSCSHex = (function () {
        const se = new bcs.BcsSerializer();
        // eslint-disable-next-line no-undef
        se.serializeU128(BigInt(sendAmountNanoSTC.toString(10)));
        return hexlify(se.getBytes());
      })();

      // !! KEY PLACE
      const args = [];

      // const args = [arrayify(account), arrayify(amountSCSHex)];

      const scriptFunction = utils.tx.encodeScriptFunction(
        functionId,
        tyArgs,
        args
      );

0x05 调用函数

打开http://localhost:3000，即可成功调用智能合约的函数。

image

image