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

package/dist/pages/LanguagePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LanguagePage.d.ts","sourceRoot":"","sources":["../../src/pages/LanguagePage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAYxC,wBAAgB,YAAY,sBA8D3B"}
+{"version":3,"file":"LanguagePage.d.ts","sourceRoot":"","sources":["../../src/pages/LanguagePage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,wBAAgB,YAAY,sBA2C3B"}

package/dist/store/settings.d.ts

@@ -1,10 +1,14 @@
-type Theme = 'auto' | 'dark' | 'light';
+import { type Language } from '@rango-dev/ui';
+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: {
@@ -14,13 +18,15 @@ export interface SettingsState {
     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 declare const useSettingsStore: {
     (): SettingsState;
@@ -45,11 +51,13 @@ export declare const useSettingsStore: {
     };
 } & {
     use: {
+        preferredBlockchains: () => string[];
         slippage: () => number;
         customSlippage: () => number | null;
         infiniteApprove: () => boolean;
         disabledLiquiditySources: () => string[];
-        theme: () => Theme;
+        theme: () => ThemeMode;
+        language: () => "en" | "es" | "jp" | "fr";
         affiliateRef: () => string | null;
         affiliatePercent: () => number | null;
         affiliateWallets: () => {
@@ -59,14 +67,15 @@ export declare const useSettingsStore: {
         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 {};
 //# sourceMappingURL=settings.d.ts.map

package/dist/store/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/store/settings.ts"],"names":[],"mappings":"AASA,KAAK,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnD,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iBAAiB,EAAE,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,yBAAyB,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,mBAAmB,EAAE,CACnB,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,KAC/C,IAAI,CAAC;CACX;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAbH,MAAM,KAAK,IAAI;kDACH,MAAM,GAAG,IAAI,KAAK,IAAI;2CAC7B,IAAI;4CACH,MAAM,KAAK,IAAI;gCAC3B,KAAK,KAAK,IAAI;wDACU,OAAO,KAAK,IAAI;8CAC1B,MAAM,GAAG,IAAI,KAAK,IAAI;sDACd,MAAM,GAAG,IAAI,KAAK,IAAI;;;qBAGzD,IAAI;;CAqFV,CAAC"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/store/settings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAY9C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,oBAAoB,EAAE,MAAM,EAAE,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAEnD,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iBAAiB,EAAE,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,yBAAyB,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,mBAAmB,EAAE,CACnB,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,KAC/C,IAAI,CAAC;IACV,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAfH,MAAM,KAAK,IAAI;kDACH,MAAM,GAAG,IAAI,KAAK,IAAI;2CAC7B,IAAI;4CACH,MAAM,KAAK,IAAI;gCAC3B,SAAS,KAAK,IAAI;sCACZ,QAAQ,KAAK,IAAI;wDACC,OAAO,KAAK,IAAI;8CAC1B,MAAM,GAAG,IAAI,KAAK,IAAI;sDACd,MAAM,GAAG,IAAI,KAAK,IAAI;;;qBAGzD,IAAI;mDAC4B,MAAM,KAAK,IAAI;;CAsHrD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.14.1-next.14",
+  "version": "0.14.1-next.16",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "@rango-dev/queue-manager-core": "^0.17.0",
     "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.2",
     "@rango-dev/queue-manager-react": "^0.17.0",
-    "@rango-dev/ui": "^0.17.1-next.9",
+    "@rango-dev/ui": "^0.17.1-next.10",
     "@rango-dev/wallets-react": "^0.3.1-next.1",
     "@rango-dev/wallets-shared": "^0.17.1-next.0",
     "bignumber.js": "^9.1.1",

package/src/Widget.tsx

@@ -9,6 +9,7 @@ import { AppRouter } from './components/AppRouter';
 import { AppRoutes } from './components/AppRoutes';
 import { WidgetEvents } from './components/WidgetEvents';
 import { globalFont } from './globalStyles';
+import { useLanguage } from './hooks/useLanguage';
 import { useTheme } from './hooks/useTheme';
 import QueueManager from './QueueManager';
 import { useAppStore } from './store/app';
@@ -44,6 +45,8 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
   globalFont();
 
   const { activeTheme } = useTheme(config?.theme || {});
+  const { activeLanguage, changeLanguage } = useLanguage();
+
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
     useState<string>('');
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
@@ -65,8 +68,14 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
   }, []);
 
+  useEffect(() => {
+    if (config?.language) {
+      changeLanguage(config.language);
+    }
+  }, [config?.language]);
+
   return (
-    <I18nManager language={config?.language}>
+    <I18nManager language={activeLanguage}>
       <MainContainer id="swap-container" className={activeTheme()}>
         <QueueManager>
           <WidgetEvents />

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -11,28 +11,31 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
+import { BLOCKCHAIN_LIST_SIZE } from '../../constants/configs';
 import { usePrepareBlockchainList } from '../../hooks/usePrepareBlockchainList';
 import { useBestRouteStore } from '../../store/bestRoute';
 import { useMetaStore } from '../../store/meta';
 
 import { Container } from './BlockchainsSection.styles';
 
-const LIST_SIZE = 10;
-const MAX_ITEMS = LIST_SIZE + 1;
 const NUMBER_OF_LOADING = 12;
 
 export function BlockchainsSection(props: PropTypes) {
   const { blockchains, type, blockchain, onChange, onMoreClick } = props;
   const blockchainsList = usePrepareBlockchainList(blockchains, {
-    limit: blockchains.length === MAX_ITEMS ? MAX_ITEMS : LIST_SIZE,
+    limit: BLOCKCHAIN_LIST_SIZE,
     selected: blockchain?.name,
   });
 
   const loadingStatus = useMetaStore.use.loadingStatus();
   const resetToBlockchain = useBestRouteStore.use.resetToBlockchain();
   const resetFromBlockchain = useBestRouteStore.use.resetFromBlockchain();
-  const showMoreButton =
-    blockchains.length !== MAX_ITEMS && blockchainsList.more.length;
+  const hasMoreItemsInList = blockchainsList.more.length > 0;
+  /**
+   * When only one item is left on list, we will not show the `More` button and will show the item itself instead.
+   */
+  const onlyOneItemInList = blockchainsList.more.length === 1;
+  const showMoreButton = !onlyOneItemInList && hasMoreItemsInList;
 
   return (
     <div>
@@ -70,8 +73,20 @@ export function BlockchainsSection(props: PropTypes) {
               </BlockchainsChip>
             ))}
 
+            {onlyOneItemInList ? (
+              <BlockchainsChip
+                key={blockchainsList.more[0].name}
+                selected={
+                  !!blockchain &&
+                  blockchain.name === blockchainsList.more[0].name
+                }
+                onClick={() => onChange(blockchainsList.more[0])}>
+                <Image src={blockchainsList.more[0].logo} size={30} />
+              </BlockchainsChip>
+            ) : null}
+
             {showMoreButton ? (
-              <BlockchainsChip onClick={onMoreClick}>
+              <BlockchainsChip onClick={onMoreClick} key="more-blockchains">
                 <Typography variant="body" size="xsmall" color="secondary500">
                   {i18n._('More +{count}', {
                     count: blockchainsList.more.length,

package/src/components/NoRoutes/NoRoutes.helper.ts

@@ -15,7 +15,7 @@ export function makeInfo(
     return {
       alert: {
         type: 'warning',
-        text: errorMessages.genericServerError,
+        text: errorMessages().genericServerError,
         action: {
           onClick: refetchBestRoute,
           title: i18n.t('Retry'),
@@ -36,17 +36,17 @@ export function makeInfo(
     return {
       alert: {
         type: 'warning',
-        text: errorMessages.liquiditySourcesError.title,
+        text: errorMessages().liquiditySourcesError.title,
         action: {
           onClick: () => toggleAllLiquiditySources(true),
           title: i18n.t('Reset'),
         },
       },
-      description: errorMessages.liquiditySourcesError.description,
+      description: errorMessages().liquiditySourcesError.description,
     };
   }
   return {
     alert: null,
-    description: errorMessages.noRoutesError.description,
+    description: errorMessages().noRoutesError.description,
   };
 }

package/src/components/NoRoutes/NoRoutes.tsx

@@ -40,7 +40,7 @@ export function NoRoutes(props: PropTypes) {
       <NoRouteIcon size={24} color="gray" />
       <Divider size={4} />
       <Typography variant="title" size="small">
-        {errorMessages.noRoutesError.title}
+        {errorMessages().noRoutesError.title}
       </Typography>
       {!!info.description && (
         <Typography

package/src/components/RouteErrors/RouteErrors.tsx

@@ -42,8 +42,8 @@ export function RouteErrors(props: PropTypes) {
               <Alert
                 title={
                   highValueLoss
-                    ? errorMessages.highValueLossError.title
-                    : errorMessages.unknownPriceError.title
+                    ? errorMessages().highValueLossError.title
+                    : errorMessages().unknownPriceError.title
                 }
                 type={
                   highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)

package/src/components/RouteErrors/RouteErrorsModal.tsx

@@ -87,14 +87,14 @@ export function RouteErrorsModal(props: ModalPropTypes) {
       {highValueLoss ? (
         <MessageBox
           type={type}
-          title={errorMessages.highValueLossError.impactTitle}
-          description={errorMessages.highValueLossError.description}
+          title={errorMessages().highValueLossError.impactTitle}
+          description={errorMessages().highValueLossError.description}
         />
       ) : (
         <MessageBox
           type={type}
-          title={errorMessages.unknownPriceError.impactTitle}
-          description={errorMessages.unknownPriceError.description}
+          title={errorMessages().unknownPriceError.impactTitle}
+          description={errorMessages().unknownPriceError.description}
         />
       )}
       {highValueLoss && (
@@ -121,8 +121,8 @@ export function RouteErrorsModal(props: ModalPropTypes) {
           navigate(navigationRoutes.confirmSwap);
         }}>
         {highValueLoss
-          ? errorMessages.highValueLossError.confirmMessage
-          : errorMessages.unknownPriceError.confirmMessage}
+          ? errorMessages().highValueLossError.confirmMessage
+          : errorMessages().unknownPriceError.confirmMessage}
       </Button>
     </Modal>
   );

package/src/constants/configs.ts

@@ -0,0 +1 @@
+export const BLOCKCHAIN_LIST_SIZE = 10;

package/src/constants/errors.ts

@@ -4,54 +4,56 @@ import { i18n } from '@lingui/core';
 
 import { ConfirmSwapErrorTypes } from '../types';
 
-export const errorMessages = {
-  genericServerError: i18n.t('Failed Network, Please retry your swap.'),
-  liquiditySourcesError: {
-    title: i18n.t('Please reset your liquidity sources.'),
-    description: i18n.t(
-      'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources'
-    ),
-  },
-  noRoutesError: {
-    title: i18n.t('No Routes Found'),
-    description:
-      "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination.",
-  },
-  bridgeLimitErrors: {
-    increaseAmount: i18n.t('Bridge Limit Error: Please increase your amount'),
-    decreaseAmount: i18n.t('Bridge Limit Error: Please decrease your amount'),
-  },
-  highValueLossError: {
-    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.'
-    ),
-    confirmMessage: i18n.t('Confirm High price impact'),
-  },
-  routeUpdatedWithHighValueLoss: {
-    title: i18n.t(
-      'Route updated and price impact is too high, try again later!'
-    ),
-  },
-  unknownPriceError: {
-    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?'
-    ),
-    confirmMessage: i18n.t('Confirm USD Price Unknown'),
-  },
+export const errorMessages = () => {
+  return {
+    genericServerError: i18n.t('Failed Network, Please retry your swap.'),
+    liquiditySourcesError: {
+      title: i18n.t('Please reset your liquidity sources.'),
+      description: i18n.t(
+        'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources'
+      ),
+    },
+    noRoutesError: {
+      title: i18n.t('No Routes Found'),
+      description:
+        "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination.",
+    },
+    bridgeLimitErrors: {
+      increaseAmount: i18n.t('Bridge Limit Error: Please increase your amount'),
+      decreaseAmount: i18n.t('Bridge Limit Error: Please decrease your amount'),
+    },
+    highValueLossError: {
+      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.'
+      ),
+      confirmMessage: i18n.t('Confirm High price impact'),
+    },
+    routeUpdatedWithHighValueLoss: {
+      title: i18n.t(
+        'Route updated and price impact is too high, try again later!'
+      ),
+    },
+    unknownPriceError: {
+      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?'
+      ),
+      confirmMessage: i18n.t('Confirm USD Price Unknown'),
+    },
+  };
 };
 
 export function getConfirmSwapErrorMessage(error: ConfirmSwapError) {
   switch (error.type) {
     case ConfirmSwapErrorTypes.NO_ROUTE:
-      return error.diagnosisMessage ?? errorMessages.noRoutesError.title;
+      return error.diagnosisMessage ?? errorMessages().noRoutesError.title;
     case ConfirmSwapErrorTypes.REQUEST_FAILED:
-      return errorMessages.genericServerError;
+      return errorMessages().genericServerError;
     case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
-      return errorMessages.routeUpdatedWithHighValueLoss.title;
+      return errorMessages().routeUpdatedWithHighValueLoss.title;
     default:
       return '';
   }

package/src/constants/languages.ts

@@ -0,0 +1,19 @@
+import type { FlagPropTypes, Language } from '@rango-dev/ui';
+
+import { English, French, Japanese, Spanish } from '@rango-dev/ui';
+
+export type LanguageItem = {
+  title: string;
+  label: string;
+  local: Language;
+  SVGFlag: React.ComponentType<FlagPropTypes>;
+};
+
+export const LANGUAGES: LanguageItem[] = [
+  { title: 'English', label: 'English', local: 'en', SVGFlag: English },
+  { title: 'Spanish', label: 'Español', local: 'es', SVGFlag: Spanish },
+  { title: 'French', label: 'Français', local: 'fr', SVGFlag: French },
+  { title: 'Japanese', label: '日本語', local: 'jp', SVGFlag: Japanese },
+];
+
+export const DEFAULT_LANGUAGE = 'en';

package/src/constants/messages.ts

@@ -1,8 +1,10 @@
 import { i18n } from '@lingui/core';
 
-export const swapButtonTitles = {
-  connectWallet: i18n.t('Connect Wallet'),
-  swap: i18n.t('Swap'),
-  swapAnyway: i18n.t('Swap anyway'),
-  ethRouteWarning: i18n.t('The route goes through Ethereum. Continue?'),
+export const swapButtonTitles = () => {
+  return {
+    connectWallet: i18n.t('Connect Wallet'),
+    swap: i18n.t('Swap'),
+    swapAnyway: i18n.t('Swap anyway'),
+    ethRouteWarning: i18n.t('The route goes through Ethereum. Continue?'),
+  };
 };

package/src/hooks/useConfirmSwap.ts

@@ -70,7 +70,7 @@ function throwErrorIfResponseIsNotValid(
   params: { inputUsdValue: BigNumber | null; outputUsdValue: number | null }
 ) {
   if (!response.result) {
-    throw new Error(errorMessages.noRoutesError.title, {
+    throw new Error(errorMessages().noRoutesError.title, {
       cause: {
         type: ConfirmSwapErrorTypes.NO_ROUTE,
         diagnosisMessage: response.diagnosisMessages?.[0],

package/src/hooks/useLanguage.ts

@@ -0,0 +1,27 @@
+import type { LanguageItem } from '../constants/languages';
+
+import { type Language } from '@rango-dev/ui';
+
+import { DEFAULT_LANGUAGE, LANGUAGES } from '../constants/languages';
+import { useSettingsStore } from '../store/settings';
+
+interface UseLanguage {
+  languages: LanguageItem[];
+  defaultLanguage: Language;
+  activeLanguage: Language;
+  changeLanguage: (language: Language) => void;
+}
+
+export function useLanguage(): UseLanguage {
+  const language = useSettingsStore.use.language();
+  const setLanguage = useSettingsStore.use.setLanguage();
+  const languages = LANGUAGES;
+  const defaultLanguage = DEFAULT_LANGUAGE;
+
+  return {
+    activeLanguage: language,
+    languages,
+    defaultLanguage,
+    changeLanguage: setLanguage,
+  };
+}

package/src/hooks/usePrepareBlockchainList/index.ts

@@ -0,0 +1 @@
+export { usePrepareBlockchainList } from './usePrepareBlockchainList';

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.constants.ts

@@ -0,0 +1 @@
+export const MOST_USED_BLOCKChAINS = ['ETH', 'COSMOS', 'OSMOSIS'];

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.ts

@@ -0,0 +1,108 @@
+import type { PrepareListOptions } from './usePrepareBlockchainList.types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants';
+
+export function prepare(
+  blockchains: BlockchainMeta[],
+  preferredBlockchains: string[],
+  options?: PrepareListOptions
+) {
+  /*
+   * TODO:
+   * We copying the `blockchains` which can causes performance penalties but we should because we are mutating the original object.
+   * A better way to solve the problem maybe is using new JS features like Use toSpliced() but
+   * we can not use it right now because we need to upgrade our toolings first.
+   */
+  const list: BlockchainMeta[] = JSON.parse(JSON.stringify(blockchains));
+  let more: BlockchainMeta[] = [];
+
+  list.sort(sortByMostUsedBlockchains);
+
+  // Checking `limit` has set and it should be more than of the list items.
+  if (!!options?.limit && blockchains.length > options.limit) {
+    const start = options.limit;
+    let preferredBlockchainsWithoutMainList = preferredBlockchains;
+
+    if (preferredBlockchains.length <= options.limit) {
+      /*
+       * For first X (limit) numbers, we need to remove them from preferred if exists.
+       */
+      for (let i = 0; i < options.limit; i++) {
+        const blockchain = list[i];
+        preferredBlockchainsWithoutMainList =
+          preferredBlockchainsWithoutMainList.filter((preferredBlockchain) => {
+            return blockchain.name !== preferredBlockchain;
+          });
+      }
+    }
+    list.sort(
+      generateSortByPreferredBlockchainsFor(preferredBlockchainsWithoutMainList)
+    );
+
+    /*
+     * Splice will modify the original list and returns the deleted items
+     * We use the deleted items as `more`
+     */
+    more = list.splice(start);
+  }
+  return {
+    list,
+    more,
+  };
+}
+
+/** There is a hardcoded list of blockchains that we want to show them first in the list. */
+export function sortByMostUsedBlockchains(
+  a: BlockchainMeta,
+  b: BlockchainMeta
+) {
+  const mostUsed = MOST_USED_BLOCKChAINS;
+  const aIndexInMostUsed = mostUsed.findIndex((token) => token === a.name);
+  const bIndexInMostUsed = mostUsed.findIndex((token) => token === b.name);
+  const aIsMostUsed = aIndexInMostUsed > -1;
+  const bIsMostUsed = bIndexInMostUsed > -1;
+
+  if (aIsMostUsed && bIsMostUsed) {
+    return aIndexInMostUsed > bIndexInMostUsed ? 1 : -1;
+  }
+
+  if (aIsMostUsed) {
+    return -1;
+  }
+
+  if (bIsMostUsed) {
+    return 1;
+  }
+
+  return 0;
+}
+
+export function generateSortByPreferredBlockchainsFor(
+  preferredBlockchains: string[]
+) {
+  return function sortByPreferred(a: BlockchainMeta, b: BlockchainMeta) {
+    const aIndexInPreferred = preferredBlockchains.findIndex(
+      (blockchain) => blockchain === a.name
+    );
+    const bIndexInPreferred = preferredBlockchains.findIndex(
+      (blockchain) => blockchain === b.name
+    );
+
+    const aIsPreferred = aIndexInPreferred > -1;
+    const bIsPreferred = bIndexInPreferred > -1;
+
+    if (aIsPreferred && bIsPreferred) {
+      return aIndexInPreferred > bIndexInPreferred ? 1 : -1;
+    }
+
+    if (preferredBlockchains.includes(a.name)) {
+      return -1;
+    }
+    if (preferredBlockchains.includes(b.name)) {
+      return 1;
+    }
+
+    return 0;
+  };
+}