@rango-dev/widget-embedded 0.14.1-next.14 → 0.14.1-next.16

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/pages/Home.tsx

@@ -347,7 +347,7 @@ export function Home() {
                       USD_VALUE_MAX_DECIMALS
                     ),
                 error: priceImpactInputCanNotBeComputed
-                  ? errorMessages.unknownPriceError.impactTitle
+                  ? errorMessages().unknownPriceError.impactTitle
                   : undefined,
               }}
               disabled={loadingMetaStatus === 'failed'}
@@ -398,7 +398,7 @@ export function Home() {
                     USD_VALUE_MAX_DECIMALS
                   ),
               error: priceImpactOutputCanNotBeComputed
-                ? errorMessages.unknownPriceError.impactTitle
+                ? errorMessages().unknownPriceError.impactTitle
                 : undefined,
             }}
             onClickToken={() => navigate('to-swap')}

package/src/pages/LanguagePage.tsx

@@ -6,57 +6,34 @@ import {
   RadioRoot,
   Typography,
 } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { Layout } from '../components/Layout';
 import { SettingsContainer } from '../components/SettingsContainer';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { useLanguage } from '../hooks/useLanguage';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 
-enum Languages {
-  ENGLISH = 'english',
-  FRENCH = 'french',
-  SPANISH = 'spanish',
-}
 export function LanguagePage() {
   const { navigateBackFrom } = useNavigateBack();
-  const [language, setLanguage] = useState(Languages.ENGLISH);
 
-  const languageList = [
-    {
-      id: Languages.ENGLISH,
-      value: Languages.ENGLISH,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t('English')}
-        </Typography>
-      ),
-      onClick: () => setLanguage(Languages.ENGLISH),
-      end: <Radio value={Languages.ENGLISH} />,
-    },
-    {
-      id: Languages.FRENCH,
-      value: Languages.FRENCH,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t('French')}
-        </Typography>
-      ),
-      onClick: () => setLanguage(Languages.FRENCH),
-      end: <Radio value={Languages.FRENCH} />,
-    },
-    {
-      id: Languages.SPANISH,
-      value: Languages.SPANISH,
+  const { activeLanguage, changeLanguage, languages } = useLanguage();
+
+  const languageList = languages.map((languageItem) => {
+    const { local, label, SVGFlag } = languageItem;
+    return {
+      id: local,
+      value: local,
       title: (
         <Typography variant="title" size="xmedium">
-          {i18n.t('Spanish')}
+          {label}
         </Typography>
       ),
-      onClick: () => setLanguage(Languages.SPANISH),
-      end: <Radio value={Languages.SPANISH} />,
-    },
-  ];
+      onClick: () => changeLanguage(languageItem.local),
+      end: <Radio value={local} />,
+      start: <SVGFlag />,
+    };
+  });
 
   return (
     <Layout
@@ -65,7 +42,7 @@ export function LanguagePage() {
         title: i18n.t('Language'),
       }}>
       <SettingsContainer>
