@rango-dev/widget-embedded 0.1.11-next.11 → 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:
@@ -637,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: [],
@@ -1730,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))
@@ -2345,7 +2375,9 @@ function ConfirmSwapPage() {
           navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
             replace: true
           });
-          setInputAmount('');
+          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,