Ext 3 network dropdown

src/app/atoms/nav.ts

@@ -43,3 +43,5 @@ export const onRampModalAtom = atomWithURLHash("onRampOpened", false);
 export const tokenSlugAtom = atomWithURLHash<string | null>("token", null);
 
 export const activityModalAtom = atomWithURLHash("activityOpened", false);
+
+export const chainIdUrlAtom = atomWithURLHash<number | null>("chainid", null);

src/app/components/elements/NetworkCard.tsx

@@ -7,7 +7,7 @@ import { Network } from "core/types";
 
 import { getNetworkIconUrl } from "fixtures/networks";
 import { Page, SettingTab } from "app/nav";
-import { useAccounts } from "app/hooks";
+import { useAccounts, useExplorerLink } from "app/hooks";
 import IconedButton from "app/components/elements/IconedButton";
 import { ReactComponent as PopoverIcon } from "app/icons/popover.svg";
 import { ReactComponent as WalletExplorerIcon } from "app/icons/external-link.svg";
@@ -31,8 +31,13 @@ const NetworkCard: FC<NetworkCardProps> = ({
   onClick,
   className,
 }) => {
+  const { currentAccount } = useAccounts();
+  const explorerLink = useExplorerLink(network);
+
   const [popoverOpened, setPopoverOpened] = useState(false);
 
+  const explorerUrl = explorerLink?.address(currentAccount.address);
+
   return (
     <DropdownMenu.Root
       open={popoverOpened}
@@ -117,16 +122,17 @@ const NetworkCard: FC<NetworkCardProps> = ({
           "flex flex-col",
         )}
       >
-        {network.explorerUrls?.length ? (
-          <PopoverButton
-            href={network.explorerUrls[0]}
-            Icon={WalletExplorerIcon}
-          >
+        {explorerUrl ? (
+          <PopoverButton href={explorerUrl} Icon={WalletExplorerIcon}>
             Block Explorer
           </PopoverButton>
         ) : null}
         <PopoverButton
-          to={{ page: Page.Settings, setting: SettingTab.Networks }}
+          to={{
+            page: Page.Settings,
+            setting: SettingTab.Networks,
+            chainid: network.chainId,
+          }}
           Icon={SettingsIcon}
         >
           Settings

src/app/components/screens/settingTabs/Networks.tsx

@@ -1,11 +1,13 @@
 import { FC, useCallback, useMemo, useRef, useState } from "react";
 import classNames from "clsx";
 import Fuse from "fuse.js";
+import { useAtomValue } from "jotai";
 
 import { getNetworkIconUrl } from "fixtures/networks";
 
 import { NETWORK_SEARCH_OPTIONS } from "app/defaults";
 import { useLazyAllNetworks } from "app/hooks";
+import { chainIdUrlAtom } from "app/atoms";
 import { ToastOverflowProvider } from "app/hooks/toast";
 import SearchInput from "app/components/elements/SearchInput";
 import ScrollAreaContainer from "app/components/elements/ScrollAreaContainer";
@@ -17,7 +19,9 @@ const Networks: FC = () => {
   const allNetworks = useLazyAllNetworks();
   const scrollAreaRef = useRef<HTMLDivElement>(null);
 
-  const [tab, setTab] = useState<"new" | number | null>(null);
+  const chainIdUrl = useAtomValue(chainIdUrlAtom);
+
+  const [tab, setTab] = useState<"new" | number | null>(chainIdUrl);
   const [searchValue, setSearchValue] = useState<string | null>(null);
 
   const fuse = useMemo(