Transaction Provider

The Transaction Provider component supplies the necessary context for managing on-chain transactions within the application. It provides state management and utility functions for handling transaction modals, batching, and more.

Add to your project

import { TransactionProvider } from 'identity-kit/src/context/transactionContext'
 
export default function App() {
  return <TransactionProvider>{/* Your application components */}</TransactionProvider>
}

Parameters

Usage

The TransactionProvider component is used to wrap parts of your application that require access to transaction-related state and functions. It manages the state of transaction modals, pending transactions, and provides utility functions for transaction operations.

Features

• Transaction Modal Management: Controls the visibility and state of transaction modals.
• Batch Transactions: Supports batching of multiple transactions for a streamlined user experience.
• Paymaster Service: Supports paymaster services for sponsored transactions. (https://docs.cdp.coinbase.com/paymaster/docs/welcome)
• Default Chain ID: The default chain ID to use if the user does not have an EFP list yet (Has to mint the new list).
• Transaction State Management: Provides state and functions for managing pending transactions, current transaction index, and more.

Batching Transactions

If you set batchTransactions to true, the TransactionProvider will manage a batch of transactions. This will allow you to either execute transactions one by one or batch them together and have a cart-like experience.

<TransactionProvider batchTransactions={true}>
  <YourComponent />
</TransactionProvider>

You will have to provide a button in your application that will open the transaction modal.

import { useTransactions } from 'ethereum-identity-kit'
 
/* ... your code ... */
const { setTxModalOpen } = useTransactions()
 
<button onClick={() => setTxModalOpen(true)}>Open Transaction Modal</button>
/* ... your code ... */

Context Values

The TransactionProvider supplies the following context values:

• txModalOpen: Boolean indicating if the transaction modal is open.
• batchTransactions: Boolean indicating if transactions are batched.
• pendingTxs: Array of pending transactions.
• currentTxIndex: Index of the current transaction being processed.
• selectedChainId: ID of the selected blockchain network.
• addTransactions: Function to add new transactions.
• resetTransactions: Function to reset all transactions.
• goToNextTransaction: Function to proceed to the next transaction.
• lists: The EFP lists of the connected user.
• listsLoading: Boolean indicating if the EFP lists of the connected user are loading.

Notes

• Ensure that the TransactionProvider wraps components that need access to transaction context.
• The batchTransactions parameter determines if transactions should be batched.
• Use the useTransactions hook to access the context values and functions within your components.