@rango-dev/widget-embedded 0.1.12 → 0.1.13-next.4

package/dist/widget-embedded.esm.js

@@ -1,4 +1,4 @@
-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 { 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, useCopyToClipboard, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
 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, makeQueueDefinition, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
@@ -18,7 +18,6 @@ import { allProviders } from '@rango-dev/provider-all';
 import i18n, { t } from 'i18next';
 import { useManager, Provider } from '@rango-dev/queue-manager-react';
 import dayjs from 'dayjs';
-import copy from 'copy-to-clipboard';
 import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
@@ -91,7 +90,7 @@ const numberToString = function (number, minDecimals, maxDecimals) {
   if (maxDecimals === void 0) {
     maxDecimals = null;
   }
-  if (number === null) return '';
+  if (number === null || number === undefined) return '';
   if (number === '') return '';
   const n = new BigNumber$1(number);
   const roundingMode = 1;
@@ -112,12 +111,6 @@ const numberToString = function (number, minDecimals, maxDecimals) {
   return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 8))), roundingMode);
 };
 const totalArrivalTime = data => data?.result?.swaps?.reduce((a, b) => a + b.estimatedTimeInSeconds, 0) || 0;
-const decimalNumber = function (number, toFixed) {
-  if (number === void 0) {
-    number = '0';
-  }
-  return parseFloat(number).toFixed(toFixed);
-};
 const isPositiveNumber = text => !!text && parseFloat(text) > 0;
 
 function searchParamsToToken(tokens, searchParams, chain) {
@@ -838,12 +831,12 @@ function shouldRetrySwap(pendingSwap) {
   return pendingSwap.status === 'failed' && !!pendingSwap.finishTime && new Date().getTime() - parseInt(pendingSwap.finishTime) < 4 * 3600 * 1000;
 }
 
-const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector(set => ({
+const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector((set, get) => ({
   accounts: [],
   balances: [],
   selectedWallets: [],
   connectWallet: accounts => {
-    const tokens = useMetaStore.getState().meta.tokens;
+    const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
     set(state => ({
       accounts: state.accounts.concat(accounts),
       balances: state.balances.concat(accounts.map(account => ({
@@ -856,28 +849,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
         explorerUrl: null
       })))
     }));
-    accounts.forEach(async account => {
-      try {
-        const response = await httpService().getWalletsDetails([{
-          address: account.address,
-          blockchain: account.chain
-        }]);
-        const retrivedBalance = response.wallets[0];
-        if (retrivedBalance) {
-          set(state => ({
-            balances: state.balances.map(balance => {
-              return isAccountAndBalanceMatched(account, balance) ? makeBalanceFor(account, retrivedBalance, tokens) : balance;
-            })
-          }));
-        } else throw new Error('Wallet not found');
-      } catch (error) {
-        set(state => ({
-          balances: state.balances.map(balance => {
-            return isAccountAndBalanceMatched(account, balance) ? resetBalanceState(balance) : balance;
-          })
-        }));
-      }
-    });
+    accounts.forEach(async account => getOneOfWalletsDetails(account));
   },
   disconnectWallet: walletType => {
     set(state => ({
@@ -916,7 +888,38 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
     accounts: [],
     balances: [],
     selectedWallets: []
-  }))
+  })),
+  getOneOfWalletsDetails: async account => {
+    const tokens = useMetaStore.getState().meta.tokens;
+    set(state => ({
+      balances: state.balances.map(balance => {
+        return balance.address === account.address && balance.chain === account.chain ? {
+          ...balance,
+          loading: true
+        } : balance;
+      })
+    }));
+    try {
+      const response = await httpService().getWalletsDetails([{
+        address: account.address,
+        blockchain: account.chain
+      }]);
+      const retrivedBalance = response.wallets[0];
+      if (retrivedBalance) {
+        set(state => ({
+          balances: state.balances.map(balance => {
+            return isAccountAndBalanceMatched(account, balance) ? makeBalanceFor(account, retrivedBalance, tokens) : balance;
+          })
+        }));
+      } else throw new Error('Wallet not found');
+    } catch (error) {
+      set(state => ({
+        balances: state.balances.map(balance => {
+          return isAccountAndBalanceMatched(account, balance) ? resetBalanceState(balance) : balance;
+        })
+      }));
+    }
+  }
 }))));
 useWalletsStore.subscribe(state => state.balances, balances => {
   useBestRouteStore.setState(_ref => {
@@ -967,6 +970,13 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
       })
     };
   }),
