近日,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>,
- );
在这段代码中,您会:
现在,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>;
- }
当按下按钮时,它将:
dApp Kit还有许多其他功能,可帮助您快速轻松地构建dApps。要了解更多详细信息和高级功能,请浏览完整文档。
Sui是基于第一原理重新设计和构建而成的L1公有链,旨在为创作者和开发者提供能够承载Web3中下一个十亿用户的开发平台。Sui上的应用基于Move智能合约语言,并具有水平可扩展性,让开发者能够快速且低成本支持广泛的应用开发。获取更多信息:https://linktr.ee/sui_apac