Default Privacy Mode to ON, allow force sharing address (#6904)

6 files changed, 233 insertions, 1 deletions

diff --git a/ui/app/components/app/home-notification/home-notification.component.js b/ui/app/components/app/home-notification/home-notification.component.js
new file mode 100644
index 000000000..cc46eb53a
--- /dev/null
+++ b/ui/app/components/app/home-notification/home-notification.component.js
@@ -0,0 +1,110 @@
+import React, { PureComponent } from 'react'
+import {Tooltip as ReactTippy} from 'react-tippy'
+import PropTypes from 'prop-types'
+import Button from '../../ui/button'
+
+export default class HomeNotification extends PureComponent {
+  static contextTypes = {
+    metricsEvent: PropTypes.func,
+  }
+
+  static defaultProps = {
+    onAccept: null,
+    ignoreText: null,
+    onIgnore: null,
+    infoText: null,
+  }
+
+  static propTypes = {
+    acceptText: PropTypes.string.isRequired,
+    onAccept: PropTypes.func,
+    ignoreText: PropTypes.string,
+    onIgnore: PropTypes.func,
+    descriptionText: PropTypes.string.isRequired,
+    infoText: PropTypes.string,
+  }
+
+  handleAccept = () => {
+    this.props.onAccept()
+  }
+
+  handleIgnore = () => {
+    this.props.onIgnore()
+  }
+
+  render () {
+    const { descriptionText, acceptText, onAccept, ignoreText, onIgnore, infoText } = this.props
+
+    return (
+      <div className="home-notification">
+        <div className="home-notification__header">
+          <div className="home-notification__header-container">
+            <img
+              className="home-notification__icon"
+              alt=""
+              src="images/icons/connect.svg"
+            />
+            <div className="home-notification__text">
+              { descriptionText }
+            </div>
+          </div>
+          {
+            infoText ? (
+              <ReactTippy
+                style={{
+                  display: 'flex',
+                }}
+                html={(
+                  <p className="home-notification-tooltip__content">
+                    {infoText}
+                  </p>
+                )}
+                offset={-36}
+                distance={36}
+                animation="none"
+                position="top"
+                arrow
+                theme="info"
+              >
+                <img
+                  alt=""
+                  src="images/icons/info.svg"
+                />
+              </ReactTippy>
+            ) : (
+              null
+            )
+          }
+        </div>
+        <div className="home-notification__buttons">
+          {
+            (onAccept && acceptText) ? (
+              <Button
+                type="primary"
+                className="home-notification__accept-button"
+                onClick={this.handleAccept}
+              >
+                { acceptText }
+              </Button>
+            ) : (
+              null
+            )
+          }
+          {
+            (onIgnore && ignoreText) ? (
+              <Button
+                type="secondary"
+                className="home-notification__ignore-button"
+                onClick={this.handleIgnore}
+              >
+                { ignoreText }
+              </Button>
+            ) : (
+              null
+            )
+          }
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/home-notification/index.js b/ui/app/components/app/home-notification/index.js
new file mode 100644
index 000000000..918a35be2
--- /dev/null
+++ b/ui/app/components/app/home-notification/index.js
@@ -0,0 +1 @@
+export { default } from './home-notification.component'
diff --git a/ui/app/components/app/home-notification/index.scss b/ui/app/components/app/home-notification/index.scss
new file mode 100644
index 000000000..9cc868d46
--- /dev/null
+++ b/ui/app/components/app/home-notification/index.scss
@@ -0,0 +1,106 @@
+.tippy-tooltip.info-theme {
+  background: rgba(36, 41, 46, 0.9);
+  color: $white;
+  border-radius: 8px;
+}
+
+.home-notification {
+  background: rgba(36, 41, 46, 0.9);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  height: 116px;
+  padding: 16px;
+  margin: 8px;
+
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+
+  &__header-container {
+    display: flex;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__text {
+    font-family: Roboto, 'sans-serif';
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    color: $white;
+    margin-left: 10px;
+    margin-right: 8px;
+  }
+
+  .fa-info-circle {
+    color: #6A737D;
+  }
+
+  &__ignore-button {
+    border: 2px solid #6A737D;
+    box-sizing: border-box;
+    border-radius: 6px;
+    color: $white;
+    background-color: inherit;
+    height: 34px;
+    width: 155px;
+    padding: 0;
+
+    &:hover {
+      border-color: #6A737D;
+      background-color: #6A737D;
+    }
+
+    &:active {
+      background-color: #141618;
+    }
+  }
+
+  &__accept-button {
+    border: 2px solid #6A737D;
+    box-sizing: border-box;
+    border-radius: 6px;
+    color: $white;
+    background-color: inherit;
+    height: 34px;
+    width: 155px;
+    padding: 0;
+
+    &:hover {
+      border-color: #6A737D;
+      background-color: #6A737D;
+    }
+
+    &:active {
+      background-color: #141618;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+  }
+}
+
+.home-notification-tooltip {
+  &__tooltip-container {
+    display: flex;
+  }
+
+  &__content {
+    font-family: Roboto, 'sans-serif';
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    color: $white;
+    text-align: left;
+    display: inline-block;
+    width: 200px;
+  }
+}
diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss
index 1236f0c38..9b7da8c2e 100644
--- a/ui/app/components/app/index.scss
+++ b/ui/app/components/app/index.scss
@@ -79,3 +79,5 @@
 @import 'gas-customization/gas-price-button-group/index';
 
 @import '../ui/toggle-button/index';
+
+@import 'home-notification/index';
diff --git a/ui/app/components/app/transaction-list/transaction-list.component.js b/ui/app/components/app/transaction-list/transaction-list.component.js
index 3c096e3fd..157e7200b 100644
--- a/ui/app/components/app/transaction-list/transaction-list.component.js
+++ b/ui/app/components/app/transaction-list/transaction-list.component.js
@@ -10,11 +10,13 @@ export default class TransactionList extends PureComponent {
   }
 
   static defaultProps = {
+    children: null,
     pendingTransactions: [],
     completedTransactions: [],
   }
 
   static propTypes = {
+    children: PropTypes.node,
     pendingTransactions: PropTypes.array,
     completedTransactions: PropTypes.array,
     selectedToken: PropTypes.object,
@@ -120,6 +122,7 @@ export default class TransactionList extends PureComponent {
     return (
       <div className="transaction-list">
         { this.renderTransactions() }
+        { this.props.children }
       </div>
     )
   }
diff --git a/ui/app/components/app/transaction-view/transaction-view.component.js b/ui/app/components/app/transaction-view/transaction-view.component.js
index 7014ca173..fb2c2145c 100644
--- a/ui/app/components/app/transaction-view/transaction-view.component.js
+++ b/ui/app/components/app/transaction-view/transaction-view.component.js
@@ -10,6 +10,14 @@ export default class TransactionView extends PureComponent {
     t: PropTypes.func,
   }
 
+  static propTypes = {
+    children: PropTypes.node,
+  }
+
+  static defaultProps = {
+    children: null,
+  }
+
   render () {
     return (
       <div className="transaction-view">
@@ -20,7 +28,9 @@ export default class TransactionView extends PureComponent {
         <div className="transaction-view__balance-wrapper">
           <TransactionViewBalance />
         </div>
-        <TransactionList />
+        <TransactionList>
+          { this.props.children }
+        </TransactionList>
       </div>
     )
   }