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