Merge pull request #18 from kremalicious/fix/identicons

identicon fixes

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",

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 {

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>
 )