fix: update connected namespaces in storage on switch account

wallets/react/src/hub/autoConnect.ts

@@ -131,7 +131,7 @@ export async function autoConnect(deps: {
       const namespaces: LegacyNamespaceInputForConnect[] = lastConnectedWallets[
         providerName
       ].map((namespace) => ({
-        namespace: namespace.namsepace,
+        namespace: namespace.namespace,
         network: namespace.network,
       }));
 

wallets/react/src/hub/lastConnectedWallets.ts

@@ -8,7 +8,7 @@ import {
 } from './constants.js';
 
 export interface NamespaceInput {
-  namsepace: Namespace;
+  namespace: Namespace;
   network: string | undefined;
 }
 
@@ -53,6 +53,12 @@ export class LastConnectedWalletsFromStorage {
     }
     throw new Error('Not implemented');
   }
+  removeNamespacesFromWallet(providerId: string, namespaceIds: string[]) {
+    if (this.#storageKey === HUB_LAST_CONNECTED_WALLETS) {
+      return this.#removeNamespaceFromWalletHub(providerId, namespaceIds);
+    }
+    throw new Error('Not implemented');
+  }
 
   #listFromLegacy(): LastConnectedWalletsStorage {
     const persistor = new Persistor<LegacyLastConnectedWalletsStorage>();
@@ -105,6 +111,21 @@ export class LastConnectedWalletsFromStorage {
 
     persistor.setItem(this.#storageKey, storageState);
   }
+  #removeNamespaceFromWalletHub(
+    providerId: string,
+    namespaceIds: string[]
+  ): void {
+    const persistor = new Persistor<LastConnectedWalletsStorage>();
+    const storageState = persistor.getItem(this.#storageKey) || {};
+
+    const currentProviderNamespaces = storageState[providerId];
+    const newProviderNamespaces = currentProviderNamespaces.filter(
+      (namespace) => !namespaceIds.includes(namespace.namespace)
+    );
+
+    this.#removeWalletsFromHub([providerId]);
+    this.#addWalletToHub(providerId, newProviderNamespaces);
+  }
   #removeWalletsFromLegacy(providerIds?: string[]): void {
     const persistor = new Persistor<LegacyLastConnectedWalletsStorage>();
     const storageState = persistor.getItem(this.#storageKey) || [];

wallets/react/src/hub/useHubAdapter.ts

@@ -187,7 +187,7 @@ export function useHubAdapter(params: UseAdapterParams): ProviderContext {
             .then<ConnectResult>(transformHubResultToLegacyResult)
             .then((res) => {
               successfulyConnectedNamespaces.push({
-                namsepace: namespaceInput.namespace,
+                namespace: namespaceInput.namespace,
                 network: namespaceInput.network,
               });
               return res;

wallets/react/src/hub/utils.ts

@@ -1,5 +1,4 @@
 import type { AllProxiedNamespaces } from './types.js';
-import type { ConnectResult, ProviderProps } from '../legacy/mod.js';
 import type { Hub, Provider, State } from '@rango-dev/wallets-core';
 import type {
   LegacyNamespaceInputForConnect,
@@ -23,11 +22,18 @@ import {
 } from '@rango-dev/wallets-shared';
 import { type BlockchainMeta, isEvmBlockchain } from 'rango-types';
 
+import {
+  type ConnectResult,
+  HUB_LAST_CONNECTED_WALLETS,
+  type ProviderProps,
+} from '../legacy/mod.js';
+
 import {
   fromAccountIdToLegacyAddressFormat,
   isConnectResultEvm,
   isConnectResultSolana,
 } from './helpers.js';
+import { LastConnectedWalletsFromStorage } from './lastConnectedWallets.js';
 
 /* Gets a list of hub and legacy providers and returns a tuple which separates them. */
 export function separateLegacyAndHubProviders(
@@ -72,6 +78,11 @@ export function findProviderByType(
  * We will call this function on hub's `subscribe`.
  * it will check states and will emit legacy events for backward compatibility.
  */
+
+const lastConnectedWalletsFromStorage = new LastConnectedWalletsFromStorage(
+  HUB_LAST_CONNECTED_WALLETS
+);
+
 export function checkHubStateAndTriggerEvents(
   hub: Hub,
   currentState: State,
@@ -101,6 +112,8 @@ export function checkHubStateAndTriggerEvents(
     let hasProviderDisconnected = false;
     // It will pick the last network from namespaces.
     let maybeNetwork = null;
+    const disconnectedNamespacesIds: string[] = [];
+
     provider.getAll().forEach((namespace) => {
       const storeId = generateStoreId(providerId, namespace.namespaceId);
       const currentNamespaceState = namespaceStateSelector(
@@ -141,12 +154,21 @@ export function checkHubStateAndTriggerEvents(
 
           hasAccountChanged = true;
         } else {
+          // Namespace has been disconnected
+          disconnectedNamespacesIds.push(namespace.namespaceId);
           accounts = null;
           hasProviderDisconnected = true;
         }
       }
     });
 
+    if (disconnectedNamespacesIds.length > 0) {
+      lastConnectedWalletsFromStorage.removeNamespacesFromWallet(
+        providerId,
+        disconnectedNamespacesIds
+      );
+    }
+
     let legacyProvider;
     try {
       legacyProvider = getLegacyProvider(allProviders, providerId);