EIP-1102: updated implementation

7 files changed, 91 insertions, 0 deletions

diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js
index d3c71c4f6..7b64ebc4e 100644
--- a/ui/app/components/pages/home/home.component.js
+++ b/ui/app/components/pages/home/home.component.js
@@ -4,6 +4,8 @@ import Media from 'react-media'
 import { Redirect } from 'react-router-dom'
 import WalletView from '../../wallet-view'
 import TransactionView from '../../transaction-view'
+import ProviderApproval from '../provider-approval'
+
 import {
   INITIALIZE_BACKUP_PHRASE_ROUTE,
   RESTORE_VAULT_ROUTE,
@@ -21,6 +23,7 @@ export default class Home extends PureComponent {
     seedWords: PropTypes.string,
     suggestedTokens: PropTypes.object,
     unconfirmedTransactionsCount: PropTypes.number,
+    providerRequests: PropTypes.array,
   }
 
   componentDidMount () {
@@ -46,6 +49,7 @@ export default class Home extends PureComponent {
       lostAccounts,
       forgottenPassword,
       seedWords,
+      providerRequests,
     } = this.props
 
     // notices
@@ -62,6 +66,10 @@ export default class Home extends PureComponent {
       return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
     }
 
+    if (providerRequests && providerRequests.length > 0) {
+      return <ProviderApproval origin={providerRequests[0].origin} />
+    }
+
     return (
       <div className="main-container">
         <div className="account-and-transaction-details">
diff --git a/ui/app/components/pages/home/home.container.js b/ui/app/components/pages/home/home.container.js
index 58001df6b..bb8cf5e81 100644
--- a/ui/app/components/pages/home/home.container.js
+++ b/ui/app/components/pages/home/home.container.js
@@ -11,6 +11,7 @@ const mapStateToProps = state => {
     lostAccounts,
     seedWords,
     suggestedTokens,
+    providerRequests,
   } = metamask
   const { forgottenPassword } = appState
 
@@ -21,6 +22,7 @@ const mapStateToProps = state => {
     seedWords,
     suggestedTokens,
     unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
+    providerRequests,
   }
 }
 
diff --git a/ui/app/components/pages/provider-approval/index.js b/ui/app/components/pages/provider-approval/index.js
new file mode 100644
index 000000000..4162f3155
--- /dev/null
+++ b/ui/app/components/pages/provider-approval/index.js
@@ -0,0 +1 @@
+export { default } from './provider-approval.container'
diff --git a/ui/app/components/pages/provider-approval/provider-approval.component.js b/ui/app/components/pages/provider-approval/provider-approval.component.js
new file mode 100644
index 000000000..67e8bdd4c
--- /dev/null
+++ b/ui/app/components/pages/provider-approval/provider-approval.component.js
@@ -0,0 +1,35 @@
+import PageContainerContent from '../../page-container'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+export default class ProviderApproval extends Component {
+  static propTypes = {
+    approveProviderRequest: PropTypes.func,
+    origin: PropTypes.string,
+    rejectProviderRequest: PropTypes.func,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  render () {
+    const { approveProviderRequest, origin, rejectProviderRequest } = this.props
+    return (
+      <PageContainerContent
+        title={this.context.t('providerAPIRequest')}
+        subtitle={this.context.t('reviewProviderRequest')}
+        contentComponent={(
+          <div className="provider_approval_content">
+            {this.context.t('providerRequestInfo')}
+            <div className="provider_approval_origin">{origin}</div>
+          </div>
+        )}
+        submitText={this.context.t('approve')}
+        cancelText={this.context.t('reject')}
+        onSubmit={() => { approveProviderRequest(origin) }}
+        onCancel={() => { rejectProviderRequest(origin) }}
+        onClose={() => { rejectProviderRequest(origin) }} />
+    )
+  }
+}
diff --git a/ui/app/components/pages/provider-approval/provider-approval.container.js b/ui/app/components/pages/provider-approval/provider-approval.container.js
new file mode 100644
index 000000000..b223244a1
--- /dev/null
+++ b/ui/app/components/pages/provider-approval/provider-approval.container.js
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux'
+import ProviderApproval from './provider-approval.component'
+import { approveProviderRequest, rejectProviderRequest } from '../../../actions'
+
+function mapDispatchToProps (dispatch) {
+  return {
+    approveProviderRequest: origin => dispatch(approveProviderRequest(origin)),
+    rejectProviderRequest: origin => dispatch(rejectProviderRequest(origin)),
+  }
+}
+
+export default connect(null, mapDispatchToProps)(ProviderApproval)
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
index cd81491a8..21119086e 100644
--- a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
@@ -45,6 +45,7 @@ export default class SettingsTab extends PureComponent {
     displayWarning: PropTypes.func,
     revealSeedConfirmation: PropTypes.func,
     setFeatureFlagToBeta: PropTypes.func,
+    showClearApprovalModal: PropTypes.func,
     showResetAccountConfirmationModal: PropTypes.func,
     warning: PropTypes.string,
     history: PropTypes.object,
@@ -276,6 +277,36 @@ export default class SettingsTab extends PureComponent {
     )
   }
 
+  renderClearApproval () {
+    const { t } = this.context
+    const { showClearApprovalModal } = this.props
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('approvalData') }</span>
+          <span className="settings-page__content-description">
+            { t('approvalDataDescription') }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="secondary"
+              large
+              className="settings-tab__button--orange"
+              onClick={event => {
+                event.preventDefault()
+                showClearApprovalModal()
+              }}
+            >
+              { t('clearApprovalData') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   renderSeedWords () {
     const { t } = this.context
     const { history } = this.props
@@ -473,6 +504,7 @@ export default class SettingsTab extends PureComponent {
         { this.renderNewRpcUrl() }
         { this.renderStateLogs() }
         { this.renderSeedWords() }
+        { this.renderClearApproval() }
         { !isMascara && this.renderOldUI() }
         { this.renderResetAccount() }
         { this.renderBlockieOptIn() }
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
index f4110207e..2c0739a91 100644
--- a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
@@ -59,6 +59,7 @@ const mapDispatchToProps = dispatch => {
     setUseNativeCurrencyAsPrimaryCurrencyPreference: value => {
       return dispatch(setUseNativeCurrencyAsPrimaryCurrencyPreference(value))
     },
+    showClearApprovalModal: () => dispatch(showModal({ name: 'CLEAR_APPROVED_ORIGINS' })),
   }
 }