mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 09:23:21 +01:00
Header component for transaction confirmation screens (#15614)
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
This commit is contained in:
parent
365bf11fdd
commit
6185cc6e5e
17
app/images/eth_badge.svg
Normal file
17
app/images/eth_badge.svg
Normal 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>
|
After Width: | Height: | Size: 1.2 KiB |
@ -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';
|
||||
|
@ -0,0 +1 @@
|
||||
export { default } from './network-account-balance-header';
|
11
ui/components/app/network-account-balance-header/index.scss
Normal file
11
ui/components/app/network-account-balance-header/index.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
@ -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,
|
||||
};
|
@ -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';
|
Loading…
Reference in New Issue
Block a user