Send A Sui Transaction

Recommended: JavaScript SDK with React Hooks

For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.

React

  import { FC, FormEventHandler, useState } from 'react';
  import { Transaction } from '@mysten/sui/transactions';
  import { MIST_PER_SUI } from '@mysten/sui/utils';
  import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
  import { isSuiWallet } from '@dynamic-labs/sui';

export const SendTransactionSection: FC = () => {
const { primaryWallet } = useDynamicContext();

    const [txSignature, setTxSignature] = useState('');

    if (!primaryWallet || !isSuiWallet(primaryWallet)) return null;

    const onSubmit: FormEventHandler<HTMLFormElement> = async (event) => {
      event.preventDefault();

      const formData = new FormData(event.currentTarget);

      const address = formData.get('address') as string;
      const amount = Number(formData.get('amount')) * MIST_PER_SUI;

      const walletClient = await primaryWallet.getSuiClient();

      const tx = new Transaction();
      tx.setSender(primaryWallet.address);
      tx.setGasPrice(1_000);
      tx.setGasBudget(10_000_000);

      // Split the gas coin to create a new coin with the specified amount
      const [coin] = tx.splitCoins(tx.gas, [amount]);

      // Transfer the new coin to the recipient
      tx.transferObjects([coin], address);

      const signedTransaction = await primaryWallet.signTransaction(tx);

      const executionResult = await walletClient?.executeTransactionBlock({
        options: {},
        signature: signedTransaction.signature,
        transactionBlock: signedTransaction.bytes,
      });

      console.log(executionResult);

      setTxSignature(executionResult?.digest || 'No transaction digest found');
    };

    return (
      <form onSubmit={onSubmit}>
        <p>Send to SUI address</p>
        <input name="address" type="text" required placeholder="Address" />
        <input name="amount" type="text" required placeholder="0.01" />
        <button type="submit">Send</button>
        <p data-testid="transaction-section-result">{txSignature}</p>
      </form>
    );

};