From c8de0b70fa56e7dc49164ef631b4b60104a708cc Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Mon, 1 Jun 2020 17:19:49 -0500
Subject: [PATCH 1/2] Add nonce to transaction details (#8716)

---
 test/e2e/metamask-ui.spec.js                       |  2 +-
 .../transaction-breakdown.component.js             | 14 ++++++++++++--
 .../transaction-list-item-details.component.js     |  1 +
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index e5df57820..6cb3981cb 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -474,7 +474,7 @@ describe('MetaMask', function () {
       const popoverCloseButton = await driver.findClickableElement(By.css('.popover-header__button'))
       const txGasPrices = await driver.findElements(By.css('.transaction-breakdown__value'))
       const txGasPriceLabels = await driver.findElements(By.css('.transaction-breakdown-row__title'))
-      await driver.wait(until.elementTextMatches(txGasPrices[3], /^10$/), 10000)
+      await driver.wait(until.elementTextMatches(txGasPrices[4], /^10$/), 10000)
       assert(txGasPriceLabels[2])
       await popoverCloseButton.click()
     })
diff --git a/ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js
index 6e610a833..2c3d5e924 100644
--- a/ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js
+++ b/ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js
@@ -16,6 +16,7 @@ export default class TransactionBreakdown extends PureComponent {
     className: PropTypes.string,
     nativeCurrency: PropTypes.string,
     showFiat: PropTypes.bool,
+    nonce: PropTypes.string,
     gas: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     gasPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -29,13 +30,22 @@ export default class TransactionBreakdown extends PureComponent {
 
   render () {
     const { t } = this.context
-    const { gas, gasPrice, value, className, nativeCurrency, showFiat, totalInHex, gasUsed } = this.props
-
+    const { gas, gasPrice, value, className, nonce, nativeCurrency, showFiat, totalInHex, gasUsed } = this.props
     return (
       <div className={classnames('transaction-breakdown', className)}>
         <div className="transaction-breakdown__title">
           { t('transaction') }
         </div>
+        <TransactionBreakdownRow title="Nonce">
+          {typeof nonce !== 'undefined'
+            ? (
+              <HexToDecimal
+                className="transaction-breakdown__value"
+                value={nonce}
+              />
+            ) : null
+          }
+        </TransactionBreakdownRow>
         <TransactionBreakdownRow title={t('amount')}>
           <UserPreferencedCurrencyDisplay
             className="transaction-breakdown__value"
diff --git a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
index 25cf1b9f9..b0ea259db 100644
--- a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
@@ -246,6 +246,7 @@ export default class TransactionListItemDetails extends PureComponent {
             </div>
             <div className="transaction-list-item-details__cards-container">
               <TransactionBreakdown
+                nonce={transactionGroup.initialTransaction.txParams.nonce}
                 transaction={transaction}
                 className="transaction-list-item-details__transaction-breakdown"
               />

From 8afb295e1d77bbc10167948549cfd5091f73b7a1 Mon Sep 17 00:00:00 2001
From: Erik Marks <25517051+rekmarks@users.noreply.github.com>
Date: Mon, 1 Jun 2020 15:28:05 -0700
Subject: [PATCH 2/2] Fix connect long URL styling (#8719)

* fix connect long URL styling
---
 .../app/permissions-connect-header/index.scss          | 10 +++++++++-
 .../permissions-connect-header.component.js            |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui/app/components/app/permissions-connect-header/index.scss b/ui/app/components/app/permissions-connect-header/index.scss
index f57451e78..591e9a0dc 100644
--- a/ui/app/components/app/permissions-connect-header/index.scss
+++ b/ui/app/components/app/permissions-connect-header/index.scss
@@ -38,7 +38,15 @@
     color: $Grey-500;
   }
 
+  &__text {
+    width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    /*rtl:ignore*/
+    direction: rtl;
+  }
+
   &__subtitle {
     margin-top: 4px;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js b/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js
index c15c988a6..456295536 100644
--- a/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js
+++ b/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js
@@ -22,7 +22,7 @@ export default class PermissionsConnectHeader extends Component {
     return (
       <div className="permissions-connect-header__icon">
         <IconWithFallBack icon={ icon } name={ iconName } />
-        <div className="permissions-connect-header__text">{iconName }</div>
+        <div className="permissions-connect-header__text">{iconName}</div>
       </div>
     )
   }