@rango-dev/widget-embedded 0.39.1-next.16 → 0.39.1-next.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.39.1-next.16",
+  "version": "0.39.1-next.17",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.6.1-next.0",
-    "@rango-dev/provider-all": "^0.42.1-next.14",
+    "@rango-dev/provider-all": "^0.42.1-next.15",
     "@rango-dev/queue-manager-core": "^0.27.1-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.42.1-next.6",
+    "@rango-dev/queue-manager-rango-preset": "^0.42.1-next.7",
     "@rango-dev/queue-manager-react": "^0.27.1-next.0",
     "@rango-dev/signer-solana": "^0.36.1-next.1",
-    "@rango-dev/ui": "^0.43.1-next.7",
-    "@rango-dev/wallets-core": "^0.40.1-next.13",
-    "@rango-dev/wallets-react": "^0.27.1-next.15",
-    "@rango-dev/wallets-shared": "^0.41.1-next.6",
+    "@rango-dev/ui": "^0.43.1-next.8",
+    "@rango-dev/wallets-core": "^0.40.1-next.14",
+    "@rango-dev/wallets-react": "^0.27.1-next.16",
+    "@rango-dev/wallets-shared": "^0.41.1-next.7",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/containers/Wallets/Wallets.helpers.ts

@@ -0,0 +1,26 @@
+import type { OnUpdateState } from './Wallets.types';
+import type { LegacyEventHandler } from '@rango-dev/wallets-core/legacy';
+
+import { LegacyEvents } from '@rango-dev/wallets-core/legacy';
+
+/*
+ * propagate updates for Dapps using external wallets
+ *
+ * Note: to take more control over the public interface and wallets-core interface (which may be changed) we use this layer
+ */
+export function propagateEvents(
+  cb: OnUpdateState,
+  eventParams: Parameters<LegacyEventHandler>
+): void {
+  const [walletType, event, value, coreState, info] = eventParams;
+
+  /*
+   * PROVIDER_DISCONNECTED has conflict with WalletEventTypes.DISCONNECT since they are doing samething, the first one is using only for Hub, the second one is what we exposed to the lib users.
+   * so for backward-compat we need to keep the behavior of WalletEventTypes.DISCONNECT
+   */
+  if (event === LegacyEvents.PROVIDER_DISCONNECTED) {
+    return;
+  }
+
+  cb(walletType, event, value, coreState, info);
+}

package/src/containers/Wallets/Wallets.tsx

@@ -4,25 +4,18 @@ import type {
   WidgetContextInterface,
 } from './Wallets.types';
 import type { ProvidersOptions } from '../../utils/providers';
-import type { LegacyEventHandler as EventHandler } from '@rango-dev/wallets-core/legacy';
+import type { LegacyEventHandler } from '@rango-dev/wallets-core/dist/legacy/mod';
 import type { PropsWithChildren } from 'react';
 
