feat: Implement filter memory functionality

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<HTMLDivElement>(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({
       >
         <span className="absolute left-2 top-2 px-1 text-xs">{label}</span>
         <div className="flex items-center justify-between pt-4">
-          {selectedAssets.length > 0 ? (
+          {loading ? (
+            <span className="p-[2px] text-sm text-gray-400">Loading...</span>
+          ) : invalidSelection ? (
+            <div className="flex items-center gap-2">
+              <ExclamationTriangleIcon className="h-4 w-4 text-yellow-500" />
+              <span className="pt-[4px] text-sm text-yellow-500">Invalid</span>
+            </div>
+          ) : selectedAssets.length > 0 ? (
             <div className="flex-scroll flex gap-2 p-1 pb-[2px]">
               {selectedAssets.map((asset) => {
                 const token = items.find(
@@ -100,7 +117,7 @@ export default function AssetFilter({
           </span>
         </div>
       </div>
-      {isOpen && (
+      {isOpen && !loading && (
         <div className="absolute z-10 mt-1 w-full rounded-sm bg-secondary shadow-lg">
           <input
             type="text"

app/markets/components/NetworkFilter.tsx

@@ -4,14 +4,16 @@ import Image from 'next/image';
 import { SupportedNetworks, getNetworkImg, isSupportedChain, networks } from '@/utils/networks';
 
 type FilterProps = {
+  selectedNetwork: SupportedNetworks | null;
   setSelectedNetwork: (network: SupportedNetworks | null) => void;
 };
-export default function NetworkFilter({ setSelectedNetwork }: FilterProps) {
+export default function NetworkFilter({ setSelectedNetwork, selectedNetwork }: FilterProps) {
   return (
     <Select
       label="Network"
       selectionMode="single"
       placeholder="All networks"
+      selectedKeys={selectedNetwork ? [selectedNetwork.toString()] : []}
       onChange={(e) => {
         if (!e.target.value) setSelectedNetwork(null);
         const newId = Number(e.target.value);

app/markets/components/markets.tsx

@@ -1,6 +1,7 @@
 'use client';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useRef } from 'react';
 import storage from 'local-storage-fallback';
+import { useRouter, useSearchParams } from 'next/navigation';
 import Header from '@/components/layout/header/Header';
 import LoadingScreen from '@/components/Status/LoadingScreen';
 import useMarkets from '@/hooks/useMarkets';
@@ -33,14 +34,24 @@ const defaultStaredMarkets = JSON.parse(
  * that you want toLowerCase() render on the page.
  */
 export default function Markets() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
   const { loading, data: rawMarkets } = useMarkets();
 
-  // token keys, aggregated with | for each "ERC20Token" object
+  // Parse and validate network parameter
+  const defaultNetwork = (() => {
+    const networkParam = searchParams.get('network');
+    return networkParam &&
+      Object.values(SupportedNetworks).includes(Number(networkParam) as SupportedNetworks)
+      ? (Number(networkParam) as SupportedNetworks)
+      : null;
+  })();
+
+  // Initialize states
   const [selectedCollaterals, setSelectedCollaterals] = useState<string[]>([]);
   const [selectedLoanAssets, setSelectedLoanAssets] = useState<string[]>([]);
-
-  // single choice: null for all networks
-  const [selectedNetwork, setSelectedNetwork] = useState<SupportedNetworks | null>(null);
+  const [selectedNetwork, setSelectedNetwork] = useState<SupportedNetworks | null>(defaultNetwork);
 
   const [uniqueCollaterals, setUniqueCollaterals] = useState<ERC20Token[]>([]);
   const [uniqueLoanAssets, setUniqueLoanAssets] = useState<ERC20Token[]>([]);
@@ -61,6 +72,31 @@ export default function Markets() {
 
   const [filteredMarkets, setFilteredMarkets] = useState(rawMarkets);
 
+  // Use useRef to store the previous URL parameters
+  const prevParamsRef = useRef<string>('');
+
+  // Synchronize state with URL parameters
+  useEffect(() => {
+    const currentParams = searchParams.toString();
+    if (currentParams !== prevParamsRef.current) {
+      const collaterals = searchParams.get('collaterals');
+      setSelectedCollaterals(collaterals ? collaterals.split(',').filter(Boolean) : []);
+
+      const loanAssets = searchParams.get('loanAssets');
+      setSelectedLoanAssets(loanAssets ? loanAssets.split(',').filter(Boolean) : []);
+
+      const networkParam = searchParams.get('network');
+      setSelectedNetwork(
+        networkParam &&
+          Object.values(SupportedNetworks).includes(Number(networkParam) as SupportedNetworks)
+          ? (Number(networkParam) as SupportedNetworks)
+          : null,
+      );
+
+      prevParamsRef.current = currentParams;
+    }
+  }, [searchParams]);
+
   const starMarket = useCallback(
     (id: string) => {
       setStaredIds([...staredIds, id]);
@@ -92,7 +128,34 @@ export default function Markets() {
     }
   }, [rawMarkets]);
 
-  // Update the all markets pass to the table
+  const updateUrlParams = useCallback(
+    (collaterals: string[], loanAssets: string[], network: SupportedNetworks | null) => {
+      const params = new URLSearchParams(searchParams);
+      if (collaterals.length > 0) {
+        params.set('collaterals', collaterals.join(','));
+      } else {
+        params.delete('collaterals');
+      }
+      if (loanAssets.length > 0) {
+        params.set('loanAssets', loanAssets.join(','));
+      } else {
+        params.delete('loanAssets');
+      }
+      if (network) {
+        params.set('network', network.toString());
+      } else {
+        params.delete('network');
+      }
+      const newParams = params.toString();
+      if (newParams !== prevParamsRef.current) {
+        router.push(`?${newParams}`, { scroll: false });
+        prevParamsRef.current = newParams;
+      }
+    },
+    [router, searchParams],
+  );
+
+  // Update filtered markets
   useEffect(() => {
     const filtered = applyFilterAndSort(
       rawMarkets,
@@ -116,6 +179,11 @@ export default function Markets() {
     selectedNetwork,
   ]);
 
+  // Update URL params when filters change
+  useEffect(() => {
+    updateUrlParams(selectedCollaterals, selectedLoanAssets, selectedNetwork);
+  }, [selectedCollaterals, selectedLoanAssets, selectedNetwork, updateUrlParams]);
+
   const titleOnclick = useCallback(
     (column: number) => {
       setSortColumn(column);
@@ -146,13 +214,22 @@ export default function Markets() {
           {/* left section: asset filters */}
           <div className="flex flex-col gap-2 lg:flex-row">
             {/* network filter */}
-            <NetworkFilter setSelectedNetwork={setSelectedNetwork} />
+            <NetworkFilter
+              selectedNetwork={selectedNetwork}
+              setSelectedNetwork={(network) => {
+                setSelectedNetwork(network);
+                updateUrlParams(selectedCollaterals, selectedLoanAssets, network);
+              }}
+            />
 
             <AssetFilter
               label="Loan Asset"
               placeholder="All loan asset"
               selectedAssets={selectedLoanAssets}
-              setSelectedAssets={setSelectedLoanAssets}
+              setSelectedAssets={(assets) => {
+                setSelectedLoanAssets(assets);
+                updateUrlParams(selectedCollaterals, assets, selectedNetwork);
+              }}
               items={uniqueLoanAssets}
               loading={loading}
             />
@@ -162,7 +239,10 @@ export default function Markets() {
               label="Collateral"
               placeholder="All collateral"
               selectedAssets={selectedCollaterals}
-              setSelectedAssets={setSelectedCollaterals}
+              setSelectedAssets={(assets) => {
+                setSelectedCollaterals(assets);
+                updateUrlParams(assets, selectedLoanAssets, selectedNetwork);
+              }}
               items={uniqueCollaterals}
               loading={loading}
             />

src/utils/tokens.ts

@@ -63,6 +63,12 @@ const supportedTokens = [
       isProxy: true,
     },
   },
+  {
+    symbol: 'USD0',
+    img: require('../imgs/tokens/usd0.png') as string,
+    decimals: 18,
+    networks: [{ chain: mainnet, address: '0x73A15FeD60Bf67631dC6cd7Bc5B6e8da8190aCF5' }],
+  },
   {
     symbol: 'USD0++',
     img: require('../imgs/tokens/usd0pp.svg') as string,
@@ -105,6 +111,15 @@ const supportedTokens = [
       isProxy: true,
     },
   },
+  {
+    symbol: 'wUSDM',
+    img: require('../imgs/tokens/wusdm.png') as string,
+    decimals: 18,
+    networks: [
+      { chain: mainnet, address: '0x57F5E098CaD7A3D1Eed53991D4d66C45C9AF7812' },
+      { chain: base, address: '0x57F5E098CaD7A3D1Eed53991D4d66C45C9AF7812' },
+    ],
+  },
   {
     symbol: 'EURe',
     img: require('../imgs/tokens/eure.png') as string,
@@ -353,6 +368,12 @@ const supportedTokens = [
     decimals: 18,
     networks: [{ chain: mainnet, address: '0xec53bF9167f50cDEB3Ae105f56099aaaB9061F83' }],
   },
+  {
+    symbol: 'wsuperOETHb',
+    img: require('../imgs/tokens/wsuperOETHb.png') as string,
+    decimals: 18,
+    networks: [{ chain: base, address: '0x7FcD174E80f264448ebeE8c88a7C4476AAF58Ea6' }],
+  },
 ];
 
 const isWhitelisted = (address: string, chainId: number) => {