mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
replacing deprecated components and consts (#19563)
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
parent
bab1670432
commit
a10fb75f35
@ -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';
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -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,
|
||||
};
|
||||
|
@ -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';
|
@ -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}
|
||||
/>
|
||||
);
|
||||
|
||||
|
@ -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';
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user