@rango-dev/widget-embedded 0.30.1-next.19 → 0.30.1-next.20

package/package.json

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

package/src/components/TokenList/TokenList.tsx

@@ -17,6 +17,7 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 
+import { useObserveBalanceChanges } from '../../hooks/useObserveBalanceChanges';
 import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
 import { createTintsAndShades } from '../../utils/colors';
@@ -99,6 +100,11 @@ export function TokenList(props: PropTypes) {
   const [hasNextPage, setHasNextPage] = useState<boolean>(true);
   const { getBalanceFor, loading: loadingWallet } = useWalletsStore();
   const { isTokenPinned } = useAppStore();
+  /**
+   * We can create the key by hashing the list of tokens,
+   * but if the list is large, the memory usage and cost of comparisons may be high.
+   */
+  const { balanceKey } = useObserveBalanceChanges(selectedBlockchain);
 
   const loadNextPage = () => {
     setTokens(list.slice(0, tokens.length + PAGE_SIZE));
@@ -110,7 +116,7 @@ export function TokenList(props: PropTypes) {
 
   useEffect(() => {
     setTokens(list.slice(0, PAGE_SIZE));
-  }, [list.length, selectedBlockchain]);
+  }, [list.length, selectedBlockchain, balanceKey]);
 
   const renderList = () => {
     if (!tokens.length && !!searchedFor) {
@@ -244,7 +250,7 @@ export function TokenList(props: PropTypes) {
           );
         }}
         totalCount={tokens.length}
-        key={`${selectedBlockchain}-${searchedFor}`}
+        key={`${selectedBlockchain}-${searchedFor}-${balanceKey}`}
       />
     );
   };

package/src/hooks/useObserveBalanceChanges/index.ts

@@ -0,0 +1 @@
+export { useObserveBalanceChanges } from './useObserveBalanceChanges';

package/src/hooks/useObserveBalanceChanges/useObserveBalanceChanges.ts

@@ -0,0 +1,68 @@
+import type { WalletEventData } from '../../types';
+
+import { useWallets } from '@rango-dev/wallets-react';
+import { useEffect, useRef, useState } from 'react';
+
+import { widgetEventEmitter } from '../../services/eventEmitter';
+import { useWalletsStore } from '../../store/wallets';
+import { WalletEventTypes, WidgetEvents } from '../../types';
+
+// A hook to listen for and detect changes in balances on a specific blockchain.
+export function useObserveBalanceChanges(selectedBlockchain?: string) {
+  const { connectedWallets } = useWalletsStore();
+  const { getWalletInfo } = useWallets();
+  const prevFetchingBalanceWallets = useRef<string[]>([]);
+  // The "balanceKey" will be updated and incremented after each change in the balance for a blockchain.
+  const [balanceKey, setBalanceKey] = useState(0);
+
+  useEffect(() => {
+    const handleWalletEvent = (event: WalletEventData) => {
+      if (event.type === WalletEventTypes.DISCONNECT) {
+        const walletInfo = getWalletInfo(event.payload.walletType);
+        const blockchainSupported = walletInfo.supportedChains.some(
+          (chain) => chain.name === selectedBlockchain
+        );
+
+        if (blockchainSupported) {
+          setBalanceKey((prev) => prev + 1);
+        }
+      }
+    };
+
+    widgetEventEmitter.on(WidgetEvents.WalletEvent, handleWalletEvent);
+
+    if (!selectedBlockchain) {
+      return setBalanceKey((prev) => prev + 1);
+    }
+
+    const supportedWallets = connectedWallets.filter(
+      (wallet) => wallet.chain === selectedBlockchain
+    );
+
+    supportedWallets.forEach((wallet) => {
+      const { walletType } = wallet;
+      const walletIsAlreadyFetching =
+        prevFetchingBalanceWallets.current.includes(walletType);
+
+      /**
+       * Watching for changes in "wallet.balances.length" is not accurate.
+       * Additionally, checking the equality of previous and current balances for a specific blockchain is resource-intensive, so we avoid these methods.
+       */
+      if (wallet.loading && !walletIsAlreadyFetching) {
+        prevFetchingBalanceWallets.current =
+          prevFetchingBalanceWallets.current.concat(walletType);
+      } else if (!wallet.loading && walletIsAlreadyFetching) {
+        prevFetchingBalanceWallets.current =
+          prevFetchingBalanceWallets.current.filter(
+            (prevWallet) => prevWallet !== walletType
+          );
+        setBalanceKey((prev) => prev + 1);
+      }
+    });
+
+    return () =>
+      widgetEventEmitter.off(WidgetEvents.WalletEvent, handleWalletEvent);
+  }, [connectedWallets, selectedBlockchain, getWalletInfo]);
+
+  return { balanceKey };
+}