Web3.Ui.Address

Address display and input components.

-- Display with optional explorer link:
Web3.Ui.Address.view []
    { explorerUrl = Just "https://etherscan.io/address/" }
    addr


-- Truncated address string (pure, no Html):
Web3.Ui.Address.short addr  --> "0x1234…abcd"


-- Truncated with custom lengths (e.g. token detail page):
Web3.Ui.Address.shortWith { prefixChars = 8, suffixChars = 6 } addr
--> "0x123456…789abc"


-- Address text input:
Web3.Ui.Address.input []
    { value = model.addressInput
    , onInput = AddressInputChanged
    , valid = True
    }

view :

List (Attribute msg)

-> { explorerUrl : Maybe String }

-> Address

-> Html msg

Display an address as "0x1234…abcd". Optionally wraps in an <a> tag when explorerUrl is Just url.

CSS class: web3-address

short : Address -> String

Truncate an address to "0x" + first 4 hex chars + "…" + last 4 hex chars.

short addr  --> "0x1234…abcd"

shortWith :

{ prefixChars : Int

, suffixChars : Int

}

-> Address

-> String

Truncate an address with configurable prefix and suffix lengths.

prefixChars is the total number of leading characters including "0x". suffixChars is the number of trailing hex characters.

shortWith { prefixChars = 6, suffixChars = 4 } addr
--> "0x1234…abcd"   (same as short)


shortWith { prefixChars = 8, suffixChars = 6 } addr
--> "0x123456…789abc"

input :

List (Attribute msg)

-> { value : String

, onInput : String -> msg

, valid : Bool

}

-> Html msg

A text input for address entry. Adds web3-input-address--invalid class when valid is False.

The host app is responsible for validating with T.address.

CSS class: web3-input-address (plus web3-input-address--invalid when invalid)

copyable :

List (Attribute msg)

-> { onCopy : String -> msg

, explorerUrl : Maybe String

}

-> Address

-> Html msg

The short address display plus a copy affordance.

The button emits onCopy <full 0x address> — the component states intent, the APP performs the copy. This package ships zero JavaScript, so wire the message to a one-line port:

-- JS side of your app:
app.ports.copyToClipboard.subscribe(s => navigator.clipboard.writeText(s))

CSS classes: web3-address, web3-address__copy (aria-label "Copy address").

intrepidshape/elm-web3-ui/2.3.0

Web3.Ui.Address

Modules