@rango-dev/widget-embedded 0.17.1-next.9 → 0.19.0

package/src/pages/Home.tsx

@@ -1,16 +1,32 @@
+import type { SwapResult } from 'rango-sdk';
+
 import { i18n } from '@lingui/core';
-import { Button, styled, SwapInput, WarningIcon } from '@rango-dev/ui';
+import {
+  Alert,
+  BestRoute,
+  BestRouteSkeleton,
+  Button,
+  Divider,
+  styled,
+  SwapInput,
+  Typography,
+  WarningIcon,
+} from '@rango-dev/ui';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { HomeButtons } from '../components/HeaderButtons';
 import { Layout } from '../components/Layout';
+import { NoRoutes } from '../components/NoRoutes';
+import { RouteErrors } from '../components/RouteErrors';
 import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
 import { errorMessages } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import {
   BALANCE_MAX_DECIMALS,
   BALANCE_MIN_DECIMALS,
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
   PERCENTAGE_CHANGE_MAX_DECIMALS,
   PERCENTAGE_CHANGE_MIN_DECIMALS,
   TOKEN_AMOUNT_MAX_DECIMALS,
@@ -18,22 +34,29 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../constants/routing';
-import { QuoteInfo } from '../containers/QuoteInfo';
 import { useSwapInput } from '../hooks/useSwapInput';
-import { useAppStore } from '../store/AppStore';
-import { useQuoteStore } from '../store/quote';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { ButtonState } from '../types';
-import { numberToString } from '../utils/numbers';
-import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
+import { getContainer } from '../utils/common';
+import { getBlockchainShortNameFor } from '../utils/meta';
+import {
+  numberToString,
+  secondsToString,
+  totalArrivalTime,
+} from '../utils/numbers';
+import { getFormattedBestRoute, getPriceImpactLevel } from '../utils/routing';
 import {
   canComputePriceImpact,
   getOutputRatio,
   getPercentageChange,
   getSwapButtonState,
-  hasHighValueLoss,
+  getTotalFeeInUsd,
   hasLimitError,
+  LimitErrorMessage,
+  outputRatioHasWarning,
 } from '../utils/swap';
 import { getBalanceFromWallet } from '../utils/wallets';
 
@@ -53,13 +76,27 @@ const InputsContainer = styled('div', {
   gap: 5,
   alignSelf: 'stretch',
 });
+
+const BestRouteContainer = styled('div', {
+  width: '100%',
+  paddingTop: '$2',
+});
+
+const FooterStepAlarm = styled('div', {
+  paddingBottom: '$15',
+});
+
+const FooterAlert = styled('div', {
+  width: '100%',
+  display: 'flex',
+});
+
 export function Home() {
   const navigate = useNavigate();
   const {
-    fetch: fetchQuote,
-    loading: fetchingQuote,
-    error: quoteError,
-    warning: quoteWarning,
+    fetch: refetchBestRoute,
+    loading: fetchingBestRoute,
+    error: bestRouteError,
   } = useSwapInput();
   const {
     fromToken,
@@ -71,40 +108,51 @@ export function Home() {
     inputUsdValue,
     outputAmount,
     outputUsdValue,
-    quote,
-    resetQuoteWallets,
-    setQuoteWarningsConfirmed,
-  } = useQuoteStore();
+    bestRoute,
+    resetRouteWallets,
+  } = useBestRouteStore();
 
-  const fetchMetaStatus = useAppStore().fetchStatus;
+  const {
+    meta: { tokens, blockchains },
+    loadingStatus: loadingMetaStatus,
+  } = useMetaStore();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const setCurrentPage = useUiStore.use.setCurrentPage();
-  const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
+  const [openWarningModal, setOpenWarningModal] = useState(false);
+  const {
+    fromAmountRangeError,
+    swap: swapHasError,
+    recommendation,
+  } = LimitErrorMessage(bestRoute);
   const layoutRef = useRef<HTMLDivElement>(null);
 
+  const showBestRoute =
+    !!Number(inputAmount) &&
+    (!!bestRoute || fetchingBestRoute || !!bestRouteError);
+
   const needsToWarnEthOnPath = false;
 
   const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
-  const highValueLoss = hasHighValueLoss(inputUsdValue, outToInRatio);
+  const highValueLoss = outputRatioHasWarning(inputUsdValue, outToInRatio);
 
   const priceImpactInputCanNotBeComputed = !canComputePriceImpact(
-    quote,
+    bestRoute,
     inputAmount,
     inputUsdValue
   );
 
   const priceImpactOutputCanNotBeComputed = !canComputePriceImpact(
-    quote,
+    bestRoute,
     inputAmount,
     outputUsdValue
   );
   const swapButtonState = getSwapButtonState(
-    fetchMetaStatus,
+    loadingMetaStatus,
     connectedWallets,
-    fetchingQuote,
-    quote,
-    hasLimitError(quote),
+    fetchingBestRoute,
+    bestRoute,
+    hasLimitError(bestRoute),
     highValueLoss,
     priceImpactInputCanNotBeComputed || priceImpactOutputCanNotBeComputed,
     needsToWarnEthOnPath,
@@ -145,7 +193,7 @@ export function Home() {
 
   useEffect(() => {
     setCurrentPage(navigationRoutes.home);
-    resetQuoteWallets();
+    resetRouteWallets();
     return setCurrentPage.bind(null, '');
   }, []);
 
@@ -153,9 +201,83 @@ export function Home() {
     !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
       ? null
       : getPercentageChange(
-          inputUsdValue.toString(),
-          outputUsdValue.toString()
+          inputUsdValue.toNumber(),
+          outputUsdValue.toNumber()
         );
+
+  const getBestRouteSteps = (swaps: SwapResult[]) => {
+    return swaps.map((swap, index) => ({
+      swapper: { displayName: swap.swapperId, image: swap.swapperLogo },
+      from: {
+        token: { displayName: swap.from.symbol, image: swap.from.logo },
+        chain: {
+          displayName:
+            getBlockchainShortNameFor(swap.from.blockchain, blockchains) ?? '',
+          image: swap.from.blockchainLogo,
+        },
+        price: {
+          value:
+            index === 0
+              ? numberToString(
+                  inputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
+                )
+              : swap.fromAmount,
+        },
+      },
+      to: {
+        token: { displayName: swap.to.symbol, image: swap.to.logo },
+        chain: {
+          displayName:
+            getBlockchainShortNameFor(swap.to.blockchain, blockchains) ?? '',
+          image: swap.to.blockchainLogo,
+        },
+        price: {
+          value: swap.toAmount,
+        },
+      },
+      alerts:
+        swap.swapperId === swapHasError?.swapperId ? (
+          <FooterStepAlarm>
+            <Alert
+              type="error"
+              title={recommendation}
+              footer={
+                <FooterAlert>
+                  <Typography size="xsmall" variant="body" color="neutral700">
+                    {fromAmountRangeError}
+                  </Typography>
+                  <Divider direction="horizontal" size={8} />
+                  <Typography size="xsmall" variant="body" color="neutral700">
+                    |
+                  </Typography>
+                  <Divider direction="horizontal" size={8} />
+                  <Typography size="xsmall" variant="body" color="neutral700">
+                    {i18n.t({
+                      id: 'Yours: {amount} {symbol}',
+                      values: {
+                        amount: numberToString(
+                          swapHasError?.fromAmount || null,
+                          TOKEN_AMOUNT_MIN_DECIMALS,
+                          TOKEN_AMOUNT_MAX_DECIMALS
+                        ),
+                        symbol: swap?.from.symbol,
+                      },
+                    })}
+                  </Typography>
+                </FooterAlert>
+              }
+            />
+          </FooterStepAlarm>
+        ) : undefined,
+    }));
+  };
+
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+
+  const bestRouteData = getFormattedBestRoute(bestRoute);
+
   return (
     <Layout
       ref={layoutRef}
@@ -174,8 +296,8 @@ export function Home() {
           onClick={() => {
             if (swapButtonState.state === ButtonState.WAITFORCONNECTING) {
               navigate(navigationRoutes.wallets);
-            } else if (quoteWarning) {
-              setShowQuoteWarningModal(true);
+            } else if (swapButtonState.state === ButtonState.NEEDTOCONFIRM) {
+              setOpenWarningModal(true);
             } else {
               navigate(navigationRoutes.confirmSwap);
             }
@@ -189,7 +311,9 @@ export function Home() {
         suffix: (
           <HomeButtons
             layoutRef={layoutRef.current}
-            onClickRefresh={!!quote || quoteError ? fetchQuote : undefined}
+            onClickRefresh={
+              !!bestRoute || bestRouteError ? refetchBestRoute : undefined
+            }
             onClickHistory={() => navigate(navigationRoutes.swaps)}
             onClickSettings={() => navigate(navigationRoutes.settings)}
           />
@@ -200,8 +324,6 @@ export function Home() {
           <FromContainer>
             <SwapInput
               label={i18n.t('From')}
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-ignore
               mode="From"
               onInputChange={setInputAmount}
               balance={tokenBalance}
@@ -227,8 +349,8 @@ export function Home() {
                   ? errorMessages().unknownPriceError.impactTitle
                   : undefined,
               }}
-              disabled={fetchMetaStatus === 'failed'}
-              loading={fetchMetaStatus === 'loading'}
+              disabled={loadingMetaStatus === 'failed'}
+              loading={loadingMetaStatus === 'loading'}
               onSelectMaxBalance={() => {
                 if (tokenBalance !== '0') {
                   setInputAmount(tokenBalanceReal.split(',').join(''));
@@ -238,7 +360,7 @@ export function Home() {
             <SwitchFromAndToButton />
           </FromContainer>
           <SwapInput
-            sharpBottomStyle={!!quote?.result || fetchingQuote}
+            sharpBottomStyle={!!bestRoute?.result || fetchingBestRoute}
             label={i18n.t('To')}
             mode="To"
             chain={{
@@ -249,12 +371,18 @@ export function Home() {
               displayName: toToken?.symbol || '',
               image: toToken?.image || '',
             }}
-            percentageChange={numberToString(
-              getPriceImpact(inputUsdValue, outputUsdValue),
-              PERCENTAGE_CHANGE_MIN_DECIMALS,
-              PERCENTAGE_CHANGE_MAX_DECIMALS
+            percentageChange={
+              !!percentageChange?.lt(0)
+                ? numberToString(
+                    percentageChange,
+                    PERCENTAGE_CHANGE_MIN_DECIMALS,
+                    PERCENTAGE_CHANGE_MAX_DECIMALS
+                  )
+                : null
+            }
+            warningLevel={getPriceImpactLevel(
+              percentageChange?.toNumber() ?? 0
             )}
-            warningLevel={getPriceImpactLevel(percentageChange ?? 0)}
             price={{
               value: numberToString(
                 outputAmount,
@@ -273,27 +401,88 @@ export function Home() {
                 : undefined,
             }}
             onClickToken={() => navigate('to-swap')}
-            disabled={fetchMetaStatus === 'failed'}
-            loading={fetchMetaStatus === 'loading'}
+            disabled={loadingMetaStatus === 'failed'}
+            loading={loadingMetaStatus === 'loading'}
           />
         </InputsContainer>
-        <QuoteInfo
-          quote={quote}
-          loading={fetchingQuote}
-          error={quoteError}
-          warning={quoteWarning}
-          type="basic"
-          refetchQuote={fetchQuote}
-          showWarningModal={showQuoteWarningModal}
-          onOpenWarningModal={() => setShowQuoteWarningModal(true)}
-          onCloseWarningModal={() => setShowQuoteWarningModal(false)}
-          onConfirmWarningModal={() => {
-            setShowQuoteWarningModal(false);
-            setQuoteWarningsConfirmed(true);
-            navigate(navigationRoutes.confirmSwap);
-          }}
-        />
+        {fetchingBestRoute && (
+          <BestRouteContainer>
+            <BestRouteSkeleton type="basic" />
+          </BestRouteContainer>
+        )}
+        {showBestRoute &&
+        !fetchingBestRoute &&
+        bestRouteData?.result?.swaps?.length ? (
+          <BestRouteContainer>
+            <BestRoute
+              type="basic"
+              recommended={true}
+              tooltipContainer={getContainer()}
+              input={{
+                value: numberToString(
+                  inputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
+                ),
+                usdValue: numberToString(
+                  inputUsdValue,
+                  USD_VALUE_MIN_DECIMALS,
+                  USD_VALUE_MAX_DECIMALS
+                ),
+              }}
+              output={{
+                value: numberToString(
+                  outputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
+                ),
+                usdValue: numberToString(
+                  outputUsdValue,
+                  USD_VALUE_MIN_DECIMALS,
+                  USD_VALUE_MAX_DECIMALS
+                ),
+              }}
+              steps={getBestRouteSteps(bestRouteData.result.swaps)}
+              percentageChange={numberToString(
+                percentageChange,
+                PERCENTAGE_CHANGE_MIN_DECIMALS,
+                PERCENTAGE_CHANGE_MAX_DECIMALS
+              )}
+              totalFee={numberToString(
+                totalFeeInUsd,
+                GAS_FEE_MIN_DECIMALS,
+                GAS_FEE_MAX_DECIMALS
+              )}
+              totalTime={secondsToString(
+                totalArrivalTime(bestRoute?.result?.swaps)
+              )}
+            />
+          </BestRouteContainer>
+        ) : showBestRoute && !fetchingBestRoute ? (
+          <>
+            <Divider size={20} />
+            <NoRoutes
+              diagnosisMessage={bestRouteData?.diagnosisMessages?.[0]}
+              fetch={refetchBestRoute}
+              error={!!bestRouteError}
+            />
+          </>
+        ) : null}
       </Container>
+      <RouteErrors
+        openModal={openWarningModal}
+        onToggle={setOpenWarningModal}
+        totalFeeInUsd={totalFeeInUsd}
+        outputUsdValue={outputUsdValue}
+        inputUsdValue={inputUsdValue}
+        percentageChange={percentageChange}
+        highValueLoss={highValueLoss}
+        priceImpactCanNotBeComputed={
+          priceImpactInputCanNotBeComputed || priceImpactOutputCanNotBeComputed
+        }
+        loading={fetchingBestRoute || loadingMetaStatus === 'loading'}
+        extraSpace={!!bestRoute?.result || !bestRoute}
+      />
     </Layout>
   );
 }

package/src/pages/LanguagePage.tsx

@@ -38,7 +38,7 @@ export function LanguagePage() {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.settings),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
         title: i18n.t('Language'),
       }}>
       <SettingsContainer>

package/src/pages/LiquiditySourcePage.tsx

@@ -25,23 +25,30 @@ import {
 } from '../components/SettingsContainer';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useAppStore } from '../store/AppStore';
+import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
 import { containsText } from '../utils/numbers';
-import { getUniqueSwappersGroups } from '../utils/settings';
+import {
+  getUniqueSwappersGroups,
+  sortLiquiditySourcesByGroupTitle,
+} from '../utils/settings';
 
 interface PropTypes {
+  supportedSwappers?: string[];
   sourceType: 'Exchanges' | 'Bridges';
 }
 
-export function LiquiditySourcePage({ sourceType }: PropTypes) {
-  const fetchStatus = useAppStore().fetchStatus;
-  const swappers = useAppStore().swappers();
+export function LiquiditySourcePage({
+  supportedSwappers,
+  sourceType,
+}: PropTypes) {
   const [searchedFor, setSearchedFor] = useState<string>('');
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
   const { navigateBackFrom } = useNavigateBack();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
-    getUniqueSwappersGroups(swappers);
+    getUniqueSwappersGroups(supportedSwappers);
 
   const validTypes: Array<LiquiditySourceType> = [];
   if (sourceType === 'Exchanges') {
@@ -72,20 +79,22 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
     });
   };
 
-  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 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 searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
@@ -102,7 +111,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.settings),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
         title: i18n.t(sourceType),
         suffix: (
           <LiquiditySourceSuffix>
@@ -122,7 +131,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           placeholder={i18n.t('Search {sourceType}', { sourceType })}
           onChange={searchHandler}
         />
-        {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}
+        {loadingMetaStatus === 'loading' && <LoadingLiquiditySourceList />}
 
         {!filteredList.length && !!searchedFor ? (
           <NotFoundContainer>
@@ -132,7 +141,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
             />
           </NotFoundContainer>
         ) : (
-          fetchStatus === 'success' && (
+          loadingMetaStatus === 'success' && (
             <LiquiditySourceList>
               {filteredList.map((sourceItem) => {
                 return (

package/src/pages/SelectBlockchainPage.tsx

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

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/AppStore';
-import { useQuoteStore } from '../store/quote';
+import { useAppStore } from '../store/app';
+import { useBestRouteStore } from '../store/bestRoute';
 import { useWalletsStore } from '../store/wallets';
 import { getTokensBalanceFromWalletAndSort } from '../utils/wallets';
 
@@ -31,7 +31,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
     setToToken,
     setFromBlockchain,
     setToBlockchain,
-  } = useQuoteStore();
+  } = useBestRouteStore();
   const { connectedWallets } = useWalletsStore();
   const [searchedFor, setSearchedFor] = useState<string>('');
 
@@ -63,9 +63,9 @@ export function SelectSwapItemsPage(props: PropTypes) {
 
   const updateToken = (token: Token) => {
     if (type === 'source') {
-      setFromToken({ token, meta: { blockchains, tokens } });
+      setFromToken(token);
     } else {
-      setToToken({ token, meta: { blockchains, tokens } });
+      setToToken(token);
     }
   };
 

package/src/pages/SettingsPage.tsx

@@ -19,22 +19,26 @@ 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 { useAppStore } from '../store/AppStore';
+import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
 import { getContainer } from '../utils/common';
 import { getUniqueSwappersGroups } from '../utils/settings';
 
-export function SettingsPage() {
+interface PropTypes {
+  supportedSwappers?: string[];
+  singleTheme?: boolean;
+}
+
+export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
   const navigate = useNavigate();
-  const { theme } = useAppStore().config;
-  const fetchStatus = useAppStore().fetchStatus;
-  const swappers = useAppStore().swappers();
   const { navigateBackFrom } = useNavigateBack();
 
   const infiniteApprove = useSettingsStore.use.infiniteApprove();
   const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
 
-  const supportedUniqueSwappersGroups = getUniqueSwappersGroups(swappers);
+  const supportedUniqueSwappersGroups =
+    getUniqueSwappersGroups(supportedSwappers);
 
   const bridgeSources = supportedUniqueSwappersGroups.filter(
     (uniqueItem) =>
@@ -54,7 +58,7 @@ export function SettingsPage() {
   ).length;
 
   const handleEndItem = (totalSelected: number, total: number) => {
-    switch (fetchStatus) {
+    switch (loadingMetaStatus) {
       case 'loading':
         return <Skeleton variant="text" size="medium" width={50} />;
       case 'failed':
@@ -163,7 +167,7 @@ export function SettingsPage() {
     exchangeItem,
     // languageItem
   ];
-  if (!theme?.singleTheme) {
+  if (!singleTheme) {
     settingItems.push(themeItem);
   }
   settingItems.push(infiniteApprovalItem);
@@ -171,7 +175,7 @@ export function SettingsPage() {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.settings),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
         title: i18n.t('Setting'),
       }}>
       <SettingsContainer>