Web3.Ui.ChainGate

Render content only when the wallet is on the expected chain.

A common pattern in every dapp: show the actual UI when connected to the right network, show a prompt to switch otherwise. This wraps that pattern so it does not have to be repeated in every view.

Web3.Ui.ChainGate.view []
    { wallet = model.wallet
    , expectedChain = Chain.chainId Chain.pulsechain
    , wrongChain = Html.text "Please switch to PulseChain"
    , content = actualContent
    }

The two branches are named record fields rather than adjacent positional arguments of the same type: the previous chainGate state chain wrong content form let a caller swap the last two and get a gate that showed the app to the wrong network and the switch prompt to the right one, with no type error.

The gate renders its own root element (web3-chaingate) carrying an --ok / --wrong-chain modifier, so the caller's attributes have somewhere to land and the gate itself is styleable and addressable.

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

Render whichever branch the wallet state selects.

CSS classes: web3-chaingate, web3-chaingate--ok, web3-chaingate--wrong-chain.

type alias Config msg =

{ wallet : State

, expectedChain : ChainId

, wrongChain : Html msg

, content : Html msg

}

The wallet state to inspect, the chain the content requires, and the two branches -- content when the wallet is Connected on expectedChain, wrongChain for every other state (disconnected, wrong chain, read-only, connecting, error).

intrepidshape/elm-web3-ui/4.0.0

Web3.Ui.ChainGate

Modules