Blockie

The Blockie component allows for use of
Ethereum blockies
in your app. Blockies are identicons for Ethereum addresses. They are not meant to replace user profiles. Instead, they allow users to check if an address they want to interact with is the correct one.
Import component
import { Blockie } from "rimble-ui";

Example

Props

Prop NameTypeIs RequiredDefault ValueDescription
optsshapeoptional
{
  seed: 'foo',
  color: '#dfe',
  bgcolor: '#a71',
  size: 15,
  scale: 3,
  spotcolor: '#000',
}
Sets the options for the blockies identicon

Design guidelines

Some best practice for using Blockie in your product.
Don't make blockies circular
This obscures some of the blockie, making it more difficult for users to visually identify their Ethereum address. This means they're not a good idea to use in place of avatars.
Do
Don't

Research

We have some anecdotal evidence that blockies are not effectively helping users of Ethereum wallets or dApps as they are being implemented in many cases. We have chosen to include the pattern in Rimble because of its broad adoption and lack of alternatives. However, we believe further research, better usage guidelines, and potentially alternative patterns are needed.
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute