From fd6acbbc7b663f6d87fc593a9e62551cc2a352ad Mon Sep 17 00:00:00 2001
From: Micaela Estabillo <micaela.estabillo@consensys.net>
Date: Mon, 28 Oct 2024 16:20:22 -0700
Subject: [PATCH] chore: quote details wip

---
 app/_locales/en/messages.json                 |  12 ++
 .../bridge-quote-details-modal.stories.tsx    | 152 ++++++++++++++++++
 .../quotes/bridge-quote-details-modal.tsx     |  92 +++++++++++
 .../bridge/quotes/bridge-quotes-modal.tsx     |  58 ++++---
 ui/pages/bridge/quotes/index.scss             |  56 ++++++-
 ui/pages/bridge/quotes/quote-info-row.tsx     |  10 +-
 6 files changed, 349 insertions(+), 31 deletions(-)
 create mode 100644 ui/pages/bridge/quotes/bridge-quote-details-modal.stories.tsx
 create mode 100644 ui/pages/bridge/quotes/bridge-quote-details-modal.tsx

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 4e1bf29b98c1..b1413bc28489 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2549,6 +2549,9 @@
   "included": {
     "message": "included"
   },
+  "includedFees": {
+    "message": "Included fees"
+  },
   "infuraBlockedNotification": {
     "message": "MetaMask is unable to connect to the blockchain host. Review possible reasons $1.",
     "description": "$1 is a clickable link with with text defined by the 'here' key"
@@ -5655,6 +5658,9 @@
     "message": "Allow swapping of $1",
     "description": "Shows a user that they need to allow a token for swapping on their hardware wallet"
   },
+  "swapAmount": {
+    "message": "Swap amount"
+  },
   "swapAmountReceived": {
     "message": "Guaranteed amount"
   },
@@ -6213,6 +6219,12 @@
   "totalFees": {
     "message": "Total fees"
   },
+  "totalPaid": {
+    "message": "Total paid"
+  },
+  "totalReceived": {
+    "message": "Total received"
+  },
   "totalVolume": {
     "message": "Total volume"
   },
