@rango-dev/widget-embedded 0.47.1-next.4 → 0.48.1-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.47.1-next.4",
+  "version": "0.48.1-next.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.11.0",
-    "@rango-dev/provider-all": "^0.50.1-next.2",
+    "@rango-dev/provider-all": "^0.51.0",
     "@rango-dev/queue-manager-core": "^0.32.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.49.1-next.2",
+    "@rango-dev/queue-manager-rango-preset": "^0.50.1-next.0",
     "@rango-dev/queue-manager-react": "^0.32.0",
-    "@rango-dev/signer-solana": "^0.43.1-next.0",
-    "@rango-dev/ui": "^0.50.1-next.3",
-    "@rango-dev/wallets-core": "^0.47.1-next.1",
-    "@rango-dev/wallets-react": "^0.34.1-next.2",
-    "@rango-dev/wallets-shared": "^0.48.1-next.2",
+    "@rango-dev/signer-solana": "^0.44.0",
+    "@rango-dev/ui": "^0.51.1-next.0",
+    "@rango-dev/wallets-core": "^0.48.0",
+    "@rango-dev/wallets-react": "^0.35.0",
+    "@rango-dev/wallets-shared": "^0.49.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -37,8 +37,8 @@ export function BlockchainsSection(props: PropTypes) {
   });
 
   const { fetchStatus } = useAppStore();
-  const resetToBlockchain = useQuoteStore.use.resetToBlockchain();
-  const resetFromBlockchain = useQuoteStore.use.resetFromBlockchain();
+  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.

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -51,7 +51,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
     setQuoteWalletConfirmed: setQuoteWalletConfirmed,
     customDestination,
     setCustomDestination,
-  } = useQuoteStore();
+  } = useQuoteStore()();
   const { config, connectedWallets, setWalletsAsSelected } = useAppStore();
 
   const [showMoreWalletFor, setShowMoreWalletFor] = useState('');

package/src/components/CustomDestination/CustomDestination.tsx

