@rango-dev/widget-embedded 0.12.1-next.9 → 0.13.0

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() };

package/src/hooks/useWalletProviders.ts

@@ -1,11 +1,11 @@
-import { ProviderInterface } from '@rango-dev/wallets-react';
+import type { WidgetConfig } from '../types';
+import type { ProvidersOptions } from '../utils/providers';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
+
 import { useEffect } from 'react';
+
 import { useWalletsStore } from '../store/wallets';
-import { WidgetConfig } from '../types';
-import {
-  matchAndGenerateProviders,
-  ProvidersOptions,
-} from '../utils/providers';
+import { matchAndGenerateProviders } from '../utils/providers';
 
 export function useWalletProviders(
   providers: WidgetConfig['wallets'],
@@ -22,7 +22,7 @@ export function useWalletProviders(
     generateProviders = matchAndGenerateProviders(providers, {
       walletConnectProjectId: options?.walletConnectProjectId,
     });
-  }, [providers]);
+  }, [providers?.length]);
 
   return {
     providers: generateProviders,

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';
@@ -51,11 +59,13 @@ import {
   RouteWarningType,
   SlippageWarningType,
 } from '../types';
+import { getContainer } from '../utils/common';
 import {
   numberToString,
   secondsToString,
   totalArrivalTime,
 } from '../utils/numbers';
+import { getPriceImpactLevel } from '../utils/routing';
 import { getPercentageChange, getTotalFeeInUsd } from '../utils/swap';
 
 const Container = styled('div', {
@@ -117,7 +127,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, blockchains },
+    loadingStatus: loadingMetaStatus,
+  } = useMetaStore();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
   const { manager } = useManager();
@@ -133,6 +146,8 @@ export function ConfirmSwapPage(props: PropTypes) {
       error: null,
       warnings: null,
     });
+  const showSkeleton =
+    fetchingConfirmationRoute || loadingMetaStatus === 'loading';
   const showNoRouteFound =
     !fetchingConfirmationRoute &&
     confirmSwapResult.error &&
@@ -152,15 +167,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,
@@ -240,12 +251,6 @@ export function ConfirmSwapPage(props: PropTypes) {
     }
   }, []);
 
-  useEffect(() => {
-    if (!showWallets && !routeWalletsConfirmed) {
-      navigate(navigationRoutes.home, { replace: true });
-    }
-  }, [showWallets, routeWalletsConfirmed]);
-
   useEffect(() => {
     const routeChanged =
       confirmSwapResult.warnings?.route?.type &&
@@ -309,11 +314,14 @@ export function ConfirmSwapPage(props: PropTypes) {
   return (
     <Layout
       header={{
-        title: 'Confirm Swap',
+        title: i18n.t('Confirm Swap'),
         onBack: navigate.bind(null, -1),
         hasConnectWallet: true,
         suffix: (
-          <Tooltip side="bottom" content={i18n.t('Settings')}>
+          <Tooltip
+            container={getContainer()}
+            side="bottom"
+            content={i18n.t('Settings')}>
             <HeaderButton
               size="small"
               variant="ghost"
@@ -334,7 +342,7 @@ export function ConfirmSwapPage(props: PropTypes) {
               loading={fetchingConfirmationRoute}
               disabled={!!confirmSwapResult.error}
               onClick={onStartConfirmSwap}>
-              Start Swap
+              {i18n.t('Start Swap')}
             </Button>
           </div>
           <IconButton
@@ -356,7 +364,7 @@ export function ConfirmSwapPage(props: PropTypes) {
             variant="ghost"
             onClick={() => navigate('/' + navigationRoutes.settings)}>
             <Typography variant="label" size="medium" color="$neutral900">
-              Change settings
+              {i18n.t('Change settings')}
             </Typography>
           </Button>
         }
@@ -368,8 +376,8 @@ export function ConfirmSwapPage(props: PropTypes) {
             title={
               confirmSwapResult.warnings.slippage.type ===
               SlippageWarningType.HIGH_SLIPPAGE
-                ? 'High slippage'
-                : 'Low slippage'
+                ? i18n.t('High slippage')
+                : i18n.t('Low slippage')
             }
             description={
               confirmSwapResult.warnings.slippage.type ===
@@ -403,7 +411,7 @@ export function ConfirmSwapPage(props: PropTypes) {
               variant="contained"
               fullWidth
               onClick={onConfirm}>
-              Confirm anyway
+              {i18n.t('Confirm anyway')}
             </Button>
           </MessageBox>
         )}
@@ -411,7 +419,7 @@ export function ConfirmSwapPage(props: PropTypes) {
       {showWallets && (
         <ConfirmWalletsModal
           open={showWallets}
-          onClose={setShowWallets.bind(null, false)}
+          onClose={() => setShowWallets(false)}
           onCancel={cancelFetch}
           loading={fetchingConfirmationRoute}
           onCheckBalance={onConfirmSwap}
@@ -422,7 +430,7 @@ export function ConfirmSwapPage(props: PropTypes) {
       <Container>
         <div className="description">
           <Typography variant="title" size="small">
-            You get
+            {i18n.t('You get')}
           </Typography>
           <Button
             style={{ padding: '0' }}
@@ -450,23 +458,44 @@ 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) ?? []}
+            tooltipContainer={getContainer()}
+            steps={formatBestRoute(bestRoute, blockchains) ?? []}
             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)}
-            totalTime={secondsToString(totalArrivalTime(bestRoute))}
+            totalFee={numberToString(
+              totalFeeInUsd,
+              GAS_FEE_MIN_DECIMALS,
+              GAS_FEE_MAX_DECIMALS
+            )}
+            totalTime={secondsToString(
+              totalArrivalTime(bestRoute.result?.swaps)
+            )}
             recommended={true}
             type="swap-preview"
             percentageChange={percentageChange}

package/src/pages/HistoryPage.tsx

@@ -78,7 +78,7 @@ export function HistoryPage() {
   return (
     <Layout
       header={{
-        onBack: navigateBackFrom.bind(null, '/' + navigationRoutes.swaps),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.swaps),
         title: i18n.t('History'),
       }}>
       <Container>
@@ -86,7 +86,7 @@ export function HistoryPage() {
           setValue={setSearchedFor}
           fullWidth
           variant="contained"
-          placeholder="Search Transaction"
+          placeholder={i18n.t('Search Transaction')}
           autoFocus
           onChange={searchHandler}
           value={searchedFor}