-        <RadioRoot value={language}>
+        <RadioRoot value={activeLanguage}>
           <List
             type={
               <ListItemButton

package/src/store/settings.ts

@@ -1,40 +1,50 @@
+import { type Language } from '@rango-dev/ui';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 
+import { BLOCKCHAIN_LIST_SIZE } from '../constants/configs';
+import { DEFAULT_LANGUAGE } from '../constants/languages';
 import { DEFAULT_SLIPPAGE } from '../constants/swapSettings';
 import { removeDuplicateFrom } from '../utils/common';
 
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
-type Theme = 'auto' | 'dark' | 'light';
+export type ThemeMode = 'auto' | 'dark' | 'light';
 
 export interface SettingsState {
+  /** Keeping a history of blockchains that user has selected (in Swap process) */
+  preferredBlockchains: string[];
   slippage: number;
   customSlippage: number | null;
   infiniteApprove: boolean;
   disabledLiquiditySources: string[];
-  theme: Theme;
+  theme: ThemeMode;
+  language: Language;
   affiliateRef: string | null;
   affiliatePercent: number | null;
   affiliateWallets: { [key: string]: string } | null;
+
   setSlippage: (slippage: number) => void;
   setCustomSlippage: (customSlippage: number | null) => void;
   toggleInfiniteApprove: () => void;
   toggleLiquiditySource: (name: string) => void;
-  setTheme: (theme: Theme) => void;
+  setTheme: (theme: ThemeMode) => void;
+  setLanguage: (language: Language) => void;
   toggleAllLiquiditySources: (shouldReset?: boolean) => void;
   setAffiliateRef: (affiliateRef: string | null) => void;
   setAffiliatePercent: (affiliatePercent: number | null) => void;
   setAffiliateWallets: (
     affiliateWallets: { [key: string]: string } | null
   ) => void;
+  addPreferredBlockchain: (blockchain: string) => void;
 }
 
 export const useSettingsStore = createSelectors(
   create<SettingsState>()(
     persist(
-      subscribeWithSelector((set) => ({
+      subscribeWithSelector((set, get) => ({
+        preferredBlockchains: [],
         slippage: DEFAULT_SLIPPAGE,
         customSlippage: null,
         infiniteApprove: false,
@@ -43,6 +53,34 @@ export const useSettingsStore = createSelectors(
         affiliateWallets: null,
         disabledLiquiditySources: [],
         theme: 'auto',
+        language: DEFAULT_LANGUAGE,
+        addPreferredBlockchain: (blockchain) => {
+          const currentPreferredBlockchains = get().preferredBlockchains;
+
+          const noNeedToDoAnything = currentPreferredBlockchains.find(
+            (preferredBlockchain, index) => {
+              const isSameBlockchain = preferredBlockchain === blockchain;
+              const isInVisibleList = index <= BLOCKCHAIN_LIST_SIZE - 1;
+
+              return isSameBlockchain && isInVisibleList;
+            }
+          );
+
+          if (noNeedToDoAnything) {
+            return;
+          }
+
+          const nextPreferredBlockchains: string[] =
+            currentPreferredBlockchains.filter((preferredBlockchain) => {
+              const isSameBlockchain = preferredBlockchain === blockchain;
+
+              return !isSameBlockchain;
+            });
+
+          set(() => ({
+            preferredBlockchains: [blockchain, ...nextPreferredBlockchains],
+          }));
+        },
         setSlippage: (slippage) =>
           set(() => ({
             slippage: slippage,
@@ -106,6 +144,10 @@ export const useSettingsStore = createSelectors(
           set(() => ({
             theme,
           })),
+        setLanguage: (language) =>
+          set(() => ({
+            language,
+          })),
       })),
       {
         name: 'user-settings',

package/src/utils/swap.ts

@@ -131,7 +131,7 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
         symbol: swap.from.symbol,
       },
     });
-    recommendation = errorMessages.bridgeLimitErrors.increaseAmount;
+    recommendation = errorMessages().bridgeLimitErrors.increaseAmount;
   } else if (isExclusive && !!minimum && minimum.gte(swap.fromAmount)) {
     fromAmountRangeError = i18n.t({
       id: 'requiredMin',
@@ -145,7 +145,7 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
         symbol: swap.from.symbol,
       },
     });
-    recommendation = errorMessages.bridgeLimitErrors.increaseAmount;
+    recommendation = errorMessages().bridgeLimitErrors.increaseAmount;
   }
 
   if (!isExclusive && !!maximum && maximum.lt(swap.fromAmount)) {
@@ -161,7 +161,7 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
         symbol: swap.from.symbol,
       },
     });
-    recommendation = errorMessages.bridgeLimitErrors.decreaseAmount;
+    recommendation = errorMessages().bridgeLimitErrors.decreaseAmount;
   } else if (isExclusive && !!maximum && maximum.lte(swap.fromAmount)) {
     fromAmountRangeError = i18n.t({
       id: 'requiredMax',
@@ -175,7 +175,7 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
         symbol: swap.from.symbol,
       },
     });
-    recommendation = errorMessages.bridgeLimitErrors.decreaseAmount;
+    recommendation = errorMessages().bridgeLimitErrors.decreaseAmount;
   }
 
   return { swap, fromAmountRangeError, recommendation };
@@ -194,14 +194,14 @@ export function getSwapButtonState(
 ): SwapButtonState {
   if (loadingMetaStatus !== 'success') {
     return {
-      title: swapButtonTitles.connectWallet,
+      title: swapButtonTitles().connectWallet,
       state: ButtonState.WAITFORCONNECTING,
       disabled: true,
     };
   }
   if (connectedWallets.length == 0) {
     return {
-      title: swapButtonTitles.connectWallet,
+      title: swapButtonTitles().connectWallet,
       state: ButtonState.WAITFORCONNECTING,
       disabled: false,
     };
@@ -215,27 +215,27 @@ export function getSwapButtonState(
     inputAmount === '0'
   ) {
     return {
-      title: swapButtonTitles.swap,
+      title: swapButtonTitles().swap,
       disabled: true,
       state: ButtonState.SWAP,
     };
   } else if (highValueLoss || priceImpactCanNotBeComputed) {
     return {
-      title: swapButtonTitles.swapAnyway,
+      title: swapButtonTitles().swapAnyway,
       disabled: false,
       hasWarning: true,
       state: ButtonState.NEEDTOCONFIRM,
     };
   } else if (needsToWarnEthOnPath) {
     return {
-      title: swapButtonTitles.ethRouteWarning,
+      title: swapButtonTitles().ethRouteWarning,
       disabled: false,
       hasWarning: true,
       state: ButtonState.WARNING,
     };
   }
   return {
-    title: swapButtonTitles.swap,
+    title: swapButtonTitles().swap,
     disabled: false,
     state: ButtonState.SWAP,
   };

package/dist/hooks/usePrepareBlockchainList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePrepareBlockchainList.d.ts","sourceRoot":"","sources":["../../src/hooks/usePrepareBlockchainList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAIhD,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,IAAI,EAAE,cAAc,EAAE,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACtC,WAAW,EAAE,cAAc,EAAE,EAC7B,OAAO,CAAC,EAAE,kBAAkB,GAC3B,iBAAiB,CAgEnB"}