From 4ed7c8c559e4038aef2c6dabcc54a65184149482 Mon Sep 17 00:00:00 2001
From: "g. nicholas d'andrea" <gnidan@users.noreply.github.com>
Date: Wed, 8 Dec 2021 11:51:49 -0500
Subject: [PATCH] Fix tx-insight accreditation styling (#13009)

* Fix tx-insight accreditation styling

- Ensure "Etherscan" appears capitalized
- Ensure messages are separated by newline
- Handle case where server returns `fetchedVia` that frontend doesn't
  support

* Revert "Fix tx-insight accreditation styling"

This reverts commit f7121d23cf9e5cf37e18444793933c36b66d9028.

* New Fix tx-insight accreditation styling

Co-authored-by: Dan Miller <danjm.com@gmail.com>
---
 app/_locales/en/messages.json                 |  2 +-
 .../accreditation/accreditation.component.js  | 32 ++++++++++---------
 .../components/ui/accreditation/index.scss    |  3 +-
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 8a042ef7b..01280d57f 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -3109,7 +3109,7 @@
     "message": "Decoded by Truffle"
   },
   "transactionDecodingAccreditationVerified": {
-    "message": "Verified contract on"
+    "message": "Verified contract on $1"
   },
   "transactionDecodingUnsupportedNetworkError": {
     "message": "Transaction decoding is not available for chainId $1"
diff --git a/ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js b/ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js
index c08101858..fd1d75cd8 100644
--- a/ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js
+++ b/ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js
@@ -27,22 +27,24 @@ const Accreditation = ({ fetchVia, address }) => {
           className="accreditation__prefix"
           boxProps={{ margin: 0 }}
         >
-          {t('transactionDecodingAccreditationVerified')}
+          {t('transactionDecodingAccreditationVerified', [
+            <Button
+              type="link"
+              className="accreditation__link"
+              onClick={() => {
+                global.platform.openTab({
+                  url: addressLink,
+                });
+              }}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={t('etherscanView')}
+              key="accreditation-link-button"
+            >
+              {fetchVia}
+            </Button>,
+          ])}
         </Typography>
-        <Button
-          type="link"
-          className="accreditation__link"
-          onClick={() => {
-            global.platform.openTab({
-              url: addressLink,
-            });
-          }}
-          target="_blank"
-          rel="noopener noreferrer"
-          title={t('etherscanView')}
-        >
-          {fetchVia}
-        </Button>
         <Typography variant={TYPOGRAPHY.H7} boxProps={{ margin: 0 }}>
           {t('transactionDecodingAccreditationDecoded')}
         </Typography>
diff --git a/ui/components/app/transaction-decoding/components/ui/accreditation/index.scss b/ui/components/app/transaction-decoding/components/ui/accreditation/index.scss
index 4131c38da..efc4af751 100644
--- a/ui/components/app/transaction-decoding/components/ui/accreditation/index.scss
+++ b/ui/components/app/transaction-decoding/components/ui/accreditation/index.scss
@@ -10,14 +10,15 @@
   &__info {
     color: $ui-black;
     display: flex;
+    flex-flow: column;
     flex-wrap: wrap;
   }
 
   &__link.btn-link {
     @include H7;
 
+    display: inherit;
     padding: 0 4px;
-    width: auto;
   }
 }