From c053294781ad4147194f8a4954007e0e52d9343d Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Thu, 28 Jan 2021 14:29:45 -0330
Subject: [PATCH] Add origin to transaction confirmation (#10296)

Fixes #5611

The origin that suggests a transaction is now shown on the transaction
confirmation page. If the transaction was initiated from within
MetaMask (e.g. via the 'Send' flow or swaps), no origin is shown.

This was based upon designs that were linked in the PR #9377. This is a
temporary measure until our newer transaction confirmation designs can
be implemented.
---
 .../confirm-page-container-content.component.js             | 3 +++
 .../confirm-page-container-summary.component.js             | 5 +++++
 .../confirm-page-container-summary/index.scss               | 6 ++++++
 .../confirm-page-container.component.js                     | 3 +++
 .../confirm-transaction-base.component.js                   | 2 ++
 5 files changed, 19 insertions(+)

diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
index affda4c12..d3542345e 100644
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
@@ -21,6 +21,7 @@ export default class ConfirmPageContainerContent extends Component {
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     titleComponent: PropTypes.node,
     warning: PropTypes.string,
+    origin: PropTypes.string.isRequired,
     // Footer
     onCancelAll: PropTypes.func,
     onCancel: PropTypes.func,
@@ -79,6 +80,7 @@ export default class ConfirmPageContainerContent extends Component {
       disabled,
       unapprovedTxCount,
       rejectNText,
+      origin,
     } = this.props
 
     return (
@@ -97,6 +99,7 @@ export default class ConfirmPageContainerContent extends Component {
           identiconAddress={identiconAddress}
           nonce={nonce}
           assetImage={assetImage}
+          origin={origin}
         />
         {this.renderContent()}
         {(errorKey || errorMessage) && (
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
index 94c3e4279..49efb86e5 100644
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
@@ -14,10 +14,14 @@ const ConfirmPageContainerSummary = (props) => {
     identiconAddress,
     nonce,
     assetImage,
+    origin,
   } = props
 
   return (
     <div className={classnames('confirm-page-container-summary', className)}>
+      {origin === 'metamask' ? null : (
+        <div className="confirm-page-container-summary__origin">{origin}</div>
+      )}
       <div className="confirm-page-container-summary__action-row">
         <div className="confirm-page-container-summary__action">{action}</div>
         {nonce && (
@@ -58,6 +62,7 @@ ConfirmPageContainerSummary.propTypes = {
   identiconAddress: PropTypes.string,
   nonce: PropTypes.string,
   assetImage: PropTypes.string,
+  origin: PropTypes.string.isRequired,
 }
 
 export default ConfirmPageContainerSummary
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
index 5ce8f708a..618763684 100644
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
@@ -4,6 +4,12 @@
   height: 133px;
   box-sizing: border-box;
 
+  &__origin {
+    @include H6;
+
+    padding-bottom: 10px;
+  }
+
   &__action-row {
     display: flex;
     justify-content: space-between;
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js
index 69f8fdc33..623b31102 100644
--- a/ui/app/components/app/confirm-page-container/confirm-page-container.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js
@@ -42,6 +42,7 @@ export default class ConfirmPageContainer extends Component {
     assetImage: PropTypes.string,
     warning: PropTypes.string,
     unapprovedTxCount: PropTypes.number,
+    origin: PropTypes.string.isRequired,
     // Navigation
     totalTx: PropTypes.number,
     positionOfCurrentTx: PropTypes.number,
@@ -101,6 +102,7 @@ export default class ConfirmPageContainer extends Component {
       requestsWaitingText,
       hideSenderToRecipient,
       showAccountInHeader,
+      origin,
     } = this.props
     const renderAssetImage =
       contentComponent || (!contentComponent && !identiconAddress)
@@ -160,6 +162,7 @@ export default class ConfirmPageContainer extends Component {
             disabled={disabled}
             unapprovedTxCount={unapprovedTxCount}
             rejectNText={this.context.t('rejectTxsN', [unapprovedTxCount])}
+            origin={origin}
           />
         )}
         {contentComponent && (
diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
index ec079c3da..eeec5a5cd 100644
--- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -669,6 +669,7 @@ export default class ConfirmTransactionBase extends Component {
       transactionCategory,
       hideSenderToRecipient,
       showAccountInHeader,
+      txData,
     } = this.props
     const { submitting, submitError, submitWarning } = this.state
 
@@ -736,6 +737,7 @@ export default class ConfirmTransactionBase extends Component {
         onCancel={() => this.handleCancel()}
         onSubmit={() => this.handleSubmit()}
         hideSenderToRecipient={hideSenderToRecipient}
+        origin={txData.origin}
       />
     )
   }