@rango-dev/widget-embedded 0.37.1-next.1 → 0.38.0

package/src/hooks/useConfirmSwap/useConfirmSwap.helpers.ts

@@ -7,18 +7,27 @@ import type {
   SelectedQuote,
   Wallet,
 } from '../../types';
-import type BigNumber from 'bignumber.js';
-import type { BlockchainMeta, SwapResult } from 'rango-sdk';
+import type { BlockchainMeta, SwapResult, Token } from 'rango-sdk';
 
 import { errorMessages } from '../../constants/errors';
-import { QuoteErrorType } from '../../types';
-import { generateQuoteWarnings } from '../../utils/quote';
+import { QuoteErrorType, QuoteUpdateType } from '../../types';
+import { numberToString } from '../../utils/numbers';
+import {
+  generateQuoteWarnings,
+  getPriceImpact,
+  isNumberOfSwapsChanged,
+  isQuoteChanged,
+  isQuoteInternalCoinsUpdated,
+  isQuoteSwappersUpdated,
+} from '../../utils/quote';
 import {
   checkSlippageErrors,
   generateBalanceWarnings,
   getLimitErrorMessage,
   getMinRequiredSlippage,
+  getQuoteOutputAmount,
   hasLimitError,
+  isOutputAmountChangedALot,
 } from '../../utils/swap';
 
 /**
@@ -73,44 +82,72 @@ export function getQuoteError(swaps: SwapResult[]): QuoteErrorResponse | null {
   return null;
 }
 
-export function generateWarnings(params: {
-  currentQuote: SelectedQuote;
-  previousQuote?: SelectedQuote;
-  meta: { blockchains: BlockchainMeta[] };
-  selectedWallets: Wallet[];
-  userSlippage: number;
-  inputUsdValue: BigNumber | null;
-  findToken: FindToken;
-}): ConfirmSwapWarnings {
-  const {
-    currentQuote,
-    previousQuote,
-    meta,
-    selectedWallets,
-    userSlippage,
-    findToken,
-  } = params;
-
+export function generateWarnings(
+  previousQuote: SelectedQuote | undefined,
+  currentQuote: SelectedQuote,
+  params: {
+    fromToken: Token;
+    toToken: Token;
+    meta: { blockchains: BlockchainMeta[] };
+    selectedWallets: Wallet[];
+    userSlippage: number;
+    findToken: FindToken;
+  }
+): ConfirmSwapWarnings {
+  let quoteChanged = false;
+  if (previousQuote) {
+    quoteChanged = isQuoteChanged(previousQuote, currentQuote);
+  }
   const output: ConfirmSwapWarnings = {
     quote: null,
+    quoteUpdate: null,
     balance: null,
   };
 
-  const quoteWarning = generateQuoteWarnings({
-    previousQuote,
-    currentQuote,
-    findToken,
-    userSlippage,
+  const quoteWarning = generateQuoteWarnings(currentQuote, {
+    fromToken: params.fromToken,
+    toToken: params.toToken,
+    findToken: params.findToken,
+    userSlippage: params.userSlippage,
   });
 
   if (quoteWarning) {
     output.quote = quoteWarning;
   }
 
+  if (previousQuote && quoteChanged) {
+    if (isOutputAmountChangedALot(previousQuote, currentQuote)) {
+      output.quoteUpdate = {
+        type: QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED,
+        newOutputAmount: numberToString(getQuoteOutputAmount(currentQuote)),
+        percentageChange: numberToString(
+          getPriceImpact(
+            getQuoteOutputAmount(previousQuote) ?? '',
+            getQuoteOutputAmount(currentQuote) ?? ''
+          ),
+          null,
+          2
+        ),
+      };
+    } else if (isNumberOfSwapsChanged(previousQuote, currentQuote)) {
+      output.quoteUpdate = {
+        type: QuoteUpdateType.QUOTE_UPDATED,
+      };
+    } else if (isQuoteSwappersUpdated(previousQuote, currentQuote)) {
+      output.quoteUpdate = {
+        type: QuoteUpdateType.QUOTE_SWAPPERS_UPDATED,
+      };
+    } else if (isQuoteInternalCoinsUpdated(previousQuote, currentQuote)) {
+      output.quoteUpdate = {
+        type: QuoteUpdateType.QUOTE_COINS_UPDATED,
+      };
+    }
+  }
+
   const balanceWarnings = generateBalanceWarnings(
     currentQuote,
-    selectedWallets,
-    meta.blockchains
+    params.selectedWallets,
+    params.meta.blockchains
   );
 
   const enoughBalance = balanceWarnings.length === 0;

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -21,10 +21,10 @@ export function useConfirmSwap(): ConfirmSwap {
     fromToken,
     toToken,
     inputAmount,
-    inputUsdValue,
     setSelectedQuote,
     selectedQuote: initialQuote,
     customDestination: customDestinationFromStore,
+    setQuoteWarningsConfirmed,
     resetAlerts,
   } = useQuoteStore();
 
@@ -95,16 +95,21 @@ export function useConfirmSwap(): ConfirmSwap {
           disabledSwappersGroups: disabledLiquiditySources,
         };
 
-        const confirmSwapWarnings = generateWarnings({
-          previousQuote: initialQuote ?? undefined,
+        const confirmSwapWarnings = generateWarnings(
+          initialQuote ?? undefined,
           currentQuote,
-          meta: { blockchains },
-          selectedWallets,
-          userSlippage,
-          inputUsdValue,
-          findToken,
-        });
-
+          {
+            fromToken,
+            toToken,
+            meta: { blockchains },
+            findToken,
+            selectedWallets,
+            userSlippage,
+          }
+        );
+        if (confirmSwapWarnings.quoteUpdate) {
+          setQuoteWarningsConfirmed(false);
+        }
         resetAlerts();
 
         const proceedAnyway = !!confirmSwapWarnings.balance;

package/src/hooks/useFetchApiConfig.ts

@@ -6,9 +6,6 @@ export type Watermark = 'NONE' | 'FULL';
 type ConfigResponse = {
   config: {
     watermark: Watermark;
-    banners: {
-      profile: boolean;
-    };
   };
 };
 
@@ -17,7 +14,7 @@ interface UseFetchApiConfig {
 }
 
 export function useFetchApiConfig(): UseFetchApiConfig {
-  const { setWatermark, setShowProfileBanner } = useUiStore();
+  const { setWatermark } = useUiStore();
 
   const fetchApiConfig: UseFetchApiConfig['fetchApiConfig'] = async () => {
     const response = await fetch(
@@ -31,7 +28,6 @@ export function useFetchApiConfig(): UseFetchApiConfig {
     const data: ConfigResponse = await response.json();
 
     setWatermark(data.config.watermark);
-    setShowProfileBanner(data.config.banners.profile);
   };
   return { fetchApiConfig };
 }

package/src/hooks/useFetchCustomToken.ts

@@ -103,11 +103,6 @@ export function useFetchCustomToken(): UseFetchCustomToken {
 
       return token;
     } catch (error: any) {
-      if (error?.code === 'ERR_BAD_REQUEST') {
-        const errorMessage = produceErrorMessage('not-found', blockchain);
-        setError(errorMessage);
-        return undefined;
-      }
       setError(undefined);
       throw new Error(error.message);
     } finally {

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 };
+}

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -1,8 +1,10 @@
 import type { HandleConnectOptions, Result } from './useStatefulConnect.types';
 import type { WalletInfoWithExtra } from '../../types';
-import type { ExtendedModalWalletInfo } from '../../utils/wallets';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
-import type { NamespaceData, WalletType } from '@rango-dev/wallets-shared';
+import type {
+  Namespace,
+  NamespaceData,
+  WalletType,
+} from '@rango-dev/wallets-shared';
 
 import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
@@ -59,11 +61,7 @@ export function useStatefulConnect(): UseStatefulConnect {
     });
 
     try {
-      const legacyNamespacesInput = namespaces?.map((namespaceInput) => ({
-        ...namespaceInput,
-        network: undefined,
-      }));
-      await connect(type, legacyNamespacesInput);
+      await connect(type, undefined, namespaces);
 
       return { status: ResultStatus.Connected };
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -77,7 +75,7 @@ export function useStatefulConnect(): UseStatefulConnect {
   };
 
   const handleConnect = async (
-    wallet: ExtendedModalWalletInfo,
+    wallet: WalletInfoWithExtra,
     options?: HandleConnectOptions
   ): Promise<{
     status: ResultStatus;
@@ -85,60 +83,31 @@ 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) {
-          dispatch({
-            type: 'needsNamespace',
-            payload: {
-              targetWallet: wallet,
-            },
-          });
-          return { status: ResultStatus.Namespace };
-        }
-      }
-
-      /*
-       * Legacy
-       *
-       * For legacy there are 3 states:
-       * 1. a wallet doesn't have any namespace defined, we call the connect.
-       * 2. a wallet has more than two namespaces, we should show namepsace modal, and in that place user will be checked to needs derivation path or not.
-       * 3. a wallet has exactly one namespacesape, in this case we check if that needs derivation or not, if it needs we will do it here by dispatching the action accordingly.
-       */
-      if (!wallet.needsNamespace) {
+      if (!wallet.namespaces) {
         return await runConnect(wallet.type, undefined, options);
       }
 
-      const needsNamespace = wallet.needsNamespace.data.length > 1;
+      const needsNamespace = wallet.namespaces.length > 1;
       const needsDerivationPath = wallet.needsDerivationPath;
 
       if (needsNamespace) {
         dispatch({
           type: 'needsNamespace',
           payload: {
-            targetWallet: wallet,
+            providerType: wallet.type,
+            providerImage: wallet.image,
+            availableNamespaces: wallet.namespaces,
+            singleNamespace: wallet.singleNamespace,
           },
         });
         return { status: ResultStatus.Namespace };
       } else if (needsDerivationPath) {
-        const namespace = wallet.needsNamespace.data[0];
-
         dispatch({
           type: 'needsDerivationPath',
           payload: {
             providerType: wallet.type,
             providerImage: wallet.image,
-            namespace: namespace.value,
+            namespace: wallet.namespaces[0],
           },
         });
         return { status: ResultStatus.DerivationPath };
@@ -146,9 +115,7 @@ export function useStatefulConnect(): UseStatefulConnect {
 
       return await runConnect(
         wallet.type,
-        wallet.needsNamespace?.data.map((namespace) => ({
-          namespace: namespace.value,
-        })),
+        wallet.namespaces.map((namespace) => ({ namespace })),
         options
       );
     }
@@ -165,7 +132,7 @@ export function useStatefulConnect(): UseStatefulConnect {
     wallet: WalletInfoWithExtra,
     selectedNamespaces: Namespace[]
   ): Promise<Result> => {
-    const isSingleNamespace = wallet.needsNamespace?.selection === 'single';
+    const isSingleNamespace = wallet.singleNamespace;
     const needsDerivationPath = wallet.needsDerivationPath;
     const firstSelectedNamespace = selectedNamespaces[0];
 
@@ -205,7 +172,7 @@ export function useStatefulConnect(): UseStatefulConnect {
       );
     }
 
-    const type = connectState.namespace.targetWallet.type;
+    const type = connectState.namespace.providerType;
     const namespaces = selectedNamespaces.map((namespace) => ({
       namespace,
     }));

package/src/hooks/useStatefulConnect/useStatefulConnect.types.ts

@@ -1,5 +1,4 @@
-import type { ExtendedModalWalletInfo } from '../../utils/wallets';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { Namespace } from '@rango-dev/wallets-shared';
 
 export interface HandleConnectOptions {
   // To have a switch between connect and disconnect when user is clicking on a button, this option can be helpful.
@@ -7,7 +6,10 @@ export interface HandleConnectOptions {
 }
 
 export interface NeedsNamespacesState {
-  targetWallet: ExtendedModalWalletInfo;
+  providerType: string;
+  providerImage: string;
+  availableNamespaces?: Namespace[];
+  singleNamespace?: boolean;
 }
 
 export interface NeedsDerivationPathState {

package/src/hooks/useSubscribeToWidgetEvents/useSubscribeToWidgetEvents.ts

@@ -12,10 +12,13 @@ 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 { connectedWallets, fetchBalances } = useAppStore();
+  const { findToken } = useAppStore();
 
   useEffect(() => {
     const handleStepEvent = (widgetEvent: StepEventData) => {
@@ -36,12 +39,8 @@ export function useSubscribeToWidgetEvents() {
             (wallet) => wallet.chain === step?.toBlockchain
           );
 
-        if (fromAccount) {
-          void fetchBalances([fromAccount]);
-        }
-        if (toAccount) {
-          void fetchBalances([toAccount]);
-        }
+        fromAccount && getWalletsDetails([fromAccount], findToken);
+        toAccount && getWalletsDetails([toAccount], findToken);
       }
 
       setNotification(event, route);

package/src/hooks/useSwapInput.ts

@@ -4,12 +4,15 @@ 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';
 import {
   generateQuoteWarnings,
   getDefaultQuote,
+  getQuoteFromTokenUsdPrice,
+  getQuoteToTokenUsdPrice,
   sortQuotesBy,
 } from '../utils/quote';
 import { isRoutingEnabled } from '../utils/settings';
@@ -47,7 +50,7 @@ export function useSwapInput({
   const { fetch: fetchQuote, cancelFetch } = useFetchAllQuotes();
   const { excludeLiquiditySources: configExcludeLiquiditySources, routing } =
     useAppStore().config;
-  const { connectedWallets } = useAppStore();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
 
   const {
     fromToken,
@@ -154,10 +157,15 @@ export function useSwapInput({
             requestId: quote?.requestId || '',
             swaps: quote?.swaps,
           });
+          const outputUsdValue =
+            getQuoteToTokenUsdPrice(quote) || toToken?.usdPrice;
+          const inputUsdValue =
+            getQuoteFromTokenUsdPrice(quote) || fromToken?.usdPrice;
           const quoteWarning =
             quote &&
-            generateQuoteWarnings({
-              currentQuote: quote,
+            generateQuoteWarnings(quote, {
+              fromToken: { ...fromToken, usdPrice: inputUsdValue },
+              toToken: { ...toToken, usdPrice: outputUsdValue },
               userSlippage,
               findToken,
             });

package/src/hooks/useWalletList.ts

@@ -12,6 +12,7 @@ import {
 import { useCallback, useEffect } from 'react';
 
 import { useAppStore } from '../store/AppStore';
+import { useWalletsStore } from '../store/wallets';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
   hashWalletsState,
@@ -22,6 +23,8 @@ import {
 
 import { useStatefulConnect } from './useStatefulConnect/useStatefulConnect';
 
+const ALL_SUPPORTED_WALLETS = Object.values(WalletTypes);
+
 interface Params {
   chain?: string;
 }
@@ -40,22 +43,21 @@ interface API {
  */
 export function useWalletList(params?: Params): API {
   const { chain } = params || {};
-  const { config, connectedWallets, getAvailableProviders } = useAppStore();
+  const { config } = useAppStore();
   const { state, getWalletInfo } = useWallets();
+  const { connectedWallets } = useWalletsStore();
   const blockchains = useAppStore().blockchains();
   const { handleDisconnect } = useStatefulConnect();
 
   /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
-  const listAvailableWalletTypes = configWalletsToWalletName(
-    getAvailableProviders(),
-    {
+  const listAvailableWalletTypes =
+    configWalletsToWalletName(config?.wallets, {
       trezorManifest: config?.trezorManifest,
       walletConnectProjectId: config?.walletConnectProjectId,
       walletConnectListedDesktopWalletLink:
         config.__UNSTABLE_OR_INTERNAL__?.walletConnectListedDesktopWalletLink,
       tonConnect: config.tonConnect,
-    }
-  );
+    }) || ALL_SUPPORTED_WALLETS;
 
   let wallets = mapWalletTypesToWalletInfo(
     state,

package/src/hooks/useWalletProviders/useWalletProviders.ts

@@ -1,30 +1,34 @@
 import type { WidgetConfig } from '../../types';
 import type { ProvidersOptions } from '../../utils/providers';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
 
 import { useEffect } from 'react';
 
-import { useAppStore } from '../../store/AppStore';
+import { useWalletsStore } from '../../store/wallets';
+import { matchAndGenerateProviders } from '../../utils/providers';
 
 import { hashProviders } from './useWalletProviders.helpers';
 
 export function useWalletProviders(
-  configWallets: WidgetConfig['wallets'],
+  providers: WidgetConfig['wallets'],
   options?: ProvidersOptions
 ) {
-  const { clearConnectedWallet, getAvailableProviders, buildAndSetProviders } =
-    useAppStore();
-  const providers = getAvailableProviders();
+  const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
+  let generateProviders: ProviderInterface[] = matchAndGenerateProviders(
+    providers,
+    options
+  );
 
   useEffect(() => {
     clearConnectedWallet();
-    buildAndSetProviders();
+    generateProviders = matchAndGenerateProviders(providers, options);
   }, [
-    hashProviders(configWallets ?? []),
+    hashProviders(providers ?? []),
     options?.walletConnectProjectId,
     options?.walletConnectListedDesktopWalletLink,
   ]);
 
   return {
-    providers,
+    providers: generateProviders,
   };
 }

package/src/index.ts

@@ -1,5 +1,5 @@
 import type { WidgetProps } from './containers/Widget';
-import type { ConnectedWallet } from './store/slices/wallets';
+import type { ConnectedWallet } from './store/wallets';
 import type {
   BlockchainAndTokenConfig,
   QuoteEventData,

package/src/pages/ConfirmSwapPage.tsx

@@ -24,12 +24,12 @@ import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
 import { Layout, PageContainer } from '../components/Layout';
 import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { getQuoteUpdateWarningMessage } from '../constants/warnings';
 import { QuoteInfo } from '../containers/QuoteInfo';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
-import { isQuoteWarningConfirmationRequired } from '../utils/quote';
 import { joinList } from '../utils/ui';
 
 const Buttons = styled('div', {
@@ -133,12 +133,7 @@ export function ConfirmSwapPage() {
   };
 
   const onStartConfirmSwap = async () => {
-    const shouldShowWarningModal =
-      confirmSwapResult.warnings?.quote &&
-      isQuoteWarningConfirmationRequired(confirmSwapResult.warnings.quote) &&
-      !quoteWarningsConfirmed;
-
-    if (shouldShowWarningModal) {
+    if (confirmSwapResult?.warnings?.quote && !quoteWarningsConfirmed) {
       setShowQuoteWarningModal(true);
     } else {
       await onConfirm();
@@ -201,6 +196,19 @@ export function ConfirmSwapPage() {
     alerts.push(<Alert type="error" variant="alarm" title={dbErrorMessage} />);
   }
 
+  if (confirmSwapResult.warnings?.quoteUpdate) {
+    alerts.push(
+      <Alert
+        variant="alarm"
+        type="warning"
+        title={
+          confirmSwapResult.warnings.quoteUpdate &&
+          getQuoteUpdateWarningMessage(confirmSwapResult.warnings.quoteUpdate)
+        }
+      />
+    );
+  }
+
   if (quoteWarning || quoteError) {
     const settings_url = `../${navigationRoutes.settings}`;
     alerts.push(

package/src/pages/Home.tsx

@@ -19,6 +19,7 @@ import { useSwapInput } from '../hooks/useSwapInput';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
+import { useWalletsStore } from '../store/wallets';
 import { UiEventTypes } from '../types';
 import { isVariantExpandable } from '../utils/configs';
 import { emitPreventableEvent } from '../utils/events';
@@ -54,12 +55,9 @@ export function Home() {
   const { isLargeScreen, isExtraLargeScreen } = useScreenDetect();
 
   const { fetch: fetchQuote, loading } = useSwapInput({ refetchQuote });
-  const {
-    config,
-    fetchStatus: fetchMetaStatus,
-    connectedWallets,
-  } = useAppStore();
+  const { config, fetchStatus: fetchMetaStatus } = useAppStore();
 
+  const { connectedWallets } = useWalletsStore();
   const { isActiveTab } = useUiStore();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);