m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

replacing deprecated components and consts (#19563)

Browse Source 
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Dhruv 2023-07-26 01:52:26 +05:30 committed by GitHub
parent bab1670432
commit a10fb75f35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 121 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,6 @@
@import 'flask/experimental-area/index';
@import 'snaps/snap-content-footer/index';
@import 'snaps/snap-install-warning/index';
@import 'snaps/snap-remove-warning/index';
@import 'snaps/snap-ui-renderer/index';
@import 'snaps/snap-ui-markdown/index';
@import 'snaps/snap-delineator/index';

12
ui/components/app/snaps/snap-remove-warning/index.scss
View File

@ -1,12 +0,0 @@
.snap-remove-warning {
color: var(--color-text-default);
&__footer-button {
height: 40px;
margin-inline-end: 24px;
&:last-of-type {
margin-inline-end: 0;
}
}
}

101
ui/components/app/snaps/snap-remove-warning/snap-remove-warning.js
View File

@ -1,51 +1,64 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import Typography from '../../../ui/typography/typography';
import { TypographyVariant } from '../../../../helpers/constants/design-system';
import Box from '../../../ui/box/box';
import Popover from '../../../ui/popover';
import Button from '../../../ui/button';
import {
Text,
Box,
Button,
Modal,
ModalContent,
ModalHeader,
ModalOverlay,
BUTTON_VARIANT,
BUTTON_SIZES,
} from '../../../component-library';
export default function SnapRemoveWarning({ onCancel, onSubmit, snapName }) {
import {
BlockSize,
Display,
FlexDirection,
} from '../../../../helpers/constants/design-system';
export default function SnapRemoveWarning({
isOpen,
onCancel,
onSubmit,
snapName,
}) {
const t = useI18nContext();
const SnapRemoveWarningFooter = () => {
return (
<>
<Button
className="snap-remove-warning__footer-button"
type="default"
onClick={onCancel}
>
{t('nevermind')}
</Button>
<Button
id="popoverRemoveSnapButton"
className="snap-remove-warning__footer-button"
type="danger-primary"
onClick={onSubmit}
>
{t('removeSnap')}
</Button>
</>
);
};
return (
<Popover
className="snap-remove-warning"
title={t('pleaseConfirm')}
footer={<SnapRemoveWarningFooter />}
onClose={onCancel}
headerProps={{ padding: [6, 4, 0, 6] }}
>
<Box paddingRight={4} paddingBottom={4} paddingLeft={6}>
<Typography variant={TypographyVariant.H4}>
{t('removeSnapConfirmation', [snapName])}
</Typography>
</Box>
</Popover>
<Modal isOpen={isOpen} onClose={onCancel}>
<ModalOverlay />
<ModalContent
modalDialogProps={{
display: Display.Flex,
flexDirection: FlexDirection.Column,
gap: 4,
}}
>
<ModalHeader onClose={onCancel}>{t('pleaseConfirm')}</ModalHeader>
<Text>{t('removeSnapConfirmation', [snapName])}</Text>
<Box width={BlockSize.Full} display={Display.Flex} gap={4}>
<Button
block
variant={BUTTON_VARIANT.SECONDARY}
size={BUTTON_SIZES.LG}
onClick={onCancel}
>
{t('nevermind')}
</Button>
<Button
block
size={BUTTON_SIZES.LG}
id="popoverRemoveSnapButton"
danger
onClick={onSubmit}
>
{t('removeSnap')}
</Button>
</Box>
</ModalContent>
</Modal>
);
}
@ -62,4 +75,8 @@ SnapRemoveWarning.propTypes = {
* Name of snap
*/
snapName: PropTypes.string,
/**
* Whether the modal is open
*/
isOpen: PropTypes.bool,
};

29
ui/components/app/snaps/snap-remove-warning/snap-remove-warning.stories.js Normal file
View File

@ -0,0 +1,29 @@
import React from 'react';
import SnapRemoveWarning from './snap-remove-warning';
export default {
title: 'Components/App/Snaps/SnapRemoveWarning',
component: SnapRemoveWarning,
argTypes: {
onCancel: {
action: 'onCancel',
},
onSubmit: {
action: 'onSubmit',
},
snapName: {
control: 'text',
},
isOpen: {
control: 'boolean',
},
},
args: {
snapName: 'Snap Name',
isOpen: true,
},
};
export const DefaultStory = (args) => <SnapRemoveWarning {...args} />;
DefaultStory.storyName = 'Default';

12
ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js
View File

@ -2,17 +2,17 @@ import React from 'react';
import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown';
import {
TypographyVariant,
OVERFLOW_WRAP,
TextVariant,
OverflowWrap,
} from '../../../../helpers/constants/design-system';
import Typography from '../../../ui/typography/typography';
import { Text } from '../../../component-library';
const Paragraph = (props) => (
<Typography
<Text
{...props}
variant={TypographyVariant.H6}
variant={TextVariant.bodyMd}
className="snap-ui-markdown__text"
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
overflowWrap={OverflowWrap.BreakWord}
/>
);

19
ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.stories.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import { SnapUIMarkdown } from './snap-ui-markdown';
export default {
title: 'Components/App/Snaps/SnapUIMarkdown',
component: SnapUIMarkdown,
argTypes: {
children: {
control: 'text',
},
},
args: {
children: 'A Test String',
},
};
export const DefaultStory = (args) => <SnapUIMarkdown {...args} />;
DefaultStory.storyName = 'Default';

17
ui/pages/settings/snaps/view-snap/view-snap.js
View File

@ -189,15 +189,14 @@ function ViewSnap() {
{`${t('remove')} ${snapName}`}
</Text>
</Button>
{isShowingRemoveWarning && (
<SnapRemoveWarning
onCancel={() => setIsShowingRemoveWarning(false)}
onSubmit={async () => {
await dispatch(removeSnap(snap.id));
}}
snapName={snapName}
/>
)}
<SnapRemoveWarning
isOpen={isShowingRemoveWarning}
onCancel={() => setIsShowingRemoveWarning(false)}
onSubmit={async () => {
await dispatch(removeSnap(snap.id));
}}
snapName={snapName}
/>
</Box>
</Box>
</Box>