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

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,12 @@
-type Theme = 'auto' | 'dark' | 'light';
+import { type Language } from '@rango-dev/ui';
+export type ThemeMode = 'auto' | 'dark' | 'light';
 export interface SettingsState {
     slippage: number;
     customSlippage: number | null;
     infiniteApprove: boolean;
     disabledLiquiditySources: string[];
-    theme: Theme;
+    theme: ThemeMode;
+    language: Language;
     affiliateRef: string | null;
     affiliatePercent: number | null;
     affiliateWallets: {
@@ -14,7 +16,8 @@ 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;
@@ -49,7 +52,8 @@ export declare const useSettingsStore: {
         customSlippage: () => number | null;
         infiniteApprove: () => boolean;
         disabledLiquiditySources: () => string[];
-        theme: () => Theme;
+        theme: () => ThemeMode;
+        language: () => "en" | "es" | "jp" | "fr";
         affiliateRef: () => string | null;
         affiliatePercent: () => number | null;
         affiliateWallets: () => {
@@ -59,7 +63,8 @@ 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;
@@ -68,5 +73,4 @@ export declare const useSettingsStore: {
         } | null) => 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;AAW9C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,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,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;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,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;CACX;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAdH,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;;CA0FV,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.14.1-next.14",
+  "version": "0.14.1-next.15",
   "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/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/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/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,20 +1,23 @@
+import { type Language } from '@rango-dev/ui';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 
+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 {
   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;
@@ -22,7 +25,8 @@ 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;
@@ -43,6 +47,7 @@ export const useSettingsStore = createSelectors(
         affiliateWallets: null,
         disabledLiquiditySources: [],
         theme: 'auto',
+        language: DEFAULT_LANGUAGE,
         setSlippage: (slippage) =>
           set(() => ({
             slippage: slippage,
@@ -106,6 +111,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,
   };