@rango-dev/widget-embedded 0.1.10 → 0.1.11-next.0

package/dist/widget-embedded.esm.js

@@ -1,4 +1,4 @@
-import { WalletState, InfoCircleIcon, AngleDownIcon, Typography, Spacer, Button, 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, TextField, styled, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, Alert, ChevronRightIcon, GasIcon, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, LoadingFailedAlert, Wallet, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
 import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
 import { useInRouterContext as useInRouterContext$1, MemoryRouter, useLocation as useLocation$1, useNavigate as useNavigate$1 } from 'react-router';
 import { PendingSwapNetworkStatus, useQueueManager, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, swapQueueDef, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
@@ -436,7 +436,7 @@ function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, has
   };else if (inputIsZero) return {
     title: 'Enter an amount',
     disabled: true
-  };else if (!bestRoute) return {
+  };else if (!bestRoute || !bestRoute.result) return {
     title: 'Swap',
     disabled: true
   };else if (hasLimitError) return {
@@ -744,8 +744,21 @@ function getRequiredBalanceOfWallet(selectedWallet, fee) {
   if (!relatedFeeStatus) return null;
   return relatedFeeStatus.requiredAssets;
 }
-function isRouteParametersChanged(prevParams, currentParams) {
-  return !!currentParams.fromToken && !!currentParams.toToken && (prevParams.fromChain?.name !== currentParams.fromChain?.name || prevParams.toChain?.name !== currentParams.toChain?.name || prevParams.fromToken?.symbol !== currentParams.fromToken?.symbol || prevParams.toToken?.symbol !== currentParams.toToken?.symbol || prevParams.fromToken?.blockchain !== currentParams.fromToken?.blockchain || prevParams.toToken?.blockchain !== currentParams.toToken?.blockchain || prevParams.fromToken?.address !== currentParams.fromToken?.address || prevParams.toToken?.address !== currentParams.toToken?.address || prevParams.inputAmount !== currentParams.inputAmount || prevParams.slippage !== currentParams.slippage || prevParams.customSlippage !== currentParams.customSlippage || prevParams.disabledLiquiditySources?.length !== currentParams.disabledLiquiditySources?.length);
+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) => {
@@ -1011,7 +1024,6 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
     toToken: token
   })),
   setInputAmount: amount => {
-    console.log(amount, typeof amount);
     set(state => ({
       inputAmount: amount,
       ...(!amount && {
@@ -1064,7 +1076,17 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
       sourceTokens: sortedSourceTokens,
       destinationTokens: sortedDestinationTokens
     });
-  }
+  },
+  switchFromAndTo: () => set(state => ({
+    fromChain: state.toChain,
+    fromToken: state.toToken,
+    toChain: state.fromChain,
+    toToken: state.fromToken,
+    sourceTokens: state.destinationTokens,
+    destinationTokens: state.sourceTokens,
+    inputAmount: state.outputAmount?.toString() || '',
+    inputUsdValue: getUsdValue(state.toToken, state.outputAmount?.toString() || '')
+  }))
 }))));
 const bestRoute = (bestRouteStore, settingsStore) => {
   let abortController = null;
@@ -1117,7 +1139,7 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       inputAmount,
       inputUsdValue
     } = useBestRouteStore.getState();
