3 files changed, 37 insertions, 0 deletions
diff --git a/ui/app/pages/confirm-approve/confirm-approve.component.js b/ui/app/pages/confirm-approve/confirm-approve.component.js
new file mode 100644
index 000000000..b71eaa1d4
--- /dev/null
+++ b/ui/app/pages/confirm-approve/confirm-approve.component.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ConfirmTokenTransactionBase from '../confirm-token-transaction-base'
+
+export default class ConfirmApprove extends Component {
+  static propTypes = {
+    tokenAmount: PropTypes.number,
+    tokenSymbol: PropTypes.string,
+  }
+
+  render () {
+    const { tokenAmount, tokenSymbol } = this.props
+
+    return (
+      <ConfirmTokenTransactionBase
+        tokenAmount={tokenAmount}
+        warning={`By approving this action, you grant permission for this contract to spend up to ${tokenAmount} of your ${tokenSymbol}.`}
+      />
+    )
+  }
+}
diff --git a/ui/app/pages/confirm-approve/confirm-approve.container.js b/ui/app/pages/confirm-approve/confirm-approve.container.js
new file mode 100644
index 000000000..5f8bb8f0b
--- /dev/null
+++ b/ui/app/pages/confirm-approve/confirm-approve.container.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux'
+import ConfirmApprove from './confirm-approve.component'
+import { approveTokenAmountAndToAddressSelector } from '../../selectors/confirm-transaction'
+
+const mapStateToProps = state => {
+  const { confirmTransaction: { tokenProps: { tokenSymbol } = {} } } = state
+  const { tokenAmount } = approveTokenAmountAndToAddressSelector(state)
+
+  return {
+    tokenAmount,
+    tokenSymbol,
+  }
+}
+
+export default connect(mapStateToProps)(ConfirmApprove)
diff --git a/ui/app/pages/confirm-approve/index.js b/ui/app/pages/confirm-approve/index.js
new file mode 100644
index 000000000..791297be7
--- /dev/null
+++ b/ui/app/pages/confirm-approve/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-approve.container'