diff options
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | ui/app/components/blockies/blockies-component.js | 30 | ||||
| -rw-r--r-- | ui/app/components/identicon.js | 41 |
3 files changed, 57 insertions, 18 deletions
diff --git a/package.json b/package.json index 643e7c9a3..ea1489086 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,6 @@ "babel-runtime": "^6.23.0", "bignumber.js": "^4.1.0", "bip39": "^2.2.0", - "blockies": "0.0.2", "bluebird": "^3.5.0", "bn.js": "^4.11.7", "boron": "^0.2.3", @@ -87,6 +86,7 @@ "eth-sig-util": "^1.4.0", "eth-simple-keyring": "^1.2.0", "eth-token-tracker": "^1.1.4", + "ethereum-blockies": "^0.1.1", "ethereumjs-abi": "^0.6.4", "ethereumjs-tx": "^1.3.0", "ethereumjs-util": "github:ethereumjs/ethereumjs-util#ac5d0908536b447083ea422b435da27f26615de9", @@ -146,9 +146,7 @@ "react-redux": "^5.0.5", "react-select": "^1.0.0", "react-simple-file-input": "^2.0.0", - "react-toggle": "^4.0.2", "react-toggle-button": "^2.2.0", - "react-toggle-switch": "^3.0.3", "react-tooltip-component": "^0.3.0", "react-transition-group": "^2.2.1", "react-trigger-change": "^1.0.2", diff --git a/ui/app/components/blockies/blockies-component.js b/ui/app/components/blockies/blockies-component.js new file mode 100644 index 000000000..d6defda16 --- /dev/null +++ b/ui/app/components/blockies/blockies-component.js @@ -0,0 +1,30 @@ +const Component = require('react').Component +const createElement = require('react').createElement +const blockies = require("ethereum-blockies"); + +class BlockiesIdenticon extends Component { + constructor(props) { + super(props); + } + getOpts () { + return { + seed: this.props.seed || "foo", + color: this.props.color || "#dfe", + bgcolor: this.props.bgcolor || "#a71", + size: this.props.size || 15, + scale: this.props.scale || 3, + spotcolor: this.props.spotcolor || "#000" + }; + } + componentDidMount() { + this.draw(); + } + draw() { + blockies.render(this.getOpts(), this.canvas); + } + render() { + return createElement("canvas", {ref: canvas => this.canvas = canvas}); + } +} + +module.exports = BlockiesIdenticon; 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', { |