@rango-dev/widget-embedded 0.20.1-next.21 → 0.20.1-next.22

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBA2T9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAkD5E,wBAAgB,eAAe,sBA0T9B"}

package/dist/pages/HistoryPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryPage.d.ts","sourceRoot":"","sources":["../../src/pages/HistoryPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAkCxC,wBAAgB,WAAW,sBAqE1B"}
+{"version":3,"file":"HistoryPage.d.ts","sourceRoot":"","sources":["../../src/pages/HistoryPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAiCxC,wBAAgB,WAAW,sBAiE1B"}

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAuCnD,wBAAgB,IAAI,sBAmPnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAsCnD,wBAAgB,IAAI,sBAuPnB"}

package/dist/pages/SwapDetailsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SwapDetailsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,wBAAgB,eAAe,sBAoD9B"}
+{"version":3,"file":"SwapDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SwapDetailsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,wBAAgB,eAAe,sBAgE9B"}

package/dist/utils/quote.d.ts

@@ -4,7 +4,6 @@ import type { SimulationAssetAndAmount, SimulationValidationStatus } from '@rang
 import type { Asset, BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import type { PendingSwap } from 'rango-types';
 import BigNumber from 'bignumber.js';
-export declare function searchParamsToToken(tokens: Token[], searchParams: string | null, chain: BlockchainMeta | null): Token | null;
 export declare function getQuoteToTokenUsdPrice(quote: BestRouteResponse | null): number | null | undefined;
 export declare function isNumberOfSwapsChanged(quoteA: BestRouteResponse, quoteB: BestRouteResponse): boolean;
 export declare function isQuoteSwappersUpdated(quoteA: BestRouteResponse, quoteB: BestRouteResponse): boolean;

package/dist/utils/quote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/utils/quote.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EACV,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,KAAK,EACN,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,SAAS,MAAM,cAAc,CAAC;AAqBrC,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,GAC3B,KAAK,GAAG,IAAI,CAqBd;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAC9B,MAAM,GAAG,IAAI,GAAG,SAAS,CAE3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAAE,EAAE,CAAC,SAAS,KAAK,EAAE,EACnE,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,CAAC,KAUT;AAED,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,cAAc,EAAE,EAC7B,MAAM,EAAE,KAAK,EAAE,GACd;IACD,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,OAAO,EAAE,KAAK,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CA4CA;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE;IACN,SAAS,EAAE,KAAK,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,GACA,YAAY,GAAG,IAAI,CAiDrB;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,iBAAiB,GACvB,UAAU,GAAG,IAAI,CA+BnB;AAED,wBAAgB,cAAc,CAC5B,aAAa,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,EACxC,cAAc,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GACxC,MAAM,GAAG,IAAI,CAcf;AAED,eAAO,MAAM,oBAAoB,UAAW,IAAI,EAAE;iBAEnB,MAAM;WAAS,MAAM;GAanD,CAAC"}
+{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/utils/quote.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EACV,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,KAAK,EACN,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,SAAS,MAAM,cAAc,CAAC;AAqBrC,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAC9B,MAAM,GAAG,IAAI,GAAG,SAAS,CAE3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAAE,EAAE,CAAC,SAAS,KAAK,EAAE,EACnE,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,CAAC,KAUT;AAED,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,cAAc,EAAE,EAC7B,MAAM,EAAE,KAAK,EAAE,GACd;IACD,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,OAAO,EAAE,KAAK,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CA4CA;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE;IACN,SAAS,EAAE,KAAK,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,GACA,YAAY,GAAG,IAAI,CAiDrB;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,iBAAiB,GACvB,UAAU,GAAG,IAAI,CA+BnB;AAED,wBAAgB,cAAc,CAC5B,aAAa,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,EACxC,cAAc,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GACxC,MAAM,GAAG,IAAI,CAcf;AAED,eAAO,MAAM,oBAAoB,UAAW,IAAI,EAAE;iBAEnB,MAAM;WAAS,MAAM;GAanD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.20.1-next.21",
+  "version": "0.20.1-next.22",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -47,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/AppRouter.tsx

@@ -10,8 +10,6 @@ import { MemoryRouter, useInRouterContext } from 'react-router';
 import { useForceAutoConnect } from '../hooks/useForceAutoConnect';
 import { useAppStore } from '../store/AppStore';
 
-import { UpdateUrl } from './UpdateUrl';
-
 export function AppRouter({
   children,
   ...props
@@ -37,10 +35,5 @@ export function AppRouter({
     canSwitchNetworkTo,
   });
 
-  return (
-    <>
-      <Router>{children}</Router>
-      {isRouterInContext && <UpdateUrl />}
-    </>
-  );
+  return <Router>{children}</Router>;
 }

package/src/components/AppRoutes.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { useRoutes } from 'react-router-dom';
 
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
+import { useSyncUrlAndStore } from '../hooks/useSyncUrlAndStore';
 import { ConfirmSwapPage } from '../pages/ConfirmSwapPage';
 import { HistoryPage } from '../pages/HistoryPage';
 import { Home } from '../pages/Home';
@@ -15,6 +17,15 @@ import { ThemePage } from '../pages/ThemePage';
 import { WalletsPage } from '../pages/WalletsPage';
 
 export function AppRoutes() {
+  /**
+   * The configuration of the widget should initially be applied to the widget state.
+   * If search parameters exist in the URL,
+   * they should be applied later and take precedence over the widget configuration.
+   * To achieve this, it is crucial to execute these hooks in the correct sequence.
+   */
+  useSyncStoresWithConfig();
+  useSyncUrlAndStore();
+
   return useRoutes([
     {
       path: navigationRoutes.home,

package/src/components/Layout/Layout.tsx

@@ -8,7 +8,6 @@ import { RANGO_SWAP_BOX_ID } from '../../constants';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
-import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
 import { isFeatureHidden } from '../../utils/settings';
@@ -30,14 +29,10 @@ function Layout(props: PropsWithChildren<PropTypes>) {
     features
   );
 
-  const connectWalletsButtonDisabled =
-    useUiStore.use.connectWalletsButtonDisabled();
   const navigateBack = useNavigateBack();
 
   const onConnectWallet = () => {
-    if (!connectWalletsButtonDisabled && header.onWallet) {
-      header.onWallet();
-    }
+    header.onWallet?.();
   };
 
   const showBackButton =

package/src/components/NotificationContent/NotificationContent.tsx

@@ -14,7 +14,6 @@ import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
-import { useUiStore } from '../../store/ui';
 
 import { Container, Images, List } from './NotificationContent.styles';
 import { NotificationNotFound } from './NotificationNotFound';
@@ -23,7 +22,6 @@ const MAX_NOTIFICATIONS_DISPLAYED = 4;
 
 export function NotificationContent() {
   const navigate = useNavigate();
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
 
   const { getUnreadNotifications } = useNotificationStore();
 
@@ -35,7 +33,6 @@ export function NotificationContent() {
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
 
   const handleOnClick = (requestId: Notification['requestId']) => {
-    setSelectedSwap(requestId);
     navigate(`${navigationRoutes.swaps}/${requestId}`);
   };
 

package/src/constants/searchParams.ts

@@ -1,8 +1,8 @@
 export enum SearchParams {
-  'FROM_CHAIN' = 'fromBlockchain',
-  'FROM_TOKEN' = 'fromToken',
-  'TO_CHAIN' = 'toBlockchain',
-  'TO_TOKEN' = 'toToken',
-  'FROM_AMOUNT' = 'fromAmount',
-  'AUTO_CONNECT' = 'autoConnect',
+  FROM_BLOCKCHAIN = 'fromBlockchain',
+  FROM_TOKEN = 'fromToken',
+  TO_BLOCKCHAIN = 'toBlockchain',
+  TO_TOKEN = 'toToken',
+  FROM_AMOUNT = 'fromAmount',
+  AUTO_CONNECT = 'autoConnect',
 }

package/src/containers/Wallets/Wallets.tsx

@@ -13,7 +13,6 @@ import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
 import React, { createContext, useEffect, useRef, useState } from 'react';
 
-import { useSyncStoresWithConfig } from '../../hooks/useSyncStoresWithConfig';
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
@@ -39,7 +38,6 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
-  useSyncStoresWithConfig();
 
   useEffect(() => {
     void fetchMeta().catch(console.log);

package/src/hooks/useSwapInput.ts

@@ -59,8 +59,9 @@ export function useSwapInput(): UseSwapInput {
     affiliateRef,
     affiliateWallets,
     disabledLiquiditySources,
+    fetchStatus,
   } = useAppStore();
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<QuoteError | null>(null);
   const [warning, setWarning] = useState<QuoteWarning | null>(null);
   const userSlippage = customSlippage ?? slippage;
@@ -148,6 +149,9 @@ export function useSwapInput(): UseSwapInput {
   );
 
   useEffect(() => {
+    if (fetchStatus !== 'success') {
+      return;
+    }
     if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
       resetState(false);
       cancelFetch();
@@ -175,6 +179,7 @@ export function useSwapInput(): UseSwapInput {
     });
     return cancelFetch;
   }, [
+    fetchStatus,
     inputAmount,
     fromToken?.symbol,
     fromToken?.address,

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,6 +1,6 @@
 import type { Asset } from 'rango-sdk';
 
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
@@ -44,14 +44,7 @@ export function useSyncStoresWithConfig() {
     setInputAmount(config?.amount?.toString() || '');
   }, [config?.amount]);
 
-  /*
-   * We update quote tokens in two scenarios.
-   * If default values exist in widget config or search parameters exist in URL.
-   * The logic for updating quote store exists in two useEffect in two locations, and they run in order.If default tokens for quote exist in widget config and also exist in URL, widget config values take precedence over URL values, and URL search parameters don’t affect the widget.
-   * Using useLayoutEffect causes widget config values to apply first.
-   * We may consider replacing this with a better solution in the future.
-   */
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.from?.blockchain
@@ -100,14 +93,7 @@ export function useSyncStoresWithConfig() {
     }
   }, [toTokensConfig, toBlockchainsConfig]);
 
-  /*
-   * We update quote tokens in two scenarios.
-   * If default values exist in widget config or search parameters exist in URL.
-   * The logic for updating quote store exists in two useEffect in two locations, and they run in order.If default tokens for quote exist in widget config and also exist in URL, widget config values take precedence over URL values, and URL search parameters don’t affect the widget.
-   * Using useLayoutEffect causes widget config values to apply first.
-   * We may consider replacing this with a better solution in the future.
-   */
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.to?.blockchain

package/src/hooks/useSyncUrlAndStore/index.ts

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

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.helpers.ts

@@ -0,0 +1,35 @@
+import type { BlockchainMeta, Token } from 'rango-sdk';
+
+export function searchParamToToken(
+  tokens: Token[],
+  searchParam: string | null,
+  chain: BlockchainMeta | null
+): Token | null {
+  if (!chain) {
+    return null;
+  }
+  return (
+    tokens.find((token) => {
+      const symbolAndAddress = searchParam?.split('--');
+      if (symbolAndAddress?.length === 1) {
+        return (
+          token.symbol === symbolAndAddress[0] &&
+          token.address === null &&
+          token.blockchain === chain.name
+        );
+      }
+      return (
+        token.symbol === symbolAndAddress?.[0] &&
+        token.address === symbolAndAddress?.[1] &&
+        token.blockchain === chain.name
+      );
+    }) || null
+  );
+}
+
+export function tokenToSearchParam(token: Token | null): string | undefined {
+  if (token) {
+    return `${token.symbol}${token.address ? `--${token.address}` : ''}`;
+  }
+  return undefined;
+}

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -0,0 +1,135 @@
+import { useEffect } from 'react';
+import {
+  useInRouterContext,
+  useLocation,
+  useSearchParams,
+} from 'react-router-dom';
+
+import { SearchParams } from '../../constants/searchParams';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+
+import {
+  searchParamToToken,
+  tokenToSearchParam,
+} from './useSyncUrlAndStore.helpers';
+
+export function useSyncUrlAndStore() {
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const {
+    fromBlockchain,
+    toBlockchain,
+    fromToken,
+    toToken,
+    inputAmount,
+    setFromBlockchain,
+    setToBlockchain,
+    setFromToken,
+    setToToken,
+    setInputAmount,
+  } = useQuoteStore();
+  const fetchMetaStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const isInRouterContext = useInRouterContext();
+
+  const getUrlSearchParams = () => {
+    const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
+    const fromBlockchain = searchParams.get(SearchParams.FROM_BLOCKCHAIN);
+    const fromToken = searchParams.get(SearchParams.FROM_TOKEN);
+    const toBlockchain = searchParams.get(SearchParams.TO_BLOCKCHAIN);
+    const toToken = searchParams.get(SearchParams.TO_TOKEN);
+    const autoConnect = searchParams.get(SearchParams.AUTO_CONNECT);
+
+    return {
+      fromAmount,
+      fromBlockchain,
+      fromToken,
+      toBlockchain,
+      toToken,
+      autoConnect,
+    };
+  };
+
+  const updateUrlSearchParams = (
+    searchParams: Record<string, string | undefined>
+  ) => {
+    for (const property in searchParams) {
+      if (!searchParams[property]) {
+        delete searchParams[property];
+      }
+    }
+    setSearchParams(searchParams as Record<string, string>, { replace: true });
+  };
+
+  useEffect(() => {
+    const { autoConnect } = getUrlSearchParams();
+    if (isInRouterContext && fetchMetaStatus === 'success') {
+      updateUrlSearchParams({
+        [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
+        [SearchParams.FROM_TOKEN]: tokenToSearchParam(fromToken),
+        [SearchParams.TO_BLOCKCHAIN]: toBlockchain?.name,
+        [SearchParams.TO_TOKEN]: tokenToSearchParam(toToken),
+        [SearchParams.FROM_AMOUNT]: inputAmount,
+        [SearchParams.AUTO_CONNECT]: autoConnect ?? undefined,
+      });
+    }
+  }, [
+    location.pathname,
+    inputAmount,
+    fromBlockchain,
+    fromToken,
+    toBlockchain,
+    toToken,
+  ]);
+
+  useEffect(() => {
+    if (!isInRouterContext) {
+      return;
+    }
+    const searchParams = getUrlSearchParams();
+    if (searchParams.fromAmount) {
+      setInputAmount(searchParams.fromAmount);
+    }
+    if (fetchMetaStatus === 'success') {
+      const fromBlockchain = blockchains.find(
+        (blockchain) => blockchain.name === searchParams.fromBlockchain
+      );
+      const fromToken = searchParamToToken(
+        tokens,
+        searchParams.fromToken,
+        fromBlockchain ?? null
+      );
+      const toBlockchain = blockchains.find(
+        (blockchain) => blockchain.name === searchParams.toBlockchain
+      );
+      const toToken = searchParamToToken(
+        tokens,
+        searchParams.toToken,
+        toBlockchain ?? null
+      );
+      if (!!fromBlockchain) {
+        setFromBlockchain(fromBlockchain);
+        if (!!fromToken) {
+          setFromToken({
+            token: fromToken,
+            meta: {
+              blockchains: blockchains,
+              tokens: tokens,
+            },
+          });
+        }
+      }
+      if (!!toBlockchain) {
+        setToBlockchain(toBlockchain);
+        if (!!toToken) {
+          setToToken({
+            token: toToken,
+            meta: { blockchains: blockchains, tokens: tokens },
+          });
+        }
+      }
+    }
+  }, [fetchMetaStatus]);
+}

package/src/pages/ConfirmSwapPage.tsx

@@ -20,7 +20,7 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { getRequiredWallets } from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
 import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
@@ -34,7 +34,6 @@ import { QuoteInfo } from '../containers/QuoteInfo';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
-import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { QuoteWarningType } from '../types';
 import { getContainer } from '../utils/common';
@@ -81,12 +80,12 @@ export function ConfirmSwapPage() {
     quoteWarningsConfirmed,
   } = useQuoteStore();
   const navigate = useNavigate();
+  const location = useLocation();
   const [dbErrorMessage, setDbErrorMessage] = useState<string>('');
 
   const { connectedWallets } = useWalletsStore();
   const showWalletsOnInit = !quoteWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
   const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const { manager } = useManager();
@@ -121,7 +120,6 @@ export function ConfirmSwapPage() {
           { swapDetails: confirmSwapResult.swap },
           { id: confirmSwapResult.swap.requestId }
         );
-        setSelectedSwap(confirmSwapResult.swap.requestId);
 
         const swap_url = `../${navigationRoutes.swaps}/${confirmSwapResult.swap.requestId}`;
         navigate(swap_url, {
@@ -252,7 +250,7 @@ export function ConfirmSwapPage() {
 
   useLayoutEffect(() => {
     if (!quote) {
-      navigate(`../`);
+      navigate(`../${location.search}`);
     }
   }, []);
 

package/src/pages/HistoryPage.tsx

@@ -10,7 +10,6 @@ import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { SwapsGroup } from '../components/SwapsGroup';
 import { NotFoundContainer } from '../components/SwapsGroup/SwapsGroup.styles';
-import { useUiStore } from '../store/ui';
 import { groupSwapsByDate } from '../utils/date';
 import { containsText } from '../utils/numbers';
 import { getPendingSwaps } from '../utils/queue';
@@ -38,7 +37,6 @@ const isStepContainsText = (steps: PendingSwapStep[], value: string) => {
 };
 
 export function HistoryPage() {
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const navigate = useNavigate();
   const { manager, state } = useManager();
   const list: PendingSwap[] = getPendingSwaps(manager).map(({ swap }) => swap);
@@ -94,10 +92,7 @@ export function HistoryPage() {
           {!isEmpty && (
             <SwapsGroup
               list={filteredList}
-              onSwapClick={(requestId) => {
-                setSelectedSwap(requestId);
-                navigate(requestId);
-              }}
+              onSwapClick={navigate}
               groupBy={groupSwapsByDate}
               isLoading={loading}
             />

package/src/pages/Home.tsx

@@ -21,7 +21,6 @@ import { QuoteInfo } from '../containers/QuoteInfo';
 import { useSwapInput } from '../hooks/useSwapInput';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
-import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { getContainer } from '../utils/common';
 import { formatTooltipNumbers, numberToString } from '../utils/numbers';
@@ -43,7 +42,7 @@ export function Home() {
   const navigate = useNavigate();
   const {
     fetch: fetchQuote,
-    loading: fetchingQuote,
+    loading,
     error: quoteError,
     warning: quoteWarning,
   } = useSwapInput();
@@ -65,7 +64,6 @@ export function Home() {
   const fetchMetaStatus = useAppStore().fetchStatus;
 
   const { connectedWallets, getBalanceFor } = useWalletsStore();
-  const setCurrentPage = useUiStore.use.setCurrentPage();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
   const fetchingBalance =
     !!fromBlockchain &&
@@ -87,7 +85,7 @@ export function Home() {
 
   const swapButtonState = getSwapButtonState({
     fetchMetaStatus,
-    fetchingQuote,
+    fetchingQuote: loading,
     inputAmount,
     quote,
     anyWalletConnected: connectedWallets.length > 0,
@@ -106,10 +104,15 @@ export function Home() {
       ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
       : '0';
 
+  const fetchingQuote =
+    fetchMetaStatus === 'success' &&
+    !!inputAmount &&
+    !!fromToken &&
+    !!toToken &&
+    loading;
+
   useEffect(() => {
-    setCurrentPage(navigationRoutes.home);
     resetQuoteWallets();
-    return setCurrentPage.bind(null, '');
   }, []);
 
   const percentageChange =

package/src/pages/SwapDetailsPage.tsx

@@ -1,27 +1,41 @@
+import { i18n } from '@lingui/core';
 import { cancelSwap } from '@rango-dev/queue-manager-rango-preset';
 import { useManager } from '@rango-dev/queue-manager-react';
+import { Alert } from '@rango-dev/ui';
 import React from 'react';
+import { useParams } from 'react-router-dom';
 
 import { SwapDetails } from '../components/SwapDetails';
 import { SwapDetailsPlaceholder } from '../components/SwapDetails/SwapDetails.Placeholder';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
-import { useUiStore } from '../store/ui';
 import { getPendingSwaps } from '../utils/queue';
 
 export function SwapDetailsPage() {
   const { manager, state } = useManager();
   const loading = !state.loadedFromPersistor;
   const pendingSwaps = getPendingSwaps(manager);
-  const requestId = useUiStore.use.selectedSwapRequestId();
+  const { requestId } = useParams<{ requestId: string }>();
   const navigateBack = useNavigateBack();
   const { fetchStatus: fetchMetaStatus } = useAppStore();
 
+  if (!requestId) {
+    return (
+      <Alert
+        containerStyles={{ margin: '20px' }}
+        type="error"
+        title={i18n.t(
+          'The request ID is necessary to display the swap details.'
+        )}
+      />
+    );
+  }
+
   const showSkeleton = loading || fetchMetaStatus === 'loading';
 
-  const selectedSwap = pendingSwaps.find(
-    ({ swap }) => swap.requestId === requestId
-  );
+  const selectedSwap = requestId
+    ? pendingSwaps.find(({ swap }) => swap.requestId === requestId)
+    : undefined;
 
   const onCancel = () => {
     if (selectedSwap?.id) {
@@ -47,7 +61,7 @@ export function SwapDetailsPage() {
   if (!swap || showSkeleton) {
     return (
       <SwapDetailsPlaceholder
-        requestId={requestId || ''}
+        requestId={requestId}
         showSkeleton={showSkeleton}
       />
     );
@@ -56,7 +70,7 @@ export function SwapDetailsPage() {
   return (
     <SwapDetails
       swap={swap}
-      requestId={requestId || ''}
+      requestId={requestId}
       onCancel={onCancel}
       onDelete={onDelete}
     />

package/src/utils/quote.ts

@@ -35,33 +35,6 @@ import {
   hasProperSlippage,
 } from './swap';
 
-export function searchParamsToToken(
-  tokens: Token[],
-  searchParams: string | null,
-  chain: BlockchainMeta | null
-): Token | null {
-  if (!chain) {
-    return null;
-  }
-  return (
-    tokens.find((token) => {
-      const symbolAndAddress = searchParams?.split('--');
-      if (symbolAndAddress?.length === 1) {
-        return (
-          token.symbol === symbolAndAddress[0] &&
-          token.address === null &&
-          token.blockchain === chain.name
-        );
-      }
-      return (
-        token.symbol === symbolAndAddress?.[0] &&
-        token.address === symbolAndAddress?.[1] &&
-        token.blockchain === chain.name
-      );
-    }) || null
-  );
-}
-
 export function getQuoteToTokenUsdPrice(
   quote: BestRouteResponse | null
 ): number | null | undefined {

package/dist/components/UpdateUrl.d.ts

@@ -1,2 +0,0 @@
-export declare function UpdateUrl(): null;
-//# sourceMappingURL=UpdateUrl.d.ts.map

package/dist/components/UpdateUrl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UpdateUrl.d.ts","sourceRoot":"","sources":["../../src/components/UpdateUrl.tsx"],"names":[],"mappings":"AAcA,wBAAgB,SAAS,SA+IxB"}