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 (#20413)

Browse Source 
* Replacing deprecated Popover with Modal

* Replacing deprecated Popover with Modal in detected-token-ignored-popover

* Remove unused code

* fix hover problem

* update footerButton size to large

* Lint fix

* UI updates and removing unused CSS

* reset chnages in edit-gas-popover.component.js

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
jainex 2023-08-18 22:24:50 +05:30 committed by GitHub
parent 7f157cabf9
commit 3d9457e517
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 78 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -91,7 +91,6 @@
@import 'detected-token/detected-token-aggregators/index';
@import 'detected-token/detected-token-values/index';
@import 'detected-token/detected-token-details/index';
@import 'detected-token/detected-token-ignored-popover/index';
@import 'detected-token/detected-token-selection-popover/index';
@import 'network-account-balance-header/index';
@import 'approve-content-card/index';

103
ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js
View File

@ -3,64 +3,78 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import Popover from '../../../ui/popover';
import Button from '../../../ui/button';
import { TextVariant } from '../../../../helpers/constants/design-system';
import { Text } from '../../../component-library';
import {
Display,
JustifyContent,
} from '../../../../helpers/constants/design-system';
import {
Text,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
Button,
BUTTON_VARIANT,
Box,
BUTTON_SIZES,
} from '../../../component-library';
const DetectedTokenIgnoredPopover = ({
partiallyIgnoreDetectedTokens,
onCancelIgnore,
handleClearTokensSelection,
isOpen,
}) => {
const t = useI18nContext();
const footer = (
<>
<Button
className="detected-token-ignored-popover__ignore-button"
type="secondary"
onClick={onCancelIgnore}
>
{t('cancel')}
</Button>
<Button
className="detected-token-ignored-popover__import-button"
type="primary"
onClick={handleClearTokensSelection}
>
{t('confirm')}
</Button>
</>
);
return (
<Popover
title={
partiallyIgnoreDetectedTokens
? t('importSelectedTokens')
: t('areYouSure')
}
<Modal
isOpen={isOpen}
className={classNames('detected-token-ignored-popover', {
'detected-token-ignored-popover--import': partiallyIgnoreDetectedTokens,
'detected-token-ignored-popover--ignore':
!partiallyIgnoreDetectedTokens,
})}
footer={footer}
onClose={onCancelIgnore}
autoFocus={false}
>
<Text
variant={TextVariant.bodySm}
as="h6"
marginTop={0}
marginRight={5}
marginBottom={7}
marginLeft={5}
>
{partiallyIgnoreDetectedTokens
? t('importSelectedTokensDescription')
: t('ignoreTokenWarning')}
</Text>
</Popover>
<ModalOverlay />
<ModalContent>
<ModalHeader marginBottom={4}>
{partiallyIgnoreDetectedTokens
? t('importSelectedTokens')
: t('areYouSure')}
</ModalHeader>
<Text marginBottom={4}>
{partiallyIgnoreDetectedTokens
? t('importSelectedTokensDescription')
: t('ignoreTokenWarning')}
</Text>
<Box
display={Display.Flex}
justifyContent={JustifyContent.center}
gap={4}
>
<Button
className="detected-token-ignored-popover__ignore-button"
block
variant={BUTTON_VARIANT.SECONDARY}
onClick={onCancelIgnore}
size={BUTTON_SIZES.LG}
>
{t('cancel')}
</Button>
<Button
className="detected-token-ignored-popover__import-button"
block
variant={BUTTON_VARIANT.PRIMARY}
onClick={handleClearTokensSelection}
size={BUTTON_SIZES.LG}
>
{t('confirm')}
</Button>
</Box>
</ModalContent>
</Modal>
);
};
@ -68,6 +82,7 @@ DetectedTokenIgnoredPopover.propTypes = {
partiallyIgnoreDetectedTokens: PropTypes.bool.isRequired,
onCancelIgnore: PropTypes.func.isRequired,
handleClearTokensSelection: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
};
export default DetectedTokenIgnoredPopover;

21
ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.stories.js
View File

@ -4,14 +4,23 @@ import DetectedTokenIgnoredPopover from './detected-token-ignored-popover';
export default {
title: 'Components/App/DetectedToken/DetectedTokenIgnoredPopover',
argTypes: {
onCancelIgnore: {
control: 'func',
action: 'onCancelIgnore',
},
handleClearTokensSelection: {
control: 'func',
action: 'handleClearTokensSelection',
},
partiallyIgnoreDetectedTokens: {
control: 'boolean',
},
isOpen: {
control: 'boolean',
},
},
args: {
partiallyIgnoreDetectedTokens: false,
isOpen: true,
},
};
@ -22,3 +31,9 @@ const Template = (args) => {
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const PartiallyIgnoreDetectedTokens = Template.bind({});
PartiallyIgnoreDetectedTokens.args = {
partiallyIgnoreDetectedTokens: true,
};

21
ui/components/app/detected-token/detected-token-ignored-popover/index.scss
View File

@ -1,21 +0,0 @@
.detected-token-ignored-popover {
&__ignore-button {
margin-inline-end: 8px;
}
&__import-button {
margin-inline-start: 8px;
}
&--ignore {
.popover-header {
margin-inline-start: 85px;
}
}
&--import {
.popover-header {
margin-inline-start: 50px;
}
}
}

1
ui/components/app/detected-token/detected-token.js
View File

@ -161,6 +161,7 @@ const DetectedToken = ({ setShowDetectedTokens }) => {
<>
{showDetectedTokenIgnoredPopover && (
<DetectedTokenIgnoredPopover
isOpen
onCancelIgnore={onCancelIgnore}
handleClearTokensSelection={handleClearTokensSelection}
partiallyIgnoreDetectedTokens={partiallyIgnoreDetectedTokens}