UnconfirmedTransaction()

function UnconfirmedTransaction(props): Element;

Beta

Explains a send whose outcome is unknown and gets the user to check their wallet or the block explorer before they retry.

Render it for a wallet-indeterminate WorkflowSettlement in place of the form that started the run: a transaction may already be on chain, so a live submit button beside a one-line error invites the user to repeat it. The screen never retries by itself. onRetry fires only after the user says the first transaction did not go through, and when retryEffect names a consequence they confirm that a second time against a button that arms after a short delay, so a double-click cannot confirm by accident.

The LOC flow components render this themselves. Use it directly when you host WorkflowExecutor or useWorkflowLifecycle in your own chrome.

Parameters

Parameter	Type	Description
props	UnconfirmedTransactionProps	What the screen says and what its two actions do. See UnconfirmedTransactionProps.

Returns

Element

Remarks

Part of the SDK’s experimental React component surface — may change or be removed without notice and is not part of the compatibility contract.

Example

import {
  getUnconfirmedSend,
  TransactionsView,
  UnconfirmedTransaction,
  useAnvilSDK,
  useWorkflowLifecycle,
} from '@anvil/sdk';
import type { Address, WalletOperationWorkflow } from '@anvil/sdk/core';

export function SigningStep({
  workflow,
  sender,
  onBackToForm,
  onLeave,
}: {
  workflow: WalletOperationWorkflow;
  // Read when the run starts. The user can switch accounts while the
  // screen is up, and the link has to keep pointing at the sender.
  sender: Address;
  onBackToForm: () => void;
  onLeave: () => void;
}) {
  const sdk = useAnvilSDK();
  const { operations, settlement } = useWorkflowLifecycle(workflow);

  // The send failed in transit: it may be on chain. Replace the signing
  // view rather than returning to a form with a live submit button.
  const unconfirmedSend = getUnconfirmedSend(settlement);
  if (unconfirmedSend) {
    // Undefined when viem knows no explorer for the chain: no link then.
    const explorer = sdk.deps.publicClient.chain?.blockExplorers?.default;
    return (
      <UnconfirmedTransaction
        {...unconfirmedSend}
        explorer={explorer && { name: explorer.name, url: explorer.url }}
        address={sender}
        // Fires only once the user says the first send did not land.
        onRetry={onBackToForm}
        // For a user who found that it did land. Say where this goes.
        onClose={onLeave}
        closeLabel="Back to your LOCs"
      />
    );
  }

  return <TransactionsView operations={operations} />;
}