Sui

Introduction

Here is an example of how to use @mysten/dapp-kit to support the various wallets in the Sui ecosystem with the wormhole-kit.

Installation

npm install @zktx.io/wormhole-kit @mysten/dapp-kit @mysten/sui.js/client @tanstack/react-query

yarn add @zktx.io/wormhole-kit @mysten/dapp-kit @mysten/sui.js/client @tanstack/react-query

Set up providers

// index.tsx

import { StrictMode } from 'react';

import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
import { getFullnodeUrl } from '@mysten/sui.js/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WhProvider } from '@zktx.io/wormhole-kit';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <StrictMode>
    <WhProvider
      network="Testnet"
      chains={['Sui', 'Sepolia', 'Solana', 'Aptos', 'Celo', 'Polygon']}
      mode="dark"
    >
      <QueryClientProvider client={queryClient}>
        <SuiClientProvider
          defaultNetwork="testnet"
          networks={{ testnet: { url: getFullnodeUrl('testnet') } }}
        >
          <WalletProvider autoConnect>
            <App />
          </WalletProvider>
        </SuiClientProvider>
      </QueryClientProvider>
    </WhProvider>
  </StrictMode>,
);

Use Components

Transfer Asset Modal

    // import { useCurrentAccount } from '@mysten/dapp-kit';
    // const account = useCurrentAccount();
    <WhTransferModal
        chain="Sui"
        token={'0x2::sui::SUI'}
        address={account.address}
        trigger={<button>Transfer</button>}
        handleUnsignedTxs={handleUnsignedTxs}
    />

Redeem Asset Modal

    // import { useCurrentAccount } from '@mysten/dapp-kit';
    // const account = useCurrentAccount();
    <WhRedeemModal
        chain="Sui"
        address={account.address}
        trigger={<button>Redeem</button>}
        handleUnsignedTxs={handleUnsignedTxs}
    />

Sign Transaction

// import { useSignAndExecuteTransactionBlock } from '@mysten/dapp-kit';
// const { mutate: signAndExecuteTransactionBlock } = useSignAndExecuteTransactionBlock();
const handleUnsignedTxs = (unsignedTxs: IUnsignedTx[]) => {
  try {
    const unsignedTx = unsignedTxs[0];
    unsignedTx &&
      signAndExecuteTransactionBlock(
        {
          transactionBlock: unsignedTxs[0],
        },
        {
          onError: (err) => {
            console.error(err);
          },
          onSuccess: (data) => {
            console.log(data);
          },
        },
      );
  } catch (error) {
    console.error(err);
  }
};

Github

Demo