diff options
author | Dan Finlay <dan@danfinlay.com> | 2016-05-11 14:07:01 +0800 |
---|---|---|
committer | Dan Finlay <dan@danfinlay.com> | 2016-05-11 14:07:01 +0800 |
commit | d9d442ed1f4dd1579deed95bedd1b077e828c972 (patch) | |
tree | 2cdad1636c486d8789dbfcd2fe80ce4657706c8f /ui/app/components/identicon.js | |
parent | 9c91da72f5ab67d06061c80be0f735d222d2f4dd (diff) | |
download | tangerine-wallet-browser-d9d442ed1f4dd1579deed95bedd1b077e828c972.tar.gz tangerine-wallet-browser-d9d442ed1f4dd1579deed95bedd1b077e828c972.tar.zst tangerine-wallet-browser-d9d442ed1f4dd1579deed95bedd1b077e828c972.zip |
Began adding jazzicons
Currently experiencing a few problems:
1. Tons of errors on app start. It's as if Jazzicon is getting called many times at start with some object as its diameter.
2. Weird visual glitches. When leaving a view with a jazzicon, it flashes off its border radius.
3. Messy transitions. Might want to just re-do the transitions. They just look awful, it's barely worthwhile.
Diffstat (limited to 'ui/app/components/identicon.js')
-rw-r--r-- | ui/app/components/identicon.js | 49 |
1 files changed, 49 insertions, 0 deletions
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 +} |