-import {
-  legacyFormatAddressWithNetwork as formatAddressWithNetwork,
-  legacyReadAccountAddress as readAccountAddress,
-} from '@rango-dev/wallets-core/legacy';
-import { Events, Provider } from '@rango-dev/wallets-react';
-import { type Network } from '@rango-dev/wallets-shared';
-import { isEvmBlockchain } from 'rango-sdk';
+import { Provider } from '@rango-dev/wallets-react';
 import React, { createContext, useEffect, useMemo, useRef } from 'react';
 
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
-import {
-  prepareAccountsForWalletStore,
-  walletAndSupportedChainsNames,
-} from '../../utils/wallets';
+
+import { useUpdates } from './useUpdates';
+import { propagateEvents } from './Wallets.helpers';
 
 export const WidgetContext = createContext<WidgetContextInterface>({
   onConnectWallet: () => {
@@ -39,11 +32,8 @@ function Main(props: PropsWithChildren<PropTypes>) {
     updateSettings,
     fetch: fetchMeta,
     fetchStatus,
-    removeBalancesForWallet,
   } = useAppStore();
   const blockchains = useAppStore().blockchains();
-  const { newWalletConnected, disconnectWallet, connectedWallets } =
-    useAppStore();
   const config = useAppStore().config;
 
   const walletOptions: ProvidersOptions = {
@@ -57,6 +47,10 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const { providers } = useWalletProviders(config.wallets, walletOptions);
   const onConnectWalletHandler = useRef<OnWalletConnectionChange>();
   const onDisconnectWalletHandler = useRef<OnWalletConnectionChange>();
+  const { handler: handleEvent } = useUpdates({
+    onConnectWalletHandler,
+    onDisconnectWalletHandler,
+  });
 
   useEffect(() => {
     void fetchMeta().catch(console.log);
@@ -73,131 +67,6 @@ function Main(props: PropsWithChildren<PropTypes>) {
     }
   }, [props.config, fetchStatus]);
 
-  const evmBasedChainNames = blockchains
-    .filter(isEvmBlockchain)
-    .map((chain) => chain.name);
-
-  const onUpdateState: EventHandler = (type, event, value, state, info) => {
-    if (event === Events.NAMESPACE_DISCONNECTED) {
-      removeBalancesForWallet(type, {
-        namespaces: value,
-      });
-    }
-
-    if (event === Events.ACCOUNTS) {
-      const supportedChainNames: Network[] | null =
-        walletAndSupportedChainsNames(info.supportedBlockchains);
-
-      /*
-       * When a wallet is connecting to an evm account, we will consider it as the account exists on other evm-compatible blockchains
-       * To get their balances.
-       *
-       * The logic here is for handling switching account functionality in wallets. when a wallet is switching to another account
-       * we need to clean the balances for old accounts.
-       *
-       * Note: hub will do the cleanup on namespace diconnected event.
-       */
-      if (!info.isHub) {
-        const evmAccounts: string[] = [];
-        const nonEvmAccounts: string[] = [];
-
-        value?.forEach((account: string) => {
-          const { network } = readAccountAddress(account);
-          if (evmBasedChainNames.includes(network)) {
-            evmAccounts.push(account);
-          } else {
-            nonEvmAccounts.push(account);
-          }
-        });
-
-        const previousAccounts = connectedWallets
-          .filter((wallet) => wallet.walletType === type)
-          .map((wallet) =>
-            formatAddressWithNetwork(wallet.address, wallet.chain)
-          );
-
-        if (previousAccounts.length > 0) {
-          if (evmAccounts.length > 0) {
-            // We use same logic for removing as we use for adding.
-            const data = prepareAccountsForWalletStore(
-              type,
-              evmAccounts,
-              evmBasedChainNames,
-              supportedChainNames,
-              info.isContractWallet
-            );
-
-            removeBalancesForWallet(type, {
-              chains: data.map((account) => account.chain),
-            });
-          }
-
-          if (nonEvmAccounts.length > 0) {
-            removeBalancesForWallet(type, {
-              chains: nonEvmAccounts.map((account) => {
-                const { network } = readAccountAddress(account);
-                return network;
-              }),
-            });
-          }
-        }
-      }
-
-      // After cleaning up balances, it's time to add new accounts.
-      if (value) {
-        const data = prepareAccountsForWalletStore(
-          type,
-          value,
-          evmBasedChainNames,
-          supportedChainNames,
-          info.isContractWallet
-        );
-        if (data.length) {
-          void newWalletConnected(data, info.namespace);
-        }
-      } else {
-        disconnectWallet(type);
-        if (!!onDisconnectWalletHandler.current) {
-          onDisconnectWalletHandler.current(type);
-        } else {
-          console.warn(
-            `onDisconnectWallet handler hasn't been set. Are you sure?`
-          );
-        }
-      }
-    }
-
-    /*
-     * TODO: not sure why we used `Events.Acccounts` for detecting if a provider gets connected or not, if we can use `CONNCECTED` for the legacy
-     * we can only rely Events.Connected and remove the legacy conidition
-     */
-    const isLegacyProviderConnected =
-      event === Events.ACCOUNTS && state.connected;
-    const isHubPorviderConnected = event === Events.CONNECTED && info.isHub;
-    if (isLegacyProviderConnected || isHubPorviderConnected) {
-      const key = `${type}-${state.network}-${value}`;
-
-      if (!!onConnectWalletHandler.current) {
-        onConnectWalletHandler.current(key);
-      } else {
-        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
-      }
-    }
-
-    if (event === Events.NETWORK && state.network) {
-      const key = `${type}-${state.network}`;
-      if (!!onConnectWalletHandler.current) {
-        onConnectWalletHandler.current(key);
-      } else {
-        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
-      }
-    }
-
-    // propagate updates for Dapps using external wallets
-    if (props.onUpdateState) {
-      props.onUpdateState(type, event, value, state, info);
-    }
-  };
   const isActiveTab = useUiStore.use.isActiveTab();
 
   const handlers = useMemo(
@@ -217,7 +86,20 @@ function Main(props: PropsWithChildren<PropTypes>) {
       <Provider
         allBlockChains={blockchains}
         providers={providers}
-        onUpdateState={onUpdateState}
+        onUpdateState={(type, event, value, state, info) => {
+          const eventParams: Parameters<LegacyEventHandler> = [
+            type,
+            event,
+            value,
+            state,
+            info,
+          ];
+          handleEvent(...eventParams);
+
+          if (props.onUpdateState) {
+            propagateEvents(props.onUpdateState, eventParams);
+          }
+        }}
         autoConnect={!!isActiveTab}
         configs={{
           wallets: config.wallets,

package/src/containers/Wallets/Wallets.types.ts

@@ -1,5 +1,8 @@
 import type { WidgetConfig } from '../../types';
-import type { LegacyEventHandler as EventHandler } from '@rango-dev/wallets-core/legacy';
+import type {
+  LegacyEventHandler as EventHandler,
+  LegacyEvents,
+} from '@rango-dev/wallets-core/legacy';
 
 export type OnWalletConnectionChange = (key: string) => void;
 export interface WidgetContextInterface {
@@ -17,7 +20,18 @@ export interface WidgetContextInterface {
   onDisconnectWallet(handler: OnWalletConnectionChange): void;
 }
 
+type EventHandlerParams = Parameters<EventHandler>;
+type EventParam = Exclude<LegacyEvents, LegacyEvents.PROVIDER_DISCONNECTED>;
+
+export type OnUpdateState = (
+  type: EventHandlerParams[0],
+  event: EventParam,
+  value: EventHandlerParams[2],
+  coreState: EventHandlerParams[3],
+  info: EventHandlerParams[4]
+) => void;
+
 export interface PropTypes {
-  onUpdateState?: EventHandler;
+  onUpdateState?: OnUpdateState;
   config: WidgetConfig;
 }

package/src/containers/Wallets/useUpdates.ts

@@ -0,0 +1,240 @@
+import type { OnWalletConnectionChange } from './Wallets.types';
+import type {
+  LegacyEventHandler as EventHandler,
+  LegacyEventHandler,
+} from '@rango-dev/wallets-core/legacy';
+
+import {
+  legacyFormatAddressWithNetwork as formatAddressWithNetwork,
+  legacyReadAccountAddress as readAccountAddress,
+} from '@rango-dev/wallets-core/legacy';
+import { Events } from '@rango-dev/wallets-react';
+import { type Network } from '@rango-dev/wallets-shared';
+import { isEvmBlockchain } from 'rango-sdk';
+
+import { useAppStore } from '../../store/AppStore';
+import {
+  prepareAccountsForWalletStore,
+  walletAndSupportedChainsNames,
+} from '../../utils/wallets';
+
+interface UseUpdatesParams {
+  onConnectWalletHandler: React.MutableRefObject<
+    OnWalletConnectionChange | undefined
+  >;
+  onDisconnectWalletHandler: React.MutableRefObject<
+    OnWalletConnectionChange | undefined
+  >;
+}
+interface UseUpdates {
+  handler: EventHandler;
+}
+
+export function useUpdates(params: UseUpdatesParams): UseUpdates {
+  const {
+    newWalletConnected,
+    disconnectWallet,
+    disconnectNamespaces,
+    connectedWallets,
+    removeBalancesForWallet,
+    blockchains,
+  } = useAppStore();
+
+  const { onConnectWalletHandler, onDisconnectWalletHandler } = params;
+  const evmBasedChainNames = blockchains()
+    .filter(isEvmBlockchain)
+    .map((chain) => chain.name);
+
+  const onAccountsEvent = (
+    event: Parameters<LegacyEventHandler>,
+    params: {
+      supportedChainNames: Network[] | null;
+    }
+  ) => {
+    const [type, , value, , info] = event;
+
+    const data = prepareAccountsForWalletStore(
+      type,
+      value,
+      evmBasedChainNames,
+      params.supportedChainNames,
+      info.isContractWallet
+    );
+
+    if (data.length) {
+      void newWalletConnected(data, info.namespace);
+    }
+  };
+
+  const handleUpdatesForHub: EventHandler = (
+    type,
+    event,
+    value,
+    state,
+    info
+  ) => {
+    if (event === Events.ACCOUNTS) {
+      const supportedChainNames: Network[] | null =
+        walletAndSupportedChainsNames(info.supportedBlockchains);
+
+      // After cleaning up balances, it's time to add new accounts.
+      if (value) {
+        onAccountsEvent([type, event, value, state, info], {
+          supportedChainNames,
+        });
+      }
+    }
+
+    if (event === Events.CONNECTED) {
+      const key = `${type}-${state.network}-${value}`;
+
+      if (!!onConnectWalletHandler.current) {
+        onConnectWalletHandler.current(key);
+      } else {
+        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
+      }
+    }
+
+    if (event === Events.PROVIDER_DISCONNECTED) {
+      disconnectWallet(type);
+      if (!!onDisconnectWalletHandler.current) {
+        onDisconnectWalletHandler.current(type);
+      } else {
+        console.warn(
+          `onDisconnectWallet handler hasn't been set. Are you sure?`
+        );
+      }
+    }
+
+    if (event === Events.NAMESPACE_DISCONNECTED) {
+      disconnectNamespaces(type, value);
+    }
+  };
+
+  const handleUpdatesForLegacy: EventHandler = (
+    type,
+    event,
+    value,
+    state,
+    info
+  ) => {
+    if (event === Events.ACCOUNTS) {
+      const supportedChainNames: Network[] | null =
+        walletAndSupportedChainsNames(info.supportedBlockchains);
+
+      /*
+       * When a wallet is connecting to an evm account, we will consider it as the account exists on other evm-compatible blockchains
+       * To get their balances.
+       *
+       * The logic here is for handling switching account functionality in wallets. when a wallet is switching to another account
+       * we need to clean the balances for old accounts.
+       *
+       * Note: hub will do the cleanup on namespace diconnected event.
+       */
+      const evmAccounts: string[] = [];
+      const nonEvmAccounts: string[] = [];
+
+      value?.forEach((account: string) => {
+        const { network } = readAccountAddress(account);
+        if (evmBasedChainNames.includes(network)) {
+          evmAccounts.push(account);
+        } else {
+          nonEvmAccounts.push(account);
+        }
+      });
+
+      const previousAccounts = connectedWallets
+        .filter((wallet) => wallet.walletType === type)
+        .map((wallet) =>
+          formatAddressWithNetwork(wallet.address, wallet.chain)
+        );
+
+      if (previousAccounts.length > 0) {
+        if (evmAccounts.length > 0) {
+          // We use same logic for removing as we use for adding.
+          const data = prepareAccountsForWalletStore(
+            type,
+            evmAccounts,
+            evmBasedChainNames,
+            supportedChainNames,
+            info.isContractWallet
+          );
+
+          removeBalancesForWallet(type, {
+            chains: data.map((account) => account.chain),
+          });
+        }
+
+        if (nonEvmAccounts.length > 0) {
+          removeBalancesForWallet(type, {
+            chains: nonEvmAccounts.map((account) => {
+              const { network } = readAccountAddress(account);
+              return network;
+            }),
+          });
+        }
+      }
+
+      // After cleaning up balances, it's time to add new accounts.
+      if (value) {
+        onAccountsEvent([type, event, value, state, info], {
+          supportedChainNames,
+        });
+      } else {
+        disconnectWallet(type);
+        if (!!onDisconnectWalletHandler.current) {
+          onDisconnectWalletHandler.current(type);
+        } else {
+          console.warn(
+            `onDisconnectWallet handler hasn't been set. Are you sure?`
+          );
+        }
+      }
+    }
+
+    /*
+     * TODO: not sure why we used `Events.Acccounts` for detecting if a provider gets connected or not, if we can use `CONNCECTED` for the legacy
+     * we can only rely Events.Connected and remove the legacy conidition
+     */
+    if (event === Events.ACCOUNTS && state.connected) {
+      const key = `${type}-${state.network}-${value}`;
+
+      if (!!onConnectWalletHandler.current) {
+        onConnectWalletHandler.current(key);
+      } else {
+        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
+      }
+    }
+  };
+
+  const handleUpdatesForBoth: EventHandler = (
+    type,
+    event,
+    _value,
+    state,
+    _info
+  ) => {
+    if (event === Events.NETWORK && state.network) {
+      const key = `${type}-${state.network}`;
+      if (!!onConnectWalletHandler.current) {
+        onConnectWalletHandler.current(key);
+      } else {
+        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
+      }
+    }
+  };
+
+  const handler: EventHandler = (type, event, value, state, info) => {
+    if (info.isHub) {
+      handleUpdatesForHub(type, event, value, state, info);
+    } else {
+      handleUpdatesForLegacy(type, event, value, state, info);
+    }
+
+    handleUpdatesForBoth(type, event, value, state, info);
+  };
+
+  return {
+    handler,
+  };
+}

package/src/store/slices/wallets.ts

@@ -108,10 +108,15 @@ export interface WalletsSlice {
     accounts: Wallet[],
     namespace?: Namespace
   ) => Promise<void>;
+  disconnectNamespaces: (walletType: string, namespaces: Namespace[]) => void;
   /**
    * Disconnect a wallet and clean up balances after that.
    */
   disconnectWallet: (walletType: string) => void;
+  _changeSelectedWalletIfNeededOnRemove: (
+    walletType: string,
+    options?: { namespaces?: Namespace[] }
+  ) => void;
   clearConnectedWallet: () => void;
   fetchBalances: (
     accounts: Wallet[],
@@ -385,39 +390,99 @@ export const createWalletsSlice: StateCreator<
       _aggregatedBalances: nextAggregatedBalanceState,
     });
   },
-  disconnectWallet: (walletType) => {
+  disconnectNamespaces: (walletType, requestedNamesapces) => {
     const isTargetWalletExistsInConnectedWallets = get().connectedWallets.find(
       (wallet) => wallet.walletType === walletType
     );
+
     if (isTargetWalletExistsInConnectedWallets) {
-      eventEmitter.emit(WidgetEvents.WalletEvent, {
-        type: WalletEventTypes.DISCONNECT,
-        payload: { walletType },
+      // This should be called before updating connectedWallets since we need the old state to remove balances.
+      get().removeBalancesForWallet(walletType, {
+        namespaces: requestedNamesapces,
       });
 
+      get()._changeSelectedWalletIfNeededOnRemove(walletType, {
+        namespaces: requestedNamesapces,
+      });
+
+      const nextConnectedWallets = get().connectedWallets.filter(
+        (connectedWallet) => {
+          if (connectedWallet.namespace) {
+            const targetWalletAndNamespace =
+              connectedWallet.walletType === walletType &&
+              requestedNamesapces.includes(connectedWallet.namespace);
+
+            // If the wallet and namespace matched, we should filter it out.
+            return !targetWalletAndNamespace;
+          }
+          /*
+           * if a connected wallet hasn't `namesapce`, it means it legacy.
+           * legacy will not reach this method, but for we check anyways
+           */
+          return true;
+        }
+      );
+
+      set({
+        connectedWallets: nextConnectedWallets,
+      });
+    }
+  },
+  disconnectWallet: (walletType) => {
+    const isTargetWalletExistsInConnectedWallets = get().connectedWallets.find(
+      (wallet) => wallet.walletType === walletType
+    );
+    /*
+     * Previously DISCONNECT event was being emitted if target wallet existed in connected wallets.
+     * Considering that connected wallets get clear on namespace disconnect in hub,
+     * now emitting this event is done without checking for connected wallets to be compatible with hub.
+     */
+    eventEmitter.emit(WidgetEvents.WalletEvent, {
+      type: WalletEventTypes.DISCONNECT,
+      payload: { walletType },
+    });
+    if (isTargetWalletExistsInConnectedWallets) {
       // This should be called before updating connectedWallets since we need the old state to remove balances.
       get().removeBalancesForWallet(walletType);
 
-      let targetWalletWasSelectedForBlockchains = get()
-        .connectedWallets.filter(
-          (connectedWallet) =>
-            connectedWallet.selected &&
-            connectedWallet.walletType === walletType
-        )
-        .map((connectedWallet) => connectedWallet.chain);
+      get()._changeSelectedWalletIfNeededOnRemove(walletType);
 
       // Remove target wallet from connectedWallets
-      let nextConnectedWallets = get().connectedWallets.filter(
+      const nextConnectedWallets = get().connectedWallets.filter(
         (connectedWallet) => connectedWallet.walletType !== walletType
       );
 
-      /*
-       * If we are disconnecting a wallet that has `selected` for some blockchains,
-       * For those blockchains we will fallback to first connected wallet
-       * which means selected wallet will change.
-       */
-      if (targetWalletWasSelectedForBlockchains.length > 0) {
-        nextConnectedWallets = nextConnectedWallets.map((connectedWallet) => {
+      set({
+        connectedWallets: nextConnectedWallets,
+      });
+    }
+  },
+  /*
+   * If we are disconnecting a wallet that has `selected` for some blockchains,
+   * For those blockchains we will fallback to first connected wallet
+   * which means selected wallet will change.
+   */
+  _changeSelectedWalletIfNeededOnRemove: (walletType, options) => {
+    let connectedWallets = get().connectedWallets;
+
+    if (options?.namespaces && options.namespaces.length > 0) {
+      connectedWallets = connectedWallets.filter(
+        (connectedWallet) =>
+          !!connectedWallet.namespace &&
+          options.namespaces?.includes(connectedWallet.namespace)
+      );
+    }
+
+    let targetWalletWasSelectedForBlockchains = connectedWallets
+      .filter(
+        (connectedWallet) =>
+          connectedWallet.selected && connectedWallet.walletType === walletType
+      )
+      .map((connectedWallet) => connectedWallet.chain);
+
+    if (targetWalletWasSelectedForBlockchains.length > 0) {
+      const nextConnectedWallets = get().connectedWallets.map(
+        (connectedWallet) => {
           if (
             targetWalletWasSelectedForBlockchains.includes(
               connectedWallet.chain
@@ -434,8 +499,8 @@ export const createWalletsSlice: StateCreator<
           }
 
           return connectedWallet;
-        });
-      }
+        }
+      );
 
       set({
         connectedWallets: nextConnectedWallets,