feat: add promises to transactions and calls

playground/nextjs-app-router/components/demo/Transaction.tsx

@@ -14,12 +14,24 @@ import {
 } from '@coinbase/onchainkit/transaction';
 import { useCallback, useContext, useEffect } from 'react';
 import { AppContext, TransactionTypes } from '../AppProvider';
+import { Call } from '@/onchainkit/esm/transaction/types';
+import { ContractFunctionParameters } from 'viem';
 
 function TransactionDemo() {
   const { chainId, transactionType } = useContext(AppContext);
   const capabilities = useCapabilities();
   const contracts = clickContracts;
   const calls = clickCalls;
+  const promiseCalls = new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(calls);
+    }, 4000);
+  }) as Promise<Call[]>;  
+  const promiseContracts = new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(contracts);
+    }, 4000);
+  }) as Promise<ContractFunctionParameters[]>;  
   useEffect(() => {
     console.log('Playground.Transaction.chainId:', chainId);
   }, [chainId]);
@@ -41,8 +53,8 @@ function TransactionDemo() {
       <Transaction
         chainId={chainId ?? 84532} // something breaks if we don't have default network?
         {...(transactionType === TransactionTypes.Calls
-          ? { calls }
-          : { contracts })}
+          ? { calls: promiseCalls }
+          : { contracts: promiseContracts })}
         capabilities={capabilities}
         onStatus={handleOnStatus}
       >

src/transaction/components/TransactionButton.tsx