@@ -32,7 +32,7 @@ import {
 export function CustomDestination(props: PropTypes) {
   const { blockchain, handleOpenChange, open } = props;
 
-  const { customDestination, setCustomDestination } = useQuoteStore();
+  const { customDestination, setCustomDestination } = useQuoteStore()();
   const { config } = useAppStore();
   const blockchains = useAppStore().blockchains();
   const blockchainName = getBlockchainDisplayNameFor(

package/src/components/Quotes/Quotes.tsx

@@ -37,7 +37,7 @@ export function Quotes(props: PropTypes) {
     toToken,
     sortStrategy,
     error,
-  } = useQuoteStore();
+  } = useQuoteStore()();
   const { slippage, customSlippage } = useAppStore();
   const { findToken } = useAppStore();
   const container = propContainer || getContainer();

package/src/components/Quotes/SelectStrategy.tsx

@@ -9,7 +9,7 @@ import { useQuoteStore } from '../../store/quote';
 import { SelectContainer } from './Quotes.styles';
 
 export function SelectStrategy(props: { container: HTMLElement }) {
-  const { updateQuotePartialState, sortStrategy } = useQuoteStore();
+  const { updateQuotePartialState, sortStrategy } = useQuoteStore()();
 
   const ROUTE_STRATEGY: { value: PreferenceType; label: string }[] = [
     {

package/src/components/SameTokensWarning/SameTokensWarning.tsx

@@ -8,7 +8,7 @@ import { areTokensEqual } from '../../utils/wallets';
 import { Container } from './SameTokensWarning.styles';
 
 export function SameTokensWarning() {
-  const { fromToken, toToken } = useQuoteStore();
+  const { fromToken, toToken } = useQuoteStore()();
   const showWarningMessage =
     !!fromToken && !!toToken && areTokensEqual(fromToken, toToken);
 

package/src/components/SwapDetails/SwapDetails.tsx

@@ -80,7 +80,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const blockchains = useAppStore().blockchains();
   const swappers = useAppStore().swappers();
   const { findToken } = useAppStore();
-  const retry = useQuoteStore.use.retry();
+  const retry = useQuoteStore().use.retry();
   const navigate = useNavigate();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);

package/src/components/SwitchFromAndTo/SwitchFromAndTo.tsx

@@ -10,7 +10,7 @@ import {
 } from './SwitchFromAndTo.styles';
 
 export function SwitchFromAndToButton() {
-  const switchFromAndTo = useQuoteStore.use.switchFromAndTo();
+  const switchFromAndTo = useQuoteStore().use.switchFromAndTo();
 
   return (
     <SwitchButtonContainer>

package/src/components/TokenList/TokenList.tsx

@@ -115,7 +115,7 @@ export function TokenList(props: PropTypes) {
   const blockchains = useAppStore().blockchains();
   const { getBalanceFor, fetchingWallets: loadingWallet } = useAppStore();
   const { isTokenPinned } = useAppStore();
-  const { setFromToken, setToToken } = useQuoteStore();
+  const { setFromToken, setToToken } = useQuoteStore()();
   const { t } = useTranslation();
   const navigateBack = useNavigateBack();
 

package/src/containers/Inputs/Inputs.tsx

@@ -16,6 +16,7 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
+import { useSwapMode } from '../../hooks/useSwapMode';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { getContainer } from '../../utils/common';
@@ -40,7 +41,8 @@ export function Inputs(props: PropTypes) {
     outputAmount,
     outputUsdValue,
     selectedQuote,
-  } = useQuoteStore();
+  } = useQuoteStore()();
+  const { swapMode } = useSwapMode();
   const { connectedWallets, getBalanceFor } = useAppStore();
   const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
   const fromTokenFormattedBalance =
@@ -128,9 +130,10 @@ export function Inputs(props: PropTypes) {
           }}
           anyWalletConnected={connectedWallets.length > 0}
         />
-        <SwitchFromAndToButton />
+        {swapMode === 'swap' && <SwitchFromAndToButton />}
       </FromContainer>
       <SwapInput
+        selectionType={swapMode === 'swap' ? 'token' : 'chain'}
         sharpBottomStyle={!isExpandable && (!!selectedQuote || fetchingQuote)}
         label={i18n.t('To')}
         mode="To"

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -28,7 +28,7 @@ export function QuoteInfo(props: PropTypes) {
     fullExpandedMode = false,
     container,
   } = props;
-  const { inputAmount, inputUsdValue } = useQuoteStore();
+  const { inputAmount, inputUsdValue } = useQuoteStore()();
 
   const outputAmount = !!quote?.outputAmount
     ? new BigNumber(quote?.outputAmount)

package/src/containers/Refuel/Refuel.tsx

@@ -0,0 +1,25 @@
+import type { RefuelProps } from './Refuel.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { AppRouter } from '../../components/AppRouter';
+import { DEFAULT_CONFIG } from '../../store/slices/config';
+import { Main } from '../App';
+import { WidgetProvider } from '../WidgetProvider';
+
+export function Refuel(props: PropsWithChildren<RefuelProps>) {
+  const isExternalWalletsEnabled = props.config?.externalWallets;
+
+  return (
+    <AppRouter>
+      {isExternalWalletsEnabled ? (
+        <Main />
+      ) : (
+        <WidgetProvider config={props.config ?? DEFAULT_CONFIG}>
+          <Main />
+        </WidgetProvider>
+      )}
+    </AppRouter>
+  );
+}

package/src/containers/Refuel/Refuel.types.ts

@@ -0,0 +1,5 @@
+import type { WidgetConfig } from '../../types';
+
+export type RefuelProps = {
+  config?: WidgetConfig;
+};

package/src/containers/Refuel/index.ts

@@ -0,0 +1 @@
+export { Refuel } from './Refuel';

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -20,7 +20,7 @@ export const WidgetInfoContext = createContext<
 export function WidgetInfo(props: React.PropsWithChildren) {
   const { manager } = useManager();
   const isActiveTab = useUiStore.use.isActiveTab();
-  const retrySwap = useQuoteStore.use.retry();
+  const retrySwap = useQuoteStore().use.retry();
   const {
     findToken,
     getBalances,
@@ -40,7 +40,7 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const clearNotifications = useNotificationStore().clearNotifications;
   const updateQuoteInputs = useUpdateQuoteInputs();
   const { fromBlockchain, toBlockchain, fromToken, toToken, inputAmount } =
-    useQuoteStore();
+    useQuoteStore()();
 
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   const value: WidgetInfoContextInterface = {

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -5,6 +5,7 @@ import { setSolanaSignerConfig } from '@rango-dev/signer-solana';
 import React, { useEffect, useMemo } from 'react';
 
 import { DEFAULT_BASE_URL, RANGO_PUBLIC_API_KEY } from '../../constants';
+import { useFetchApiConfig } from '../../hooks/useFetchApiConfig';
 import useFontLoader from '../../hooks/useFontLoader';
 import QueueManager from '../../QueueManager';
 import { initConfig } from '../../utils/configs';
@@ -16,8 +17,13 @@ export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
 
   const fontFamily = props.config?.theme?.fontFamily;
 
+  const { fetchApiConfig } = useFetchApiConfig();
   const { handleLoadCustomFont } = useFontLoader();
 
+  useEffect(() => {
+    void fetchApiConfig().catch(console.log);
+  }, []);
+
   useEffect(() => {
     if (fontFamily) {
       handleLoadCustomFont(fontFamily);

package/src/hooks/useBootstrap/useBootstrap.ts

@@ -10,9 +10,11 @@ import { WidgetContext } from '../../containers/Wallets';
 import { globalFont } from '../../globalStyles';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
-import { unsubscribeQuoteStore } from '../../store/quote';
+import {
+  unsubscribeRefuelQuoteStore,
+  unsubscribeSwapQuoteStore,
+} from '../../store/quote';
 import { tabManager } from '../../store/ui';
-import { useFetchApiConfig } from '../useFetchApiConfig';
 import { useForceAutoConnect } from '../useForceAutoConnect';
 import { useSubscribeToWidgetEvents } from '../useSubscribeToWidgetEvents';
 import { useSyncNotifications } from '../useSyncNotifications';
@@ -31,10 +33,9 @@ export function useBootstrap() {
 
   const evmChains = blockchains.filter(isEvmBlockchain);
 
-  const { fetchApiConfig } = useFetchApiConfig();
-
   // Unsubscribe QuoteStore listeners
-  useEffect(() => () => unsubscribeQuoteStore(), []);
+  useEffect(() => () => unsubscribeSwapQuoteStore(), []);
+  useEffect(() => () => unsubscribeRefuelQuoteStore(), []);
 
   // At the moment, we only detect the disconnection of EVM wallets.
   useQueueManager({
@@ -96,8 +97,6 @@ export function useBootstrap() {
       );
     });
 
-    void fetchApiConfig().catch(console.log);
-
     return tabManager.destroy;
   }, []);
 }

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -14,6 +14,7 @@ import {
 } from '../../types';
 import { getWalletsForNewSwap } from '../../utils/swap';
 import { useFetchConfirmQuote } from '../useFetchConfirmQuote';
+import { useSwapMode } from '../useSwapMode';
 
 import {
   generateWarnings,
@@ -31,13 +32,14 @@ export function useConfirmSwap(): ConfirmSwap {
     selectedQuote: initialQuote,
     customDestination: customDestinationFromStore,
     resetAlerts,
-  } = useQuoteStore();
+  } = useQuoteStore()();
 
   const { slippage, customSlippage } = useAppStore();
   const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const { findToken } = useAppStore();
+  const { swapMode } = useSwapMode();
 
   const userSlippage = customSlippage || slippage;
 
@@ -114,14 +116,15 @@ export function useConfirmSwap(): ConfirmSwap {
 
         const proceedAnyway = !!confirmSwapWarnings.balance;
 
-        const swap = calculatePendingSwap(
-          inputAmount.toString(),
-          result,
-          getWalletsForNewSwap(selectedWallets),
-          swapSettings,
-          proceedAnyway ? false : true,
-          { blockchains, tokens }
-        );
+        const swap = calculatePendingSwap({
+          inputAmount: inputAmount.toString(),
+          bestRoute: result,
+          wallets: getWalletsForNewSwap(selectedWallets),
+          settings: swapSettings,
+          validateBalanceOrFee: proceedAnyway ? false : true,
+          meta: { blockchains, tokens },
+          swapMode,
+        });
 
         return {
           quote: currentQuote,

package/src/hooks/useSwapInput.ts

@@ -65,7 +65,7 @@ export function useSwapInput({
     warning,
     setSelectedQuote,
     updateQuotePartialState,
-  } = useQuoteStore();
+  } = useQuoteStore()();
   const {
     slippage,
     customSlippage,

package/src/hooks/useSwapMode.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+type SwapModeContextType = {
+  swapMode: 'swap' | 'refuel';
+  isMultiMode: boolean;
+};
+
+export const SwapModeContext = createContext<SwapModeContextType>({
+  swapMode: 'swap',
+  isMultiMode: false,
+});
+
+export function useSwapMode(): {
+  swapMode: 'swap' | 'refuel';
+  isMultiMode: boolean;
+} {
+  const { swapMode, isMultiMode } = useContext(SwapModeContext);
+
+  return { swapMode: swapMode, isMultiMode: isMultiMode };
+}

package/src/hooks/useSyncStoresWithConfig.ts

@@ -21,7 +21,7 @@ export function useSyncStoresWithConfig() {
     toToken,
     fromBlockchain,
     toBlockchain,
-  } = useQuoteStore();
+  } = useQuoteStore()();
 
   const config = useAppStore().config;
   const fetchMetaStatus = useAppStore().fetchStatus;

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -28,7 +28,7 @@ export function useSyncUrlAndStore() {
     setFromToken,
     setToToken,
     setInputAmount,
-  } = useQuoteStore();
+  } = useQuoteStore()();
   const fetchMetaStatus = useAppStore().fetchStatus;
   const blockchains = useAppStore().blockchains();
   const isInRouterContext = useInRouterContext();

package/src/hooks/useUpdateQuoteInputs/useUpdateQuoteInputs.ts

@@ -14,7 +14,7 @@ export function useUpdateQuoteInputs() {
     setToBlockchain,
     setToToken,
     setInputAmount,
-  } = useQuoteStore();
+  } = useQuoteStore()();
 
   const updateQuoteInputs: UpdateQuoteInputs = (params) => {
     const { fromBlockchain, fromToken, toBlockchain, toToken, requestAmount } =

package/src/index.ts

@@ -69,11 +69,13 @@ import {
 } from './components/WalletStatefulConnect';
 import { WIDGET_UI_ID as UI_ID } from './constants';
 import { SUPPORTED_FONTS } from './constants/fonts';
+import { Refuel } from './containers/Refuel';
 import { WidgetWallets } from './containers/Wallets';
 import { Widget } from './containers/Widget';
 import { useWidget } from './containers/WidgetInfo';
 import { WidgetProvider } from './containers/WidgetProvider';
 import { useStatefulConnect } from './hooks/useStatefulConnect';
+import { SwapModeContext } from './hooks/useSwapMode';
 import { useWalletList } from './hooks/useWalletList';
 import { useWidgetEvents } from './hooks/useWidgetEvents';
 import { widgetEventEmitter } from './services/eventEmitter';
@@ -132,6 +134,8 @@ export type {
 };
 export {
   Widget,
+  Refuel,
+  SwapModeContext,
   /**
    * @deprecated Use `WidgetProvider` instead. This component will be removed in future versions.
    */

package/src/pages/ConfirmSwapPage.tsx

@@ -70,7 +70,7 @@ export function ConfirmSwapPage() {
     quoteWalletsConfirmed,
     customDestination,
     quoteWarningsConfirmed,
-  } = useQuoteStore();
+  } = useQuoteStore()();
   const navigate = useNavigate();
   const [dbErrorMessage, setDbErrorMessage] = useState<string>('');
 

package/src/pages/CustomTokensPage.tsx

@@ -50,7 +50,7 @@ export function CustomTokensPage() {
   const [searchedFor, setSearchedFor] = useState<string>('');
   const { deleteCustomToken } = useAppStore();
   const customTokens = useAppStore().customTokens();
-  const { fromToken, toToken, setFromToken, setToToken } = useQuoteStore();
+  const { fromToken, toToken, setFromToken, setToToken } = useQuoteStore()();
   const { mode } = useTheme({});
   const navigate = useNavigate();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);

package/src/pages/HistoryPage.tsx

@@ -7,6 +7,7 @@ import {
   MessageBox,
   NotFound,
   styled,
+  Tabs,
   Typography,
 } from '@rango-dev/ui';
 import {
@@ -24,11 +25,14 @@ import { HistoryGroupedList } from '../components/HistoryGroupedList';
 import { NotFoundContainer } from '../components/HistoryGroupedList/HistoryGroupedList.styles';
 import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
+import { useSwapMode } from '../hooks/useSwapMode';
 import { getContainer } from '../utils/common';
 import { groupSwapsByDate } from '../utils/date';
 import { containsText } from '../utils/numbers';
 import { getPendingSwaps } from '../utils/queue';
 
+type SwapModeTab = 'all' | 'swap' | 'refuel';
+
 const HistoryGroupedListContainer = styled('div', {
   overflowY: 'visible',
   width: '100%',
@@ -65,6 +69,21 @@ const transactionStatusFilters = [
   { id: TransactionStatus.FAILED, title: i18n.t('Failed') },
 ];
 
+const SWAP_MODE_TAB_ITEMS = [
+  {
+    id: 'all',
+    title: i18n.t('All'),
+  },
+  {
+    id: 'swap',
+    title: i18n.t('Swap'),
+  },
+  {
+    id: 'refuel',
+    title: i18n.t('Refuel'),
+  },
+];
+
 const isStepContainsText = (steps: PendingSwapStep[], value: string) => {
   if (!steps?.length) {
     return false;
@@ -87,18 +106,21 @@ export function HistoryPage() {
   const loading = !state.loadedFromPersistor;
   const [filterBy, setFilterBy] = useState('');
   const [openClearModal, setOpenClearModal] = useState(false);
+  const [swapModeActiveTab, setSwapModeActiveTab] =
+    useState<SwapModeTab>('all');
   const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setSearchedFor(value);
   };
+  const { isMultiMode } = useSwapMode();
 
   const filteredList = useMemo(() => {
-    if (!searchedFor && !filterBy) {
+    if (!searchedFor && !filterBy && swapModeActiveTab === 'all') {
       return list;
     }
 
     return list.filter((swap) => {
-      const { inputAmount, status, steps, requestId } = swap;
+      const { inputAmount, status, steps, requestId, mode } = swap;
 
       const matchesSearch =
         !searchedFor ||
@@ -109,9 +131,22 @@ export function HistoryPage() {
 
       const matchesFilter = !filterBy || filterBy === status;
 
-      return matchesSearch && matchesFilter;
+      const matchesSwapMode = (() => {
+        if (swapModeActiveTab === 'all') {
+          return true;
+        }
+        if (swapModeActiveTab === 'swap') {
+          return !mode || mode === 'swap';
+        }
+        if (swapModeActiveTab === 'refuel') {
+          return mode === 'refuel';
+        }
+        return false;
+      })();
+
+      return matchesSearch && matchesFilter && matchesSwapMode;
     });
-  }, [list, searchedFor, filterBy]);
+  }, [list, searchedFor, filterBy, swapModeActiveTab]);
 
   const isEmpty = !filteredList?.length && !loading;
 
@@ -177,6 +212,18 @@ export function HistoryPage() {
         </SearchAndFilterBar>
 
         <Divider size="16" />
+
+        {isMultiMode && !loading && (
+          <>
+            <Tabs
+              items={SWAP_MODE_TAB_ITEMS}
+              onChange={(item) => setSwapModeActiveTab(item.id as SwapModeTab)}
+              value={swapModeActiveTab}
+              type="secondary"
+            />
+            <Divider size="12" />
+          </>
+        )}
         <HistoryGroupedListContainer>
           {isEmpty && (
             <NotFoundContainer>

package/src/pages/Home.tsx

@@ -19,6 +19,7 @@ import { Inputs } from '../containers/Inputs';
 import { QuoteInfo } from '../containers/QuoteInfo';
 import useScreenDetect from '../hooks/useScreenDetect';
 import { useSwapInput } from '../hooks/useSwapInput';
+import { useSwapMode } from '../hooks/useSwapMode';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
@@ -53,7 +54,7 @@ export function Home() {
     resetQuoteWallets,
     setQuoteWarningsConfirmed,
     updateQuotePartialState,
-  } = useQuoteStore();
+  } = useQuoteStore()();
 
   const [isVisibleExpanded, setIsVisibleExpanded] = useState<boolean>(false);
   const { isLargeScreen, isExtraLargeScreen } = useScreenDetect();
@@ -72,6 +73,7 @@ export function Home() {
   const { isActiveTab } = useUiStore();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
   const currentSlippage = customSlippage !== null ? customSlippage : slippage;
+  const { swapMode } = useSwapMode();
 
   const slippageValidation = getSlippageValidation(currentSlippage);
 
@@ -148,6 +150,18 @@ export function Home() {
     setCustomSlippage(slippage);
   };
 
+  const handleInputTokenClick = (mode: 'from' | 'to') => {
+    if (mode === 'from') {
+      onHandleNavigation(navigationRoutes.fromSwap);
+    } else {
+      onHandleNavigation(
+        swapMode === 'swap'
+          ? navigationRoutes.toSwap
+          : navigationRoutes.toSwap + '/' + navigationRoutes.blockchains
+      );
+    }
+  };
+
   useEffect(() => {
     resetQuoteWallets();
     updateQuotePartialState('refetchQuote', true);
@@ -192,7 +206,9 @@ export function Home() {
             onHandleNavigation(navigationRoutes.wallets);
           },
           hasBackButton: false,
-          title: config.title || i18n.t('Swap'),
+          title:
+            config.title ||
+            (swapMode === 'swap' ? i18n.t('Swap') : i18n.t('Refuel')),
           suffix: (
             <HeaderButtons
               hidden={isExpandable ? ['refresh'] : undefined}
@@ -209,13 +225,7 @@ export function Home() {
             fetchingQuote={fetchingQuote}
             fetchMetaStatus={fetchMetaStatus}
             isExpandable={isExpandable}
-            onClickToken={(mode) => {
-              onHandleNavigation(
-                mode === 'from'
-                  ? navigationRoutes.fromSwap
-                  : navigationRoutes.toSwap
-              );
-            }}
+            onClickToken={handleInputTokenClick}
           />
           <Divider size="2" />
           {!isExpandable ? (

package/src/pages/Routes.tsx

@@ -21,7 +21,7 @@ export function RoutesPage() {
     setSelectedQuote,
     updateQuotePartialState,
     error: quoteError,
-  } = useQuoteStore();
+  } = useQuoteStore()();
 
   const { fetch: fetchQuote, loading: fetchingQuote } = useSwapInput({
     refetchQuote,