diff --git a/ui/pages/bridge/quotes/bridge-quote-details-modal.stories.tsx b/ui/pages/bridge/quotes/bridge-quote-details-modal.stories.tsx
new file mode 100644
index 000000000000..1f3800acf0d7
--- /dev/null
+++ b/ui/pages/bridge/quotes/bridge-quote-details-modal.stories.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import { Provider, useSelector } from 'react-redux';
+import configureStore from '../../../store/store';
+import { BridgeQuotesModal } from './bridge-quotes-modal';
+import { createBridgeMockStore } from '../../../../test/jest/mock-store';
+import mockBridgeQuotesErc20Erc20 from '../../../../test/data/bridge/mock-quotes-erc20-erc20.json';
+import { BridgeQuoteDetailsModal } from './bridge-quote-details-modal';
+import { getBridgeQuotes } from '../../../ducks/bridge/selectors';
+import { Modal, ModalOverlay } from '../../../components/component-library';
+
+// export const NoTokenPricesAvailableStory = () => {
+//   return <BridgeQuotesModal onClose={() => {}} isOpen={true} />;
+// };
+// NoTokenPricesAvailableStory.storyName = 'Token Prices Not Available';
+// NoTokenPricesAvailableStory.decorators = [
+//   (story) => (
+//     <Provider
+//       store={configureStore(
+//         createBridgeMockStore({}, {}, { quotes: mockBridgeQuotesErc20Erc20 }),
+//       )}
+//     >
+//       {story()}
+//     </Provider>
+//   ),
+// ];
+
+export const DefaultStory = () => {
+  const { activeQuote } = useSelector(getBridgeQuotes);
+  return activeQuote ? (
+    <BridgeQuoteDetailsModal
+      onBack={() => {}}
+      onSelect={() => {}}
+      expandedQuote={activeQuote}
+    />
+  ) : null;
+};
+
+const storybook = {
+  title: 'Pages/Bridge/BridgeQuoteDetailsModal',
+  component: DefaultStory,
+};
+
+DefaultStory.storyName = 'Default';
+DefaultStory.decorators = [
+  (Story) => (
+    <Modal isOpen={true} className="quotes-modal" onClose={() => {}}>
+      <ModalOverlay />
+      <Provider
+        store={configureStore(
+          createBridgeMockStore(
+            {},
+            {
+              toNativeExchangeRate: 1,
+              toTokenExchangeRate: 0.99,
+            },
+            { quotes: mockBridgeQuotesErc20Erc20 },
+            {
+              currencyRates: {
+                ETH: { conversionRate: 2514.5 },
+              },
+              marketData: {
+                '0x1': {
+                  ['0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85']: {
+                    price: 0.00039762010419237126,
+                    contractPercentChange1d: 0.004,
+                    priceChange1d: 0.00004,
+                  },
+                },
+              },
+            },
+          ),
+        )}
+      >
+        <Story />
+      </Provider>
+    </Modal>
+  ),
+];
+
+// export const PositiveArbitrage = () => {
+//   return <BridgeQuotesModal onClose={() => {}} isOpen={true} />;
+// };
+// PositiveArbitrage.decorators = [
+//   (story) => (
+//     <Provider
+//       store={configureStore(
+//         createBridgeMockStore(
+//           {},
+//           {
+//             toNativeExchangeRate: 1,
+//             toTokenExchangeRate: 2.1,
+//           },
+//           { quotes: mockBridgeQuotesErc20Erc20 },
+//           {
+//             currencyRates: {
+//               ETH: { conversionRate: 2514.5 },
+//             },
+//             marketData: {
+//               '0x1': {
+//                 ['0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85']: {
+//                   price: 0.00039762010419237126,
+//                   contractPercentChange1d: 0.004,
+//                   priceChange1d: 0.00004,
+//                 },
+//               },
+//             },
+//           },
+//         ),
+//       )}
+//     >
+//       {story()}
+//     </Provider>
+//   ),
+// ];
+
+// export const QuoteDetails = () => {
+//   return <BridgeQuotesModal onClose={() => {}} isOpen={true} />;
+// };
+// QuoteDetails.decorators = [
+//   (story) => (
+//     <Provider
+//       store={configureStore(
+//         createBridgeMockStore(
+//           {},
+//           {
+//             toNativeExchangeRate: 1,
+//             toTokenExchangeRate: 2.1,
+//           },
+//           { quotes: mockBridgeQuotesErc20Erc20 },
+//           {
+//             currencyRates: {
+//               ETH: { conversionRate: 2514.5 },
+//             },
+//             marketData: {
+//               '0x1': {
+//                 ['0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85']: {
+//                   price: 0.00039762010419237126,
+//                   contractPercentChange1d: 0.004,
+//                   priceChange1d: 0.00004,
+//                 },
+//               },
+//             },
+//           },
+//         ),
+//       )}
+//     >
+//       {story()}
+//     </Provider>
+//   ),
+// ];
+
+export default storybook;
diff --git a/ui/pages/bridge/quotes/bridge-quote-details-modal.tsx b/ui/pages/bridge/quotes/bridge-quote-details-modal.tsx
new file mode 100644
index 000000000000..bbf28c9c86db
--- /dev/null
+++ b/ui/pages/bridge/quotes/bridge-quote-details-modal.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  Box,
+  Button,
+  ModalContent,
+  ModalHeader,
+  Text,
+} from '../../../components/component-library';
+import { Footer } from '../../../components/multichain/pages/page';
+import {
+  TextAlign,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { QuoteMetadata, QuoteResponse } from '../types';
+import { QuoteInfoRow } from './quote-info-row';
+
+export const BridgeQuoteDetailsModal = ({
+  onBack,
+  onSelect,
+  expandedQuote,
+}: {
+  onBack: () => void;
+  onSelect: () => void;
+  expandedQuote: QuoteResponse & QuoteMetadata;
+}) => {
+  const t = useI18nContext();
+
+  const {
+    quote,
+    estimatedProcessingTimeInSeconds,
+    swapRate,
+    sentAmount,
+    totalNetworkFee,
+    toTokenAmount,
+  } = expandedQuote;
+
+  return (
+    <ModalContent modalDialogProps={{ padding: 0 }}>
+      <ModalHeader onBack={onBack}>
+        <Text variant={TextVariant.headingSm} textAlign={TextAlign.Center}>
+          {t('swapQuoteDetails')}
+        </Text>
+      </ModalHeader>
+      <Box className="quotes-modal__quote-details">
+        <div className="quote-detail-group">
+          <QuoteInfoRow label={t('source')} description={quote.bridges[0]} />
+          <QuoteInfoRow label={t('quoteRate')} description={`${swapRate}`} />
+          <QuoteInfoRow
+            label={t('estimatedTime')}
+            description={`${estimatedProcessingTimeInSeconds}`}
+          />
+        </div>
+        <hr />
+        <div className="quote-detail-group">
+          <QuoteInfoRow label={t('swapAmount')} description={`${sentAmount}`} />
+          <QuoteInfoRow
+            label={t('includedFees')}
+            description={'MM fee'}
+            tooltipText="tooltip"
+          />
+          <QuoteInfoRow
+            label={t('networkFee')}
+            description={`${totalNetworkFee}`}
+            tooltipText="tooltip"
+          />
+          <QuoteInfoRow
+            label={t('totalPaid')}
+            description={'sentAmount + networkFee'}
+          />
+        </div>
+        <hr />
+        <div className="quote-detail-group">
+          <QuoteInfoRow
+            label={t('totalReceived')}
+            description={`${toTokenAmount}`}
+          />
+        </div>
+      </Box>
+      <Footer>
+        <Button
+          className="quotes-modal__quote-details__use-quote-button"
+          data-testid="use-quote-button"
+          onClick={onSelect}
+          disabled={false}
+        >
+          {t('bridgeUseQuote')}
+        </Button>
+      </Footer>
+    </ModalContent>
+  );
+};
diff --git a/ui/pages/bridge/quotes/bridge-quotes-modal.tsx b/ui/pages/bridge/quotes/bridge-quotes-modal.tsx
index ba420fedd482..de2d375be4d4 100644
--- a/ui/pages/bridge/quotes/bridge-quotes-modal.tsx
+++ b/ui/pages/bridge/quotes/bridge-quotes-modal.tsx
@@ -3,7 +3,6 @@ import { IconName } from '@metamask/snaps-sdk/jsx';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   Box,
-  Button,
   Icon,
   IconSize,
   Modal,
@@ -25,12 +24,12 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getCurrentCurrency } from '../../../selectors';
 import { setSelectedQuote, setSortOrder } from '../../../ducks/bridge/actions';
 import { SortOrder, QuoteMetadata, QuoteResponse } from '../types';
