@rango-dev/widget-embedded 0.23.1-next.27 → 0.23.1-next.29

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

@@ -1 +1 @@
-{"version":3,"file":"LanguagePage.d.ts","sourceRoot":"","sources":["../../src/pages/LanguagePage.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,wBAAgB,YAAY,sBA8C3B"}
+{"version":3,"file":"LanguagePage.d.ts","sourceRoot":"","sources":["../../src/pages/LanguagePage.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,YAAY,sBAkD3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.27",
+  "version": "0.23.1-next.29",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/containers/Settings/Lists.tsx

@@ -29,6 +29,7 @@ import { useNavigate } from 'react-router-dom';
 import { SlippageTooltipContainer as TooltipContainer } from '../../components/Slippage/Slippage.styles';
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { ThemeModeEnum } from '../../constants/settings';
+import { useLanguage } from '../../hooks/useLanguage';
 import { useAppStore } from '../../store/AppStore';
 import { getContainer } from '../../utils/common';
 import { getUniqueSwappersGroups, isFeatureHidden } from '../../utils/settings';
@@ -85,6 +86,10 @@ export function SettingsLists() {
   const navigate = useNavigate();
   const { theme: themeConfig } = useAppStore().config;
   const { setTheme, theme } = useAppStore();
+  const { activeLanguage, languages } = useLanguage();
+  const currentLanguage = languages.find(
+    (language) => language.local === activeLanguage
+  )?.label;
 
   const fetchStatus = useAppStore().fetchStatus;
   const swappers = useAppStore().swappers();
@@ -122,7 +127,7 @@ export function SettingsLists() {
     (uniqueItem) => uniqueItem.selected
   ).length;
 
-  const handleEndItem = (totalSelected: number, total: number) => {
+  const handleSwapperEndItem = (totalSelected: number, total: number) => {
     switch (fetchStatus) {
       case 'loading':
         return <Skeleton variant="text" size="medium" width={50} />;
@@ -150,7 +155,7 @@ export function SettingsLists() {
     ),
     end: (
       <>
-        {handleEndItem(totalSelectedBridgeSources, totalBridgeSources)}
+        {handleSwapperEndItem(totalSelectedBridgeSources, totalBridgeSources)}
         <Divider direction="horizontal" size={8} />
         <ChevronRightIcon color="black" />
       </>
@@ -168,7 +173,10 @@ export function SettingsLists() {
     ),
     end: (
       <>
-        {handleEndItem(totalSelectedExchangeSources, totalExchangeSources)}
+        {handleSwapperEndItem(
+          totalSelectedExchangeSources,
+          totalExchangeSources
+        )}
         <Divider direction="horizontal" size={8} />
         <ChevronRightIcon color="gray" />
       </>
@@ -185,7 +193,15 @@ export function SettingsLists() {
       </Typography>
     ),
     start: <LanguageIcon color="gray" size={14} />,
-    end: <ChevronRightIcon color="gray" />,
+    end: (
+      <>
+        <Typography variant="body" size="medium">
+          {currentLanguage}
+        </Typography>
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="gray" />,
+      </>
+    ),
     onClick: () => navigate(navigationRoutes.languages),
   };
 

package/src/hooks/useTheme.ts

@@ -21,12 +21,11 @@ export function useTheme(props: WidgetTheme) {
     fontFamily = DEFAULT_FONT_FAMILY,
     borderRadius = DEFAULT_PRIMARY_RADIUS,
     secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS,
-    mode = 'auto',
   } = props;
 
   const [OSTheme, setOSTheme] = useState('light');
 
-  const { setTheme, theme } = useAppStore();
+  const { theme } = useAppStore();
 
   const { dark, light } = customizedThemeTokens(colors);
 
@@ -81,12 +80,6 @@ export function useTheme(props: WidgetTheme) {
     };
   }, []);
 
-  useEffect(() => {
-    if (mode !== 'auto') {
-      setTheme(mode);
-    }
-  }, [mode]);
-
   const getActiveTheme = () => {
     const lightClassNames = lightThemeClasses.join(' ');
     const darkClassNames = darkThemeClasses.join(' ');

package/src/pages/LanguagePage.tsx

@@ -12,9 +12,11 @@ import React from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
 import { useLanguage } from '../hooks/useLanguage';
+import { useNavigateBack } from '../hooks/useNavigateBack';
 
 export function LanguagePage() {
   const { activeLanguage, changeLanguage, languages } = useLanguage();
+  const navigateBack = useNavigateBack();
 
   const languageList = languages.map((languageItem) => {
     const { local, label, SVGFlag } = languageItem;
@@ -26,7 +28,10 @@ export function LanguagePage() {
           {label}
         </Typography>
       ),
-      onClick: () => changeLanguage(languageItem.local),
+      onClick: () => {
+        changeLanguage(languageItem.local);
+        navigateBack();
+      },
       end: <Radio value={local} />,
       start: <SVGFlag />,
     };