diff options
Diffstat (limited to 'old-ui')
| -rw-r--r-- | old-ui/app/app.js | 10 | ||||
| -rw-r--r-- | old-ui/app/config.js | 25 | ||||
| -rw-r--r-- | old-ui/app/provider-approval.js | 64 |
3 files changed, 98 insertions, 1 deletions
diff --git a/old-ui/app/app.js b/old-ui/app/app.js index f5e03d4f6..2d364ef6f 100644 --- a/old-ui/app/app.js +++ b/old-ui/app/app.js @@ -33,6 +33,7 @@ const BuyView = require('./components/buy-button-subview') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') +const ProviderApproval = require('./provider-approval') module.exports = connect(mapStateToProps)(App) @@ -49,6 +50,7 @@ function mapStateToProps (state) { noActiveNotices, seedWords, featureFlags, + providerRequests, } = state.metamask const selected = address || Object.keys(accounts)[0] @@ -75,6 +77,7 @@ function mapStateToProps (state) { lostAccounts: state.metamask.lostAccounts, frequentRpcListDetail: state.metamask.frequentRpcListDetail || [], featureFlags, + providerRequests, suggestedTokens: state.metamask.suggestedTokens, // state needed to get account dropdown temporarily rendering from app bar @@ -147,7 +150,7 @@ App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, App.prototype.renderPrimary = function () { log.debug('rendering primary') var props = this.props - const {isMascara, isOnboarding} = props + const {isMascara, isOnboarding, providerRequests} = props if (isMascara && isOnboarding) { return h(MascaraFirstTime) @@ -215,6 +218,11 @@ App.prototype.renderPrimary = function () { return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) } + if (providerRequests && providerRequests.length > 0) { + log.debug('rendering provider API approval screen') + return h(ProviderApproval, { origin: providerRequests[0].origin }) + } + // show current view switch (props.currentView.name) { diff --git a/old-ui/app/config.js b/old-ui/app/config.js index 7a93887a5..999b556c6 100644 --- a/old-ui/app/config.js +++ b/old-ui/app/config.js @@ -205,6 +205,31 @@ ConfigScreen.prototype.render = function () { marginTop: '20px', }, }, [ + h('p', { + style: { + fontFamily: 'Montserrat Light', + fontSize: '13px', + }, + }, 'Clear approved website data so all sites must request approval again.'), + h('br'), + h('button', { + style: { + alignSelf: 'center', + }, + onClick (event) { + event.preventDefault() + state.dispatch(actions.clearApprovedOrigins()) + }, + }, 'Clear approval data'), + ]), + + h('hr.horizontal-line'), + + h('div', { + style: { + marginTop: '20px', + }, + }, [ h('button', { style: { alignSelf: 'center', diff --git a/old-ui/app/provider-approval.js b/old-ui/app/provider-approval.js new file mode 100644 index 000000000..c4c7ff64d --- /dev/null +++ b/old-ui/app/provider-approval.js @@ -0,0 +1,64 @@ +import PropTypes from 'prop-types' +import React, { Component } from 'react' +import { approveProviderRequest, rejectProviderRequest } from '../../ui/app/actions' +import { connect } from 'react-redux' +class ProviderApproval extends Component { + render () { + const { approveProviderRequest, origin, rejectProviderRequest } = this.props + return ( + <div className="flex-column flex-grow"> + <style dangerouslySetInnerHTML={{__html: ` + .provider_approval_actions { + display: flex; + justify-content: flex-end; + margin: 14px 25px; + } + .provider_approval_actions button { + margin-left: 10px; + text-transform: uppercase; + } + .provider_approval_content { + padding: 0 25px; + } + .provider_approval_origin { + font-weight: bold; + margin: 14px 0; + } + `}} /> + <div className="section-title flex-row flex-center"> + <i + className="fa fa-arrow-left fa-lg cursor-pointer" + onClick={() => { rejectProviderRequest(origin) }} /> + <h2 className="page-subtitle">Web3 API Request</h2> + </div> + <div className="provider_approval_content"> + {"The domain listed below is requesting access to the Ethereum blockchain and to view your current account. Always double check that you're on the correct site before approving access."} + <div className="provider_approval_origin">{origin}</div> + </div> + <div className="provider_approval_actions"> + <button + className="btn-green" + onClick={() => { approveProviderRequest(origin) }}>APPROVE</button> + <button + className="cancel btn-red" + onClick={() => { rejectProviderRequest(origin) }}>REJECT</button> + </div> + </div> + ) + } +} + +ProviderApproval.propTypes = { + approveProviderRequest: PropTypes.func, + origin: PropTypes.string, + rejectProviderRequest: PropTypes.func, +} + +function mapDispatchToProps (dispatch) { + return { + approveProviderRequest: origin => dispatch(approveProviderRequest(origin)), + rejectProviderRequest: origin => dispatch(rejectProviderRequest(origin)), + } +} + +module.exports = connect(null, mapDispatchToProps)(ProviderApproval) |