Web3.Ui.Identicon

Deterministic address identicons -- the classic 8x8 "blockies" every wallet renders, in pure Elm.

Faithful port of the canonical ethereum/blockies algorithm (xorshift PRNG seeded from the lowercased address, three HSL colors, 8-wide vertically mirrored grid), so the identicon for an address here matches the one users already recognise from MetaMask et al. Recognition is the whole point of an identicon -- a pretty-but-different avatar would be worse than none.

Identicon.view [] { size = 24 } holderAddress

Rendered as an inline SVG (viewBox 0 0 8 8, crisp edges) so it scales losslessly to any size. The three colors are data -- derived from the address -- so they are set as SVG fill attributes; everything else (border-radius for circular crops, borders, drop shadows) belongs to your CSS via the web3-identicon class.

.web3-identicon { border-radius: 50%; }   /* circular crop */

CSS class: web3-identicon.

view : List (Attribute msg) -> { size : Int } -> Address -> Html msg

Render the identicon for an address at a given pixel size.

The attrs land on an Html.span wrapper (class web3-identicon), not on the SVG itself -- Html.Attributes.class sets the className property, which is read-only on SVG nodes and would crash at runtime. The wrapper makes any Html.Attribute safe to pass.

cells : String -> Cells

Compute the colors and grid for any seed string (normally the lowercase 0x... address -- view handles that for you). Deterministic: the same seed always yields the same Cells.

type alias Cells =

{ color : String

, bgColor : String

, spotColor : String

, grid : List Int

}

The raw material of an identicon, for custom renderers (canvas, PNG export): three CSS color strings and the 64-cell grid in row-major order. Cell values: 0 background, 1 color, 2 spot color.

intrepidshape/elm-web3-ui/3.0.0

Web3.Ui.Identicon

Modules