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 = "" + message.message + "";
} else {
- div.innerHTML = "" + message.username + "" + message.message + "";
+ div.innerHTML = "" + message.username + "" + message.message + "";
}
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"