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

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

@@ -26,7 +26,6 @@ var i18n = require('i18next');
 var i18n__default = _interopDefault(i18n);
 var queueManagerReact = require('@rango-dev/queue-manager-react');
 var dayjs = _interopDefault(require('dayjs'));
-var copy = _interopDefault(require('copy-to-clipboard'));
 var Backend = _interopDefault(require('i18next-http-backend'));
 var LanguageDetector = _interopDefault(require('i18next-browser-languagedetector'));
 
@@ -99,7 +98,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.BigNumber(number);
   const roundingMode = 1;
@@ -120,12 +119,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) {
@@ -846,12 +839,12 @@ function shouldRetrySwap(pendingSwap) {
   return pendingSwap.status === 'failed' && !!pendingSwap.finishTime && new Date().getTime() - parseInt(pendingSwap.finishTime) < 4 * 3600 * 1000;
 }
 
-const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.subscribeWithSelector(set => ({
+const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.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 => ({
@@ -864,28 +857,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.creat
         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 => ({
@@ -924,7 +896,38 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.creat
     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 => {
@@ -975,6 +978,13 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
       })
     };
   }),
+  resetRoute: () => set(() => ({
+    loading: true,
+    error: '',
+    bestRoute: null,
+    outputAmount: null,
+    outputUsdValue: new BigNumber__default(0)
+  })),
   setFromChain: (chain, setDefaultToken) => {
     set(state => {
       if (state.fromChain?.name === chain?.name) return {};
@@ -1024,7 +1034,8 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
       ...(!amount && {
         outputAmount: new BigNumber__default(0),
         outputUsdValue: new BigNumber__default(0),
-        bestRoute: null
+        bestRoute: null,
+        error: ''
       }),
       ...(!!state.fromToken && {
         inputUsdValue: getUsdValue(state.fromToken, amount)
@@ -1089,7 +1100,8 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     const {
       fromToken,
       toToken,
-      inputAmount
+      inputAmount,
+      resetRoute
     } = bestRouteStore.getState();
     const {
       slippage,
@@ -1102,12 +1114,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__default(0)
-    });
+    if (!bestRouteStore.getState().loading) {
+      resetRoute();
+    }
     httpService().getBestRoute(requestBody, {
       signal: abortController.signal
     }).then(res => {
@@ -1133,7 +1142,8 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       fromToken,
       toToken,
       inputAmount,
-      inputUsdValue
+      inputUsdValue,
+      resetRoute
     } = useBestRouteStore.getState();
     if (!isPositiveNumber(inputAmount) || inputUsdValue.eq(0)) return bestRouteStore.setState({
       loading: false
@@ -1144,12 +1154,7 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       outputAmount: new BigNumber__default(inputAmount),
       outputUsdValue: inputUsdValue
     });
-    if (!bestRouteStore.getState().loading) bestRouteStore.setState({
-      loading: true,
-      bestRoute: null,
-      outputAmount: null,
-      outputUsdValue: new BigNumber__default(0)
-    });
+    if (!bestRouteStore.getState().loading) resetRoute();
     debouncedFetchBestRoute();
   };
   useBestRouteStore.subscribe(state => ({
@@ -1360,7 +1365,8 @@ function PercentageChange(props) {
 const Box = /*#__PURE__*/ui.styled('div', {
   display: 'flex',
   flexDirection: 'column',
-  width: '100%'
+  width: '100%',
+  overflow: 'hidden'
 });
 const Container = /*#__PURE__*/ui.styled('div', {
   boxSizing: 'border-box',
@@ -1586,7 +1592,8 @@ function BottomLogo() {
     t
   } = reactI18next.useTranslation();
   return React__default.createElement(Container$1, null, React__default.createElement(ui.Typography, {
-    variant: "caption"
+    variant: "caption",
+    color: '$neutrals600'
   }, t('Powered By')), React__default.createElement(StyledAnchor, {
     href: "https://rango.exchange",
     target: "_blank"
@@ -1754,7 +1761,7 @@ function Home() {
   return React__default.createElement(Container$2, null, React__default.createElement(ui.Header, {
     title: "SWAP",
     suffix: React__default.createElement(HeaderButtons, {
-      onClickRefresh: !!bestRoute ? fetchBestRoute : undefined
+      onClickRefresh: !!bestRoute || bestRouteError ? fetchBestRoute : undefined
     })
   }), React__default.createElement(FromContainer, null, React__default.createElement(TokenInfo, {
     type: "From",
@@ -1871,7 +1878,8 @@ function useNavigateBack() {
 const Box$1 = /*#__PURE__*/ui.styled('div', {
   display: 'flex',
   flexDirection: 'column',
-  width: '100%'
+  width: '100%',
+  overflow: 'hidden'
 });
 const Container$3 = /*#__PURE__*/ui.styled('div', {
   boxSizing: 'border-box',
@@ -2025,7 +2033,9 @@ function RoutesOverview(props) {
     className: "routes"
   }, swaps?.map((swap, idx) => {
     const isLast = idx + 1 == swaps.length;
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    return React__default.createElement(React__default.Fragment, {
+      key: idx
+    }, React__default.createElement("div", {
       className: "route"
     }, swap.from.symbol), React__default.createElement(ui.ChevronRightIcon, {
       size: 12
@@ -2215,6 +2225,8 @@ function MinRequiredSlippage(_ref) {
 }
 
 const List = /*#__PURE__*/ui.styled('ul', {
+  padding: 0,
+  margin: 0,
   variants: {
     showListStyle: {
       true: {
@@ -2358,8 +2370,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);
   React.useEffect(() => {
     initSelectedWallets();
   }, []);
@@ -2489,7 +2501,8 @@ function HistoryPage() {
     navigateBackFrom
   } = useNavigateBack();
   const {
-    manager
+    manager,
+    state
   } = queueManagerReact.useManager();
   const pendingSwaps = getPendingSwaps(manager).map(_ref => {
     let {
@@ -2497,7 +2510,7 @@ function HistoryPage() {
     } = _ref;
     return swap;
   });
-  const loading = !manager?.isLoaded();
+  const loading = !state.loadedFromPersistor;
   return React__default.createElement(ui.History, {
     list: pendingSwaps,
     groupBy: groupSwapsByDate,
@@ -2752,24 +2765,6 @@ function WalletsPage(_ref) {
   }))))));
 }
 
-function useCopyToClipboard(resetInterval) {
-  const [isCopied, setCopied] = React__default.useState(false);
-  const handleCopy = React__default.useCallback(text => {
-    copy(text.toString());
-    setCopied(true);
-  }, []);
-  React__default.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;
@@ -2848,9 +2843,10 @@ function SwapDetailsPage() {
   const {
     navigateBackFrom
   } = useNavigateBack();
-  const [isCopied, handleCopy] = useCopyToClipboard(2000);
+  const [isCopied, handleCopy] = ui.useCopyToClipboard(2000);
   const {
-    manager
+    manager,
+    state
   } = queueManagerReact.useManager();
   const pendingSwaps = getPendingSwaps(manager);
   const selectedSwap = pendingSwaps.find(_ref => {
@@ -2864,7 +2860,7 @@ function SwapDetailsPage() {
     if (swap) queueManagerRangoPreset.cancelSwap(swap);
   };
   const swap = selectedSwap?.swap;
-  const loading = !manager?.isLoaded();
+  const loading = !state.loadedFromPersistor;
   if (!swap) return React__default.createElement(SwapDetailsPlaceholder, {
     requestId: selectedSwapRequestId || '',
     loading: loading,
@@ -3013,7 +3009,9 @@ const Header = /*#__PURE__*/ui.styled('div', {
 const WalletImageContainer = /*#__PURE__*/ui.styled('div', {
   marginLeft: -15,
   marginRight: '$6',
-  borderRadius: '99999px'
+  '& img': {
+    borderRadius: '50%'
+  }
 });
 function Layout(_ref) {
   let {
@@ -3090,28 +3088,6 @@ function Layout(_ref) {
   }));
 }
 
-const globalStyles = /*#__PURE__*/ui.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 => ui.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: {
@@ -3342,6 +3318,8 @@ function QueueManager(props) {
       API_KEY: getConfig('API_KEY')
     });
   }, []);
+  const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
+  const accounts = useWalletsStore.use.accounts();
   const {
     blockchains
   } = useMetaStore.use.meta();
@@ -3368,6 +3346,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,
@@ -3383,9 +3372,7 @@ function QueueManager(props) {
     switchNetwork,
     connect,
     state,
-    notifier: message => {
-      console.log('[notifier]', message);
-    }
+    notifier
   };
   return React__default.createElement(queueManagerReact.Provider
   //@ts-ignore
@@ -3404,7 +3391,6 @@ const Widget = _ref => {
   let {
     config
   } = _ref;
-  globalStyles();
   globalFont(config?.theme?.fontFamily || 'Roboto');
   const {
     activeTheme
@@ -3469,7 +3455,6 @@ const Widget = _ref => {
     providers: providers,
     onUpdateState: onUpdateState
   }, React__default.createElement("div", {
-    id: "pageContainer",
     className: activeTheme
   }, React__default.createElement(QueueManager, null, React__default.createElement(ui.SwapContainer, {
     fixedHeight: currentPage !== navigationRoutes.home