feat: show all quotes in a modal

MetaMask · Sep 25, 2024 · 810ecd1 · 810ecd1
1 parent 7702486
commit 810ecd1
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 2 deletions.
diff --git a/ui/pages/bridge/quotes/bridge-quote-card.tsx b/ui/pages/bridge/quotes/bridge-quote-card.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import {
   Box,
@@ -15,6 +15,7 @@ import { getQuoteDisplayData } from '../utils/quote';
 import { useCountdownTimer } from '../../../hooks/bridge/useCountdownTimer';
 import MascotBackgroundAnimation from '../../swaps/mascot-background-animation/mascot-background-animation';
 import { QuoteInfoRow } from './quote-info-row';
+import { BridgeQuotesModal } from './bridge-quotes-modal';
 
 export const BridgeQuoteCard = () => {
   const t = useI18nContext();
@@ -26,6 +27,8 @@ export const BridgeQuoteCard = () => {
 
   const secondsUntilNextRefresh = useCountdownTimer();
 
+  const [showAllQuotes, setShowAllQuotes] = useState(false);
+
   if (isLoading && !recommendedQuote) {
     return (
       <Box>
@@ -36,6 +39,10 @@ export const BridgeQuoteCard = () => {
 
   return etaInMinutes && totalFees && quoteRate ? (
     <Box className="quote-card">
+      <BridgeQuotesModal
+        isOpen={showAllQuotes}
+        onClose={() => setShowAllQuotes(false)}
+      />
       <Box className="bridge-box quote-card__timer">
         <Text>{t('swapNewQuoteIn', [secondsUntilNextRefresh])}</Text>
       </Box>
@@ -56,7 +63,17 @@ export const BridgeQuoteCard = () => {
       </Box>
 
       <Box className="bridge-box quote-card__footer">
-        <Text>{t('swapIncludesMMFee', [0.875])}</Text>
+        <span>
+          <Text>{t('swapIncludesMMFee', [0.875])}</Text>
+          <Button
+            variant={ButtonVariant.Secondary}
+            onClick={() => {
+              setShowAllQuotes(true);
+            }}
+          >
+            <Text>-- {t('viewAllQuotes')}</Text>
+          </Button>
+        </span>
         <Button variant={ButtonVariant.Link}>
           <Text>{t('termsOfService')}</Text>
         </Button>

diff --git a/ui/pages/bridge/quotes/bridge-quotes-modal.tsx b/ui/pages/bridge/quotes/bridge-quotes-modal.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  Box,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from '../../../components/component-library';
+import {
+  TextAlign,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+import { useSelector } from 'react-redux';
+import { getBridgeQuotes } from '../../../ducks/bridge/selectors';
+import { getQuoteDisplayData } from '../utils/quote';
+
+export const BridgeQuotesModal = ({
+  onClose,
+  ...modalProps
+}: Omit<React.ComponentProps<typeof Modal>, 'children'>) => {
+  const { quotes } = useSelector(getBridgeQuotes);
+
+  return (
+    <Modal className="quotes-modal" onClose={onClose} {...modalProps}>
+      <ModalOverlay />
+      <ModalContent modalDialogProps={{ padding: 0 }}>
+        <ModalHeader onClose={onClose}>
+          <Text variant={TextVariant.headingSm} textAlign={TextAlign.Center}>
+            Test
+          </Text>
+        </ModalHeader>
+
+        <Box>
+          {quotes.map((quote, index) => (
+            <Box key={index}>
+              <Text>{JSON.stringify(quote.quote)}</Text>
+              <Text>{JSON.stringify(getQuoteDisplayData(quote))}</Text>
+            </Box>
+          ))}
+        </Box>
+      </ModalContent>
+    </Modal>
+  );
+};