Web3.Ui.Amount

Token amount input and display with SI suffix formatting.

-- Amount input with inline symbol label:
Web3.Ui.Amount.amountInput []
    { value = model.amountStr
    , onInput = AmountChanged
    , decimals = 18
    , symbol = "PLS"
    , valid = True
    }


-- Format a Wei value as human-readable (caller appends symbol):
Web3.Ui.Amount.formatWei 18 weiAmount ++ " PLS"
--> "1.23M PLS"

amountInput :

List (Attribute msg)

-> { value : String

, onInput : String -> msg

, decimals : Int

, symbol : String

, valid : Bool

}

-> Html msg

Numeric text input for a token amount. value is a plain decimal string (e.g. "1000.5"). No parsing is done here — call Web3.Units.parseUnits in your update to convert to Wei.

Adds web3-amount-input--invalid when valid is False.

CSS classes: web3-amount-wrapper (outer div), web3-amount-input (input), web3-amount-symbol (symbol label)

formatWei : Int -> BigInt -> String

Format a Wei BigInt as a human-readable string with SI suffix.

The symbol is not appended — concatenate it yourself so the caller controls spacing and placement.

formatWei 18 onePls   --> "1"
formatWei 18 largePls --> "1.23M"
formatWei 6  oneUsdc  --> "1"

SI suffixes: K (10³), M (10⁶), B (10⁹), T (10¹²). Values below 1000 are shown with up to 2 decimal places, trailing zeros trimmed.

presetRow : List (Attribute msg) -> { onPick : Int -> msg } -> Html msg

A row of balance-percentage chips — 25% / 50% / 75% / MAX — the companion every amountInput deserves. Emits the chosen percentage (100 = MAX); the app computes the actual amount from the live balance, so the chips never display a stale number.

Web3.Ui.Amount.presetRow [] { onPick = FillPercent }


-- FillPercent 100 -> set input to formatUnits decimals balance

CSS classes: web3-amount-presets, web3-amount-presets__chip, web3-amount-presets__chip--max.

intrepidshape/elm-web3-ui/2.1.0

Web3.Ui.Amount

Modules