Transactions

Transaction Management The entire transaction lifecycle that involves creating, approving, and closing transaction models, as well as retrieving transaction history is handled within the useTransaction Hook. It manages transactions from initiation to approval within the application.

First, import the Transaction module onto your page.

import { useTransaction } from "@intuweb3/exp-web-kit";

Create a new Transaction

This function is called to trigger the transaction model to initiate a new transaction by setting transaction details. The function is essential to initiate the transaction process, which then enables users to review the transaction and approve or deny the transaction.

Arguments:

details (TransactionDetails): An object containing the following properties:
toAddress (String): The recipient's wallet address.
amount: (number): The amount of ETH to be sent.
data?: (string): Optional data to be included in the transaction.

Returns: A Promise <TransactionDetails> that resolves to the transaction details if successfully created.

Steps:
Validate the transaction details
Set the transaction details in the state
Display the modal for users to review

const { createTransaction } = useTransaction();

const handleCreateTransaction = async () => {
  try {
      const proposedTransaction = await createTransaction({
        toAddress: "0x0D44DE3938XXXXXXXXXXXXXXXXXX",
        amount: 0.01,
      });
    } catch (err) {
      console.log(err);
    }
};

INTU Transaction Modal

Once you have defined all the functions to handle transactions in your application, now in order to manage the states of your UI, you will need to import the IntuTransactionModal component from the INTU Web Kit. This modal has to be placed at the topmost level of your component tree. An example of how you can add the IntuTransactionModal to your UI component:

import {
  useAccount,
  useTransaction,
  IntuTransactionModal,
} from "intu-auth-sdk";

return (
    <>
      <IntuTransactionModal />

      <div>
          {/* Rest of your UI Components */}
      </div>
   </>
  );
};

Get transaction history

getTransactionHistory retrieves the transaction history for the current user from the blockchain. This function is useful for displaying past transactions. Returns: A Promise <Transaction[]> that resolves to an array of transaction objects representing the user's transaction history. Example Usage:

const handleRefresh = async () => {
    setIsLoading(true);
    try {
      const transactions = await getTransactionHistory();
      setTransactionHistory(transactions);
    } catch (error) {
      console.error("Failed to fetch transactions:", error);
    } finally {
      setIsLoading(false);
    }
};