@reown/appkit 1.7.0-alpha.0 → 1.7.0-rc.0

package/dist/esm/src/client/core.js

@@ -1,6 +1,6 @@
 import UniversalProvider from '@walletconnect/universal-provider';
 import { ConstantsUtil, NetworkUtil, ParseUtil } from '@reown/appkit-common';
-import { AccountController, AlertController, AssetUtil, BlockchainApiController, ChainController, ConnectionController, ConnectorController, CoreHelperUtil, EnsController, EventsController, ModalController, OptionsController, PublicStateController, RouterController, SnackController, StorageUtil, ThemeController } from '@reown/appkit-core';
+import { AccountController, AlertController, AssetUtil, BlockchainApiController, ChainController, ConnectionController, ConnectorController, CoreHelperUtil, EnsController, EventsController, ModalController, OptionsController, PublicStateController, RouterController, SnackController, StorageUtil, ThemeController } from '@reown/appkit-controllers';
 import { WalletUtil } from '@reown/appkit-scaffold-ui/utils';
 import { setColorTheme, setThemeVariables } from '@reown/appkit-ui';
 import { CaipNetworksUtil, ErrorUtil, HelpersUtil, LoggerUtil, ConstantsUtil as UtilConstantsUtil } from '@reown/appkit-utils';
