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

news2024/10/3 22:14:12

近日，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>;
}

当按下按钮时，它将：