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

package/dist/widget-embedded.cjs.production.min.js

@@ -14,10 +14,10 @@ var reactRouterDom = require('react-router-dom');
 var zustand = require('zustand');
 var BigNumber = require('bignumber.js');
 var BigNumber__default = _interopDefault(BigNumber);
-var walletsShared = require('@rango-dev/wallets-shared');
-var walletsCore = require('@rango-dev/wallets-core');
 var middleware = require('zustand/middleware');
 var rangoSdk = require('rango-sdk');
+var walletsShared = require('@rango-dev/wallets-shared');
+var walletsCore = require('@rango-dev/wallets-core');
 var shallow = require('zustand/shallow');
 var reactI18next = require('react-i18next');
 var theme = require('@rango-dev/ui/src/theme');
@@ -126,6 +126,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 rangoSdk.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__*/zustand.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__*/zustand.create()( /*#__PURE__*/middleware.persist( /*#__PURE__*/middleware.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) {
@@ -430,7 +630,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
@@ -442,7 +642,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 {
@@ -511,7 +711,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 => {
@@ -521,7 +721,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,
@@ -645,155 +846,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 rangoSdk.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__*/zustand.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__*/zustand.create()( /*#__PURE__*/middleware.persist( /*#__PURE__*/middleware.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__*/zustand.create()( /*#__PURE__*/middleware.subscribeWithSelector(set => ({
   accounts: [],
   balances: [],
@@ -814,7 +866,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.creat
     }));
     accounts.forEach(async account => {
       try {
-        const response = await httpService.getWalletsDetails([{
+        const response = await httpService().getWalletsDetails([{
           address: account.address,
           blockchain: account.chain
         }]);
@@ -858,7 +910,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.creat
       }
     });
     return {
-      selectedWallets: selectedWallets
+      selectedWallets: state.selectedWallets.concat(selectedWallets)
     };
   }),
   setSelectedWallet: wallet => set(state => ({
@@ -910,7 +962,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
   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__default(bestRoute.result?.outputAmount) : null;
       outputUsdValue = calcOutputUsdValue(bestRoute.result?.outputAmount, getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice);
@@ -1045,18 +1097,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__default(0)
     });
-    httpService.getBestRoute(requestBody, {
+    httpService().getBestRoute(requestBody, {
       signal: abortController.signal
     }).then(res => {
       const {
@@ -1083,7 +1135,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,
@@ -1396,6 +1450,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 = reactRouterDom.useNavigate();
   const {
     t
@@ -1499,12 +1554,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__default.createElement(OutputContainer, null, React__default.createElement(ui.Typography, {
     variant: "h4"
-  }, bestRoute ? `≈ ${numberToString(props.outputAmount)}` : inputAmount ? '?' : '0'))))));
+  }, fetchingBestRoute && '?', !!bestRoute?.result && `≈ ${numberToString(props.outputAmount)}`, (!inputAmount || inputAmount === '0') && '0'))))));
 }
 
 const Container$1 = /*#__PURE__*/theme.styled('div', {
@@ -1688,8 +1744,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);
   React.useEffect(() => {
@@ -1726,7 +1781,7 @@ function Home() {
   }), showBestRoute && React__default.createElement(BestRouteContainer, null, React__default.createElement(ui.BestRoute, {
     error: bestRouteError,
     loading: fetchingBestRoute,
-    data: bestRoute,
+    data: getFormatedBestRoute(bestRoute),
     totalFee: numberToString(totalFeeInUsd, 0, 2),
     feeWarning: highFee,
     totalTime: secondsToString(totalArrivalTime(bestRoute))
@@ -1737,9 +1792,7 @@ function Home() {
     title: `${swap?.swapperId} Limit`
   }, React__default.createElement(React__default.Fragment, null, React__default.createElement(ui.Typography, {
     variant: "body2"
-  }, fromAmountRangeError), React__default.createElement("br", null), React__default.createElement(ui.Typography, {
-    variant: "body2"
-  }, "Yours: ", numberToString(swap?.fromAmount || null), swap?.from.symbol), React__default.createElement("br", null), React__default.createElement(ui.Typography, {
+  }, `${fromAmountRangeError}, Yours: ${numberToString(swap?.fromAmount || null)} ${swap?.from.symbol}`), React__default.createElement(ui.Typography, {
     variant: "body2"
   }, recommendation)))), React__default.createElement(Footer, null, React__default.createElement(ui.Button, {
     type: "primary",
@@ -1994,6 +2047,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) {
@@ -2001,7 +2055,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() {
@@ -2051,9 +2104,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;
@@ -2090,8 +2143,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);
@@ -2161,31 +2214,6 @@ function MinRequiredSlippage(_ref) {
   }), React__default.createElement(ChangeSlippageButton, null));
 }
 
-function ConfirmSwapErrors(errors) {
-  return errors.flatMap(error => {
-    switch (error.type) {
-      case ConfirmSwapErrorTypes.NO_ROUTE:
-        return React__default.createElement(ui.Typography, {
-          variant: "body2"
-        }, "No routes found. Please try again later.");
-      case ConfirmSwapErrorTypes.REQUEST_FAILED:
-        return React__default.createElement(ui.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__default.createElement(ui.Typography, {
-          variant: "body2"
-        }, "Route updated and price impact is too high, try again later!");
-      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
-        return React__default.createElement(MinRequiredSlippage, {
-          minRequiredSlippage: error.minRequiredSlippage
-        });
-      default:
-        return [];
-    }
-  });
-}
-
 const List = /*#__PURE__*/ui.styled('ul', {
   variants: {
     showListStyle: {
@@ -2206,47 +2234,63 @@ const ListItem = /*#__PURE__*/ui.styled('li', {
   }
 });
 const Message = /*#__PURE__*/ui.styled(ui.Typography, {
-  display: 'block',
-  color: '$warning500 !important'
+  display: 'block'
 });
-function BalanceWarnings(_ref) {
+function BalanceErrors(_ref) {
   let {
     messages
   } = _ref;
   const showListStyle = messages.length > 1;
-  return React__default.createElement(List, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ui.Typography, {
+    className: "title",
+    variant: "title",
+    color: 'error'
+  }, "Insufficent Balance:"), React__default.createElement(ui.Spacer, {
+    size: 8,
+    direction: "vertical"
+  }), React__default.createElement(List, {
     showListStyle: showListStyle
   }, messages.map(warning => React__default.createElement(ListItem, {
     showListStyle: showListStyle
   }, React__default.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__default.createElement(MinRequiredSlippage, {
+          minRequiredSlippage: error.minRequiredSlippage
+        });
+      case ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE:
+        return React__default.createElement(BalanceErrors, {
+          messages: error.messages
+        });
+      default:
+        return [];
+    }
+  });
 }
 
 function ConfirmSwapWarnings(warnings) {
   return warnings.flatMap(warning => {
     switch (warning.type) {
       case ConfirmSwapWarningTypes.ROUTE_UPDATED:
-        return React__default.createElement(ui.Typography, {
-          variant: "body2"
-        }, "Route has been updated.");
+        return "Route has been updated.";
       case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
-        return React__default.createElement(ui.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__default.createElement(ui.Typography, {
-          variant: "body2"
-        }, "Route swappers has been updated.");
+        return "Route swappers has been updated.";
       case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
-        return React__default.createElement(ui.Typography, {
-          variant: "body2"
-        }, "Route internal coins has been updated.");
-      case ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE:
-        return React__default.createElement(BalanceWarnings, {
-          messages: warning.messages
-        });
+        return "Route internal coins has been updated.";
       default:
         return [];
     }
@@ -2294,6 +2338,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
@@ -2324,10 +2369,7 @@ function ConfirmSwapPage() {
     getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
   };
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-  return React__default.createElement(ui.ConfirmSwap
-  // @ts-ignore
-  , {
-    // @ts-ignore
+  return React__default.createElement(ui.ConfirmSwap, {
     requiredWallets: getRequiredChains(bestRoute),
     selectableWallets: selectableWallets,
     onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
@@ -2336,15 +2378,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);
         }
       });
     },
@@ -2454,9 +2497,11 @@ function HistoryPage() {
     } = _ref;
     return swap;
   });
+  const loading = !manager?.isLoaded();
   return React__default.createElement(ui.History, {
     list: pendingSwaps,
     groupBy: groupSwapsByDate,
+    loading: loading,
     onSwapClick: requestId => {
       setSelectedSwap(requestId);
       navigate(navigationRoutes.swaps + `/${requestId}`, {
@@ -2695,8 +2740,9 @@ function WalletsPage(_ref) {
     textField: false,
     onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
   }, React__default.createElement(React__default.Fragment, null, walletErrorMessage && React__default.createElement(AlertContainer, null, React__default.createElement(ui.Alert, {
-    type: "error"
-  }, walletErrorMessage)), loadingMetaStatus === 'loading' && React__default.createElement(LoaderContainer, {
+    type: "error",
+    title: walletErrorMessage
+  })), loadingMetaStatus === 'loading' && React__default.createElement(LoaderContainer, {
     className: "loader"
   }, React__default.createElement(ui.Spinner, {
     size: 24
@@ -2760,12 +2806,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__*/ui.styled('div', {
   height: '450px'
 });
+const LoaderContainer$1 = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  paddingTop: '33%',
+  flex: 1
+});
 function SwapDetailsPlaceholder(props) {
   const {
     requestId,
@@ -2776,7 +2829,7 @@ function SwapDetailsPlaceholder(props) {
     title: "Swap Details",
     textField: false,
     onBack: onBack
-  }, React__default.createElement(PlaceholderContainer, null, loading ? React__default.createElement(LoaderContainer, null, React__default.createElement(ui.Spinner, {
+  }, React__default.createElement(PlaceholderContainer, null, loading ? React__default.createElement(LoaderContainer$1, null, React__default.createElement(ui.Spinner, {
     size: 24
   })) : React__default.createElement(ui.Alert, {
     type: "secondary",
@@ -2799,12 +2852,6 @@ function SwapDetailsPage() {
   const {
     manager
   } = queueManagerReact.useManager();
-  const [loading, setLoading] = React.useState(true);
-  React.useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 5000);
-  }, []);
   const pendingSwaps = getPendingSwaps(manager);
   const selectedSwap = pendingSwaps.find(_ref => {
     let {
@@ -2817,15 +2864,12 @@ function SwapDetailsPage() {
     if (swap) queueManagerRangoPreset.cancelSwap(swap);
   };
   const swap = selectedSwap?.swap;
+  const loading = !manager?.isLoaded();
   if (!swap) return React__default.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 = queueManagerRangoPreset.getCurrentStep(swap);
   const currentStepBlockchain = currentStep ? queueManagerRangoPreset.getCurrentBlockchainOfOrNull(swap, currentStep) : null;
   const currentStepWallet = currentStep ? queueManagerRangoPreset.getRelatedWalletOrNull(swap, currentStep) : null;
@@ -2838,38 +2882,41 @@ function SwapDetailsPage() {
   const lastConvertedTokenInFailedSwap = getLastConvertedTokenInFailedSwap(swap);
   return React__default.createElement(ui.SwapHistory, Object.assign({
     onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
-    previewInputs: React__default.createElement(React__default.Fragment, null, React__default.createElement(TokenPreview, {
-      chain: {
-        displayName: firstStep?.fromBlockchain || '',
-        // @ts-ignore
-        logo: firstStep?.fromBlockchainLogo || ''
-      },
-      token: {
-        symbol: firstStep?.fromSymbol || '',
-        image: firstStep?.fromLogo || ''
-      },
-      amount: fromAmount,
-      label: i18n.t('From'),
-      loadingStatus: 'success'
-    }), React__default.createElement(ui.Spacer, {
-      size: 12,
-      direction: "vertical"
-    }), React__default.createElement(TokenPreview, {
-      chain: {
-        displayName: lastStep?.toBlockchain || '',
-        //@ts-ignore
-        logo: lastStep?.toBlockchainLogo || ''
-      },
-      token: {
-        symbol: lastStep?.toSymbol || '',
-        image: lastStep?.toLogo || ''
-      },
-      amount: toAmount,
-      label: i18n.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,
@@ -3045,6 +3092,10 @@ function Layout(_ref) {
 
 const globalStyles = /*#__PURE__*/ui.globalCss({
   '*': {
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    listStyleType: 'none',
     '&::-webkit-scrollbar': {
       width: '$8',
       height: '$8'
@@ -3286,6 +3337,11 @@ function QueueManager(props) {
     canSwitchNetworkTo,
     getWalletInfo
   } = walletsCore.useWallets();
+  const swapQueueDef = React.useMemo(() => {
+    return queueManagerRangoPreset.makeQueueDefinition({
+      API_KEY: getConfig('API_KEY')
+    });
+  }, []);
   const {
     blockchains
   } = useMetaStore.use.meta();
@@ -3335,7 +3391,7 @@ function QueueManager(props) {
   //@ts-ignore
   , {
     //@ts-ignore
-    queuesDefs: [queueManagerRangoPreset.swapQueueDef],
+    queuesDefs: [swapQueueDef],
     context: context,
     onPersistedDataLoaded: manager => {
       queueManagerRangoPreset.checkWaitingForNetworkChange(manager);
@@ -3344,7 +3400,7 @@ function QueueManager(props) {
   }, props.children);
 }
 
-const SwapBox = _ref => {
+const Widget = _ref => {
   let {
     config
   } = _ref;
@@ -3368,6 +3424,13 @@ const SwapBox = _ref => {
   const [disconnectedWallet, setDisconnectedWallet] = React.useState();
   const currentPage = useUiStore.use.currentPage();
   const evmBasedChainNames = blockchains.filter(rangoSdk.isEvmBlockchain).map(chain => chain.name);
+  React.useMemo(() => {
+    if (config?.apiKey) {
+      initConfig({
+        API_KEY: config?.apiKey
+      });
+    }
+  }, [config]);
   const onUpdateState = (type, event, value, state, supportedChains) => {
     if (event === walletsCore.Events.ACCOUNTS) {
       if (value) {
@@ -3421,5 +3484,11 @@ const SwapBox = _ref => {
   }))))));
 };
 
-exports.SwapBox = SwapBox;
+Object.defineProperty(exports, 'WalletType', {
+  enumerable: true,
+  get: function () {
+    return walletsShared.WalletType;
+  }
+});
+exports.Widget = Widget;
 //# sourceMappingURL=widget-embedded.cjs.production.min.js.map