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

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

@@ -445,7 +445,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 {
@@ -753,8 +753,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) => {
@@ -1020,7 +1033,6 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
     toToken: token
   })),
   setInputAmount: amount => {
-    console.log(amount, typeof amount);
     set(state => ({
       inputAmount: amount,
       ...(!amount && {
@@ -1073,7 +1085,17 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
       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;
@@ -1126,7 +1148,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,
@@ -1148,17 +1170,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 {
@@ -1323,6 +1354,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__default.createElement(React__default.Fragment, null, showPercentageChange && React__default.createElement(ui.Typography, {
+    variant: "caption",
+    color: "$error500"
+  }, `(${numberToString(percentageChange, 0, 2)}%)`));
+}
+
 const Box = /*#__PURE__*/ui.styled('div', {
   display: 'flex',
   flexDirection: 'column',
@@ -1366,6 +1411,13 @@ const Container = /*#__PURE__*/ui.styled('div', {
     '.amount': {
       width: '30%'
     }
+  },
+  '.output-usd': {
+    display: 'flex',
+    div: {
+      display: 'flex',
+      paddingLeft: '$8'
+    }
   }
 });
 const StyledImage = /*#__PURE__*/ui.styled('img', {
@@ -1450,10 +1502,15 @@ function TokenInfo(props) {
     type: "primary",
     variant: "ghost",
     size: "compact"
-  }, t('Max')))) : React__default.createElement(ui.Typography, {
+  }, t('Max')))) : React__default.createElement("div", {
+    className: "output-usd"
+  }, React__default.createElement(PercentageChange, {
+    inputUsdValue: inputUsdValue,
+    outputUsdValue: props.outputUsdValue
+  }), React__default.createElement("div", null, React__default.createElement(ui.Typography, {
     variant: "caption",
     color: "neutrals600"
-  }, `$${numberToString(props.outputUsdValue)}`)), React__default.createElement("div", {
+  }, `$${numberToString(props.outputUsdValue)}`)))), React__default.createElement("div", {
     className: "form"
   }, React__default.createElement(ui.Button, {
     className: "selectors",
@@ -1676,10 +1733,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();
@@ -1692,14 +1745,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);
@@ -1732,7 +1778,10 @@ function Home(props) {
     inputAmount: inputAmount
   }), React__default.createElement(SwitchButtonContainer, null, React__default.createElement(ui.Button, {
     variant: "ghost",
-    onClick: swithFromAndTo
+    onClick: () => {
+      switchFromAndTo();
+      setCount(prev => prev + 1);
+    }
   }, React__default.createElement(ui.VerticalSwapIcon, {
     size: 32
   }), isRouterInContext && React__default.createElement(SwithFromAndTo, {
@@ -1862,7 +1911,10 @@ const Container$3 = /*#__PURE__*/ui.styled('div', {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    minHeight: '32px'
+    minHeight: '32px',
+    '.usd-value': {
+      paddingLeft: '$8'
+    }
   },
   '.form': {
     display: 'flex',
@@ -1907,7 +1959,8 @@ function TokenPreview(props) {
   const {
     chain,
     token,
-    loadingStatus
+    loadingStatus,
+    percentageChange
   } = props;
   const {
     t
@@ -1929,10 +1982,11 @@ function TokenPreview(props) {
   }, React__default.createElement(ui.Typography, {
     variant: "body2",
     color: "neutrals800"
-  }, props.label), props.usdValue && React__default.createElement(ui.Typography, {
+  }, props.label), React__default.createElement("div", null, percentageChange, props.usdValue && React__default.createElement(ui.Typography, {
     variant: "caption",
-    color: "neutrals600"
-  }, `$${numberToString(props.usdValue)}`)), React__default.createElement("div", {
+    color: "neutrals600",
+    className: "usd-value"
+  }, `$${numberToString(props.usdValue)}`))), React__default.createElement("div", {
     className: "form"
   }, React__default.createElement(ui.Button, {
     className: "selectors",
@@ -2311,6 +2365,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
@@ -2373,7 +2429,7 @@ function ConfirmSwapPage() {
         symbol: firstStep?.from.symbol || '',
         image: firstStep?.from.logo || ''
       },
-      usdValue: calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice),
+      usdValue: inputUsdValue,
       amount: fromAmount,
       label: i18n.t('From'),
       loadingStatus: bestRouteloadingStatus
@@ -2389,10 +2445,14 @@ function ConfirmSwapPage() {
         symbol: lastStep?.to.symbol || '',
         image: lastStep?.to.logo || ''
       },
-      usdValue: calcOutputUsdValue(toAmount, lastStep?.to.usdPrice),
+      usdValue: outputUsdValue,
       amount: toAmount,
       label: i18n.t('To'),
-      loadingStatus: bestRouteloadingStatus
+      loadingStatus: bestRouteloadingStatus,
+      percentageChange: React__default.createElement(PercentageChange, {
+        inputUsdValue: inputUsdValue,
+        outputUsdValue: outputUsdValue
+      })
     })),
     previewRoutes: React__default.createElement(RoutesOverview, {
       routes: bestRoute,