（十六）Move语言学习笔记：使用脚手架创建Sui dApp项目与Navi SDK集成

liumuhui 8个月前 (01-28) 阅读数 110 #区块链

文章标签 Sui Move

本文介绍HOH水分子社区Move共学营的task6学习笔记。

1. 使用脚手架快速创建Sui dApp项目

Sui生态为开发者提供了一个名为@mysten/create-dapp的脚手架工具，帮助我们快速初始化一个功能完善的dApp项目。以下是使用脚手架的简单步骤：

1.1 安装和创建项目

运行以下命令启动脚手架工具：

npm create @mysten/dapp

脚手架会通过交互式提示，引导你完成新项目的创建。

1.2 选择模板

项目创建过程中，你可以选择以下两种模板：

react-client-dapp：一个简单的React模板，包含展示钱包内资产列表的示例功能。
react-e2e-counter：一个更复杂的端到端模板，结合了Move代码和简单的计数器UI。

1.3 脚手架的功能特性

该脚手架基于Vite TypeScript项目，并预配置了以下功能：

React：构建现代化的用户界面。
TypeScript：为代码提供类型安全。
Radix UI：一组可访问性友好的UI组件。
ESLint：代码风格和质量检查工具。
@mysten/dapp-kit：与Sui网络交互的核心工具包。

1.4 启动开发服务器

完成项目创建后，进入项目目录并运行以下命令启动本地开发服务器：

cd your-dapp-project
npm install
npm run dev

随后，通过浏览器访问项目，即可开始你的dApp开发之旅。

2. 集成Sui dApp Kit与Navi SDK

创建项目后，你可以通过集成@mysten/dapp-kit和navi-sdk，实现复杂的链上交互功能。以下是具体步骤：

2.1 安装依赖

在项目根目录运行以下命令安装必要的库：

npm install @mysten/dapp-kit @mysten/sui @tanstack/react-query navi-sdk

2.2 配置网络和Providers

在应用的入口文件（如App.js或App.tsx）中配置网络连接和Provider组件：

import { createNetworkConfig, SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
import { getFullnodeUrl } from '@mysten/sui/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const { networkConfig } = createNetworkConfig({
    localnet: { url: getFullnodeUrl('localnet') },
    mainnet: { url: getFullnodeUrl('mainnet') },
});
const queryClient = new QueryClient();

function App() {
    return (
        &lt;QueryClientProvider client={queryClient}>
            &lt;SuiClientProvider networks={networkConfig} defaultNetwork="localnet">
                &lt;WalletProvider>
                    &lt;YourApp />
                &lt;/WalletProvider>
            &lt;/SuiClientProvider>
        &lt;/QueryClientProvider>
    );
}

export default App;

此配置确保应用能够连接到Sui网络，并提供了钱包和状态管理的支持。

2.3 实现与Navi协议交互的页面

代码详细解读：NaviPage

以下逐步解析代码中的每个关键点，详细说明其作用和实现逻辑，并辅以具体代码段。

导入工具和模块

import { useCurrentAccount, useSignAndExecuteTransaction } from "@mysten/dapp-kit";
import { Transaction } from "@mysten/sui/transactions";
import { depositCoin, borrowCoin } from 'navi-sdk/dist/libs/PTB';
import { pool, wUSDC } from 'navi-sdk/dist/address';

useCurrentAccount：获取当前连接的钱包账户信息。
useSignAndExecuteTransaction：提供一个签名并执行交易的函数。
Transaction：用于构造复杂的链上交易。
depositCoin 和 borrowCoin：Navi SDK 提供的功能，用于存款和借款操作。
pool 和 wUSDC：Navi协议中预设的资源池配置和资产信息。

定义核心组件