-    if (!inputAmount || inputAmount === '0') return;
+    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0)) return;
     if (tokensAreEqual(fromToken, toToken)) return bestRouteStore.setState({
       loading: false,
       bestRoute: null,
@@ -1139,17 +1161,26 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     toToken: state.toToken,
     inputAmount: state.inputAmount
   }), bestRouteParamsListener, {
-    equalityFn: (prevState, state) => {
-      if (isRouteParametersChanged(prevState, state)) return false;else return true;
+    equalityFn: (prevState, currentState) => {
+      if (isRouteParametersChanged({
+        store: 'bestRoute',
+        prevState,
+        currentState
+      })) return false;else return true;
     }
   });
   useSettingsStore.subscribe(state => ({
     slippage: state.slippage,
     customSlippage: state.customSlippage,
-    disabledLiquiditySources: state.disabledLiquiditySources
+    disabledLiquiditySources: state.disabledLiquiditySources,
+    infiniteApprove: state.infiniteApprove
   }), bestRouteParamsListener, {
-    equalityFn: (prevState, state) => {
-      if (isRouteParametersChanged(prevState, state)) return false;else return true;
+    equalityFn: (prevState, currentState) => {
+      if (isRouteParametersChanged({
+        store: 'settings',
+        prevState,
+        currentState
+      })) return false;else return true;
     }
   });
   return {
@@ -1314,6 +1345,20 @@ function UpdateUrl() {
   return null;
 }
 
+function PercentageChange(props) {
+  const {
+    inputUsdValue,
+    outputUsdValue
+  } = props;
+  if (!inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)) return null;
+  const percentageChange = getPercentageChange(inputUsdValue.toNumber(), outputUsdValue.toNumber());
+  const showPercentageChange = percentageChange?.lt(0);
+  return React.createElement(React.Fragment, null, showPercentageChange && React.createElement(Typography, {
+    variant: "caption",
+    color: "$error500"
+  }, `(${numberToString(percentageChange, 0, 2)}%)`));
+}
+
 const Box = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
@@ -1357,6 +1402,13 @@ const Container = /*#__PURE__*/styled('div', {
     '.amount': {
       width: '30%'
     }
+  },
+  '.output-usd': {
+    display: 'flex',
+    div: {
+      display: 'flex',
+      paddingLeft: '$8'
+    }
   }
 });
 const StyledImage = /*#__PURE__*/styled('img', {
@@ -1441,10 +1493,15 @@ function TokenInfo(props) {
     type: "primary",
     variant: "ghost",
     size: "compact"
-  }, t('Max')))) : React.createElement(Typography, {
+  }, t('Max')))) : React.createElement("div", {
+    className: "output-usd"
+  }, React.createElement(PercentageChange, {
+    inputUsdValue: inputUsdValue,
+    outputUsdValue: props.outputUsdValue
+  }), React.createElement("div", null, React.createElement(Typography, {
     variant: "caption",
     color: "neutrals600"
-  }, `$${numberToString(props.outputUsdValue)}`)), React.createElement("div", {
+  }, `$${numberToString(props.outputUsdValue)}`)))), React.createElement("div", {
     className: "form"
   }, React.createElement(Button, {
     className: "selectors",
@@ -1667,10 +1724,6 @@ function Home(props) {
   const fromToken = useBestRouteStore.use.fromToken();
   const toChain = useBestRouteStore.use.toChain();
   const toToken = useBestRouteStore.use.toToken();
-  const setFromChain = useBestRouteStore.use.setFromChain();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToChain = useBestRouteStore.use.setToChain();
-  const setToToken = useBestRouteStore.use.setToToken();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const inputAmount = useBestRouteStore.use.inputAmount();
@@ -1683,14 +1736,7 @@ function Home(props) {
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const accounts = useWalletsStore.use.accounts();
   const setCurrentPage = useUiStore.use.setCurrentPage();
-  const swithFromAndTo = () => {
-    setFromChain(toChain);
-    setFromToken(toToken);
-    setToChain(fromChain);
-    setToToken(fromToken);
-    setInputAmount(outputAmount?.toString() || '');
-    setCount(prev => prev + 1);
-  };
+  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
   const errorMessage = loadingMetaStatus === 'failed' ? errorMessages.genericServerError : bestRouteError;
   const needsToWarnEthOnPath = false;
   const showBestRoute = inputAmount && (!!bestRoute || fetchingBestRoute || bestRouteError);
@@ -1723,7 +1769,10 @@ function Home(props) {
     inputAmount: inputAmount
   }), React.createElement(SwitchButtonContainer, null, React.createElement(Button, {
     variant: "ghost",
-    onClick: swithFromAndTo
+    onClick: () => {
+      switchFromAndTo();
+      setCount(prev => prev + 1);
+    }
   }, React.createElement(VerticalSwapIcon, {
     size: 32
   }), isRouterInContext && React.createElement(SwithFromAndTo, {
@@ -1853,7 +1902,10 @@ const Container$3 = /*#__PURE__*/styled('div', {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    minHeight: '32px'
+    minHeight: '32px',
+    '.usd-value': {
+      paddingLeft: '$8'
+    }
   },
   '.form': {
     display: 'flex',
@@ -1898,7 +1950,8 @@ function TokenPreview(props) {
   const {
     chain,
     token,
-    loadingStatus
+    loadingStatus,
+    percentageChange
   } = props;
   const {
     t
@@ -1920,10 +1973,11 @@ function TokenPreview(props) {
   }, React.createElement(Typography, {
     variant: "body2",
     color: "neutrals800"
-  }, props.label), props.usdValue && React.createElement(Typography, {
+  }, props.label), React.createElement("div", null, percentageChange, props.usdValue && React.createElement(Typography, {
     variant: "caption",
-    color: "neutrals600"
-  }, `$${numberToString(props.usdValue)}`)), React.createElement("div", {
+    color: "neutrals600",
+    className: "usd-value"
+  }, `$${numberToString(props.usdValue)}`))), React.createElement("div", {
     className: "form"
   }, React.createElement(Button, {
     className: "selectors",
@@ -2302,6 +2356,8 @@ function ConfirmSwapPage() {
   const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
   const bestRouteloadingStatus = getBestRouteStatus(fetchingBestRoute, !!fetchingBestRouteError);
   const {
     manager
@@ -2364,7 +2420,7 @@ function ConfirmSwapPage() {
         symbol: firstStep?.from.symbol || '',
         image: firstStep?.from.logo || ''
       },
-      usdValue: calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice),
+      usdValue: inputUsdValue,
       amount: fromAmount,
       label: t('From'),
       loadingStatus: bestRouteloadingStatus
@@ -2380,10 +2436,14 @@ function ConfirmSwapPage() {
         symbol: lastStep?.to.symbol || '',
         image: lastStep?.to.logo || ''
       },
-      usdValue: calcOutputUsdValue(toAmount, lastStep?.to.usdPrice),
+      usdValue: outputUsdValue,
       amount: toAmount,
       label: t('To'),
-      loadingStatus: bestRouteloadingStatus
+      loadingStatus: bestRouteloadingStatus,
+      percentageChange: React.createElement(PercentageChange, {
+        inputUsdValue: inputUsdValue,
+        outputUsdValue: outputUsdValue
+      })
     })),
     previewRoutes: React.createElement(RoutesOverview, {
       routes: bestRoute,