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

Chore/refactor smart swap modal (#20239)

Browse Source 
* Add story for smart tx popover

* Use tsx for smart tx popover story and add btn to open it

* Refactor smart tx popover component to tsx and style

* Fix modal not triggering

* Remove bold from bullet points

* Adjust margins
This commit is contained in:
infiniteflower 2023-08-01 09:31:53 -04:00 committed by GitHub
parent 2ad2827bab
commit 10ffc1ec84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 158 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui/pages/swaps/build-quote/build-quote.js
View File

@ -563,14 +563,14 @@ export default function BuildQuote({
return ( return (
<div className="build-quote"> <div className="build-quote">
<div className="build-quote__content"> <div className="build-quote__content">
{showSmartTransactionsOptInPopover && ( <SmartTransactionsPopover
<SmartTransactionsPopover onEnableSmartTransactionsClick={onEnableSmartTransactionsClick}
onEnableSmartTransactionsClick={onEnableSmartTransactionsClick} onCloseSmartTransactionsOptInPopover={
onCloseSmartTransactionsOptInPopover={ onCloseSmartTransactionsOptInPopover
onCloseSmartTransactionsOptInPopover }
} isOpen={showSmartTransactionsOptInPopover}
/> />
)}
<div className="build-quote__dropdown-input-pair-header"> <div className="build-quote__dropdown-input-pair-header">
<div className="build-quote__input-label">{t('swapSwapFrom')}</div> <div className="build-quote__input-label">{t('swapSwapFrom')}</div>
{!isSwapsDefaultTokenSymbol(fromTokenSymbol, chainId) && ( {!isSwapsDefaultTokenSymbol(fromTokenSymbol, chainId) && (

34
ui/pages/swaps/prepare-swap-page/index.scss
View File

@ -368,37 +368,3 @@
@keyframes slide-in { @keyframes slide-in {
100% { transform: translateY(0%); } 100% { transform: translateY(0%); }
} }
.smart-transactions-popover {
transform: translateY(-100%);
animation: slide-in 0.5s forwards;
&__content {
flex-direction: column;
ul {
list-style: inside;
}
a {
color: var(--color-primary-default);
cursor: pointer;
}
}
&__footer {
flex-direction: column;
flex: 1;
align-items: center;
border-top: 0;
button {
border-radius: 50px;
}
a {
font-size: inherit;
padding-bottom: 0;
}
}
}

17
ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
View File

@ -846,14 +846,15 @@ export default function PrepareSwapPage({
</Box> </Box>
</ModalContent> </ModalContent>
</Modal> </Modal>
{showSmartTransactionsOptInPopover && (
<SmartTransactionsPopover <SmartTransactionsPopover
onEnableSmartTransactionsClick={onEnableSmartTransactionsClick} onEnableSmartTransactionsClick={onEnableSmartTransactionsClick}
onCloseSmartTransactionsOptInPopover={ onCloseSmartTransactionsOptInPopover={
onCloseSmartTransactionsOptInPopover onCloseSmartTransactionsOptInPopover
} }
/> isOpen={showSmartTransactionsOptInPopover}
)} />
<div className="prepare-swap-page__swap-from-content"> <div className="prepare-swap-page__swap-from-content">
<Box <Box
display={DISPLAY.FLEX} display={DISPLAY.FLEX}

121
ui/pages/swaps/prepare-swap-page/smart-transactions-popover.js
View File

@ -1,121 +0,0 @@
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { I18nContext } from '../../../contexts/i18n';
import Button from '../../../components/ui/button';
import Box from '../../../components/ui/box';
import Popover from '../../../components/ui/popover';
import Typography from '../../../components/ui/typography';
import {
TypographyVariant,
DISPLAY,
TextVariant,
FLEX_DIRECTION,
FONT_WEIGHT,
TextColor,
} from '../../../helpers/constants/design-system';
import { Text } from '../../../components/component-library';
import PopoverCustomBackground from '../popover-custom-background/popover-custom-background';
export default function SmartTransactionsPopover({
onEnableSmartTransactionsClick,
onCloseSmartTransactionsOptInPopover,
}) {
const t = useContext(I18nContext);
return (
<Popover
title={t('smartSwapsAreHere')}
footer={
<>
<Button type="primary" onClick={onEnableSmartTransactionsClick}>
{t('enableSmartSwaps')}
</Button>
<Box marginTop={1}>
<Text variant={TextVariant.bodyMd} as="h6">
<Button
type="link"
onClick={onCloseSmartTransactionsOptInPopover}
className="smart-transactions-popover__no-thanks-link"
>
{t('noThanksVariant2')}
</Button>
</Text>
</Box>
</>
}
footerClassName="smart-transactions-popover__footer"
className="smart-transactions-popover"
CustomBackground={() => {
return (
<PopoverCustomBackground
onClose={onCloseSmartTransactionsOptInPopover}
/>
);
}}
>
<Box
paddingRight={6}
paddingLeft={6}
paddingTop={0}
paddingBottom={0}
display={DISPLAY.FLEX}
className="smart-transactions-popover__content"
>
<Box
marginTop={0}
marginBottom={4}
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
>
<img
src="./images/logo/smart-transactions-header.png"
alt={t('swapSwapSwitch')}
/>
</Box>
<Typography variant={TypographyVariant.H7} marginTop={0}>
{t('smartSwapsDescription')}
</Typography>
<Typography
as="ul"
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.BOLD}
marginTop={3}
>
<li>{t('stxBenefit1')}</li>
<li>{t('stxBenefit2')}</li>
<li>{t('stxBenefit3')}</li>
<li>
{t('stxBenefit4')}
<Typography
as="span"
fontWeight={FONT_WEIGHT.NORMAL}
variant={TypographyVariant.H7}
>
{' *'}
</Typography>
</li>
</Typography>
<Typography
variant={TypographyVariant.H8}
color={TextColor.textAlternative}
boxProps={{ marginTop: 3 }}
>
{t('smartSwapsSubDescription')}&nbsp;
<Typography
as="span"
fontWeight={FONT_WEIGHT.BOLD}
variant={TypographyVariant.H8}
color={TextColor.textAlternative}
>
{t('stxYouCanOptOut')}&nbsp;
</Typography>
</Typography>
</Box>
</Popover>
);
}
SmartTransactionsPopover.propTypes = {
onEnableSmartTransactionsClick: PropTypes.func.isRequired,
onCloseSmartTransactionsOptInPopover: PropTypes.func.isRequired,
};

39
ui/pages/swaps/prepare-swap-page/smart-transactions-popover.stories.tsx Normal file
View File

@ -0,0 +1,39 @@
import React from 'react';
import { StoryFn, Meta } from '@storybook/react';
import { useArgs } from '@storybook/client-api';
import { BUTTON_VARIANT, Button } from '../../../components/component-library';
import SmartTransactionPopover from './smart-transactions-popover';
export default {
title: 'Pages/Swaps/SmartTransactionsPopover',
component: SmartTransactionPopover,
argTypes: {
isShowingModal: {
control: 'boolean',
},
},
} as Meta<typeof SmartTransactionPopover>;
export const DefaultStory: StoryFn<typeof SmartTransactionPopover> = () => {
const [{ isShowingModal }, updateArgs] = useArgs();
const toggleModal = () => updateArgs({ isShowingModal: !isShowingModal });
return (
<>
<Button variant={BUTTON_VARIANT.PRIMARY} onClick={toggleModal}>
Open modal
</Button>
{isShowingModal && (
<SmartTransactionPopover
isOpen={isShowingModal}
onEnableSmartTransactionsClick={() => {
console.log('onEnableSmartTransactionsClick');
}}
onCloseSmartTransactionsOptInPopover={toggleModal}
/>
)}
</>
);
};
DefaultStory.storyName = 'Default';

102
ui/pages/swaps/prepare-swap-page/smart-transactions-popover.tsx Normal file
View File

@ -0,0 +1,102 @@
import React, { useContext } from 'react';
import { I18nContext } from '../../../contexts/i18n';
import {
TextColor,
Display,
FlexDirection,
FontWeight,
BlockSize,
} from '../../../helpers/constants/design-system';
import {
Modal,
ModalContent,
ModalHeader,
ModalOverlay,
Text,
Box,
Button,
BUTTON_VARIANT,
} from '../../../components/component-library';
interface Props {
onEnableSmartTransactionsClick: () => void;
onCloseSmartTransactionsOptInPopover: () => void;
isOpen: boolean;
}
export default function SmartTransactionsPopover({
onEnableSmartTransactionsClick,
onCloseSmartTransactionsOptInPopover,
isOpen,
}: Props) {
const t = useContext(I18nContext);
return (
<Modal isOpen={isOpen} onClose={onCloseSmartTransactionsOptInPopover}>
<ModalOverlay />
<ModalContent>
<ModalHeader onClose={onCloseSmartTransactionsOptInPopover}>
{t('smartSwapsAreHere')}
</ModalHeader>
<Box
display={Display.Flex}
flexDirection={FlexDirection.Column}
gap={4}
marginTop={4}
>
<Box display={Display.Flex} flexDirection={FlexDirection.Column}>
<img
src="./images/logo/smart-transactions-header.png"
alt={t('swapSwapSwitch')}
/>
</Box>
<Text>{t('smartSwapsDescription')}</Text>
<Text
as="ul"
marginTop={3}
marginBottom={3}
style={{ listStyle: 'inside' }}
>
<li>{t('stxBenefit1')}</li>
<li>{t('stxBenefit2')}</li>
<li>{t('stxBenefit3')}</li>
<li>
{t('stxBenefit4')}
<Text as="span" fontWeight={FontWeight.Normal}>
{' *'}
</Text>
</li>
</Text>
<Text color={TextColor.textAlternative}>
{t('smartSwapsSubDescription')}&nbsp;
<Text
as="span"
fontWeight={FontWeight.Bold}
color={TextColor.textAlternative}
>
{t('stxYouCanOptOut')}&nbsp;
</Text>
</Text>
<Button
variant={BUTTON_VARIANT.PRIMARY}
onClick={onEnableSmartTransactionsClick}
width={BlockSize.Full}
>
{t('enableSmartSwaps')}
</Button>
<Button
type="link"
variant={BUTTON_VARIANT.LINK}
onClick={onCloseSmartTransactionsOptInPopover}
width={BlockSize.Full}
>
{t('noThanksVariant2')}
</Button>
</Box>
</ModalContent>
</Modal>
);
}