@rango-dev/widget-embedded 0.17.1-next.2 → 0.17.1-next.20

package/src/pages/SelectSwapItemsPage.tsx

@@ -11,8 +11,8 @@ 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 { useBestRouteStore } from '../store/bestRoute';
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
 import { useWalletsStore } from '../store/wallets';
 import { getTokensBalanceFromWalletAndSort } from '../utils/wallets';
 
@@ -23,7 +23,7 @@ interface PropTypes {
 export function SelectSwapItemsPage(props: PropTypes) {
   const { type } = props;
   const navigate = useNavigate();
-  const { navigateBackFrom } = useNavigateBack();
+  const navigateBack = useNavigateBack();
   const {
     fromBlockchain,
     toBlockchain,
@@ -31,7 +31,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
     setToToken,
     setFromBlockchain,
     setToBlockchain,
-  } = useBestRouteStore();
+  } = useQuoteStore();
   const { connectedWallets } = useWalletsStore();
   const [searchedFor, setSearchedFor] = useState<string>('');
 
@@ -63,36 +63,22 @@ 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 } });
     }
   };
 
   return (
     <Layout
       header={{
-        onBack: () =>
-          navigateBackFrom(
-            type === 'source'
-              ? navigationRoutes.fromSwap
-              : navigationRoutes.toSwap
-          ),
-        title: i18n.t('Swap {type}', {
-          type: type === 'source' ? 'from' : 'to',
-        }),
+        title: i18n.t('Swap {type}', { type }),
       }}>
       <BlockchainsSection
         blockchains={blockchains}
         type={type == 'source' ? 'from' : 'to'}
         blockchain={type === 'source' ? fromBlockchain : toBlockchain}
-        onMoreClick={() =>
-          navigate(
-            type === 'source'
-              ? navigationRoutes.fromBlockchain
-              : navigationRoutes.toBlockchain
-          )
-        }
+        onMoreClick={() => navigate(navigationRoutes.blockchains)}
         onChange={(blockchain) => {
           updateBlockchain(blockchain);
         }}
@@ -123,7 +109,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
             updateBlockchain(tokenBlockchain);
           }
 
-          navigateBackFrom(navigationRoutes.fromSwap);
+          navigateBack();
         }}
       />
     </Layout>

package/src/pages/SettingsPage.tsx

@@ -18,27 +18,21 @@ import { SettingsContainer } from '../components/SettingsContainer';
 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 { navigateBackFrom } = useNavigateBack();
+  const { theme } = useAppStore().config;
+  const fetchStatus = useAppStore().fetchStatus;
+  const swappers = useAppStore().swappers();
 
   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 +52,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 +161,7 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
     exchangeItem,
     // languageItem
   ];
