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.

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) && (

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

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;

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 && (

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}
       />
     )
   }