@@ -31,7 +31,9 @@ export function TransactionButton({
   const { showCallsStatus } = useShowCallsStatus();
 
   const isInProgress =
-    lifecycleStatus.statusName === 'transactionPending' || isLoading;
+    lifecycleStatus.statusName === 'buildingTransaction' ||
+    lifecycleStatus.statusName === 'transactionPending' ||
+    isLoading;
   const isMissingProps = !transactions || !address;
   const isWaitingForReceipt = !!transactionId || !!transactionHash;
 

src/transaction/components/TransactionProvider.tsx

@@ -71,6 +71,9 @@ export function TransactionProvider({
     statusData: null,
   }); // Component lifecycle
   const [transactionId, setTransactionId] = useState('');
+  const [transactionCount, setTransactionCount] = useState<
+    number | undefined
+  >();
   const [transactionHashList, setTransactionHashList] = useState<Address[]>([]);
   const transactions = calls || contracts;
   const transactionType = calls
@@ -160,7 +163,6 @@ export function TransactionProvider({
     capabilities,
     sendCallAsync,
     sendCallsAsync,
-    transactions,
     transactionType,
     walletCapabilities,
     writeContractAsync,
@@ -233,8 +235,8 @@ export function TransactionProvider({
   useEffect(() => {
     if (
       !transactions ||
-      transactionHashList.length !== transactions.length ||
-      transactions.length < 2
+      transactionHashList.length !== transactionCount ||
+      transactionCount < 2
     ) {
       return;
     }
@@ -278,13 +280,35 @@ export function TransactionProvider({
     [account.chainId, switchChainAsync],
   );
 
+  const buildTransaction = useCallback(async () => {
+    setLifecycleStatus({
+      statusName: 'buildingTransaction',
+      statusData: null,
+    });
+    try {
+      const resolvedTransactions = await Promise.resolve(transactions);
+      setTransactionCount(resolvedTransactions?.length);
+      return resolvedTransactions;
+    } catch (err) {
+      setLifecycleStatus({
+        statusName: 'error',
+        statusData: {
+          code: 'TmTPc04', // Transaction module TransactionProvider component 04 error
+          error: JSON.stringify(err),
+          message: 'Error building transactions',
+        },
+      });
+    }
+  }, []);
+
   const handleSubmit = useCallback(async () => {
     setErrorMessage('');
     setIsToastVisible(true);
     try {
       // Switch chain before attempting transactions
       await switchChain(chainId);
-      await sendWalletTransactions();
+      const resolvedTransactions = await buildTransaction();
+      await sendWalletTransactions(resolvedTransactions);
     } catch (err) {
       const errorMessage = isUserRejectedRequestError(err)
         ? 'Request denied.'

src/transaction/hooks/useGetTransactionStatusLabel.tsx

@@ -17,10 +17,18 @@ export function useGetTransactionStatusLabel() {
   // user started txn and needs to confirm in wallet
   const isPending = lifecycleStatus.statusName === 'transactionPending';
 
+  // waiting for calls or contracts promise to resolve
+  const isBuildingTransaction =
+    lifecycleStatus.statusName === 'buildingTransaction';
+
   return useMemo(() => {
     let label = '';
     let labelClassName: string = color.foregroundMuted;
 
+    if (isBuildingTransaction) {
+      label = 'Building transaction...';
+    }
+
     if (isPending) {
       label = 'Confirm in wallet.';
     }
@@ -39,5 +47,5 @@ export function useGetTransactionStatusLabel() {
     }
 
     return { label, labelClassName };
-  }, [errorMessage, isInProgress, isPending, receipt]);
+  }, [errorMessage, isBuildingTransaction, isInProgress, isPending, receipt]);
 }

src/transaction/hooks/useGetTransactionToastLabel.tsx

@@ -3,16 +3,30 @@ import { color } from '../../styles/theme';
 import { useTransactionContext } from '../components/TransactionProvider';
 
 export function useGetTransactionToastLabel() {
-  const { errorMessage, isLoading, receipt, transactionHash, transactionId } =
-    useTransactionContext();
+  const {
+    errorMessage,
+    isLoading,
+    lifecycleStatus,
+    receipt,
+    transactionHash,
+    transactionId,
+  } = useTransactionContext();
 
   // user confirmed in wallet, txn in progress
   const isInProgress = isLoading || !!transactionId || !!transactionHash;
 
+  // waiting for calls or contracts promise to resolve
+  const isBuildingTransaction =
+    lifecycleStatus.statusName === 'buildingTransaction';
+
   return useMemo(() => {
     let label = '';
     let labelClassName: string = color.foregroundMuted;
 
+    if (isBuildingTransaction) {
+      label = 'Building transaction';
+    }
+
     if (isInProgress) {
       label = 'Transaction in progress';
     }

src/transaction/hooks/useSendWalletTransactions.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
+import type { ContractFunctionParameters } from 'viem';
 import { Capabilities } from '../../constants';
-import type { UseSendWalletTransactionsParams } from '../types';
+import type { Call, UseSendWalletTransactionsParams } from '../types';
 import { sendBatchedTransactions } from '../utils/sendBatchedTransactions';
 import { sendSingleTransactions } from '../utils/sendSingleTransactions';
 
@@ -9,42 +10,52 @@ export const useSendWalletTransactions = ({
   capabilities,
   sendCallAsync,
   sendCallsAsync,
-  transactions,
   transactionType,
   walletCapabilities,
   writeContractAsync,
   writeContractsAsync,
 }: UseSendWalletTransactionsParams) => {
-  return useCallback(async () => {
-    if (!transactions) {
-      return;
-    }
-    if (walletCapabilities[Capabilities.AtomicBatch]?.supported) {
-      // Batched transactions
-      await sendBatchedTransactions({
-        capabilities,
-        sendCallsAsync,
-        transactions,
-        transactionType,
-        writeContractsAsync,
-      });
-    } else {
-      // Non-batched transactions
-      await sendSingleTransactions({
-        sendCallAsync,
-        transactions,
-        transactionType,
-        writeContractAsync,
-      });
-    }
-  }, [
-    writeContractsAsync,
-    writeContractAsync,
-    sendCallsAsync,
-    sendCallAsync,
-    capabilities,
-    transactions,
-    transactionType,
-    walletCapabilities,
-  ]);
+  return useCallback(
+    async (
+      transactions?:
+        | Call[]
+        | ContractFunctionParameters[]
+        | Promise<Call[]>
+        | Promise<ContractFunctionParameters[]>,
+    ) => {
+      if (!transactions) {
+        return;
+      }
+
+      const resolvedTransactions = await Promise.resolve(transactions);
+
+      if (walletCapabilities[Capabilities.AtomicBatch]?.supported) {
+        // Batched transactions
+        await sendBatchedTransactions({
+          capabilities,
+          sendCallsAsync,
+          transactions: resolvedTransactions,
+          transactionType,
+          writeContractsAsync,
+        });
+      } else {
+        // Non-batched transactions
+        await sendSingleTransactions({
+          sendCallAsync,
+          transactions: resolvedTransactions,
+          transactionType,
+          writeContractAsync,
+        });
+      }
+    },
+    [
+      writeContractsAsync,
+      writeContractAsync,
+      sendCallsAsync,
+      sendCallAsync,
+      capabilities,
+      transactionType,
+      walletCapabilities,
+    ],
+  );
 };

src/transaction/types.ts

@@ -39,6 +39,10 @@ export type LifecycleStatus =
       statusName: 'transactionIdle'; // initial status prior to the mutation function executing
       statusData: null;
     }
+  | {
+      statusName: 'buildingTransaction';
+      statusData: null;
+    }
   | {
       statusName: 'transactionPending'; // if the mutation is currently executing
       statusData: null;
@@ -87,7 +91,11 @@ export type TransactionContextType = {
   setIsToastVisible: (isVisible: boolean) => void; // A function to set the visibility of the transaction toast.
   setLifecycleStatus: (state: LifecycleStatus) => void; // A function to set the lifecycle status of the component
   setTransactionId: (id: string) => void; // A function to set the transaction ID.
-  transactions?: Call[] | ContractFunctionParameters[]; // An array of transactions for the component.
+  transactions?:
+    | Call[]
+    | ContractFunctionParameters[]
+    | Promise<Call[]>
+    | Promise<ContractFunctionParameters[]>; // An array of transactions for the component.
   transactionId?: string; // An optional string representing the ID of the transaction.
   transactionHash?: string; // An optional string representing the hash of the transaction.
 };
@@ -131,11 +139,13 @@ export type TransactionError = {
 };
 
 export type TransactionProviderReact = {
-  calls?: Call[]; // An array of calls for the transaction. Mutually exclusive with the `contracts` prop.
+  calls?: Call[] | Promise<Call[]>; // An array of calls for the transaction. Mutually exclusive with the `contracts` prop.
   capabilities?: WalletCapabilities; // Capabilities that a wallet supports (e.g. paymasters, session keys, etc).
   chainId: number; // The chainId for the transaction.
   children: ReactNode; // The child components to be rendered within the provider component.
-  contracts?: ContractFunctionParameters[]; // An array of contract function parameters provided to the child components. Mutually exclusive with the `calls` prop.
+  contracts?:
+    | ContractFunctionParameters[]
+    | Promise<ContractFunctionParameters[]>; // An array of contract function parameters provided to the child components. Mutually exclusive with the `calls` prop.
   onError?: (e: TransactionError) => void; // An optional callback function that handles errors within the provider.
   onStatus?: (lifecycleStatus: LifecycleStatus) => void; // An optional callback function that exposes the component lifecycle state
   onSuccess?: (response: TransactionResponse) => void; // An optional callback function that exposes the transaction receipts
@@ -145,12 +155,14 @@ export type TransactionProviderReact = {
  * Note: exported as public Type
  */
 export type TransactionReact = {
-  calls?: Call[]; // An array of calls to be made in the transaction. Mutually exclusive with the `contracts` prop.
+  calls?: Call[] | Promise<Call[]>; // An array of calls to be made in the transaction. Mutually exclusive with the `contracts` prop.
   capabilities?: WalletCapabilities; // Capabilities that a wallet supports (e.g. paymasters, session keys, etc).
   chainId?: number; // The chainId for the transaction.
   children: ReactNode; // The child components to be rendered within the transaction component.
   className?: string; // An optional CSS class name for styling the component.
-  contracts?: ContractFunctionParameters[]; // An array of contract function parameters for the transaction. Mutually exclusive with the `calls` prop.
+  contracts?:
+    | ContractFunctionParameters[]
+    | Promise<ContractFunctionParameters[]>; // An array of contract function parameters for the transaction. Mutually exclusive with the `calls` prop.
   onError?: (e: TransactionError) => void; // An optional callback function that handles transaction errors.
   onStatus?: (lifecycleStatus: LifecycleStatus) => void; // An optional callback function that exposes the component lifecycle state
   onSuccess?: (response: TransactionResponse) => void; // An optional callback function that exposes the transaction receipts
@@ -253,7 +265,6 @@ export type UseSendWalletTransactionsParams = {
   // biome-ignore lint: cannot find module 'wagmi/experimental/query'
   sendCallsAsync: any;
   sendCallAsync: SendTransactionMutateAsync<Config, unknown> | (() => void);
-  transactions?: Call[] | ContractFunctionParameters[];
   transactionType: string;
   walletCapabilities: ViemWalletCapabilities;
   // biome-ignore lint: cannot find module 'wagmi/experimental/query'

src/transaction/utils/isSpinnerDisplayed.ts

@@ -8,7 +8,9 @@ export function isSpinnerDisplayed({
   transactionHash,
   transactionId,
 }: IsSpinnerDisplayedProps) {
-  const isPending = lifecycleStatus.statusName === 'transactionPending';
+  const isPending =
+    lifecycleStatus.statusName === 'transactionPending' ||
+    lifecycleStatus.statusName === 'buildingTransaction';
   const isInProgress = transactionId || transactionHash;
 
   if (hasReceipt || errorMessage) {