@rango-dev/widget-embedded 0.41.1-next.2 → 0.41.1-next.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.41.1-next.2",
+  "version": "0.41.1-next.3",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/store/middlewares/keepLastUpdated.ts

@@ -7,13 +7,20 @@ export const keepLastUpdated: <Store, Slice extends { lastUpdatedAt: number }>(
   config: StateCreator<Store, [], [], Slice>
 ) => StateCreator<Store, [], [], Slice> = (slice) => (set, get, api) => {
   const modifedSet: typeof set = (...params) => {
+    const [partial, ...restParams] = params;
     set((state) => {
+      // @see https://github.com/pmndrs/zustand/blob/90f8d592d4cde9aa15f236e320f17ccbc86cf0fb/src/vanilla.ts#L69-L72
+      type State = ReturnType<typeof get>;
+      const nextState =
+        typeof partial === 'function'
+          ? (partial as (s: State) => State)(state)
+          : partial;
+
       return {
-        ...state,
+        ...nextState,
         lastUpdatedAt: +new Date(),
       };
-    });
-    set(...params);
+    }, ...restParams);
   };
   return slice(modifedSet, get, api);
 };

package/src/store/slices/wallets.ts

@@ -18,13 +18,12 @@ import { memoizedResult } from '../../utils/common';
 import { isAccountAndWalletMatched } from '../../utils/wallets';
 import { keepLastUpdated } from '../middlewares/keepLastUpdated';
 import {
+  computeNextBalancesWithNewPrices,
+  computeNextStateAfterWalletBalanceRemoval,
   createAssetKey,
-  createBalanceKey,
   createBalanceStateForNewAccount,
   extractAssetFromBalanceKey,
-  removeBalanceFromAggregatedBalance,
   updateAggregatedBalanceStateForNewAccount,
-  updateBalancesWithNewPrices,
 } from '../utils/wallets';
 
 type WalletAddress = string;
@@ -353,16 +352,24 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
                   return;
                 }
 
-                const WalletDetail = {
+                const walletDetail = {
                   blockChain: balance.asset.blockchain,
                   balances: [balance],
                   address: walletAddress,
                 };
 
-                updateBalancesWithNewPrices(WalletDetail, nextBalances, get);
+                const partialCurrentState = {
+                  _aggregatedBalances: get()._aggregatedBalances,
+                  findToken: get().findToken,
+                };
+                computeNextBalancesWithNewPrices(
+                  partialCurrentState,
+                  walletDetail,
+                  nextBalances
+                );
 
                 const balancesForWallet = createBalanceStateForNewAccount(
-                  WalletDetail,
+                  walletDetail,
                   get
                 );
 
@@ -435,73 +442,21 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
       });
     },
     removeBalancesForWallet: (walletType, options) => {
-      let walletsNeedsToBeRemoved = get().connectedWallets.filter(
-        (connectedWallet) => connectedWallet.walletType === walletType
-      );
-      /*
-       * We only need to delete balances where there is no connected wallets with same chain and address for that balance.
-       * Consider both Metamask and Solana having support for `0xblahblahblahblah` for Ethereum.
-       * If Phantom is disconnecting, we should keep the balance since Metamask has access to same address yet.
-       * So we only delete balance when there is no connected wallet that has access to that specific chain and address.
-       */
-      get().connectedWallets.forEach((connectedWallet) => {
-        if (connectedWallet.walletType !== walletType) {
-          walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
-            const isAnotherWalletHasSameAddressAndChain =
-              wallet.chain === connectedWallet.chain &&
-              wallet.address === connectedWallet.address;
-            return !isAnotherWalletHasSameAddressAndChain;
-          });
-        }
-      });
-
-      if (!!options?.chains && options.chains.length > 0) {
-        walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
-          return options.chains?.includes(wallet.chain);
-        });
-      }
-
-      if (!!options?.namespaces && options.namespaces.length > 0) {
-        walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
-          if (wallet.namespace) {
-            return options.namespaces?.includes(wallet.namespace);
-          }
-          return false;
-        });
-      }
-
-      const nextBalancesState: BalanceState = {};
-      let nextAggregatedBalanceState: AggregatedBalanceState =
-        get()._aggregatedBalances;
-      const currentBalancesState = get()._balances;
-      const balanceKeys = Object.keys(currentBalancesState) as BalanceKey[];
-
-      balanceKeys.forEach((key) => {
-        const asset = extractAssetFromBalanceKey(key);
-
-        const shouldBalanceBeRemoved = !!walletsNeedsToBeRemoved.find(
-          (wallet) =>
-            createBalanceKey(wallet.address, {
-              address: asset.address,
-              blockchain: wallet.chain,
-              symbol: asset.symbol,
-            }) === key
+      const partialCurrentState = {
+        _balances: get()._balances,
+        _aggregatedBalances: get()._aggregatedBalances,
+        connectedWallets: get().connectedWallets,
+      };
+      const { _balances, _aggregatedBalances } =
+        computeNextStateAfterWalletBalanceRemoval(
+          partialCurrentState,
+          walletType,
+          options
         );
 
-        // if a balance should be removed, we need to remove its caches in _aggregatedBalances as wel.
-        if (shouldBalanceBeRemoved) {
-          nextAggregatedBalanceState = removeBalanceFromAggregatedBalance(
-            nextAggregatedBalanceState,
-            key
-          );
-        } else {
-          nextBalancesState[key] = currentBalancesState[key];
-        }
-      });
-
       set({
-        _balances: nextBalancesState,
-        _aggregatedBalances: nextAggregatedBalanceState,
+        _balances,
+        _aggregatedBalances,
       });
     },
     disconnectNamespaces: (walletType, requestedNamesapces) => {
@@ -644,7 +599,6 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
         console.error(`Request for fetching balances failed. cause: ${e}`);
         return;
       }
