enable superseed

Author: vidvidvid

packages/ui/app/_components/markets/NetworkSelector.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
@@ -18,24 +17,44 @@ interface INetworkSelector {
   dropdownSelectedChain: number;
   nopool?: boolean;
   enabledChains?: number[];
-  upcomingChains?: string[];
+  showUpcomingChains?: boolean;
 }
 
+const ALL_NETWORKS = [
+  'MetalL2',
+  'Ozean',
+  'Soneium',
+  'Camp',
+  'FX',
+  'Ink',
+  'Kroma',
+  'Unichain',
+  'Mode',
+  'Base',
+  'Optimism',
+  'Fraxtal',
+  'Lisk',
+  'BoB',
+  'Worldchain',
+  'Superseed'
+];
+
 const ACTIVE_NETWORKS = [
   'Mode',
   'Base',
   'Optimism',
   'Fraxtal',
   'Lisk',
   'BoB',
-  'Worldchain'
+  'Worldchain',
+  'Superseed'
 ];
 
 function NetworkSelector({
   dropdownSelectedChain,
   nopool = false,
   enabledChains,
-  upcomingChains
+  showUpcomingChains = false
 }: INetworkSelector) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -49,6 +68,10 @@ function NetworkSelector({
       (!enabledChains || enabledChains.includes(+entry[0]))
   );
 
+  const upcomingNetworks = showUpcomingChains
+    ? ALL_NETWORKS.filter((network) => !ACTIVE_NETWORKS.includes(network))
+    : [];
+
   const getUrlWithParams = (chainId: string) => {
     const params = new URLSearchParams(searchParams.toString());
     // Always reset pool to 0 when changing chains unless nopool is true
@@ -72,7 +95,7 @@ function NetworkSelector({
                   <Button
                     variant={isSelected ? 'secondary' : 'ghost'}
                     asChild
-                    className={`h-9 rounded-md ${isSelected ? 'min-w-[80px] p-2' : 'min-w-[32px] p-1 '}`}
+                    className={`h-9 rounded-md ${isSelected ? 'min-w-[80px] p-2' : 'min-w-[32px] p-1'}`}
                   >
                     <Link
                       href={getUrlWithParams(chainId)}
@@ -109,41 +132,42 @@ function NetworkSelector({
         );
       })}
 
-      {upcomingChains?.map((upcomingChain, idx) => (
-        <TooltipProvider key={idx}>
-          <Tooltip delayDuration={100}>
-            <TooltipTrigger asChild>
-              <div>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="p-1 h-8 min-w-[32px] opacity-75 cursor-not-allowed hover:opacity-75"
-                  disabled
-                >
-                  <Image
-                    alt={upcomingChain}
-                    className="w-6 h-6 grayscale-[30%]"
-                    src={`/img/logo/${upcomingChain.toUpperCase()}.png`}
-                    width={24}
-                    height={24}
-                  />
-                </Button>
-              </div>
-            </TooltipTrigger>
-            <TooltipContent className="flex items-center gap-2 bg-background">
-              <Image
-                alt={upcomingChain}
-                className="w-4 h-4 grayscale-[30%]"
-                src={`/img/logo/${upcomingChain.toUpperCase()}.png`}
-                width={16}
-                height={16}
-              />
-              <p>{upcomingChain}</p>
-              <span className="text-yellow-400 text-xs">Coming Soon</span>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      ))}
+      {showUpcomingChains &&
+        upcomingNetworks.map((upcomingChain, idx) => (
+          <TooltipProvider key={`upcoming-${idx}`}>
+            <Tooltip delayDuration={100}>
+              <TooltipTrigger asChild>
+                <div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="p-1 h-8 min-w-[32px] opacity-75 cursor-not-allowed hover:opacity-75"
+                    disabled
+                  >
+                    <Image
+                      alt={upcomingChain}
+                      className="w-6 h-6 grayscale-[30%]"
+                      src={`/img/logo/${upcomingChain.toUpperCase()}.png`}
+                      width={24}
+                      height={24}
+                    />
+                  </Button>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent className="flex items-center gap-2 bg-background">
+                <Image
+                  alt={upcomingChain}
+                  className="w-4 h-4 grayscale-[30%]"
+                  src={`/img/logo/${upcomingChain.toUpperCase()}.png`}
+                  width={16}
+                  height={16}
+                />
+                <p>{upcomingChain}</p>
+                <span className="text-yellow-400 text-xs">Coming Soon</span>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        ))}
     </div>
   );
 }