Tx decoding accreditation (#12918)

* feature: adding support for truffle and etherscan accreditation

* Fix scss linting

* fix styling and classnames

* Switch font size to rem

* Update ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/transaction-decoding/components/ui/accreditation/index.scss

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Fix linting

Co-authored-by: g. nicholas d'andrea <gnidan@trufflesuite.com>
Co-authored-by: Dan J Miller <danjm.com@gmail.com>
Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
Co-authored-by: g. nicholas d'andrea <gnidan@users.noreply.github.com>

app/_locales/en/messages.json

@@ -3096,6 +3096,12 @@
   "transactionData": {
     "message": "Transaction data"
   },
+  "transactionDecodingAccreditationDecoded": {
+    "message": "Decoded by Truffle"
+  },
+  "transactionDecodingAccreditationVerified": {
+    "message": "Verified contract on"
+  },
   "transactionDecodingUnsupportedNetworkError": {
     "message": "Transaction decoding is not available for chainId $1"
   },

ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js

@@ -0,0 +1,70 @@
+import React, { useContext } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { getAccountLink } from '@metamask/etherscan-link';
+import {
+  getCurrentChainId,
+  getRpcPrefsForCurrentProvider,
+} from '../../../../../../selectors';
+import { I18nContext } from '../../../../../../contexts/i18n';
+
+import { TYPOGRAPHY } from '../../../../../../helpers/constants/design-system';
+
+import Button from '../../../../../ui/button';
+import Typography from '../../../../../ui/typography';
+
+const Accreditation = ({ fetchVia, address }) => {
+  const t = useContext(I18nContext);
+  const chainId = useSelector(getCurrentChainId);
+  const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
+  const addressLink = getAccountLink(address, chainId, rpcPrefs);
+
+  const AccreditationLink = () => {
+    return (
+      <>
+        <Typography
+          variant={TYPOGRAPHY.H7}
+          className="accreditation__prefix"
+          boxProps={{ margin: 0 }}
+        >
+          {t('transactionDecodingAccreditationVerified')}
+        </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>
+      </>
+    );
+  };
+
+  return (
+    <div className="accreditation">
+      <div className="accreditation__icon">
+        <i className="fa fa-info-circle" />
+      </div>
+      <div className="accreditation__info">
+        <AccreditationLink />
+      </div>
+    </div>
+  );
+};
+
+Accreditation.propTypes = {
+  fetchVia: PropTypes.string.isRequired,
+  address: PropTypes.string.isRequired,
+};
+
+export default Accreditation;

ui/components/app/transaction-decoding/components/ui/accreditation/index.js

@@ -0,0 +1 @@
+export { default } from './accreditation.component';

ui/components/app/transaction-decoding/components/ui/accreditation/index.scss

@@ -0,0 +1,23 @@
+.accreditation {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+
+  &__icon {
+    margin-right: 8px;
+  }
+
+  &__info {
+    color: $ui-black;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__link.btn-link {
+    @include H7;
+
+    padding: 0 4px;
+    width: auto;
+  }
+}
+

ui/components/app/transaction-decoding/index.scss

@@ -1,5 +1,6 @@
 //styling for ui components
 @import './components/ui/copy-raw-data/index';
+@import './components/ui/accreditation/index';
 
 //styling for decoding components
 @import './components/decoding/address/index';

ui/components/app/transaction-decoding/transaction-decoding.component.js

@@ -19,10 +19,14 @@ import {
 
 import Address from './components/decoding/address';
 import CopyRawData from './components/ui/copy-raw-data';
+import Accreditation from './components/ui/accreditation';
 
 export default function TransactionDecoding({ to = '', inputData: data = '' }) {
   const t = useContext(I18nContext);
   const [tx, setTx] = useState([]);
+  const [sourceAddress, setSourceAddress] = useState('');
+  const [sourceFetchedVia, setSourceFetchedVia] = useState('');
+
   const { address: from } = useSelector(getSelectedAccount);
   const network = hexToDecimal(useSelector(getCurrentChainId));
 
@@ -55,7 +59,16 @@ export default function TransactionDecoding({ to = '', inputData: data = '' }) {
 
         const response = await fetchWithCache(requestUrl, { method: 'GET' });
 
-        const { info: projectInfo } = response;
+        const { info: projectInfo, fetchedVia, address } = response;
+
+        // update source information
+        if (address) {
+          setSourceAddress(address);
+        }
+
+        if (fetchedVia) {
+          setSourceFetchedVia(fetchedVia);
+        }
 
         // creating instance of the truffle decoder
         const decoder = await forAddress(to, {
@@ -210,6 +223,14 @@ export default function TransactionDecoding({ to = '', inputData: data = '' }) {
         <div className="tx-insight-content__copy-raw-tx">
           <CopyRawData data={data} />
         </div>
+        {sourceFetchedVia && sourceAddress ? (
+          <div className="tx-insight-content__accreditation">
+            <Accreditation
+              address={sourceAddress}
+              fetchVia={sourceFetchedVia}
+            />
+          </div>
+        ) : null}
       </div>
     );
   };