-
       const walletsDetails = response.wallets;
 
       if (walletsDetails) {
@@ -672,12 +626,30 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
             return;
           }
 
-          updateBalancesWithNewPrices(wallet, nextBalances, get);
+          const partialCurrentState = {
+            _balances: nextBalances,
+            _aggregatedBalances: nextAggregatedBalances,
+            connectedWallets: get().connectedWallets,
+            findToken: get().findToken,
+          };
+
+          computeNextBalancesWithNewPrices(
+            partialCurrentState,
+            wallet,
+            nextBalances
+          );
 
           // Remove old balances for current wallet and blockchain
-          get().removeBalancesForWallet(walletType, {
-            chains: [wallet.blockChain],
-          });
+          const { _balances, _aggregatedBalances } =
+            computeNextStateAfterWalletBalanceRemoval(
+              partialCurrentState,
+              walletType,
+              {
+                chains: [wallet.blockChain],
+              }
+            );
+          nextAggregatedBalances = _aggregatedBalances;
+          nextBalances = _balances;
 
           /*
            * Check if after fetching balance for an account, the account still exists.

package/src/store/utils/wallets.ts

@@ -1,17 +1,20 @@
 import type { Balance } from '../../types';
 import type { AppStoreState } from '../app';
+import type { FindToken } from '../slices/data';
+import type {
+  AggregatedBalanceState,
+  AssetKey,
+  BalanceKey,
+  BalanceState,
+  ConnectedWallet,
+} from '../slices/wallets';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 import type { Asset, WalletDetail } from 'rango-types';
 
 import BigNumber from 'bignumber.js';
 
 import { ZERO } from '../../constants/numbers';
 import { BALANCE_SEPARATOR } from '../../constants/wallets';
-import {
-  type AggregatedBalanceState,
-  type AssetKey,
-  type BalanceKey,
-  type BalanceState,
-} from '../slices/wallets';
 
 /**
  * Note: We need to use `symbol` as well since native coins and cosmos blockchains don't have `address`
@@ -44,16 +47,19 @@ export function extractAssetFromBalanceKey(key: BalanceKey): Asset {
   };
 }
 
-export function updateBalancesWithNewPrices(
+export function computeNextBalancesWithNewPrices(
+  paritalCurrentState: {
+    findToken: FindToken;
+    _aggregatedBalances: AggregatedBalanceState;
+  },
   wallet: Omit<WalletDetail, 'failed' | 'explorerUrl'>,
-  balanceState: BalanceState,
-  store: () => AppStoreState
+  balanceState: BalanceState
 ): BalanceState {
   wallet.balances?.forEach((balance) => {
     const usdPrice =
-      balance.price ?? store().findToken(balance.asset)?.usdPrice;
+      balance.price ?? paritalCurrentState.findToken(balance.asset)?.usdPrice;
     const balancesToUpdate =
-      store()._aggregatedBalances[createAssetKey(balance.asset)];
+      paritalCurrentState._aggregatedBalances[createAssetKey(balance.asset)];
 
     balancesToUpdate?.forEach((balanceKey) => {
       if (balanceState[balanceKey]) {
@@ -139,3 +145,89 @@ export function removeBalanceFromAggregatedBalance(
 
   return aggregatedBalances;
 }
+
+/**
+ * We made a util to remvoe balances to be able batch with other state updates.
+ */
+export function computeNextStateAfterWalletBalanceRemoval(
+  paritalCurrentState: {
+    _balances: BalanceState;
+    _aggregatedBalances: AggregatedBalanceState;
+    connectedWallets: ConnectedWallet[];
+  },
+  walletType: string,
+  options?: {
+    chains?: string[];
+    namespaces?: Namespace[];
+  }
+) {
+  let walletsNeedsToBeRemoved = paritalCurrentState.connectedWallets.filter(
+    (connectedWallet) => connectedWallet.walletType === walletType
+  );
+
+  /*
+   * We only need to delete balances where there is no connected wallets with same chain and address for that balance.
+   * Consider both Metamask and Solana having support for `0xblahblahblahblah` for Ethereum.
+   * If Phantom is disconnecting, we should keep the balance since Metamask has access to same address yet.
+   * So we only delete balance when there is no connected wallet that has access to that specific chain and address.
+   */
+  paritalCurrentState.connectedWallets.forEach((connectedWallet) => {
+    if (connectedWallet.walletType !== walletType) {
+      walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
+        const isAnotherWalletHasSameAddressAndChain =
+          wallet.chain === connectedWallet.chain &&
+          wallet.address === connectedWallet.address;
+        return !isAnotherWalletHasSameAddressAndChain;
+      });
+    }
+  });
+
+  if (!!options?.chains && options.chains.length > 0) {
+    walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
+      return options.chains?.includes(wallet.chain);
+    });
+  }
+
+  if (!!options?.namespaces && options.namespaces.length > 0) {
+    walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
+      if (wallet.namespace) {
+        return options.namespaces?.includes(wallet.namespace);
+      }
+      return false;
+    });
+  }
+
+  const nextBalancesState: BalanceState = {};
+  let nextAggregatedBalanceState: AggregatedBalanceState =
+    paritalCurrentState._aggregatedBalances;
+  const currentBalancesState = paritalCurrentState._balances;
+  const balanceKeys = Object.keys(currentBalancesState) as BalanceKey[];
+
+  balanceKeys.forEach((key) => {
+    const asset = extractAssetFromBalanceKey(key);
+
+    const shouldBalanceBeRemoved = !!walletsNeedsToBeRemoved.find(
+      (wallet) =>
+        createBalanceKey(wallet.address, {
+          address: asset.address,
+          blockchain: wallet.chain,
+          symbol: asset.symbol,
+        }) === key
+    );
+
+    // if a balance should be removed, we need to remove its caches in _aggregatedBalances as wel.
+    if (shouldBalanceBeRemoved) {
+      nextAggregatedBalanceState = removeBalanceFromAggregatedBalance(
+        nextAggregatedBalanceState,
+        key
+      );
+    } else {
+      nextBalancesState[key] = currentBalancesState[key];
+    }
+  });
+
+  return {
+    _balances: nextBalancesState,
+    _aggregatedBalances: nextAggregatedBalanceState,
+  };
+}