m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Tx decoding accreditation (#12918)

Browse Source 
* 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>
This commit is contained in:
Alaa Hadad 2021-12-07 23:43:14 +04:00 committed by Dan Miller
parent e57250f62c
commit 6adb48d9f0
6 changed files with 123 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/_locales/en/messages.json
View File

@ -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"
},

70
ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js Normal file
View File

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

1
ui/components/app/transaction-decoding/components/ui/accreditation/index.js Normal file
View File

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

23
ui/components/app/transaction-decoding/components/ui/accreditation/index.scss Normal file
View File

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

1
ui/components/app/transaction-decoding/index.scss
View File

@ -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';

23
ui/components/app/transaction-decoding/transaction-decoding.component.js
View File

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