@rango-dev/widget-embedded 0.1.11-next.8 → 0.1.11

package/dist/widget-embedded.esm.js

@@ -1,15 +1,16 @@
 import { WalletState, Typography, InfoCircleIcon, AngleDownIcon, Spacer, Button, Image, TextField, styled, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, Alert, ChevronRightIcon, GasIcon, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, LoadingFailedAlert, Wallet, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
-import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
+import React, { useRef, useEffect, useState, useLayoutEffect, useMemo } from 'react';
 import { useInRouterContext as useInRouterContext$1, MemoryRouter, useLocation as useLocation$1, useNavigate as useNavigate$1 } from 'react-router';
-import { PendingSwapNetworkStatus, useQueueManager, calculatePendingSwap, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, swapQueueDef, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
+import { PendingSwapNetworkStatus, useQueueManager, calculatePendingSwap, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, makeQueueDefinition, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
 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';
+export { WalletType } 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';
@@ -117,6 +118,206 @@ const decimalNumber = function (number, toFixed) {
   }
   return parseFloat(number).toFixed(toFixed);
 };
+const isPositiveNumber = text => !!text && parseFloat(text) > 0;
+
+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];
+}
+function initConfig(nextConfigs) {
+  let clonedConfigs;
+  if (typeof structuredClone === 'function') {
+    clonedConfigs = structuredClone(nextConfigs);
+  } else {
+    clonedConfigs = JSON.parse(JSON.stringify(nextConfigs));
+  }
+  configs = clonedConfigs;
+  return configs;
+}
+
+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) {
@@ -421,7 +622,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 +634,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 +703,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 +713,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,155 +838,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;
-};
-
-// this API key is limited and
-// it is only for test purpose
-const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
-const httpService = /*#__PURE__*/new RangoClient(process.env.REACT_APP_API_KEY || RANGO_PUBLIC_API_KEY);
-
-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: [],
@@ -805,7 +858,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
     }));
     accounts.forEach(async account => {
       try {
-        const response = await httpService.getWalletsDetails([{
+        const response = await httpService().getWalletsDetails([{
           address: account.address,
           blockchain: account.chain
         }]);
@@ -849,7 +902,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
       }
     });
     return {
-      selectedWallets: selectedWallets
+      selectedWallets: state.selectedWallets.concat(selectedWallets)
     };
   }),
   setSelectedWallet: wallet => set(state => ({
@@ -901,7 +954,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
   setBestRoute: bestRoute => set(state => {
     let outputAmount = null;
     let outputUsdValue = ZERO;
-    if (!state.inputAmount || state.inputAmount === '0') return {};
+    if (!isPositiveNumber(state.inputAmount)) return {};
     if (!!bestRoute) {
       outputAmount = !!bestRoute.result?.outputAmount ? new BigNumber(bestRoute.result?.outputAmount) : null;
       outputUsdValue = calcOutputUsdValue(bestRoute.result?.outputAmount, getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice);
@@ -1036,18 +1089,18 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       disabledLiquiditySources,
       affiliateRef
     } = settingsStore.getState();
-    if (!fromToken || !toToken || !inputAmount || inputAmount === '0') return;
+    if (!fromToken || !toToken || !isPositiveNumber(inputAmount)) return;
     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,
       outputAmount: null,
       outputUsdValue: new BigNumber(0)
     });
-    httpService.getBestRoute(requestBody, {
+    httpService().getBestRoute(requestBody, {
       signal: abortController.signal
     }).then(res => {
       const {
@@ -1074,7 +1127,9 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       inputAmount,
       inputUsdValue
     } = useBestRouteStore.getState();
-    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0)) return;
+    if (!isPositiveNumber(inputAmount) || inputUsdValue.eq(0)) return bestRouteStore.setState({
+      loading: false
+    });
     if (tokensAreEqual(fromToken, toToken)) return bestRouteStore.setState({
       loading: false,
       bestRoute: null,
@@ -1387,6 +1442,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
@@ -1490,12 +1546,13 @@ function TokenInfo(props) {
       color: "neutrals800"
     }, `$${numberToString(inputUsdValue)}`)),
     value: props.inputAmount || '',
+    min: 0,
     onChange: props.type === 'From' ? event => {
       props.onAmountChange(event.target.value);
     } : 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', {
@@ -1679,8 +1736,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(() => {
@@ -1717,7 +1773,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))
@@ -1728,9 +1784,7 @@ function Home() {
     title: `${swap?.swapperId} Limit`
   }, React.createElement(React.Fragment, null, React.createElement(Typography, {
     variant: "body2"
-  }, fromAmountRangeError), React.createElement("br", null), React.createElement(Typography, {
-    variant: "body2"
-  }, "Yours: ", numberToString(swap?.fromAmount || null), swap?.from.symbol), React.createElement("br", null), React.createElement(Typography, {
+  }, `${fromAmountRangeError}, Yours: ${numberToString(swap?.fromAmount || null)} ${swap?.from.symbol}`), React.createElement(Typography, {
     variant: "body2"
   }, recommendation)))), React.createElement(Footer, null, React.createElement(Button, {
     type: "primary",
@@ -1985,6 +2039,7 @@ var ConfirmSwapErrorTypes;
   ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS"] = 1] = "ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS";
   ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["REQUEST_FAILED"] = 2] = "REQUEST_FAILED";
   ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["INSUFFICIENT_SLIPPAGE"] = 3] = "INSUFFICIENT_SLIPPAGE";
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["INSUFFICIENT_BALANCE"] = 4] = "INSUFFICIENT_BALANCE";
 })(ConfirmSwapErrorTypes || (ConfirmSwapErrorTypes = {}));
 var ConfirmSwapWarningTypes;
 (function (ConfirmSwapWarningTypes) {
@@ -1992,7 +2047,6 @@ var ConfirmSwapWarningTypes;
   ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_SWAPPERS_UPDATED"] = 1] = "ROUTE_SWAPPERS_UPDATED";
   ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_COINS_UPDATED"] = 2] = "ROUTE_COINS_UPDATED";
   ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_AND_OUTPUT_AMOUNT_UPDATED"] = 3] = "ROUTE_AND_OUTPUT_AMOUNT_UPDATED";
-  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["INSUFFICIENT_BALANCE"] = 4] = "INSUFFICIENT_BALANCE";
 })(ConfirmSwapWarningTypes || (ConfirmSwapWarningTypes = {}));
 
 function useConfirmSwap() {
@@ -2042,9 +2096,9 @@ 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, {
+      const confiremedRoute = await httpService().getBestRoute(requestBody, {
         signal: abortControllerRef.current?.signal
       });
       abortControllerRef.current = null;
@@ -2081,8 +2135,8 @@ function useConfirmSwap() {
       }
       const balanceWarnings = getBalanceWarnings(confiremedRoute, selectedWallets);
       const enoughBalance = balanceWarnings.length === 0;
-      if (!enoughBalance) confirmSwapState.warnings.push({
-        type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE,
+      if (!enoughBalance) confirmSwapState.errors.push({
+        type: ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE,
         messages: balanceWarnings
       });
       const minRequiredSlippage = getMinRequiredSlippage(initialRoute);
@@ -2152,31 +2206,6 @@ function MinRequiredSlippage(_ref) {
   }), React.createElement(ChangeSlippageButton, null));
 }
 
-function ConfirmSwapErrors(errors) {
-  return errors.flatMap(error => {
-    switch (error.type) {
-      case ConfirmSwapErrorTypes.NO_ROUTE:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "No routes found. Please try again later.");
-      case ConfirmSwapErrorTypes.REQUEST_FAILED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, `Failed to confirm swap ${error.status ? `'status': ${error.status})` : ''}, please try again.`);
-      case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "Route updated and price impact is too high, try again later!");
-      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
-        return React.createElement(MinRequiredSlippage, {
-          minRequiredSlippage: error.minRequiredSlippage
-        });
-      default:
-        return [];
-    }
-  });
-}
-
 const List = /*#__PURE__*/styled('ul', {
   variants: {
     showListStyle: {
@@ -2197,47 +2226,63 @@ const ListItem = /*#__PURE__*/styled('li', {
   }
 });
 const Message = /*#__PURE__*/styled(Typography, {
-  display: 'block',
-  color: '$warning500 !important'
+  display: 'block'
 });
-function BalanceWarnings(_ref) {
+function BalanceErrors(_ref) {
   let {
     messages
   } = _ref;
   const showListStyle = messages.length > 1;
-  return React.createElement(List, {
+  return React.createElement(React.Fragment, null, React.createElement(Typography, {
+    className: "title",
+    variant: "title",
+    color: 'error'
+  }, "Insufficent Balance:"), React.createElement(Spacer, {
+    size: 8,
+    direction: "vertical"
+  }), React.createElement(List, {
     showListStyle: showListStyle
   }, messages.map(warning => React.createElement(ListItem, {
     showListStyle: showListStyle
   }, React.createElement(Message, {
     variant: "body2"
-  }, warning))));
+  }, warning)))));
+}
+
+function ConfirmSwapErrors(errors) {
+  return errors.flatMap(error => {
+    switch (error.type) {
+      case ConfirmSwapErrorTypes.NO_ROUTE:
+        return 'No routes found. Please try again later.';
+      case ConfirmSwapErrorTypes.REQUEST_FAILED:
+        return `Failed to confirm swap ${error.status ? `'status': ${error.status})` : ''}, please try again.`;
+      case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
+        return 'Route updated and price impact is too high, try again later!';
+      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
+        return React.createElement(MinRequiredSlippage, {
+          minRequiredSlippage: error.minRequiredSlippage
+        });
+      case ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE:
+        return React.createElement(BalanceErrors, {
+          messages: error.messages
+        });
+      default:
+        return [];
+    }
+  });
 }
 
 function ConfirmSwapWarnings(warnings) {
   return warnings.flatMap(warning => {
     switch (warning.type) {
       case ConfirmSwapWarningTypes.ROUTE_UPDATED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "Route has been updated.");
+        return "Route has been updated.";
       case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, `Output amount changed to ${warning.newOutputAmount} 
-      (${warning.percentageChange}% change).`);
+        return `Output amount changed to ${warning.newOutputAmount} (${warning.percentageChange}% change).`;
       case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "Route swappers has been updated.");
+        return "Route swappers has been updated.";
       case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "Route internal coins has been updated.");