const NaviPage = () => {
    const { mutate: signAndExecuteTransaction } = useSignAndExecuteTransaction();
    const currentAccount = useCurrentAccount();

signAndExecuteTransaction：通过useSignAndExecuteTransaction钩子获取链上交易提交的函数。
currentAccount：使用useCurrentAccount获取当前连接的钱包账户。如果未连接钱包，返回null。

检查钱包连接状态

if (!currentAccount) {
    alert("请先连接钱包");
    return;
}

确保用户已连接钱包，否则提示用户操作并终止后续逻辑。

初始化交易对象

const tx = new Transaction();
tx.setSender(currentAccount.address);

new Transaction()：创建一个新的交易对象tx。
setSender：指定交易发起方为当前钱包地址currentAccount.address。

分割Gas Coin并存款

const suiPoolConfig = pool['Sui'];
const splitCoin = tx.splitCoins(tx.gas, [1_000_000_000]);

await depositCoin(tx, suiPoolConfig, splitCoin, 1_000_000_000);

获取池配置：pool['Sui']从Navi协议的资源池中获取针对Sui资产的配置。
分割Gas Coin：splitCoins将Gas Coin拆分出1 SUI（1,000,000,000 MIST）。
存款到池：depositCoin将分割出的1 SUI存入指定资源池。

动态计算借款金额并借出USDC

const currentDate = new Date();
const borrowAmount = parseFloat(`0.${currentDate.getMonth() + 1}${currentDate.getDate()}${currentDate.getHours()}`);
const loanPoolConfig = pool[wUSDC.symbol as keyof typeof pool];
const [borrowedUSDC] = await borrowCoin(tx, loanPoolConfig, borrowAmount * Math.pow(10, wUSDC.decimal));

动态计算借款金额：基于当前日期，借款金额为0.MMDDHH。
获取USDC池配置：通过pool[wUSDC.symbol]获取USDC资产配置。
借款操作：调用borrowCoin从USDC资源池中借款。

存回借出的USDC

await depositCoin(tx, loanPoolConfig, borrowedUSDC, borrowAmount * Math.pow(10, wUSDC.decimal));

将步骤6中借出的USDC按相同金额存回资源池。

提交交易

await signAndExecuteTransaction({ transaction: tx });
alert("交易完成！");

签名并提交交易，完成整个流程。

组件的UI部分

return &lt;button onClick={handleTransaction}>执行交易&lt;/button>;

定义一个按钮，当用户点击时，执行handleTransaction函数。

完整代码

import { useCurrentAccount, useSignAndExecuteTransaction } from "@mysten/dapp-kit";
import { Transaction } from "@mysten/sui/transactions";
import { depositCoin, borrowCoin } from 'navi-sdk/dist/libs/PTB';
import { pool, wUSDC } from 'navi-sdk/dist/address';

const NaviPage = () => {
    const { mutate: signAndExecuteTransaction } = useSignAndExecuteTransaction();
    const currentAccount = useCurrentAccount();

    const handleTransaction = async () => {
        if (!currentAccount) {
            alert("请先连接钱包");
            return;
        }

        const tx = new Transaction();
        tx.setSender(currentAccount.address);

        try {
            // 1. 拆分Gas Coin并存款
            const suiPoolConfig = pool['Sui'];
            const splitCoin = tx.splitCoins(tx.gas, [1_000_000_000]);
            await depositCoin(tx, suiPoolConfig, splitCoin, 1_000_000_000);

            // 2. 动态计算借款金额并借出USDC
            const currentDate = new Date();
            const borrowAmount = parseFloat(`0.${currentDate.getMonth() + 1}${currentDate.getDate()}${currentDate.getHours()}`);
            const loanPoolConfig = pool[wUSDC.symbol];
            const [borrowedUSDC] = await borrowCoin(tx, loanPoolConfig, borrowAmount * Math.pow(10, wUSDC.decimal));

            // 3. 存回借款
            await depositCoin(tx, loanPoolConfig, borrowedUSDC, borrowAmount * Math.pow(10, wUSDC.decimal));

            // 4. 提交交易
            await signAndExecuteTransaction({ transaction: tx });
            alert("交易完成！");
        } catch (error) {
            console.error("交易失败:", error);
            alert("交易失败，请检查控制台日志。");
        }
    };

    return &lt;button onClick={handleTransaction}>执行交易&lt;/button>;
};

export default NaviPage;

通过这段代码，你可以实现以下链上操作：