diff --git a/app/markets/components/AssetFilter.tsx b/app/markets/components/AssetFilter.tsx index cb9edb2e..b669365c 100644 --- a/app/markets/components/AssetFilter.tsx +++ b/app/markets/components/AssetFilter.tsx @@ -1,6 +1,6 @@ 'use client'; import { useState, useRef, useEffect, KeyboardEvent } from 'react'; -import { ChevronDownIcon, TrashIcon } from '@radix-ui/react-icons'; +import { ChevronDownIcon, TrashIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons'; import Image from 'next/image'; import { ERC20Token, infoToKey } from '@/utils/tokens'; @@ -10,7 +10,7 @@ type FilterProps = { selectedAssets: string[]; setSelectedAssets: (assets: string[]) => void; items: ERC20Token[]; - loading?: boolean; // Made optional since it's not used + loading: boolean; }; export default function AssetFilter({ @@ -19,11 +19,21 @@ export default function AssetFilter({ selectedAssets, setSelectedAssets, items, + loading, }: FilterProps) { const [query, setQuery] = useState(''); const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(null); + // Precompute a set of valid asset keys + const validAssetKeys = new Set( + items.map((item) => item.networks.map((n) => infoToKey(n.address, n.chain.id)).join('|')), + ); + const invalidSelection = + !loading && + selectedAssets.length > 0 && + selectedAssets.every((asset) => !validAssetKeys.has(asset)); + useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { @@ -80,7 +90,14 @@ export default function AssetFilter({ > {label}
- {selectedAssets.length > 0 ? ( + {loading ? ( + Loading... + ) : invalidSelection ? ( +
+ + Invalid +
+ ) : selectedAssets.length > 0 ? (
{selectedAssets.map((asset) => { const token = items.find( @@ -100,7 +117,7 @@ export default function AssetFilter({
- {isOpen && ( + {isOpen && !loading && (
void; }; -export default function NetworkFilter({ setSelectedNetwork }: FilterProps) { +export default function NetworkFilter({ setSelectedNetwork, selectedNetwork }: FilterProps) { return (