aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/account-panel.js93
-rw-r--r--ui/app/components/mascot.js65
2 files changed, 158 insertions, 0 deletions
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
new file mode 100644
index 000000000..4e433b87d
--- /dev/null
+++ b/ui/app/components/account-panel.js
@@ -0,0 +1,93 @@
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const addressSummary = require('../util').addressSummary
+const formatBalance = require('../util').formatBalance
+
+module.exports = AccountPanel
+
+
+inherits(AccountPanel, Component)
+function AccountPanel() {
+ Component.call(this)
+}
+
+AccountPanel.prototype.render = function() {
+ var state = this.props
+ var identity = state.identity || {}
+ var account = state.account || {}
+ var isFauceting = state.isFauceting
+
+ return (
+
+ h('.identity-panel.flex-row.flex-space-between'+(state.isSelected?'.selected':''), {
+ style: {
+ flex: '1 0 auto',
+ },
+ onClick: state.onSelect && state.onSelect.bind(null, identity.address),
+ }, [
+
+ // account identicon
+ h('.identicon-wrapper.flex-column.select-none', [
+ h('.identicon', {
+ style: { backgroundImage: 'url("https://ipfs.io/ipfs/'+identity.img+'")' }
+ }),
+ h('span.font-small', identity.name),
+ ]),
+
+ // account address, balance
+ h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+ h('.flex-row.flex-space-between', [
+ h('label.font-small', 'ADDRESS'),
+ h('span.font-small', addressSummary(identity.address)),
+ ]),
+
+ balanceOrFaucetingIndication(account, isFauceting),
+
+ // outlet for inserting additional stuff
+ state.children,
+
+ ]),
+
+ // navigate to account detail
+ !state.onShowDetail ? null :
+ h('.arrow-right.cursor-pointer', {
+ onClick: state.onShowDetail && state.onShowDetail.bind(null, identity.address),
+ }, [
+ h('i.fa.fa-chevron-right.fa-lg'),
+ ]),
+ ])
+ )
+}
+
+function balanceOrFaucetingIndication(account, isFauceting) {
+
+ // Temporarily deactivating isFauceting indication
+ // because it shows fauceting for empty restored accounts.
+ if (/*isFauceting*/ false) {
+
+ return h('.flex-row.flex-space-between', [
+ h('span.font-small', {
+ }, [
+ 'Account is auto-funding,',
+ h('br'),
+ 'please wait.'
+ ]),
+ ])
+
+ } else {
+
+ return h('.flex-row.flex-space-between', [
+ h('label.font-small', 'BALANCE'),
+ h('span.font-small', {
+ style: {
+ overflowX: 'hidden',
+ maxWidth: '136px',
+ }
+ }, formatBalance(account.balance)),
+ ])
+
+ }
+}
diff --git a/ui/app/components/mascot.js b/ui/app/components/mascot.js
new file mode 100644
index 000000000..e043caca1
--- /dev/null
+++ b/ui/app/components/mascot.js
@@ -0,0 +1,65 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const metamaskLogo = require('metamask-logo')
+const getCaretCoordinates = require('textarea-caret')
+const debounce = require('debounce')
+
+module.exports = Mascot
+
+
+inherits(Mascot, Component)
+function Mascot() {
+ Component.call(this)
+ this.logo = metamaskLogo({
+ followMouse: true,
+ pxNotRatio: true,
+ width: 200,
+ height: 200,
+ })
+ if (!this.logo) return
+ this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
+ this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
+}
+
+
+Mascot.prototype.render = function() {
+ // this is a bit hacky
+ // the event emitter is on `this.props`
+ // and we dont get that until render
+ this.handleAnimationEvents()
+
+ return (
+
+ h('#metamask-mascot-container')
+
+ )
+}
+
+Mascot.prototype.componentDidMount = function() {
+ if (!this.logo) return
+ var targetDivId = 'metamask-mascot-container'
+ var container = document.getElementById(targetDivId)
+ container.appendChild(this.logo.canvas)
+}
+
+Mascot.prototype.componentWillUnmount = function() {
+ if (!this.logo) return
+ this.logo.canvas.remove()
+}
+
+Mascot.prototype.handleAnimationEvents = function(){
+ if (!this.logo) return
+ // only setup listeners once
+ if (this.animations) return
+ this.animations = this.props.animationEventEmitter
+ this.animations.on('point', this.lookAt.bind(this))
+ this.animations.on('setFollowMouse', this.logo.setFollowMouse.bind(this.logo))
+}
+
+Mascot.prototype.lookAt = function(target){
+ if (!this.logo) return
+ this.unfollowMouse()
+ this.logo.lookAt(target)
+ this.refollowMouse()
+}