From 744b78e9c8c032cdd13acf121f891c28f319ed4d Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 24 Aug 2017 21:55:27 -0230 Subject: Patch 2 account details modal (#1957) * Account details modal styling changes. * Tweaking styles. --- ui/app/components/identicon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/identicon.js') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index c754bc6ba..98d5d40ef 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -20,7 +20,7 @@ IdenticonComponent.prototype.render = function () { var props = this.props var diameter = props.diameter || this.defaultDiameter return ( - h('div', { + h('div.identicon', { key: 'identicon-' + this.props.address, style: { display: 'flex', -- cgit v1.2.3 From 06b2a04a4259a0bc7dff4004328441d353c296de Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 5 Sep 2017 01:48:52 -0700 Subject: Implement tokens list UI --- ui/app/components/identicon.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/components/identicon.js') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 98d5d40ef..71831fe71 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -18,9 +18,11 @@ function IdenticonComponent () { IdenticonComponent.prototype.render = function () { var props = this.props + const { className = '' } = props var diameter = props.diameter || this.defaultDiameter return ( - h('div.identicon', { + h('div', { + className: `${className} identicon`, key: 'identicon-' + this.props.address, style: { display: 'flex', -- cgit v1.2.3 From 14b2f3e391752cca02c05ae0137e490bfdcdd7a7 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 6 Sep 2017 23:03:23 -0700 Subject: Show token balance and identicon --- ui/app/components/identicon.js | 44 +++++++++++++++++++++++++++--------------- 1 file changed, 28 insertions(+), 16 deletions(-) (limited to 'ui/app/components/identicon.js') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 71831fe71..259fa4d73 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -18,23 +18,35 @@ function IdenticonComponent () { IdenticonComponent.prototype.render = function () { var props = this.props - const { className = '' } = props + const { className = '', address } = props var diameter = props.diameter || this.defaultDiameter - return ( - h('div', { - className: `${className} identicon`, - key: 'identicon-' + this.props.address, - style: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: diameter, - width: diameter, - borderRadius: diameter / 2, - overflow: 'hidden', - }, - }) - ) + + return address + ? ( + h('div', { + className: `${className} identicon`, + key: 'identicon-' + address, + style: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: diameter, + width: diameter, + borderRadius: diameter / 2, + overflow: 'hidden', + }, + }) + ) + : ( + h('img.balance-icon', { + src: '../images/eth_logo.svg', + style: { + height: diameter, + width: diameter, + borderRadius: diameter / 2, + }, + }) + ) } IdenticonComponent.prototype.componentDidMount = function () { -- cgit v1.2.3 From 90fc4812bc75857581e56eb6d63484dbc5c48cb1 Mon Sep 17 00:00:00 2001 From: "Clark, Jason (Contractor)" Date: Thu, 23 Nov 2017 18:33:44 -0700 Subject: incremental commit --- ui/app/components/identicon.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/components/identicon.js') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index d30b7cd56..63f3087a4 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const isNode = require('detect-node') const findDOMNode = require('react-dom').findDOMNode const jazzicon = require('jazzicon') +const blockies = require('blockies') const iconFactoryGen = require('../../lib/icon-factory') const iconFactory = iconFactoryGen(jazzicon) @@ -18,7 +19,7 @@ function IdenticonComponent () { IdenticonComponent.prototype.render = function () { var props = this.props - const { className = '', address } = props + const { className = '', address, useBlockie } = props var diameter = props.diameter || this.defaultDiameter return address -- cgit v1.2.3 From dc7bd3c62897edfb642f215a71fbf7dd93faa350 Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Fri, 24 Nov 2017 13:48:56 -0700 Subject: incremental commit of working blockie component --- ui/app/components/identicon.js | 41 ++++++++++++++++++++++++++--------------- 1 file changed, 26 insertions(+), 15 deletions(-) (limited to 'ui/app/components/identicon.js') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 63f3087a4..9e9b82aae 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -1,14 +1,15 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const connect = require('react-redux').connect const isNode = require('detect-node') const findDOMNode = require('react-dom').findDOMNode const jazzicon = require('jazzicon') -const blockies = require('blockies') +const BlockiesIdenticon = require('./blockies/blockies-component') const iconFactoryGen = require('../../lib/icon-factory') const iconFactory = iconFactoryGen(jazzicon) -module.exports = IdenticonComponent +module.exports = connect(mapStateToProps)(IdenticonComponent) inherits(IdenticonComponent, Component) function IdenticonComponent () { @@ -17,6 +18,12 @@ function IdenticonComponent () { this.defaultDiameter = 46 } +function mapStateToProps (state) { + return { + useBlockie: state.metamask.useBlockie + } +} + IdenticonComponent.prototype.render = function () { var props = this.props const { className = '', address, useBlockie } = props @@ -24,19 +31,23 @@ IdenticonComponent.prototype.render = function () { return address ? ( - h('div', { - className: `${className} identicon`, - key: 'identicon-' + address, - style: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: diameter, - width: diameter, - borderRadius: diameter / 2, - overflow: 'hidden', - }, - }) + useBlockie + ? h(BlockiesIdenticon, { + seed: address, + }) + : h('div', { + className: `${className} identicon`, + key: 'identicon-' + address, + style: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: diameter, + width: diameter, + borderRadius: diameter / 2, + overflow: 'hidden', + }, + }) ) : ( h('img.balance-icon', { -- cgit v1.2.3 From 41be4714c248870447c7593355f23023d63f24f6 Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Fri, 24 Nov 2017 14:18:46 -0700 Subject: tweaking styling --- ui/app/components/identicon.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) (limited to 'ui/app/components/identicon.js') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 9e9b82aae..c1dc0fb5c 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -32,9 +32,22 @@ IdenticonComponent.prototype.render = function () { return address ? ( useBlockie - ? h(BlockiesIdenticon, { - seed: address, - }) + ? h('div', { + className: `${className} identicon`, + style: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: diameter, + width: diameter, + borderRadius: diameter / 2, + overflow: 'hidden', + }, + }, [ + h(BlockiesIdenticon, { + seed: address + }) + ]) : h('div', { className: `${className} identicon`, key: 'identicon-' + address, -- cgit v1.2.3 From 1b89ceb63aa7d96912eb32c8766ef566479dde41 Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Sat, 25 Nov 2017 14:33:42 -0700 Subject: swapped out ethereum-blockies lib for MEW blockies library, tightened up identicon.js code --- ui/app/components/identicon.js | 99 +++++++++++++++++++++--------------------- 1 file changed, 49 insertions(+), 50 deletions(-) (limited to 'ui/app/components/identicon.js') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index c1dc0fb5c..3e2349dbe 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -5,9 +5,9 @@ const connect = require('react-redux').connect const isNode = require('detect-node') const findDOMNode = require('react-dom').findDOMNode const jazzicon = require('jazzicon') -const BlockiesIdenticon = require('./blockies/blockies-component') const iconFactoryGen = require('../../lib/icon-factory') const iconFactory = iconFactoryGen(jazzicon) +const { toDataUrl } = require('../../lib/blockies') module.exports = connect(mapStateToProps)(IdenticonComponent) @@ -31,36 +31,19 @@ IdenticonComponent.prototype.render = function () { return address ? ( - useBlockie - ? h('div', { - className: `${className} identicon`, - style: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: diameter, - width: diameter, - borderRadius: diameter / 2, - overflow: 'hidden', - }, - }, [ - h(BlockiesIdenticon, { - seed: address - }) - ]) - : h('div', { - className: `${className} identicon`, - key: 'identicon-' + address, - style: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: diameter, - width: diameter, - borderRadius: diameter / 2, - overflow: 'hidden', - }, - }) + h('div', { + className: `${className} identicon`, + key: useBlockie ? 'blockie' : 'identicon-' + address, + style: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: diameter, + width: diameter, + borderRadius: diameter / 2, + overflow: 'hidden', + }, + }) ) : ( h('img.balance-icon', { @@ -76,38 +59,54 @@ IdenticonComponent.prototype.render = function () { IdenticonComponent.prototype.componentDidMount = function () { var props = this.props - const { address } = props + const { address, useBlockie } = props if (!address) return - // eslint-disable-next-line react/no-find-dom-node - var container = findDOMNode(this) - - var diameter = props.diameter || this.defaultDiameter if (!isNode) { - var img = iconFactory.iconForAddress(address, diameter) - container.appendChild(img) + // eslint-disable-next-line react/no-find-dom-node + var container = findDOMNode(this) + + if (useBlockie) { + _generateBlockie(container, address) + } else { + const diameter = props.diameter || this.defaultDiameter + _generateJazzicon(container, address, diameter) + } } } IdenticonComponent.prototype.componentDidUpdate = function () { var props = this.props - const { address } = props + const { address, useBlockie } = props if (!address) return - // eslint-disable-next-line react/no-find-dom-node - var container = findDOMNode(this) - - var children = container.children - for (var i = 0; i < children.length; i++) { - container.removeChild(children[i]) - } - - var diameter = props.diameter || this.defaultDiameter if (!isNode) { - var img = iconFactory.iconForAddress(address, diameter) - container.appendChild(img) + // eslint-disable-next-line react/no-find-dom-node + var container = findDOMNode(this) + + var children = container.children + for (var i = 0; i < children.length; i++) { + container.removeChild(children[i]) + } + + if (useBlockie) { + _generateBlockie(container, address) + } else { + const diameter = props.diameter || this.defaultDiameter + _generateJazzicon(container, address, diameter) + } } } +function _generateBlockie(container, address) { + const img = new Image() + img.src = toDataUrl(address) + container.appendChild(img) +} + +function _generateJazzicon(container, address, diameter) { + const img = iconFactory.iconForAddress(address, diameter) + container.appendChild(img) +} -- cgit v1.2.3 From bd48d858f4226da889760e259377637164f3099c Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Sat, 25 Nov 2017 15:11:29 -0700 Subject: fixing blockies display issues --- ui/app/components/identicon.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'ui/app/components/identicon.js') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 3e2349dbe..7a3bd5394 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -67,10 +67,11 @@ IdenticonComponent.prototype.componentDidMount = function () { // eslint-disable-next-line react/no-find-dom-node var container = findDOMNode(this) + const diameter = props.diameter || this.defaultDiameter + if (useBlockie) { _generateBlockie(container, address) } else { - const diameter = props.diameter || this.defaultDiameter _generateJazzicon(container, address, diameter) } } @@ -91,18 +92,21 @@ IdenticonComponent.prototype.componentDidUpdate = function () { container.removeChild(children[i]) } + const diameter = props.diameter || this.defaultDiameter + if (useBlockie) { - _generateBlockie(container, address) + _generateBlockie(container, address, diameter) } else { - const diameter = props.diameter || this.defaultDiameter _generateJazzicon(container, address, diameter) } } } -function _generateBlockie(container, address) { +function _generateBlockie(container, address, diameter) { const img = new Image() img.src = toDataUrl(address) + const dia = !diameter || diameter < 50 ? 50 : diameter + img.height, img.width = dia * 1.25 container.appendChild(img) } -- cgit v1.2.3 From 75ef848196646e060703764e97656ab3abd8c023 Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Sat, 25 Nov 2017 15:47:34 -0700 Subject: making eslint happy --- ui/app/components/identicon.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'ui/app/components/identicon.js') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 7a3bd5394..5b3786992 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -20,7 +20,7 @@ function IdenticonComponent () { function mapStateToProps (state) { return { - useBlockie: state.metamask.useBlockie + useBlockie: state.metamask.useBlockie, } } @@ -102,15 +102,16 @@ IdenticonComponent.prototype.componentDidUpdate = function () { } } -function _generateBlockie(container, address, diameter) { +function _generateBlockie (container, address, diameter) { const img = new Image() img.src = toDataUrl(address) const dia = !diameter || diameter < 50 ? 50 : diameter - img.height, img.width = dia * 1.25 + img.height = dia * 1.25 + img.width = dia * 1.25 container.appendChild(img) } -function _generateJazzicon(container, address, diameter) { +function _generateJazzicon (container, address, diameter) { const img = iconFactory.iconForAddress(address, diameter) container.appendChild(img) } -- cgit v1.2.3 From a34362b7765f48d24375c9953fa7c49cf3306491 Mon Sep 17 00:00:00 2001 From: Jason Clark Date: Mon, 27 Nov 2017 08:11:48 -0700 Subject: Fixes changes requested in pullrequestreview-79088534 --- ui/app/components/identicon.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/identicon.js') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 5b3786992..ddd7e65f3 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -33,7 +33,7 @@ IdenticonComponent.prototype.render = function () { ? ( h('div', { className: `${className} identicon`, - key: useBlockie ? 'blockie' : 'identicon-' + address, + key: 'identicon-' + address, style: { display: 'flex', alignItems: 'center', @@ -70,7 +70,7 @@ IdenticonComponent.prototype.componentDidMount = function () { const diameter = props.diameter || this.defaultDiameter if (useBlockie) { - _generateBlockie(container, address) + _generateBlockie(container, address, diameter) } else { _generateJazzicon(container, address, diameter) } -- cgit v1.2.3 From f131468353aa518b8fc178cd591bfc7ab5bdc32c Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Tue, 28 Nov 2017 13:37:45 -0600 Subject: Remove useBlockie in props for render Removed unused useBlock for Lint validation. --- ui/app/components/identicon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/identicon.js') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index ddd7e65f3..b803b7ceb 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -26,7 +26,7 @@ function mapStateToProps (state) { IdenticonComponent.prototype.render = function () { var props = this.props - const { className = '', address, useBlockie } = props + const { className = '', address } = props var diameter = props.diameter || this.defaultDiameter return address -- cgit v1.2.3