@rango-dev/widget-embedded 0.14.1-next.9 → 0.15.0

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.test.ts

@@ -0,0 +1,273 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants';
+import {
+  generateSortByPreferredBlockchainsFor,
+  prepare,
+  sortByMostUsedBlockchains,
+} from './usePrepareBlockchainList.helpers';
+import { sampleBlockchains } from './usePrepareBlockchainList.mock';
+
+describe('usePrepareBlockchainList', () => {
+  let sample: BlockchainMeta[] = [];
+
+  beforeEach(() => {
+    sample = JSON.parse(JSON.stringify(sampleBlockchains));
+  });
+
+  it('should sort blockchains by most used ones.', () => {
+    const sortedBlockchainsList = sample.sort(sortByMostUsedBlockchains);
+
+    const mostUsedCount = MOST_USED_BLOCKChAINS.length;
+    const expected = MOST_USED_BLOCKChAINS;
+    const received = sortedBlockchainsList
+      .map((blockchain) => blockchain.name)
+      .slice(0, mostUsedCount);
+
+    expect(expected).toEqual(received);
+  });
+
+  it('should sort blockchains by user preferences', () => {
+    const preferredBlockchains = ['UMEE', 'BANDCHAIN', 'LINEA'];
+    const sortedBlockchainsList = sample.sort(
+      generateSortByPreferredBlockchainsFor(preferredBlockchains)
+    );
+
+    const expected = [
+      'UMEE',
+      'BANDCHAIN',
+      'LINEA',
+      'ETH',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'AVAX_CCHAIN',
+      'POLYGONZK',
+      'TRON',
+      'BTC',
+      'COSMOS',
+      'OSMOSIS',
+      'NEUTRON',
+      'NOBLE',
+      'SOLANA',
+      'CRONOS',
+      'BNB',
+      'AURORA',
+      'MAYA',
+      'THOR',
+      'BOBA',
+      'MOONBEAM',
+      'MOONRIVER',
+      'OKC',
+      'BOBA_AVALANCHE',
+      'LTC',
+      'BCH',
+      'HECO',
+      'STARGAZE',
+      'CRYPTO_ORG',
+      'CHIHUAHUA',
+      'COMDEX',
+      'REGEN',
+      'IRIS',
+      'EMONEY',
+      'JUNO',
+      'STRIDE',
+      'MARS',
+      'TERRA',
+      'BITSONG',
+      'AKASH',
+      'KI',
+      'PERSISTENCE',
+      'MEDIBLOC',
+      'KUJIRA',
+      'SENTINEL',
+      'INJECTIVE',
+      'SECRET',
+      'KONSTELLATION',
+      'STARNAME',
+      'BITCANNA',
+      'DESMOS',
+      'LUMNETWORK',
+    ];
+    const received = sortedBlockchainsList.map((blockchain) => blockchain.name);
+
+    expect(expected).toEqual(received);
+  });
+
+  it('should prepare the list by most used and user preferences', () => {
+    const listLimit = 10;
+    const preferredBlockchains = ['BTC', 'SOLANA', 'COSMOS', 'ETH'];
+    const expected = [
+      'BTC',
+      'SOLANA',
+      'ETH',
+      'COSMOS',
+      'OSMOSIS',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'AVAX_CCHAIN',
+      'POLYGONZK',
+      'LINEA',
+      'TRON',
+      'NEUTRON',
+      'NOBLE',
+      'CRONOS',
+      'BNB',
+      'AURORA',
+      'MAYA',
+      'THOR',
+      'BOBA',
+      'MOONBEAM',
+      'MOONRIVER',
+      'OKC',
+      'BOBA_AVALANCHE',
+      'LTC',
+      'BCH',
+      'HECO',
+      'STARGAZE',
+      'CRYPTO_ORG',
+      'CHIHUAHUA',
+      'BANDCHAIN',
+      'COMDEX',
+      'REGEN',
+      'IRIS',
+      'EMONEY',
+      'JUNO',
+      'STRIDE',
+      'MARS',
+      'TERRA',
+      'BITSONG',
+      'AKASH',
+      'KI',
+      'PERSISTENCE',
+      'MEDIBLOC',
+      'KUJIRA',
+      'SENTINEL',
+      'INJECTIVE',
+      'SECRET',
+      'KONSTELLATION',
+      'STARNAME',
+      'BITCANNA',
+      'UMEE',
+      'DESMOS',
+      'LUMNETWORK',
+    ];
+    const received = prepare(sample, preferredBlockchains, {
+      limit: listLimit,
+    });
+
+    const receivedListNames = received.list.map(
+      (blockchain) => blockchain.name
+    );
+    const receivedMoreNames = received.more.map(
+      (blockchain) => blockchain.name
+    );
+
+    expect(received.list).toHaveLength(listLimit);
+    expect(received.more).toHaveLength(expected.length - listLimit);
+    expect(expected).toEqual([...receivedListNames, ...receivedMoreNames]);
+
+    // Check duplication
+    receivedListNames.forEach((listName) => {
+      expect(receivedMoreNames).not.toContain(listName);
+    });
+
+    // Check preferred blockchains to be on the main list
+    preferredBlockchains.forEach((blockchain) => {
+      expect(receivedListNames).toContain(blockchain);
+    });
+  });
+
+  it('should prepare the list correctly if user has a long list of preferences ', () => {
+    const listLimit = 10;
+    const preferredBlockchains = [
+      'ETH',
+      'BTC',
+      'SOLANA',
+      'CRYPTO_ORG',
+      'TRON',
+      'BOBA_AVALANCHE',
+      'AKASH',
+      'LUMNETWORK',
+      'KONSTELLATION',
+      'BANDCHAIN',
+      'INJECTIVE',
+    ];
+    const expected = [
+      'ETH',
+      'BTC',
+      'SOLANA',
+      'CRYPTO_ORG',
+      'TRON',
+      'BOBA_AVALANCHE',
+      'AKASH',
+      'LUMNETWORK',
+      'KONSTELLATION',
+      'BANDCHAIN',
+      'INJECTIVE',
+      'COSMOS',
+      'OSMOSIS',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'AVAX_CCHAIN',
+      'POLYGONZK',
+      'LINEA',
+      'NEUTRON',
+      'NOBLE',
+      'CRONOS',
+      'BNB',
+      'AURORA',
+      'MAYA',
+      'THOR',
+      'BOBA',
+      'MOONBEAM',
+      'MOONRIVER',
+      'OKC',
+      'LTC',
+      'BCH',
+      'HECO',
+      'STARGAZE',
+      'CHIHUAHUA',
+      'COMDEX',
+      'REGEN',
+      'IRIS',
+      'EMONEY',
+      'JUNO',
+      'STRIDE',
+      'MARS',
+      'TERRA',
+      'BITSONG',
+      'KI',
+      'PERSISTENCE',
+      'MEDIBLOC',
+      'KUJIRA',
+      'SENTINEL',
+      'SECRET',
+      'STARNAME',
+      'BITCANNA',
+      'UMEE',
+      'DESMOS',
+    ];
+    const received = prepare(sample, preferredBlockchains, {
+      limit: listLimit,
+    });
+
+    expect(expected).toEqual([
+      ...received.list.map((blockchain) => blockchain.name),
+      ...received.more.map((blockchain) => blockchain.name),
+    ]);
+  });
+});

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.ts

