intrepidshape/elm-web3-ui/2.4.0

NOTE: the latest version is 4.0.0

Web3.Ui.ContractWrite

Render a Solidity write function (non-payable or payable) as a typed form: function name header, one AbiInput per argument, an optional msg.value input for payable functions, a "Send" button wired through the Tx.Status state machine, and a status badge plus tx-hash link below.

Like every primitive in this lib, the component is stateless -- the caller owns the args, the msgValue input buffer, and the txStatus and passes them in on every render.

A complete write flow looks like this:

-- in update
Send fn ->
    case resolveArgs model fn of
        Ok args ->
            ( { model | tx = Tx.update Tx.TxSent model.tx }
            , web3Cmd
                (Send.encode
                    (Send.writeCall
                        { contract = tokenAddress
                        , method = "approve"
                        , args = args
                        }
                    )
                )
            )


        Err _ ->
            ( model, Cmd.none )


-- in view
Web3.Ui.ContractWrite.view []
    { name = "approve"
    , args = [ spenderArg, amountArg ]
    , payable = Nothing
    , txStatus = model.tx
    , onSend = Send "approve"
    , sendLabel = "Approve"
    , pendingLabel = "Approving..."
    , explorerUrl = Just "https://scan.pulsechain.com/tx/"
    }

CSS classes: web3-contract-write, web3-contract-write__header, web3-contract-write__name, web3-contract-write__mutability, web3-contract-write__args, web3-contract-write__value, web3-contract-write__value-label, web3-contract-write__footer, web3-contract-write__error.

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

Render the write form.

type alias Config msg =
{ name : String
, args : List (Config msg)
, payable :
Maybe
{ value : String
, onValueChange : String -> msg
, valid : Bool
}
, txStatus : Status
, onSend : msg
, sendLabel : String
, pendingLabel : String
, explorerUrl : Maybe String
}

Configuration for view.

  • name -- the function name to display (e.g. "approve").
  • args -- one AbiInput config per ABI argument.
  • payable -- for payable functions, the msg.value input state and callback; Nothing for non-payable.
  • txStatus -- current transaction lifecycle state.
  • onSend -- message dispatched when the user clicks the send button.
  • sendLabel -- button label when the tx is idle (e.g. "Approve").
  • pendingLabel -- button label while the tx is in-flight (e.g. "Approving...").
  • explorerUrl -- optional explorer URL prefix for the tx-hash link; Nothing renders the hash as plain text (useful in local dev).