mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Created a new token component (#15617)
Co-authored-by: ryanml <ryanlanese@gmail.com>
This commit is contained in:
Adnan Sahovic
GitHub
parent
21e3b4785d
commit
341f761dd7
@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import IconCopy from '../icon/icon-copy';
|
||||
import IconBlockExplorer from '../icon/icon-block-explorer';
|
||||
import Box from '../box/box';
|
||||
import Tooltip from '../tooltip/tooltip';
|
||||
import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||
import Identicon from '../identicon/identicon.component';
|
||||
import Typography from '../typography/typography';
|
||||
import {
|
||||
FONT_WEIGHT,
|
||||
TYPOGRAPHY,
|
||||
DISPLAY,
|
||||
COLORS,
|
||||
ALIGN_ITEMS,
|
||||
JUSTIFY_CONTENT,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Button from '../button';
|
||||
import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
|
||||
|
||||
export default function ContractTokenValues({ address, tokenName }) {
|
||||
const t = useI18nContext();
|
||||
const [copied, handleCopy] = useCopyToClipboard();
|
||||
|
||||
return (
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
alignItems={ALIGN_ITEMS.CENTER}
|
||||
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||
className="contract-token-values"
|
||||
>
|
||||
<Box marginRight={2}>
|
||||
<Identicon address={address} diameter={24} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant={TYPOGRAPHY.H2}
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
color={COLORS.TEXT_ALTERNATIVE}
|
||||
marginTop={0}
|
||||
marginBottom={0}
|
||||
>
|
||||
{tokenName}
|
||||
</Typography>
|
||||
<Box className="contract-token-values__copy-address">
|
||||
<Tooltip
|
||||
position="top"
|
||||
title={copied ? t('copiedExclamation') : t('copyToClipboard')}
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
className="contract-token-values__copy-address__button"
|
||||
onClick={() => {
|
||||
handleCopy(address);
|
||||
}}
|
||||
>
|
||||
<IconCopy size={24} color="var(--color-icon-muted)" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Box className="contract-token-values__block-explorer">
|
||||
<Tooltip position="top" title={t('openInBlockExplorer')}>
|
||||
<Button
|
||||
type="link"
|
||||
className="contract-token-values__block-explorer__button"
|
||||
>
|
||||
<IconBlockExplorer size={24} color="var(--color-icon-muted)" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
ContractTokenValues.propTypes = {
|
||||
/**
|
||||
* Address used for generating token image
|
||||
*/
|
||||
address: PropTypes.string,
|
||||
/**
|
||||
* Displayed the token name currently tracked in state
|
||||
*/
|
||||
tokenName: PropTypes.string,
|
||||
};
|
||||
@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import ContractTokenValues from './contract-token-values';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/ContractTokenValues',
|
||||
id: __filename,
|
||||
argTypes: {
|
||||
tokenName: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
address: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
args: {
|
||||
tokenName: 'DAI',
|
||||
address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => <ContractTokenValues {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
17
ui/components/ui/contract-token-values/index.scss
Normal file
17
ui/components/ui/contract-token-values/index.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.contract-token-values {
|
||||
&__copy-address {
|
||||
margin-inline-start: 8px;
|
||||
|
||||
&__button {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__block-explorer {
|
||||
margin-inline-start: 8px;
|
||||
|
||||
&__button {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -15,6 +15,9 @@ import SunCheck from './sun-check-icon.component';
|
||||
import Swap from './swap-icon-for-list.component';
|
||||
import SwapIcon from './overview-send-icon.component';
|
||||
import SwapIconComponent from './swap-icon.component';
|
||||
import IconCopy from './icon-copy'
|
||||
import IconBlockExplorer from './icon-block-explorer';
|
||||
|
||||
|
||||
# Icon
|
||||
|
||||
@ -190,3 +193,19 @@ Use the `className` prop to add an additional class to the icon. This additional
|
||||
</Canvas>
|
||||
|
||||
<ArgsTable of={Preloader} />
|
||||
|
||||
## IconCopy
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-icon-icon-stories-js--icon-copy-story" />
|
||||
</Canvas>
|
||||
|
||||
<ArgsTable of={IconCopy} />
|
||||
|
||||
## IconBlockExplorer
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-icon-icon-stories-js--icon-block-explorer-story" />
|
||||
</Canvas>
|
||||
|
||||
<ArgsTable of={IconBlockExplorer} />
|
||||
@ -18,7 +18,7 @@ const IconBlockExplorer = ({
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="m328 482l-128 0c-115 0-168-52-168-169l0-128c0-115 53-168 168-168l43 0c5 0 10 2 14 6 3 3 5 8 5 13 0 5-2 10-5 14-4 3-9 5-14 5l-43 0c-96 0-130 34-130 130l0 128c0 96 34 131 130 131l128 0c96 0 130-35 130-131l0-42c0-5 3-10 6-14 4-3 9-5 14-5 5 0 10 2 13 5 4 4 6 9 6 14l0 42c0 117-52 169-169 169z m-42-235c-5 0-10-2-14-5-3-4-5-9-5-14 0-5 2-10 5-13l159-160-56 0c-5 0-10-2-13-5-4-4-6-9-6-14 0-5 2-10 6-13 3-4 8-6 13-6l103 0c2 0 5 0 7 1 2 1 5 3 6 5 2 1 4 3 5 6 0 2 1 5 1 7l0 103c0 5-2 10-6 13-3 4-8 6-13 6-5 0-10-2-14-6-3-3-6-8-6-13l0-56-159 159c-3 3-8 5-13 5z" />
|
||||
<path d="m316 444l-106 0c-96 0-141-43-141-140l0-107c0-96 45-140 141-140l35 0c5 0 9 2 12 5 3 3 4 7 4 11 0 4-1 8-4 11-3 3-7 5-12 5l-35 0c-80 0-109 28-109 108l0 107c0 80 29 108 109 108l106 0c80 0 109-28 109-108l0-36c0-4 1-8 4-11 3-3 8-5 12-5 4 0 8 2 11 5 3 3 5 7 5 11l0 36c0 97-44 140-141 140z m-35-195c-4 0-9-2-12-5-3-3-4-7-4-11 0-4 1-8 4-11l133-133-47 0c-4 0-8-2-11-5-3-3-5-7-5-11 0-4 2-8 5-11 3-3 7-5 11-5l86 0c2 0 4 0 6 1 2 1 4 2 5 3 2 2 3 4 4 6 0 2 1 4 1 6l0 85c0 4-2 9-5 12-3 3-7 4-11 4-4 0-9-1-12-4-3-3-4-8-4-12l0-47-133 133c-3 3-7 5-11 5z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
|
||||
@ -39,6 +39,8 @@ import IconEye from './icon-eye';
|
||||
import IconEyeSlash from './icon-eye-slash';
|
||||
import IconTokenSearch from './icon-token-search';
|
||||
import SearchIcon from './search-icon';
|
||||
import IconCopy from './icon-copy';
|
||||
import IconBlockExplorer from './icon-block-explorer';
|
||||
|
||||
const validColors = [
|
||||
'var(--color-icon-default)',
|
||||
@ -129,6 +131,8 @@ export const DefaultStory = (args) => (
|
||||
<IconItem Component={<IconCog {...args} />} />
|
||||
<IconItem Component={<IconTokenSearch {...args} />} />
|
||||
<IconItem Component={<SearchIcon {...args} />} />
|
||||
<IconItem Component={<IconCopy {...args} />} />
|
||||
<IconItem Component={<IconBlockExplorer {...args} />} />
|
||||
</div>
|
||||
</Box>
|
||||
<Typography
|
||||
@ -317,3 +321,15 @@ PreloaderStory.args = {
|
||||
size: 40,
|
||||
};
|
||||
PreloaderStory.storyName = 'Preloader';
|
||||
|
||||
export const IconCopyStory = (args) => <IconCopy {...args} />;
|
||||
IconCopyStory.args = {
|
||||
size: 40,
|
||||
};
|
||||
IconCopyStory.storyName = 'IconCopy';
|
||||
|
||||
export const IconBlockExplorerStory = (args) => <IconBlockExplorer {...args} />;
|
||||
IconBlockExplorerStory.args = {
|
||||
size: 40,
|
||||
};
|
||||
IconBlockExplorerStory.storyName = 'IconBlockExplorer';
|
||||
|
||||
@ -60,3 +60,4 @@
|
||||
@import 'url-icon/index';
|
||||
@import 'update-nickname-popover/index';
|
||||
@import 'disclosure/disclosure';
|
||||
@import 'contract-token-values/index.scss';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user