mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Header component for transaction confirmation screens (#15614)
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
This commit is contained in:
Filip Sekulic
GitHub
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-details/index';
|
||||||
@import 'detected-token/detected-token-ignored-popover/index';
|
@import 'detected-token/detected-token-ignored-popover/index';
|
||||||
@import 'detected-token/detected-token-selection-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