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,8 +27,7 @@ const Accreditation = ({ fetchVia, address }) => {
           className="accreditation__prefix"
           boxProps={{ margin: 0 }}
         >
-          {t('transactionDecodingAccreditationVerified')}
-        </Typography>
+          {t('transactionDecodingAccreditationVerified', [
             <Button
               type="link"
               className="accreditation__link"
@@ -40,9 +39,12 @@ const Accreditation = ({ fetchVia, address }) => {
               target="_blank"
               rel="noopener noreferrer"
               title={t('etherscanView')}
+              key="accreditation-link-button"
             >
               {fetchVia}
-        </Button>
+            </Button>,
+          ])}
+        </Typography>
         <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;
   }
 }