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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.10",
+  "version": "0.1.11-next.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/PercentageChange.tsx

@@ -0,0 +1,33 @@
+import BigNumber from 'bignumber.js';
+import React from 'react';
+import { getPercentageChange } from '../utils/swap';
+import { Typography } from '@rango-dev/ui';
+import { numberToString } from '../utils/numbers';
+
+interface PropTypes {
+  inputUsdValue: BigNumber | null;
+  outputUsdValue: BigNumber | null;
+}
+
+export function PercentageChange(props: PropTypes) {
+  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 (
+    <>
+      {showPercentageChange && (
+        <Typography variant="caption" color="$error500">
+          {`(${numberToString(percentageChange, 0, 2)}%)`}
+        </Typography>
+      )}
+    </>
+  );
+}

package/src/components/TokenInfo.tsx

@@ -17,6 +17,7 @@ import { getBalanceFromWallet } from '../utils/wallets';
 import { useWalletsStore } from '../store/wallets';
 import { useTranslation } from 'react-i18next';
 import { Spacer } from '@rango-dev/ui';
+import { PercentageChange } from './PercentageChange';
 
 type PropTypes = (
   | {
@@ -80,6 +81,13 @@ const Container = styled('div', {
       width: '30%',
     },
   },
+  '.output-usd': {
+    display: 'flex',
+    div: {
+      display: 'flex',
+      paddingLeft: '$8',
+    },
+  },
 });
 
 const StyledImage = styled('img', {
@@ -201,10 +209,18 @@ export function TokenInfo(props: PropTypes) {
               </div>
             </Options>
           ) : (
-            <Typography
-              variant="caption"
-              color="neutrals600"
-            >{`$${numberToString(props.outputUsdValue)}`}</Typography>
+            <div className="output-usd">
+              <PercentageChange
+                inputUsdValue={inputUsdValue}
+                outputUsdValue={props.outputUsdValue}
+              />
+              <div>
+                <Typography
+                  variant="caption"
+                  color="neutrals600"
+                >{`$${numberToString(props.outputUsdValue)}`}</Typography>
+              </div>
+            </div>
           )}
         </div>
         <div className="form">

package/src/components/TokenPreview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Button, InfoCircleIcon, styled, Typography } from '@rango-dev/ui';
 import { LoadingStatus } from '../store/meta';
 import { useTranslation } from 'react-i18next';
