Merge pull request #162 from MetaMask/Identicon

Identicon support

CHANGELOG.md

@@ -6,6 +6,7 @@
 - The account detail view now has a "Change acct" button which shows the account list.
 - Clicking accounts in the account list now both selects that account and displays that account's detail view.
 - Selected account is now persisted between sessions, so the current account stays selected.
+- Account icons are now "identicons" (deterministically generated from the address).
 - Fixed link to Slack channel.
 
 # 1.6.0 2016-04-22

package.json

@@ -34,6 +34,7 @@
     "ethereumjs-tx": "^1.0.0",
     "ethereumjs-util": "^4.4.0",
     "hat": "0.0.3",
+    "identicon.js": "^1.2.1",
     "inject-css": "^0.1.1",
     "metamask-logo": "^1.1.5",
     "multiplex": "^6.7.0",

ui/app/components/account-panel.js

@@ -4,6 +4,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const addressSummary = require('../util').addressSummary
 const formatBalance = require('../util').formatBalance
+const Identicon = require('identicon.js')
 
 module.exports = AccountPanel
 
@@ -19,6 +20,9 @@ AccountPanel.prototype.render = function() {
   var account = state.account || {}
   var isFauceting = state.isFauceting
 
+  var identicon = new Identicon(identity.address, 46).toString()
+  var identiconSrc = `data:image/png;base64,${identicon}`
+
   return (
 
     h('.identity-panel.flex-row.flex-space-between'+(state.isSelected?'.selected':''), {
@@ -30,8 +34,12 @@ AccountPanel.prototype.render = function() {
 
       // account identicon
       h('.identicon-wrapper.flex-column.select-none', [
-        h('.identicon', {
+        h('img.identicon', {
-          style: { backgroundImage: 'url("https://ipfs.io/ipfs/'+identity.img+'")' }
+          src: identiconSrc,
+          style: {
+            border: 'none',
+            borderRadius: '20px',
+          }
         }),
         h('span.font-small', identity.name),
       ]),