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

@@ -3026,7 +3026,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"

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>

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;
   }
 }