使用 Sui TypeScript SDK 的客户端应用

本练习将引导你在 React 应用中设置 dApp Kit，使你能够连接钱包并从 Sui RPC 节点查询数据以在你的应用中显示。如果你想快速启动一个完全功能的应用程序，请在终端或控制台中运行以下命令，以使用本练习中的所有步骤生成一个新的应用：

info

创建 Sui 项目脚手架时，您需要使用 pnpm 包管理器。如尚未安装，可参照 pnpm 安装指南进行安装.

pnpm create @mysten/dapp --template react-client-dapp

什么是 Sui TypeScript SDK？

Sui TypeScript SDK（@mysten/sui.js）提供了与 Sui 生态系统进行交互所需的所有低级功能。你可以在任何 TypeScript 或 JavaScript 项目中使用它，包括 Web 应用程序、Node.js 应用程序或使用支持 TypeScript 的工具（如 React Native）编写的移动应用程序。

有关 Sui TypeScript SDK 的更多信息，请参阅 Sui TypeScript SDK 文档。

什么是 dApp Kit？

dApp Kit（@mysten/dapp-kit）是一组 React hooks、组件和实用工具，使在 Sui 上构建 dApp 变得简单。有关 dApp Kit 的更多信息，请参阅 dApp Kit 文档。

安装依赖项

要开始使用，你需要一个 React 应用程序。以下步骤适用于任何 React，因此你可以按照相同的步骤向现有的 React 应用程序添加 dApp Kit。如果你正在启动一个新项目，你可以使用 Vite 来生成一个新的 React 应用程序。

在你的终端或控制台中运行以下命令，并选择 React 作为框架，然后选择其中一个 TypeScript 模板：

npm
Yarn
pnpm

npm init vite

yarn create vite

pnpm create vite

现在你有了一个 React 应用程序，你可以安装必要的依赖项来使用 dApp Kit：

npm
Yarn
pnpm

npm install @mysten/sui.js @mysten/dapp-kit @tanstack/react-query

yarn add @mysten/sui.js @mysten/dapp-kit @tanstack/react-query

pnpm add @mysten/sui.js @mysten/dapp-kit @tanstack/react-query

设置提供者组件

为了使用 dApp Kit 的所有功能，请使用一对 Provider 组件包装你的应用程序。

打开渲染你的应用程序的根组件（Vite 模板默认使用的位置是 src/main.tsx），并集成或替换当前的代码如下。

第一个要设置的 Provider 是来自 @tanstack/react-query 的 QueryClientProvider。这个 Provider 管理 dApp Kit 中各种 hooks 的请求状态。如果你已经在使用 @tanstack/react-query，dApp Kit 可以共享相同的 QueryClient 实例。

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <QueryClientProvider client={queryClient}>
            <App />
        </QueryClientProvider>
    </React.StrictMode>,
);

接下来，设置 SuiClientProvider。这个 Provider 从 @mysten/sui.js 传递一个 SuiClient 实例给 dApp Kit 中的所有 hooks。此提供者管理 dApp Kit 连接到的网络，并可以接受多个网络的配置。此练习连接到 devnet。

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

const queryClient = new QueryClient();
const networks = {
    devnet: { url: getFullnodeUrl('devnet') },
    mainnet: { url: getFullnodeUrl('mainnet') },
};

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <QueryClientProvider client={queryClient}>
            <SuiClientProvider networks={networks} defaultNetwork="devnet">
                <App />
            </SuiClientProvider>
        </QueryClientProvider>
    </React.StrictMode>,
);

最后，设置来自 @mysten/dapp-kit 的 WalletProvider，并导入 dapp-kit 组件的样式。

import '@mysten/dapp-kit/dist/index.css';

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

const queryClient = new QueryClient();
const networks = {
    devnet: { url: getFullnodeUrl('devnet') },
    mainnet: { url: getFullnodeUrl('mainnet') },
};

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <QueryClientProvider client={queryClient}>
            <SuiClientProvider networks={networks} defaultNetwork="devnet">
                <WalletProvider>
                    <App />
                </WalletProvider>
            </SuiClientProvider>
        </QueryClientProvider>
    </React.StrictMode>,
);

连接钱包

使用所有设置好的 Providers，你可以使用 dApp Kit 提供的 hooks 和组件。为了允许用户将他们的钱包连接到你的 dApp，添加一个 ConnectButton。

import { ConnectButton } from '@mysten/dapp-kit';

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <ConnectButton />
            </header>
        </div>
    );
}

ConnectButton 组件显示一个按钮，点击按钮会打开一个模态框，允许用户连接他们的钱包。连接成功后，它会显示他们的地址，并提供断开连接的选项。

获取已连接钱包的地址

现在你已经让用户连接他们的钱包，你可以开始使用 useCurrentAccount hook 获取有关已连接钱包账户的详细信息。

import { ConnectButton, useCurrentAccount } from '@mysten/dapp-kit';

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <ConnectButton />
            </header>

            <ConnectedAccount />
        </div>
    );
}

function ConnectedAccount() {
    const account = useCurrentAccount();

    if (!account) {
        return null;
    }

    return <div>Connected to {account.address}</div>;
}

从 Sui RPC 节点查询数据

现在你已经有了要连接的账户，你可以查询连接账户拥有的对象：

import { useCurrentAccount, useSuiClientQuery } from '@mysten/dapp-kit';

function ConnectedAccount() {
    const account = useCurrentAccount();

    if (!account) {
        return null;
    }

    return (
        <div>
            <div>Connected to {account.address}</div>;
            <OwnedObjects address={account.address} />
        </div>
    );
}

function OwnedObjects({ address }: { address: string }) {
    const { data } = useSuiClientQuery('getOwnedObjects', {
        owner: address,
    });
    if (!data) {
        return null;
    }

    return (
        <ul>
            {data.data.map((object) => (
                <li key={object.data?.objectId}>
                    <a href={`https://suiexplorer.com/object/${object.data?.objectId}`}>
                        {object.data?.objectId}
                    </a>
                </li>
            ))}
        </ul>
    );
}

你现在已经有了一个连接到钱包并能够从 RPC 节点查询数据的 dApp。

什么是 Sui TypeScript SDK？​

什么是 dApp Kit？​

安装依赖项​

设置提供者组件​

连接钱包​

获取已连接钱包的地址​

从 Sui RPC 节点查询数据​

相关链接​