Sui 에코시스템

Sui 에서 dApp Kit로 React 앱 빌드하기

개발자가 빠르고 효율적으로 빌드를 시작할 수 있는 새로운 SDK를 소개합니다.

오늘 미스텐랩스( Sui)는 리액트 애플리케이션과 탈중앙화 애플리케이션(dApp) 개발을 위한 올인원 솔루션인 dApp 키트를 출시했습니다. 이 솔루션은 @mysten/dapp-kit 는 지갑 연결, 트랜잭션 서명, RPC 노드에서 데이터 가져오기와 같은 필수 작업을 간소화하도록 설계된 React에 맞춤화된 새로운 SDK입니다. dApp Kit는 다음과 같이 테마가 지정 가능하고 미리 빌드된 구성 요소를 모두 제공합니다. 를 사용하여 지갑 상호작용을 간소화하고, 하위 수준의 후크와 유틸리티를 사용하여 사용자 지정 구성 요소를 쉽게 만들 수 있습니다.

디앱 키트는 누구나 쉽게 디앱을 만들 수 있도록 하는 것을 목표로 만들어진 미스텐 랩스의 교훈을 집대성한 것입니다. 실제로 미스텐 랩스는 자체 개발한 모든 디앱에 디앱 키트를 사용하기 시작했으며, Sui Explorer에서 Sui 월렛에 이르기까지 우리가 만든 모든 앱에 디앱 키트를 사용하고 있습니다. 이제 막 시작했지만, 키트를 공유하여 더 많은 빌더들이 사용할 수 있도록 돕게 되어 기쁩니다!

dApp 키트에 대한 종합적인 문서는 전체 문서를 확인하세요. 이 블로그 포스트에서는 React 프로젝트에서 dApp Kit를 설정하는 방법을 안내합니다.

설치

dApp Kit를 시작하려면 먼저 리액트 쿼리와 함께 설치하세요:

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 키트 CSS를 가져옵니다.
리액트 쿼리 공급자를 설정하여 dApp Kit에서 만든 요청의 상태를 관리합니다.
SuiClient 인스턴스를 제공하고 연결된 네트워크를 관리하는 SuiClientProvider를 초기화합니다.
지갑 연결 관리를 담당하는 WalletProvider를 구성합니다.

이제 앱이 올바르게 설정되었으므로 dApp Kit의 기능을 사용해 볼 수 있습니다.

지갑 연결하기

사용자가 Sui 지갑을 디앱에 연결할 수 있도록 하려면, 손쉽게 연결 버튼:

import { ConnectButton } from '@mysten/dapp-kit';

function App() {
	return (
		<div>
			<nav>
				<ConnectButton />
			</nav>
			<section>Hello, world</section>
		</div>
	);
}

이 코드는 모달을 열고 사용자에게 지갑을 연결하라는 메시지를 표시하는 버튼을 렌더링합니다. 연결되면 사용자는 연결된 지갑을 볼 수 있으며 지갑 연결을 다시 해제할 수 있는 옵션이 있습니다.

지갑 상태 관리

디앱 키트는 지갑 상태를 관리하기 위한 다양한 후크를 제공합니다. 예를 들어 현재 지갑 사용 훅을 사용하면 사용자의 연결된 계정에 대한 정보를 검색할 수 있습니다:

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>
	);
}

이를 통해 사용자의 지갑 상태에 따라 관련 정보를 표시할 수 있습니다.

데이터 가져오기

디앱 키트는 또한 현재 연결된 사용자의 데이터를 쉽게 가져올 수 있습니다. 현재 연결된 사용자의 사용수이클라이언트 쿼리 훅을 사용하여 RPC 메서드를 호출할 수 있습니다. 다음과 같이 사용할 수 있습니다. 소유 개체 을 클릭하여 연결된 계정이 소유한 개체 목록에 액세스하고 표시합니다:

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 호출에 사용할 수 있는 후크에 대한 자세한 내용은 문서에서.

거래 빌딩

많은 디앱은 트랜잭션 블록을 생성하고 서명할 수 있는 기능이 필요합니다. 사용 서명 및 실행 트랜잭션 블록 후크가 필요합니다. 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>;
}

버튼을 누르면 작동합니다: