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

package/src/components/BlockchainList/BlockchainList.tsx

@@ -11,7 +11,7 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 
 import { filterBlockchains } from './BlockchainList.helpers';
 import { Container, List } from './BlockchainList.styles';
@@ -20,7 +20,7 @@ import { LoadingBlockchainList } from './LoadingBlockchainList';
 export function BlockchainList(props: PropTypes) {
   const { list, searchedFor, onChange, blockchainCategory } = props;
   const [blockchains, setBlockchains] = useState<BlockchainMeta[]>(list);
-  const loadingStatus = useMetaStore.use.loadingStatus();
+  const { fetchStatus } = useAppStore();
 
   useEffect(() => {
     setBlockchains([
@@ -66,8 +66,8 @@ export function BlockchainList(props: PropTypes) {
         {i18n.t('Select Blockchain')}
       </Typography>
       <Divider size={4} />
-      {loadingStatus === 'loading' && <LoadingBlockchainList />}
-      {loadingStatus === 'success' && renderList()}
+      {fetchStatus === 'loading' && <LoadingBlockchainList />}
+      {fetchStatus === 'success' && renderList()}
     </Container>
   );
 }

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -13,8 +13,8 @@ import React from 'react';
 
 import { BLOCKCHAIN_LIST_SIZE } from '../../constants/configs';
 import { usePrepareBlockchainList } from '../../hooks/usePrepareBlockchainList';
-import { useBestRouteStore } from '../../store/bestRoute';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
 
 import { Container } from './BlockchainsSection.styles';
 
@@ -27,9 +27,9 @@ export function BlockchainsSection(props: PropTypes) {
     selected: blockchain?.name,
   });
 
-  const loadingStatus = useMetaStore.use.loadingStatus();
-  const resetToBlockchain = useBestRouteStore.use.resetToBlockchain();
-  const resetFromBlockchain = useBestRouteStore.use.resetFromBlockchain();
+  const { fetchStatus } = useAppStore();
+  const resetToBlockchain = useQuoteStore.use.resetToBlockchain();
+  const resetFromBlockchain = useQuoteStore.use.resetFromBlockchain();
   const hasMoreItemsInList = blockchainsList.more.length > 0;
   /**
    * When only one item is left on list, we will not show the `More` button and will show the item itself instead.
@@ -45,11 +45,11 @@ export function BlockchainsSection(props: PropTypes) {
       </Typography>
       <Divider size={12} />
       <Container>
-        {loadingStatus === 'loading' &&
+        {fetchStatus === 'loading' &&
           Array.from(Array(NUMBER_OF_LOADING), (e) => (
             <Skeleton key={e} variant="rounded" height={50} />
           ))}
-        {loadingStatus === 'success' && (
+        {fetchStatus === 'success' && (
           <>
             <BlockchainsChip
               selected={!blockchain}

package/src/components/ConfirmWalletsModal/ConfirmWallets.helpers.ts

@@ -1,71 +1,9 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { Step } from '@rango-dev/ui/dist/widget/ui/src/components/BestRoute/BestRoute.types';
 import type { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
 
-import {
-  TOKEN_AMOUNT_MAX_DECIMALS,
-  TOKEN_AMOUNT_MIN_DECIMALS,
-  USD_VALUE_MAX_DECIMALS,
-  USD_VALUE_MIN_DECIMALS,
-} from '../../constants/routing';
-import { getBlockchainShortNameFor } from '../../utils/meta';
-import { numberToString } from '../../utils/numbers';
-
-export function formatBestRoute(
-  bestRoute: BestRouteResponse,
-  blockchains: BlockchainMeta[]
-): Step[] | undefined {
-  return bestRoute.result?.swaps.map((swap) => {
-    return {
-      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: numberToString(
-            swap.fromAmount,
-            TOKEN_AMOUNT_MIN_DECIMALS,
-            TOKEN_AMOUNT_MAX_DECIMALS
-          ),
-          usdValue: numberToString(
-            swap.from.usdPrice?.toString(),
-            USD_VALUE_MIN_DECIMALS,
-            USD_VALUE_MAX_DECIMALS
-          ),
-        },
-      },
-      to: {
-        token: { displayName: swap.to.symbol, image: swap.to.logo },
-        chain: {
-          displayName:
-            getBlockchainShortNameFor(swap.to.blockchain, blockchains) ?? '',
-          image: swap.to.blockchainLogo,
-        },
-        price: {
-          value: numberToString(
-            swap.toAmount,
-            TOKEN_AMOUNT_MIN_DECIMALS,
-            TOKEN_AMOUNT_MAX_DECIMALS
-          ),
-          usdValue: numberToString(
-            swap.to.usdPrice?.toString(),
-            USD_VALUE_MIN_DECIMALS,
-            USD_VALUE_MAX_DECIMALS
-          ),
-        },
-      },
-    };
-  });
-}
-
-export function getRequiredWallets(route: BestRouteResponse | null): string[] {
+export function getRequiredWallets(quote: BestRouteResponse | null): string[] {
   const wallets: string[] = [];
 
-  route?.result?.swaps.forEach((swap) => {
+  quote?.result?.swaps.forEach((swap) => {
     const currentStepFromBlockchain = swap.from.blockchain;
     const currentStepToBlockchain = swap.to.blockchain;
     let lastAddedWallet = wallets[wallets.length - 1];

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -18,12 +18,12 @@ import {
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { getConfirmSwapErrorMessage } from '../../constants/errors';
-import { navigationRoutes } from '../../constants/navigationRoutes';
-import { getRouteWarningMessage } from '../../constants/warnings';
-import { useBestRouteStore } from '../../store/bestRoute';
-import { useMetaStore } from '../../store/meta';
+import { getQuoteErrorMessage } from '../../constants/errors';
+import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
+import { getBlockchainShortNameFor } from '../../utils/meta';
 import { confirmSwapDisabled } from '../../utils/swap';
 
 import { getRequiredWallets, isValidAddress } from './ConfirmWallets.helpers';
@@ -50,23 +50,24 @@ const NUMBER_OF_WALLETS_TO_DISPLAY = 2;
 
 export function ConfirmWalletsModal(props: PropTypes) {
   //TODO: move component's logics to a custom hook
-  const { open, onClose, onCancel, onCheckBalance, config, loading } = props;
-  const { blockchains } = useMetaStore.use.meta();
+  const { open, onClose, onCancel, onCheckBalance, loading } = props;
+  const config = useAppStore().config;
+  const blockchains = useAppStore().blockchains();
   const {
-    bestRoute,
-    setSelectedWallets: selectRouteWallets,
-    routeWalletsConfirmed,
-    setRouteWalletConfirmed,
+    quote,
+    setSelectedWallets: selectQuoteWallets,
+    quoteWalletsConfirmed: quoteWalletsConfirmed,
+    setQuoteWalletConfirmed: setQuoteWalletConfirmed,
     customDestination,
     setCustomDestination,
-  } = useBestRouteStore();
+  } = useQuoteStore();
   const { connectedWallets, selectWallets } = useWalletsStore();
 
   const [showMoreWalletFor, setShowMoreWalletFor] = useState('');
   const [balanceWarnings, setBalanceWarnings] = useState<string[]>([]);
   const [error, setError] = useState('');
-  const [routeWarning, setRouteWarning] = useState<
-    ConfirmSwapWarnings['route'] | null
+  const [quoteWarning, setQuoteWarning] = useState<
+    ConfirmSwapWarnings['quoteUpdate'] | null
   >(null);
   const [destination, setDestination] = useState(customDestination);
   const [showCustomDestination, setShowCustomDestination] = useState(
@@ -74,22 +75,15 @@ export function ConfirmWalletsModal(props: PropTypes) {
   );
   const customDestinationRef = useRef<HTMLDivElement | null>(null);
 
-  const requiredWallets = getRequiredWallets(bestRoute);
-  const customDestinationEnabled =
-    typeof config?.customDestination === 'undefined'
-      ? true
-      : config.customDestination;
+  const requiredWallets = getRequiredWallets(quote);
 
   const lastStepToBlockchain = blockchains.find(
     (blockchain) =>
       blockchain.name ===
-      bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to
-        .blockchain
+      quote?.result?.swaps[quote?.result?.swaps.length - 1].to.blockchain
   );
   const isWalletRequiredFor = (blockchain: string) =>
-    !!bestRoute?.result?.swaps.find(
-      (swap) => swap.from.blockchain === blockchain
-    );
+    !!quote?.result?.swaps.find((swap) => swap.from.blockchain === blockchain);
 
   const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
     connectedWallets.filter((connectedWallet) => {
@@ -175,16 +169,16 @@ export function ConfirmWalletsModal(props: PropTypes) {
       (wallet) => wallet.selected
     );
     selectWallets(lastSelectedWallets);
-    selectRouteWallets(lastSelectedWallets);
+    selectQuoteWallets(lastSelectedWallets);
     setCustomDestination(destination);
-    setRouteWalletConfirmed(true);
+    setQuoteWalletConfirmed(true);
     onClose();
   };
 
   const onConfirmWallets = async () => {
     setBalanceWarnings([]);
     setError('');
-    setRouteWarning(null);
+    setQuoteWarning(null);
     const selectedWallets = connectedWallets.filter((connectedWallet) =>
       selectableWallets.find(
         (selectableWallet) =>
@@ -201,11 +195,11 @@ export function ConfirmWalletsModal(props: PropTypes) {
     if (warnings?.balance?.messages) {
       setBalanceWarnings(warnings.balance.messages);
     }
-    if (warnings?.route) {
-      setRouteWarning(warnings.route);
+    if (warnings?.quoteUpdate) {
+      setQuoteWarning(warnings.quoteUpdate);
     }
     if (result.error) {
-      setError(getConfirmSwapErrorMessage(result.error));
+      setError(getQuoteErrorMessage(result.error));
     }
 
     if (!result.error && (!warnings?.balance?.messages.length || 0 > 0)) {
@@ -249,8 +243,9 @@ export function ConfirmWalletsModal(props: PropTypes) {
     <Modal
       open={open}
       onClose={() => {
-        if (!routeWalletsConfirmed) {
-          navigate(navigationRoutes.home, { replace: true });
+        if (!quoteWalletsConfirmed) {
+          const home = '../';
+          navigate(home, { replace: true });
         }
         onClose();
       }}
@@ -265,7 +260,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                 loading,
                 showCustomDestination,
                 destination,
-                bestRoute,
+                quote,
                 selectableWallets,
                 lastStepToBlockchain
               )}
@@ -291,7 +286,12 @@ export function ConfirmWalletsModal(props: PropTypes) {
             <Typography variant="headline" size="small">
               {i18n.t({
                 id: 'Your {blockchainName} wallets',
-                values: { blockchainName: showMoreWalletFor },
+                values: {
+                  blockchainName: getBlockchainShortNameFor(
+                    showMoreWalletFor,
+                    blockchains
+                  ),
+                },
               })}
             </Typography>
           </ShowMoreHeader>
@@ -323,9 +323,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
               chain={showMoreWalletFor}
               isSelected={isSelected}
               selectWallet={onChange}
-              multiWallets={config?.multiWallets ?? true}
-              supportedWallets={config?.wallets ?? []}
-              config={config}
               onShowMore={setShowMoreWalletFor.bind(null, showMoreWalletFor)}
             />
           </div>
@@ -339,12 +336,12 @@ export function ConfirmWalletsModal(props: PropTypes) {
               <Divider size={12} />
             </>
           )}
-          {routeWarning && (
+          {quoteWarning && (
             <>
               <Alert
                 variant="alarm"
                 type="warning"
-                title={getRouteWarningMessage(routeWarning)}
+                title={getQuoteUpdateWarningMessage(quoteWarning)}
               />
               <Divider size={12} />
             </>
@@ -364,7 +361,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                     <Typography variant="title" size="xmedium">
                       {i18n.t({
                         id: 'Your {blockchainName} wallets',
-                        values: { blockchainName: blockchain?.displayName },
+                        values: { blockchainName: blockchain?.shortName },
                       })}
                     </Typography>
                     <Typography
@@ -373,7 +370,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                       size="medium">
                       {i18n.t({
                         id: 'You need to connect a {blockchainName} wallet.',
-                        values: { blockchainName: blockchain?.displayName },
+                        values: { blockchainName: blockchain?.shortName },
                       })}
                     </Typography>
                   </Title>
@@ -383,9 +380,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
                       chain={requiredWallet}
                       isSelected={isSelected}
                       selectWallet={onChange}
-                      multiWallets={config?.multiWallets ?? true}
-                      supportedWallets={config?.wallets ?? []}
-                      config={config}
                       limit={NUMBER_OF_WALLETS_TO_DISPLAY}
                       onShowMore={() =>
                         setShowMoreWalletFor(blockchain?.name ?? '')
@@ -393,7 +387,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                     />
                   </ListContainer>
                   {!isLastWallet && <Divider size={32} />}
-                  {isLastWallet && customDestinationEnabled && (
+                  {isLastWallet && config?.customDestination && (
                     <CustomDestination>
                       <CollapsibleRoot
                         ref={customDestinationRef}

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.types.ts

@@ -1,11 +1,9 @@
-import type { WidgetConfig } from '../..';
-import type { ConfirmSwap } from '../../hooks/useConfirmSwap';
+import type { ConfirmSwap } from '../../hooks/useConfirmSwap/useConfirmSwap.types';
 
 export type PropTypes = {
   open: boolean;
   onClose: () => void;
   onCancel: () => void;
   onCheckBalance: ConfirmSwap['fetch'];
-  config?: WidgetConfig;
   loading: boolean;
 };

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -23,7 +23,7 @@ import {
   TIME_TO_CLOSE_MODAL,
   TIME_TO_IGNORE_MODAL,
 } from '../../pages/WalletsPage';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
 import {
@@ -41,10 +41,11 @@ import {
 } from './WalletList.styles';
 
 export function WalletList(props: PropTypes) {
-  const { config, chain, isSelected, selectWallet, limit, onShowMore } = props;
+  const { chain, isSelected, selectWallet, limit, onShowMore } = props;
+  const { config } = useAppStore();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
-  const { blockchains } = useMetaStore.use.meta();
+  const { blockchains } = useAppStore();
   const [openWalletStateModal, setOpenWalletStateModal] =
     useState<WalletType>('');
   const [experimentalChainWallet, setExperimentalChainWallet] =
@@ -137,7 +138,7 @@ export function WalletList(props: PropTypes) {
         });
         const conciseAddress = address ? getConciseAddress(address) : '';
 
-        const experimentalChain = isExperimentalChain(blockchains, chain);
+        const experimentalChain = isExperimentalChain(blockchains(), chain);
 
         const experimentalChainNotAdded = !connectedWallets.find(
           (connectedWallet) =>
@@ -180,7 +181,7 @@ export function WalletList(props: PropTypes) {
           experimentalChainWallet?.chain
             ? getBlockchainDisplayNameFor(
                 experimentalChainWallet.chain,
-                blockchains
+                blockchains()
               )
             : undefined;
         return (

package/src/components/ConfirmWalletsModal/WalletList.type.ts

@@ -1,12 +1,9 @@
-import type { Wallet, WidgetConfig } from '../../types';
+import type { Wallet } from '../../types';
 
 export type PropTypes = {
   chain: string;
-  supportedWallets: WidgetConfig['wallets'];
   isSelected: (walletType: string, chain: string) => boolean;
   selectWallet: (wallet: Wallet) => void;
-  multiWallets: boolean;
-  config?: WidgetConfig;
   limit?: number;
   onShowMore: () => void;
 };

package/src/components/Layout/Layout.tsx

@@ -3,9 +3,8 @@ import type { PropsWithChildren } from 'react';
 
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
@@ -26,22 +25,26 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
 
   const connectWalletsButtonDisabled =
     useUiStore.use.connectWalletsButtonDisabled();
-  const navigate = useNavigate();
+  const navigateBack = useNavigateBack();
 
   const onConnectWallet = () => {
-    if (!connectWalletsButtonDisabled) {
-      navigate('/' + navigationRoutes.wallets);
+    if (!connectWalletsButtonDisabled && header.onWallet) {
+      header.onWallet();
     }
   };
+
+  const showBackButton =
+    typeof header.hasBackButton === 'undefined' || header.hasBackButton;
+
   return (
     <Container ref={ref} fixedHeight={fixedHeight} id="swap-box">
       <Header
-        prefix={<>{header.onBack && <BackButton onClick={header.onBack} />}</>}
+        prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
         title={header.title}
         suffix={
           <>
             {header.suffix}
-            {header.hasConnectWallet && (
+            {header.onWallet && (
               <WalletButton
                 container={getContainer()}
                 onClick={onConnectWallet}

package/src/components/Layout/Layout.types.ts

@@ -1,10 +1,10 @@
 export interface PropTypes {
   header: {
     title: string;
-    hasConnectWallet?: boolean;
+    onWallet?: () => void;
     hasSettings?: boolean;
     suffix?: React.ReactNode;
-    onBack?: () => void;
+    hasBackButton?: boolean;
     onCancel?: () => void;
   };
   hasLogo?: boolean;

package/src/components/LoadingSwapDetails/LoadingSwapDetails.styles.ts

@@ -10,11 +10,11 @@ export const Container = styled('div', {
     display: 'flex',
   },
 
-  '.route-summary': {
+  '.quote-summary': {
     padding: '$15 $0',
   },
 
-  '.route-summary-item': {
+  '.quote-summary-item': {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
@@ -26,7 +26,7 @@ export const Container = styled('div', {
     alignItems: 'center',
   },
 
-  '.route-summary-separator': {
+  '.quote-summary-separator': {
     width: '0px',
     height: '$16',
     borderLeft: '1px solid $neutral400',

package/src/components/LoadingSwapDetails/LoadingSwapDetails.tsx

@@ -6,8 +6,8 @@ import { Container, StepSeparator } from './LoadingSwapDetails.styles';
 import { LoadingSwapDetailStep } from './LoadingSwapDetailStep';
 
 export function LoadingSwapDetails() {
-  const routeSummary = (
-    <div className="route-summary-item">
+  const quoteSummary = (
+    <div className="quote-summary-item">
       <div className="token-amount">
         <ChainToken loading size="medium" chainImage="" tokenImage="" />
         <Divider size={8} direction="horizontal" />
@@ -27,10 +27,10 @@ export function LoadingSwapDetails() {
         <Skeleton width={60} height={10} variant="rounded" />
       </div>
 
-      <div className="route-summary">
-        {routeSummary}
-        <div className="route-summary-separator"></div>
-        {routeSummary}
+      <div className="quote-summary">
+        {quoteSummary}
+        <div className="quote-summary-separator"></div>
+        {quoteSummary}
       </div>
 
       <div className="swaps-steps">

package/src/components/{NoRoutes/NoRoutes.helper.ts → NoResult/NoResult.helpers.ts}

@@ -1,37 +1,32 @@
-import type { Info } from './NoRoutes.types';
+import type { Info } from './NoResult.types';
 
 import { i18n } from '@lingui/core';
 
 import { errorMessages } from '../../constants/errors';
+import {
+  type NoResultError,
+  QuoteErrorType,
+  type QuoteRequestFailed,
+} from '../../types';
 
 export function makeInfo(
-  diagnosisMessage: string | null,
+  error: NoResultError | QuoteRequestFailed | null,
   disabledLiquiditySources: string[],
-  hasError: boolean,
   toggleAllLiquiditySources: (shouldReset: boolean) => void,
-  refetchBestRoute: () => void
+  refetchQuote: () => void
 ): Info {
-  if (hasError) {
+  if (error?.type === QuoteErrorType.REQUEST_FAILED) {
     return {
       alert: {
         type: 'warning',
         text: errorMessages().genericServerError,
         action: {
-          onClick: refetchBestRoute,
+          onClick: refetchQuote,
           title: i18n.t('Retry'),
         },
       },
       description: '',
     };
-  } else if (diagnosisMessage) {
-    return {
-      alert: {
-        type: 'error',
-        text: diagnosisMessage,
-        action: null,
-      },
-      description: '',
-    };
   } else if (disabledLiquiditySources.length) {
     return {
       alert: {
@@ -44,9 +39,21 @@ export function makeInfo(
       },
       description: errorMessages().liquiditySourcesError.description,
     };
+  } else if (
+    error?.type === QuoteErrorType.NO_RESULT &&
+    error.diagnosisMessage
+  ) {
+    return {
+      alert: {
+        type: 'error',
+        text: error.diagnosisMessage,
+        action: null,
+      },
+      description: '',
+    };
   }
   return {
     alert: null,
-    description: errorMessages().noRoutesError.description,
+    description: errorMessages().noResultError.description,
   };
 }

package/src/components/{NoRoutes/NoRoutes.styles.ts → NoResult/NoResult.styles.ts}

@@ -1,9 +1,11 @@
 import { styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
+  minHeight: '162px',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
+  justifyContent: 'center',
 });
 
 export const Footer = styled('div', {

package/src/components/{NoRoutes/NoRoutes.tsx → NoResult/NoResult.tsx}

@@ -1,4 +1,4 @@
-import type { PropTypes } from './NoRoutes.types';
+import type { PropTypes } from './NoResult.types';
 
 import {
   Alert,
@@ -11,27 +11,25 @@ import {
 import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useSettingsStore } from '../../store/settings';
 
-import { makeInfo } from './NoRoutes.helper';
-import { Container, Footer, PrefixIcon } from './NoRoutes.styles';
+import { makeInfo } from './NoResult.helpers';
+import { Container, Footer, PrefixIcon } from './NoResult.styles';
 
-export function NoRoutes(props: PropTypes) {
-  const { diagnosisMessage, fetch, error } = props;
+export function NoResult(props: PropTypes) {
+  const { fetch, error } = props;
   const disabledLiquiditySources =
     useSettingsStore.use.disabledLiquiditySources();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const toggleAllLiquiditySources =
     useSettingsStore.use.toggleAllLiquiditySources();
 
-  const hasError = error || loadingMetaStatus === 'failed';
+  const swappers = useAppStore().swappers();
 
   const info = makeInfo(
-    diagnosisMessage ?? null,
+    error,
     disabledLiquiditySources,
-    hasError,
-    toggleAllLiquiditySources,
+    () => toggleAllLiquiditySources(swappers, true),
     fetch
   );
 
@@ -40,7 +38,7 @@ export function NoRoutes(props: PropTypes) {
       <NoRouteIcon size={24} color="gray" />
       <Divider size={4} />
       <Typography variant="title" size="small">
-        {errorMessages().noRoutesError.title}
+        {errorMessages().noResultError.title}
       </Typography>
       {!!info.description && (
         <Typography