The swap/deposit workhorse: token identity, decimals-aware amount input, live balance line, and percent presets -- one compound, one Config.

TokenAmountPair.view []
    { symbol = "FOO"
    , logoUrl = Just "https://tokens.example/foo.png"
    , balance = Just "420.69 FOO"
    , value = model.amountStr
    , onInput = AmountChanged
    , onPercent = FillPercent      -- 25/50/75/100; app computes from balance
    , onOpenSelector = Just OpenTokenPicker
    , valid = model.amountValid
    }

The percent chips emit intent (onPercent 100 = MAX); the app computes the actual amount from its live balance so the chips can never show a stale number. onOpenSelector = Nothing renders the token as a static label (fixed-token forms).

CSS classes: web3-tokenamount, web3-tokenamount__token, web3-tokenamount__symbol, web3-tokenamount__input, web3-tokenamount__input--invalid, web3-tokenamount__balance, web3-tokenamount__presets, web3-tokenamount__chip, web3-tokenamount__chip--max.