From 1acaa6c64bcbd5cfc50f95365d820809ad43e0a8 Mon Sep 17 00:00:00 2001
From: Boris Kubiak <kubiakboris@gmail.com>
Date: Fri, 9 Feb 2018 15:18:16 +0100
Subject: [PATCH] Display address identicon in result

---
 package-lock.json  |  5 +++++
 package.json       |  1 +
 src/vue/Result.vue | 25 +++++++++++++++++++++++--
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0bd688e..637dbb5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1166,6 +1166,11 @@
         "inherits": "2.0.3"
       }
     },
+    "blockies": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/blockies/-/blockies-0.0.2.tgz",
+      "integrity": "sha1-Iq1Y2k9rOCvHm/Q4bFggxwBH5O0="
+    },
     "bluebird": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
diff --git a/package.json b/package.json
index 40a2ea9..188feee 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.0",
     "babel-preset-stage-3": "^6.24.1",
+    "blockies": "0.0.2",
     "bootstrap": "^4.0.0",
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.7",
diff --git a/src/vue/Result.vue b/src/vue/Result.vue
index aa05bba..158b05e 100644
--- a/src/vue/Result.vue
+++ b/src/vue/Result.vue
@@ -1,21 +1,42 @@
 <template>
     <div class="panel result">
-        <div>Address: <span class="output" v-text="address"></span></div>
-        <div>Private key: <span class="output" v-text="privateKey"></span></div>
+        <div class="row">
+            <div class="float-left" id="identicon"></div>
+            <div class="col">
+                <div>Address: <span class="output" v-text="address"></span></div>
+                <div>Private key: <span class="output" v-text="privateKey"></span></div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
+    import * as blockies from 'blockies';
+
     export default {
         props: {
             address: String,
             privateKey: String
+        },
+        watch: {
+            address(addr) {
+                const id = document.getElementById('identicon');
+                id.innerHTML= '';
+                if(addr){
+                    id.appendChild(blockies({seed: addr.toLocaleLowerCase(), scale: 6}));
+                }
+            }
         }
     }
 </script>
 
 <style lang="sass" scoped>
     @import "../css/variables"
+    #identicon
+        width: 48px
+        height: 48px
+        margin-right: 15px
+        background-color: $panel-background-clear
     .output
         font-family: monospace
         font-size: 1.2em