Web3.Ui.VeLock

Lock-duration picker for vote-escrow tokens (Curve veCRV, GMX esGMX, veToken, …). Renders an amount input, a lock-period slider snapped to a configurable step (typically 1 week, the Curve standard), and a live projection of the resulting ve-balance.

Linear-decay vote-escrow standard:

veBalance = amount * lockSec / maxLockSec

So a maximum-length lock yields ve-balance equal to the principal; a quarter of max-length yields a quarter of the principal.

Web3.Ui.VeLock.view
    { amount = model.lockAmount
    , amountInput = model.lockAmountInput
    , decimals = 18
    , symbol = "TKN"
    , veSymbol = "veToken"
    , lockSec = model.lockSec
    , minLockSec = oneWeek
    , maxLockSec = fourYears
    , stepSec = oneWeek
    , onAmountInput = LockAmountInput
    , onLockChange = LockSecChanged
    }

CSS classes: web3-velock, web3-velock__amount, web3-velock__slider, web3-velock__readout, web3-velock__preview, web3-velock__preview-label, web3-velock__preview-value. Caller provides colors via stylesheet.

view : Config msg -> Html msg

Render the picker.

type alias Config msg =

{ amount : BigInt

, amountInput : String

, decimals : Int

, symbol : String

, veSymbol : String

, lockSec : Int

, minLockSec : Int

, maxLockSec : Int

, stepSec : Int

, onAmountInput : String -> msg

, onLockChange : Int -> msg

}

All configuration. amount is the principal as BigInt (used for the ve-balance projection). amountInput is the live string in the input box (separate so the consumer owns parse/validation state). lockSec is the chosen lock duration in seconds. stepSec is the slider granularity — pass 604800 (1 week) to match Curve's snap-to-week semantics.

veBalance :

{ amount : BigInt

, lockSec : Int

, maxLockSec : Int

}

-> BigInt

Pure helper: project ve-balance from principal + chosen lock + max lock. Mirrors the on-chain formula amount * lockSec / maxLockSec. Returns BigInt.fromInt 0 if maxLockSec is non-positive.

intrepidshape/elm-web3-ui/2.0.0

Web3.Ui.VeLock

Modules