@@ -14,6 +14,10 @@ export class AppKitCore {
         // -- Public Internal ---------------------------------------------------
         this.getCaipNetwork = (chainNamespace) => {
             if (chainNamespace) {
+                const namespaceCaipNetwork = ChainController.getNetworkData(chainNamespace)?.caipNetwork;
+                if (namespaceCaipNetwork) {
+                    return namespaceCaipNetwork;
+                }
                 return ChainController.getRequestedCaipNetworks(chainNamespace).filter(c => c.chainNamespace === chainNamespace)?.[0];
             }
             return ChainController.state.activeCaipNetwork || this.defaultCaipNetwork;
@@ -41,7 +45,7 @@ export class AppKitCore {
             BlockchainApiController.setClientId(clientId);
         };
         this.getProvider = (namespace) => ProviderUtil.getProvider(namespace);
-        this.getProviderType = (namespace) => ProviderUtil.state.providerIds[namespace];
+        this.getProviderType = (namespace) => ProviderUtil.getProviderId(namespace);
         this.getPreferredAccountType = () => AccountController.state.preferredAccountType;
         this.setCaipAddress = (caipAddress, chain) => {
             AccountController.setCaipAddress(caipAddress, chain);
@@ -67,13 +71,22 @@ export class AppKitCore {
         this.setCaipNetwork = caipNetwork => {
             ChainController.setActiveCaipNetwork(caipNetwork);
         };
+        this.setCaipNetworkOfNamespace = (caipNetwork, chainNamespace) => {
+            ChainController.setChainNetworkData(chainNamespace, { caipNetwork });
+        };
         this.setAllAccounts = (addresses, chain) => {
             AccountController.setAllAccounts(addresses, chain);
             OptionsController.setHasMultipleAddresses(addresses?.length > 1);
         };
         this.setStatus = (status, chain) => {
-            StorageUtil.setConnectionStatus(status);
             AccountController.setStatus(status, chain);
+            // If at least one namespace is connected, set the connection status
+            if (ConnectorController.isConnected()) {
+                StorageUtil.setConnectionStatus('connected');
+            }
+            else {
+                StorageUtil.setConnectionStatus('disconnected');
+            }
         };
         this.getAddressByChainNamespace = (chainNamespace) => ChainController.getAccountProp('address', chainNamespace);
         this.setConnectors = connectors => {
@@ -180,6 +193,7 @@ export class AppKitCore {
         this.initializeChainController(options);
         this.initializeThemeController(options);
         this.initializeConnectionController(options);
+        this.initializeConnectorController();
     }
     initializeThemeController(options) {
         if (options.themeMode) {
@@ -205,12 +219,11 @@ export class AppKitCore {
     initializeConnectionController(options) {
         ConnectionController.setWcBasic(options.basic ?? false);
     }
+    initializeConnectorController() {
+        ConnectorController.initialize(this.chainNamespaces);
+    }
     initializeOptionsController(options) {
         OptionsController.setDebug(options.debug !== false);
-        if (!options.projectId) {
-            AlertController.open(ErrorUtil.ALERT_ERRORS.PROJECT_ID_NOT_CONFIGURED, 'error');
-            return;
-        }
         // On by default
         OptionsController.setEnableWalletConnect(options.enableWalletConnect !== false);
         OptionsController.setEnableWalletGuide(options.enableWalletGuide !== false);
@@ -239,6 +252,10 @@ export class AppKitCore {
         OptionsController.setDisableAppend(options.disableAppend);
         OptionsController.setEnableEmbedded(options.enableEmbedded);
         OptionsController.setSIWX(options.siwx);
+        if (!options.projectId) {
+            AlertController.open(ErrorUtil.ALERT_ERRORS.PROJECT_ID_NOT_CONFIGURED, 'error');
+            return;
+        }
         const evmAdapter = options.adapters?.find(adapter => adapter.namespace === ConstantsUtil.CHAIN.EVM);
         // Set the SIWE client for EVM chains
         if (evmAdapter) {
@@ -333,14 +350,19 @@ export class AppKitCore {
     createClients() {
         this.connectionControllerClient = {
             connectWalletConnect: async () => {
-                const adapter = this.getAdapter(ChainController.state.activeChain);
+                const activeChain = ChainController.state.activeChain;
+                const adapter = this.getAdapter(activeChain);
+                const chainId = this.getCaipNetwork(activeChain)?.id;
                 if (!adapter) {
                     throw new Error('Adapter not found');
                 }
-                const result = await adapter.connectWalletConnect(this.getCaipNetwork()?.id);
+                const result = await adapter.connectWalletConnect(chainId);
                 this.close();
                 this.setClientId(result?.clientId || null);
                 StorageUtil.setConnectedNamespaces([...ChainController.state.chains.keys()]);
+                this.chainNamespaces.forEach(namespace => {
+                    ConnectorController.setConnectorId(UtilConstantsUtil.CONNECTOR_TYPE_WALLET_CONNECT, namespace);
+                });
                 await this.syncWalletConnectAccount();
             },
             connectExternal: async ({ id, info, type, provider, chain, caipNetwork }) => {
@@ -356,14 +378,15 @@ export class AppKitCore {
                 if (!adapter) {
                     throw new Error('Adapter not found');
                 }
+                const fallbackCaipNetwork = this.getCaipNetwork(chainToUse);
                 const res = await adapter.connect({
                     id,
                     info,
                     type,
                     provider,
-                    chainId: caipNetwork?.id || this.getCaipNetwork()?.id,
+                    chainId: caipNetwork?.id || fallbackCaipNetwork?.id,
                     rpcUrl: caipNetwork?.rpcUrls?.default?.http?.[0] ||
-                        this.getCaipNetwork()?.rpcUrls?.default?.http?.[0]
+                        fallbackCaipNetwork?.rpcUrls?.default?.http?.[0]
                 });
                 if (!res) {
                     return;
@@ -386,7 +409,7 @@ export class AppKitCore {
                 const namespace = ChainController.state.activeChain;
                 const adapter = this.getAdapter(namespace);
                 const provider = ProviderUtil.getProvider(namespace);
-                const providerType = ProviderUtil.state.providerIds[namespace];
+                const providerType = ProviderUtil.getProviderId(namespace);
                 await adapter?.disconnect({ provider, providerType });
                 StorageUtil.removeConnectedNamespace(namespace);
                 ProviderUtil.resetChain(namespace);
@@ -501,7 +524,7 @@ export class AppKitCore {
         ConnectionController.setClient(this.connectionControllerClient);
     }
     getApprovedCaipNetworksData() {
-        const providerType = ProviderUtil.state.providerIds[ChainController.state.activeChain];
+        const providerType = ProviderUtil.getProviderId(ChainController.state.activeChain);
         if (providerType === UtilConstantsUtil.CONNECTOR_TYPE_WALLET_CONNECT) {
             const namespaces = this.universalProvider?.session?.namespaces;
             return {
@@ -520,32 +543,27 @@ export class AppKitCore {
         if (!caipNetwork) {
             return;
         }
-        if (AccountController.state.address) {
+        const networkNamespace = caipNetwork.chainNamespace;
+        const namespaceAddress = this.getAddressByChainNamespace(caipNetwork.chainNamespace);
+        if (namespaceAddress) {
+            const provider = ProviderUtil.getProvider(networkNamespace);
+            const providerType = ProviderUtil.getProviderId(networkNamespace);
             if (caipNetwork.chainNamespace === ChainController.state.activeChain) {
-                const adapter = this.getAdapter(ChainController.state.activeChain);
-                const provider = ProviderUtil.getProvider(ChainController.state.activeChain);
-                const providerType = ProviderUtil.state.providerIds[ChainController.state.activeChain];
+                const adapter = this.getAdapter(networkNamespace);
                 await adapter?.switchNetwork({ caipNetwork, provider, providerType });
-                this.setCaipNetwork(caipNetwork);
-                await this.syncAccount({
-                    address: AccountController.state.address,
-                    chainId: caipNetwork.id,
-                    chainNamespace: caipNetwork.chainNamespace
-                });
             }
             else {
-                const providerType = ProviderUtil.state.providerIds[ChainController.state.activeChain];
                 this.setCaipNetwork(caipNetwork);
-                if (providerType === 'WALLET_CONNECT') {
+                if (providerType === UtilConstantsUtil.CONNECTOR_TYPE_WALLET_CONNECT) {
                     this.syncWalletConnectAccount();
                 }
                 else {
-                    const address = this.getAddressByChainNamespace(caipNetwork.chainNamespace);
+                    const address = this.getAddressByChainNamespace(networkNamespace);
                     if (address) {
                         this.syncAccount({
                             address,
                             chainId: caipNetwork.id,
-                            chainNamespace: caipNetwork.chainNamespace
+                            chainNamespace: networkNamespace
                         });
                     }
                 }
@@ -625,18 +643,13 @@ export class AppKitCore {
             this.setStatus(connectionStatus, chainNamespace);
         }
         adapter.on('switchNetwork', ({ address, chainId }) => {
-            if (chainId &&
-                this.caipNetworks?.find(n => n.id === chainId || n.caipNetworkId === chainId)) {
-                if (ChainController.state.activeChain === chainNamespace && address) {
-                    this.syncAccount({ address, chainId, chainNamespace });
-                }
-                else if (ChainController.state.activeChain === chainNamespace &&
-                    AccountController.state.address) {
-                    this.syncAccount({
-                        address: AccountController.state.address,
-                        chainId,
-                        chainNamespace
-                    });
+            const caipNetwork = this.caipNetworks?.find(n => n.id === chainId || n.caipNetworkId === chainId);
+            const isSameNamespace = ChainController.state.activeChain === chainNamespace;
+            const accountAddress = ChainController.getAccountProp('address', chainNamespace);
+            if (caipNetwork) {
+                const account = isSameNamespace && address ? address : accountAddress;
+                if (account) {
+                    this.syncAccount({ address: account, chainId, chainNamespace });
                 }
             }
             else {
@@ -650,24 +663,27 @@ export class AppKitCore {
             if (!address || !activeCaipNetwork?.id) {
                 return;
             }
-            this.updateNativeBalance();
+            this.updateNativeBalance(address, activeCaipNetwork.id, activeCaipNetwork.chainNamespace);
         });
         adapter.on('accountChanged', ({ address, chainId }) => {
-            if (ChainController.state.activeChain === chainNamespace && chainId) {
+            const isActiveChain = ChainController.state.activeChain === chainNamespace;
+            if (isActiveChain && chainId) {
                 this.syncAccount({
                     address,
                     chainId,
                     chainNamespace
                 });
             }
-            else if (ChainController.state.activeChain === chainNamespace &&
-                ChainController.state.activeCaipNetwork?.id) {
+            else if (isActiveChain && ChainController.state.activeCaipNetwork?.id) {
                 this.syncAccount({
                     address,
                     chainId: ChainController.state.activeCaipNetwork?.id,
                     chainNamespace
                 });
             }
+            else {
+                this.syncAccountInfo(address, chainId, chainNamespace);
+            }
         });
     }
     async createUniversalProviderForAdapter(chainNamespace) {
@@ -682,7 +698,7 @@ export class AppKitCore {
     }
     async syncNamespaceConnection(namespace) {
         try {
-            const connectorId = StorageUtil.getConnectedConnectorId(namespace);
+            const connectorId = ConnectorController.getConnectorId(namespace);
             this.setStatus('connecting', namespace);
             switch (connectorId) {
                 case ConstantsUtil.CONNECTOR_ID.WALLET_CONNECT:
@@ -697,28 +713,31 @@ export class AppKitCore {
         }
         catch (err) {
             console.warn("AppKit couldn't sync existing connection", err);
-            StorageUtil.deleteConnectedConnectorId(namespace);
             this.setStatus('disconnected', namespace);
         }
     }
     async syncAdapterConnection(namespace) {
         const adapter = this.getAdapter(namespace);
-        const connectorId = StorageUtil.getConnectedConnectorId(namespace);
+        const connectorId = ConnectorController.getConnectorId(namespace);
         const caipNetwork = this.getCaipNetwork();
+        const connector = ConnectorController.getConnectors(namespace).find(c => c.id === connectorId);
         try {
-            if (!adapter || !connectorId) {
-                throw new Error(`Adapter or connectorId not found for namespace ${namespace}`);
+            if (!adapter || !connector) {
+                throw new Error(`Adapter or connector not found for namespace ${namespace}`);
+            }
+            if (!caipNetwork?.id) {
+                throw new Error('CaipNetwork not found');
             }
             const connection = await adapter?.syncConnection({
                 namespace,
-                id: connectorId,
-                chainId: caipNetwork?.id,
+                id: connector.id,
+                chainId: caipNetwork.id,
                 rpcUrl: caipNetwork?.rpcUrls?.default?.http?.[0]
             });
             if (connection) {
                 const accounts = await adapter?.getAccounts({
                     namespace,
-                    id: connectorId
+                    id: connector.id
                 });
                 if (accounts && accounts.accounts.length > 0) {
                     this.setAllAccounts(accounts.accounts, namespace);
@@ -735,12 +754,11 @@ export class AppKitCore {
             }
         }
         catch (e) {
-            StorageUtil.deleteConnectedConnectorId(namespace);
             this.setStatus('disconnected', namespace);
         }
     }
     async syncWalletConnectAccount() {
-        this.chainNamespaces.forEach(async (chainNamespace) => {
+        const syncTasks = this.chainNamespaces.map(async (chainNamespace) => {
             const adapter = this.getAdapter(chainNamespace);
             const namespaceAccounts = this.universalProvider?.session?.namespaces?.[chainNamespace]?.accounts || [];
             // We try and find the address for this network in the session object.
@@ -766,7 +784,7 @@ export class AppKitCore {
                 else {
                     ProviderUtil.setProvider(chainNamespace, this.universalProvider);
                 }
-                StorageUtil.setConnectedConnectorId(chainNamespace, ConstantsUtil.CONNECTOR_ID.WALLET_CONNECT);
+                ConnectorController.setConnectorId(ConstantsUtil.CONNECTOR_ID.WALLET_CONNECT, chainNamespace);
                 StorageUtil.addConnectedNamespace(chainNamespace);
                 this.syncWalletConnectAccounts(chainNamespace);
                 await this.syncAccount({
@@ -775,8 +793,12 @@ export class AppKitCore {
                     chainNamespace
                 });
             }
+            else {
+                this.setStatus('disconnected', chainNamespace);
+            }
+            await ChainController.setApprovedCaipNetworksData(chainNamespace);
         });
-        await ChainController.setApprovedCaipNetworksData(ChainController.state.activeChain);
+        await Promise.all(syncTasks);
     }
     syncWalletConnectAccounts(chainNamespace) {
         const addresses = this.universalProvider?.session?.namespaces?.[chainNamespace]?.accounts
@@ -792,19 +814,16 @@ export class AppKitCore {
     syncProvider({ type, provider, id, chainNamespace }) {
         ProviderUtil.setProviderId(chainNamespace, type);
         ProviderUtil.setProvider(chainNamespace, provider);
-        StorageUtil.setConnectedConnectorId(chainNamespace, id);
+        ConnectorController.setConnectorId(id, chainNamespace);
     }
     async syncAccount(params) {
+        const isActiveNamespace = params.chainNamespace === ChainController.state.activeChain;
+        const networkOfChain = ChainController.getCaipNetworkByNamespace(params.chainNamespace, params.chainId);
         const { address, chainId, chainNamespace } = params;
         const { chainId: activeChainId } = StorageUtil.getActiveNetworkProps();
         const chainIdToUse = chainId || activeChainId;
         const isUnsupportedNetwork = ChainController.state.activeCaipNetwork?.name === ConstantsUtil.UNSUPPORTED_NETWORK_NAME;
         const shouldSupportAllNetworks = ChainController.getNetworkProp('supportsAllNetworks', chainNamespace);
-        // Only update state when needed
-        if (!HelpersUtil.isLowerCaseMatch(address, AccountController.state.address)) {
-            this.setCaipAddress(`${chainNamespace}:${chainId}:${address}`, chainNamespace);
-            await this.syncIdentity({ address, chainId, chainNamespace });
-        }
         this.setStatus('connected', chainNamespace);
         if (isUnsupportedNetwork && !shouldSupportAllNetworks) {
             return;
@@ -834,23 +853,43 @@ export class AppKitCore {
                     this.setCaipNetwork(network);
                 }
             }
+            else if (!isActiveNamespace) {
+                if (networkOfChain) {
+                    this.setCaipNetworkOfNamespace(networkOfChain, chainNamespace);
+                }
+            }
             this.syncConnectedWalletInfo(chainNamespace);
-            // Only update state when needed
             if (!HelpersUtil.isLowerCaseMatch(address, AccountController.state.address)) {
-                this.setCaipAddress(`${chainNamespace}:${network?.id}:${address}`, chainNamespace);
-                await this.syncIdentity({
-                    address,
-                    chainId: network?.id,
-                    chainNamespace
-                });
+                this.syncAccountInfo(address, network?.id, chainNamespace);
+            }
+            if (isActiveNamespace) {
+                await this.syncBalance({ address, chainId: network?.id, chainNamespace });
+            }
+            else {
+                await this.syncBalance({ address, chainId: networkOfChain?.id, chainNamespace });
             }
-            await this.syncBalance({ address, chainId: network?.id, chainNamespace });
         }
     }
+    async syncAccountInfo(address, chainId, chainNamespace) {
+        const caipAddress = this.getCaipAddress(chainNamespace);
+        const newChainId = chainId || caipAddress?.split(':')[1];
+        if (!newChainId) {
+            return;
+        }
+        const newCaipAddress = `${chainNamespace}:${newChainId}:${address}`;
+        this.setCaipAddress(newCaipAddress, chainNamespace);
+        await this.syncIdentity({
+            address,
+            chainId: newChainId,
+            chainNamespace
+        });
+    }
     async syncIdentity({ address, chainId, chainNamespace }) {
         const caipNetworkId = `${chainNamespace}:${chainId}`;
         const activeCaipNetwork = this.caipNetworks?.find(n => n.caipNetworkId === caipNetworkId);
         if (chainNamespace !== ConstantsUtil.CHAIN.EVM || activeCaipNetwork?.testnet) {
+            this.setProfileName(null, chainNamespace);
+            this.setProfileImage(null, chainNamespace);
             return;
         }
         try {
@@ -905,7 +944,7 @@ export class AppKitCore {
         }
     }
     syncConnectedWalletInfo(chainNamespace) {
-        const connectorId = StorageUtil.getConnectedConnectorId(chainNamespace);
+        const connectorId = ConnectorController.getConnectorId(chainNamespace);
         const providerType = ProviderUtil.getProviderId(chainNamespace);
         if (providerType === UtilConstantsUtil.CONNECTOR_TYPE_ANNOUNCED ||
             providerType === UtilConstantsUtil.CONNECTOR_TYPE_INJECTED) {
@@ -940,21 +979,21 @@ export class AppKitCore {
     }
     async syncBalance(params) {
         const caipNetwork = NetworkUtil.getNetworksByNamespace(this.caipNetworks, params.chainNamespace).find(n => n.id.toString() === params.chainId?.toString());
-        if (!caipNetwork) {
+        if (!caipNetwork || !params.chainId) {
             return;
         }
-        await this.updateNativeBalance();
+        await this.updateNativeBalance(params.address, params.chainId, params.chainNamespace);
     }
-    async updateNativeBalance() {
-        const adapter = this.getAdapter(ChainController.state.activeChain);
-        if (adapter && ChainController.state.activeChain && AccountController.state.address) {
+    async updateNativeBalance(address, chainId, namespace) {
+        const adapter = this.getAdapter(namespace);
+        if (adapter) {
             const balance = await adapter.getBalance({
-                address: AccountController.state.address,
-                chainId: ChainController.state.activeCaipNetwork?.id,
-                caipNetwork: this.getCaipNetwork(),
+                address,
+                chainId,
+                caipNetwork: this.getCaipNetwork(namespace),
                 tokens: this.options.tokens
             });
-            this.setBalance(balance.balance, balance.symbol, ChainController.state.activeChain);
+            this.setBalance(balance.balance, balance.symbol, namespace);
         }
     }
     // -- Universal Provider ---------------------------------------------------
@@ -1084,17 +1123,14 @@ export class AppKitCore {
         if (options?.uri) {
             ConnectionController.setUri(options.uri);
         }
-        if (options?.namespace) {
-            ConnectorController.setFilterByNamespace(options.namespace);
-        }
         await ModalController.open(options);
     }
     async close() {
         await this.injectModalUi();
         ModalController.close();
     }
-    setLoading(loading) {
-        ModalController.setLoading(loading);
+    setLoading(loading, namespace) {
+        ModalController.setLoading(loading, namespace);
     }
     async disconnect() {
         await ConnectionController.disconnect();
@@ -1120,9 +1156,7 @@ export class AppKitCore {
             : null;
     }
     getWalletProviderType() {
-        return ChainController.state.activeChain
-            ? ProviderUtil.state.providerIds[ChainController.state.activeChain]
-            : null;
+        return ProviderUtil.getProviderId(ChainController.state.activeChain);
     }
     subscribeProviders(callback) {
         return ProviderUtil.subscribeProviders(callback);
@@ -1153,29 +1187,37 @@ export class AppKitCore {
     getWalletInfo() {
         return AccountController.state.connectedWalletInfo;
     }
+    getAccount(namespace) {
+        const authConnector = ConnectorController.getAuthConnector(namespace);
+        const accountState = ChainController.getAccountData(namespace);
+        if (!accountState) {
+            return undefined;
+        }
+        return {
+            allAccounts: accountState.allAccounts,
+            caipAddress: accountState.caipAddress,
+            address: CoreHelperUtil.getPlainAddress(accountState.caipAddress),
+            isConnected: Boolean(accountState.caipAddress),
+            status: accountState.status,
+            embeddedWalletInfo: authConnector
+                ? {
+                    user: accountState.user,
+                    authProvider: accountState.socialProvider ||
+                        'email',
+                    accountType: accountState.preferredAccountType,
+                    isSmartAccountDeployed: Boolean(accountState.smartAccountDeployed)
+                }
+                : undefined
+        };
+    }
     subscribeAccount(callback, namespace) {
-        function updateVal() {
-            const authConnector = ConnectorController.getAuthConnector(namespace);
-            const accountState = ChainController.getAccountDataByChainNamespace(namespace);
-            if (!accountState) {
+        const updateVal = () => {
+            const account = this.getAccount(namespace);
+            if (!account) {
                 return;
             }
-            callback({
-                allAccounts: accountState.allAccounts,
-                caipAddress: accountState.caipAddress,
-                address: CoreHelperUtil.getPlainAddress(accountState.caipAddress),
-                isConnected: Boolean(accountState.caipAddress),
-                status: accountState.status,
-                embeddedWalletInfo: authConnector
-                    ? {
-                        user: accountState.user,
-                        authProvider: accountState.socialProvider || 'email',
-                        accountType: accountState.preferredAccountType,
-                        isSmartAccountDeployed: Boolean(accountState.smartAccountDeployed)
-                    }
-                    : undefined
-            });
-        }
+            callback(account);
+        };
         if (namespace) {
             ChainController.subscribeChainProp('accountState', updateVal, namespace);
         }