From 0791d57afd0531a3e09b84e7ba968a1b5c4d3358 Mon Sep 17 00:00:00 2001
From: Richard Ramos <info@richardramos.me>
Date: Wed, 10 Apr 2019 22:52:31 -0400
Subject: [PATCH] feat: identicon

---
 package.json      |  3 ++-
 src/index.js      | 13 ++++++++++++-
 themes/status.css |  8 ++++++++
 yarn.lock         | 13 +++++++++----
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 96bd310..cc81e7c 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,10 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime-corejs2": "^7.3.1",
+    "identicon.js": "^2.3.3",
     "murmur-client": "^0.3.8",
     "null-loader": "^0.1.1",
-    "status-js-api": "^1.2.9",
+    "status-js-api": "^1.2.11",
     "webpack": "^4.29.0",
     "webpack-merge": "^4.2.1",
     "webpack-node-externals": "^1.7.2"
diff --git a/src/index.js b/src/index.js
index b9bcbdd..c62912d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import StatusJS from 'status-js-api';
 import Murmur from 'murmur-client';
+import Identicon from 'identicon.js';
 
 window.StatusWidget = function (channelName, chatWidget) {
   if (!channelName) { throw new Error("no channelName provider"); }
@@ -45,11 +46,21 @@ window.StatusWidget = function (channelName, chatWidget) {
       const msg = JSON.parse(data.payload)[1][0];
 
       const message = { username: data.username, message: msg, pubkey: data.data.sig, data };
+
+      const options = {
+          background: [255, 255, 255, 255],
+          margin: 0.24,
+          size: 32,
+          format: 'svg'
+        };
+  
+      const identicon = new Identicon(message.pubkey, options).toString();
+
       let div = document.createElement('div');
       if (lastMessageUser === message.username) {
         div.innerHTML = "<span class='message'>" + message.message + "</span>";
       } else {
-        div.innerHTML = "<span class='username'>" + message.username + "</span><span class='message'>" + message.message + "</span>";
+        div.innerHTML = "<img class='identicon' width=40 height=40 src='data:image/svg+xml;base64," + identicon + "' /><span class='username'>" + message.username + "</span><span class='message'>" + message.message + "</span>";
       }
       chatBox.append(div);
       lastMessageUser = message.username;
diff --git a/themes/status.css b/themes/status.css
index c680abe..221d88a 100644
--- a/themes/status.css
+++ b/themes/status.css
@@ -38,9 +38,16 @@
   font-size: 14px;
 }
 
+._status-chat-widget .identicon {
+  border-radius: 50%;
+  float: left;
+  margin-top: 10px;
+}
+
 ._status-chat-widget .username {
   color: #939ba1;
   font-size: 14px;
+  margin-left: 20px;
 }
 
 ._status-chat-widget .message {
@@ -51,4 +58,5 @@
   display: block;
   margin-top: 3px;
   margin-bottom: 10px;
+  margin-left: 60px;
 }
diff --git a/yarn.lock b/yarn.lock
index 8f5c79f..ada89bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2665,6 +2665,11 @@ iconv-lite@^0.4.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+identicon.js@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/identicon.js/-/identicon.js-2.3.3.tgz#c505b8d60ecc6ea13bbd991a33964c44c1ad60a1"
+  integrity sha512-/qgOkXKZ7YbeCYbawJ9uQQ3XJ3uBg9VDpvHjabCAPp6aRMhjLaFAxG90+1TxzrhKaj6AYpVGrx6UXQfQA41UEA==
+
 idna-uts46-hx@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/idna-uts46-hx/-/idna-uts46-hx-2.3.1.tgz#a1dc5c4df37eee522bf66d969cc980e00e8711f9"
@@ -6123,10 +6128,10 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-status-js-api@^1.2.9:
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/status-js-api/-/status-js-api-1.2.9.tgz#76cfc6e7ccb378c49fb38f6b67d1374259a3dbcb"
-  integrity sha512-Sn+Ivg3RjMrwVvc9cS2Yy87qBnZYhhhfcaVkvlNHWGcsBaEbvJ+RPzISumf+sjQUV3znhOSyb5KPRRM0+xtP+w==
+status-js-api@^1.2.11:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/status-js-api/-/status-js-api-1.2.11.tgz#835a8be9b87ca7eb9e3107f92f6e4988b9ed374a"
+  integrity sha512-+lpfQsMdgCJusBLj6lWNA17z3vnfDfz7X5FawQzPy5+gGFC2UcTKwm+lwtqbQHv7K9Dkxr/FEBUgCG/2ce8+Xg==
   dependencies:
     bip39 "^2.5.0"
     bourne "^1.1.2"