Progress bar for any "how full is X" metric -- token supply against a cap, graduation reserves toward a threshold, vault deposits toward an issuance limit.

-- Bare usage:
Web3.Ui.SupplyBar.view
    { current = curve.supply
    , max = maxSupply
    , decimals = 18
    , label = Just "supply"
    }


-- With a milestone marker (e.g., the bonding-curve graduation threshold
-- sitting partway along a max-reserve bar):
Web3.Ui.SupplyBar.withMilestone
    { current = curve.curvePls
    , max = totalCapacity
    , decimals = 18
    , milestone = Just { at = graduationThreshold, label = "graduation" }
    , label = Just "reserves"
    }

decimals scales the amounts printed in the label. It used to be hardcoded to 18, which rendered a 6-decimal token's supply 1e12 times too small.

The bar is rendered as a styled div with CSS classes web3-supplybar, web3-supplybar__fill, web3-supplybar__milestone, web3-supplybar__label. Width is controlled by width: <pct>% inline; everything else is style-via-CSS.

The fill percentage is computed by dividing in BigInt space and is emitted with two decimal places, so a bar at 1 part in 10000 of a 2^255 cap is still positioned correctly. No amount is routed through Float.