m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Created the NFT component for single NFT allowance (#15825)

Browse Source 
* Created the NFT component for single NFT allowance

* modified NftInfo component

* added assetName
This commit is contained in:
Adnan Sahovic 2022-10-06 16:48:08 +02:00 committed by GitHub
parent 466e7534c5
commit 6918bff291
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 107 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/_locales/en/messages.json generated
View File

@ -4251,6 +4251,9 @@
"message": "Verify this token on $1 and make sure this is the token you want to trade.",
"description": "Points the user to etherscan as a place they can verify information about a token. $1 is replaced with the translation for \"etherscan\""
},
"view": {
"message": "View"
},
"viewAccount": {
"message": "View account"
},

1
ui/components/ui/nft-info/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './nft-info';

9
ui/components/ui/nft-info/index.scss Normal file
View File

@ -0,0 +1,9 @@
.nft-info {
&__content {
width: 100%;
}
&__button {
padding: 0;
}
}

64
ui/components/ui/nft-info/nft-info.js Normal file
View File

@ -0,0 +1,64 @@
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { I18nContext } from '../../../contexts/i18n';
import Box from '../box';
import Typography from '../typography';
import {
COLORS,
DISPLAY,
FONT_WEIGHT,
TYPOGRAPHY,
} from '../../../helpers/constants/design-system';
import Identicon from '../identicon';
import Button from '../button';
export default function NftInfo({ assetName, tokenAddress, tokenId }) {
const t = useContext(I18nContext);
return (
<Box
display={DISPLAY.FLEX}
className="nft-info"
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
>
<Box display={DISPLAY.FLEX} className="nft-info__content">
<Box margin={4}>
<Identicon address={tokenAddress} diameter={24} />
</Box>
<Box>
<Typography
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H6}
marginTop={4}
>
{assetName}
</Typography>
<Typography
variant={TYPOGRAPHY.H7}
marginBottom={4}
color={COLORS.TEXT_ALTERNATIVE}
>
{t('tokenId')} #{tokenId}
</Typography>
</Box>
</Box>
<Box marginTop={4} marginRight={4}>
<Button className="nft-info__button" type="link">
<Typography
variant={TYPOGRAPHY.H6}
marginTop={0}
color={COLORS.PRIMARY_DEFAULT}
>
{t('view')}
</Typography>
</Button>
</Box>
</Box>
);
}
NftInfo.propTypes = {
assetName: PropTypes.string,
tokenAddress: PropTypes.string,
tokenId: PropTypes.string,
};

29
ui/components/ui/nft-info/nft-info.stories.js Normal file
View File

@ -0,0 +1,29 @@
import React from 'react';
import NftInfo from './nft-info';
export default {
title: 'Components/UI/NftInfo',
id: __filename,
argTypes: {
assetName: {
control: { type: 'text' },
},
tokenAddress: {
control: { type: 'text' },
},
tokenId: {
control: { type: 'text' },
},
},
args: {
assetName: 'Catnip Spicewight',
tokenAddress: '0xa3aee8bce55beea1951ef834b99f3ac60d1abeeb',
tokenId: '112233',
},
};
export const DefaultStory = (args) => {
return <NftInfo {...args} />;
};
DefaultStory.storyName = 'Default';

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

@ -62,3 +62,4 @@
@import 'disclosure/disclosure';
@import 'deprecated-test-networks/index.scss';
@import 'contract-token-values/index.scss';
@import 'nft-info/index.scss';