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

Replacing deprecated Popover with Modal (#19784)

Browse Source 
* Replacing deprecated Popover with Modal

* Fix Jest error
This commit is contained in:
jainex 2023-07-29 02:33:27 +05:30 committed by GitHub
parent b576c5245c
commit 6546aad334
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 73 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
View File

@ -16,9 +16,16 @@ import EditGasFeeButton from '../edit-gas-fee-button';
import GasDetailsItem from '../gas-details-item'; import GasDetailsItem from '../gas-details-item';
import Box from '../../ui/box'; import Box from '../../ui/box';
import InfoTooltip from '../../ui/info-tooltip'; import InfoTooltip from '../../ui/info-tooltip';
import Popover from '../../ui/popover';
import AppLoadingSpinner from '../app-loading-spinner'; import AppLoadingSpinner from '../app-loading-spinner';
import { Button, ButtonLink, Text } from '../../component-library'; import {
Text,
Button,
ButtonLink,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
} from '../../component-library';
const CancelSpeedupPopover = () => { const CancelSpeedupPopover = () => {
const { const {
@ -82,68 +89,74 @@ const CancelSpeedupPopover = () => {
}; };
return ( return (
<Popover <Modal
title={ isOpen
<>
{editGasMode === EditGasModes.cancel
? `❌${t('cancel')}`
: `🚀${t('speedUp')}`}
</>
}
onClose={() => closeModal(['cancelSpeedUpTransaction'])} onClose={() => closeModal(['cancelSpeedUpTransaction'])}
className="cancel-speedup-popover" className="cancel-speedup-popover"
> >
<AppLoadingSpinner className="cancel-speedup-popover__spinner" /> <ModalOverlay />
<div className="cancel-speedup-popover__wrapper"> <ModalContent>
<Text <ModalHeader
alignItems={AlignItems.center} onClose={() => closeModal(['cancelSpeedUpTransaction'])}
display={Display.Flex} marginBottom={4}
variant={TextVariant.bodySm}
marginBottom={2}
paddingBottom={2}
className="cancel-speedup-popover__description"
> >
{t('cancelSpeedUpLabel', [ {editGasMode === EditGasModes.cancel
<strong key="cancelSpeedupReplace">{t('replace')}</strong>, ? `❌${t('cancel')}`
])} : `🚀${t('speedUp')}`}
<InfoTooltip </ModalHeader>
position="top"
contentText={ <AppLoadingSpinner className="cancel-speedup-popover__spinner" />
<> <div className="cancel-speedup-popover__wrapper">
<Text variant={TextVariant.bodySm}> <Text
{t('cancelSpeedUpTransactionTooltip', [ alignItems={AlignItems.center}
editGasMode === EditGasModes.cancel display={Display.Flex}
? t('cancel') variant={TextVariant.bodySm}
: t('speedUp'), marginBottom={2}
])} paddingBottom={2}
</Text> className="cancel-speedup-popover__description"
<ButtonLink >
variant={TextVariant.bodySm} {t('cancelSpeedUpLabel', [
href="https://community.metamask.io/t/how-to-speed-up-or-cancel-transactions-on-metamask/3296" <strong key="cancelSpeedupReplace">{t('replace')}</strong>,
target="_blank" ])}
> <InfoTooltip
{t('learnMoreUpperCase')} position="top"
</ButtonLink> contentText={
</> <>
} <Text variant={TextVariant.bodySm}>
/> {t('cancelSpeedUpTransactionTooltip', [
</Text> editGasMode === EditGasModes.cancel
<Box ? t('cancel')
display={Display.Flex} : t('speedUp'),
alignItems={AlignItems.center} ])}
flexDirection={FlexDirection.Column} </Text>
marginTop={2} <ButtonLink
> variant={TextVariant.bodySm}
<div className="cancel-speedup-popover__edit-gas-button"> href="https://community.metamask.io/t/how-to-speed-up-or-cancel-transactions-on-metamask/3296"
{!appIsLoading && <EditGasFeeButton />} target="_blank"
</div> >
<div className="cancel-speedup-popover__gas-details"> {t('learnMoreUpperCase')}
<GasDetailsItem /> </ButtonLink>
</div> </>
</Box> }
<Button onClick={submitTransactionChange}>{t('submit')}</Button> />
</div> </Text>
</Popover> <Box
display={Display.Flex}
alignItems={AlignItems.center}
flexDirection={FlexDirection.Column}
marginTop={2}
>
<div className="cancel-speedup-popover__edit-gas-button">
{!appIsLoading && <EditGasFeeButton />}
</div>
<div className="cancel-speedup-popover__gas-details">
<GasDetailsItem />
</div>
</Box>
<Button onClick={submitTransactionChange}>{t('submit')}</Button>
</div>
</ModalContent>
</Modal>
); );
}; };