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

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/globalStyles.ts

@@ -1,12 +1,9 @@
 import { globalCss } from '@rango-dev/ui';
 
-export const globalFont = (fontFamily: string) =>
+export const globalFont = () =>
   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: {
-      fontFamily,
-    },
   })();

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/hooks/useTheme.ts

@@ -1,87 +1,53 @@
-import { darkTheme, lightTheme } from '@rango-dev/ui';
-import { useState, useEffect, useLayoutEffect } from 'react';
+import type { WidgetTheme } from '../types';
+
+import { createTheme, darkTheme, lightTheme } from '@rango-dev/ui';
+import { useEffect, useState } from 'react';
+
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
-import { WidgetTheme } from '../types';
-import usePrevious from './usePrevious';
+import {
+  DEFAULT_PRIMARY_RADIUS,
+  DEFAULT_SECONDARY_RADIUS,
+} from '../utils/configs';
 
 export function useTheme({
   // colors,
   fontFamily = 'Roboto',
-  // borderRadius = 8,
+  borderRadius = DEFAULT_PRIMARY_RADIUS,
+  secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS,
   mode = 'auto',
 }: WidgetTheme) {
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
   const setTheme = useSettingsStore.use.setTheme();
-  // const light = themeColors?.light;
-  // const dark = themeColors?.dark;
-  // const neutral = light?.neutral || '#fafafa';
-  // const background = light?.background || '#fff';
-  // const foreground = light?.foreground || '#000';
 
-  // const darkColors = {
-  //   ...generateRangeColors('primary', 'dark', dark?.primary),
-  //   ...generateRangeColors('error', 'dark', dark?.error),
-  //   ...generateRangeColors('warning', 'dark', dark?.warning),
-  //   ...generateRangeColors('success', 'dark', dark?.success),
-  //   ...generateRangeColors('neutral', 'dark', dark?.neutral),
-  //   surface: dark?.surface,
-  //   background: dark?.background,
-  //   foreground: dark?.foreground,
-  // };
+  const customTheme = createTheme({
+    radii: {
+      primary: `${borderRadius}px`,
+      secondary: `${secondaryBorderRadius}px`,
+    },
+    fonts: {
+      widget: fontFamily,
+    },
+  });
 
-  // const lightColors = {
-  //   surface: light?.surface || '#fff',
-  //   ...generateRangeColors('primary', 'light', light?.primary || '#5FA425'),
-  //   ...generateRangeColors('error', 'light', light?.error || '#FF0000'),
-  //   ...generateRangeColors('warning', 'light', light?.warning || '#F5A623'),
-  //   ...generateRangeColors('success', 'light', light?.success || '#0070F3'),
-  //   ...generateRangeColors('neutral', 'light', neutral),
-  //   background,
-  //   foreground,
-  // };
+  const lightClassName = `${customTheme.className} ${lightTheme.className}`;
+  const darkClassName = `${customTheme.className} ${darkTheme.className}`;
 
-  // const customLightTheme = createTheme({
-  //   colors: lightColors,
-  //   radii: {
-  //     xs: `${borderRadius}px`,
-  //   },
-  //   shadows: {
-  //     s: `0px 3px 5px 3px ${light?.neutral || '#f0f2f5'} ,0px 6px 10px 3px ${
-  //       light?.neutral || '#f0f2f5'
-  //     }, 0px 1px 18px 3px ${light?.neutral || '#f0f2f5'}`,
-  //   },
-  // });
-
-  // const customDarkTheme = createTheme({
-  //   colors: {
-  //     ...lightColors,
-  //     ...generateRangeColors('neutral', 'dark', '#111111'),
-  //     foreground: background,
-  //     background: foreground,
-  //     surface: '#000',
-  //     ...JSON.parse(JSON.stringify(darkColors)),
-  //   },
-  //   radii: {
-  //     xs: `${borderRadius}px`,
-  //   },
-  //   shadows: {
-  //     s: `0px 3px 5px 3px ${dark?.neutral || '#222'}, 0px 6px 10px 3px ${
-  //       dark?.neutral || '#222'
-  //     }, 0px 1px 18px 3px ${dark?.neutral || '#222'}`,
-  //   },
-  // });
   const [OSTheme, setOSTheme] = useState('light');
 
   useEffect(() => {
-    (async () => {
+    const fetchData = async () => {
       await fetchMeta();
-    })();
+    };
+    void fetchData();
 
     const switchTheme = (event: MediaQueryListEvent) => {
-      if (event.matches) setOSTheme('dark');
-      else setOSTheme('light');
+      if (event.matches) {
+        setOSTheme('dark');
+      } else {
+        setOSTheme('light');
+      }
     };
 
     if (
@@ -101,20 +67,16 @@ export function useTheme({
     };
   }, []);
   useEffect(() => {
-    if (mode !== 'auto') setTheme(mode);
+    if (mode !== 'auto') {
+      setTheme(mode);
+    }
   }, [mode]);
-  const prevFont = usePrevious(fontFamily);
-
-  useLayoutEffect(() => {
-    const { classList } = document.body;
-
-    if (prevFont) classList.remove(`font_${prevFont.replace(/ /g, '')}`);
-    classList.add(`font_${fontFamily.replace(/ /g, '')}`);
-  }, [fontFamily]);
 
   const getActiveTheme = () => {
-    if (theme === 'auto') return OSTheme === 'dark' ? darkTheme : lightTheme;
-    else return theme === 'dark' ? darkTheme : lightTheme;
+    if (theme === 'auto') {
+      return OSTheme === 'dark' ? darkClassName : lightClassName;
+    }
+    return theme === 'dark' ? darkClassName : lightClassName;
   };
 
   return { activeTheme: getActiveTheme() };