EIP-1102: updated implementation

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)