@rango-dev/widget-embedded 0.1.11-next.10 → 0.1.11-next.12

package/dist/widget-embedded.esm.js

@@ -6,10 +6,10 @@ import { isCosmosBlockchain, isEvmBlockchain } from 'rango-types';
 import { useSearchParams, useLocation, createSearchParams, useNavigate, useInRouterContext, useRoutes } from 'react-router-dom';
 import { create } from 'zustand';
 import BigNumber, { BigNumber as BigNumber$1 } from 'bignumber.js';
-import { Network, isEvmAddress, KEPLR_COMPATIBLE_WALLETS, detectInstallLink, WalletType, getCosmosExperimentalChainInfo, detectMobileScreens, convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
-import { readAccountAddress, useWallets, Provider as Provider$1, Events } from '@rango-dev/wallets-core';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { RangoClient, isEvmBlockchain as isEvmBlockchain$1 } from 'rango-sdk';
+import { Network, isEvmAddress, KEPLR_COMPATIBLE_WALLETS, detectInstallLink, WalletType, getCosmosExperimentalChainInfo, detectMobileScreens, convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
+import { readAccountAddress, useWallets, Provider as Provider$1, Events } from '@rango-dev/wallets-core';
 import { shallow } from 'zustand/shallow';
 import { useTranslation, initReactI18next } from 'react-i18next';
 import { styled as styled$1 } from '@rango-dev/ui/src/theme';
@@ -118,6 +118,195 @@ const decimalNumber = function (number, toFixed) {
   return parseFloat(number).toFixed(toFixed);
 };
 
+function searchParamsToToken(tokens, searchParams, chain) {
+  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;
+}
+function getBestRouteToTokenUsdPrice(bestRoute) {
+  return bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to.usdPrice;
+}
+function isNumberOfSwapsChanged(route1, route2) {
+  const route1Swaps = route1.result?.swaps || [];
+  const route2Swaps = route2.result?.swaps || [];
+  return route1Swaps.length !== route2Swaps.length;
+}
+function isRouteSwappersUpdated(route1, route2) {
+  const route1Swappers = route1.result?.swaps.map(swap => swap.swapperId) || [];
+  const route2Swappers = route2.result?.swaps.map(swap => swap.swapperId) || [];
+  return !areEqual(route1Swappers, route2Swappers);
+}
+function isRouteInternalCoinsUpdated(route1, route2) {
+  const route1InternalCoins = route1.result?.swaps.map(swap => swap.to.symbol) || [];
+  const route2InternalCoins = route2.result?.swaps.map(swap => swap.to.symbol) || [];
+  return !areEqual(route1InternalCoins, route2InternalCoins);
+}
+function isRouteChanged(route1, route2) {
+  return isNumberOfSwapsChanged(route1, route2) || isRouteSwappersUpdated(route1, route2) || isRouteInternalCoinsUpdated(route1, route2);
+}
+function getRequiredBalanceOfWallet(selectedWallet, fee) {
+  if (fee === null) return null;
+  const relatedFeeStatus = fee?.find(item => item.blockchain === selectedWallet.chain)?.wallets.find(wallet => wallet.address?.toLowerCase() === selectedWallet.address.toLowerCase());
+  if (!relatedFeeStatus) return null;
+  return relatedFeeStatus.requiredAssets;
+}
+function isRouteParametersChanged(params) {
+  if (params.store === 'bestRoute') {
+    const {
+      prevState,
+      currentState
+    } = params;
+    return !!currentState.fromToken && !!currentState.toToken && (prevState.fromChain?.name !== currentState.fromChain?.name || prevState.toChain?.name !== currentState.toChain?.name || prevState.fromToken?.symbol !== currentState.fromToken?.symbol || prevState.toToken?.symbol !== currentState.toToken?.symbol || prevState.fromToken?.blockchain !== prevState.fromToken?.blockchain || prevState.toToken?.blockchain !== currentState.toToken?.blockchain || prevState.fromToken?.address !== currentState.fromToken?.address || prevState.toToken?.address !== currentState.toToken?.address || prevState.inputAmount !== currentState.inputAmount);
+  } else if (params.store === 'settings') {
+    const {
+      prevState,
+      currentState
+    } = params;
+    return prevState.slippage !== currentState.slippage || prevState.customSlippage !== currentState.customSlippage || prevState.disabledLiquiditySources?.length !== currentState.disabledLiquiditySources?.length || prevState.infiniteApprove || currentState.infiniteApprove;
+  }
+  return false;
+}
+function getFormatedBestRoute(bestRoute) {
+  if (!bestRoute) return null;
+  const formatedSwaps = (bestRoute.result?.swaps || []).map(swap => ({
+    ...swap,
+    fromAmount: numberToString(swap.fromAmount, 6, 6),
+    toAmount: numberToString(swap.toAmount, 6, 6)
+  }));
+  return {
+    ...bestRoute,
+    ...(bestRoute.result && {
+      result: {
+        ...bestRoute.result,
+        swaps: formatedSwaps
+      }
+    })
+  };
+}
+function getFormatedPendingSwap(pendingSwap) {
+  const formatedSteps = pendingSwap.steps.map(step => ({
+    ...step,
+    feeInUsd: numberToString(step.feeInUsd, 4, 4),
+    outputAmount: numberToString(step.outputAmount, 6, 6),
+    expectedOutputAmountHumanReadable: numberToString(step.expectedOutputAmountHumanReadable, 6, 6)
+  }));
+  return {
+    ...pendingSwap,
+    inputAmount: numberToString(pendingSwap.inputAmount, 6, 6),
+    steps: formatedSteps
+  };
+}
+//todo: refactor bestRoute store and add loadingStatus
+const getBestRouteStatus = (loading, error) => {
+  if (loading) return 'loading';
+  if (error) return 'failed';else return 'success';
+};
+
+const createSelectors = _store => {
+  let store = _store;
+  store.use = {};
+  for (let k of Object.keys(store.getState())) {
+    store.use[k] = () => store(s => s[k]);
+  }
+  return store;
+};
+
+const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+let configs = {
+  API_KEY: RANGO_PUBLIC_API_KEY
+};
+function getConfig(name) {
+  return configs[name];
+}
+
+let rango = undefined;
+const httpService = () => {
+  if (rango) return rango;
+  rango = new RangoClient(getConfig('API_KEY'));
+  return rango;
+};
+
+const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
+const DEFAULT_SLIPPAGE = 1;
+const HIGH_SLIPPAGE = 5;
+const MAX_SLIPPAGE = 100;
+const MIN_SLIPPGAE = 0;
+
+const useMetaStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()(set => ({
+  meta: {
+    blockchains: [],
+    popularTokens: [],
+    swappers: [],
+    tokens: []
+  },
+  loadingStatus: 'loading',
+  fetchMeta: async () => {
+    try {
+      const response = await httpService().getAllMetadata();
+      const chainThatHasTokenInMetaResponse = removeDuplicateFrom(response.tokens.map(t => t.blockchain));
+      const enabledChains = response.blockchains.filter(chain => chain.enabled && chainThatHasTokenInMetaResponse.includes(chain.name));
+      response.blockchains = enabledChains.sort((a, b) => a.sort - b.sort);
+      set({
+        meta: response,
+        loadingStatus: 'success'
+      });
+    } catch (error) {
+      set({
+        loadingStatus: 'failed'
+      });
+    }
+  }
+})));
+
+const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/persist( /*#__PURE__*/subscribeWithSelector(set => ({
+  slippage: DEFAULT_SLIPPAGE,
+  customSlippage: null,
+  infiniteApprove: false,
+  affiliateRef: null,
+  disabledLiquiditySources: [],
+  theme: 'auto',
+  setSlippage: slippage => set(() => ({
+    slippage: slippage
+  })),
+  setCustomSlippage: customSlippage => set(() => ({
+    customSlippage: customSlippage
+  })),
+  setAffiliateRef: affiliateRef => set(() => ({
+    affiliateRef
+  })),
+  toggleAllLiquiditySources: () => set(state => {
+    const {
+      swappers
+    } = useMetaStore.getState().meta;
+    const swappersGroup = removeDuplicateFrom(swappers.map(swapper => swapper.swapperGroup));
+    if (swappersGroup.length === state.disabledLiquiditySources.length) return {
+      disabledLiquiditySources: []
+    };else {
+      return {
+        disabledLiquiditySources: swappersGroup
+      };
+    }
+  }),
+  toggleInfiniteApprove: () => set(state => ({
+    infiniteApprove: !state.infiniteApprove
+  })),
+  toggleLiquiditySource: name => set(state => {
+    if (state.disabledLiquiditySources.includes(name)) return {
+      disabledLiquiditySources: state.disabledLiquiditySources.filter(liquiditySource => liquiditySource != name)
+    };else return {
+      disabledLiquiditySources: state.disabledLiquiditySources.concat(name)
+    };
+  }),
+  setTheme: theme => set(() => ({
+    theme
+  }))
+})), {
+  name: 'user-settings'
+})));
+
 function getStateWallet(state) {
   switch (true) {
     case state.connected:
@@ -421,7 +610,7 @@ function LimitErrorMessage(bestRoute) {
     recommendation
   };
 }
-function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputIsZero) {
+function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount) {
   if (loadingMetaStatus !== 'success') return {
     title: 'Connect Wallet',
     disabled: true
@@ -433,7 +622,7 @@ function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, has
   if (loading) return {
     title: 'Finding Best Route...',
     disabled: true
-  };else if (inputIsZero) return {
+  };else if (!inputAmount || inputAmount === '0') return {
     title: 'Enter an amount',
     disabled: true
   };else if (!bestRoute || !bestRoute.result) return {
@@ -502,7 +691,7 @@ function hasProperSlippage(userSlippage, minRequiredSlippage) {
   if (!minRequiredSlippage) return true;
   return parseFloat(userSlippage) >= parseFloat(minRequiredSlippage);
 }
-function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, selectedWallets, disabledLiquiditySources, slippage, checkPrerequisites, affiliateRef) {
+function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, selectedWallets, disabledLiquiditySources, slippage, affiliateRef, initialRoute) {
   const selectedWalletsMap = selectedWallets.reduce((selectedWalletsMap, selectedWallet) => (selectedWalletsMap[selectedWallet.chain] = selectedWallet.address, selectedWalletsMap), {});
   const connectedWallets = [];
   wallets.forEach(wallet => {
@@ -512,7 +701,8 @@ function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, se
       addresses: [wallet.address]
     });
   });
-  const filteredBlockchains = selectedWallets.map(wallet => wallet.chain);
+  const checkPrerequisites = !!initialRoute;
+  const filteredBlockchains = removeDuplicateFrom((initialRoute?.result?.swaps || []).reduce((blockchains, swap) => (blockchains.push(swap.from.blockchain, swap.to.blockchain), blockchains), []));
   const requestBody = {
     amount: inputAmount.toString(),
     affiliateRef,
@@ -636,165 +826,6 @@ function shouldRetrySwap(pendingSwap) {
   return pendingSwap.status === 'failed' && !!pendingSwap.finishTime && new Date().getTime() - parseInt(pendingSwap.finishTime) < 4 * 3600 * 1000;
 }
 
-function searchParamsToToken(tokens, searchParams, chain) {
-  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;
-}
-function getBestRouteToTokenUsdPrice(bestRoute) {
-  return bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to.usdPrice;
-}
-function isNumberOfSwapsChanged(route1, route2) {
-  const route1Swaps = route1.result?.swaps || [];
-  const route2Swaps = route2.result?.swaps || [];
-  return route1Swaps.length !== route2Swaps.length;
-}
-function isRouteSwappersUpdated(route1, route2) {
-  const route1Swappers = route1.result?.swaps.map(swap => swap.swapperId) || [];
-  const route2Swappers = route2.result?.swaps.map(swap => swap.swapperId) || [];
-  return !areEqual(route1Swappers, route2Swappers);
-}
-function isRouteInternalCoinsUpdated(route1, route2) {
-  const route1InternalCoins = route1.result?.swaps.map(swap => swap.to.symbol) || [];
-  const route2InternalCoins = route2.result?.swaps.map(swap => swap.to.symbol) || [];
-  return !areEqual(route1InternalCoins, route2InternalCoins);
-}
-function isRouteChanged(route1, route2) {
-  return isNumberOfSwapsChanged(route1, route2) || isRouteSwappersUpdated(route1, route2) || isRouteInternalCoinsUpdated(route1, route2);
-}
-function getRequiredBalanceOfWallet(selectedWallet, fee) {
-  if (fee === null) return null;
-  const relatedFeeStatus = fee?.find(item => item.blockchain === selectedWallet.chain)?.wallets.find(wallet => wallet.address?.toLowerCase() === selectedWallet.address.toLowerCase());
-  if (!relatedFeeStatus) return null;
-  return relatedFeeStatus.requiredAssets;
-}
-function isRouteParametersChanged(params) {
-  if (params.store === 'bestRoute') {
-    const {
-      prevState,
-      currentState
-    } = params;
-    return !!currentState.fromToken && !!currentState.toToken && (prevState.fromChain?.name !== currentState.fromChain?.name || prevState.toChain?.name !== currentState.toChain?.name || prevState.fromToken?.symbol !== currentState.fromToken?.symbol || prevState.toToken?.symbol !== currentState.toToken?.symbol || prevState.fromToken?.blockchain !== prevState.fromToken?.blockchain || prevState.toToken?.blockchain !== currentState.toToken?.blockchain || prevState.fromToken?.address !== currentState.fromToken?.address || prevState.toToken?.address !== currentState.toToken?.address || prevState.inputAmount !== currentState.inputAmount);
-  } else if (params.store === 'settings') {
-    const {
-      prevState,
-      currentState
-    } = params;
-    return prevState.slippage !== currentState.slippage || prevState.customSlippage !== currentState.customSlippage || prevState.disabledLiquiditySources?.length !== currentState.disabledLiquiditySources?.length || prevState.infiniteApprove || currentState.infiniteApprove;
-  }
-  return false;
-}
-//todo: refactor bestRoute store and add loadingStatus
-const getBestRouteStatus = (loading, error) => {
-  if (loading) return 'loading';
-  if (error) return 'failed';else return 'success';
-};
-
-const createSelectors = _store => {
-  let store = _store;
-  store.use = {};
-  for (let k of Object.keys(store.getState())) {
-    store.use[k] = () => store(s => s[k]);
-  }
-  return store;
-};
-
-const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
-let configs = {
-  API_KEY: RANGO_PUBLIC_API_KEY
-};
-function getConfig(name) {
-  return configs[name];
-}
-
-let rango = undefined;
-const httpService = () => {
-  if (rango) return rango;
-  rango = new RangoClient(getConfig('API_KEY'));
-  return rango;
-};
-
-const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
-const DEFAULT_SLIPPAGE = 1;
-const HIGH_SLIPPAGE = 5;
-const MAX_SLIPPAGE = 100;
-const MIN_SLIPPGAE = 0;
-
-const useMetaStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()(set => ({
-  meta: {
-    blockchains: [],
-    popularTokens: [],
-    swappers: [],
-    tokens: []
-  },
-  loadingStatus: 'loading',
-  fetchMeta: async () => {
-    try {
-      const response = await httpService().getAllMetadata();
-      const chainThatHasTokenInMetaResponse = removeDuplicateFrom(response.tokens.map(t => t.blockchain));
-      const enabledChains = response.blockchains.filter(chain => chain.enabled && chainThatHasTokenInMetaResponse.includes(chain.name));
-      response.blockchains = enabledChains.sort((a, b) => a.sort - b.sort);
-      set({
-        meta: response,
-        loadingStatus: 'success'
-      });
-    } catch (error) {
-      set({
-        loadingStatus: 'failed'
-      });
-    }
-  }
-})));
-
-const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/persist( /*#__PURE__*/subscribeWithSelector(set => ({
-  slippage: DEFAULT_SLIPPAGE,
-  customSlippage: null,
-  infiniteApprove: false,
-  affiliateRef: null,
-  disabledLiquiditySources: [],
-  theme: 'auto',
-  setSlippage: slippage => set(() => ({
-    slippage: slippage
-  })),
-  setCustomSlippage: customSlippage => set(() => ({
-    customSlippage: customSlippage
-  })),
-  setAffiliateRef: affiliateRef => set(() => ({
-    affiliateRef
-  })),
-  toggleAllLiquiditySources: () => set(state => {
-    const {
-      swappers
-    } = useMetaStore.getState().meta;
-    const swappersGroup = removeDuplicateFrom(swappers.map(swapper => swapper.swapperGroup));
-    if (swappersGroup.length === state.disabledLiquiditySources.length) return {
-      disabledLiquiditySources: []
-    };else {
-      return {
-        disabledLiquiditySources: swappersGroup
-      };
-    }
-  }),
-  toggleInfiniteApprove: () => set(state => ({
-    infiniteApprove: !state.infiniteApprove
-  })),
-  toggleLiquiditySource: name => set(state => {
-    if (state.disabledLiquiditySources.includes(name)) return {
-      disabledLiquiditySources: state.disabledLiquiditySources.filter(liquiditySource => liquiditySource != name)
-    };else return {
-      disabledLiquiditySources: state.disabledLiquiditySources.concat(name)
-    };
-  }),
-  setTheme: theme => set(() => ({
-    theme
-  }))
-})), {
-  name: 'user-settings'
-})));
-
 const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector(set => ({
   accounts: [],
   balances: [],
@@ -859,7 +890,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
       }
     });
     return {
-      selectedWallets: selectedWallets
+      selectedWallets: state.selectedWallets.concat(selectedWallets)
     };
   }),
   setSelectedWallet: wallet => set(state => ({
@@ -1050,7 +1081,7 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     abortController?.abort();
     abortController = new AbortController();
     const userSlippage = !!customSlippage ? customSlippage : slippage;
-    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, [], [], disabledLiquiditySources, userSlippage, false, affiliateRef);
+    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, [], [], disabledLiquiditySources, userSlippage, affiliateRef);
     if (!bestRouteStore.getState().loading) bestRouteStore.setState({
       loading: true,
       bestRoute: null,
@@ -1084,7 +1115,9 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       inputAmount,
       inputUsdValue
     } = useBestRouteStore.getState();
-    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0)) return;
+    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0)) return bestRouteStore.setState({
+      loading: false
+    });
     if (tokensAreEqual(fromToken, toToken)) return bestRouteStore.setState({
       loading: false,
       bestRoute: null,
@@ -1397,6 +1430,7 @@ function TokenInfo(props) {
   const bestRoute = useBestRouteStore.use.bestRoute();
   const inputAmount = useBestRouteStore.use.inputAmount();
   const balances = useWalletsStore.use.balances();
+  const fetchingBestRoute = useBestRouteStore.use.loading();
   const navigate = useNavigate();
   const {
     t
@@ -1505,7 +1539,7 @@ function TokenInfo(props) {
     } : undefined
   }) : React.createElement(OutputContainer, null, React.createElement(Typography, {
     variant: "h4"
-  }, bestRoute ? `≈ ${numberToString(props.outputAmount)}` : inputAmount ? '?' : '0'))))));
+  }, fetchingBestRoute && '?', !!bestRoute?.result && `≈ ${numberToString(props.outputAmount)}`, (!inputAmount || inputAmount === '0') && '0'))))));
 }
 
 const Container$1 = /*#__PURE__*/styled$1('div', {
@@ -1689,8 +1723,7 @@ function Home() {
     swap
   } = LimitErrorMessage(bestRoute);
   const priceImpactCanNotBeComputed = !canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue);
-  const inputIsZero = inputAmount === '0';
-  const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputIsZero);
+  const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount);
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
   const highFee = hasHighFee(totalFeeInUsd);
   useEffect(() => {
@@ -1727,7 +1760,7 @@ function Home() {
   }), showBestRoute && React.createElement(BestRouteContainer, null, React.createElement(BestRoute, {
     error: bestRouteError,
     loading: fetchingBestRoute,
-    data: bestRoute,
+    data: getFormatedBestRoute(bestRoute),
     totalFee: numberToString(totalFeeInUsd, 0, 2),
     feeWarning: highFee,
     totalTime: secondsToString(totalArrivalTime(bestRoute))
@@ -2052,7 +2085,7 @@ function useConfirmSwap() {
     }
     abortControllerRef.current = new AbortController();
     setLoading(true);
-    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, accounts, selectedWallets, disabledLiquiditySources, userSlippage, true, affiliateRef);
+    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, accounts, selectedWallets, disabledLiquiditySources, userSlippage, affiliateRef, initialRoute);
     try {
       const confiremedRoute = await httpService().getBestRoute(requestBody, {
         signal: abortControllerRef.current?.signal
@@ -2295,6 +2328,7 @@ function ConfirmSwapPage() {
   const customSlippage = useSettingsStore.use.customSlippage();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const outputUsdValue = useBestRouteStore.use.outputUsdValue();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
   const bestRouteloadingStatus = getBestRouteStatus(fetchingBestRoute, !!fetchingBestRouteError);
   const {
     manager
@@ -2325,10 +2359,7 @@ function ConfirmSwapPage() {
     getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
   };
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-  return React.createElement(ConfirmSwap
-  // @ts-ignore
-  , {
-    // @ts-ignore
+  return React.createElement(ConfirmSwap, {
     requiredWallets: getRequiredChains(bestRoute),
     selectableWallets: selectableWallets,
     onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
@@ -2337,15 +2368,16 @@ function ConfirmSwapPage() {
         if (swap) {
           manager?.create('swap', {
             swapDetails: swap
-          },
-          // @ts-ignore
-          {
+          }, {
             id: swap.requestId
           });
           setSelectedSwap(swap.requestId);
           navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
             replace: true
           });
+          setTimeout(() => {
+            setInputAmount('');
+          }, 0);
         }
       });
     },
@@ -2823,10 +2855,6 @@ function SwapDetailsPage() {
     loading: loading,
     onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails)
   });
-  const firstStep = swap.steps[0];
-  const lastStep = swap.steps[swap.steps.length - 1];
-  const fromAmount = numberToString(swap.inputAmount);
-  const toAmount = numberToString(swap.simulationResult.outputAmount);
   const currentStep = getCurrentStep(swap);
   const currentStepBlockchain = currentStep ? getCurrentBlockchainOfOrNull(swap, currentStep) : null;
   const currentStepWallet = currentStep ? getRelatedWalletOrNull(swap, currentStep) : null;
@@ -2839,38 +2867,41 @@ function SwapDetailsPage() {
   const lastConvertedTokenInFailedSwap = getLastConvertedTokenInFailedSwap(swap);
   return React.createElement(SwapHistory, Object.assign({
     onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
-    previewInputs: React.createElement(React.Fragment, null, React.createElement(TokenPreview, {
-      chain: {
-        displayName: firstStep?.fromBlockchain || '',
-        // @ts-ignore
-        logo: firstStep?.fromBlockchainLogo || ''
-      },
-      token: {
-        symbol: firstStep?.fromSymbol || '',
-        image: firstStep?.fromLogo || ''
-      },
-      amount: fromAmount,
-      label: t('From'),
-      loadingStatus: 'success'
-    }), React.createElement(Spacer, {
-      size: 12,
-      direction: "vertical"
-    }), React.createElement(TokenPreview, {
-      chain: {
-        displayName: lastStep?.toBlockchain || '',
-        //@ts-ignore
-        logo: lastStep?.toBlockchainLogo || ''
-      },
-      token: {
-        symbol: lastStep?.toSymbol || '',
-        image: lastStep?.toLogo || ''
-      },
-      amount: toAmount,
-      label: t('To'),
-      loadingStatus: 'success'
-    })),
-    //todo: move PendingSwap type to rango-types
-    pendingSwap: swap,
+    /* TODO: It was temporarily removed to find a better solution*/
+    /*
+    previewInputs={
+      <>
+        <TokenPreview
+          chain={{
+            displayName: firstStep?.fromBlockchain || '',
+            logo: firstStep?.fromBlockchainLogo || '',
+          }}
+          token={{
+            symbol: firstStep?.fromSymbol || '',
+            image: firstStep?.fromLogo || '',
+          }}
+          amount={fromAmount}
+          label={t('From')}
+          loadingStatus={'success'}
+        />
+        <Spacer size={12} direction="vertical" />
+        <TokenPreview
+          chain={{
+            displayName: lastStep?.toBlockchain || '',
+            logo: lastStep?.toBlockchainLogo || '',
+          }}
+          token={{
+            symbol: lastStep?.toSymbol || '',
+            image: lastStep?.toLogo || '',
+          }}
+          amount={toAmount}
+          label={t('To')}
+          loadingStatus={'success'}
+        />
+      </>
+    }
+    */
+    pendingSwap: getFormatedPendingSwap(swap),
     onCopy: handleCopy,
     isCopied: isCopied,
     onCancel: onCancel,