Sign & Submit

Overview

This React component implements a transaction signing and submission functionality for the Aptos blockchain. It provides a simple button interface that allows users to sign and submit transactions using their connected Aptos wallet.

Dependencies

import React from 'react';
import { useWallet } from '@aptos-labs/wallet-adapter-react';
import { Aptos, AptosConfig, Network } from '@aptos-labs/ts-sdk';

@aptos-labs/wallet-adapter-react: Provides wallet connection functionality
@aptos-labs/ts-sdk: Aptos blockchain SDK for interaction with the network

Configuration

const config = new AptosConfig({
  network: Network.TESTNET,
  fullnode: 'https://testnet.bardock.movementnetwork.xyz/v1',
  faucet: 'https://faucet.testnet.bardock.movementnetwork.xyz/'
})
const aptos = new Aptos(config);

Creates a new Aptos configuration instance
Connects to the Aptos mainnet network
Initializes the Aptos client with the configuration

Component Breakdown

1️⃣ Hook Usage

const { account, signAndSubmitTransaction } = useWallet();

Uses the useWallet hook to get:
- account: Current connected wallet account
- signAndSubmitTransaction: Function to sign and submit transactions

2️⃣ Transaction Handler

const onSignAndSubmitTransaction = async () => {

This function handles:

Account verification
Transaction creation and submission
Transaction confirmation

Transaction Structure

{
  sender: account.address,
  data: {
    function: "<address_account>::<module_name>::<function>",
    functionArguments: [account.address, 1],
  }
}

sender: The address of the transaction sender
function: Calls the Aptos account transfer function
functionArguments: Array containing:
- Recipient address (in this case, sending to self)
- Amount to transfer (1 unit)

3️⃣ Transaction Confirmation

await aptos.waitForTransaction({ transactionHash: response.hash });

Waits for transaction confirmation on the blockchain
Includes error handling for failed transactions

4️⃣ UI Component

return (
  <button onClick={onSignAndSubmitTransaction}>
    Sign and submit transaction
  </button>
);

Renders a simple button
Triggers the transaction process when clicked

Usage Example

import SignAndSubmit from './components/signAndSubmitTx';

function App() {
  return (
    <div>
      <SignAndSubmit />
    </div>
  );
}

Important Notes

This component requires a connected Aptos wallet to function
It's configured to work with Mainnet (production network)
The current implementation sends 1 unit to the same address (self-transfer)
Error handling is implemented for transaction confirmation
The component should be used within a wallet provider context

Fullcode

src/components/signAndSubmitTx.tsx

import React from 'react';
import { useWallet } from '@aptos-labs/wallet-adapter-react';
import { Aptos, AptosConfig, Network } from '@aptos-labs/ts-sdk';

const config = new AptosConfig({ network: Network.MAINNET });
const aptos = new Aptos(config);

const SignAndSubmit = () => {
  const { account, signAndSubmitTransaction } = useWallet();

  const onSignAndSubmitTransaction = async () => {
    if(account == null) {
        throw new Error("Unable to find account to sign transaction")
    }
    const response = await signAndSubmitTransaction({
      sender: account.address,
      data: {
        function: "0x1::aptos_account::transfer",
        functionArguments: [account.address, 1],
      },
    });
    // if you want to wait for transaction
    try {
      await aptos.waitForTransaction({ transactionHash: response.hash });
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <button onClick={onSignAndSubmitTransaction}>
      Sign and submit transaction
    </button>
  );
};

export default SignAndSubmit;

Sign & Submit

On this page