Transaction components & utilities Types

Glossary of Types in Transaction components & utilities.

Call

type Call = { to: Hex; data?: Hex; value?: bigint };

Calls

type Calls = Call[] | Promise<Call[]> | (() => Promise<Call[]>);

Contracts

type Contracts =
  | ContractFunctionParameters[]
  | Promise<ContractFunctionParameters[]>
  | (() => Promise<ContractFunctionParameters[]>);

LifecycleStatus

type LifecycleStatus =
  | {
      statusName: 'init';
      statusData: null;
    }
  | {
      statusName: 'error';
      statusData: TransactionError;
    }
  | {
      statusName: 'transactionIdle'; // initial status prior to the mutation function executing
      statusData: null;
    }
  | {
      statusName: 'buildingTransaction'; // resolving calls or contracts promise
      statusData: null;
    }
  | {
      statusName: 'transactionPending'; // if the mutation is currently executing
      statusData: null;
    }
  | {
      statusName: 'transactionLegacyExecuted';
      statusData: {
        transactionHashList: Address[];
      };
    }
  | {
      statusName: 'success'; // if the last mutation attempt was successful
      statusData: {
        transactionReceipts: TransactionReceipt[];
      };
    };

TransactionButtonReact

type TransactionButtonReact = {
  className?: string; // An optional CSS class name for styling the button component.
  disabled?: boolean; // A optional prop to disable the submit button
  text?: string; // An optional text to be displayed in the button component.
};

TransactionError

type TransactionError = {
  code: string; // The error code representing the type of transaction error.
  error: string; // The error message providing details about the transaction error.
  message: string; // The error message providing details about the transaction error.
};

TransactionReact

type TransactionReact = {
  calls?: Calls | Contracts | (Call | ContractFunctionParameters)[]; // An array of calls to be made in the transaction.
  isSponsored?: boolean; // Whether or not the transaction is sponsored.
  /** @deprecated Use `isSponsored` instead. */
  capabilities?: WalletCapabilities; // Capabilities that a wallet supports (e.g. paymasters, session keys, etc).
  chainId?: number; // The chainId for the transaction.
  className?: string; // An optional CSS class name for styling the component.
  contracts?: Calls | Contracts | (Call | ContractFunctionParameters)[]; // An array of calls to be made in the transaction.
  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
} & (
  | {
      children: ReactNode;
      /** An optional prop to disable submit button. Only available when children are not provided. */
      disabled?: never;
    }
  | {
      children?: never;
      /** An optional prop to disable submit button. Only available when children are not provided. */
      disabled?: boolean;
    }
);

TransactionDefaultReact

export type TransactionDefaultReact = {
  disabled?: boolean;
} & Omit<TransactionReact, 'children'>;

TransactionResponse

type TransactionResponse = {
  transactionReceipts: TransactionReceipt[]; // An array containing the transaction receipts
};

TransactionSponsorReact

type TransactionSponsorReact = {
  className?: string; // An optional CSS class name for styling the sponsor component.
};

TransactionStatusReact

type TransactionStatusReact = {
  children?: ReactNode; // The child components to be rendered within the status component.
  className?: string; // An optional CSS class name for styling the status component.
};

TransactionStatusActionReact

type TransactionStatusActionReact = {
  className?: string; // An optional CSS class name for styling.
};

TransactionStatusLabelReact

type TransactionStatusLabelReact = {
  className?: string; // An optional CSS class name for styling.
};

TransactionToastReact

type TransactionToastReact = {
  children?: ReactNode; // The child components to be rendered within the toast component.
  className?: string; // An optional CSS class name for styling the toast component.
  durationMs?: number; // An optional value to customize time until toast disappears
  position?: 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right'; // An optional position property to specify the toast's position on the screen.
};

TransactionToastActionReact

type TransactionToastActionReact = {
  className?: string; // An optional CSS class name for styling.
};

TransactionToastIconReact

type TransactionToastIconReact = {
  className?: string; // An optional CSS class name for styling.
};

TransactionToastLabelReact

type TransactionToastLabelReact = {
  className?: string; // An optional CSS class name for styling.
};

WalletCapabilities

type WalletCapabilities = {
  paymasterService?: PaymasterService;
};