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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.39.1-next.16",
+  "version": "0.39.1-next.18",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

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/middlewares/keepLastUpdated.ts

@@ -0,0 +1,19 @@
+import type { StateCreator } from 'zustand';
+
+/**
+ * you can wrap your slice in this middleware, it will update `lastUpdatedAt` for that slice when a zustand's `set` is calling
+ */
+export const keepLastUpdated: <Store, Slice extends { lastUpdatedAt: number }>(
+  config: StateCreator<Store, [], [], Slice>
+) => StateCreator<Store, [], [], Slice> = (slice) => (set, get, api) => {
+  const modifedSet: typeof set = (...params) => {
+    set((state) => {
+      return {
+        ...state,
+        lastUpdatedAt: +new Date(),
+      };
+    });
+    set(...params);
+  };
+  return slice(modifedSet, get, api);
+};