diff options
Diffstat (limited to 'ui')
-rw-r--r-- | ui/app/app.js | 5 | ||||
-rw-r--r-- | ui/app/components/shapeshift-form.js | 15 | ||||
-rw-r--r-- | ui/app/conf-tx.js | 6 | ||||
-rw-r--r-- | ui/app/first-time/restore-vault.js | 17 | ||||
-rw-r--r-- | ui/app/reducers/app.js | 5 | ||||
-rw-r--r-- | ui/app/send.js | 19 | ||||
-rw-r--r-- | ui/lib/persistent-form.js | 57 |
7 files changed, 110 insertions, 14 deletions
diff --git a/ui/app/app.js b/ui/app/app.js index 7b47732c4..6dbfbb86b 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -98,6 +98,11 @@ App.prototype.render = function () { } App.prototype.renderAppBar = function () { + + if (window.METAMASK_UI_TYPE === 'notification') { + return null + } + const props = this.props const state = this.state || {} const isNetworkMenuOpen = state.isNetworkMenuOpen || false diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index b8650f7d5..58b7942c3 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -1,4 +1,4 @@ -const Component = require('react').Component +const PersistentForm = require('../../lib/persistent-form') const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect @@ -17,12 +17,15 @@ function mapStateToProps(state) { } } -inherits(ShapeshiftForm, Component) +inherits(ShapeshiftForm, PersistentForm) function ShapeshiftForm () { - Component.call(this) + PersistentForm.call(this) + this.persistentFormParentId = 'shapeshift-buy-form' } + ShapeshiftForm.prototype.render = function () { + return h(ReactCSSTransitionGroup, { className: 'css-transition-group', transitionName: 'main', @@ -66,6 +69,9 @@ ShapeshiftForm.prototype.renderMain = function () { h('input#fromCoin.buy-inputs.ex-coins', { type: 'text', list: 'coinList', + dataset: { + persistentFormId: 'input-coin', + }, style: { boxSizing: 'border-box', }, @@ -159,6 +165,9 @@ ShapeshiftForm.prototype.renderMain = function () { h('input#fromCoinAddress.buy-inputs', { type: 'text', placeholder: `Your ${coin} Refund Address`, + dataset: { + persistentFormId: 'refund-address', + }, style: { boxSizing: 'border-box', width: '278px', diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 43604e8cf..22d29383f 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -5,6 +5,7 @@ const h = require('react-hyperscript') const connect = require('react-redux').connect const actions = require('./actions') const txHelper = require('../lib/tx-helper') +const isPopupOrNotification = require('../../app/scripts/lib/is-popup-or-notification') const PendingTx = require('./components/pending-tx') const PendingMsg = require('./components/pending-msg') @@ -36,6 +37,7 @@ ConfirmTxScreen.prototype.render = function () { var unconfTxList = txHelper(unconfTxs, unconfMsgs) var index = state.index !== undefined ? state.index : 0 var txData = unconfTxList[index] || unconfTxList[0] || {} + var isNotification = isPopupOrNotification() === 'notification' return ( @@ -43,9 +45,9 @@ ConfirmTxScreen.prototype.render = function () { // subtitle and nav h('.section-title.flex-row.flex-center', [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { + !isNotification ? h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { onClick: this.goHome.bind(this), - }), + }) : null, h('h2.page-subtitle', 'Confirm Transaction'), ]), diff --git a/ui/app/first-time/restore-vault.js b/ui/app/first-time/restore-vault.js index 684781e50..4c1f21008 100644 --- a/ui/app/first-time/restore-vault.js +++ b/ui/app/first-time/restore-vault.js @@ -1,14 +1,14 @@ const inherits = require('util').inherits -const Component = require('react').Component +const PersistentForm = require('../../lib/persistent-form') const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('../actions') module.exports = connect(mapStateToProps)(RestoreVaultScreen) -inherits(RestoreVaultScreen, Component) +inherits(RestoreVaultScreen, PersistentForm) function RestoreVaultScreen () { - Component.call(this) + PersistentForm.call(this) } function mapStateToProps (state) { @@ -19,6 +19,8 @@ function mapStateToProps (state) { RestoreVaultScreen.prototype.render = function () { var state = this.props + this.persistentFormParentId = 'restore-vault-form' + return ( h('.initialize-screen.flex-column.flex-center.flex-grow', [ @@ -39,6 +41,9 @@ RestoreVaultScreen.prototype.render = function () { // wallet seed entry h('h3', 'Wallet Seed'), h('textarea.twelve-word-phrase.letter-spacey', { + dataset: { + persistentFormId: 'wallet-seed', + }, placeholder: 'Enter your secret twelve word phrase here to restore your vault.', }), @@ -47,6 +52,9 @@ RestoreVaultScreen.prototype.render = function () { type: 'password', id: 'password-box', placeholder: 'New Password (min 8 chars)', + dataset: { + persistentFormId: 'password', + }, style: { width: 260, marginTop: 12, @@ -59,6 +67,9 @@ RestoreVaultScreen.prototype.render = function () { id: 'password-box-confirm', placeholder: 'Confirm Password', onKeyPress: this.onMaybeCreate.bind(this), + dataset: { + persistentFormId: 'password-confirmation', + }, style: { width: 260, marginTop: 16, diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index f982cc0c8..bad11113a 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -1,6 +1,7 @@ const extend = require('xtend') const actions = require('../actions') const txHelper = require('../../lib/tx-helper') +const notification = require('../../../app/scripts/lib/notifications') module.exports = reduceApp @@ -271,6 +272,9 @@ function reduceApp (state, action) { warning: null, }) } else { + + notification.closePopup() + return extend(appState, { transForward: false, warning: null, @@ -536,4 +540,3 @@ function indexForPending (state, txId) { return idx } - diff --git a/ui/app/send.js b/ui/app/send.js index 06ea199f4..0cc3a032f 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -1,5 +1,5 @@ const inherits = require('util').inherits -const Component = require('react').Component +const PersistentForm = require('../lib/persistent-form') const h = require('react-hyperscript') const connect = require('react-redux').connect const Identicon = require('./components/identicon') @@ -29,12 +29,14 @@ function mapStateToProps (state) { return result } -inherits(SendTransactionScreen, Component) +inherits(SendTransactionScreen, PersistentForm) function SendTransactionScreen () { - Component.call(this) + PersistentForm.call(this) } SendTransactionScreen.prototype.render = function () { + this.persistentFormParentId = 'send-tx-form' + var state = this.props var address = state.address var account = state.account @@ -137,6 +139,9 @@ SendTransactionScreen.prototype.render = function () { h('input.large-input', { name: 'address', placeholder: 'Recipient Address', + dataset: { + persistentFormId: 'recipient-address', + }, }), ]), @@ -150,6 +155,9 @@ SendTransactionScreen.prototype.render = function () { style: { marginRight: 6, }, + dataset: { + persistentFormId: 'tx-amount', + }, }), h('button.primary', { @@ -185,11 +193,12 @@ SendTransactionScreen.prototype.render = function () { width: '100%', resize: 'none', }, + dataset: { + persistentFormId: 'tx-data', + }, }), ]), - ]) - ) } diff --git a/ui/lib/persistent-form.js b/ui/lib/persistent-form.js new file mode 100644 index 000000000..2fd7600a2 --- /dev/null +++ b/ui/lib/persistent-form.js @@ -0,0 +1,57 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const defaultKey = 'persistent-form-default' +const eventName = 'keyup' + +module.exports = PersistentForm + +function PersistentForm () { + Component.call(this) +} + +inherits(PersistentForm, Component) + +PersistentForm.prototype.componentDidMount = function () { + const fields = document.querySelectorAll('[data-persistent-formid]') + const store = this.getPersistentStore() + fields.forEach((field) => { + const key = field.getAttribute('data-persistent-formid') + const cached = store[key] + if (cached !== undefined) { + field.value = cached + } + + field.addEventListener(eventName, this.persistentFieldDidUpdate.bind(this)) + }) +} + +PersistentForm.prototype.getPersistentStore = function () { + let store = window.localStorage[this.persistentFormParentId || defaultKey] + if (store && store !== 'null') { + store = JSON.parse(store) + } else { + store = {} + } + return store +} + +PersistentForm.prototype.setPersistentStore = function (newStore) { + window.localStorage[this.persistentFormParentId || defaultKey] = JSON.stringify(newStore) +} + +PersistentForm.prototype.persistentFieldDidUpdate = function (event) { + const field = event.target + const store = this.getPersistentStore() + const key = field.getAttribute('data-persistent-formid') + const val = field.value + store[key] = val + this.setPersistentStore(store) +} + +PersistentForm.prototype.componentWillUnmount = function () { + const fields = document.querySelectorAll('[data-persistent-formid]') + fields.forEach((field) => { + field.removeEventListener(eventName, this.persistentFieldDidUpdate.bind(this)) + }) + this.setPersistentStore({}) +} |