fix: providers

Author: LorimerJenkins

src/app/markets/markets.tsx

@@ -11,11 +11,13 @@ import { MarketRow } from "./MarketRow/MarketRow";
 import Footer from "@/components/Footer/Footer";
 import BetaDisclaimer from "@/components/BetaDisclaimer/BetaDisclaimer";
 import { SUPPORTED_TOKENS } from "@/utils/tokenMappings";
+import { useDeprecatedTokens } from "@/contexts/DeprecatedTokensContext";
 import { useMemo } from "react";
 
 const Markets: React.FC = () => {
   const { data: supportedTokens = [] } = useSupportedTokens();
   const { data: prices } = usePrices();
+  const { showDeprecated } = useDeprecatedTokens();
 
   // Always sort ALL tokens, never filter them for MarketStats to maintain stable hook calls
   const sortedTokens = useMemo(() => {
@@ -40,19 +42,31 @@ const Markets: React.FC = () => {
     });
   }, [supportedTokens]);
 
+  // Filter only for display in the list
+  const visibleTokens = useMemo(() => {
+    if (!Array.isArray(sortedTokens)) {
+      return [];
+    }
+    
+    return showDeprecated 
+      ? sortedTokens 
+      : sortedTokens.filter((token) => !token.deprecated);
+  }, [sortedTokens, showDeprecated]);
+
   return (
     <div className={styles.page}>
       <BetaDisclaimer />
       <Header />
       <div className={styles.body}>
         <div className={styles.bodyContainer}>
+          {/* Always pass ALL tokens to MarketStats to maintain stable hook calls */}
           <MarketStats
             tokens={sortedTokens as SupportedToken[]}
             prices={prices}
-            showDeprecated={true}
+            showDeprecated={showDeprecated}
           />
           <div className={styles.marketsList}>
-            {(sortedTokens as SupportedToken[]).map((token) => (
+            {(visibleTokens as SupportedToken[]).map((token) => (
               <MarketRow 
                 key={token.ticker} 
                 token={token} 

src/app/providers.tsx

@@ -8,6 +8,7 @@ import PendingTransactions from "@/components/PendingTransactions/PendingTransac
 import NotificationProvider from "@/components/notifications/NotificationProvider";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import { persister } from "@/utils/caches/persister";
+import { DeprecatedTokensProvider } from "@/contexts/DeprecatedTokensContext";
 import { useState } from "react";
 
 type Props = {
@@ -49,11 +50,13 @@ export function Providers({ children }: Props) {
           muUrl="https://mu.ao-testnet.xyz"
         >
           <NotificationProvider>
-            <PendingTransactions>{children}</PendingTransactions>
+            <DeprecatedTokensProvider>
+              <PendingTransactions>{children}</PendingTransactions>
+            </DeprecatedTokensProvider>
           </NotificationProvider>
         </AOSyncProvider>
         <ReactQueryDevtools initialIsOpen={false} />
       </PersistQueryClientProvider>
     </AccountTabProvider>
   );
-}
+}