1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/nft-default-image/nft-default-image.js
Nidhi Kumari 4c37448c97
Added IPFS toggle (#20172)
* added ipfs toggle

* added placeholder valur

* fixed snapshot

* updated tests

* updated spec file

* hide input if toggle is disabled

* updated e2e tests for nft image

* fixed view-ercc-1155 spec

* updated e2e tests for nfts

* added ipfs toggle modal

* updated UI for ipfs

* updated tests

* updated classname

* added placeholder image

* lint fix

* removed prop ipfsEnabled and used with selector

* fixed ui for ipfs toggle

* updated test

* updated  test to handle cases

* nit fix

* ensure default image height match nft image
2023-08-01 23:51:51 +05:30

59 lines
1.5 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useDispatch, useSelector } from 'react-redux';
import {
Display,
AlignItems,
JustifyContent,
BorderRadius,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { ButtonLink, Box } from '../../component-library';
import { showIpfsModal } from '../../../store/actions';
import { getIpfsGateway } from '../../../selectors';
export default function NftDefaultImage({ className, clickable }) {
const t = useI18nContext();
const dispatch = useDispatch();
const isIpfsEnabled = useSelector(getIpfsGateway);
return (
<Box
tabIndex={0}
data-testid="nft-default-image"
className={classnames(className, 'nft-default', {
'nft-default--clickable': clickable,
})}
display={Display.Flex}
alignItems={AlignItems.Center}
justifyContent={JustifyContent.Center}
borderRadius={BorderRadius.LG}
>
{!isIpfsEnabled && (
<ButtonLink
block
className="nft-default__button"
onClick={(e) => {
e.stopPropagation();
dispatch(showIpfsModal());
}}
>
{t('show')}
</ButtonLink>
)}
</Box>
);
}
NftDefaultImage.propTypes = {
/**
* Controls the css class for the cursor hover
*/
clickable: PropTypes.bool,
/**
* An additional className to apply to the NFT default image
*/
className: PropTypes.string,
};