+  resetRoute: () => set(() => ({
+    loading: true,
+    error: '',
+    bestRoute: null,
+    outputAmount: null,
+    outputUsdValue: new BigNumber(0)
+  })),
   setFromChain: (chain, setDefaultToken) => {
     set(state => {
       if (state.fromChain?.name === chain?.name) return {};
@@ -1016,7 +1026,8 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
       ...(!amount && {
         outputAmount: new BigNumber(0),
         outputUsdValue: new BigNumber(0),
-        bestRoute: null
+        bestRoute: null,
+        error: ''
       }),
       ...(!!state.fromToken && {
         inputUsdValue: getUsdValue(state.fromToken, amount)
@@ -1081,7 +1092,8 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     const {
       fromToken,
       toToken,
-      inputAmount
+      inputAmount,
+      resetRoute
     } = bestRouteStore.getState();
     const {
       slippage,
@@ -1094,12 +1106,9 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     abortController = new AbortController();
     const userSlippage = !!customSlippage ? customSlippage : slippage;
     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)
-    });
+    if (!bestRouteStore.getState().loading) {
+      resetRoute();
+    }
     httpService().getBestRoute(requestBody, {
       signal: abortController.signal
     }).then(res => {
@@ -1125,7 +1134,8 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       fromToken,
       toToken,
       inputAmount,
-      inputUsdValue
+      inputUsdValue,
+      resetRoute
     } = useBestRouteStore.getState();
     if (!isPositiveNumber(inputAmount) || inputUsdValue.eq(0)) return bestRouteStore.setState({
       loading: false
@@ -1136,12 +1146,7 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       outputAmount: new BigNumber(inputAmount),
       outputUsdValue: inputUsdValue
     });
-    if (!bestRouteStore.getState().loading) bestRouteStore.setState({
-      loading: true,
-      bestRoute: null,
-      outputAmount: null,
-      outputUsdValue: new BigNumber(0)
-    });
+    if (!bestRouteStore.getState().loading) resetRoute();
     debouncedFetchBestRoute();
   };
   useBestRouteStore.subscribe(state => ({
@@ -1352,7 +1357,8 @@ function PercentageChange(props) {
 const Box = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
-  width: '100%'
+  width: '100%',
+  overflow: 'hidden'
 });
 const Container = /*#__PURE__*/styled('div', {
   boxSizing: 'border-box',
@@ -1578,7 +1584,8 @@ function BottomLogo() {
     t
   } = useTranslation();
   return React.createElement(Container$1, null, React.createElement(Typography, {
-    variant: "caption"
+    variant: "caption",
+    color: '$neutrals600'
   }, t('Powered By')), React.createElement(StyledAnchor, {
     href: "https://rango.exchange",
     target: "_blank"
@@ -1746,7 +1753,7 @@ function Home() {
   return React.createElement(Container$2, null, React.createElement(Header$1, {
     title: "SWAP",
     suffix: React.createElement(HeaderButtons, {
-      onClickRefresh: !!bestRoute ? fetchBestRoute : undefined
+      onClickRefresh: !!bestRoute || bestRouteError ? fetchBestRoute : undefined
     })
   }), React.createElement(FromContainer, null, React.createElement(TokenInfo, {
     type: "From",
@@ -1863,7 +1870,8 @@ function useNavigateBack() {
 const Box$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
-  width: '100%'
+  width: '100%',
+  overflow: 'hidden'
 });
 const Container$3 = /*#__PURE__*/styled('div', {
   boxSizing: 'border-box',
@@ -2017,7 +2025,9 @@ function RoutesOverview(props) {
     className: "routes"
   }, swaps?.map((swap, idx) => {
     const isLast = idx + 1 == swaps.length;
-    return React.createElement(React.Fragment, null, React.createElement("div", {
+    return React.createElement(React.Fragment, {
+      key: idx
+    }, React.createElement("div", {
       className: "route"
     }, swap.from.symbol), React.createElement(ChevronRightIcon, {
       size: 12
@@ -2207,6 +2217,8 @@ function MinRequiredSlippage(_ref) {
 }
 
 const List = /*#__PURE__*/styled('ul', {
+  padding: 0,
+  margin: 0,
   variants: {
     showListStyle: {
       true: {
@@ -2350,8 +2362,8 @@ function ConfirmSwapPage() {
   const confirmDisabled = fetchingBestRoute || !requiredWallets(bestRoute).every(chain => selectedWallets.map(wallet => wallet.chain).includes(chain));
   const firstStep = bestRoute?.result?.swaps[0];
   const lastStep = bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
-  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
-  const toAmount = decimalNumber(lastStep?.toAmount, 3);
+  const fromAmount = numberToString(firstStep?.fromAmount, 4, 6);
+  const toAmount = numberToString(lastStep?.toAmount, 4, 6);
   useEffect(() => {
     initSelectedWallets();
   }, []);
@@ -2481,7 +2493,8 @@ function HistoryPage() {
     navigateBackFrom
   } = useNavigateBack();
   const {
-    manager
+    manager,
+    state
   } = useManager();
   const pendingSwaps = getPendingSwaps(manager).map(_ref => {
     let {
@@ -2489,7 +2502,7 @@ function HistoryPage() {
     } = _ref;
     return swap;
   });
-  const loading = !manager?.isLoaded();
+  const loading = !state.loadedFromPersistor;
   return React.createElement(History, {
     list: pendingSwaps,
     groupBy: groupSwapsByDate,
@@ -2744,24 +2757,6 @@ function WalletsPage(_ref) {
   }))))));
 }
 
-function useCopyToClipboard(resetInterval) {
-  const [isCopied, setCopied] = React.useState(false);
-  const handleCopy = React.useCallback(text => {
-    copy(text.toString());
-    setCopied(true);
-  }, []);
-  React.useEffect(() => {
-    let timeout;
-    if (isCopied && resetInterval) {
-      timeout = setTimeout(() => setCopied(false), resetInterval);
-    }
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [isCopied, resetInterval]);
-  return [isCopied, handleCopy];
-}
-
 function timeSince(timeMillis) {
   const seconds = Math.floor((new Date().getTime() - timeMillis) / 1000);
   let intervalType;
@@ -2842,7 +2837,8 @@ function SwapDetailsPage() {
   } = useNavigateBack();
   const [isCopied, handleCopy] = useCopyToClipboard(2000);
   const {
-    manager
+    manager,
+    state
   } = useManager();
   const pendingSwaps = getPendingSwaps(manager);
   const selectedSwap = pendingSwaps.find(_ref => {
@@ -2856,7 +2852,7 @@ function SwapDetailsPage() {
     if (swap) cancelSwap(swap);
   };
   const swap = selectedSwap?.swap;
-  const loading = !manager?.isLoaded();
+  const loading = !state.loadedFromPersistor;
   if (!swap) return React.createElement(SwapDetailsPlaceholder, {
     requestId: selectedSwapRequestId || '',
     loading: loading,
@@ -3005,7 +3001,9 @@ const Header = /*#__PURE__*/styled('div', {
 const WalletImageContainer = /*#__PURE__*/styled('div', {
   marginLeft: -15,
   marginRight: '$6',
-  borderRadius: '99999px'
+  '& img': {
+    borderRadius: '50%'
+  }
 });
 function Layout(_ref) {
   let {
@@ -3082,28 +3080,6 @@ function Layout(_ref) {
   }));
 }
 
-const globalStyles = /*#__PURE__*/globalCss({
-  '*': {
-    boxSizing: 'border-box',
-    margin: 0,
-    padding: 0,
-    listStyleType: 'none',
-    '&::-webkit-scrollbar': {
-      width: '$8',
-      height: '$8'
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '$neutrals400',
-      borderRadius: '$10'
-    },
-    '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: '$neutrals500'
-    },
-    '&::-webkit-scrollbar-track': {
-      backgroundColor: '$neutrals300'
-    }
-  }
-});
 const globalFont = fontFamily => globalCss({
   '@import': ["url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')", "url('https://fonts.cdnfonts.com/css/times-new-roman')"],
   body: {
@@ -3334,6 +3310,8 @@ function QueueManager(props) {
       API_KEY: getConfig('API_KEY')
     });
   }, []);
+  const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
+  const accounts = useWalletsStore.use.accounts();
   const {
     blockchains
   } = useMetaStore.use.meta();
@@ -3360,6 +3338,17 @@ function QueueManager(props) {
     return walletAndSupportedChainsNames(supportedChains);
   };
   const allProviders = providers();
+  const notifier = data => {
+    const lastStep = data.swap?.steps[data.swap.steps.length - 1];
+    const outputAmount = data.step?.outputAmount || '';
+    const step = data.step || lastStep;
+    if (data.eventType === 'task_completed' || data.eventType === 'step_completed_with_output' && lastStep?.id !== data.step?.id || !!outputAmount) {
+      const fromAccount = accounts.find(account => account.chain === step?.fromBlockchain);
+      const toAccount = step?.fromBlockchain !== step?.toBlockchain && accounts.find(account => account.chain === step?.toBlockchain);
+      fromAccount && getOneOfWalletsDetails(fromAccount);
+      toAccount && getOneOfWalletsDetails(toAccount);
+    }
+  };
   const context = {
     meta: {
       blockchains: allBlockchains,
@@ -3375,9 +3364,7 @@ function QueueManager(props) {
     switchNetwork,
     connect,
     state,
-    notifier: message => {
-      console.log('[notifier]', message);
-    }
+    notifier
   };
   return React.createElement(Provider
   //@ts-ignore
@@ -3396,7 +3383,6 @@ const Widget = _ref => {
   let {
     config
   } = _ref;
-  globalStyles();
   globalFont(config?.theme?.fontFamily || 'Roboto');
   const {
     activeTheme
@@ -3461,7 +3447,6 @@ const Widget = _ref => {
     providers: providers,
     onUpdateState: onUpdateState
   }, React.createElement("div", {
-    id: "pageContainer",
     className: activeTheme
   }, React.createElement(QueueManager, null, React.createElement(SwapContainer, {
     fixedHeight: currentPage !== navigationRoutes.home