fix(wallet): ensure proper network and manage wallet switch

apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx

@@ -89,6 +89,7 @@ export const WalletProvider = ({ children }) => {
   const {
     fee: { default: feeGranter }
   } = useAllowance(walletAddress as string, isManaged);
+  const [selectedNetworkId, setSelectedNetworkId] = networkStore.useSelectedNetworkIdStore({ reloadOnChange: true });
 
   useWhen(walletAddress, loadWallet);
 
@@ -102,12 +103,6 @@ export const WalletProvider = ({ children }) => {
     });
   }, [addEndpoints, settings.apiEndpoint, settings.rpcEndpoint]);
 
-  useEffect(() => {
-    if (isWalletLoaded && !isLoading && !isWalletConnected && !!managedWallet && !isManaged) {
-      connectManagedWallet();
-    }
-  }, [isWalletLoaded, isLoading, isWalletConnected, managedWallet, connectManagedWallet, isManaged]);
-
   function switchWalletType() {
     if (selectedWalletType === "custodial" && !managedWallet) {
       userWallet.disconnect();
@@ -158,17 +153,25 @@ export const WalletProvider = ({ children }) => {
   }
 
   async function loadWallet(): Promise<void> {
-    let currentWallets = getStorageWallets();
+    const networkId =
+      isManaged && selectedNetworkId !== browserEnvConfig.NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID
+        ? browserEnvConfig.NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID
+        : undefined;
+    let currentWallets = getStorageWallets(networkId);
 
     if (!currentWallets.some(x => x.address === walletAddress)) {
-      currentWallets.push({ name: username || "", address: walletAddress as string, selected: true, isManaged: false });
+      currentWallets = [...currentWallets, { name: username || "", address: walletAddress as string, selected: true, isManaged: false }];
     }
 
     currentWallets = currentWallets.map(x => ({ ...x, selected: x.address === walletAddress }));
 
-    updateStorageWallets(currentWallets);
+    updateStorageWallets(currentWallets, networkId);
 
     setIsWalletLoaded(true);
+
+    if (networkId) {
+      setSelectedNetworkId(networkId);
+    }
   }
 
   async function signAndBroadcastTx(msgs: EncodeObject[]): Promise<boolean> {

apps/deploy-web/src/hooks/useManagedWallet.ts

@@ -3,14 +3,12 @@ import { useAtom } from "jotai";
 
 import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useUser } from "@src/hooks/useUser";
-import { useWhen } from "@src/hooks/useWhen";
 import { useCreateManagedWalletMutation, useManagedWalletQuery } from "@src/queries/useManagedWalletQuery";
-import networkStore from "@src/store/networkStore";
 import walletStore from "@src/store/walletStore";
 import { deleteManagedWalletFromStorage, ensureUserManagedWalletOwnership, getSelectedStorageWallet, updateStorageManagedWallet } from "@src/utils/walletUtils";
 import { useCustomUser } from "./useCustomUser";
 
-const { NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID, NEXT_PUBLIC_BILLING_ENABLED } = browserEnvConfig;
+const { NEXT_PUBLIC_BILLING_ENABLED } = browserEnvConfig;
 const isBillingEnabled = NEXT_PUBLIC_BILLING_ENABLED;
 
 export const useManagedWallet = () => {
@@ -20,8 +18,8 @@ export const useManagedWallet = () => {
   const { mutate: create, data: created, isLoading: isCreating, isSuccess: isCreated } = useCreateManagedWalletMutation();
   const wallet = useMemo(() => queried || created, [queried, created]);
   const isLoading = isFetching || isCreating;
-  const [selectedNetworkId, setSelectedNetworkId] = networkStore.useSelectedNetworkIdStore({ reloadOnChange: true });
   const [, setIsSignedInWithTrial] = useAtom(walletStore.isSignedInWithTrial);
+  const selected = getSelectedStorageWallet();
 
   useEffect(() => {
     if (signedInUser?.id && (!!queried || !!created)) {
@@ -43,10 +41,6 @@ export const useManagedWallet = () => {
     }
   }, [isFetched, isCreated, wallet]);
 
-  useWhen(wallet && NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID && selectedNetworkId !== NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID, () => {
-    setSelectedNetworkId(NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID);
-  });
-
   useEffect(() => {
     if (user?.id && !user.userId) {
       ensureUserManagedWalletOwnership(user.id);
@@ -55,7 +49,6 @@ export const useManagedWallet = () => {
 
   return useMemo(() => {
     const isConfigured = !!wallet;
-    const selected = getSelectedStorageWallet();
     return {
       create: () => {
         if (!isBillingEnabled) {

packages/network-store/src/network.store.ts

@@ -4,7 +4,7 @@ import { getDefaultStore, useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import cloneDeep from "lodash/cloneDeep";
 
-import { INITIAL_NETWORKS_CONFIG } from "./network.config";
+import { INITIAL_NETWORKS_CONFIG, MAINNET_ID, SANDBOX_ID } from "./network.config";
 import type { Network } from "./network.type";
 
 interface NetworkStoreOptions {
@@ -36,7 +36,7 @@ export class NetworkStore {
 
   readonly networksStore = atom<NetworksStore>({ isLoading: true, error: undefined, data: cloneDeep(INITIAL_NETWORKS_CONFIG) });
 
-  private readonly selectedNetworkIdStore = atomWithStorage<Network["id"]>(this.STORAGE_KEY, this.options.defaultNetworkId);
+  private readonly selectedNetworkIdStore = atomWithStorage<Network["id"]>(this.STORAGE_KEY, this.getInitialNetworkId());
 
   private readonly selectedNetworkStore = atom<Network, [Network], void>(
     get => {
@@ -78,6 +78,21 @@ export class NetworkStore {
     this.initiateNetworks();
   }
 
+  private getInitialNetworkId() {
+    if (typeof window === "undefined") {
+      return this.options.defaultNetworkId;
+    }
+    const raw = localStorage.getItem(this.STORAGE_KEY);
+
+    if (!raw) {
+      return this.options.defaultNetworkId;
+    }
+
+    const parsed = JSON.parse(raw);
+
+    return [MAINNET_ID, SANDBOX_ID].includes(parsed) ? parsed : this.options.defaultNetworkId;
+  }
+
   private async initiateNetworks() {
     const errors: { network: Network; error: Error }[] = [];
     const networks = await Promise.all(