various fixes

Author: dev-dist

src/components/ChainSelector/ChainSelector.module.css

@@ -25,7 +25,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.75rem 1rem;
+  padding: 1rem 1rem;
   background: white;
   border: 1px solid var(--color-border-light);
   cursor: pointer;
@@ -67,7 +67,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1;
+  line-height: 1.1;
   text-align: left;
   flex-grow: 1;
   min-width: 0;
@@ -121,6 +121,18 @@
   z-index: 2;
 }
 
+.networkToggleDisabled {
+  background-color: var(--gray-100);
+  color: var(--gray-400);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.networkToggleDisabled:hover {
+  background-color: var(--gray-100);
+  z-index: 0;
+}
+
 /* Network status link */
 .networkStatusLink {
   color: var(--gray-500);

src/components/ChainSelector/ChainSelector.tsx

@@ -11,6 +11,8 @@ interface ChainSelectorProps {
   onChainSelect: (chain: Chain) => void
   onNetworkTypeChange?: (networkType: "mainnet" | "testnet", chain: Chain) => void
   dataFeedType?: string
+  availableNetworkTypes?: { mainnet: boolean; testnet: boolean }
+  selectedNetworkType?: "mainnet" | "testnet"
 }
 
 export function ChainSelector({
@@ -19,10 +21,14 @@ export function ChainSelector({
   currentNetwork,
   onChainSelect,
   onNetworkTypeChange,
-  dataFeedType = "default"
+  dataFeedType = "default",
+  availableNetworkTypes = { mainnet: true, testnet: true },
+  selectedNetworkType: externalSelectedNetworkType
 }: ChainSelectorProps) {
   const [isOpen, setIsOpen] = useState(false)
-  const [selectedNetworkType, setSelectedNetworkType] = useState<"mainnet" | "testnet">("mainnet")
+  const [selectedNetworkType, setSelectedNetworkType] = useState<"mainnet" | "testnet">(
+    externalSelectedNetworkType || "mainnet"
+  )
   const [searchTerm, setSearchTerm] = useState("")
   const [focusedIndex, setFocusedIndex] = useState(-1)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -65,17 +71,12 @@ export function ChainSelector({
     }
   }, [isOpen, focusedIndex, filteredChains])
 
-  // Find current network type based on selected chain and currentNetwork
+  // Sync with external selectedNetworkType
   useEffect(() => {
-    if (selectedChain) {
-      const currentChainNetwork = selectedChain.networks.find(network => 
-        network.queryString === currentNetwork || selectedChain.page === currentNetwork
-      )
-      if (currentChainNetwork) {
-        setSelectedNetworkType(currentChainNetwork.networkType)
-      }
+    if (externalSelectedNetworkType && externalSelectedNetworkType !== selectedNetworkType) {
+      setSelectedNetworkType(externalSelectedNetworkType)
     }
-  }, [selectedChain, currentNetwork])
+  }, [externalSelectedNetworkType])
 
   // Scroll focused item into view
   useEffect(() => {
@@ -198,19 +199,25 @@ export function ChainSelector({
             type="button"
             className={clsx(
               styles.networkToggle,
-              selectedNetworkType === "mainnet" && styles.networkToggleActive
+              selectedNetworkType === "mainnet" && styles.networkToggleActive,
+              !availableNetworkTypes.mainnet && styles.networkToggleDisabled
             )}
-            onClick={() => handleNetworkTypeToggle("mainnet")}
+            onClick={() => availableNetworkTypes.mainnet && handleNetworkTypeToggle("mainnet")}
+            disabled={!availableNetworkTypes.mainnet}
+            title={!availableNetworkTypes.mainnet ? `${selectedChain.label} feeds are not available on mainnet` : undefined}
           >
             Mainnet
           </button>
           <button
             type="button"
             className={clsx(
               styles.networkToggle,
-              selectedNetworkType === "testnet" && styles.networkToggleActive
+              selectedNetworkType === "testnet" && styles.networkToggleActive,
+              !availableNetworkTypes.testnet && styles.networkToggleDisabled
             )}
-            onClick={() => handleNetworkTypeToggle("testnet")}
+            onClick={() => availableNetworkTypes.testnet && handleNetworkTypeToggle("testnet")}
+            disabled={!availableNetworkTypes.testnet}
+            title={!availableNetworkTypes.testnet ? `${selectedChain.label} feeds are not available on testnet` : undefined}
           >
             Testnet
           </button>

src/features/feeds/components/FeedList.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource preact */
-import { useEffect, useState, useRef } from "preact/hooks"
+import { useEffect, useState, useRef, useMemo } from "preact/hooks"
 import { MainnetTable, TestnetTable, StreamsNetworkAddressesTable } from "./Tables.tsx"
 import feedList from "./FeedList.module.css"
 import tableStyles from "./Tables.module.css"
@@ -167,6 +167,42 @@ export const FeedList = ({
   const chainMetadata = useGetChainMetadata(chain, initialCache && initialCache[chain.page])
   const wrapperRef = useRef(null)
 
+  // Determine available network types for the current chain
+  const availableNetworkTypes = useMemo(() => {
+    if (!chainMetadata.processedData?.networks) return { mainnet: false, testnet: false }
+    
+    const networkTypes = {
+      mainnet: false,
+      testnet: false
+    }
+    
+    chainMetadata.processedData.networks.forEach((network) => {
+      if (network.networkType === "mainnet") {
+        networkTypes.mainnet = true
+      } else if (network.networkType === "testnet") {
+        networkTypes.testnet = true
+      }
+    })
+    
+    return networkTypes
+  }, [chainMetadata.processedData?.networks])
+
+  // Auto-adjust selectedNetworkType based on what's available
+  useEffect(() => {
+    if (!chainMetadata.loading && chainMetadata.processedData) {
+      const { mainnet, testnet } = availableNetworkTypes
+      
+      // If current selection is not available, switch to what's available
+      if (selectedNetworkType === "mainnet" && !mainnet && testnet) {
+        setSelectedNetworkType("testnet")
+      } else if (selectedNetworkType === "testnet" && !testnet && mainnet) {
+        setSelectedNetworkType("mainnet")
+      }
+      // If both are available, keep current selection
+      // If neither are available, keep current selection (edge case)
+    }
+  }, [chainMetadata.loading, chainMetadata.processedData, availableNetworkTypes, selectedNetworkType])
+
   // scroll handler
   useEffect(() => {
     if (!chainMetadata.loading && chainMetadata.processedData) {
@@ -616,6 +652,8 @@ export const FeedList = ({
               onChainSelect={handleNetworkSelect}
               onNetworkTypeChange={handleNetworkTypeChange}
               dataFeedType={dataFeedType}
+              availableNetworkTypes={availableNetworkTypes}
+              selectedNetworkType={selectedNetworkType}
             />
           </div>
         </>