@rango-dev/widget-embedded 0.36.0 → 0.36.1-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.36.0",
+  "version": "0.36.1-next.0",
   "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.0",
-    "@rango-dev/provider-all": "^0.40.0",
+    "@rango-dev/provider-all": "^0.40.1-next.0",
     "@rango-dev/queue-manager-core": "^0.27.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.40.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.40.1-next.0",
     "@rango-dev/queue-manager-react": "^0.27.0",
     "@rango-dev/signer-solana": "^0.35.0",
-    "@rango-dev/ui": "^0.42.0",
-    "@rango-dev/wallets-core": "^0.40.0",
-    "@rango-dev/wallets-react": "^0.26.0",
-    "@rango-dev/wallets-shared": "^0.40.0",
+    "@rango-dev/ui": "^0.42.1-next.0",
+    "@rango-dev/wallets-core": "^0.40.1-next.0",
+    "@rango-dev/wallets-react": "^0.26.1-next.0",
+    "@rango-dev/wallets-shared": "^0.40.1-next.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/QueueManager.tsx

@@ -15,7 +15,6 @@ import React, { useMemo } from 'react';
 import { eventEmitter } from './services/eventEmitter';
 import { useAppStore } from './store/AppStore';
 import { useUiStore } from './store/ui';
-import { useWalletsStore } from './store/wallets';
 import { getConfig } from './utils/configs';
 import { walletAndSupportedChainsNames } from './utils/wallets';
 
@@ -39,8 +38,8 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     });
   }, [props.apiKey]);
 
