Sui Provider

After setting up your wallet, you can have access to the Sui provider:

// react
const { providers } = useTomo()
const { suiProvider } = providers;

// pure js
const suiProvider = window.tomo_sui

Get Sui Address

The Sui address is from the wallet state or provider. In the React framework:

import { useTomo, getWalletState } from '@tomo-inc/tomo-web-sdk';
const { walletState, providers } = useTomo()

// get from wallet state
const suiAddress = walletState.suiAddress

// or get from provider
const suiAddress = await providers.suiProvider.getAddress()

Or Pure JS:

/** pure js */
import { getWalletState } from '@tomo-inc/tomo-web-sdk';

// get from wallet state
const suiAddress = getWalletState().suiAddress

// or get from provider
const suiAddress = await window.tomo_sui.getAddress()

Provider Functions

Signing a Message

The Sui provider signs messages in bytes and outputs the message and signature:

// interface
signPersonalMessage(_input: { message: Uint8Array; }): Promise<
    string | 
    {
        bytes: string;
        signature: string;
    }
>;

// example
const encoder = new TextEncoder();
const message = encoder.encode("hello world sui");
const res = await provider?.signPersonalMessage({ message });

Sign Transaction

We follow the standard from Mysten Lab for signing transactions. The user needs to provide a SuiSignTransactionInput and get a signedtransaction.

// interface
signTransaction: (input: SuiSignTransactionInput) => Promise<SignedTransaction>;

/** Input for signing transactions. */
interface SuiSignTransactionInput {
    transaction: {
        toJSON: () => Promise<string>;
    };
    account: WalletAccount;
    chain: IdentifierString;
    signal?: AbortSignal;
}
/** Output of signing transactions. */
interface SignedTransaction {
    /** Transaction as base64 encoded bcs. */
    bytes: string;
    /** Base64 encoded signature */
    signature: string;
}

// example
const input = {
  transaction,
  account: { address: walletState.suiAddress!, chain: "sui:mainnet" },
  chain: "sui:mainnet",
};

const signRes = await suiProvider.signTransaction(input);

Sign and Execute Transaction

We support standard sign and execute a transaction through one call, which requires SuiSignTransactionInput as inputs.

signAndExecuteTransaction: (input: SuiSignAndExecuteTransactionInput) => Promise<SuiSignAndExecuteTransactionOutput>;

/** Input for signing and sending transactions. */
interface SuiSignAndExecuteTransactionInput extends SuiSignTransactionInput {
}

/** Output of signing and sending transactions. */
interface SuiSignAndExecuteTransactionOutput extends SignedTransaction {
    digest: string;
    /** Transaction effects as base64 encoded bcs. */
    effects: string;
}

/** Input for signing transactions. */
interface SuiSignTransactionInput {
    transaction: {
        toJSON: () => Promise<string>;
    };
    account: WalletAccount;
    chain: IdentifierString;
    signal?: AbortSignal;
}

/** Output of signing transactions. */
interface SignedTransaction {
    /** Transaction as base64 encoded bcs. */
    bytes: string;
    /** Base64 encoded signature */
    signature: string;
}


// example
const input = {
  transaction,
  account: { address: walletState.suiAddress!, chain: "sui:mainnet" },
  chain: "sui:mainnet",
};

const sendRes = await suiProvider.signAndExecuteTransaction(input);

Example

We provide an example of a transfer transaction as follows:

React

import { TomoContextProvider, useTomo } from '@tomo-inc/tomo-web-sdk'

const CLIENT_ID = 'Your client id'

enum Theme {
  Light = 'light',
  Dark = 'dark'
}

export default function SuiDemo() {
  return (
    <TomoContextProvider
      theme={Theme.Light}
      chainTypes={['sui']}
      clientId={CLIENT_ID}
    >
      <App />
    </TomoContextProvider>
  )
}
export function App() {
  const { providers, walletState, openConnectModal } = useTomo()
  const { suiProvider } = providers

  return (
    <div style={{ display: 'flex', gap: '10px' }}>
      <button
        onClick={() => {
          openConnectModal()
        }}
      >
        openConnectModal
      </button>

      <button
        onClick={async () => {
            if (!suiProvider) throw new Error("TronProvider not found");
            const transaction = await buildSuiTransaction({
              fromAddress: walletState.suiAddress!,
              toAddress: address,
              amount: String(amount),
              // coinType: "0x2::sui::SUI",
            });
            const input = {
              transaction,
              account: { address: walletState.suiAddress!, chain: "sui:mainnet" },
              chain: "sui:mainnet",
            };
            const signRes = await suiProvider.signTransaction(input);
            console.log("signRes", signRes);
        }}
      >
        sign transaction
      </button>

      <button
         onClick={async () => {
            if (!suiProvider) throw new Error("TronProvider not found");
            const transaction = await buildSuiTransaction({
              fromAddress: walletState.suiAddress!,
              toAddress: address,
              amount: String(amount),
              // coinType: "0x2::sui::SUI",
            });
            const input = {
              transaction,
              account: { address: walletState.suiAddress!, chain: "sui:mainnet" },
              chain: "sui:mainnet",
            };
            const sendRes = await suiProvider.signAndExecuteTransaction(input);
            console.log("sendRes", sendRes);
        }}
      >
        sign and submit transaction
      </button>
    </div>
  )
}

Pure JS

import { initTomoModal } from '@tomo-inc/tomo-web-sdk'

const CLIENT_ID = 'Your client id'

enum Theme {
  Light = 'light',
  Dark = 'dark'
}
initTomoModal({
  theme: Theme.Light,
  clientId: CLIENT_ID,
  chainTypes: ['sui']
})

export default function SuiDemo() {
  return (
    <div style={{ display: 'flex', gap: '10px' }}>
      <button
        onClick={() => {
          window.openTomoConnectModal?.()
        }}
      >
        openConnectModal
      </button>

      <button
        onClick={async () => {
            const suiProvider = window.tomo_sui
            if (!suiProvider) throw new Error("TronProvider not found");
            const transaction = await buildSuiTransaction({
              fromAddress: walletState.suiAddress!,
              toAddress: address,
              amount: String(amount),
              // coinType: "0x2::sui::SUI",
            });
            const input = {
              transaction,
              account: { address: walletState.suiAddress!, chain: "sui:mainnet" },
              chain: "sui:mainnet",
            };
            const signRes = await suiProvider.signTransaction(input);
            console.log("signRes", signRes);
        }}
      >
        sign transaction
      </button>

      <button
         onClick={async () => {
            const suiProvider = window.tomo_sui
            if (!suiProvider) throw new Error("TronProvider not found");
            const transaction = await buildSuiTransaction({
              fromAddress: walletState.suiAddress!,
              toAddress: address,
              amount: String(amount),
              // coinType: "0x2::sui::SUI",
            });
            const input = {
              transaction,
              account: { address: walletState.suiAddress!, chain: "sui:mainnet" },
              chain: "sui:mainnet",
            };
            const sendRes = await suiProvider.signAndExecuteTransaction(input);
            console.log("sendRes", sendRes);
        }}
      >
        sign and submit the transaction
      </button>
    </div>
  )
}