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/toggle-ipfs-modal.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

71 lines
1.9 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
import {
Box,
ButtonPrimary,
Modal,
ModalContent,
ModalHeader,
ModalOverlay,
Text,
} from '../../component-library';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { hideIpfsModal, setIpfsGateway } from '../../../store/actions';
import { IPFS_DEFAULT_GATEWAY_URL } from '../../../../shared/constants/network';
import {
Size,
TextColor,
TextVariant,
} from '../../../helpers/constants/design-system';
export const ToggleIpfsModal = ({ onClose }) => {
const t = useI18nContext();
const dispatch = useDispatch();
return (
<Modal isOpen onClose={onClose} className="toggle-ipfs-modal">
<ModalOverlay />
<ModalContent>
<ModalHeader onClose={onClose}>{t('showNft')}</ModalHeader>
<Box className="toggle-ipfs-modal" marginTop={6}>
<Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
{t('ipfsToggleModalDescriptionOne')}
</Text>
<Text
variant={TextVariant.bodyMd}
color={TextColor.textAlternative}
marginTop={6}
>
{t('ipfsToggleModalDescriptionTwo', [
<Text
variant={TextVariant.bodyMdBold}
color={TextColor.textAlternative}
as="span"
key="span"
>
{t('ipfsToggleModalSettings')},
</Text>,
])}
</Text>
</Box>
<ButtonPrimary
block
marginTop={9}
onClick={() => {
dispatch(setIpfsGateway(IPFS_DEFAULT_GATEWAY_URL));
dispatch(hideIpfsModal());
}}
size={Size.LG}
>
{t('confirm')}
</ButtonPrimary>
</ModalContent>
</Modal>
);
};
ToggleIpfsModal.propTypes = {
onClose: PropTypes.func.isRequired,
};