-      case ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE:
-        return React.createElement(BalanceWarnings, {
-          messages: warning.messages
-        });
+        return "Route internal coins has been updated.";
       default:
         return [];
     }
@@ -2285,6 +2330,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
@@ -2315,10 +2361,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),
@@ -2327,15 +2370,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);
         }
       });
     },
@@ -2445,9 +2489,11 @@ function HistoryPage() {
     } = _ref;
     return swap;
   });
+  const loading = !manager?.isLoaded();
   return React.createElement(History, {
     list: pendingSwaps,
     groupBy: groupSwapsByDate,
+    loading: loading,
     onSwapClick: requestId => {
       setSelectedSwap(requestId);
       navigate(navigationRoutes.swaps + `/${requestId}`, {
@@ -2686,8 +2732,9 @@ function WalletsPage(_ref) {
     textField: false,
     onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
   }, React.createElement(React.Fragment, null, walletErrorMessage && React.createElement(AlertContainer, null, React.createElement(Alert, {
-    type: "error"
-  }, walletErrorMessage)), loadingMetaStatus === 'loading' && React.createElement(LoaderContainer, {
+    type: "error",
+    title: walletErrorMessage
+  })), loadingMetaStatus === 'loading' && React.createElement(LoaderContainer, {
     className: "loader"
   }, React.createElement(Spinner, {
     size: 24
@@ -2751,12 +2798,19 @@ function timeSince(timeMillis) {
   return interval + ' ' + intervalType;
 }
 function getSwapDate(pendingSwap) {
-  return pendingSwap.finishTime ? `Finished ${timeSince(parseInt(pendingSwap.finishTime))} ago @ ${new Date(parseInt(pendingSwap.finishTime)).toLocaleString()}` : `Started ${timeSince(parseInt(pendingSwap.creationTime))} ago @ ${new Date(parseInt(pendingSwap.creationTime)).toLocaleString()}`;
+  return pendingSwap.finishTime ? `${timeSince(parseInt(pendingSwap.finishTime))} ago` : `${timeSince(parseInt(pendingSwap.creationTime))} ago`;
 }
 
 const PlaceholderContainer = /*#__PURE__*/styled('div', {
   height: '450px'
 });
+const LoaderContainer$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  paddingTop: '33%',
+  flex: 1
+});
 function SwapDetailsPlaceholder(props) {
   const {
     requestId,
@@ -2767,7 +2821,7 @@ function SwapDetailsPlaceholder(props) {
     title: "Swap Details",
     textField: false,
     onBack: onBack
-  }, React.createElement(PlaceholderContainer, null, loading ? React.createElement(LoaderContainer, null, React.createElement(Spinner, {
+  }, React.createElement(PlaceholderContainer, null, loading ? React.createElement(LoaderContainer$1, null, React.createElement(Spinner, {
     size: 24
   })) : React.createElement(Alert, {
     type: "secondary",
@@ -2790,12 +2844,6 @@ function SwapDetailsPage() {
   const {
     manager
   } = useManager();
-  const [loading, setLoading] = useState(true);
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 5000);
-  }, []);
   const pendingSwaps = getPendingSwaps(manager);
   const selectedSwap = pendingSwaps.find(_ref => {
     let {
@@ -2808,15 +2856,12 @@ function SwapDetailsPage() {
     if (swap) cancelSwap(swap);
   };
   const swap = selectedSwap?.swap;
+  const loading = !manager?.isLoaded();
   if (!swap) return React.createElement(SwapDetailsPlaceholder, {
     requestId: selectedSwapRequestId || '',
     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;
@@ -2829,38 +2874,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,
@@ -3036,6 +3084,10 @@ function Layout(_ref) {
 
 const globalStyles = /*#__PURE__*/globalCss({
   '*': {
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    listStyleType: 'none',
     '&::-webkit-scrollbar': {
       width: '$8',
       height: '$8'
@@ -3277,6 +3329,11 @@ function QueueManager(props) {
     canSwitchNetworkTo,
     getWalletInfo
   } = useWallets();
+  const swapQueueDef = useMemo(() => {
+    return makeQueueDefinition({
+      API_KEY: getConfig('API_KEY')
+    });
+  }, []);
   const {
     blockchains
   } = useMetaStore.use.meta();
@@ -3335,7 +3392,7 @@ function QueueManager(props) {
   }, props.children);
 }
 
-const SwapBox = _ref => {
+const Widget = _ref => {
   let {
     config
   } = _ref;
@@ -3359,6 +3416,13 @@ const SwapBox = _ref => {
   const [disconnectedWallet, setDisconnectedWallet] = useState();
   const currentPage = useUiStore.use.currentPage();
   const evmBasedChainNames = blockchains.filter(isEvmBlockchain$1).map(chain => chain.name);
+  useMemo(() => {
+    if (config?.apiKey) {
+      initConfig({
+        API_KEY: config?.apiKey
+      });
+    }
+  }, [config]);
   const onUpdateState = (type, event, value, state, supportedChains) => {
     if (event === Events.ACCOUNTS) {
       if (value) {
@@ -3412,5 +3476,5 @@ const SwapBox = _ref => {
   }))))));
 };
 
-export { SwapBox };
+export { Widget };
 //# sourceMappingURL=widget-embedded.esm.js.map