Convert icons to identicons

3 files changed, 12 insertions, 2 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 047865f02..f53bc4fc0 100644
--- a/CHANGELOG.md
+++ b/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).
 
 # 1.6.0 2016-04-22
 
diff --git a/package.json b/package.json
index ae66621d3..e1713e66d 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "ethereumjs-tx": "^1.0.0",
     "ethereumjs-util": "^4.3.0",
     "hat": "0.0.3",
+    "identicon.js": "^1.2.1",
     "inject-css": "^0.1.1",
     "metamask-logo": "^1.1.5",
     "multiplex": "^6.7.0",
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
index 9fda2ebfc..25b5e5d24 100644
--- a/ui/app/components/account-panel.js
+++ b/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', {
-          style: { backgroundImage: 'url("https://ipfs.io/ipfs/'+identity.img+'")' }
+        h('img.identicon', {
+          src: identiconSrc,
+          style: {
+            border: 'none',
+            borderRadius: '20px',
+          }
         }),
         h('span.font-small', identity.name),
       ]),