m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Part of #17670 for: accreditation.component.js (#20057)

Browse Source 
* 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:
Harsh Shukla 2023-07-25 02:08:17 +05:30 committed by GitHub
parent 24c9db5883
commit ab1b4c3a31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/components/app/transaction-decoding/components/ui/accreditation/accrediation.component.stories.js
View File

@ -11,6 +11,7 @@ export default {
address: { control: 'string' },
},
args: {
fetchVia: 'fetchVia',
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
},
};

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

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

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

@ -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
ui/components/app/transaction-decoding/index.scss
View File

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