diff --git a/libs/oeth/swap/src/components/TokenSelectModal.tsx b/libs/oeth/swap/src/components/TokenSelectModal.tsx index fee0e5feb..45a8cdfe6 100644 --- a/libs/oeth/swap/src/components/TokenSelectModal.tsx +++ b/libs/oeth/swap/src/components/TokenSelectModal.tsx @@ -1,6 +1,7 @@ import { Box, Dialog, + Divider, MenuItem, MenuList, Skeleton, @@ -8,7 +9,12 @@ import { Typography, } from '@mui/material'; import { usePrices } from '@origin/shared/providers'; -import { currencyFormat, formatAmount } from '@origin/shared/utils'; +import { + currencyFormat, + formatAmount, + isNilOrEmpty, +} from '@origin/shared/utils'; +import { partition, pipe, prop, reject } from 'ramda'; import { useIntl } from 'react-intl'; import { useAccount, useBalance } from 'wagmi'; @@ -31,14 +37,19 @@ export const TokenSelectModal = ({ onClose, ...rest }: TokenSelectModalProps) => { + const intl = useIntl(); + + const [swappable, unswappable] = pipe( + reject(prop('isSelected')), + partition(prop('isSwappable')), + )(tokens); + return ( theme.palette.background.paper, borderRadius: 2, border: '1px solid', @@ -46,27 +57,63 @@ export const TokenSelectModal = ({ backgroundImage: 'none', margin: 0, minWidth: 'min(90vw, 33rem)', + py: 1, }, }} {...rest} onClose={onClose} > - - {tokens.map((token, i) => ( - { - onClose({}, 'backdropClick'); - onSelectToken(token); - }} - /> - ))} - + {!isNilOrEmpty(swappable) && ( + <> + + {intl.formatMessage({ + defaultMessage: 'Available swaps for this token', + })} + + + {swappable.map((token, i) => ( + { + onClose({}, 'backdropClick'); + onSelectToken(token); + }} + sx={{ + color: 'primary.contrastText', + }} + /> + ))} + + + )} + {!isNilOrEmpty(swappable) && !isNilOrEmpty(unswappable) && ( + + )} + {!isNilOrEmpty(unswappable) && ( + <> + + {intl.formatMessage({ + defaultMessage: 'Unavailable swaps for this token', + })} + + + {unswappable.map((token, i) => ( + { + onClose({}, 'backdropClick'); + onSelectToken(token); + }} + sx={{ + color: 'text.secondary', + }} + /> + ))} + + + )} ); }; @@ -99,11 +146,11 @@ function TokenListItem({ token, ...rest }: TokenListItemProps) { gap: 1.5, alignItems: 'center', background: (theme) => theme.palette.background.paper, - borderRadius: 1, '&:hover': { background: (theme) => theme.palette.grey[700], }, + color: 'primary.contrastText', ...rest?.sx, }} > @@ -114,24 +161,8 @@ function TokenListItem({ token, ...rest }: TokenListItemProps) { sx={{ width: '2rem', height: '2rem' }} /> - ({ - color: token.isSwappable - ? theme.palette.primary.contrastText - : theme.palette.warning.main, - })} - > - {token?.name} - - span:not(:last-child):after': { - content: '", "', - }, - }} - > + {token?.name} + {token.symbol}