-  const blockchains = useAppStore().blockchains();
-  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const { blockchains, connectedWallets } = useAppStore();
+  const blockchainsList = blockchains();
 
   const wallets = {
     blockchains: connectedWallets.map((wallet) => ({
@@ -53,14 +52,21 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     if (!canSwitchNetworkTo(wallet, network)) {
       return undefined;
     }
-    return connect(wallet, network);
+    const result = await connect(wallet, [
+      {
+        namespace: 'DISCOVER_MODE',
+        network,
+      },
+    ]);
+
+    return result;
   };
 
   const isMobileWallet = (walletType: WalletType): boolean =>
     !!getWalletInfo(walletType).mobileWallet;
 
   // TODO: this code copy & pasted from rango, should be refactored.
-  const allBlockchains = blockchains
+  const allBlockchains = blockchainsList
     .filter((blockchain) => blockchain.enabled)
     .reduce(
       (blockchainsObj: any, blockchain) => (
@@ -68,7 +74,7 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
       ),
       {}
     );
-  const evmBasedChains = blockchains.filter(isEvmBlockchain);
+  const evmBasedChains = blockchainsList.filter(isEvmBlockchain);
   const getSupportedChainNames = (type: WalletType) => {
     const { supportedChains } = getWalletInfo(type);
     return walletAndSupportedChainsNames(supportedChains);
@@ -88,7 +94,6 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     providers: allProviders,
     switchNetwork,
     canSwitchNetworkTo,
-    connect,
     state,
     isMobileWallet,
   };

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -1,5 +1,5 @@
 import type { PropTypes } from './ConfirmWalletsModal.types';
-import type { ConnectedWallet } from '../../store/wallets';
+import type { ConnectedWallet } from '../../store/slices/wallets';
 import type { ConfirmSwapWarnings, Wallet } from '../../types';
 
 import { i18n } from '@lingui/core';
@@ -20,7 +20,6 @@ import { getQuoteErrorMessage } from '../../constants/errors';
 import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
-import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainShortNameFor } from '../../utils/meta';
 import { isConfirmSwapDisabled } from '../../utils/swap';
 import { getQuoteWallets } from '../../utils/wallets';
@@ -54,8 +53,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
     customDestination,
     setCustomDestination,
   } = useQuoteStore();
-  const { connectedWallets, selectWallets } = useWalletsStore();
-  const { config } = useAppStore();
+  const { config, connectedWallets, setWalletsAsSelected } = useAppStore();
 
   const [showMoreWalletFor, setShowMoreWalletFor] = useState('');
   const [balanceWarnings, setBalanceWarnings] = useState<string[]>([]);
@@ -217,7 +215,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
     const lastSelectedWallets = selectableWallets.filter(
       (wallet) => wallet.selected
     );
-    selectWallets(lastSelectedWallets);
+    setWalletsAsSelected(lastSelectedWallets);
     selectQuoteWallets(lastSelectedWallets);
     setQuoteWalletConfirmed(true);
     onClose();

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -1,5 +1,6 @@
 import type { PropTypes } from './WalletList.type';
-import type { Wallet, WalletInfoWithExtra } from '../../types';
+import type { Wallet } from '../../types';
+import type { ExtendedModalWalletInfo } from '../../utils/wallets';
 
 import { i18n } from '@lingui/core';
 import { warn } from '@rango-dev/logging-core';
@@ -20,7 +21,6 @@ import {
 import { useWalletList } from '../../hooks/useWalletList';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
-import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
 import {
   getAddress,
@@ -41,10 +41,9 @@ export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore } = props;
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  const connectedWallets = useWalletsStore.use.connectedWallets();
-  const { blockchains } = useAppStore();
+  const { blockchains, connectedWallets } = useAppStore();
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
-    useState<WalletInfoWithExtra>();
+    useState<ExtendedModalWalletInfo>();
   const [experimentalChainWallet, setExperimentalChainWallet] =
     useState<Wallet | null>(null);
   const [showExperimentalChainModal, setShowExperimentalChainModal] =
@@ -57,7 +56,7 @@ export function WalletList(props: PropTypes) {
     chain,
   });
 
-  const [sortedList, setSortedList] = useState<WalletInfoWithExtra[]>(list);
+  const [sortedList, setSortedList] = useState<ExtendedModalWalletInfo[]>(list);
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
 
@@ -148,9 +147,13 @@ export function WalletList(props: PropTypes) {
 
         const onSelectableWalletClick = async () => {
           const isDisconnected = wallet.state === WalletState.DISCONNECTED;
+          const isConnectedButDifferentThanTargetNamespace = wallet.isHub
+            ? !conciseAddress
+            : !!wallet.namespaces && !conciseAddress;
+
           if (isDisconnected) {
             setSelectedWalletToConnect(wallet);
-          } else if (!!wallet.namespaces && !conciseAddress) {
+          } else if (isConnectedButDifferentThanTargetNamespace) {
             // wallet is connected on a different namespace
             await handleDisconnect(wallet.type);
 

package/src/components/Layout/Layout.tsx

@@ -13,7 +13,6 @@ import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
 import { tabManager, useUiStore } from '../../store/ui';
-import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
 import { getPendingSwaps } from '../../utils/queue';
 import { isFeatureHidden } from '../../utils/settings';
@@ -28,9 +27,8 @@ import { Container, Content, Footer, LayoutContainer } from './Layout.styles';
 function Layout(props: PropsWithChildren<PropTypes>) {
   const { connectHeightObserver, disconnectHeightObserver } = useIframe();
   const { children, header, footer, height = 'fixed' } = props;
-  const { fetchStatus } = useAppStore();
+  const { fetchStatus, connectedWallets } = useAppStore();
   const [openRefreshModal, setOpenRefreshModal] = useState(false);
-  const connectedWallets = useWalletsStore.use.connectedWallets();
   const {
     config: { features, theme },
   } = useAppStore();

package/src/components/SwapDetails/SwapDetails.tsx

@@ -160,7 +160,12 @@ export function SwapDetails(props: SwapDetailsProps) {
       canSwitchNetworkTo(currentStepWallet.walletType, currentStepBlockchain));
 
   const switchNetwork = showSwitchNetwork
-    ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain)
+    ? connect.bind(null, currentStepWallet.walletType, [
+        {
+          namespace: 'DISCOVER_MODE',
+          network: currentStepBlockchain,
+        },
+      ])
     : undefined;
 
   const stepMessage = getSwapMessages(swap, currentStep);

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.types.ts

@@ -15,7 +15,7 @@ export interface SwapAlertsProps extends WaningAlertsProps {
 }
 
 export interface WaningAlertsProps extends FailedAlertsProps {
-  switchNetwork: (() => Promise<ConnectResult>) | undefined;
+  switchNetwork: (() => Promise<ConnectResult[]>) | undefined;
   showNetworkModal: PendingSwapNetworkStatus | null | undefined;
   setNetworkModal: (network: ModalState) => void;
 }

package/src/components/TokenList/TokenList.tsx

@@ -15,11 +15,9 @@ import {
   Typography,
   VirtualizedList,
 } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-import { useObserveBalanceChanges } from '../../hooks/useObserveBalanceChanges';
 import { useAppStore } from '../../store/AppStore';
-import { useWalletsStore } from '../../store/wallets';
 import { createTintsAndShades } from '../../utils/colors';
 import { formatBalance } from '../../utils/wallets';
 
@@ -93,7 +91,7 @@ const renderDesc = (props: RenderDescProps) => {
 
 export function TokenList(props: PropTypes) {
   const {
-    list,
+    list: tokens,
     searchedFor = '',
     onChange,
     selectedBlockchain,
@@ -101,29 +99,10 @@ export function TokenList(props: PropTypes) {
     action,
   } = props;
 
-  const [tokens, setTokens] = useState<Token[]>(list);
   const fetchStatus = useAppStore().fetchStatus;
   const blockchains = useAppStore().blockchains();
-  const [hasNextPage, setHasNextPage] = useState<boolean>(true);
-  const { getBalanceFor, loading: loadingWallet } = useWalletsStore();
+  const { getBalanceFor, fetchingWallets: loadingWallet } = useAppStore();
   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));
-  };
-
-  useEffect(() => {
-    setHasNextPage(list.length > tokens.length);
-  }, [tokens.length]);
-
-  useEffect(() => {
-    setTokens(list.slice(0, PAGE_SIZE));
-  }, [list.length, selectedBlockchain, balanceKey]);
 
   const endRenderer = (token: Token) => {
     const tokenBalance = formatBalance(getBalanceFor(token));
@@ -160,11 +139,9 @@ export function TokenList(props: PropTypes) {
       )
     );
   };
-
   const renderList = () => {
     return (
       <VirtualizedList
-        endReached={hasNextPage ? loadNextPage : undefined}
         itemContent={(index) => {
           const token = tokens[index];
           const address = token.address || '';
@@ -258,7 +235,7 @@ export function TokenList(props: PropTypes) {
           );
         }}
         totalCount={tokens.length}
-        key={`${selectedBlockchain}-${searchedFor}-${balanceKey}`}
+        key={`${selectedBlockchain}-${searchedFor}`}
       />
     );
   };

package/src/containers/Inputs/Inputs.tsx

@@ -2,10 +2,12 @@ import type { PropTypes } from './Inputs.types';
 
 import { i18n } from '@lingui/core';
 import { SwapInput } from '@rango-dev/ui';
+import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import { SwitchFromAndToButton } from '../../components/SwitchFromAndTo';
 import { errorMessages } from '../../constants/errors';
+import { ZERO } from '../../constants/numbers';
 import {
   PERCENTAGE_CHANGE_MAX_DECIMALS,
   PERCENTAGE_CHANGE_MIN_DECIMALS,
@@ -14,8 +16,8 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
+import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
-import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
 import { numberToString } from '../../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
@@ -38,15 +40,16 @@ export function Inputs(props: PropTypes) {
     outputUsdValue,
     selectedQuote,
   } = useQuoteStore();
-  const { connectedWallets, getBalanceFor } = useWalletsStore();
+  const { connectedWallets, getBalanceFor } = useAppStore();
   const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
   const fromTokenFormattedBalance =
     formatBalance(fromTokenBalance)?.amount ?? '0';
 
-  const tokenBalanceReal =
-    !!fromBlockchain && !!fromToken
-      ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
-      : '0';
+  const fromBalanceAmount = fromTokenBalance
+    ? new BigNumber(fromTokenBalance.amount).shiftedBy(
+        -fromTokenBalance.decimals
+      )
+    : ZERO;
 
   const fetchingBalance =
     !!fromBlockchain &&
@@ -107,7 +110,17 @@ export function Inputs(props: PropTypes) {
           loadingBalance={fetchingBalance}
           tooltipContainer={getContainer()}
           onSelectMaxBalance={() => {
-            setInputAmount(tokenBalanceReal.split(',').join(''));
+            const tokenBalanceReal = numberToString(
+              fromBalanceAmount,
+              fromTokenBalance?.decimals
+            );
+
+            // if a token hasn't any value, we will reset the input by setting an empty string.
+            const nextInputAmount = !!fromTokenBalance?.amount
+              ? tokenBalanceReal
+              : '';
+
+            setInputAmount(nextInputAmount);
           }}
           anyWalletConnected={connectedWallets.length > 0}
         />

package/src/containers/Wallets/Wallets.tsx

@@ -15,7 +15,7 @@ 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 { useWalletsStore } from '../../store/wallets';
+import { isFeatureEnabled } from '../../utils/settings';
 import {
   prepareAccountsForWalletStore,
   walletAndSupportedChainsNames,
@@ -38,7 +38,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
     fetchStatus,
   } = useAppStore();
   const blockchains = useAppStore().blockchains();
-  const { findToken } = useAppStore();
+  const { newWalletConnected, disconnectWallet } = useAppStore();
   const config = useAppStore().config;
 
   const walletOptions: ProvidersOptions = {
@@ -48,9 +48,9 @@ function Main(props: PropsWithChildren<PropTypes>) {
     walletConnectListedDesktopWalletLink:
       props.config.__UNSTABLE_OR_INTERNAL__
         ?.walletConnectListedDesktopWalletLink,
+    experimentalWallet: props.config.features?.experimentalWallet,
   };
   const { providers } = useWalletProviders(config.wallets, walletOptions);
-  const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnWalletConnectionChange>();
   const onDisconnectWalletHandler = useRef<OnWalletConnectionChange>();
 
@@ -86,7 +86,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
           meta.isContractWallet
         );
         if (data.length) {
-          connectWallet(data, findToken);
+          void newWalletConnected(data);
         }
       } else {
         disconnectWallet(type);
@@ -99,17 +99,17 @@ function Main(props: PropsWithChildren<PropTypes>) {
         }
       }
     }
-    if (event === Events.ACCOUNTS && state.connected) {
+    if (
+      (event === Events.ACCOUNTS && state.connected) ||
+      // Hub works differently, and this check should be enough.
+      (event === Events.ACCOUNTS && meta.isHub)
+    ) {
       const key = `${type}-${state.network}-${value}`;
 
-      if (state.connected) {
-        if (!!onConnectWalletHandler.current) {
-          onConnectWalletHandler.current(key);
-        } else {
-          console.warn(
-            `onConnectWallet handler hasn't been set. Are you sure?`
-          );
-        }
+      if (!!onConnectWalletHandler.current) {
+        onConnectWalletHandler.current(key);
+      } else {
+        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
       }
     }
 
@@ -147,7 +147,13 @@ function Main(props: PropsWithChildren<PropTypes>) {
         allBlockChains={blockchains}
         providers={providers}
         onUpdateState={onUpdateState}
-        autoConnect={!!isActiveTab}>
+        autoConnect={!!isActiveTab}
+        configs={{
+          isExperimentalEnabled: isFeatureEnabled(
+            'experimentalWallet',
+            config.features
+          ),
+        }}>
         {props.children}
       </Provider>
     </WidgetContext.Provider>

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -9,7 +9,6 @@ import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
 import { tabManager, useUiStore } from '../../store/ui';
-import { useWalletsStore } from '../../store/wallets';
 import { calculateWalletUsdValue } from '../../utils/wallets';
 
 import { WidgetHistory } from './WidgetInfo.helpers';
@@ -22,13 +21,16 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const { manager } = useManager();
   const isActiveTab = useUiStore.use.isActiveTab();
   const retrySwap = useQuoteStore.use.retry();
-  const { findToken } = useAppStore();
+  const {
+    findToken,
+    connectedWallets,
+    getBalances,
+    fetchBalances: refetch,
+  } = useAppStore();
 
   const history = new WidgetHistory(manager, { retrySwap, findToken });
-  const details = useWalletsStore.use.connectedWallets();
-  const isLoading = useWalletsStore.use.loading();
-  const totalBalance = calculateWalletUsdValue(details);
-  const refetch = useWalletsStore.use.getWalletsDetails();
+  const { fetchingWallets: isLoading } = useAppStore();
+  const totalBalance = calculateWalletUsdValue(getBalances());
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const swappers = useAppStore().swappers();
@@ -47,9 +49,9 @@ export function WidgetInfo(props: React.PropsWithChildren) {
     history,
     wallets: {
       isLoading,
-      details,
+      details: connectedWallets,
       totalBalance,
-      refetch: (accounts) => refetch(accounts, findToken),
+      refetch: async (accounts) => refetch(accounts),
     },
     meta: {
       blockchains,

package/src/containers/WidgetInfo/WidgetInfo.types.ts

@@ -1,6 +1,6 @@
 import type { WidgetHistory } from './WidgetInfo.helpers';
 import type { FetchStatus, FindToken } from '../../store/slices/data';
-import type { ConnectedWallet } from '../../store/wallets';
+import type { ConnectedWallet } from '../../store/slices/wallets';
 import type { QuoteInputs, UpdateQuoteInputs, Wallet } from '../../types';
 import type { Notification } from '../../types/notification';
 import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
@@ -13,7 +13,7 @@ export interface WidgetInfoContextInterface {
     details: ConnectedWallet[];
     totalBalance: string;
     isLoading: boolean;
-    refetch: (accounts: Wallet[], tokens: Token[]) => void;
+    refetch: (accounts: Wallet[]) => void;
   };
   meta: {
     blockchains: BlockchainMeta[];

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -1,5 +1,6 @@
 import type { HandleConnectOptions, Result } from './useStatefulConnect.types';
 import type { WalletInfoWithExtra } from '../../types';
+import type { ExtendedModalWalletInfo } from '../../utils/wallets';
 import type {
   Namespace,
   NamespaceData,
@@ -10,6 +11,8 @@ import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import { useReducer } from 'react';
 
+import { convertCommonNamespacesKeysToLegacyNamespace } from '../../utils/hub';
+
 import {
   isStateOnDerivationPathStep,
   isStateOnNamespace,
@@ -61,7 +64,11 @@ export function useStatefulConnect(): UseStatefulConnect {
     });
 
     try {
-      await connect(type, undefined, namespaces);
+      const legacyNamespacesInput = namespaces?.map((namespaceInput) => ({
+        ...namespaceInput,
+        network: undefined,
+      }));
+      await connect(type, legacyNamespacesInput);
 
       return { status: ResultStatus.Connected };
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -75,7 +82,7 @@ export function useStatefulConnect(): UseStatefulConnect {
   };
 
   const handleConnect = async (
-    wallet: WalletInfoWithExtra,
+    wallet: ExtendedModalWalletInfo,
     options?: HandleConnectOptions
   ): Promise<{
     status: ResultStatus;
@@ -83,6 +90,37 @@ export function useStatefulConnect(): UseStatefulConnect {
     const isDisconnected = wallet.state === WalletState.DISCONNECTED;
 
     if (isDisconnected) {
+      // Legacy and hub have different structure to check wether we need to show namespace or not.
+
+      // Hub
+      const isHub = !!wallet.isHub;
+      if (isHub) {
+        const detachedInstances = wallet.properties?.find(
+          (item) => item.name === 'detached'
+        );
+        const needsNamespace =
+          detachedInstances && wallet.state !== 'connected';
+
+        if (needsNamespace) {
+          const availableNamespaces =
+            convertCommonNamespacesKeysToLegacyNamespace(
+              detachedInstances.value
+            );
+
+          dispatch({
+            type: 'needsNamespace',
+            payload: {
+              providerType: wallet.type,
+              providerImage: wallet.image,
+              availableNamespaces,
+              singleNamespace: false,
+            },
+          });
+          return { status: ResultStatus.Namespace };
+        }
+      }
+
+      // Legacy
       if (!wallet.namespaces) {
         return await runConnect(wallet.type, undefined, options);
       }

package/src/hooks/useSubscribeToWidgetEvents/useSubscribeToWidgetEvents.ts

@@ -12,13 +12,10 @@ import { useEffect } from 'react';
 import { eventEmitter } from '../../services/eventEmitter';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
-import { useWalletsStore } from '../../store/wallets';
 
 export function useSubscribeToWidgetEvents() {
-  const connectedWallets = useWalletsStore.use.connectedWallets();
-  const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
-  const { findToken } = useAppStore();
+  const { connectedWallets, fetchBalances } = useAppStore();
 
   useEffect(() => {
     const handleStepEvent = (widgetEvent: StepEventData) => {
@@ -39,8 +36,12 @@ export function useSubscribeToWidgetEvents() {
             (wallet) => wallet.chain === step?.toBlockchain
           );
 
-        fromAccount && getWalletsDetails([fromAccount], findToken);
-        toAccount && getWalletsDetails([toAccount], findToken);
+        if (fromAccount) {
+          void fetchBalances([fromAccount]);
+        }
+        if (toAccount) {
+          void fetchBalances([toAccount]);
+        }
       }
 
       setNotification(event, route);

package/src/hooks/useSwapInput.ts

@@ -4,7 +4,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
-import { useWalletsStore } from '../store/wallets';
 import { QuoteErrorType } from '../types';
 import { debounce } from '../utils/common';
 import { isPositiveNumber } from '../utils/numbers';
@@ -50,7 +49,7 @@ export function useSwapInput({
   const { fetch: fetchQuote, cancelFetch } = useFetchAllQuotes();
   const { excludeLiquiditySources: configExcludeLiquiditySources, routing } =
     useAppStore().config;
-  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const { connectedWallets } = useAppStore();
 
   const {
     fromToken,

package/src/hooks/useWalletList.ts

@@ -12,7 +12,6 @@ import {
 import { useCallback, useEffect } from 'react';
 
 import { useAppStore } from '../store/AppStore';
-import { useWalletsStore } from '../store/wallets';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
   hashWalletsState,
@@ -43,9 +42,8 @@ interface API {
  */
 export function useWalletList(params?: Params): API {
   const { chain } = params || {};
-  const { config } = useAppStore();
+  const { config, connectedWallets } = useAppStore();
   const { state, getWalletInfo } = useWallets();
-  const { connectedWallets } = useWalletsStore();
   const blockchains = useAppStore().blockchains();
   const { handleDisconnect } = useStatefulConnect();
 

package/src/hooks/useWalletProviders/useWalletProviders.ts

@@ -1,10 +1,9 @@
 import type { WidgetConfig } from '../../types';
 import type { ProvidersOptions } from '../../utils/providers';
-import type { ProviderInterface } from '@rango-dev/wallets-react';
 
 import { useEffect } from 'react';
 
-import { useWalletsStore } from '../../store/wallets';
+import { useAppStore } from '../../store/AppStore';
 import { matchAndGenerateProviders } from '../../utils/providers';
 
 import { hashProviders } from './useWalletProviders.helpers';
@@ -13,11 +12,8 @@ export function useWalletProviders(
   providers: WidgetConfig['wallets'],
   options?: ProvidersOptions
 ) {
-  const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
-  let generateProviders: ProviderInterface[] = matchAndGenerateProviders(
-    providers,
-    options
-  );
+  const { clearConnectedWallet } = useAppStore();
+  let generateProviders = matchAndGenerateProviders(providers, options);
 
   useEffect(() => {
     clearConnectedWallet();