fix merge conflicts

8 files changed, 276 insertions, 0 deletions

diff --git a/ui/app/components/provider-page-container/index.js b/ui/app/components/provider-page-container/index.js
new file mode 100644
index 000000000..927c35940
--- /dev/null
+++ b/ui/app/components/provider-page-container/index.js
@@ -0,0 +1,3 @@
+export {default} from './provider-page-container.component'
+export {default as ProviderPageContainerContent} from './provider-page-container-content'
+export {default as ProviderPageContainerHeader} from './provider-page-container-header'
diff --git a/ui/app/components/provider-page-container/index.scss b/ui/app/components/provider-page-container/index.scss
new file mode 100644
index 000000000..8d35ac179
--- /dev/null
+++ b/ui/app/components/provider-page-container/index.scss
@@ -0,0 +1,121 @@
+.provider-approval-container {
+  display: flex;
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    border-bottom: 1px solid $geyser;
+    padding: 9px;
+  }
+
+  &__content {
+    display: flex;
+    overflow-y: auto;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+    color: #7C808E;
+
+    h1, h2 {
+      color: #4A4A4A;
+      display: flex;
+      justify-content: center;
+      text-align: center;
+    }
+
+    h2 {
+      font-size: 16px;
+      line-height: 18px;
+      padding: 20px;
+    }
+
+    h1 {
+      font-size: 22px;
+      line-height: 26px;
+      padding: 20px;
+    }
+
+    p {
+      padding: 0 40px;
+      text-align: center;
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    a, a:hover {
+      color: $dodger-blue;
+    }
+
+    .provider-approval-visual {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-evenly;
+      position: relative;
+      margin: 0 32px;
+
+      section {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+      }
+
+      h1 {
+        font-size: 14px;
+        line-height: 18px;
+        padding: 8px 0 0;
+      }
+
+      h2 {
+        font-size: 10px;
+        line-height: 14px;
+        padding: 0;
+        color: #A2A4AC;
+      }
+
+      &__check {
+        width: 40px;
+        height: 40px;
+        background: white url("/images/provider-approval-check.svg") no-repeat;
+        margin-top: 14px;
+      }
+
+      &__identicon {
+        width: 64px;
+        height: 64px;
+
+        &--default {
+          background-color: #777A87;
+          color: white;
+          width: 64px;
+          height: 64px;
+          border-radius: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: bold;
+        }
+      }
+
+      &:before {
+        border-top: 2px dashed #CDD1E4;
+        content: "";
+        margin: 0 auto;
+        position: absolute;
+        top: 32px;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        width: 65%;
+        z-index: -1;
+      }
+    }
+
+    .secure-badge {
+      display: flex;
+      justify-content: center;
+      padding: 25px;
+    }
+  }
+}
diff --git a/ui/app/components/provider-page-container/provider-page-container-content/index.js b/ui/app/components/provider-page-container/provider-page-container-content/index.js
new file mode 100644
index 000000000..73e491adc
--- /dev/null
+++ b/ui/app/components/provider-page-container/provider-page-container-content/index.js
@@ -0,0 +1 @@
+export {default} from './provider-page-container-content.container'
diff --git a/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.component.js b/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.component.js
new file mode 100644
index 000000000..268db613f
--- /dev/null
+++ b/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.component.js
@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
+import Identicon from '../../identicon'
+
+export default class ProviderPageContainerContent extends PureComponent {
+  static propTypes = {
+    origin: PropTypes.string.isRequired,
+    selectedIdentity: PropTypes.string.isRequired,
+    siteImage: PropTypes.string,
+    siteTitle: PropTypes.string.isRequired,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  renderConnectVisual = () => {
+    const { origin, selectedIdentity, siteImage, siteTitle } = this.props
+
+    return (
+      <div className="provider-approval-visual">
+        <section>
+          {siteImage ? (
+            <img
+              className="provider-approval-visual__identicon"
+              src={siteImage}
+            />
+          ) : (
+            <i className="provider-approval-visual__identicon--default">
+              {siteTitle.charAt(0).toUpperCase()}
+            </i>
+          )}
+          <h1>{siteTitle}</h1>
+          <h2>{origin}</h2>
+        </section>
+        <span className="provider-approval-visual__check" />
+        <section>
+          <Identicon
+            className="provider-approval-visual__identicon"
+            address={selectedIdentity.address}
+            diameter={64}
+          />
+          <h1>{selectedIdentity.name}</h1>
+        </section>
+      </div>
+    )
+  }
+
+  render () {
+    const { siteTitle } = this.props
+    const { t } = this.context
+
+    return (
+      <div className="provider-approval-container__content">
+        <section>
+          <h2>{t('connectRequest')}</h2>
+          {this.renderConnectVisual()}
+          <h1>{t('providerRequest', [siteTitle])}</h1>
+          <p>
+            {t('providerRequestInfo')}
+            <br/>
+            <a
+              href="https://medium.com/metamask/introducing-privacy-mode-42549d4870fa"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {t('learnMore')}.
+            </a>
+          </p>
+        </section>
+        <section className="secure-badge">
+          <img src="/images/mm-secure.svg" />
+        </section>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.container.js b/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.container.js
new file mode 100644
index 000000000..3ea1ce20e
--- /dev/null
+++ b/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import ProviderPageContainerContent from './provider-page-container-content.component'
+import { getSelectedIdentity } from '../../../selectors'
+
+const mapStateToProps = (state) => {
+  return {
+    selectedIdentity: getSelectedIdentity(state),
+  }
+}
+
+export default connect(mapStateToProps)(ProviderPageContainerContent)
diff --git a/ui/app/components/provider-page-container/provider-page-container-header/index.js b/ui/app/components/provider-page-container/provider-page-container-header/index.js
new file mode 100644
index 000000000..430627d3a
--- /dev/null
+++ b/ui/app/components/provider-page-container/provider-page-container-header/index.js
@@ -0,0 +1 @@
+export {default} from './provider-page-container-header.component'
diff --git a/ui/app/components/provider-page-container/provider-page-container-header/provider-page-container-header.component.js b/ui/app/components/provider-page-container/provider-page-container-header/provider-page-container-header.component.js
new file mode 100644
index 000000000..41bf6c3dd
--- /dev/null
+++ b/ui/app/components/provider-page-container/provider-page-container-header/provider-page-container-header.component.js
@@ -0,0 +1,12 @@
+import React, {PureComponent} from 'react'
+import NetworkDisplay from '../../network-display'
+
+export default class ProviderPageContainerHeader extends PureComponent {
+  render () {
+    return (
+      <div className="provider-approval-container__header">
+        <NetworkDisplay colored={false} />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/provider-page-container/provider-page-container.component.js b/ui/app/components/provider-page-container/provider-page-container.component.js
new file mode 100644
index 000000000..902733616
--- /dev/null
+++ b/ui/app/components/provider-page-container/provider-page-container.component.js
@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
+import { ProviderPageContainerContent, ProviderPageContainerHeader } from './'
+import { PageContainerFooter } from '../page-container'
+
+export default class ProviderPageContainer extends PureComponent {
+  static propTypes = {
+    approveProviderRequest: PropTypes.func.isRequired,
+    origin: PropTypes.string.isRequired,
+    rejectProviderRequest: PropTypes.func.isRequired,
+    siteImage: PropTypes.string,
+    siteTitle: PropTypes.string.isRequired,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  onCancel = () => {
+    const { origin, rejectProviderRequest } = this.props
+    rejectProviderRequest(origin)
+  }
+
+  onSubmit = () => {
+    const { approveProviderRequest, origin } = this.props
+    approveProviderRequest(origin)
+  }
+
+  render () {
+    const {origin, siteImage, siteTitle} = this.props
+
+    return (
+      <div className="page-container provider-approval-container">
+        <ProviderPageContainerHeader />
+        <ProviderPageContainerContent
+          origin={origin}
+          siteImage={siteImage}
+          siteTitle={siteTitle}
+        />
+        <PageContainerFooter
+          onCancel={() => this.onCancel()}
+          cancelText={this.context.t('cancel')}
+          onSubmit={() => this.onSubmit()}
+          submitText={this.context.t('connect')}
+          submitButtonType="confirm"
+        />
+      </div>
+    )
+  }
+}