Sui提供dApp Kit 助力快速构建React Apps和dApps

近日，Mysten Labs推出了dApp Kit，这是一个全新的解决方案，可用于在Sui上开发React应用程序和去中心化应用程序（dApps）。@mysten/dapp-kit是专门为React定制的全新SDK，旨在简化诸如连接钱包、签署交易和从RPC节点获取数据等重要任务。dApp Kit提供了可主题化的预构建组件，以简化钱包交互，还提供了更低级别的hooks和实用工具，以简化创建自定义组件。

dApp kit是从Mysten Labs的经验中提炼出的，旨在让每个人更容易地开始构建dApps。事实上，Mysten Labs正在开始在所有自己的dApps中使用dApp kit。从Sui Explorer到Sui Wallet，他们构建的每个app都使用了dApp kit。我们才刚刚开始，但很高兴分享这个工具包，并帮助更多的开发者使用它！

有关dApp Kit的详细介绍，请查看完整文档。本文，我们将向您介绍如何在React项目中设置dApp Kit。

第一步：安装

要开始使用dApp Kit，首先需要安装它以及react-query：

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

安装完成后，您需要在应用程序中设置一些提供程序，以确保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 = {localnet: { url: getFullnodeUrl('localnet') },devnet: { url: getFullnodeUrl('devnet') },testnet: { url: getFullnodeUrl('testnet') },mainnet: { url: getFullnodeUrl('mainnet') },
};ReactDOM.createRoot(document.getElementById('root')!).render(<QueryClientProvider client={queryClient}><SuiClientProvider networks={networks} defaultNetwork="devnet"><WalletProvider><App /></WalletProvider></SuiClientProvider></QueryClientProvider>,
);

在这段代码中，您会：

• 导入必要的dApp Kit CSS以正确渲染组件
• 设置一个react-query提供程序，用于管理dApp Kit发出的请求的状态
• 初始化SuiClientProvider，它提供了SuiClient的实例并管理连接的网络
• 配置WalletProvider，负责管理钱包连接

现在，app已经正确设置，您可以开始使用dApp Kit的功能。

第二步：连接钱包

要让用户能够将他们的Sui钱包连接到dApp，您可以轻松地添加一个ConnectButton：

import { ConnectButton } from '@mysten/dapp-kit';function App() {return (<div><nav><ConnectButton /></nav><section>Hello, world</section></div>);
}

这段代码将渲染一个按钮，点击它会打开一个模态框，提示用户连接他们的钱包。一旦连接成功，用户将看到他们已连接的钱包，并有选项再次断开连接。

第三步：管理钱包状态

dApp Kit提供了许多用于管理钱包状态的hooks。例如，useCurrentWallet允许您获取有关用户已连接账户的信息：

import { ConnectButton, useCurrentAccount } from '@mysten/dapp-kit';function App() {const account = useCurrentAccount();return (<div><nav><ConnectButton /></nav><section>{account ? 'No wallet connected' : `Your address is ${account.address}`}</section></div>);
}

这使您能够根据用户的钱包状态显示相关信息。

第四步：获取数据

dApp Kit还为当前连接的用户提供了数据获取功能。可以使用useSuiClientQuery来调用RPC。您可以使用getOwnedObjects来访问并显示已连接账户拥有的对象列表：

import { ConnectButton, useCurrentAccount } from '@mysten/dapp-kit';function App() {const account = useCurrentAccount();return (<div><nav><ConnectButton /></nav><section>{account ? 'No wallet connected' : <OwnedObjects />}</section></div>);
}export function OwnedObjects() {const account = useCurrentAccount()!;const { data } = useSuiClientQuery('getOwnedObjects', { owner: account.address });return (<ul>{data.data.map((object) => (<li key={object.data?.objectId}>{object.data?.objectId}</li>))}</ul>);
}

您可以在文档中了解更多关于进行RPC可调用的hooks信息。

第五步：构建交易

许多dApp需要创建和签署交易区块的能力。dApp Kit通过useSignAndExecuteTransactionBlock hook简化了这个过程。让我们创建一个按钮，将SUI发送到预定义的地址：

import { signAndExecuteTransactionBlock } from '@mysten/dapp-kit';
import { TransactionBlock } from '@mysten/sui.js/transactions';export function SendSui() {const { mutateAsync: signAndExecuteTransactionBlock } = useSignAndExecuteTransactionBlock();function sendMessage() {const txb = new TransactionBlock();const coin = txb.splitCoins(txb.gas, [10]);txb.transferObjects([coin], 'Ox...');signAndExecuteTransactionBlock({transactionBlock: txb,}).then(async (result) => {alert('Sui sent successfully');});}return <button onClick={() => sendMessage()}>Send me Sui!</button>;
}

当按下按钮时，它将：

• 创建一个新的TransactionBlock
• 添加一个splitCoins交易，将SUI从gas coin拆分成一个新的coin
• 添加一个新的transferObject交易，将新coin转移到另一个地址
• 使用连接的钱包签署和执行TransactionBlock
• 触发一个alert，让您知道交易已执行完毕

更多功能

dApp Kit还有许多其他功能，可帮助您快速轻松地构建dApps。要了解更多详细信息和高级功能，请浏览完整文档。

有兴趣为Sui Blog做出贡献吗？欢迎填写此表格。

---

关于 Sui Network

Sui是基于第一原理重新设计和构建而成的L1公有链，旨在为创作者和开发者提供能够承载Web3中下一个十亿用户的开发平台。Sui上的应用基于Move智能合约语言，并具有水平可扩展性，让开发者能够快速且低成本支持广泛的应用开发。获取更多信息：https://linktr.ee/sui_apac

官网｜英文Twitter｜中文Twitter｜Discord｜英文电报群｜中文电报群