Web3.Ui.SlippageInput

Slippage tolerance picker for trade UIs. Renders a row of preset chips (0.1% / 0.5% / 1%) plus a custom input. Returns the chosen value as basis points so the caller can compute minTokensOut / minPlsOut.

Web3.Ui.SlippageInput.view []
    { valueBps = model.slippageBps
    , onChange = SlippageChanged
    , presetsBps = [ 10, 50, 100 ]   -- 0.1%, 0.5%, 1%
    }


-- Helper: derive the minOut value given an expected amount and slippage.
let
    minOut =
        Web3.Ui.SlippageInput.minOutFromBps model.slippageBps expectedAmount
in
contractCall { ..., minOut = minOut }

Style classes: web3-slippage, web3-slippage__chip, web3-slippage__chip--active, web3-slippage__custom.

view : List (Attribute msg) -> Config msg -> Html msg

Render the picker.

The root is the chip-plus-input group (role="group"), because the component is a set of controls rather than a single one -- there is no one control an id would belong on.

type alias Config msg =

{ valueBps : Int

, onChange : Int -> msg

, presetsBps : List Int

}

minOutFromBps : Int -> BigInt -> BigInt

Compute expected * (10000 - slippageBps) / 10000 in BigInt arithmetic. Returns BigInt.zero if the slippage exceeds 100%.

intrepidshape/elm-web3-ui/4.0.0

Web3.Ui.SlippageInput

Modules