From 52bac60a22ecf9d6b7fb21ea02b5dd4ce19847e8 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Wed, 28 Jul 2021 09:29:55 -0700
Subject: [PATCH] Fixing confirmation layout when dapp has suggested a price
 (EIP-1559) (#11634)

---
 ui/components/app/transaction-detail-item/index.scss |  5 +----
 .../confirm-transaction-base.component.js            | 12 +++++++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss
index ec8286df3..30308cdf7 100644
--- a/ui/components/app/transaction-detail-item/index.scss
+++ b/ui/components/app/transaction-detail-item/index.scss
@@ -3,6 +3,7 @@
 
   &__row {
     display: flex;
+    grid-gap: 5px;
   }
 
   &__title {
@@ -15,10 +16,6 @@
     margin-inline-start: 4px;
   }
 
-  &__detail-text {
-    margin-inline-end: 20px !important;
-  }
-
   &__total {
     font-weight: bold;
     color: $ui-black;
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 773d133b1..d0c402efa 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -301,6 +301,14 @@ export default class ConfirmTransactionBase extends Component {
     } = this.props;
     const { t } = this.context;
 
+    const getRequestingOrigin = () => {
+      try {
+        return new URL(txData.origin)?.hostname;
+      } catch (err) {
+        return '';
+      }
+    };
+
     const notMainnetOrTest = !(isMainnet || process.env.IN_TEST);
     const gasPriceFetchFailure = isEthGasPrice || noGasPrice;
 
@@ -371,7 +379,9 @@ export default class ConfirmTransactionBase extends Component {
                 detailTitle={
                   txData.dappSuggestedGasFees ? (
                     <>
-                      {t('transactionDetailDappGasHeading', [txData.origin])}
+                      {t('transactionDetailDappGasHeading', [
+                        getRequestingOrigin(),
+                      ])}
                       <InfoTooltip
                         contentText={t('transactionDetailDappGasTooltip')}
                         position="top"