From fcd523abe4c5e8c4da7f176b2fc15578903384b7 Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 21 Jul 2016 13:41:10 -0700 Subject: Buy button (#474) * WIP: Buy button link * Add buy eth and the buy eth warning message * Add css * Move the opening of coinbase page to background and send to faucet if on test net * Create a Warning about storeing eth * Finish Buy button and Eth store warning screen * Add to CHANGELOG * fix frankies deletion and change chrome to extension --- CHANGELOG.md | 2 + app/scripts/lib/config-manager.js | 10 +++++ app/scripts/lib/idStore.js | 3 +- app/scripts/metamask-controller.js | 28 ++++++++++++ ui/app/account-detail.js | 14 +++++- ui/app/actions.js | 35 +++++++++++++++ ui/app/app.js | 4 ++ ui/app/css/index.css | 6 +++ ui/app/eth-store-warning.js | 89 ++++++++++++++++++++++++++++++++++++++ ui/app/reducers/app.js | 18 +++++++- ui/app/reducers/metamask.js | 5 +++ 11 files changed, 211 insertions(+), 3 deletions(-) create mode 100644 ui/app/eth-store-warning.js diff --git a/CHANGELOG.md b/CHANGELOG.md index d1939570c..98cdb1c0e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Current Master +- Added a Warning screen about storing ETH +- Add buy Button! - MetaMask now throws descriptive errors when apps try to use synchronous web3 methods. ## 2.6.2 2016-07-20 diff --git a/app/scripts/lib/config-manager.js b/app/scripts/lib/config-manager.js index caaae8a75..d7df5343b 100644 --- a/app/scripts/lib/config-manager.js +++ b/app/scripts/lib/config-manager.js @@ -270,3 +270,13 @@ ConfigManager.prototype.getConfirmed = function () { return ('isConfirmed' in data) && data.isConfirmed } +ConfigManager.prototype.setShouldntShowWarning = function (confirmed) { + var data = this.getData() + data.isEthConfirmed = confirmed + this.setData(data) +} + +ConfigManager.prototype.getShouldntShowWarning = function () { + var data = this.getData() + return ('isEthConfirmed' in data) && data.isEthConfirmed +} diff --git a/app/scripts/lib/idStore.js b/app/scripts/lib/idStore.js index 2c8e9108b..c6ac55a03 100644 --- a/app/scripts/lib/idStore.js +++ b/app/scripts/lib/idStore.js @@ -94,6 +94,7 @@ IdentityStore.prototype.getState = function () { isUnlocked: this._isUnlocked(), seedWords: seedWords, isConfirmed: configManager.getConfirmed(), + isEthConfirmed: configManager.getShouldntShowWarning(), unconfTxs: configManager.unconfirmedTxs(), transactions: configManager.getTxList(), unconfMsgs: messageManager.unconfirmedMsgs(), @@ -199,7 +200,7 @@ IdentityStore.prototype.addUnconfirmedTransaction = function (txParams, onTxDone time: time, status: 'unconfirmed', } - + console.log('addUnconfirmedTransaction:', txData) // keep the onTxDoneCb around for after approval/denial (requires user interaction) diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 17af4cc29..4f03ace8f 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -40,6 +40,7 @@ module.exports = class MetamaskController { setProviderType: this.setProviderType.bind(this), useEtherscanProvider: this.useEtherscanProvider.bind(this), agreeToDisclaimer: this.agreeToDisclaimer.bind(this), + agreeToEthWarning: this.agreeToEthWarning.bind(this), // forward directly to idStore createNewVault: idStore.createNewVault.bind(idStore), recoverFromSeed: idStore.recoverFromSeed.bind(idStore), @@ -56,6 +57,8 @@ module.exports = class MetamaskController { saveAccountLabel: idStore.saveAccountLabel.bind(idStore), tryPassword: idStore.tryPassword.bind(idStore), recoverSeed: idStore.recoverSeed.bind(idStore), + // coinbase + buyEth: this.buyEth.bind(this), } } @@ -237,6 +240,15 @@ module.exports = class MetamaskController { } } + agreeToEthWarning (cb) { + try { + this.configManager.setShouldntShowWarning(true) + cb() + } catch (e) { + cb(e) + } + } + // called from popup setRpcTarget (rpcTarget) { this.configManager.setRpcTarget(rpcTarget) @@ -254,6 +266,22 @@ module.exports = class MetamaskController { this.configManager.useEtherscanProvider() extension.runtime.reload() } + + buyEth (address, amount) { + if (!amount) amount = '5' + + var network = this.idStore._currentState.network + var url = `https://buy.coinbase.com/?code=9ec56d01-7e81-5017-930c-513daa27bb6a&amount=${amount}&address=${address}&crypto_currency=ETH` + + if (network === '2') { + url = 'https://testfaucet.metamask.io/' + } + + extension.tabs.create({ + url, + }) + } + } function noop () {} diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 6d50dbd71..b1b0495eb 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -28,6 +28,7 @@ function mapStateToProps (state) { network: state.metamask.network, unconfTxs: valuesFor(state.metamask.unconfTxs), unconfMsgs: valuesFor(state.metamask.unconfMsgs), + isEthWarningConfirmed: state.metamask.isEthConfirmed, } } @@ -170,6 +171,16 @@ AccountDetailScreen.prototype.render = function () { }, }), + h('button', { + onClick: () => props.dispatch(actions.buyEth(selected)), + style: { + marginBottom: '20px', + marginRight: '8px', + position: 'absolute', + left: '219px', + }, + }, 'BUY'), + h('button', { onClick: () => props.dispatch(actions.showSendPage()), style: { @@ -181,7 +192,7 @@ AccountDetailScreen.prototype.render = function () { ]), ]), - // subview (tx history, pk export confirm) + // subview (tx history, pk export confirm, buy eth warning) h(ReactCSSTransitionGroup, { className: 'css-transition-group', transitionName: 'main', @@ -239,3 +250,4 @@ AccountDetailScreen.prototype.transactionList = function () { AccountDetailScreen.prototype.requestAccountExport = function () { this.props.dispatch(actions.requestExportAccount()) } + diff --git a/ui/app/actions.js b/ui/app/actions.js index 3e0fe55c0..82a319907 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -66,6 +66,10 @@ var actions = { showPrivateKey: showPrivateKey, SAVE_ACCOUNT_LABEL: 'SAVE_ACCOUNT_LABEL', saveAccountLabel: saveAccountLabel, + AGREE_TO_ETH_WARNING: 'AGREE_TO_ETH_WARNING', + agreeToEthWarning: agreeToEthWarning, + SHOW_ETH_WARNING: 'SHOW_ETH_WARNING', + showEthWarning: showEthWarning, // tx conf screen COMPLETED_TX: 'COMPLETED_TX', TRANSACTION_ERROR: 'TRANSACTION_ERROR', @@ -106,6 +110,9 @@ var actions = { HIDE_LOADING: 'HIDE_LOADING_INDICATION', showLoadingIndication: showLoadingIndication, hideLoadingIndication: hideLoadingIndication, + // buy Eth with coinbase + BUY_ETH: 'BUY_ETH', + buyEth: buyEth, } module.exports = actions @@ -559,3 +566,31 @@ function showSendPage () { type: actions.SHOW_SEND_PAGE, } } + +function agreeToEthWarning () { + return (dispatch) => { + _accountManager.agreeToEthWarning((err) => { + if (err) { + return dispatch(actions.showEthWarning(err.message)) + } + dispatch({ + type: actions.AGREE_TO_ETH_WARNING, + }) + }) + } +} + +function showEthWarning () { + return { + type: actions.SHOW_ETH_WARNING, + } +} + +function buyEth (address, amount) { + return (dispatch) => { + _accountManager.buyEth(address, amount) + dispatch({ + type: actions.BUY_ETH, + }) + } +} diff --git a/ui/app/app.js b/ui/app/app.js index 536b871b3..a11d679f1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -27,6 +27,7 @@ const MenuDroppo = require('menu-droppo') const DropMenuItem = require('./components/drop-menu-item') const NetworkIndicator = require('./components/network') const Tooltip = require('./components/tooltip') +const EthStoreWarning = require('./eth-store-warning') module.exports = connect(mapStateToProps)(App) @@ -37,6 +38,7 @@ function mapStateToProps (state) { return { // state from plugin isConfirmed: state.metamask.isConfirmed, + isEthConfirmed: state.metamask.isEthConfirmed, isInitialized: state.metamask.isInitialized, isUnlocked: state.metamask.isUnlocked, currentView: state.appState.currentView, @@ -324,6 +326,8 @@ App.prototype.renderPrimary = function () { // show current view switch (props.currentView.name) { + case 'EthStoreWarning': + return h(EthStoreWarning, {key: 'ethWarning'}) case 'accounts': return h(AccountsScreen, {key: 'accounts'}) diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 3f52b6ed4..36430b5eb 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -463,3 +463,9 @@ input.large-input { display: inline-block; padding-left: 5px; } + +/* buy eth warning screen */ + +.eth-warning{ + transition: opacity 400ms ease-in, transform 400ms ease-in; +} diff --git a/ui/app/eth-store-warning.js b/ui/app/eth-store-warning.js new file mode 100644 index 000000000..4cc5da81c --- /dev/null +++ b/ui/app/eth-store-warning.js @@ -0,0 +1,89 @@ +const connect = require('react-redux').connect +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const actions = require('./actions') + +module.exports = connect(mapStateToProps)(EthStoreWarning) + +inherits(EthStoreWarning, Component) +function EthStoreWarning () { + Component.call(this) +} + +function mapStateToProps (state) { + return { + selectedAccount: state.metamask.selectedAccount, + } +} + +EthStoreWarning.prototype.render = function () { + + return ( + + h('.flex-column', { + key: 'ethWarning', + style: { + paddingTop: '25px', + marginRight: '30px', + marginLeft: '30px', + alignItems: 'center', + }, + }, [ + h('.warning', { + style: { + margin: '10px 10px 10px 10px', + }, + }, + `MetaMask is currently in beta - + exercise caution while handling + and storing your ether. + `), + + h('i.fa.fa-exclamation-triangle.fa-4', { + style: { + fontSize: '152px', + color: '#AEAEAE', + textAlign: 'center', + }, + }), + + h('.flex-row', { + style: { + marginTop: '25px', + marginBottom: '10px', + }, + }, [ + h('input', { + type: 'checkbox', + onChange: this.toggleShowWarning.bind(this, event), + }), + h('.warning', { + style: { + fontSize: '11px', + }, + + }, 'Dont show me this message again'), + ]), + h('.flex-row', { + style: { + width: '100%', + justifyContent: 'space-around', + }, + }, [ + h('button', { + onClick: this.toAccounts.bind(this), + }, + 'Continue to MetaMask'), + ]), + ]) + ) +} + +EthStoreWarning.prototype.toggleShowWarning = function (event) { + this.props.dispatch(actions.agreeToEthWarning()) +} + +EthStoreWarning.prototype.toAccounts = function () { + this.props.dispatch(actions.showAccountDetail(this.props.account)) +} diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 06afd0ae1..a9d6e4ff0 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -28,10 +28,13 @@ function reduceApp (state, action) { name: 'createVaultComplete', seedWords, } + var ethStoreWarning = { + name: 'EthStoreWarning', + } var appState = extend({ menuOpen: false, - currentView: seedWords ? seedConfView : defaultView, + currentView: seedWords ? seedConfView : !state.metamask.isEthConfirmed ? ethStoreWarning : defaultView, accountDetail: { subview: 'transactions', }, @@ -366,6 +369,17 @@ function reduceApp (state, action) { }, }) + case actions.SHOW_ETH_WARNING: + return extend(appState, { + transForward: true, + currentView: { + name: 'accountDetail', + context: appState.currentView.context, + }, + accountDetail: { + subview: 'buy-eth-warning', + }, + }) default: return appState } @@ -390,3 +404,5 @@ function indexForPending (state, txId) { }) return idx } + + diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index f3ef8eb11..8d4520fb1 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -31,6 +31,11 @@ function reduceMetamask (state, action) { isConfirmed: true, }) + case actions.AGREE_TO_ETH_WARNING: + return extend(metamaskState, { + isEthConfirmed: true, + }) + case actions.UNLOCK_METAMASK: return extend(metamaskState, { isUnlocked: true, -- cgit v1.2.3 From 0bbfedc2bf21d8c3eec17fef35e93a98a946469e Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Thu, 21 Jul 2016 16:50:51 -0700 Subject: Manifest fix for firefox-specific field (#475) * Remove firefox-only manifest.json line. * Changelog change. --- CHANGELOG.md | 1 + app/manifest.json | 5 ----- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 98cdb1c0e..d9aee6ac1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Added a Warning screen about storing ETH - Add buy Button! - MetaMask now throws descriptive errors when apps try to use synchronous web3 methods. +- Removed firefox-specific line in manifest. ## 2.6.2 2016-07-20 diff --git a/app/manifest.json b/app/manifest.json index 4cca79c72..2c5629f7a 100644 --- a/app/manifest.json +++ b/app/manifest.json @@ -37,11 +37,6 @@ "all_frames": false } ], - "applications": { - "gecko": { - "id": "MOZILLA_EXTENSION_ID" - } - }, "permissions": [ "notifications", "storage", -- cgit v1.2.3