Chore/refactor smart swap modal (#20239)

* 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

ui/pages/swaps/build-quote/build-quote.js

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

ui/pages/swaps/prepare-swap-page/index.scss

@@ -368,37 +368,3 @@
 @keyframes slide-in {
   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;
-    }
-  }
-}

ui/pages/swaps/prepare-swap-page/prepare-swap-page.js

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

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

@@ -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,
-};

ui/pages/swaps/prepare-swap-page/smart-transactions-popover.stories.tsx

@@ -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';

ui/pages/swaps/prepare-swap-page/smart-transactions-popover.tsx

@@ -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>
+  );
+}