mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
* Part of #17670 for: accreditation.component.js * Update checkbox.test.tsx.snap * Update ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update accreditation.component.js * Update ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Updating component to use component library components and removing unused CSS --------- Co-authored-by: George Marshall <georgewrmarshall@gmail.com> Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
parent
24c9db5883
commit
ab1b4c3a31
@ -11,6 +11,7 @@ export default {
|
||||
address: { control: 'string' },
|
||||
},
|
||||
args: {
|
||||
fetchVia: 'fetchVia',
|
||||
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
|
||||
},
|
||||
};
|
||||
|
@ -8,11 +8,22 @@ import {
|
||||
} from '../../../../../../selectors';
|
||||
import { I18nContext } from '../../../../../../contexts/i18n';
|
||||
|
||||
import { TypographyVariant } from '../../../../../../helpers/constants/design-system';
|
||||
|
||||
import Button from '../../../../../ui/button';
|
||||
import Typography from '../../../../../ui/typography';
|
||||
import { Icon, IconName } from '../../../../../component-library';
|
||||
import {
|
||||
BUTTON_VARIANT,
|
||||
Button,
|
||||
Icon,
|
||||
IconName,
|
||||
Text,
|
||||
Box,
|
||||
BUTTON_SIZES,
|
||||
} from '../../../../../component-library';
|
||||
import {
|
||||
AlignItems,
|
||||
Display,
|
||||
TextVariant,
|
||||
FlexDirection,
|
||||
FlexWrap,
|
||||
} from '../../../../../../helpers/constants/design-system';
|
||||
|
||||
const Accreditation = ({ fetchVia, address }) => {
|
||||
const t = useContext(I18nContext);
|
||||
@ -20,48 +31,37 @@ const Accreditation = ({ fetchVia, address }) => {
|
||||
const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
|
||||
const addressLink = getAccountLink(address, chainId, rpcPrefs);
|
||||
|
||||
const AccreditationLink = () => {
|
||||
return (
|
||||
<>
|
||||
<Typography
|
||||
variant={TypographyVariant.H7}
|
||||
className="accreditation__prefix"
|
||||
boxProps={{ margin: 0 }}
|
||||
>
|
||||
return (
|
||||
<Box
|
||||
className="accreditation"
|
||||
marginTop={2}
|
||||
alignItems={AlignItems.center}
|
||||
display={Display.Flex}
|
||||
>
|
||||
<Icon name={IconName.Info} marginRight={2} />
|
||||
<Box
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
flexWrap={FlexWrap.Wrap}
|
||||
>
|
||||
<Text variant={TextVariant.bodySm}>
|
||||
{t('transactionDecodingAccreditationVerified', [
|
||||
<Button
|
||||
type="link"
|
||||
className="accreditation__link"
|
||||
onClick={() => {
|
||||
global.platform.openTab({
|
||||
url: addressLink,
|
||||
});
|
||||
}}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={t('etherscanView')}
|
||||
variant={BUTTON_VARIANT.LINK}
|
||||
href={addressLink}
|
||||
externalLink
|
||||
key="accreditation-link-button"
|
||||
size={BUTTON_SIZES.INHERIT}
|
||||
>
|
||||
{fetchVia}
|
||||
</Button>,
|
||||
])}
|
||||
</Typography>
|
||||
<Typography variant={TypographyVariant.H7} boxProps={{ margin: 0 }}>
|
||||
</Text>
|
||||
<Text variant={TextVariant.bodySm}>
|
||||
{t('transactionDecodingAccreditationDecoded')}
|
||||
</Typography>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="accreditation">
|
||||
<div className="accreditation__icon">
|
||||
<Icon name={IconName.Info} />
|
||||
</div>
|
||||
<div className="accreditation__info">
|
||||
<AccreditationLink />
|
||||
</div>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,24 +0,0 @@
|
||||
.accreditation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
|
||||
&__icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
color: var(--color-text-default);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__link.btn-link {
|
||||
@include H7;
|
||||
|
||||
display: inherit;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,5 @@
|
||||
//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';
|
||||
|
Loading…
Reference in New Issue
Block a user