3 files changed, 91 insertions, 0 deletions
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js b/ui/app/components/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
new file mode 100644
index 000000000..e6fe8f82c
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {
+  ENVIRONMENT_TYPE_POPUP,
+  ENVIRONMENT_TYPE_NOTIFICATION,
+} from '../../../../../app/scripts/lib/enums'
+import NetworkDisplay from '../../network-display'
+
+export default class ConfirmPageContainer extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    showEdit: PropTypes.bool,
+    onEdit: PropTypes.func,
+    children: PropTypes.node,
+  }
+
+  renderTop () {
+    const { onEdit, showEdit } = this.props
+    const windowType = window.METAMASK_UI_TYPE
+    const isFullScreen = windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
+      windowType !== ENVIRONMENT_TYPE_POPUP
+
+    if (!showEdit && isFullScreen) {
+      return null
+    }
+
+    return (
+      <div className="confirm-page-container-header__row">
+        <div
+          className="confirm-page-container-header__back-button-container"
+          style={{
+            visibility: showEdit ? 'initial' : 'hidden',
+          }}
+        >
+          <img
+            src="/images/caret-left.svg"
+          />
+          <span
+            className="confirm-page-container-header__back-button"
+            onClick={() => onEdit()}
+          >
+            { this.context.t('edit') }
+          </span>
+        </div>
+        { !isFullScreen && <NetworkDisplay /> }
+      </div>
+    )
+  }
+
+  render () {
+    const { children } = this.props
+
+    return (
+      <div className="confirm-page-container-header">
+        { this.renderTop() }
+        { children }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-header/index.js b/ui/app/components/confirm-page-container/confirm-page-container-header/index.js
new file mode 100644
index 000000000..71feb6931
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-header/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-page-container-header.component'
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss
new file mode 100644
index 000000000..43e1e4427
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss
@@ -0,0 +1,27 @@
+.confirm-page-container-header {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid $geyser;
+    padding: 13px 13px 13px 24px;
+    flex: 0 0 auto;
+  }
+
+  &__back-button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__back-button {
+    color: #2f9ae0;
+    font-size: 1rem;
+    cursor: pointer;
+    font-weight: 400;
+    padding-left: 5px;
+  }
+}