fix(explorer): only check for local device when localnet is explicitly selected

- Modified useLocalnetDetection hook to accept an 'enabled' option that defaults to false
- Updated NetworkSelect to always show the localnet option instead of auto-detecting
- Updated LocalnetUnavailableModal to only enable localnet detection when local network is selected

This prevents the browser from prompting users about connecting to local devices
unless they explicitly select the localnet network from the dropdown.

Author: cursoragent

app/components/LocalnetUnavailableModal.tsx

@@ -15,7 +15,11 @@ import {defaultNetworkName} from "../constants";
 
 export default function LocalnetUnavailableModal() {
   const [networkName, setNetworkName] = useNetworkSelector();
-  const {isAvailable, isChecked} = useLocalnetDetection();
+  // Only check for localnet availability when local network is explicitly selected
+  // This prevents prompting users about local device connections unless they choose localnet
+  const {isAvailable, isChecked} = useLocalnetDetection({
+    enabled: networkName === "local",
+  });
 
   // Show modal when on localnet, initial check is done, and it's not running
   const showModal = networkName === "local" && isChecked && !isAvailable;

app/components/layout/NetworkSelect.tsx

@@ -9,13 +9,11 @@ import {
 import {useLocation} from "@tanstack/react-router";
 import {useNetworkSelector} from "../../global-config";
 import {networks, NetworkName, hiddenNetworks} from "../../constants";
-import {useLocalnetDetection} from "../../hooks/useLocalnetDetection";
 import {useNavigate} from "../../routing";
 
 export default function NetworkSelect() {
   const theme = useTheme();
   const [networkName, setNetworkName] = useNetworkSelector();
-  const {isAvailable: isLocalnetAvailable} = useLocalnetDetection();
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -32,17 +30,15 @@ export default function NetworkSelect() {
     });
   };
 
-  // Filter out hidden networks and "local" (shown separately as "Localnet" when available)
+  // Filter out hidden networks and "local" (shown separately as "Localnet")
   const visibleNetworks = Object.keys(networks).filter(
     (network) =>
       !hiddenNetworks.includes(network as NetworkName) && network !== "local",
   ) as NetworkName[];
 
-  // Check if current network is a hidden network (but not local if it's available)
+  // Check if current network is a hidden network (excluding local which is always shown)
   const isHiddenNetwork =
-    (hiddenNetworks.includes(networkName) ||
-      (networkName === "local" && !isLocalnetAvailable)) &&
-    !(networkName === "local" && isLocalnetAvailable);
+    hiddenNetworks.includes(networkName) && networkName !== "local";
 
   // Custom render for the selected value to show hidden network names
   const renderValue = (selected: string) => {
@@ -93,16 +89,10 @@ export default function NetworkSelect() {
             {network}
           </MenuItem>
         ))}
-        {/* Show localnet option when detected */}
-        {isLocalnetAvailable && (
-          <MenuItem
-            key="local"
-            value="local"
-            sx={{textTransform: "capitalize"}}
-          >
-            localnet
-          </MenuItem>
-        )}
+        {/* Always show localnet option - user must explicitly select it to trigger local device detection */}
+        <MenuItem key="local" value="local" sx={{textTransform: "capitalize"}}>
+          localnet
+        </MenuItem>
       </Select>
     </FormControl>
   );

app/hooks/useLocalnetDetection.ts

@@ -9,18 +9,35 @@ interface LocalnetDetectionResult {
   isChecked: boolean; // True after initial check completes
 }
 
+interface UseLocalnetDetectionOptions {
+  /**
+   * Whether to actively check for localnet availability.
+   * When false, the hook will not make any network requests.
+   * Defaults to false to avoid prompting users about local device connections
+   * unless they explicitly select the local network.
+   */
+  enabled?: boolean;
+}
+
 /**
  * Hook to detect if a local Aptos node is running.
- * Only runs on the client side.
+ * Only runs on the client side and only when enabled.
  * Returns both availability status and whether the initial check has completed.
+ *
+ * @param options.enabled - Whether to actively check for localnet. Defaults to false.
  */
-export function useLocalnetDetection(): LocalnetDetectionResult {
+export function useLocalnetDetection(
+  options: UseLocalnetDetectionOptions = {},
+): LocalnetDetectionResult {
+  const {enabled = false} = options;
   const [isLocalnetAvailable, setIsLocalnetAvailable] = useState(false);
   const [isChecked, setIsChecked] = useState(false);
 
   useEffect(() => {
-    // Only run on client
-    if (typeof window === "undefined") return;
+    // Only run on client and when enabled
+    if (typeof window === "undefined" || !enabled) {
+      return;
+    }
 
     const checkLocalnet = async () => {
       try {
@@ -59,7 +76,15 @@ export function useLocalnetDetection(): LocalnetDetectionResult {
     const interval = setInterval(checkLocalnet, CHECK_INTERVAL);
 
     return () => clearInterval(interval);
-  }, []);
+  }, [enabled]);
+
+  // When not enabled, return unchecked state (checking hasn't started)
+  // This is fine because the LocalnetUnavailableModal only shows the modal
+  // when networkName === "local" (which enables this hook), so the returned
+  // values when disabled don't affect the modal display.
+  if (!enabled) {
+    return {isAvailable: false, isChecked: false};
+  }
 
   return {isAvailable: isLocalnetAvailable, isChecked};
 }