diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index aefa0a070..f4e3523f9 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -3030,6 +3030,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"
},
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
new file mode 100644
index 000000000..c08101858
--- /dev/null
+++ b/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 (
+ <>
+
+ {t('transactionDecodingAccreditationVerified')}
+
+
+
+ {t('transactionDecodingAccreditationDecoded')}
+
+ >
+ );
+ };
+
+ return (
+
+ );
+};
+
+Accreditation.propTypes = {
+ fetchVia: PropTypes.string.isRequired,
+ address: PropTypes.string.isRequired,
+};
+
+export default Accreditation;
diff --git a/ui/components/app/transaction-decoding/components/ui/accreditation/index.js b/ui/components/app/transaction-decoding/components/ui/accreditation/index.js
new file mode 100644
index 000000000..138aad790
--- /dev/null
+++ b/ui/components/app/transaction-decoding/components/ui/accreditation/index.js
@@ -0,0 +1 @@
+export { default } from './accreditation.component';
diff --git a/ui/components/app/transaction-decoding/components/ui/accreditation/index.scss b/ui/components/app/transaction-decoding/components/ui/accreditation/index.scss
new file mode 100644
index 000000000..4131c38da
--- /dev/null
+++ b/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;
+ }
+}
+
diff --git a/ui/components/app/transaction-decoding/index.scss b/ui/components/app/transaction-decoding/index.scss
index 2416e04d9..98992c7aa 100644
--- a/ui/components/app/transaction-decoding/index.scss
+++ b/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';
diff --git a/ui/components/app/transaction-decoding/transaction-decoding.component.js b/ui/components/app/transaction-decoding/transaction-decoding.component.js
index e96f1d8d2..75ed7af4f 100644
--- a/ui/components/app/transaction-decoding/transaction-decoding.component.js
+++ b/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 = '' }) {
+ {sourceFetchedVia && sourceAddress ? (
+
+ ) : null}
);
};