@@ -0,0 +1,38 @@
+import type {
+  PrepareListOptions,
+  PrepareListOutput,
+} from './usePrepareBlockchainList.types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { useEffect } from 'react';
+
+import { useSettingsStore } from '../../store/settings';
+
+import { prepare } from './usePrepareBlockchainList.helpers';
+
+/**
+ *
+ * UI needs some specific logics like limiting the list and sorting,
+ * this function is getting the raw blockchains list and return a list for showing in UI.
+ *
+ */
+export function usePrepareBlockchainList(
+  blockchains: BlockchainMeta[],
+  options?: PrepareListOptions
+): PrepareListOutput {
+  const { preferredBlockchains, addPreferredBlockchain } = useSettingsStore();
+
+  useEffect(() => {
+    if (options?.selected) {
+      addPreferredBlockchain(options?.selected);
+    }
+  }, [options?.selected]);
+
+  const output = prepare(blockchains, preferredBlockchains, options);
+
+  return {
+    list: output.list,
+    more: output.more,
+    history: [],
+  };
+}

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.types.ts

@@ -0,0 +1,12 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export interface PrepareListOptions {
+  limit?: number;
+  selected?: string;
+}
+
+export interface PrepareListOutput {
+  list: BlockchainMeta[];
+  more: BlockchainMeta[];
+  history: string[];
+}

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,7 +1,7 @@
 import type { WidgetConfig } from '../types';
 import type { Asset } from 'rango-sdk';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