-  if (!singleTheme) {
+  if (!theme?.singleTheme) {
     settingItems.push(themeItem);
   }
   settingItems.push(infiniteApprovalItem);
@@ -175,7 +169,6 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
   return (
     <Layout
       header={{
-        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
         title: i18n.t('Setting'),
       }}>
       <SettingsContainer>

package/src/pages/SwapDetailsPage.tsx

@@ -4,9 +4,8 @@ import React from 'react';
 
 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';
 
@@ -15,10 +14,10 @@ export function SwapDetailsPage() {
   const loading = !state.loadedFromPersistor;
   const pendingSwaps = getPendingSwaps(manager);
   const requestId = useUiStore.use.selectedSwapRequestId();
-  const { navigateBackFrom } = useNavigateBack();
-  const { loadingStatus } = useMetaStore();
+  const navigateBack = useNavigateBack();
+  const { fetchStatus: fetchMetaStatus } = useAppStore();
 
-  const showSkeleton = loading || loadingStatus === 'loading';
+  const showSkeleton = loading || fetchMetaStatus === 'loading';
 
   const selectedSwap = pendingSwaps.find(
     ({ swap }) => swap.requestId === requestId
@@ -36,8 +35,8 @@ export function SwapDetailsPage() {
   const onDelete = async () => {
     if (selectedSwap?.id) {
       try {
-        await manager?.deleteQueue(selectedSwap.id);
-        navigateBackFrom(navigationRoutes.swapDetails);
+        manager?.deleteQueue(selectedSwap.id);
+        navigateBack();
       } catch (e) {
         console.log(e);
       }

package/src/pages/ThemePage.tsx

@@ -13,8 +13,6 @@ import React from 'react';
 
 import { Layout } from '../components/Layout';
 import { SettingsContainer } from '../components/SettingsContainer';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useSettingsStore } from '../store/settings';
 
 type Theme = 'dark' | 'light' | 'auto';
@@ -26,7 +24,6 @@ enum Mode {
 }
 
 export function ThemePage() {
-  const { navigateBackFrom } = useNavigateBack();
   const theme = useSettingsStore.use.theme();
   const setTheme = useSettingsStore.use.setTheme();
 
@@ -72,7 +69,6 @@ export function ThemePage() {
   return (
     <Layout
       header={{
-        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
         title: i18n.t('Theme'),
       }}>
       <SettingsContainer>

package/src/pages/WalletsPage.tsx

@@ -1,4 +1,3 @@
-import type { WidgetConfig } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
@@ -7,18 +6,10 @@ import React, { Fragment, useState } from 'react';
 
 import { Layout } from '../components/Layout';
 import { WalletModal } from '../components/WalletModal';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useWalletList } from '../hooks/useWalletList';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { getContainer } from '../utils/common';
 
-interface PropTypes {
-  supportedWallets: WidgetConfig['wallets'];
-  multiWallets: boolean;
-  config?: WidgetConfig;
-}
-
 const ListContainer = styled('div', {
   display: 'grid',
   gap: '$10',
@@ -35,8 +26,8 @@ const Container = styled('div', {
 export const TIME_TO_CLOSE_MODAL = 3_000;
 export const TIME_TO_IGNORE_MODAL = 300;
 
-export function WalletsPage({ config }: PropTypes) {
-  const { navigateBackFrom } = useNavigateBack();
+export function WalletsPage() {
+  const { config, fetchStatus: fetchMetaStatus } = useAppStore();
   const [openModal, setOpenModal] = useState(false);
   const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
@@ -59,7 +50,6 @@ export function WalletsPage({ config }: PropTypes) {
     },
   });
 
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const selectedWallet = list.find(
     (wallet) => wallet.type === selectedWalletType
   );
@@ -71,7 +61,6 @@ export function WalletsPage({ config }: PropTypes) {
     <Layout
       header={{
         title: i18n.t('Connect Wallets'),
-        onBack: navigateBackFrom.bind(null, navigationRoutes.wallets),
       }}>
       <Container>
         <Typography variant="title" size="xmedium" align="center">
@@ -88,7 +77,7 @@ export function WalletsPage({ config }: PropTypes) {
                   onClick={(type) => {
                     void handleClick(type);
                   }}
-                  isLoading={loadingMetaStatus === 'loading'}
+                  isLoading={fetchMetaStatus === 'loading'}
                 />
               </Fragment>
             );

package/src/services/httpService.ts

@@ -8,6 +8,6 @@ export const httpService = () => {
   if (rango) {
     return rango;
   }
-  rango = new RangoClient(getConfig('API_KEY'));
+  rango = new RangoClient(getConfig('API_KEY'), getConfig('BASE_URL'));
   return rango;
 };

package/src/store/AppStore.tsx

@@ -0,0 +1,35 @@
+import type { WidgetConfig } from '../types';
+import type { PropsWithChildren } from 'react';
+
+import React, { createContext, useContext, useRef } from 'react';
+
+import { createAppStore } from './app';
+
+type AppStore = ReturnType<typeof createAppStore>;
+type AppStoreProviderProps = PropsWithChildren<{ config?: WidgetConfig }>;
+
+export const AppStoreContext = createContext<AppStore | null>(null);
+
+export function useAppStore() {
+  const store = useContext(AppStoreContext);
+
+  if (!store) {
+    throw new Error('Missing AppStoreContext.Provider in the tree');
+  }
+
+  return store();
+}
+
+export function AppStoreProvider(props: AppStoreProviderProps) {
+  const appStoreRef = useRef<AppStore>();
+
+  if (!appStoreRef.current) {
+    appStoreRef.current = createAppStore(props.config);
+  }
+
+  return (
+    <AppStoreContext.Provider value={appStoreRef.current}>
+      {props.children}
+    </AppStoreContext.Provider>
+  );
+}

package/src/store/app.ts

@@ -1,15 +1,27 @@
 import type { ConfigSlice } from './slices/config';
 import type { DataSlice } from './slices/data';
+import type { WidgetConfig } from '../types';
+import type { StateCreator } from 'zustand';
 
 import { create } from 'zustand';
 
-import createSelectors from './selectors';
 import { createConfigSlice } from './slices/config';
 import { createDataSlice } from './slices/data';
 
-const store = create<DataSlice & ConfigSlice>()((...a) => ({
-  ...createDataSlice(...a),
-  ...createConfigSlice(...a),
-}));
+export type StateCreatorWithInitialData<
+  T extends Partial<WidgetConfig>,
+  R extends Record<string, unknown>,
+  V extends Record<string, unknown>
+> = (
+  initialData: T | undefined,
+  ...rest: Parameters<StateCreator<R, [], [], V>>
+) => ReturnType<StateCreator<R, [], [], V>>;
 
-export const useAppStore = createSelectors(store);
+export type AppStoreState = DataSlice & ConfigSlice;
+
+export function createAppStore(initialData?: WidgetConfig) {
+  return create<AppStoreState>()((...a) => ({
+    ...createDataSlice(...a),
+    ...createConfigSlice(initialData, ...a),
+  }));
+}

package/src/store/{bestRoute.ts → quote.ts}

@@ -1,7 +1,12 @@
 import type { TokenWithBalance } from '../components/TokenList';
 import type { Wallet } from '../types';
 import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset/dist/shared';
-import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+import type {
+  BestRouteResponse,
+  BlockchainMeta,
+  MetaResponse,
+  Token,
+} from 'rango-sdk';
 
 import BigNumber from 'bignumber.js';
 import { create } from 'zustand';
@@ -9,21 +14,24 @@ import { subscribeWithSelector } from 'zustand/middleware';
 
 import { ZERO } from '../constants/numbers';
 import { isPositiveNumber } from '../utils/numbers';
-import {
-  createRetryRoute,
-  getBestRouteToTokenUsdPrice,
-} from '../utils/routing';
+import { createRetryQuote, getQuoteToTokenUsdPrice } from '../utils/quote';
 import { calcOutputUsdValue } from '../utils/swap';
 
-import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
-const getUsdValue = (token: Token | null, amount: string): BigNumber | null =>
+export const getUsdValue = (
+  token: Token | null,
+  amount: string
+): BigNumber | null =>
   token?.usdPrice
     ? new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0)
     : null;
 
-export interface RouteState {
+export type Meta = Pick<MetaResponse, 'blockchains' | 'tokens'>;
+
+export type SetTokenParams = { token: Token; meta: Meta } | { token: null };
+
+export interface QuoteState {
   fromBlockchain: BlockchainMeta | null;
   toBlockchain: BlockchainMeta | null;
   inputAmount: string;
@@ -32,30 +40,32 @@ export interface RouteState {
   outputUsdValue: BigNumber | null;
   fromToken: TokenWithBalance | null;
   toToken: TokenWithBalance | null;
-  routeWalletsConfirmed: boolean;
+  quoteWalletsConfirmed: boolean;
   selectedWallets: Wallet[];
-  resetRoute: () => void;
+  quoteWarningsConfirmed: boolean;
+  resetQuote: () => void;
   resetToBlockchain: () => void;
   resetFromBlockchain: () => void;
   setFromBlockchain: (chain: BlockchainMeta | null) => void;
   setToBlockchain: (chian: BlockchainMeta | null) => void;
 
-  setFromToken: (token: Token | null) => void;
-  setToToken: (token: Token | null) => void;
+  setFromToken: (params: SetTokenParams) => void;
+  setToToken: (params: SetTokenParams) => void;
   setInputAmount: (amount: string) => void;
-  bestRoute: BestRouteResponse | null;
-  setRoute: (bestRoute: BestRouteResponse | null) => void;
-  retry: (pendingSwap: PendingSwap) => void;
+  quote: BestRouteResponse | null;
+  setQuote: (quote: BestRouteResponse | null) => void;
+  retry: (pendingSwap: PendingSwap, meta: Meta) => void;
   switchFromAndTo: () => void;
-  setRouteWalletConfirmed: (flag: boolean) => void;
+  setQuoteWalletConfirmed: (flag: boolean) => void;
   setSelectedWallets: (wallets: Wallet[]) => void;
   customDestination: string;
   setCustomDestination: (address: string) => void;
-  resetRouteWallets: () => void;
+  resetQuoteWallets: () => void;
+  setQuoteWarningsConfirmed: (flag: boolean) => void;
 }
 
-export const useBestRouteStore = createSelectors(
-  create<RouteState>()(
+export const useQuoteStore = createSelectors(
+  create<QuoteState>()(
     subscribeWithSelector((set) => ({
       fromBlockchain: null,
       fromToken: null,
@@ -65,37 +75,38 @@ export const useBestRouteStore = createSelectors(
       outputUsdValue: new BigNumber(0),
       toBlockchain: null,
       toToken: null,
-      bestRoute: null,
-      routeWalletsConfirmed: false,
+      quote: null,
+      quoteWalletsConfirmed: false,
       selectedWallets: [],
       customDestination: '',
-      setRoute: (bestRoute) =>
+      quoteWarningsConfirmed: false,
+      setQuote: (quote) =>
         set((state) => {
           let outputAmount: BigNumber | null = null;
           let outputUsdValue: BigNumber = ZERO;
           if (!isPositiveNumber(state.inputAmount)) {
             return {};
           }
-          if (!!bestRoute) {
-            outputAmount = !!bestRoute.result?.outputAmount
-              ? new BigNumber(bestRoute.result?.outputAmount)
+          if (!!quote) {
+            outputAmount = !!quote.result?.outputAmount
+              ? new BigNumber(quote.result?.outputAmount)
               : null;
             outputUsdValue = calcOutputUsdValue(
-              bestRoute.result?.outputAmount,
-              getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice
+              quote.result?.outputAmount,
+              getQuoteToTokenUsdPrice(quote) || state.toToken?.usdPrice
             );
           }
           return {
-            bestRoute,
-            ...(!!bestRoute && {
+            quote: quote,
+            ...(!!quote && {
               outputAmount,
               outputUsdValue,
             }),
           };
         }),
-      resetRoute: () =>
+      resetQuote: () =>
         set(() => ({
-          bestRoute: null,
+          quote: null,
           outputAmount: null,
           outputUsdValue: new BigNumber(0),
         })),
@@ -108,7 +119,7 @@ export const useBestRouteStore = createSelectors(
           return {
             fromBlockchain: chain,
             ...(state.fromToken && {
-              bestRoute: null,
+              quote: null,
               fromToken: null,
               outputAmount: null,
               outputUsdValue: null,
@@ -116,18 +127,17 @@ export const useBestRouteStore = createSelectors(
           };
         });
       },
-      setFromToken: (token) => {
-        const { blockchains } = useMetaStore.getState().meta;
+      setFromToken: (params) => {
         return set((state) => ({
-          fromToken: token,
-          ...(token && {
+          fromToken: params.token,
+          ...(params.token && {
             fromBlockchain:
-              blockchains.find(
-                (blockchain) => blockchain.name === token.blockchain
+              params.meta.blockchains.find(
+                (blockchain) => blockchain.name === params.token.blockchain
               ) ?? null,
           }),
           ...(!!state.inputAmount && {
-            inputUsdValue: getUsdValue(token, state.inputAmount),
+            inputUsdValue: getUsdValue(params.token, state.inputAmount),
           }),
         }));
       },
@@ -140,7 +150,7 @@ export const useBestRouteStore = createSelectors(
           return {
             toBlockchain: chain,
             ...(state.toToken && {
-              bestRoute: null,
+              quote: null,
               toToken: null,
               outputAmount: null,
               outputUsdValue: null,
@@ -148,14 +158,13 @@ export const useBestRouteStore = createSelectors(
           };
         });
       },
-      setToToken: (token) => {
-        const { blockchains } = useMetaStore.getState().meta;
+      setToToken: (params) => {
         return set(() => ({
-          toToken: token,
-          ...(token && {
+          toToken: params.token,
+          ...(params.token && {
             toBlockchain:
-              blockchains.find(
-                (blockchain) => blockchain.name === token.blockchain
+              params.meta.blockchains.find(
+                (blockchain) => blockchain.name === params.token.blockchain
               ) ?? null,
           }),
         }));
@@ -166,24 +175,22 @@ export const useBestRouteStore = createSelectors(
           ...(!amount && {
             outputAmount: new BigNumber(0),
             outputUsdValue: new BigNumber(0),
-            bestRoute: null,
+            quote: null,
           }),
           ...(!!state.fromToken && {
             inputUsdValue: getUsdValue(state.fromToken, amount),
           }),
         }));
       },
-      retry: (pendingSwap) => {
-        const { tokens, blockchains } = useMetaStore.getState().meta;
-
+      retry: (pendingSwap, meta) => {
+        const { tokens, blockchains } = meta;
         const {
           fromBlockchain,
           fromToken,
           toBlockchain,
           toToken,
           inputAmount,
-        } = createRetryRoute(pendingSwap, blockchains, tokens);
-
+        } = createRetryQuote(pendingSwap, blockchains, tokens);
         set({
           fromBlockchain,
           fromToken,
@@ -193,7 +200,7 @@ export const useBestRouteStore = createSelectors(
           outputUsdValue: new BigNumber(0),
           toBlockchain,
           toToken,
-          bestRoute: null,
+          quote: null,
         });
       },
       switchFromAndTo: () =>
@@ -208,14 +215,13 @@ export const useBestRouteStore = createSelectors(
             state.outputAmount?.toString() || ''
           ),
         })),
-
       resetFromBlockchain: () =>
         set(() => ({
           fromToken: null,
           fromBlockchain: null,
           outputAmount: null,
           outputUsdValue: null,
-          bestRoute: null,
+          quote: null,
         })),
       resetToBlockchain: () =>
         set(() => ({
@@ -223,20 +229,22 @@ export const useBestRouteStore = createSelectors(
           toBlockchain: null,
           outputAmount: null,
           outputUsdValue: null,
-          bestRoute: null,
+          quote: null,
         })),
-      setRouteWalletConfirmed: (flag) =>
+      setQuoteWalletConfirmed: (flag) =>
         set({
-          routeWalletsConfirmed: flag,
+          quoteWalletsConfirmed: flag,
         }),
       setSelectedWallets: (wallets) => set({ selectedWallets: wallets }),
       setCustomDestination: (address) => set({ customDestination: address }),
-      resetRouteWallets: () =>
+      resetQuoteWallets: () =>
         set({
-          routeWalletsConfirmed: false,
+          quoteWalletsConfirmed: false,
           selectedWallets: [],
           customDestination: '',
         }),
+      setQuoteWarningsConfirmed: (flag) =>
+        set({ quoteWarningsConfirmed: flag }),
     }))
   )
 );

package/src/store/settings.ts

@@ -1,3 +1,5 @@
+import type { SwapperMeta } from 'rango-sdk';
+
 import { type Language } from '@rango-dev/ui';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
@@ -7,7 +9,6 @@ import { DEFAULT_LANGUAGE } from '../constants/languages';
 import { DEFAULT_SLIPPAGE } from '../constants/swapSettings';
 import { removeDuplicateFrom } from '../utils/common';
 
-import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
 export type ThemeMode = 'auto' | 'dark' | 'light';
@@ -31,7 +32,10 @@ export interface SettingsState {
   toggleLiquiditySource: (name: string) => void;
   setTheme: (theme: ThemeMode) => void;
   setLanguage: (language: Language) => void;
-  toggleAllLiquiditySources: (shouldReset?: boolean) => void;
+  toggleAllLiquiditySources: (
+    swappers: SwapperMeta[],
+    shouldReset?: boolean
+  ) => void;
   setAffiliateRef: (affiliateRef: string | null) => void;
   setAffiliatePercent: (affiliatePercent: number | null) => void;
   setAffiliateWallets: (
@@ -102,12 +106,11 @@ export const useSettingsStore = createSelectors(
           set(() => ({
             affiliateWallets,
           })),
-        toggleAllLiquiditySources: (shouldReset?: boolean) =>
+        toggleAllLiquiditySources: (swappers, shouldReset) =>
           set((state) => {
             if (shouldReset) {
               return { disabledLiquiditySources: [] };
             }
-            const { swappers } = useMetaStore.getState().meta;
             const swappersGroup = removeDuplicateFrom(
               swappers.map((swapper) => swapper.swapperGroup)
             );