m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +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 Box from '../../ui/box';
import InfoTooltip from '../../ui/info-tooltip';
import Popover from '../../ui/popover';
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 {
@ -82,68 +89,74 @@ const CancelSpeedupPopover = () => {
};
return (
<Popover
title={
<>
{editGasMode === EditGasModes.cancel
? `❌${t('cancel')}`
: `🚀${t('speedUp')}`}
</>
}
<Modal
isOpen
onClose={() => closeModal(['cancelSpeedUpTransaction'])}
className="cancel-speedup-popover"
>
<AppLoadingSpinner className="cancel-speedup-popover__spinner" />
<div className="cancel-speedup-popover__wrapper">
<Text
alignItems={AlignItems.center}
display={Display.Flex}
variant={TextVariant.bodySm}
marginBottom={2}
paddingBottom={2}
className="cancel-speedup-popover__description"
<ModalOverlay />
<ModalContent>
<ModalHeader
onClose={() => closeModal(['cancelSpeedUpTransaction'])}
marginBottom={4}
>
{t('cancelSpeedUpLabel', [
<strong key="cancelSpeedupReplace">{t('replace')}</strong>,
])}
<InfoTooltip
position="top"
contentText={
<>
<Text variant={TextVariant.bodySm}>
{t('cancelSpeedUpTransactionTooltip', [
editGasMode === EditGasModes.cancel
? t('cancel')
: t('speedUp'),
])}
</Text>
<ButtonLink
variant={TextVariant.bodySm}
href="https://community.metamask.io/t/how-to-speed-up-or-cancel-transactions-on-metamask/3296"
target="_blank"
>
{t('learnMoreUpperCase')}
</ButtonLink>
</>
}
/>
</Text>
<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>
</Popover>
{editGasMode === EditGasModes.cancel
? `❌${t('cancel')}`
: `🚀${t('speedUp')}`}
</ModalHeader>
<AppLoadingSpinner className="cancel-speedup-popover__spinner" />
<div className="cancel-speedup-popover__wrapper">
<Text
alignItems={AlignItems.center}
display={Display.Flex}
variant={TextVariant.bodySm}
marginBottom={2}
paddingBottom={2}
className="cancel-speedup-popover__description"
>
{t('cancelSpeedUpLabel', [
<strong key="cancelSpeedupReplace">{t('replace')}</strong>,
])}
<InfoTooltip
position="top"
contentText={
<>
<Text variant={TextVariant.bodySm}>
{t('cancelSpeedUpTransactionTooltip', [
editGasMode === EditGasModes.cancel
? t('cancel')
: t('speedUp'),
])}
</Text>
<ButtonLink
variant={TextVariant.bodySm}
href="https://community.metamask.io/t/how-to-speed-up-or-cancel-transactions-on-metamask/3296"
target="_blank"
>
{t('learnMoreUpperCase')}
</ButtonLink>
</>
}
/>
</Text>
<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>
);
};