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

Header component for transaction confirmation screens (#15614)

Browse Source 
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
This commit is contained in:
Filip Sekulic 2022-08-23 17:52:08 +02:00 committed by GitHub
parent 365bf11fdd
commit 6185cc6e5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 178 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/images/eth_badge.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16.25C12.4183 16.25 16 12.6683 16 8.25C16 3.83172 12.4183 0.25 8 0.25C3.58172 0.25 0 3.83172 0 8.25C0 12.6683 3.58172 16.25 8 16.25Z" fill="white"/>
<g clip-path="url(#clip0_2785_11066)">
<path d="M7.9043 15.25C11.7703 15.25 14.9043 12.116 14.9043 8.25C14.9043 4.38401 11.7703 1.25 7.9043 1.25C4.0383 1.25 0.904297 4.38401 0.904297 8.25C0.904297 12.116 4.0383 15.25 7.9043 15.25Z" fill="#627EEA"/>
<path d="M8.12207 3V6.88063L11.402 8.34625L8.12207 3Z" fill="white" fill-opacity="0.602"/>
<path d="M8.12217 3L4.8418 8.34625L8.12217 6.88063V3Z" fill="white"/>
<path d="M8.12207 10.861V13.4978L11.4042 8.95703L8.12207 10.861Z" fill="white" fill-opacity="0.602"/>
<path d="M8.12217 13.4978V10.8606L4.8418 8.95703L8.12217 13.4978Z" fill="white"/>
<path d="M8.12207 10.2508L11.402 8.34634L8.12207 6.88159V10.2508Z" fill="white" fill-opacity="0.2"/>
<path d="M4.8418 8.34634L8.12217 10.2508V6.88159L4.8418 8.34634Z" fill="white" fill-opacity="0.602"/>
</g>
<defs>
<clipPath id="clip0_2785_11066">
<rect width="14" height="14" fill="white" transform="translate(0.904297 1.25)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
ui/components/app/app-components.scss
View File

@ -95,3 +95,4 @@
@import 'detected-token/detected-token-details/index';
@import 'detected-token/detected-token-ignored-popover/index';
@import 'detected-token/detected-token-selection-popover/index';
@import 'network-account-balance-header/index';

1
ui/components/app/network-account-balance-header/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './network-account-balance-header';

11
ui/components/app/network-account-balance-header/index.scss Normal file
View File

@ -0,0 +1,11 @@
.network-account-balance-header {
border-top: 1px solid var(--color-border-muted);
border-bottom: 1px solid var(--color-border-muted);
&__network-account {
&__ident-icon-ethereum {
margin-inline-start: -10px;
margin-top: -20px;
}
}
}

111
ui/components/app/network-account-balance-header/network-account-balance-header.js Normal file
View File

@ -0,0 +1,111 @@
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import Identicon from '../../ui/identicon/identicon.component';
import {
DISPLAY,
FLEX_DIRECTION,
TYPOGRAPHY,
COLORS,
FONT_WEIGHT,
ALIGN_ITEMS,
JUSTIFY_CONTENT,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { I18nContext } from '../../../contexts/i18n';
import Typography from '../../ui/typography';
export default function NetworkAccountBalanceHeader({
networkName,
accountName,
accountBalance,
tokenName,
accountAddress,
}) {
const t = useContext(I18nContext);
return (
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
padding={4}
className="network-account-balance-header"
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
alignItems={ALIGN_ITEMS.CENTER}
gap={2}
marginRight={5}
>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
alignItems={ALIGN_ITEMS.CENTER}
>
<Identicon address={accountAddress} diameter={32} />
<Identicon
address={accountAddress}
diameter={16}
imageBorder
image="./images/eth_badge.svg"
className="network-account-balance-header__network-account__ident-icon-ethereum"
/>
</Box>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.FLEX_START}
flexDirection={FLEX_DIRECTION.COLUMN}
>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
marginBottom={0}
>
{networkName}
</Typography>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_DEFAULT}
fontWeight={FONT_WEIGHT.BOLD}
marginTop={0}
>
{accountName}
</Typography>
</Box>
</Box>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.FLEX_END}
flexDirection={FLEX_DIRECTION.COLUMN}
>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
marginBottom={0}
>
{t('balance')}
</Typography>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_DEFAULT}
fontWeight={FONT_WEIGHT.BOLD}
marginTop={0}
>
{accountBalance} {tokenName}
</Typography>
</Box>
</Box>
);
}
NetworkAccountBalanceHeader.propTypes = {
networkName: PropTypes.string,
accountName: PropTypes.string,
accountBalance: PropTypes.number,
tokenName: PropTypes.string,
accountAddress: PropTypes.string,
};

37
ui/components/app/network-account-balance-header/network-account-balance-header.stories.js Normal file
View File

@ -0,0 +1,37 @@
import React from 'react';
import NetworkAccountBalanceHeader from './network-account-balance-header';
export default {
title: 'Components/App/NetworkAccountBalanceHeader',
id: __filename,
argTypes: {
networkName: {
control: { type: 'text' },
},
accountName: {
control: { type: 'text' },
},
accountBalance: {
control: { type: 'number' },
},
tokenName: {
control: { type: 'text' },
},
accountAddress: {
control: { type: 'text' },
},
},
args: {
networkName: 'Ethereum Network',
accountName: 'Account 1',
accountBalance: 200.12,
tokenName: 'DAI',
accountAddress: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
},
};
export const DefaultStory = (args) => {
return <NetworkAccountBalanceHeader {...args} />;
};
DefaultStory.storyName = 'Default';