From 3627b3f2530a6fa60d23e4e0f73dc32e7cec96c4 Mon Sep 17 00:00:00 2001
From: optisman <42278459+daisai3@users.noreply.github.com>
Date: Sat, 20 Feb 2021 04:06:01 +1000
Subject: [PATCH] Issue #389 - Change connected wallet blue circle with address
 blockie (#409)

* add address blockie

* remove regeneration of address blockie
---
 package.json                                 |  1 +
 src/app/containers/WalletConnector/index.tsx | 22 ++++++++++++++++++++
 yarn.lock                                    |  5 +++++
 3 files changed, 28 insertions(+)

diff --git a/package.json b/package.json
index 8998d22cb..87691a897 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "eslint-plugin-react": "7.19.0",
     "eslint-plugin-react-hooks": "^1.6.1",
     "eth-block-tracker-es5": "2.3.2",
+    "ethereum-blockies": "0.1.0",
     "file-loader": "4.3.0",
     "fontfaceobserver": "2.1.0",
     "fs-extra": "^8.1.0",
diff --git a/src/app/containers/WalletConnector/index.tsx b/src/app/containers/WalletConnector/index.tsx
index 5212360b2..2425dcbf8 100644
--- a/src/app/containers/WalletConnector/index.tsx
+++ b/src/app/containers/WalletConnector/index.tsx
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { reactLocalStorage } from 'reactjs-localstorage';
 import { Icon, Menu, MenuItem, Popover, Spinner } from '@blueprintjs/core';
+import blockies from 'ethereum-blockies';
 import styled from 'styled-components/macro';
 import { actions } from 'app/containers/EngageWalletDialog/slice';
 import { useSelector, useDispatch } from 'react-redux';
@@ -43,6 +44,20 @@ const WalletConnectorContainer: React.FC<Props> = props => {
     Sovryn.disconnect().then(() => {});
   };
 
+  const getWalletAddrBlockieImg = (): string => {
+    return blockies
+      .create({
+        // All options are optional
+        seed: address, // seed used to generate icon data, default: random
+        color: '#dfe', // to manually specify the icon color, default: random
+        bgcolor: '#aaa', // choose a different background color, default: random
+        size: 8, // width/height of the icon in blocks, default: 8
+        scale: 3, // width/height of each block in pixels, default: 4
+        spotcolor: '#000', // each pixel has a 13% chance of being of a third color,
+      })
+      .toDataURL();
+  };
+
   return (
     <div className="justify-content-center align-items-center d-none d-md-flex">
       {!connected && !address ? (
@@ -82,6 +97,13 @@ const WalletConnectorContainer: React.FC<Props> = props => {
               <div className="engage-wallet w-auto justify-content-center align-items-center d-none d-xl-flex cursor-pointer">
                 <span className="d-flex flex-nowrap flex-row align-items-center w-100 justify-content-between">
                   <span>{prettyTx(address, 4, 4)}</span>
+                  <span className="pl-2">
+                    <img
+                      className="rounded-circle"
+                      src={getWalletAddrBlockieImg()}
+                      alt="wallet address"
+                    />
+                  </span>
                   <Icon
                     icon="log-out"
                     className="logout"
diff --git a/yarn.lock b/yarn.lock
index 38ef22edc..a1643b529 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9941,6 +9941,11 @@ eth-tx-summary@^3.1.2:
     ethereumjs-vm "^2.6.0"
     through2 "^2.0.3"
 
+ethereum-blockies@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ethereum-blockies/-/ethereum-blockies-0.1.0.tgz#8d528286ab3bac035760bc0e3bb4d0a581f9ca6f"
+  integrity sha1-jVKChqs7rANXYLwOO7TQpYH5ym8=
+
 ethereum-bloom-filters@^1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/ethereum-bloom-filters/-/ethereum-bloom-filters-1.0.7.tgz#b7b80735e385dbb7f944ce6b4533e24511306060"