elm-web3-ui

HTML view primitives for elm-web3 — wallet connection, transaction status, address display, balance, typed inputs, and signing.

All components return plain Html msg. There are no internal messages, no subscriptions, and no state of their own. They render what you pass in and call back with whatever msg you provide.

Install

elm install quietgarden/elm-web3-ui

Requires quietgarden/elm-web3 2.0.0 or later.

Design

• No default styles. Every element has a semantic class attribute. Write your own CSS, or use one of the included stylesheets in styles/ as a starting point.
• Attribute passthrough. Every function takes List (Html.Attribute msg) as its first argument, merged onto the root element. Pass [] if you have nothing to add.
• No internal Msg. All callbacks are plain msg values from your application. The components do not own any update logic.
• Validation feedback. Input.address, Input.bigInt, and Input.bytes accept a valid : Bool field. Pass False to apply the --invalid modifier class after a failed parse.

Modules

Quick start

import Web3.Chain as Chain
import Web3.Ui.Wallet as WalletUi
import Web3.Ui.Transaction as TxUi
import Web3.Ui.Address as AddressUi

view : Model -> Html Msg
view model =
    div []
        [ WalletUi.viewState []
            { onConnect    = ConnectWallet
            , onSwitchChain = SwitchChain
            , onDisconnect = DisconnectWallet
            , knownChains  = [ Chain.pulsechain, Chain.ethereum ]
            }
            model.wallet
        , TxUi.statusBadge [] model.tx
        , TxUi.actionButton []
            { label = "Submit", pendingLabel = "Submitting…", onPress = Submit }
            model.tx
        ]

Web3.Ui.Wallet

connectButton :
    List (Html.Attribute msg)
    -> { onConnect : msg, onDisconnect : msg }
    -> Wallet.State
    -> Html msg

Shows "Connect" in disconnected/error/read-only states. Shows "Disconnect" when connected or on the wrong chain. Disabled with "Connecting…" while Connecting.

walletPicker :
    List (Html.Attribute msg)
    -> (String -> msg)         -- called with the RDNS of the chosen wallet
    -> List Wallet.WalletProvider
    -> Html msg

Renders a list of EIP-6963 discovered wallets as buttons with icon and name.

viewState :
    List (Html.Attribute msg)
    -> { onConnect : msg, onSwitchChain : msg, onDisconnect : msg
       , knownChains : List Chain }
    -> Wallet.State
    -> Html msg

Covers all six Wallet.State variants. Pass knownChains so the WrongChain branch can display the target network name.

chainBadge :
    List (Html.Attribute msg)
    -> List Chain
    -> Wallet.State
    -> Html msg

Labels: connected chain name · "Wrong Chain" · "Read-only" · "—" (connecting / disconnected / error).

Web3.Ui.Transaction

statusBadge :
    List (Html.Attribute msg)
    -> Tx.Status
    -> Html msg

Renders a <span> with web3-tx-badge plus one modifier class. Labels: "Idle" / "Awaiting Signature" / "Pending" / "Confirming (N)" / "Confirmed" / "Failed" / "Rejected".

actionButton :
    List (Html.Attribute msg)
    -> { label : String, pendingLabel : String, onPress : msg }
    -> Tx.Status
    -> Html msg

Active in Idle and terminal states. Disabled (with pendingLabel) while in-flight.

txHashLink :
    List (Html.Attribute msg)
    -> { explorerUrl : String }
    -> T.TxHash
    -> Html msg

statusHashLink :
    List (Html.Attribute msg)
    -> { explorerUrl : String }
    -> Tx.Status
    -> Maybe (Html msg)

receiptView :
    List (Html.Attribute msg)
    -> { explorerUrl : String }
    -> Tx.Receipt
    -> Html msg

statusHashLink returns Nothing when there is no hash in the current state. receiptView shows block number, gas used, and a tx hash link.

Web3.Ui.Address

view :
    List (Html.Attribute msg)
    -> { explorerUrl : Maybe String }
    -> T.Address
    -> Html msg

Renders "0x1234…abcd". Wraps in <a> when explorerUrl is Just url, otherwise a <span>.

short : T.Address -> String

Pure function — no Html. Returns "0x" ++ first4 ++ "…" ++ last4.

input :
    List (Html.Attribute msg)
    -> { value : String, onInput : String -> msg, valid : Bool }
    -> Html msg

Text input for address entry. Adds web3-input-address--invalid when valid is False.

Web3.Ui.Balance

view      : List (Html.Attribute msg) -> { decimals : Int, symbol : String } -> BigInt -> Html msg
viewEther : List (Html.Attribute msg) -> { symbol : String } -> BigInt -> Html msg

viewMaybe      : List (Html.Attribute msg) -> { decimals : Int, symbol : String, loading : String } -> Maybe BigInt -> Html msg
viewEtherMaybe : List (Html.Attribute msg) -> { symbol : String, loading : String } -> Maybe BigInt -> Html msg

viewMaybe / viewEtherMaybe render opts.loading with class web3-balance--loading while Nothing, and the formatted balance once it arrives.

Web3.Ui.Input

address : List (Html.Attribute msg) -> { value : String, onInput : String -> msg, valid : Bool } -> Html msg
bigInt  : List (Html.Attribute msg) -> { value : String, onInput : String -> msg, valid : Bool } -> Html msg
bytes   : List (Html.Attribute msg) -> { value : String, onInput : String -> msg, valid : Bool } -> Html msg
bool    : List (Html.Attribute msg) -> { value : Bool,   onToggle : Bool -> msg } -> Html msg
text    : List (Html.Attribute msg) -> { value : String, onInput : String -> msg } -> Html msg

No validation is performed inside the components. Call T.address, BigInt.fromString, etc. in your update and pass the result back as valid.

Web3.Ui.Input.address delegates to Web3.Ui.Address.input — they are the same component.

Web3.Ui.Sign

stateView :
    List (Html.Attribute msg)
    -> Sign.SignState
    -> Html msg

Labels: "Idle" / "Waiting for signature…" / "Signed" / "Failed: <err>" / "Rejected".

signButton :
    List (Html.Attribute msg)
    -> { label : String, onSign : msg }
    -> Sign.SignState
    -> Html msg

Disabled while SignPending, active otherwise.

signatureView :
    List (Html.Attribute msg)
    -> Sign.SignState
    -> Html msg

Renders the signature in a <code> element when in Signed state. Returns an empty text node for all other states — safe to always include.

CSS class reference

Included stylesheets

The styles/ directory contains a few optional CSS files if you want something to start from:

• vanilla.css — minimal, unstyled
• dark.css — dark theme
• shadcn.css — shadcn/ui-inspired
• brutalist.css — high contrast, no-frills
• tailwind.plugin.cjs — Tailwind plugin that maps the class names above to utility classes

None of these are loaded automatically. Copy or import whichever suits your project.

License

MIT © quietgarden