m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Multichain NFT network badges (#19029)

Browse Source 
* 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>
This commit is contained in:
vthomas13 2023-06-02 11:01:51 -04:00 committed by GitHub
parent f1de905be7
commit 4f8c4820d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 381 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap
View File

@ -2,13 +2,13 @@
exports[`NFT Default Image should match snapshot with all provided props 1`] = `
<div>
<button
class="nft-default nft-default--clickable"
<div
class="box nft-default nft-default--clickable box--display-flex box--flex-direction-row box--width-full box--background-color-background-alternative box--rounded-lg"
data-testid="nft-default-image"
tabindex="0"
>
<h6
class="box mm-text nft-default__text mm-text--body-sm box--flex-direction-row box--color-text-default"
class="box mm-text nft-default__text mm-text--body-sm mm-text--ellipsis mm-text--text-align-center box--flex-direction-row box--color-text-default"
>
NFT Name
@ -16,19 +16,19 @@ exports[`NFT Default Image should match snapshot with all provided props 1`] = `
#
123
</h6>
</button>
</div>
</div>
`;
exports[`NFT Default Image should match snapshot with missing image click handler 1`] = `
exports[`NFT Default Image should match snapshot with missing clickable prop 1`] = `
<div>
<div
class="nft-default"
class="box nft-default box--display-flex box--flex-direction-row box--width-full box--background-color-background-alternative box--rounded-lg"
data-testid="nft-default-image"
tabindex="0"
>
<h6
class="box mm-text nft-default__text mm-text--body-sm box--flex-direction-row box--color-text-default"
class="box mm-text nft-default__text mm-text--body-sm mm-text--ellipsis mm-text--text-align-center box--flex-direction-row box--color-text-default"
>
NFT Name
@ -43,12 +43,12 @@ exports[`NFT Default Image should match snapshot with missing image click handle
exports[`NFT Default Image should render with no props 1`] = `
<div>
<div
class="nft-default"
class="box nft-default box--display-flex box--flex-direction-row box--width-full box--background-color-background-alternative box--rounded-lg"
data-testid="nft-default-image"
tabindex="0"
>
<h6
class="box mm-text nft-default__text mm-text--body-sm box--flex-direction-row box--color-text-default"
class="box mm-text nft-default__text mm-text--body-sm mm-text--ellipsis mm-text--text-align-center box--flex-direction-row box--color-text-default"
>
[unknownCollection]

15
ui/components/app/nft-default-image/index.scss
View File

@ -1,22 +1,17 @@
.nft-default {
background-color: var(--color-background-alternative);
padding-top: 100%; // retains 1:1 aspect ratio
padding-top: 100%;
position: relative;
width: 100%;
&--clickable {
cursor: pointer;
}
&__text {
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
position: absolute;
white-space: nowrap;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 32px);
}
&--clickable {
cursor: pointer;
}
}

40
ui/components/app/nft-default-image/nft-default-image.js
View File

@ -1,26 +1,46 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { TextVariant } from '../../../helpers/constants/design-system';
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, handleImageClick }) {
export default function NftDefaultImage({ name, tokenId, clickable = false }) {
const t = useI18nContext();
const Tag = handleImageClick ? 'button' : 'div';
return (
<Tag
<Box
tabIndex={0}
data-testid="nft-default-image"
className={classnames('nft-default', {
'nft-default--clickable': handleImageClick,
'nft-default--clickable': clickable,
})}
onClick={handleImageClick}
display={Display.Flex}
alignItems={AlignItems.Center}
justifyContent={JustifyContent.Center}
backgroundColor={BackgroundColor.backgroundAlternative}
width={BlockSize.Full}
borderRadius={BorderRadius.LG}
>
<Text variant={TextVariant.bodySm} as="h6" className="nft-default__text">
<Text
variant={TextVariant.bodySm}
textAlign={TextAlign.Center}
ellipsis
as="h6"
className="nft-default__text"
>
{name ?? t('unknownCollection')} <br /> #{tokenId}
</Text>
</Tag>
</Box>
);
}
@ -34,7 +54,7 @@ NftDefaultImage.propTypes = {
*/
tokenId: PropTypes.string,
/**
* The click handler for the NFT default image
* Controls the css class for the cursor hover
*/
handleImageClick: PropTypes.func,
clickable: PropTypes.bool,
};

17
ui/components/app/nft-default-image/nft-default-image.stories.js
View File

@ -11,14 +11,14 @@ export default {
tokenId: {
control: 'text',
},
handleImageClick: {
action: 'handleImageClick',
clickable: {
control: 'boolean',
},
},
args: {
name: null,
tokenId: '12345',
handleImageClick: null,
clickable: true,
},
};
@ -29,14 +29,3 @@ export const DefaultStory = (args) => (
);
DefaultStory.storyName = 'Default';
export const HandleImageClick = (args) => (
<div style={{ width: 200, height: 200 }}>
<NftDefaultImage {...args} />
</div>
);
HandleImageClick.args = {
// eslint-disable-next-line no-alert
handleImageClick: () => window.alert('NftDefaultImage clicked!'),
};

26
ui/components/app/nft-default-image/nft-default-image.test.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { fireEvent } from '@testing-library/react';
import { renderWithProvider } from '../../../../test/lib/render-helpers';
import NftDefaultImage from '.';
@ -14,7 +13,7 @@ describe('NFT Default Image', () => {
const props = {
name: 'NFT Name',
tokenId: '123',
handleImageClick: jest.fn(),
clickable: true,
};
const { container } = renderWithProvider(<NftDefaultImage {...props} />);
@ -22,7 +21,7 @@ describe('NFT Default Image', () => {
expect(container).toMatchSnapshot();
});
it('should match snapshot with missing image click handler', () => {
it('should match snapshot with missing clickable prop', () => {
const props = {
name: 'NFT Name',
tokenId: '123',
@ -58,18 +57,17 @@ describe('NFT Default Image', () => {
expect(nftElement).toBeInTheDocument();
});
it('should handle image click', () => {
const props = {
handleImageClick: jest.fn(),
};
const { queryByTestId } = renderWithProvider(
<NftDefaultImage {...props} />,
it('does not render component with clickable class when clickable is false', () => {
const { container } = renderWithProvider(
<NftDefaultImage name="NFT Name" tokenId="123" clickable={false} />,
);
expect(container.firstChild).not.toHaveClass('nft-default--clickable');
});
const nftImageElement = queryByTestId('nft-default-image');
fireEvent.click(nftImageElement);
expect(props.handleImageClick).toHaveBeenCalled();
it('renders component with clickable class when clickable is true', () => {
const { container } = renderWithProvider(
<NftDefaultImage name="NFT Name" tokenId="123" clickable />,
);
expect(container.firstChild).toHaveClass('nft-default--clickable');
});
});

2
ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
View File

@ -40,7 +40,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
class="box nft-details box--flex-direction-row"
>
<div
class="nft-details__top-section"
class="box nft-details__top-section box--gap-6 box--flex-direction-row"
>
<div
class="box nft-details__card box--flex-direction-row box--justify-content-center box--background-color-background-default box--rounded-md box--border-style-solid box--border-color-border-muted box--border-width-1 box--display-flex"

12
ui/components/app/nft-details/index.scss
View File

@ -50,6 +50,18 @@ $spacer-break-small: 16px;
}
}
&__nft-item {
margin-bottom: $spacer-break-small;
@include screen-sm-min {
margin-right: $spacer-break-large;
margin-bottom: 0;
max-width: $card-width-break-large;
flex: 0 0 $card-width-break-large;
height: $card-width-break-large;
}
}
&__image {
width: 100%;
object-fit: contain;

49
ui/components/app/nft-details/nft-details.js
View File

@ -25,6 +25,7 @@ import {
import { getNftImageAlt } from '../../../helpers/utils/nfts';
import {
getCurrentChainId,
getCurrentNetwork,
getIpfsGateway,
getSelectedIdentity,
} from '../../../selectors';
@ -55,6 +56,7 @@ import NftDefaultImage from '../nft-default-image';
import { ButtonIcon, IconName, Text } from '../../component-library';
import Tooltip from '../../ui/tooltip';
import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils';
import { NftItem } from '../../multichain/nft-item';
export default function NftDetails({ nft }) {
const {
@ -75,6 +77,8 @@ export default function NftDetails({ nft }) {
const ipfsGateway = useSelector(getIpfsGateway);
const nftContracts = useSelector(getNftContracts);
const currentNetwork = useSelector(getCurrentChainId);
const currentChain = useSelector(getCurrentNetwork);
const [addressCopied, handleAddressCopy] = useCopyToClipboard();
const nftContractName = nftContracts.find(({ address: contractAddress }) =>
@ -178,22 +182,35 @@ export default function NftDetails({ nft }) {
}
/>
<Box className="nft-details">
<div className="nft-details__top-section">
<Card
padding={0}
justifyContent={JustifyContent.center}
className="nft-details__card"
>
{image ? (
<img
className="nft-details__image"
src={nftImageURL}
alt={nftImageAlt}
<Box className="nft-details__top-section" gap={6}>
{process.env.MULTICHAIN ? (
<Box className="nft-details__nft-item">
<NftItem
src={image ? nftImageURL : ''}
alt={image ? nftImageAlt : ''}
name={name}
tokenId={tokenId}
networkName={currentChain.nickname}
networkSrc={currentChain.rpcPrefs?.imageUrl}
/>
) : (
<NftDefaultImage name={name} tokenId={tokenId} />
)}
</Card>
</Box>
) : (
<Card
padding={0}
justifyContent={JustifyContent.center}
className="nft-details__card"
>
{image ? (
<img
className="nft-details__image"
src={nftImageURL}
alt={nftImageAlt}
/>
) : (
<NftDefaultImage name={name} tokenId={tokenId} />
)}
</Card>
)}
<Box
flexDirection={FLEX_DIRECTION.COLUMN}
className="nft-details__info"
@ -243,7 +260,7 @@ export default function NftDetails({ nft }) {
) : null}
{inPopUp ? null : renderSendButton()}
</Box>
</div>
</Box>
<Box marginBottom={2}>
{lastSale ? (
<>

1
ui/components/app/nfts-items/index.scss
View File

@ -46,7 +46,6 @@
padding: 0;
&-image {
border-radius: 4px;
width: 100%;
height: 100%;
cursor: pointer;

75
ui/components/app/nfts-items/nfts-items.js
View File

@ -5,7 +5,6 @@ import { useHistory } from 'react-router-dom';
import { isEqual } from 'lodash';
import Box from '../../ui/box';
import Typography from '../../ui/typography/typography';
import Card from '../../ui/card';
import {
Color,
TypographyVariant,
@ -22,6 +21,7 @@ import {
getCurrentChainId,
getIpfsGateway,
getSelectedAddress,
getCurrentNetwork,
} from '../../../selectors';
import { ASSET_ROUTE } from '../../../helpers/constants/routes';
import { getAssetImageURL } from '../../../helpers/utils/util';
@ -32,6 +32,8 @@ import { getNftsDropdownState } from '../../../ducks/metamask/metamask';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { Icon, IconName } from '../../component-library';
import NftDefaultImage from '../nft-default-image';
import Card from '../../ui/card/card';
import { NftItem } from '../../multichain/nft-item';
const width =
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
@ -50,6 +52,7 @@ export default function NftsItems({
const previousCollectionKeys = usePrevious(collectionsKeys);
const selectedAddress = useSelector(getSelectedAddress);
const chainId = useSelector(getCurrentChainId);
const currentChain = useSelector(getCurrentNetwork);
const t = useI18nContext();
useEffect(() => {
@ -173,7 +176,6 @@ export default function NftsItems({
const nftImageAlt = getNftImageAlt(nft);
const handleImageClick = () =>
history.push(`${ASSET_ROUTE}/${address}/${tokenId}`);
return (
<Box
data-testid="nft-wrapper"
@ -181,34 +183,49 @@ export default function NftsItems({
key={`nft-${i}`}
className="nfts-items__item-wrapper"
>
<Card
padding={0}
justifyContent={JustifyContent.center}
className="nfts-items__item-wrapper__card"
>
{nftImage ? (
<button
className="nfts-items__item"
style={{
backgroundColor,
}}
onClick={handleImageClick}
>
<img
className="nfts-items__item-image"
data-testid="nft-image"
src={nftImage}
alt={nftImageAlt}
{process.env.MULTICHAIN ? (
<NftItem
src={nftImage}
alt={nftImageAlt}
name={name}
tokenId={tokenId}
networkName={currentChain.nickname}
networkSrc={currentChain.rpcPrefs?.imageUrl}
onClick={handleImageClick}
clickable
/>
) : (
<Card
className="nfts-items__item-wrapper__card"
padding={0}
justifyContent={JustifyContent.center}
>
{nftImage ? (
<button
className="nfts-items__item"
style={{
backgroundColor,
borderRadius: 4,
}}
onClick={handleImageClick}
>
<img
className="nfts-items__item-image"
data-testid="nft-image"
src={nftImage}
alt={nftImageAlt}
/>
</button>
) : (
<NftDefaultImage
name={name}
tokenId={tokenId}
handleImageClick={handleImageClick}
clickable
/>
</button>
) : (
<NftDefaultImage
name={name}
tokenId={tokenId}
handleImageClick={handleImageClick}
/>
)}
</Card>
)}
</Card>
)}
</Box>
);
})}

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

@ -15,3 +15,4 @@
@import 'network-list-item/';
@import 'network-list-menu/';
@import 'product-tour-popover/product-tour-popover';
@import 'nft-item/nft-item';

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

@ -0,0 +1 @@
export { NftItem } from './nft-item';

90
ui/components/multichain/nft-item/nft-item.js Normal file
View File

@ -0,0 +1,90 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import NftDefaultImage from '../../app/nft-default-image/nft-default-image';
import {
AvatarNetwork,
BadgeWrapper,
BadgeWrapperAnchorElementShape,
} from '../../component-library';
import {
BackgroundColor,
Display,
JustifyContent,
Size,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
export const NftItem = ({
alt,
name,
src,
networkName,
networkSrc,
tokenId,
onClick,
clickable = false,
}) => {
return (
<Box
className="nft-item__container"
data-testid="nft-item"
as="button"
onClick={onClick}
>
<BadgeWrapper
className={classnames('nft-item__badge-wrapper', {
'nft-item__badge-wrapper__clickable': clickable,
})}
anchorElementShape={BadgeWrapperAnchorElementShape.circular}
positionObj={{ top: -4, right: -4 }}
display={Display.BLOCK}
badge={
<AvatarNetwork
className="nft-item__network-badge"
data-testid="nft-network-badge"
size={Size.SM}
name={networkName}
src={networkSrc}
borderWidth={2}
borderColor={BackgroundColor.backgroundDefault}
/* We are using BackgroundColor.backgroundDefault here because
* there is no equivalent BorderColor to get the "cutout" effect
*/
/>
}
>
{src ? (
<Box
className="nft-item__item nft-item__item-image"
data-testid="nft-image"
as="img"
src={src}
alt={alt}
display={Display.Block}
justifyContent={JustifyContent.center}
/>
) : (
<NftDefaultImage
className="nft-item__default-image"
data-testid="nft-default-image"
name={name}
tokenId={tokenId}
clickable={clickable}
/>
)}
</BadgeWrapper>
</Box>
);
};
NftItem.propTypes = {
src: PropTypes.string,
alt: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
networkName: PropTypes.string.isRequired,
networkSrc: PropTypes.string.isRequired,
tokenId: PropTypes.string.isRequired,
onClick: PropTypes.func,
clickable: PropTypes.bool,
};

27
ui/components/multichain/nft-item/nft-item.scss Normal file
View File

@ -0,0 +1,27 @@
.nft-item {
&__container {
width: 100%;
height: 100%;
padding: 0;
border-radius: 8px;
cursor: unset;
}
&__badge-wrapper {
max-width: 100%;
position: relative;
align-self: center;
cursor: unset;
&__clickable {
cursor: pointer;
}
}
&__item-image {
border-radius: 8px;
padding: 0;
width: 100%;
height: 100%;
}
}

41
ui/components/multichain/nft-item/nft-item.stories.js Normal file
View File

@ -0,0 +1,41 @@
import React from 'react';
import { NftItem } from './nft-item';
export default {
title: 'Components/Multichain/NftItem',
argTypes: {
alt: {
control: 'text',
},
name: {
control: 'text',
},
src: {
control: 'text',
},
networkName: {
control: 'text',
},
networkSrc: {
control: 'text',
},
tokenId: {
control: 'text',
},
onClick: {
action: 'onClick',
},
},
args: {
alt: 'Join Archer and his 6,969 frens as they take a trip further down the rabbit hole in search of a world with vibrant art, great vibes, and psychedelic tales.',
name: 'Monkey Trip #2422',
src: 'https://i.seadn.io/gcs/files/878e670c38e0f02e58bf730c51c30d0c.jpg',
networkName: 'Ethereum Mainnet',
networkSrc: './images/eth_logo.png',
tokenId: '2422',
},
};
export const DefaultStory = (args) => <NftItem {...args} />;
DefaultStory.storyName = 'Default';

70
ui/components/multichain/nft-item/nft-item.test.js Normal file
View File

@ -0,0 +1,70 @@
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { NftItem } from '.';
describe('NftItem component', () => {
const mockOnClick = jest.fn();
afterEach(() => {
jest.clearAllMocks();
});
it('renders correctly with an image source', () => {
const { getByTestId } = render(
<NftItem
alt="Test Alt"
backgroundColor="red"
name="Test NFT"
src="test-src"
networkName="Test Network"
networkSrc="test-network-src"
tokenId="1"
onClick={mockOnClick}
/>,
);
expect(getByTestId('nft-item')).toBeInTheDocument();
expect(getByTestId('nft-network-badge')).toBeInTheDocument();
expect(getByTestId('nft-image')).toBeInTheDocument();
expect(getByTestId('nft-image')).toHaveAttribute('src', 'test-src');
});
it('renders correctly with default image when no image source is provided', () => {
const { getByTestId, queryByTestId } = render(
<NftItem
alt="Test Alt"
backgroundColor="red"
name="Test NFT"
src=""
networkName="Test Network"
networkSrc="test-network-src"
tokenId="1"
onClick={mockOnClick}
/>,
);
expect(getByTestId('nft-item')).toBeInTheDocument();
expect(getByTestId('nft-network-badge')).toBeInTheDocument();
expect(queryByTestId('nft-image')).not.toBeInTheDocument();
expect(getByTestId('nft-default-image')).toBeInTheDocument();
});
it('calls onClick when the NFT image is clicked', () => {
const { getByTestId } = render(
<NftItem
alt="Test Alt"
backgroundColor="red"
name="Test NFT"
src="test-src"
networkName="Test Network"
networkSrc="test-network-src"
tokenId="1"
onClick={mockOnClick}
/>,
);
fireEvent.click(getByTestId('nft-image'));
expect(mockOnClick).toHaveBeenCalled();
});
});