@rango-dev/widget-embedded 0.12.1-next.11 → 0.12.1-next.12

package/src/components/SwapDetails/SwapDetails.tsx

@@ -14,20 +14,33 @@ import {
   Divider,
   IconButton,
   RouteCost,
+  RouteSummary,
   StepDetails,
-  TokenAmount,
+  theme,
   Typography,
   useCopyToClipboard,
+  usePaddingRight,
 } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useBestRouteStore } from '../../store/bestRoute';
 import { useMetaStore } from '../../store/meta';
 import { numberToString } from '../../utils/numbers';
+import { getPriceImpactLevel } from '../../utils/routing';
 import {
   getLastConvertedTokenInFailedSwap,
   getPercentageChange,
@@ -44,21 +57,14 @@ import {
 } from '../SwapDetailsModal';
 
 import {
-  AMOUNT_DECIMALS,
-  getPriceImpactWarningLevel,
   getSteps,
   getStepState,
-  MIN_DECIMALS,
-  PERCENT_DECIMALS,
   RESET_INTERVAL,
   SECONDS,
 } from './SwapDetails.helpers';
-import {
-  Container,
-  HeaderDetails,
-  Separator,
-  StepsList,
-} from './SwapDetails.styles';
+import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
+
+const DEFAULT_CONTENT_PADDING = 20;
 
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
@@ -67,13 +73,18 @@ export function SwapDetails(props: SwapDetailsProps) {
   const retry = useBestRouteStore.use.retry();
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
-  const listRef = useRef(null);
+  const listRef = useRef<HTMLDivElement | null>(null);
   const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
   const [modalState, setModalState] = useState<ModalState>(null);
   const [showCompletedModal, setShowCompletedModal] = useState<
     'success' | 'failed' | null
   >(null);
 
+  usePaddingRight({
+    elementRef: listRef,
+    paddingRight: theme.sizes[DEFAULT_CONTENT_PADDING],
+  });
+
   const onCancel = () => {
     onCancelProps();
     setModalState(null);
@@ -142,10 +153,6 @@ export function SwapDetails(props: SwapDetailsProps) {
   const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];
   const outputAmount =
     lastStep.outputAmount || lastStep.expectedOutputAmountHumanReadable;
-  const percentageChange =
-    swap.inputAmount && outputAmount
-      ? getPercentageChange(swap.inputAmount, outputAmount)
-      : null;
 
   const totalFee = swap.steps.reduce(
     (totalFee, steps) => totalFee + parseFloat(steps.feeInUsd || ''),
@@ -165,7 +172,13 @@ export function SwapDetails(props: SwapDetailsProps) {
 
   const outputUsdValue = numberToString(
     String(
-      parseFloat(numberToString(outputAmount, MIN_DECIMALS, AMOUNT_DECIMALS)) *
+      parseFloat(
+        numberToString(
+          outputAmount,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        )
+      ) *
         (getUsdPrice(
           lastStep.toBlockchain,
           lastStep.toSymbol,
@@ -173,16 +186,32 @@ export function SwapDetails(props: SwapDetailsProps) {
           tokens
         ) || 0)
     ),
-    MIN_DECIMALS,
-    AMOUNT_DECIMALS
+    USD_VALUE_MIN_DECIMALS,
+    USD_VALUE_MAX_DECIMALS
+  );
+
+  const inputUsdValue = numberToString(
+    String(
+      parseFloat(swap.inputAmount) *
+        (getUsdPrice(
+          firstStep.fromBlockchain,
+          firstStep.fromSymbol,
+          firstStep.fromSymbolAddress,
+          tokens
+        ) || 0)
+    ),
+    USD_VALUE_MIN_DECIMALS,
+    USD_VALUE_MAX_DECIMALS
   );
 
+  const percentageChange = getPercentageChange(inputUsdValue, outputUsdValue);
+
   const completeModalDesc =
     showCompletedModal === 'success'
-      ? `You have recieved ${numberToString(
+      ? `You have received ${numberToString(
           outputAmount,
-          MIN_DECIMALS,
-          AMOUNT_DECIMALS
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
         )} ${
           steps[numberOfSteps - 1].to.token.displayName
         } in ${getConciseAddress(
@@ -265,64 +294,57 @@ export function SwapDetails(props: SwapDetailsProps) {
           <RouteCost
             fee={numberToString(
               String(totalFee),
-              AMOUNT_DECIMALS,
-              AMOUNT_DECIMALS
+              GAS_FEE_MIN_DECIMALS,
+              GAS_FEE_MAX_DECIMALS
             )}
             time={minutes}
             steps={numberOfSteps}
           />
-          <TokenAmount
-            direction="horizontal"
-            type="input"
-            price={{
-              value: numberToString(
-                swap.inputAmount,
-                AMOUNT_DECIMALS,
-                AMOUNT_DECIMALS
-              ),
-              usdValue: numberToString(
-                String(
-                  parseFloat(swap.inputAmount) *
-                    (getUsdPrice(
-                      firstStep.fromBlockchain,
-                      firstStep.fromSymbol,
-                      firstStep.fromSymbolAddress,
-                      tokens
-                    ) || 0)
+          <RouteSummary
+            from={{
+              price: {
+                value: numberToString(
+                  swap.inputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
                 ),
-                MIN_DECIMALS,
-                AMOUNT_DECIMALS
-              ),
-            }}
-            token={{
-              displayName: steps[0].from.token.displayName,
-              image: steps[0].from.token.image,
+                usdValue: inputUsdValue,
+              },
+              token: {
+                displayName: steps[0].from.token.displayName,
+                image: steps[0].from.token.image,
+              },
+              chain: {
+                image: steps[0].from.chain.image,
+                displayName: steps[0].from.chain.displayName,
+              },
             }}
-            chain={{ image: steps[0].from.chain.image }}
-          />
-          <Separator />
-          <TokenAmount
-            direction="horizontal"
-            type="output"
-            price={{
-              value: numberToString(
-                outputAmount,
-                MIN_DECIMALS,
-                AMOUNT_DECIMALS
-              ),
-              usdValue: outputUsdValue,
-            }}
-            token={{
-              displayName: steps[numberOfSteps - 1].to.token.displayName,
-              image: steps[numberOfSteps - 1].to.token.image,
+            to={{
+              price: {
+                value: numberToString(
+                  outputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
+                ),
+                usdValue: outputUsdValue,
+              },
+              token: {
+                displayName: steps[numberOfSteps - 1].to.token.displayName,
+                image: steps[numberOfSteps - 1].to.token.image,
+              },
+              chain: {
+                image: steps[numberOfSteps - 1].to.chain.image,
+                displayName: steps[numberOfSteps - 1].to.chain.displayName,
+              },
             }}
-            chain={{ image: steps[numberOfSteps - 1].to.chain.image }}
             percentageChange={numberToString(
               percentageChange,
-              PERCENT_DECIMALS,
-              PERCENT_DECIMALS
+              PERCENTAGE_CHANGE_MIN_DECIMALS,
+              PERCENTAGE_CHANGE_MAX_DECIMALS
+            )}
+            warningLevel={getPriceImpactLevel(
+              percentageChange?.toNumber() ?? 0
             )}
-            warningLevel={getPriceImpactWarningLevel(percentageChange)}
           />
         </div>
         <div className="title-steps">
@@ -368,12 +390,16 @@ export function SwapDetails(props: SwapDetailsProps) {
         diagnosisUrl={diagnosisUrl}
         onClose={() => setShowCompletedModal(null)}
         status={showCompletedModal}
-        priceValue={numberToString(outputAmount, MIN_DECIMALS, AMOUNT_DECIMALS)}
+        priceValue={numberToString(
+          outputAmount,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        )}
         usdValue={outputUsdValue}
         percentageChange={numberToString(
           percentageChange,
-          PERCENT_DECIMALS,
-          PERCENT_DECIMALS
+          PERCENTAGE_CHANGE_MIN_DECIMALS,
+          PERCENTAGE_CHANGE_MAX_DECIMALS
         )}
         token={{
           displayName: steps[numberOfSteps - 1].to.token.displayName,

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -6,12 +6,8 @@ import React from 'react';
 
 import { WalletContainer } from './SwapDetailsModal.styles';
 
-export const WalletStateContent = ({
-  type,
-  title,
-  currentStepWallet,
-  message,
-}: WalletStateContentProps) => {
+export const WalletStateContent = (props: WalletStateContentProps) => {
+  const { type, title, currentStepWallet, message, showWalletButton } = props;
   const { connect, getWalletInfo, state: walletState } = useWallets();
   const walletType = currentStepWallet?.walletType;
   const isConnected = walletType && walletState(walletType).connected;
@@ -19,7 +15,7 @@ export const WalletStateContent = ({
   return (
     <>
       <MessageBox type={type} title={title} description={message} />
-      {walletType && (
+      {showWalletButton && walletType && (
         <WalletContainer>
           <Wallet
             title={getWalletInfo(walletType).name}

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -29,6 +29,9 @@ export function SwapDetailsModal(props: ModalPropTypes) {
           title={modalNetworkValues[state].title}
           currentStepWallet={currentStepWallet}
           message={message}
+          showWalletButton={
+            state !== PendingSwapNetworkStatus.WaitingForNetworkChange
+          }
         />
       )}
       {state === 'delete' && (

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -46,6 +46,7 @@ export interface ModalNetworkValueTypes {
 export interface WalletStateContentProps extends ModalNetworkValueTypes {
   currentStepWallet: WalletTypeAndAddress | null;
   message: string;
+  showWalletButton: boolean;
 }
 
 export type CancelContentProps = Pick<ModalPropTypes, 'onClose' | 'onCancel'>;

package/src/components/TokenList/TokenList.styles.ts

@@ -1,5 +1,11 @@
 import { styled, Typography } from '@rango-dev/ui';
 
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+});
+
 export const Title = styled('div', {
   display: 'flex',
   alignItems: 'center',
@@ -11,7 +17,7 @@ export const Title = styled('div', {
   },
 });
 export const List = styled('ul', {
-  minHeight: 280,
+  flexGrow: 1,
   padding: 0,
   margin: 0,
   listStyle: 'none',

package/src/components/TokenList/TokenList.tsx

@@ -28,6 +28,7 @@ import { generateRangeColors } from '../../utils/common';
 import { LoadingTokenList } from './LoadingTokenList';
 import {
   BalanceContainer,
+  Container,
   End,
   ImageSection,
   List,
@@ -257,13 +258,13 @@ export function TokenList(props: PropTypes) {
   };
 
   return (
-    <div>
+    <Container>
       <Typography variant="label" size="large">
         {i18n.t('Select Token')}
       </Typography>
       <Divider size={4} />
       {loadingStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
       {loadingStatus === 'success' && <List>{renderList()}</List>}
-    </div>
+    </Container>
   );
 }

package/src/constants/errors.ts

@@ -22,7 +22,7 @@ export const errorMessages = {
     decreaseAmount: i18n.t('Bridge Limit Error: Please decrease your amount'),
   },
   highValueLossError: {
-    impacTitle: i18n.t('High Price Impact'),
+    impactTitle: i18n.t('High Price Impact'),
     title: i18n.t('Price impact is too high!'),
     description: i18n.t(
       'The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap.'
@@ -35,7 +35,7 @@ export const errorMessages = {
     ),
   },
   unknownPriceError: {
-    impacTitle: i18n.t('USD Price Unknown'),
+    impactTitle: i18n.t('USD Price Unknown'),
     title: i18n.t('USD Price Unknown, Cannot calculate Price Impact.'),
     description: i18n.t(
       'USD Price Unknown, Cannot calculate Price Impact. The price impact may be higher than usual. Are you sure to continue the Swap?'

package/src/constants/routing.ts

@@ -1,2 +1,17 @@
-export const LOW_PRICE_IMPACT = 3;
-export const HIGHT_PRICE_IMPACT = 10;
+export const LOW_PRICE_IMPACT = -3;
+export const HIGHT_PRICE_IMPACT = -10;
+
+export const TOKEN_AMOUNT_MIN_DECIMALS = 6;
+export const TOKEN_AMOUNT_MAX_DECIMALS = 6;
+
+export const USD_VALUE_MIN_DECIMALS = 4;
+export const USD_VALUE_MAX_DECIMALS = 4;
+
+export const GAS_FEE_MIN_DECIMALS = 2;
+export const GAS_FEE_MAX_DECIMALS = 2;
+
+export const PERCENTAGE_CHANGE_MIN_DECIMALS = 2;
+export const PERCENTAGE_CHANGE_MAX_DECIMALS = 2;
+
+export const BALANCE_MIN_DECIMALS = 8;
+export const BALANCE_MAX_DECIMALS = 8;

package/src/hooks/useFetchBestRoute.ts

@@ -12,11 +12,11 @@ interface UseFetchBestRoute {
 
 export function useFetchBestRoute(): UseFetchBestRoute {
   const [loading, setLoading] = useState(false);
-  const cancel = () => abortController.current?.abort();
   const abortController = useRef<AbortController | null>(null);
+  const cancel = () => abortController.current?.abort();
 
   const fetch: UseFetchBestRoute['fetch'] = async (requestBody) => {
-    abortController.current?.abort();
+    cancel();
     abortController.current = new AbortController();
 
     setLoading(true);

package/src/hooks/useSwapInput.ts

@@ -53,6 +53,7 @@ export function useSwapInput(): UseSwapInput {
       setLoading(true);
     }
     if (!shouldSkipRequest) {
+      resetRoute();
       const requestBody = createBestRouteRequestBody({
         fromToken,
         toToken,
@@ -87,7 +88,8 @@ export function useSwapInput(): UseSwapInput {
   useEffect(() => {
     if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
       setLoading(false);
-      return cancelFetch();
+      cancelFetch();
+      return;
     }
     if (shouldSkipRequest) {
       return;
@@ -98,5 +100,12 @@ export function useSwapInput(): UseSwapInput {
     return cancelFetch;
   }, [inputAmount]);
 
+  useEffect(() => {
+    if (!shouldSkipRequest) {
+      fetch();
+    }
+    return cancelFetch;
+  }, [disabledLiquiditySources.length]);
+
   return { fetch, loading, error };
 }

package/src/pages/ConfirmSwapPage.tsx

@@ -4,7 +4,6 @@ import type {
   ConfirmSwapFetchResult,
 } from '../hooks/useConfirmSwap';
 import type { WidgetConfig } from '../types';
-import type { PriceImpactWarningLevel } from '@rango-dev/ui/dist/widget/ui/src/components/PriceImpact/PriceImpact.types';
 
 import { i18n } from '@lingui/core';
 import { useManager } from '@rango-dev/queue-manager-react';
@@ -38,7 +37,16 @@ import { Layout } from '../components/Layout';
 import { NoRoutes } from '../components/NoRoutes';
 import { getConfirmSwapErrorMessage } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { HIGHT_PRICE_IMPACT, LOW_PRICE_IMPACT } from '../constants/routing';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../constants/routing';
 import { getRouteWarningMessage } from '../constants/warnings';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useBestRouteStore } from '../store/bestRoute';
@@ -56,6 +64,7 @@ import {
   secondsToString,
   totalArrivalTime,
 } from '../utils/numbers';
+import { getPriceImpactLevel } from '../utils/routing';
 import { getPercentageChange, getTotalFeeInUsd } from '../utils/swap';
 
 const Container = styled('div', {
@@ -117,7 +126,10 @@ export function ConfirmSwapPage(props: PropTypes) {
   const showWalletsOnInit = !routeWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  const { tokens } = useMetaStore.use.meta();
+  const {
+    meta: { tokens },
+    loadingStatus: loadingMetaStatus,
+  } = useMetaStore();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
   const { manager } = useManager();
@@ -133,6 +145,8 @@ export function ConfirmSwapPage(props: PropTypes) {
       error: null,
       warnings: null,
     });
+  const showSkeleton =
+    fetchingConfirmationRoute || loadingMetaStatus === 'loading';
   const showNoRouteFound =
     !fetchingConfirmationRoute &&
     confirmSwapResult.error &&
@@ -152,15 +166,11 @@ export function ConfirmSwapPage(props: PropTypes) {
       inputUsdValue?.toNumber() ?? 0,
       outputUsdValue?.toNumber() ?? 0
     ),
-    2,
-    2
+    PERCENTAGE_CHANGE_MIN_DECIMALS,
+    PERCENTAGE_CHANGE_MAX_DECIMALS
   );
-  let warningLevel: PriceImpactWarningLevel = undefined;
-  if (parseFloat(percentageChange) >= HIGHT_PRICE_IMPACT) {
-    warningLevel = 'high';
-  } else if (parseFloat(percentageChange) >= LOW_PRICE_IMPACT) {
-    warningLevel = 'low';
-  }
+
+  const warningLevel = getPriceImpactLevel(parseFloat(percentageChange));
 
   const onConfirmSwap: ConfirmSwap['fetch'] = async ({
     selectedWallets,
@@ -450,22 +460,40 @@ export function ConfirmSwapPage(props: PropTypes) {
             <Divider size={12} />
           </>
         )}
-        {fetchingConfirmationRoute && (
-          <BestRouteSkeleton type="swap-preview" expanded />
-        )}
+        {showSkeleton && <BestRouteSkeleton type="swap-preview" expanded />}
         {showBestRoute && (
           <BestRoute
             expanded={true}
             steps={formatBestRoute(bestRoute) ?? []}
             input={{
-              value: numberToString(inputAmount, 6, 6),
-              usdValue: numberToString(inputUsdValue, 6, 6),
+              value: numberToString(
+                inputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
+              usdValue: numberToString(
+                inputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
             }}
             output={{
-              value: numberToString(outputAmount, 6, 6),
-              usdValue: numberToString(outputUsdValue, 6, 6),
+              value: numberToString(
+                outputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
+              usdValue: numberToString(
+                outputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
             }}
-            totalFee={numberToString(totalFeeInUsd, 0, 2)}
+            totalFee={numberToString(
+              totalFeeInUsd,
+              GAS_FEE_MIN_DECIMALS,
+              GAS_FEE_MAX_DECIMALS
+            )}
             totalTime={secondsToString(totalArrivalTime(bestRoute))}
             recommended={true}
             type="swap-preview"