aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFrankie <frankie.diamond@gmail.com>2016-07-22 04:41:10 +0800
committerDan Finlay <somniac@me.com>2016-07-22 04:41:10 +0800
commitfcd523abe4c5e8c4da7f176b2fc15578903384b7 (patch)
tree9118133325c282d01f49bc717dacabfd824aa762
parent6658bea8d444281491718f8eee7bc3ae42f91b69 (diff)
downloadtangerine-wallet-browser-fcd523abe4c5e8c4da7f176b2fc15578903384b7.tar
tangerine-wallet-browser-fcd523abe4c5e8c4da7f176b2fc15578903384b7.tar.gz
tangerine-wallet-browser-fcd523abe4c5e8c4da7f176b2fc15578903384b7.tar.bz2
tangerine-wallet-browser-fcd523abe4c5e8c4da7f176b2fc15578903384b7.tar.lz
tangerine-wallet-browser-fcd523abe4c5e8c4da7f176b2fc15578903384b7.tar.xz
tangerine-wallet-browser-fcd523abe4c5e8c4da7f176b2fc15578903384b7.tar.zst
tangerine-wallet-browser-fcd523abe4c5e8c4da7f176b2fc15578903384b7.zip
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
-rw-r--r--CHANGELOG.md2
-rw-r--r--app/scripts/lib/config-manager.js10
-rw-r--r--app/scripts/lib/idStore.js3
-rw-r--r--app/scripts/metamask-controller.js28
-rw-r--r--ui/app/account-detail.js14
-rw-r--r--ui/app/actions.js35
-rw-r--r--ui/app/app.js4
-rw-r--r--ui/app/css/index.css6
-rw-r--r--ui/app/eth-store-warning.js89
-rw-r--r--ui/app/reducers/app.js18
-rw-r--r--ui/app/reducers/metamask.js5
11 files changed, 211 insertions, 3 deletions
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,
}
}
@@ -171,6 +172,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: {
marginBottom: '20px',
@@ -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,