Web3.Ui.TokenLogo

Token logo atom -- an img when a logo URL is known, a deterministic letter tile when it is not.

Every token list, swap panel, and portfolio row needs the same thing: show the logo if we have one, and degrade to something recognisable (not a broken image icon) when we don't. The fallback tile shows the first 1-2 characters of the symbol and picks one of eight hue classes from a character-code hash of the symbol -- so "USDC" is always the same colour everywhere it appears, with zero inline styles. Your stylesheet owns the actual palette.

Web3.Ui.TokenLogo.view []
    { logoUrl = Just "https://tokens.example/usdc.png"
    , symbol = "USDC"
    , size = 24
    }


-- No logo known -- renders the "FO" letter tile:
Web3.Ui.TokenLogo.view []
    { logoUrl = Nothing, symbol = "FOO", size = 24 }

The image is loading="lazy" (token lists are long) with alt set to the symbol. The tile carries role="img" and aria-label with the symbol so screen readers announce the same thing either way. Sizing uses width/height attributes (img) and SVG width/height (tile) -- the same convention as Web3.Ui.Identicon -- never inline styles.

CSS classes: web3-tokenlogo, web3-tokenlogo--img, web3-tokenlogo--tile, web3-tokenlogo--hue-0 ... web3-tokenlogo--hue-7.

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

Render the logo image, or the letter-tile fallback when logoUrl is Nothing.

attrs land on whichever of the two the config selects -- the img or the tile span -- so a layout class does not have to be applied per branch by the caller.

type alias Config =

{ logoUrl : Maybe String

, symbol : String

, size : Int

}

What to render: the logo URL if known, the token symbol (alt text and tile letters), and the pixel size.

intrepidshape/elm-web3-ui/4.0.0

Web3.Ui.TokenLogo

Modules