Sui提供dApp Kit 助力快速构建React Apps和dApps
终极管理员 知识笔记 132阅读
近日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} defaultNetworkdevnet> <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 NetworkSui是基于第一原理重新设计和构建而成的L1公有链旨在为创作者和开发者提供能够承载Web3中下一个十亿用户的开发平台。Sui上的应用基于Move智能合约语言并具有水平可扩展性让开发者能够快速且低成本支持广泛的应用开发。获取更多信息
官网英文Twitter中文TwitterDiscord英文电报群中文电报群