Web3.Ui.Wallet

Wallet connection UI components.

All functions accept List (Html.Attribute msg) as the first argument -- merged onto the root element. Pass [] for no extra attributes.

No default styles -- every element has a semantic class name. Supply your own CSS.

-- Basic connect/disconnect button:
Web3.Ui.Wallet.connectButton []
    { onConnect = ConnectWallet, onDisconnect = DisconnectWallet }
    model.wallet


-- Full wallet UI handling all states:
Web3.Ui.Wallet.viewState []
    { onConnect = ConnectWallet
    , onSwitchChain = SwitchChain
    , onDisconnect = DisconnectWallet
    , knownChains = [ Chain.pulsechain, Chain.ethereum ]
    }
    model.wallet

connectButton :

List (Attribute msg)

-> { onConnect : msg

, onDisconnect : msg

}

-> State

-> Html msg

A connect/disconnect button. Shows "Connect" in disconnected/error states and "Disconnect" in connected states.

CSS classes: web3-connect-btn, web3-disconnect-btn

walletPicker :

List (Attribute msg)

-> { onSelect : String -> msg

, selected : Maybe String

}

-> List WalletProvider

-> Html msg

A list of EIP-6963 discovered wallets for the user to pick from.

Each wallet renders as a button with the wallet icon and name. Pass the RDNS of the currently active wallet as selected to highlight it.

CSS classes: web3-wallet-picker (container), web3-wallet-option (each item), web3-wallet-option--selected (active wallet)

viewState :

List (Attribute msg)

-> { onConnect : msg

, onSwitchChain : msg

, onDisconnect : msg

, knownChains : List Chain

}

-> State

-> Html msg

Full wallet UI -- handles all Wallet.State variants with appropriate labels and actions.

Pass knownChains so the WrongChain branch can display the target network name.

CSS class: web3-wallet-state

chainBadge : List (Attribute msg) -> List Chain -> State -> Html msg

Displays the connected chain name, looked up from the supplied chain list. Falls back to "Unknown Chain" if not found.

Shows "Wrong Chain" when in WrongChain state. Shows "Read-only" when in ReadOnly state. Shows "--" when connecting, disconnected, or in error state.

CSS class: web3-chain-badge

disconnectPopover :

List (Attribute msg)

-> { onCopy : String -> msg

, onDisconnect : msg

, explorerUrl : Maybe String

}

-> ConnectedInfo

-> Html msg

The connected-state address control: short address (with copy button and optional explorer link, via Web3.Ui.Address.copyable) plus a disconnect button. Intended to render inside a caller-controlled dropdown/popover -- this component doesn't manage its own open/closed state, since that's inherently the consumer's UI decision (a click-triggered popover, an always-visible panel, etc.).

CSS class: web3-disconnect-popover

Web3.Ui.Wallet.disconnectPopover []
    { onCopy = CopyToClipboard
    , onDisconnect = DisconnectWallet
    , explorerUrl = Just (Chain.blockExplorer Chain.pulsechain ++ "/address/")
    }
    info

intrepidshape/elm-web3-ui/4.0.0

Web3.Ui.Wallet

Modules