mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-26 20:39:08 +01:00
4f8c4820d2
* adding badges for nfts * fixing default nft styling issue * adding multichain flag, making borderRadius inline * Apply suggestions from code review Co-authored-by: George Marshall <george.marshall@consensys.net> * fixing imports * removing nullcheck for guaranteed fields * moving badgewrapper UI into multichain component * using Box for button, removing inline style, border-radius for NFT default image * adding nft badges to NFT Details page * nits, snap update * fixing/refactoring nftdefaultimage display, adding clickable, removing handleimageclick, refactor NFTItem, required props * editing nft-default-image story, test, and snap * Updating to fix positioning, use Box props to reduce CSS and BEM naming conventions * moving minor styling to Box props, adding comment * display block typo --------- Co-authored-by: George Marshall <george.marshall@consensys.net>
61 lines
1.5 KiB
JavaScript
61 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import {
|
|
Display,
|
|
AlignItems,
|
|
BlockSize,
|
|
JustifyContent,
|
|
TextVariant,
|
|
BorderRadius,
|
|
TextAlign,
|
|
BackgroundColor,
|
|
} from '../../../helpers/constants/design-system';
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
import { Text } from '../../component-library';
|
|
import Box from '../../ui/box/box';
|
|
|
|
export default function NftDefaultImage({ name, tokenId, clickable = false }) {
|
|
const t = useI18nContext();
|
|
return (
|
|
<Box
|
|
tabIndex={0}
|
|
data-testid="nft-default-image"
|
|
className={classnames('nft-default', {
|
|
'nft-default--clickable': clickable,
|
|
})}
|
|
display={Display.Flex}
|
|
alignItems={AlignItems.Center}
|
|
justifyContent={JustifyContent.Center}
|
|
backgroundColor={BackgroundColor.backgroundAlternative}
|
|
width={BlockSize.Full}
|
|
borderRadius={BorderRadius.LG}
|
|
>
|
|
<Text
|
|
variant={TextVariant.bodySm}
|
|
textAlign={TextAlign.Center}
|
|
ellipsis
|
|
as="h6"
|
|
className="nft-default__text"
|
|
>
|
|
{name ?? t('unknownCollection')} <br /> #{tokenId}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
NftDefaultImage.propTypes = {
|
|
/**
|
|
* The name of the NFT collection if not supplied will default to "Unnamed collection"
|
|
*/
|
|
name: PropTypes.string,
|
|
/**
|
|
* The token id of the nft
|
|
*/
|
|
tokenId: PropTypes.string,
|
|
/**
|
|
* Controls the css class for the cursor hover
|
|
*/
|
|
clickable: PropTypes.bool,
|
|
};
|