diff --git a/src/components/trade/TradeModule/AssetSelector/AssetOverlay/index.tsx b/src/components/trade/TradeModule/AssetSelector/AssetOverlay/index.tsx index b0aea29f..91bf68e9 100644 --- a/src/components/trade/TradeModule/AssetSelector/AssetOverlay/index.tsx +++ b/src/components/trade/TradeModule/AssetSelector/AssetOverlay/index.tsx @@ -8,6 +8,7 @@ import Text from 'components/common/Text' import AssetList from 'components/trade/TradeModule/AssetSelector/AssetList' import StablesFilter from 'components/trade/TradeModule/AssetSelector/AssetOverlay/StablesFilter' import PairsList from 'components/trade/TradeModule/AssetSelector/PairsList' +import useCurrentAccount from 'hooks/accounts/useCurrentAccount' import useAllAssets from 'hooks/assets/useAllAssets' import useFilteredAssets from 'hooks/useFilteredAssets' @@ -23,8 +24,17 @@ interface Props { type: 'pair' | 'single' | 'perps' } +function MarketSubheadLine(props: { title: string }) { + return ( + + {props.title} + + ) +} + export default function AssetOverlay(props: Props) { const { assets, searchString, onChangeSearch } = useFilteredAssets(props.buyAssets) + const account = useCurrentAccount() const allAssets = useAllAssets() const stableAssets = useMemo(() => allAssets.filter((asset) => asset.isStable), [allAssets]) const handleClose = useCallback(() => props.onChangeState('closed'), [props]) @@ -76,6 +86,20 @@ export default function AssetOverlay(props: Props) { [onChangeSearch, props], ) + const [activePerpsPositions, availablePerpsMarkets] = useMemo(() => { + const activePerpsPositions = + account?.perps.length === 0 + ? [] + : props.buyAssets.filter((assets) => + account?.perps.find((perp) => perp.denom === assets.denom), + ) + const availablePerpsMarkets = props.buyAssets.filter( + (assets) => !activePerpsPositions.find((perp) => perp.denom === assets.denom), + ) + + return [activePerpsPositions, availablePerpsMarkets] + }, [props.buyAssets, account]) + return ( - {props.type === 'perps' && ( - {}} - /> + {props.type === 'perps' && activePerpsPositions.length > 0 && ( + <> + + {}} + /> + + )} + {props.type === 'perps' && availablePerpsMarkets.length > 0 && ( + <> + + {}} + /> + )} {props.type === 'pair' && (