From ba4491404487978e23c7e2eaa5d988f87d1e0cba Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 4 Jun 2019 22:47:33 +0200
Subject: [PATCH] identicon fixes

---
 package.json                                  |  2 +-
 src/renderer/screens/Home.css                 |  3 +-
 src/renderer/screens/Preferences/Accounts.jsx | 36 ++++++++++---------
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 7917602..6b94604 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@coingecko/cryptoformat": "^0.3.2",
     "ethereum-address": "0.0.4",
+    "ethereum-blockies": "MyEtherWallet/blockies",
     "ms": "^2.1.1"
   },
   "devDependencies": {
@@ -50,7 +51,6 @@
     "prettier": "^1.17.1",
     "prettier-stylelint": "^0.4.2",
     "react": "^16.8.6",
-    "react-blockies": "^1.4.1",
     "react-dom": "^16.8.6",
     "react-pose": "^4.0.8",
     "release-it": "^12.2.2",
diff --git a/src/renderer/screens/Home.css b/src/renderer/screens/Home.css
index 00ee3d4..d43d30b 100644
--- a/src/renderer/screens/Home.css
+++ b/src/renderer/screens/Home.css
@@ -43,8 +43,7 @@
     font-size: .85rem;
     display: block;
     white-space: nowrap;
-    margin-top: .3rem;
-    transition: color .2s ease-out;
+    margin-top: .5rem;
 }
 
 .number-unit-wrap--accounts {
diff --git a/src/renderer/screens/Preferences/Accounts.jsx b/src/renderer/screens/Preferences/Accounts.jsx
index ee9913a..15eb4de 100644
--- a/src/renderer/screens/Preferences/Accounts.jsx
+++ b/src/renderer/screens/Preferences/Accounts.jsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import Blockies from 'react-blockies'
+import { toDataUrl } from 'ethereum-blockies'
 import posed, { PoseGroup } from 'react-pose'
 import Store from 'electron-store'
 import ethereum_address from 'ethereum-address'
@@ -11,22 +11,26 @@ const Item = posed.li(fadeIn)
 
 const AccountsList = ({ accounts, handleDelete }) => (
   <PoseGroup>
-    {accounts.map(account => (
-      <Item key={account}>
-        <div>
-          <Blockies seed={account} size={10} scale={3} />
-          {account}
-        </div>
+    {accounts.map(account => {
+      const identicon = account && toDataUrl(account)
 
-        <button
-          className="delete"
-          onClick={e => handleDelete(e, account)}
-          title="Remove account"
-        >
-          &times;
-        </button>
-      </Item>
-    ))}
+      return (
+        <Item key={account}>
+          <div>
+            <img className="identicon" src={identicon} alt="Blockies" />
+            {account}
+          </div>
+
+          <button
+            className="delete"
+            onClick={e => handleDelete(e, account)}
+            title="Remove account"
+          >
+            &times;
+          </button>
+        </Item>
+      )
+    })}
   </PoseGroup>
 )