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 简化了这个过程。让我们创建一个按钮，将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
• 添加一个 分币 交易，将SUI从gas coin拆分成一个新的coin。
• 添加一个新的 transferObject 交易，将新coin转移到另一个地址。
• 使用连接的钱包签署和执行 TransactionBlock 。
• 触发一个 alert ，让您知道交易已执行完毕。

更多功能

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