Metamask-extension: Add Blockie icon option

[danfinlay]

Let users opt into blockies if they want.

Both parity and etherscan use https://github.com/ethereum/blockies

[gitcoinbot]

__This issue now has a bounty of 0.03 ETH (8.69 USDT) attached to it.__ To view or claim this bounty, click here.

[kylerchin]

Raise bounty amount...

[danfinlay]

For anyone who wants to do this, use branch NewUI-flat until merged into master.

Also, add persistence of preference to PreferencesController (app/scripts/controllers/preferences.js).

Preference should be configurable in the settings page.

[Diti]

@danfinlay Great, thanks for the info! I was planning on starting implementing this in the near future (apparently, I need to learn React first). Your info comes just at the right time! :)

EDIT: I have so many white screens (mock not running correctly), I can’t develop for MetaMask right now, until I find a workaround. :( Someone else needs to develop this feature.

[ghost]

@danfinlay hello, I'm working on this issue and wanted to give you an update and ask for some input.

I am mostly done with the implementation. So far I've got a toggle switch that writes a boolean prop to the store w/ Redux, I've wired up the Identicon component to check for that property and render a Blockie instead of the default JazzIcon. I'm ironing out a couple of layout bugs, but the main thing I wanted to ask about was the implementation of the Blockie itself because we have some options and stylistic decisions to make.

One thing I've noticed is that the library at ethereum/blockies is a bit outdated and anyone who is using it seems to have forked their own from the original. Many people seem to have wrapped the original implementation as a React Component and called it a day. These implementations preserve the original property options to the component, allowing you to generate your own custom-tailored Blockies for your own purpose. Visually speaking, what comes out of the library varies dramatically based on the inputs given.

The first time I saw a Blockies implementation was at MyEtherWallet. On their paper wallet is a Blockie and printed beneath, "Always look for this icon when sending to this wallet." As I was working on this MetaMask enhancement, I kept thinking to that paper wallet as the "control". I wanted the results of my implementation to match MEW's Blockies, so we can maintain that level of trust with users across wallet platforms.

However, MEW have implemented their own Blockies lib, based on a fork from the original. Theirs takes no options except the address, so it generates the same Blockie every time.

So finally, here is the question: which approach do we use? We can tailor our own Blockie, tweaking the canvas size and block density etc until it looks the way we want, which will not match the Blockies from MyEtherWallet. Or, we can use the MyEtherWallet fork to guarantee agreement between Blockies from different wallets. I tend toward using MEW's lib, but I wanted to hear your thoughts.

Edit: after poking around with the MEW blockies library, I believe this is the correct way to go. The identicons now match what's in MEW and Etherscan after switching to this lib so I'm going forward with it.

[owocki]

Raise bounty amount...

@kylerchin fair enough; i'm going to double the bounty amount, just as a show of good faith. this was one of the first bounties that were posted to the system, and it was before the pricing strategy was really thought out. live and learn...

[danfinlay]

@jpclark It's probably good enough to just do what MEW/Etherscan/Mist has for now, I know it's not perfect, but we can leave "defining a perfect new icon format" to a future project.

[ghost]

@danfinlay cool, that makes sense. The blockies are in place and looking pretty decent. I've finished testing and everything seems to be working. Let me know if you find any issues or need anything else.

[owocki]

@jpclark paid out the bounty!

@kylerchin per your request i paid out a higher bounty amount (0.15 ETH instead of 0.03 ETH)

more at https://gitcoin.co/funding/details?url=https://github.com/MetaMask/metamask-extension/issues/1785

[gitcoinbot]

__The funding of 0.15 ETH attached to this issue has been approved & issued.__

Learn more at: https://gitcoin.co/funding/details?url=https://github.com/MetaMask/metamask-extension/issues/1785

[ghost]

Awesome guys, this was a blast to work on!

[danfinlay]

Closing since this was completed!