@rango-dev/widget-embedded 0.17.1-next.4 → 0.17.1-next.5

package/src/components/UpdateUrl.tsx

@@ -1,5 +1,3 @@
-import type { WidgetConfig } from '../types';
-
 import { useEffect, useRef } from 'react';
 import {
   createSearchParams,
@@ -10,14 +8,12 @@ import {
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { SearchParams } from '../constants/searchParams';
 import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { searchParamsToToken } from '../utils/quote';
 
-type Props = { config: WidgetConfig | undefined };
-
-export function UpdateUrl(props: Props) {
+export function UpdateUrl() {
   const firstRender = useRef(true);
   const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
@@ -33,10 +29,11 @@ export function UpdateUrl(props: Props) {
   const setToToken = useQuoteStore.use.setToToken();
   const inputAmount = useQuoteStore.use.inputAmount();
   const setInputAmount = useQuoteStore.use.setInputAmount();
-  const loadingStatus = useMetaStore.use.loadingStatus();
-  const { blockchains, tokens } = useMetaStore.use.meta();
+  const fetchMetaStatus = useAppStore().use.fetchStatus();
+  const blockchains = useAppStore().use.blockchains()();
+  const tokens = useAppStore().use.tokens()();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  useSyncStoresWithConfig(props.config);
+  useSyncStoresWithConfig();
 
   useEffect(() => {
     const params: Record<string, string> = {};
@@ -60,7 +57,7 @@ export function UpdateUrl(props: Props) {
         toChainString = '',
         toTokenString = '',
         fromAmount = '';
-      if (loadingStatus !== 'success') {
+      if (fetchMetaStatus !== 'success') {
         fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
         fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
         toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
@@ -109,7 +106,7 @@ export function UpdateUrl(props: Props) {
   ]);
 
   useEffect(() => {
-    if (loadingStatus === 'success') {
+    if (fetchMetaStatus === 'success') {
       const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
       const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
       const toChainString = searchParams.get(SearchParams.TO_CHAIN);
@@ -134,20 +131,29 @@ export function UpdateUrl(props: Props) {
       if (!!fromBlockchain) {
         setFromBlockchain(fromBlockchain);
         if (!!fromToken) {
-          setFromToken(fromToken);
+          setFromToken({
+            token: fromToken,
+            meta: {
+              blockchains: blockchains,
+              tokens: tokens,
+            },
+          });
         }
       }
       if (!!toBlockchain) {
         setToBlockchain(toBlockchain);
         if (!!toToken) {
-          setToToken(toToken);
+          setToToken({
+            token: toToken,
+            meta: { blockchains: blockchains, tokens: tokens },
+          });
         }
       }
       if (fromAmount) {
         setInputAmount(fromAmount);
       }
     }
-  }, [loadingStatus]);
+  }, [fetchMetaStatus]);
 
   return null;
 }

package/src/components/WidgetEvents.tsx

@@ -8,11 +8,13 @@ import {
 } from '@rango-dev/queue-manager-rango-preset';
 import { useEffect } from 'react';
 
+import { useAppStore } from '../store/AppStore';
 import { useNotificationStore } from '../store/notification';
 import { useWalletsStore } from '../store/wallets';
 import { validBlockedStatuses } from '../types/notification';
 
 export function WidgetEvents() {
+  const tokens = useAppStore().use.tokens()();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
@@ -38,12 +40,13 @@ export function WidgetEvents() {
             (wallet) => wallet.chain === step?.toBlockchain
           );
 
-        fromAccount && getWalletsDetails([fromAccount]);
-        toAccount && getWalletsDetails([toAccount]);
+        fromAccount && getWalletsDetails([fromAccount], tokens);
+        toAccount && getWalletsDetails([toAccount], tokens);
       }
       if (
-        event.type === StepEventType.TX_EXECUTION_BLOCKED &&
-        validBlockedStatuses.includes(event.status)
+        (event.type === StepEventType.TX_EXECUTION_BLOCKED &&
+          validBlockedStatuses.includes(event.status)) ||
+        event.type === StepEventType.FAILED
       ) {
         setNotification(event, route);
       } else if (

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -5,7 +5,7 @@ import type { BestRouteResponse } from 'rango-sdk';
 import { calculatePendingSwap } from '@rango-dev/queue-manager-rango-preset';
 import { useEffect } from 'react';
 
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { useSettingsStore } from '../../store/settings';
 import { useWalletsStore } from '../../store/wallets';
@@ -40,8 +40,8 @@ export function useConfirmSwap(): ConfirmSwap {
     disabledLiquiditySources,
   } = useSettingsStore();
   const { connectedWallets } = useWalletsStore();
-
-  const { meta } = useMetaStore();
+  const blockchains = useAppStore().use.blockchains()();
+  const tokens = useAppStore().use.tokens()();
 
   const userSlippage = customSlippage || slippage;
 
@@ -105,13 +105,13 @@ export function useConfirmSwap(): ConfirmSwap {
       getWalletsForNewSwap(selectedWallets),
       swapSettings,
       false,
-      meta
+      { blockchains, tokens }
     );
 
     const confirmSwapWarnings = generateWarnings(initialQuote, currentQuote, {
       fromToken,
       toToken,
-      tokens: meta.tokens,
+      tokens: tokens,
       selectedWallets,
       userSlippage,
     });

package/src/hooks/useSwapInput.ts

@@ -2,7 +2,7 @@ import type { QuoteError, QuoteWarning } from '../types';
 
 import { useEffect, useRef, useState } from 'react';
 
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useSettingsStore } from '../store/settings';
 import { QuoteErrorType } from '../types';
@@ -33,6 +33,9 @@ type UseSwapInput = {
  */
 export function useSwapInput(): UseSwapInput {
   const { fetch: fetchQuote, cancelFetch } = useFetchQuote();
+  const { liquiditySources, enableNewLiquiditySources } =
+    useAppStore().use.config();
+  const tokens = useAppStore().use.tokens()();
   const {
     fromToken,
     toToken,
@@ -41,9 +44,6 @@ export function useSwapInput(): UseSwapInput {
     resetQuote,
     setQuote,
   } = useQuoteStore();
-  const {
-    meta: { tokens },
-  } = useMetaStore();
   const {
     slippage,
     customSlippage,
@@ -79,6 +79,8 @@ export function useSwapInput(): UseSwapInput {
         fromToken,
         toToken,
         inputAmount,
+        liquiditySources,
+        excludeLiquiditySources: enableNewLiquiditySources,
         disabledLiquiditySources,
         slippage: userSlippage,
         affiliateRef,

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,14 +1,13 @@
-import type { WidgetConfig } from '../types';
 import type { Asset } from 'rango-sdk';
 
 import { useEffect, useMemo, useRef } from 'react';
 
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useSettingsStore } from '../store/settings';
 import { tokensAreEqual } from '../utils/wallets';
 
-export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
+export function useSyncStoresWithConfig() {
   const {
     setInputAmount,
     setToToken,
@@ -21,10 +20,10 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     toBlockchain,
   } = useQuoteStore();
 
-  const {
-    meta: { tokens, blockchains },
-    loadingStatus: loadingMetaStatus,
-  } = useMetaStore();
+  const config = useAppStore().use.config();
+  const fetchMetaStatus = useAppStore().use.fetchStatus();
+  const blockchains = useAppStore().use.blockchains()();
+  const tokens = useAppStore().use.tokens()();
 
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
     useSettingsStore();
@@ -55,7 +54,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   }, [config?.amount]);
 
   useEffect(() => {
-    if (loadingMetaStatus === 'success') {
+    if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.from?.blockchain
       );
@@ -67,8 +66,10 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
         setFromBlockchain(chain ?? null);
       }
 
-      if (token || (!token && prevConfigFromToken.current)) {
-        setFromToken(token ?? null);
+      if (token) {
+        setFromToken({ token, meta: { blockchains, tokens } });
+      } else if (!token && prevConfigFromToken.current) {
+        setFromToken({ token: null });
       }
 
       prevConfigFromBlockchain.current = config?.from?.blockchain;
@@ -79,13 +80,13 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     config?.from?.token?.address,
     config?.from?.token?.blockchain,
     config?.from?.blockchain,
-    loadingMetaStatus,
+    fetchMetaStatus,
   ]);
 
   useEffect(() => {
     if (fromToken && fromTokensConfig) {
       if (!fromTokensConfig.some((token) => tokensAreEqual(token, fromToken))) {
-        setFromToken(null);
+        setFromToken({ token: null });
       }
     }
 
@@ -99,7 +100,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   useEffect(() => {
     if (toToken && toTokensConfig) {
       if (!toTokensConfig.some((token) => tokensAreEqual(token, toToken))) {
-        setToToken(null);
+        setToToken({ token: null });
       }
     }
 
@@ -111,7 +112,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   }, [toTokensConfig, toBlockchainsConfig]);
 
   useEffect(() => {
-    if (loadingMetaStatus === 'success') {
+    if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.to?.blockchain
       );
@@ -123,8 +124,10 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
         setToBlockchain(chain ?? null);
       }
 
-      if (token || (!token && prevConfigToToken.current)) {
-        setToToken(token ?? null);
+      if (token) {
+        setToToken({ token, meta: { blockchains, tokens } });
+      } else if (!token && prevConfigToToken.current) {
+        setToToken({ token: null });
       }
 
       prevConfigToBlockchain.current = config?.to?.blockchain;
@@ -135,7 +138,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     config?.to?.token?.address,
     config?.to?.token?.blockchain,
     config?.to?.blockchain,
-    loadingMetaStatus,
+    fetchMetaStatus,
   ]);
 
   useEffect(() => {

package/src/hooks/useWalletList.ts

@@ -10,7 +10,7 @@ import {
 } from '@rango-dev/wallets-shared';
 import { useEffect, useState } from 'react';
 
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useWalletsStore } from '../store/wallets';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
@@ -37,9 +37,7 @@ export function useWalletList(params: Params) {
   const { config, chain, onBeforeConnect, onConnect } = params;
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const { connectedWallets } = useWalletsStore();
-  const { blockchains } = useMetaStore().meta;
-  const multiWallets =
-    typeof config?.multiWallets === 'undefined' ? true : config.multiWallets;
+  const blockchains = useAppStore().use.blockchains()();
 
   /** 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 =
@@ -76,7 +74,7 @@ export function useWalletList(params: Params) {
         const atLeastOneWalletIsConnected = !!wallets.find(
           (w) => w.state === WalletState.CONNECTED
         );
-        if (!multiWallets && atLeastOneWalletIsConnected) {
+        if (!config?.multiWallets && atLeastOneWalletIsConnected) {
           return;
         }
         onBeforeConnect?.(type);

package/src/pages/ConfirmSwapPage.tsx

@@ -3,7 +3,6 @@ import type {
   ConfirmSwap,
   ConfirmSwapFetchResult,
 } from '../hooks/useConfirmSwap/useConfirmSwap.types';
-import type { WidgetConfig } from '../types';
 
 import { i18n } from '@lingui/core';
 import { useManager } from '@rango-dev/queue-manager-react';
@@ -69,13 +68,8 @@ const Buttons = styled('div', {
   },
 });
 
-type PropTypes = {
-  config?: WidgetConfig;
-};
-
-export function ConfirmSwapPage(props: PropTypes) {
+export function ConfirmSwapPage() {
   //TODO: move component's logics to a custom hook
-  const { config } = props;
   const {
     quote,
     setInputAmount,
@@ -92,7 +86,6 @@ export function ConfirmSwapPage(props: PropTypes) {
   const showWalletsOnInit = !quoteWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
-
   const { manager } = useManager();
   const {
     fetch: confirmSwap,
@@ -296,7 +289,6 @@ export function ConfirmSwapPage(props: PropTypes) {
           onCancel={cancelFetch}
           loading={fetchingConfirmationQuote}
           onCheckBalance={onConfirmSwap}
-          config={config}
         />
       )}
 

package/src/pages/Home.tsx

@@ -20,7 +20,7 @@ import {
 } from '../constants/routing';
 import { QuoteInfo } from '../containers/QuoteInfo';
 import { useSwapInput } from '../hooks/useSwapInput';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
@@ -76,7 +76,7 @@ export function Home() {
     setQuoteWarningsConfirmed,
   } = useQuoteStore();
 
-  const { loadingStatus: loadingMetaStatus } = useMetaStore();
+  const fetchMetaStatus = useAppStore().use.fetchStatus();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const setCurrentPage = useUiStore.use.setCurrentPage();
@@ -100,7 +100,7 @@ export function Home() {
     outputUsdValue
   );
   const swapButtonState = getSwapButtonState(
-    loadingMetaStatus,
+    fetchMetaStatus,
     connectedWallets,
     fetchingQuote,
     quote,
@@ -227,8 +227,8 @@ export function Home() {
                   ? errorMessages().unknownPriceError.impactTitle
                   : undefined,
               }}
-              disabled={loadingMetaStatus === 'failed'}
-              loading={loadingMetaStatus === 'loading'}
+              disabled={fetchMetaStatus === 'failed'}
+              loading={fetchMetaStatus === 'loading'}
               onSelectMaxBalance={() => {
                 if (tokenBalance !== '0') {
                   setInputAmount(tokenBalanceReal.split(',').join(''));
@@ -273,8 +273,8 @@ export function Home() {
                 : undefined,
             }}
             onClickToken={() => navigate('to-swap')}
-            disabled={loadingMetaStatus === 'failed'}
-            loading={loadingMetaStatus === 'loading'}
+            disabled={fetchMetaStatus === 'failed'}
+            loading={fetchMetaStatus === 'loading'}
           />
         </InputsContainer>
         <QuoteInfo

package/src/pages/LiquiditySourcePage.tsx

@@ -25,30 +25,23 @@ import {
 } from '../components/SettingsContainer';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useSettingsStore } from '../store/settings';
 import { containsText } from '../utils/numbers';
-import {
-  getUniqueSwappersGroups,
-  sortLiquiditySourcesByGroupTitle,
-} from '../utils/settings';
+import { getUniqueSwappersGroups } from '../utils/settings';
 
 interface PropTypes {
-  supportedSwappers?: string[];
   sourceType: 'Exchanges' | 'Bridges';
 }
 
-export function LiquiditySourcePage({
-  supportedSwappers,
-  sourceType,
-}: PropTypes) {
+export function LiquiditySourcePage({ sourceType }: PropTypes) {
+  const fetchStatus = useAppStore().use.fetchStatus();
+  const swappers = useAppStore().use.swappers()();
   const [searchedFor, setSearchedFor] = useState<string>('');
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
   const { navigateBackFrom } = useNavigateBack();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
-
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
-    getUniqueSwappersGroups(supportedSwappers);
+    getUniqueSwappersGroups(swappers);
 
   const validTypes: Array<LiquiditySourceType> = [];
   if (sourceType === 'Exchanges') {
@@ -79,22 +72,20 @@ export function LiquiditySourcePage({
     });
   };
 
-  const list = liquiditySources
-    .sort(sortLiquiditySourcesByGroupTitle)
-    .map((sourceItem) => {
-      const { selected, groupTitle, logo } = sourceItem;
-      return {
-        start: <Image src={logo} size={22} type="circular" />,
-        onClick: () => toggleLiquiditySource(groupTitle),
-        end: <Checkbox checked={selected} />,
-        title: (
-          <Typography variant="title" size="xmedium">
-            {i18n.t(groupTitle)}
-          </Typography>
-        ),
-        ...sourceItem,
-      };
-    });
+  const list = liquiditySources.map((sourceItem) => {
+    const { selected, groupTitle, logo } = sourceItem;
+    return {
+      start: <Image src={logo} size={22} type="circular" />,
+      onClick: () => toggleLiquiditySource(groupTitle),
+      end: <Checkbox checked={selected} />,
+      title: (
+        <Typography variant="title" size="xmedium">
+          {i18n.t(groupTitle)}
+        </Typography>
+      ),
+      ...sourceItem,
+    };
+  });
 
   const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
@@ -131,7 +122,7 @@ export function LiquiditySourcePage({
           placeholder={i18n.t('Search {sourceType}', { sourceType })}
           onChange={searchHandler}
         />
-        {loadingMetaStatus === 'loading' && <LoadingLiquiditySourceList />}
+        {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}
 
         {!filteredList.length && !!searchedFor ? (
           <NotFoundContainer>
@@ -141,7 +132,7 @@ export function LiquiditySourcePage({
             />
           </NotFoundContainer>
         ) : (
-          loadingMetaStatus === 'success' && (
+          fetchStatus === 'success' && (
             <LiquiditySourceList>
               {filteredList.map((sourceItem) => {
                 return (

package/src/pages/SelectBlockchainPage.tsx

@@ -7,8 +7,7 @@ import { Layout } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useAppStore } from '../store/app';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 
 interface PropTypes {
@@ -22,9 +21,9 @@ export function SelectBlockchainPage(props: PropTypes) {
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const setToBlockchain = useQuoteStore.use.setToBlockchain();
   const setFromBlockchain = useQuoteStore.use.setFromBlockchain();
-  const { loadingStatus } = useMetaStore();
+  const fetchStatus = useAppStore().use.fetchStatus();
 
-  const blockchains = useAppStore().blockchains({
+  const blockchains = useAppStore().use.blockchains()({
     type: type,
   });
   const routeKey = type === 'source' ? 'fromBlockchain' : 'toBlockchain';
@@ -42,7 +41,7 @@ export function SelectBlockchainPage(props: PropTypes) {
         setCategory={setBlockchainCategory}
         category={blockchainCategory}
         blockchains={blockchains}
-        isLoading={loadingStatus === 'loading'}
+        isLoading={fetchStatus === 'loading'}
       />
       <Divider size={24} />
       <SearchInput

package/src/pages/SelectSwapItemsPage.tsx

@@ -11,7 +11,7 @@ import { SearchInput } from '../components/SearchInput';
 import { TokenList } from '../components/TokenList/TokenList';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useAppStore } from '../store/app';
+import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useWalletsStore } from '../store/wallets';
 import { getTokensBalanceFromWalletAndSort } from '../utils/wallets';
@@ -39,10 +39,10 @@ export function SelectSwapItemsPage(props: PropTypes) {
   const selectedBlockchainName = selectedBlockchain?.name ?? '';
 
   // Tokens & Blockchains list
-  const blockchains = useAppStore().blockchains({
+  const blockchains = useAppStore().use.blockchains()({
     type: type,
   });
-  const tokens = useAppStore().tokens({
+  const tokens = useAppStore().use.tokens()({
     type,
     blockchain: selectedBlockchainName,
     searchFor: searchedFor,
@@ -63,9 +63,9 @@ export function SelectSwapItemsPage(props: PropTypes) {
 
   const updateToken = (token: Token) => {
     if (type === 'source') {
-      setFromToken(token);
+      setFromToken({ token, meta: { blockchains, tokens } });
     } else {
-      setToToken(token);
+      setToToken({ token, meta: { blockchains, tokens } });
     }
   };
 

package/src/pages/SettingsPage.tsx

@@ -19,26 +19,22 @@ import { Slippage } from '../components/Slippage';
 import { SlippageTooltipContainer as TooltipContainer } from '../components/Slippage/Slippage.styles';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useSettingsStore } from '../store/settings';
 import { getContainer } from '../utils/common';
 import { getUniqueSwappersGroups } from '../utils/settings';
 
-interface PropTypes {
-  supportedSwappers?: string[];
-  singleTheme?: boolean;
-}
-
-export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
+export function SettingsPage() {
   const navigate = useNavigate();
+  const { theme } = useAppStore().use.config();
+  const fetchStatus = useAppStore().use.fetchStatus();
+  const swappers = useAppStore().use.swappers()();
   const { navigateBackFrom } = useNavigateBack();
 
   const infiniteApprove = useSettingsStore.use.infiniteApprove();
   const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
 
-  const supportedUniqueSwappersGroups =
-    getUniqueSwappersGroups(supportedSwappers);
+  const supportedUniqueSwappersGroups = getUniqueSwappersGroups(swappers);
 
   const bridgeSources = supportedUniqueSwappersGroups.filter(
     (uniqueItem) =>
@@ -58,7 +54,7 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
   ).length;
 
   const handleEndItem = (totalSelected: number, total: number) => {
-    switch (loadingMetaStatus) {
+    switch (fetchStatus) {
       case 'loading':
         return <Skeleton variant="text" size="medium" width={50} />;
       case 'failed':
@@ -167,7 +163,7 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
     exchangeItem,
     // languageItem
   ];
-  if (!singleTheme) {
+  if (!theme?.singleTheme) {
     settingItems.push(themeItem);
   }
   settingItems.push(infiniteApprovalItem);

package/src/pages/SwapDetailsPage.tsx

@@ -6,7 +6,7 @@ import { SwapDetails } from '../components/SwapDetails';
 import { SwapDetailsPlaceholder } from '../components/SwapDetails/SwapDetails.Placeholder';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
 import { getPendingSwaps } from '../utils/queue';
 
@@ -16,9 +16,9 @@ export function SwapDetailsPage() {
   const pendingSwaps = getPendingSwaps(manager);
   const requestId = useUiStore.use.selectedSwapRequestId();
   const { navigateBackFrom } = useNavigateBack();
-  const { loadingStatus } = useMetaStore();
+  const { fetchStatus: fetchMetaStatus } = useAppStore()();
 
-  const showSkeleton = loading || loadingStatus === 'loading';
+  const showSkeleton = loading || fetchMetaStatus === 'loading';
 
   const selectedSwap = pendingSwaps.find(
     ({ swap }) => swap.requestId === requestId