aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--package.json1
-rw-r--r--ui/app/accounts.js19
-rw-r--r--ui/app/components/account-panel.js2
-rw-r--r--ui/app/components/identicon.js49
-rw-r--r--ui/app/components/panel.js13
5 files changed, 57 insertions, 27 deletions
diff --git a/package.json b/package.json
index 7bc403494..a9b30f362 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
"hat": "0.0.3",
"identicon.js": "^1.2.1",
"inject-css": "^0.1.1",
+ "jazzicon": "^1.0.1",
"metamask-logo": "^1.1.5",
"multiplex": "^6.7.0",
"once": "^1.3.3",
diff --git a/ui/app/accounts.js b/ui/app/accounts.js
index 3f0a3e819..18ba1e67d 100644
--- a/ui/app/accounts.js
+++ b/ui/app/accounts.js
@@ -3,7 +3,7 @@ const Component = require('react').Component
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const extend = require('xtend')
-const Identicon = require('identicon.js')
+const Identicon = require('./components/identicon')
const actions = require('./actions')
const AccountPanel = require('./components/account-panel')
const valuesFor = require('./util').valuesFor
@@ -87,14 +87,6 @@ AccountsScreen.prototype.render = function() {
isSelected: false,
isFauceting: isFauceting,
})
- // return h(AccountPanel, componentState)
-
- // var identity = state.identity || {}
- // var account = state.account || {}
- // var isFauceting = state.isFauceting
-
- var identicon = new Identicon(identity.address, 46).toString()
- var identiconSrc = `data:image/png;base64,${identicon}`
return (
h('.accounts-list-option.flex-row.flex-space-between.cursor-pointer', {
@@ -105,14 +97,9 @@ AccountsScreen.prototype.render = function() {
onClick: (event) => actions.onShowDetail(identity.address, event),
}, [
- // account identicon
h('.identicon-wrapper.flex-column.flex-center.select-none', [
- h('img.identicon', {
- src: identiconSrc,
- style: {
- border: 'none',
- borderRadius: '20px',
- }
+ h(Identicon, {
+ address: identity.address
}),
]),
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
index c1450b516..6bae095d1 100644
--- a/ui/app/components/account-panel.js
+++ b/ui/app/components/account-panel.js
@@ -4,7 +4,7 @@ const Component = require('react').Component
const h = require('react-hyperscript')
const addressSummary = require('../util').addressSummary
const formatBalance = require('../util').formatBalance
-const Identicon = require('identicon.js')
+const Identicon = require('./identicon')
const Panel = require('./panel')
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
new file mode 100644
index 000000000..8294ce4d5
--- /dev/null
+++ b/ui/app/components/identicon.js
@@ -0,0 +1,49 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const jazzicon = require('jazzicon')
+const findDOMNode = require('react-dom').findDOMNode
+
+module.exports = IdenticonComponent
+
+inherits(IdenticonComponent, Component)
+function IdenticonComponent() {
+ Component.call(this)
+
+ this.diameter = 46
+}
+
+IdenticonComponent.prototype.render = function() {
+ debugger
+ return (
+ h('div', {
+ key: 'identicon-' + this.props.address,
+ style: {
+ display: 'inline-block',
+ height: this.diameter,
+ width: this.diameter,
+ borderRadius: this.diameter / 2,
+ overflow: 'hidden',
+ },
+ })
+ )
+}
+
+IdenticonComponent.prototype.componentDidMount = function(){
+ var state = this.props
+ var address = state.address
+
+ if (!address) return
+ console.log('rendering for address ' + address)
+ var numericRepresentation = jsNumberForAddress(address)
+
+ var container = findDOMNode(this)
+ var identicon = jazzicon(this.diameter, numericRepresentation)
+ container.appendChild(identicon)
+}
+
+function jsNumberForAddress(address) {
+ var addr = address.slice(2, 10)
+ var seed = parseInt(addr, 16)
+ return seed
+}
diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js
index 25e6b7f0f..2f5a3715d 100644
--- a/ui/app/components/panel.js
+++ b/ui/app/components/panel.js
@@ -2,7 +2,7 @@ const inherits = require('util').inherits
const ethUtil = require('ethereumjs-util')
const Component = require('react').Component
const h = require('react-hyperscript')
-const Identicon = require('identicon.js')
+const Identicon = require('./identicon')
module.exports = Panel
@@ -19,9 +19,6 @@ Panel.prototype.render = function() {
var account = state.account || {}
var isFauceting = state.isFauceting
- var identicon = new Identicon(state.identiconKey, 46).toString()
- var identiconSrc = `data:image/png;base64,${identicon}`
-
return (
h('.identity-panel.flex-row.flex-space-between', {
style: {
@@ -32,12 +29,8 @@ Panel.prototype.render = function() {
// account identicon
h('.identicon-wrapper.flex-column.select-none', [
- h('img.identicon', {
- src: identiconSrc,
- style: {
- border: 'none',
- borderRadius: '20px',
- }
+ h(Identicon, {
+ address: state.identiconKey,
}),
h('span.font-small', state.identiconLabel),
]),