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"