4 files changed, 70 insertions, 0 deletions
diff --git a/ui/app/components/modals/clear-approved-origins/clear-approved-origins.component.js b/ui/app/components/modals/clear-approved-origins/clear-approved-origins.component.js
new file mode 100644
index 000000000..ceaa20a95
--- /dev/null
+++ b/ui/app/components/modals/clear-approved-origins/clear-approved-origins.component.js
@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Modal, { ModalContent } from '../../modal'
+
+export default class ClearApprovedOrigins extends PureComponent {
+  static propTypes = {
+    hideModal: PropTypes.func.isRequired,
+    clearApprovedOrigins: PropTypes.func.isRequired,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  handleClear = () => {
+    const { clearApprovedOrigins, hideModal } = this.props
+    clearApprovedOrigins()
+    hideModal()
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <Modal
+        onSubmit={this.handleClear}
+        onCancel={() => this.props.hideModal()}
+        submitText={t('ok')}
+        cancelText={t('nevermind')}
+        submitType="secondary"
+      >
+        <ModalContent
+          title={t('clearApprovalData')}
+          description={t('confirmClear')}
+        />
+      </Modal>
+    )
+  }
+}
diff --git a/ui/app/components/modals/clear-approved-origins/clear-approved-origins.container.js b/ui/app/components/modals/clear-approved-origins/clear-approved-origins.container.js
new file mode 100644
index 000000000..3a801a062
--- /dev/null
+++ b/ui/app/components/modals/clear-approved-origins/clear-approved-origins.container.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+import ClearApprovedOriginsComponent from './clear-approved-origins.component'
+import { clearApprovedOrigins } from '../../../actions'
+
+const mapDispatchToProps = dispatch => {
+  return {
+    clearApprovedOrigins: () => dispatch(clearApprovedOrigins()),
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(null, mapDispatchToProps)
+)(ClearApprovedOriginsComponent)
diff --git a/ui/app/components/modals/clear-approved-origins/index.js b/ui/app/components/modals/clear-approved-origins/index.js
new file mode 100644
index 000000000..b3e321995
--- /dev/null
+++ b/ui/app/components/modals/clear-approved-origins/index.js
@@ -0,0 +1 @@
+export { default } from './clear-approved-origins.container'
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 338229a28..5aff4f5e1 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -28,6 +28,7 @@ import ConfirmCustomizeGasModal from './customize-gas'
 import CancelTransaction from './cancel-transaction'
 import WelcomeBeta from './welcome-beta'
 import RejectTransactions from './reject-transactions'
+import ClearApprovedOrigins from './clear-approved-origins'
 
 const modalContainerBaseStyle = {
   transform: 'translate3d(-50%, 0, 0px)',
@@ -212,6 +213,19 @@ const MODALS = {
     },
   },
 
+  CLEAR_APPROVED_ORIGINS: {
+    contents: h(ClearApprovedOrigins),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
   OLD_UI_NOTIFICATION_MODAL: {
     contents: [
       h(NotifcationModal, {