@@ -37,6 +37,9 @@ const Container = styled('div', {
     justifyContent: 'space-between',
     alignItems: 'center',
     minHeight: '32px',
+    '.usd-value': {
+      paddingLeft: '$8',
+    },
   },
   '.form': {
     display: 'flex',
@@ -95,10 +98,11 @@ interface PropTypes {
     symbol: string;
     image: string;
   };
+  percentageChange?: ReactNode;
 }
 
 export function TokenPreview(props: PropTypes) {
-  const { chain, token, loadingStatus } = props;
+  const { chain, token, loadingStatus, percentageChange } = props;
   const { t } = useTranslation();
 
   const ItemSuffix = (
@@ -120,12 +124,16 @@ export function TokenPreview(props: PropTypes) {
           <Typography variant="body2" color="neutrals800">
             {props.label}
           </Typography>
-          {props.usdValue && (
-            <Typography
-              variant="caption"
-              color="neutrals600"
-            >{`$${numberToString(props.usdValue)}`}</Typography>
-          )}
+          <div>
+            {percentageChange}
+            {props.usdValue && (
+              <Typography
+                variant="caption"
+                color="neutrals600"
+                className="usd-value"
+              >{`$${numberToString(props.usdValue)}`}</Typography>
+            )}
+          </div>
         </div>
         <div className="form">
           <Button

package/src/pages/ConfirmSwapPage.tsx

@@ -10,11 +10,7 @@ import {
   getSelectableWallets,
   isExperimentalChain,
 } from '../utils/wallets';
-import {
-  calcOutputUsdValue,
-  getTotalFeeInUsd,
-  requiredWallets,
-} from '../utils/swap';
+import { getTotalFeeInUsd, requiredWallets } from '../utils/swap';
 import { decimalNumber, numberToString } from '../utils/numbers';
 import { useMetaStore } from '../store/meta';
 import { Network, WalletType } from '@rango-dev/wallets-shared';
@@ -33,6 +29,7 @@ import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
 import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
 import { ConfirmSwapExtraMessages } from '../components/warnings/ConfirmSwapExtraMessages';
 import { getBestRouteStatus } from '../utils/routing';
+import { PercentageChange } from '../components/PercentageChange';
 
 export function ConfirmSwapPage() {
   const navigate = useNavigate();
@@ -48,6 +45,8 @@ export 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,
@@ -134,7 +133,7 @@ export 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}
@@ -149,10 +148,16 @@ export 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}
+            percentageChange={
+              <PercentageChange
+                inputUsdValue={inputUsdValue}
+                outputUsdValue={outputUsdValue}
+              />
+            }
           />
         </>
       }

package/src/pages/Home.tsx

@@ -78,10 +78,6 @@ export function Home(props: PropTypes) {
   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();
@@ -94,15 +90,7 @@ export function Home(props: PropTypes) {
   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'
@@ -170,7 +158,13 @@ export function Home(props: PropTypes) {
           inputAmount={inputAmount}
         />
         <SwitchButtonContainer>
-          <Button variant="ghost" onClick={swithFromAndTo}>
+          <Button
+            variant="ghost"
+            onClick={() => {
+              switchFromAndTo();
+              setCount((prev) => prev + 1);
+            }}
+          >
             <VerticalSwapIcon size={32} />
             {isRouterInContext && <SwithFromAndTo count={count} />}
           </Button>

package/src/store/bestRoute.ts

@@ -49,6 +49,7 @@ export interface RouteState {
   bestRoute: BestRouteResponse | null;
   setBestRoute: (bestRoute: BestRouteResponse | null) => void;
   retry: (pendingSwap: PendingSwap) => void;
+  switchFromAndTo: () => void;
 }
 
 export const useBestRouteStore = createSelectors(
@@ -146,7 +147,6 @@ export const useBestRouteStore = createSelectors(
           toToken: token,
         })),
       setInputAmount: (amount) => {
-        console.log(amount, typeof amount);
         set((state) => ({
           inputAmount: amount,
           ...(!amount && {
@@ -224,6 +224,20 @@ export const useBestRouteStore = createSelectors(
           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() || ''
+          ),
+        })),
     }))
   )
 );
@@ -282,7 +296,7 @@ const bestRoute = (
   const bestRouteParamsListener = () => {
     const { fromToken, toToken, inputAmount, inputUsdValue } =
       useBestRouteStore.getState();
-    if (!inputAmount || inputAmount === '0') return;
+    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0)) return;
 
     if (tokensAreEqual(fromToken, toToken))
       return bestRouteStore.setState({
@@ -312,8 +326,15 @@ const bestRoute = (
     }),
     bestRouteParamsListener,
     {
-      equalityFn: (prevState, state) => {
-        if (isRouteParametersChanged(prevState, state)) return false;
+      equalityFn: (prevState, currentState) => {
+        if (
+          isRouteParametersChanged({
+            store: 'bestRoute',
+            prevState,
+            currentState,
+          })
+        )
+          return false;
         else return true;
       },
     }
@@ -324,11 +345,19 @@ const bestRoute = (
       slippage: state.slippage,
       customSlippage: state.customSlippage,
       disabledLiquiditySources: state.disabledLiquiditySources,
+      infiniteApprove: state.infiniteApprove,
     }),
     bestRouteParamsListener,
     {
-      equalityFn: (prevState, state) => {
-        if (isRouteParametersChanged(prevState, state)) return false;
+      equalityFn: (prevState, currentState) => {
+        if (
+          isRouteParametersChanged({
+            store: 'settings',
+            prevState,
+            currentState,
+          })
+        )
+          return false;
         else return true;
       },
     }

package/src/types/routing.ts

@@ -1,17 +1,33 @@
 import { RouteState } from '../store/bestRoute';
 import { SettingsState } from '../store/settings';
 
-export interface BestRouteParams {
+interface BestRouteStoreParams {
   fromChain?: RouteState['fromChain'];
   toChain?: RouteState['toChain'];
   fromToken?: RouteState['fromToken'];
   toToken?: RouteState['toToken'];
   inputAmount?: RouteState['inputAmount'];
+}
+
+interface SettingsStoreParams {
   slippage?: SettingsState['slippage'];
   customSlippage?: SettingsState['customSlippage'];
   disabledLiquiditySources?: SettingsState['disabledLiquiditySources'];
+  infiniteApprove?: SettingsState['infiniteApprove'];
 }
 
+export type BestRouteEqualityParams =
+  | {
+      store: 'bestRoute';
+      prevState: BestRouteStoreParams;
+      currentState: BestRouteStoreParams;
+    }
+  | {
+      store: 'settings';
+      prevState: SettingsStoreParams;
+      currentState: SettingsStoreParams;
+    };
+
 export enum ConfirmSwapErrorTypes {
   NO_ROUTE,
   ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,

package/src/utils/routing.ts

@@ -6,7 +6,7 @@ import BigNumber from 'bignumber.js';
 import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import { areEqual } from './common';
 import { SelectedWallet } from './wallets';
-import { BestRouteParams } from '../types';
+import { BestRouteEqualityParams } from '../types';
 import { TokenMeta } from '@rango-dev/ui/dist/types/meta';
 import { numberToString } from './numbers';
 import { getUsdFeeOfStep } from './swap';
@@ -112,28 +112,34 @@ export function getRequiredBalanceOfWallet(
   return relatedFeeStatus.requiredAssets;
 }
 
-export function isRouteParametersChanged(
-  prevParams: BestRouteParams,
-  currentParams: BestRouteParams
-) {
-  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)
-  );
+export function isRouteParametersChanged(params: BestRouteEqualityParams) {
+  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;
 }
 
 export function getBestRouteWithCalculatedFees(

package/src/utils/swap.ts

@@ -140,7 +140,8 @@ export function getSwapButtonState(
   if (accounts.length == 0) return { title: 'Connect Wallet', disabled: false };
   if (loading) return { title: 'Finding Best Route...', disabled: true };
   else if (inputIsZero) return { title: 'Enter an amount', disabled: true };
-  else if (!bestRoute) return { title: 'Swap', disabled: true };
+  else if (!bestRoute || !bestRoute.result)
+    return { title: 'Swap', disabled: true };
   else if (hasLimitError) return { title: 'Limit Error', disabled: true };
   else if (highValueLoss)
     return { title: 'Price impact is too high!', disabled: true };