-import { Footer } from '../../../components/multichain/pages/page';
 import { useCountdownTimer } from '../../../hooks/bridge/useCountdownTimer';
 import {
   getBridgeQuotes,
   getBridgeSortOrder,
 } from '../../../ducks/bridge/selectors';
+import { BridgeQuoteDetailsModal } from './bridge-quote-details-modal';
 
 export const BridgeQuotesModal = ({
   onClose,
@@ -56,30 +55,39 @@ export const BridgeQuotesModal = ({
       <ModalOverlay />
 
       {expandedQuote ? (
-        <ModalContent modalDialogProps={{ padding: 0 }}>
-          <ModalHeader onBack={() => setExpandedQuote(undefined)}>
-            <Text variant={TextVariant.headingSm} textAlign={TextAlign.Center}>
-              {t('swapQuoteDetails')}
-            </Text>
-          </ModalHeader>
-          <Box className="quotes-modal__quote-details">
-            <Text>{JSON.stringify(expandedQuote)}</Text>
-          </Box>
-          <Footer>
-            <Button
-              data-testid="quotes-modal-use-quote-button"
-              onClick={() => {
-                dispatch(setSelectedQuote(expandedQuote));
-                setExpandedQuote(undefined);
-                onClose();
-              }}
-              disabled={false}
-            >
-              {t('bridgeUseQuote')}
-            </Button>
-          </Footer>
-        </ModalContent>
+        <BridgeQuoteDetailsModal
+          onBack={() => setExpandedQuote(undefined)}
+          onSelect={() => {
+            dispatch(setSelectedQuote(expandedQuote));
+            setExpandedQuote(undefined);
+            onClose();
+          }}
+          expandedQuote={expandedQuote}
+        />
       ) : (
+        // <ModalContent modalDialogProps={{ padding: 0 }}>
+        //   <ModalHeader onBack={() => setExpandedQuote(undefined)}>
+        //     <Text variant={TextVariant.headingSm} textAlign={TextAlign.Center}>
+        //       {t('swapQuoteDetails')}
+        //     </Text>
+        //   </ModalHeader>
+        //   <Box className="quotes-modal__quote-details">
+        //     <Text>{JSON.stringify(expandedQuote)}</Text>
+        //   </Box>
+        //   <Footer>
+        //     <Button
+        //       data-testid="quotes-modal-use-quote-button"
+        //       onClick={() => {
+        //         dispatch(setSelectedQuote(expandedQuote));
+        //         setExpandedQuote(undefined);
+        //         onClose();
+        //       }}
+        //       disabled={false}
+        //     >
+        //       {t('bridgeUseQuote')}
+        //     </Button>
+        //   </Footer>
+        // </ModalContent>
         <ModalContent
           className="quotes-modal__container"
           modalDialogProps={{ padding: 0 }}
diff --git a/ui/pages/bridge/quotes/index.scss b/ui/pages/bridge/quotes/index.scss
index ba0d8ac62e16..501145971a5d 100644
--- a/ui/pages/bridge/quotes/index.scss
+++ b/ui/pages/bridge/quotes/index.scss
@@ -31,7 +31,7 @@
     }
   }
 
-  &__info-row {
+  .info-row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -161,4 +161,58 @@
     bottom: 4px;
     color: var(--text-alternative-soft);
   }
+
+  &__quote-details {
+    position: relative;
+
+    .quote-detail-group {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      padding: 16px;
+      align-items: flex-start;
+
+      .info-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+
+        &__label {
+          display: inline-flex;
+          gap: 4px;
+
+          p {
+            font-weight: var(--font-weight-medium);
+            font-size: 14px;
+            white-space: nowrap;
+          }
+
+          &__tooltip {
+            align-items: center;
+            height: 100%;
+          }
+        }
+
+        &__description {
+          display: inline-flex;
+          gap: 4px;
+
+          &__secondary {
+            color: var(--color-text-alternative);
+          }
+        }
+      }
+
+      hr {
+        border-top: 0.25px solid var(--color-primary-muted);
+      }
+    }
+
+    &__use-quote-button{
+      position: absolute;
+      bottom: 10px;
+      width: 100%
+    }
+  }
 }
diff --git a/ui/pages/bridge/quotes/quote-info-row.tsx b/ui/pages/bridge/quotes/quote-info-row.tsx
index d1cccc62ed8e..72d6c13e2378 100644
--- a/ui/pages/bridge/quotes/quote-info-row.tsx
+++ b/ui/pages/bridge/quotes/quote-info-row.tsx
@@ -21,14 +21,14 @@ export const QuoteInfoRow = ({
   secondaryDescription?: string;
 }) => {
   return (
-    <Box className="quote-card__info-row">
-      <Box className="quote-card__info-row__label">
+    <Box className="info-row">
+      <Box className="info-row__label">
         <Text>{label}</Text>
         {tooltipText && (
           <Tooltip
             position="top"
             title={tooltipText}
-            containerClassName="quote-card__info-row__label__tooltip"
+            containerClassName="info-row__label__tooltip"
             style={{ display: 'flex' }}
           >
             <Icon
@@ -40,8 +40,8 @@ export const QuoteInfoRow = ({
         )}
       </Box>
 
-      <Box className="quote-card__info-row__description">
-        <Box className="quote-card__info-row__description__secondary">
+      <Box className="info-row__description">
+        <Box className="info-row__description__secondary">
           <Text>{secondaryDescription}</Text>
         </Box>
         <Text>{description}</Text>