Web3.Ui.PendingOverlay

Overlay shown while waiting for wallet signature.

Every dapp needs a "check your wallet" prompt when a transaction is AwaitingSignature. This module provides a consistent overlay so each project does not hand-roll the same spinner and copy.

-- Always rendered (you control visibility via CSS or parent logic):
Web3.Ui.PendingOverlay.view []
    { message = "Check your wallet" }


-- Only renders during AwaitingSignature, empty otherwise:
Web3.Ui.PendingOverlay.conditionalView []
    { message = "Check your wallet" }
    model.tx


-- Multi-step approve → call sequence:
Web3.Ui.PendingOverlay.viewMultiStep []
    { steps =
        [ { label = "Approve $TOKEN", state = StepDone }
        , { label = "Stake $TOKEN", state = StepActive }
        , { label = "Confirm on-chain", state = StepPending }
        ]
    , currentStatus = model.txStatus
    }

Single-step

view : List (Attribute msg) -> { message : String } -> Html msg

Render the overlay unconditionally.

CSS classes: web3-pending-overlay (root), web3-pending-overlay-inner, web3-pending-spinner, web3-pending-message

conditionalView : List (Attribute msg) -> { message : String } -> Status -> Html msg

Render the overlay only when status is Tx.AwaitingSignature.

Returns Html.text "" for all other states — safe to always include in your view tree.

Multi-step

viewMultiStep :

List (Attribute msg)

-> { steps : List Step

, currentStatus : Status

}

-> Html msg

Render a vertical stack of steps with the active one spinning. Renders an empty node if every step is StepPending AND the overall currentStatus is Tx.Idle (nothing is happening yet — caller can keep the overlay inert without a per-page conditional).

CSS classes: web3-pending-overlay, web3-pending-overlay-multi, web3-pending-step, web3-pending-step--pending / --active / --done / --failed, web3-pending-step-glyph, web3-pending-step-label, web3-pending-step-reason.

type alias Step =

{ label : String

, state : StepState

}

One row in a multi-step pending overlay.

label — human title for the step (e.g. "Approve $TOKEN").
state — StepPending (not started), StepActive (in flight), StepDone (confirmed), StepFailed reason (last revert reason).

type StepState

= StepPending

| StepActive

| StepDone

| StepFailed String

Lifecycle of a single step in a multi-step sequence.

StepFailed carries the revert / wallet reason so the user sees a specific message — useful for the post-approve, mid-call failure mode (approve confirms, then the call reverts and the approve toast already faded). The multi-step overlay keeps the full sequence visible until the user dismisses it or starts a new tx.

intrepidshape/elm-web3-ui/2.3.0

Web3.Ui.PendingOverlay

Single-step

Multi-step

Modules