Skip to content

Commit

Permalink
chore: quote details wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@micaelae
micaelae committed Nov 9, 2024
1 parent 113e3ba commit fd6acbb
Show file tree
Hide file tree
Showing 6 changed files with 349 additions and 31 deletions.
12 changes: 12 additions & 0 deletions app/_locales/en/messages.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

152 changes: 152 additions & 0 deletions ui/pages/bridge/quotes/bridge-quote-details-modal.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
92 changes: 92 additions & 0 deletions ui/pages/bridge/quotes/bridge-quote-details-modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
58 changes: 33 additions & 25 deletions ui/pages/bridge/quotes/bridge-quotes-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { IconName } from '@metamask/snaps-sdk/jsx';
import { useDispatch, useSelector } from 'react-redux';
import {
Box,
Button,
Icon,
IconSize,
Modal,
Expand All @@ -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,
Expand All @@ -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 }}
Expand Down
Loading

0 comments on commit fd6acbb

Please sign in to comment.