@@ -15,6 +15,10 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     setToBlockchain,
     setFromBlockchain,
     setFromToken,
+    fromToken,
+    toToken,
+    fromBlockchain,
+    toBlockchain,
   } = useBestRouteStore();
 
   const {
@@ -25,6 +29,22 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
     useSettingsStore();
 
+  const fromTokensConfig = useMemo(
+    () => config?.from?.tokens,
+    [config?.from?.tokens]
+  );
+  const fromBlockchainsConfig = useMemo(
+    () => config?.from?.blockchains,
+    [config?.from?.blockchains]
+  );
+  const toTokensConfig = useMemo(
+    () => config?.to?.tokens,
+    [config?.to?.tokens]
+  );
+  const toBlockchainsConfig = useMemo(
+    () => config?.to?.blockchains,
+    [config?.to?.blockchains]
+  );
   const prevConfigFromToken = useRef<Asset | undefined>(undefined);
   const prevConfigToToken = useRef<Asset | undefined>(undefined);
   const prevConfigFromBlockchain = useRef<string | undefined>(undefined);
@@ -62,6 +82,34 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     loadingMetaStatus,
   ]);
 
+  useEffect(() => {
+    if (fromToken && fromTokensConfig) {
+      if (!fromTokensConfig.some((token) => tokensAreEqual(token, fromToken))) {
+        setFromToken(null);
+      }
+    }
+
+    if (fromBlockchain && fromBlockchainsConfig) {
+      if (!fromBlockchainsConfig.includes(fromBlockchain.name)) {
+        setFromBlockchain(null);
+      }
+    }
+  }, [fromTokensConfig, fromBlockchainsConfig]);
+
+  useEffect(() => {
+    if (toToken && toTokensConfig) {
+      if (!toTokensConfig.some((token) => tokensAreEqual(token, toToken))) {
+        setToToken(null);
+      }
+    }
+
+    if (toBlockchain && toBlockchainsConfig) {
+      if (!toBlockchainsConfig.includes(toBlockchain.name)) {
+        setToBlockchain(null);
+      }
+    }
+  }, [toTokensConfig, toBlockchainsConfig]);
+
   useEffect(() => {
     if (loadingMetaStatus === 'success') {
       const chain = blockchains.find(

package/src/hooks/useTheme.ts

@@ -1,22 +1,20 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { WidgetTheme } from '../types';
 
 import {
   createTheme,
-  darkTheme,
-  lightTheme,
-  darkColors as mainDarkColors,
-  theme as mainTheme,
+  darkTheme as defaultDarkTheme,
+  lightTheme as defaultLightTheme,
 } from '@rango-dev/ui';
 import { useEffect, useState } from 'react';
 
-import { DEFAULT_FONT_FAMILY } from '../constants/fonts';
-import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
-import { generateColors } from '../utils/colors';
 import {
+  DEFAULT_FONT_FAMILY,
   DEFAULT_PRIMARY_RADIUS,
   DEFAULT_SECONDARY_RADIUS,
 } from '../utils/configs';
+import { customizedThemeTokens } from '../utils/ui';
 
 export function useTheme(props: WidgetTheme) {
   const {
@@ -26,12 +24,14 @@ export function useTheme(props: WidgetTheme) {
     secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS,
     mode = 'auto',
   } = props;
-  const theme = useSettingsStore.use.theme();
-  const mainColors = mainTheme.colors;
 
-  const fetchMeta = useMetaStore.use.fetchMeta();
+  const [OSTheme, setOSTheme] = useState('light');
+  const theme = useSettingsStore.use.theme();
   const setTheme = useSettingsStore.use.setTheme();
-  const customTheme = createTheme({
+
+  const { dark, light } = customizedThemeTokens(colors);
+
+  const baseTheme = createTheme({
     radii: {
       primary: `${borderRadius}px`,
       secondary: `${secondaryBorderRadius}px`,
@@ -40,49 +40,24 @@ export function useTheme(props: WidgetTheme) {
       widget: fontFamily,
     },
   });
+  const lightThemeClasses = [baseTheme.className, defaultLightTheme.className];
+  const darkThemeClasses = [baseTheme.className, defaultDarkTheme.className];
 
-  const darkColors = generateColors(
-    {
-      ...mainColors,
-      ...mainDarkColors,
-    },
-    colors?.dark
-  );
-  const lightColors = generateColors(mainColors, colors?.light);
-  const customLightTheme = Object.keys(lightColors).length
-    ? createTheme({
-        colors: lightColors,
-      })
-    : lightTheme;
-  const customDarkTheme = Object.keys(darkColors).length
-    ? createTheme({
-        colors: {
-          ...darkColors,
-          neutral100: darkColors.neutral900,
-          neutral200: darkColors.neutral800,
-          neutral300: darkColors.neutral700,
-          neutral400: darkColors.neutral600,
-          neutral500: darkColors.neutral500,
-          neutral600: darkColors.neutral400,
-          neutral700: darkColors.neutral300,
-          neutral800: darkColors.neutral200,
-          neutral900: darkColors.neutral100,
-        },
-      })
-    : darkTheme;
-
-  const lightClassName = `${customTheme.className} ${customLightTheme.className}`;
-  const darkClassName = `${customTheme.className} ${customDarkTheme.className}`;
-
-  const [OSTheme, setOSTheme] = useState('light');
+  /*
+   * If theme has been customized, we will push the customized theme to override the default themes.
+   * To be overridden, it should be last thing that has been pushed.
+   */
+  if (light) {
+    const customizedLightTheme = createTheme(light.id, light.tokens);
+    lightThemeClasses.push(customizedLightTheme.className);
+  }
+  if (dark) {
+    const customizedDarkTheme = createTheme(dark.id, dark.tokens);
+    darkThemeClasses.push(customizedDarkTheme.className);
+  }
 
   useEffect(() => {
-    const fetchData = async () => {
-      await fetchMeta();
-    };
-    void fetchData();
-
-    const switchTheme = (event: MediaQueryListEvent) => {
+    const switchThemeListener = (event: MediaQueryListEvent) => {
       if (event.matches) {
         setOSTheme('dark');
       } else {
@@ -99,13 +74,14 @@ export function useTheme(props: WidgetTheme) {
 
     window
       .matchMedia('(prefers-color-scheme: dark)')
-      .addEventListener('change', switchTheme);
+      .addEventListener('change', switchThemeListener);
     return () => {
       window
         .matchMedia('(prefers-color-scheme: dark)')
-        .removeEventListener('change', switchTheme);
+        .removeEventListener('change', switchThemeListener);
     };
   }, []);
+
   useEffect(() => {
     if (mode !== 'auto') {
       setTheme(mode);
@@ -113,11 +89,13 @@ export function useTheme(props: WidgetTheme) {
   }, [mode]);
 
   const getActiveTheme = () => {
+    const lightClassNames = lightThemeClasses.join(' ');
+    const darkClassNames = darkThemeClasses.join(' ');
     if (theme === 'auto') {
-      return OSTheme === 'dark' ? darkClassName : lightClassName;
+      return OSTheme === 'dark' ? darkClassNames : lightClassNames;
     }
-    return theme === 'dark' ? darkClassName : lightClassName;
+    return theme === 'dark' ? darkClassNames : lightClassNames;
   };
 
-  return { activeTheme: getActiveTheme() };
+  return { activeTheme: getActiveTheme };
 }

package/src/pages/ConfirmSwapPage.tsx

@@ -363,7 +363,7 @@ export function ConfirmSwapPage(props: PropTypes) {
             size="small"
             variant="ghost"
             onClick={() => navigate('/' + navigationRoutes.settings)}>
-            <Typography variant="label" size="medium" color="$neutral900">
+            <Typography variant="label" size="medium" color="$neutral700">
               {i18n.t('Change settings')}
             </Typography>
           </Button>
@@ -382,26 +382,17 @@ export function ConfirmSwapPage(props: PropTypes) {
             description={
               confirmSwapResult.warnings.slippage.type ===
               SlippageWarningType.HIGH_SLIPPAGE
-                ? i18n.t(
-                    'highSlippage',
-                    { selectedSlippage },
-                    {
-                      message:
-                        ' Caution, your slippage is high (={selectedSlippage}). Your trade may be front run.',
-                    }
-                  )
-                : i18n.t(
-                    'increaseSlippage',
-
-                    {
+                ? i18n.t({
+                    id: ' Caution, your slippage is high (={selectedSlippage}). Your trade may be front run.',
+                    values: { selectedSlippage },
+                  })
+                : i18n.t({
+                    id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+                    values: {
                       minRequiredSlippage:
                         confirmSwapResult.warnings.slippage.slippage,
                     },
-                    {
-                      message:
-                        'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
-                    }
-                  )
+                  })
             }>
             <Divider size={18} />
             <Divider size={32} />

package/src/pages/Home.tsx

@@ -245,18 +245,17 @@ export function Home() {
               title={recommendation}
               footer={
                 <FooterAlert>
-                  <Typography size="xsmall" variant="body" color="neutral900">
+                  <Typography size="xsmall" variant="body" color="neutral700">
                     {fromAmountRangeError}
                   </Typography>
                   <Divider direction="horizontal" size={8} />
-                  <Typography size="xsmall" variant="body" color="neutral900">
+                  <Typography size="xsmall" variant="body" color="neutral700">
                     |
                   </Typography>
                   <Divider direction="horizontal" size={8} />
-                  <Typography size="xsmall" variant="body" color="neutral900">
+                  <Typography size="xsmall" variant="body" color="neutral700">
                     {i18n.t({
-                      id: 'yourSymbol',
-                      message: 'Yours: {amount} {symbol}',
+                      id: 'Yours: {amount} {symbol}',
                       values: {
                         amount: numberToString(
                           swapHasError?.fromAmount || null,
@@ -347,7 +346,7 @@ export function Home() {
                       USD_VALUE_MAX_DECIMALS
                     ),
                 error: priceImpactInputCanNotBeComputed
-                  ? errorMessages.unknownPriceError.impactTitle
+                  ? errorMessages().unknownPriceError.impactTitle
                   : undefined,
               }}
               disabled={loadingMetaStatus === 'failed'}
@@ -398,7 +397,7 @@ export function Home() {
                     USD_VALUE_MAX_DECIMALS
                   ),
               error: priceImpactOutputCanNotBeComputed
-                ? errorMessages.unknownPriceError.impactTitle
+                ? errorMessages().unknownPriceError.impactTitle
                 : undefined,
             }}
             onClickToken={() => navigate('to-swap')}