@rango-dev/widget-embedded 0.23.1-next.9 → 0.24.0

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';
@@ -50,7 +51,7 @@ const themesList = [
   },
   {
     id: ThemeModeEnum.DARK,
-    icon: <DarkModeIcon color="black" size={16} />,
+    icon: <DarkModeIcon color="black" size={14} />,
     tooltip: (
       <Typography size="xsmall" variant="body">
         {i18n.t('Dark')}
@@ -69,7 +70,7 @@ const themesList = [
 ];
 
 const getThemeIcon = (theme: ThemeMode) => {
-  const iconProps: SvgIconProps = { color: 'gray', size: 12 };
+  const iconProps: SvgIconProps = { color: 'gray', size: 14 };
 
   switch (theme) {
     case 'auto':
@@ -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();
@@ -104,9 +109,8 @@ export function SettingsLists() {
     disabledLiquiditySources
   );
 
-  const bridgeSources = supportedUniqueSwappersGroups.filter(
-    (uniqueItem) =>
-      uniqueItem.type === 'BRIDGE' || uniqueItem.type === 'AGGREGATOR'
+  const bridgeSources = supportedUniqueSwappersGroups.filter((uniqueItem) =>
+    ['BRIDGE', 'AGGREGATOR', 'OFF_CHAIN'].includes(uniqueItem.type)
   );
 
   const totalBridgeSources = bridgeSources.length;
@@ -123,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} />;
@@ -151,13 +155,13 @@ export function SettingsLists() {
     ),
     end: (
       <>
-        {handleEndItem(totalSelectedBridgeSources, totalBridgeSources)}
+        {handleSwapperEndItem(totalSelectedBridgeSources, totalBridgeSources)}
         <Divider direction="horizontal" size={8} />
         <ChevronRightIcon color="black" />
       </>
     ),
     onClick: () => navigate(navigationRoutes.bridges),
-    start: <BridgeIcon color="gray" size={12} />,
+    start: <BridgeIcon color="gray" size={14} />,
   };
 
   const exchangeItem = {
@@ -169,12 +173,15 @@ export function SettingsLists() {
     ),
     end: (
       <>
-        {handleEndItem(totalSelectedExchangeSources, totalExchangeSources)}
+        {handleSwapperEndItem(
+          totalSelectedExchangeSources,
+          totalExchangeSources
+        )}
         <Divider direction="horizontal" size={8} />
         <ChevronRightIcon color="gray" />
       </>
     ),
-    start: <ExchangeIcon color="gray" size={12} />,
+    start: <ExchangeIcon color="gray" size={14} />,
     onClick: () => navigate(navigationRoutes.exchanges),
   };
 
@@ -185,8 +192,16 @@ export function SettingsLists() {
         {i18n.t('Language')}
       </Typography>
     ),
-    start: <LanguageIcon color="gray" size={12} />,
-    end: <ChevronRightIcon color="gray" />,
+    start: <LanguageIcon color="gray" size={14} />,
+    end: (
+      <>
+        <Typography variant="body" size="medium">
+          {currentLanguage}
+        </Typography>
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="gray" />
+      </>
+    ),
     onClick: () => navigate(navigationRoutes.languages),
   };
 
@@ -215,7 +230,7 @@ export function SettingsLists() {
         </Tooltip>
       </>
     ),
-    start: <DoneIcon color="gray" size={12} />,
+    start: <DoneIcon color="gray" size={14} />,
     end: <Switch checked={infiniteApprove} />,
     onClick: toggleInfiniteApprove,
   };

package/src/containers/Wallets/Wallets.tsx

@@ -1,5 +1,5 @@
 import type {
-  OnConnectHandler,
+  OnWalletConnectionChange,
   PropTypes,
   WidgetContextInterface,
 } from './Wallets.types';
@@ -10,7 +10,7 @@ import type { PropsWithChildren } from 'react';
 import { Events, Provider } from '@rango-dev/wallets-react';
 import { type Network } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-sdk';
-import React, { createContext, useEffect, useRef } from 'react';
+import React, { createContext, useEffect, useMemo, useRef } from 'react';
 
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
@@ -25,6 +25,9 @@ export const WidgetContext = createContext<WidgetContextInterface>({
   onConnectWallet: () => {
     return;
   },
+  onDisconnectWallet: () => {
+    return;
+  },
 });
 
 function Main(props: PropsWithChildren<PropTypes>) {
@@ -36,7 +39,8 @@ function Main(props: PropsWithChildren<PropTypes>) {
   };
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
-  const onConnectWalletHandler = useRef<OnConnectHandler>();
+  const onConnectWalletHandler = useRef<OnWalletConnectionChange>();
+  const onDisconnectWalletHandler = useRef<OnWalletConnectionChange>();
 
   useEffect(() => {
     void fetchMeta().catch(console.log);
@@ -70,6 +74,13 @@ function Main(props: PropsWithChildren<PropTypes>) {
         }
       } else {
         disconnectWallet(type);
+        if (!!onDisconnectWalletHandler.current) {
+          onDisconnectWalletHandler.current(type);
+        } else {
+          console.warn(
+            `onDisconnectWallet handler hasn't been set. Are you sure?`
+          );
+        }
       }
     }
     if (event === Events.ACCOUNTS && state.connected) {
@@ -102,14 +113,20 @@ function Main(props: PropsWithChildren<PropTypes>) {
   };
   const isActiveTab = useUiStore.use.isActiveTab();
 
+  const handlers = useMemo(
+    () => ({
+      onConnectWallet: (handler: OnWalletConnectionChange) => {
+        onConnectWalletHandler.current = handler;
+      },
+      onDisconnectWallet: (handler: OnWalletConnectionChange) => {
+        onDisconnectWalletHandler.current = handler;
+      },
+    }),
+    []
+  );
+
   return (
-    <WidgetContext.Provider
-      // eslint-disable-next-line react/jsx-no-constructed-context-values
-      value={{
-        onConnectWallet: (handler) => {
-          onConnectWalletHandler.current = handler;
-        },
-      }}>
+    <WidgetContext.Provider value={handlers}>
       <Provider
         allBlockChains={blockchains}
         providers={providers}

package/src/containers/Wallets/Wallets.types.ts

@@ -1,9 +1,20 @@
 import type { WidgetConfig } from '../../types';
 import type { EventHandler } from '@rango-dev/wallets-react';
 
-export type OnConnectHandler = (key: string) => void;
+export type OnWalletConnectionChange = (key: string) => void;
 export interface WidgetContextInterface {
-  onConnectWallet(handler: OnConnectHandler): void;
+  /**
+   * A wallet connection handler, utilized within the wallet provider,
+   * is linked to the useBootstrap hook for synchronizing the state of the last connected wallet.
+   * It's important not to override this handler in other locations.
+   */
+  onConnectWallet(handler: OnWalletConnectionChange): void;
+  /**
+   * A wallet disconnection handler, utilized within the wallet provider,
+   * is linked to the useBootstrap hook for synchronizing the state of the last disconnected wallet.
+   * It's important not to override this handler in other locations.
+   */
+  onDisconnectWallet(handler: OnWalletConnectionChange): void;
 }
 
 export interface PropTypes {

package/src/containers/Widget/Widget.tsx

@@ -1,25 +1,25 @@
 import type { WidgetProps } from './Widget.types';
 import type { PropsWithChildren } from 'react';
 
-import React, { useEffect } from 'react';
+import React from 'react';
 
+import { AppRouter } from '../../components/AppRouter';
 import { DEFAULT_CONFIG } from '../../store/slices/config';
-import { tabManager } from '../../store/ui';
 import { Main } from '../App';
 import { WidgetProvider } from '../WidgetProvider';
 
 export function Widget(props: PropsWithChildren<WidgetProps>) {
-  useEffect(() => {
-    tabManager.init();
-    return tabManager.destroy;
-  }, []);
+  const isExternalWalletsEnabled = props.config?.externalWallets;
 
-  if (!props.config?.externalWallets) {
-    return (
-      <WidgetProvider config={props.config ?? DEFAULT_CONFIG}>
+  return (
+    <AppRouter>
+      {isExternalWalletsEnabled ? (
         <Main />
-      </WidgetProvider>
-    );
-  }
-  return <Main />;
+      ) : (
+        <WidgetProvider config={props.config ?? DEFAULT_CONFIG}>
+          <Main />
+        </WidgetProvider>
+      )}
+    </AppRouter>
+  );
 }

package/src/hooks/useBootstrap/index.ts

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

package/src/hooks/useBootstrap/useBootstrap.ts

@@ -0,0 +1,72 @@
+import type { WalletType } from '../..';
+
+import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
+import { splitWalletNetwork } from '@rango-dev/wallets-shared';
+import { isEvmBlockchain } from 'rango-sdk';
+import { useContext, useEffect, useState } from 'react';
+
+import { useWallets } from '../..';
+import { WidgetContext } from '../../containers/Wallets';
+import { globalFont } from '../../globalStyles';
+import { useAppStore } from '../../store/AppStore';
+import { useNotificationStore } from '../../store/notification';
+import { tabManager } from '../../store/ui';
+import { useFetchApiConfig } from '../useFetchApiConfig';
+import { useForceAutoConnect } from '../useForceAutoConnect';
+
+export function useBootstrap() {
+  globalFont();
+  useForceAutoConnect();
+  const blockchains = useAppStore().blockchains();
+  const { canSwitchNetworkTo } = useWallets();
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+  const widgetContext = useContext(WidgetContext);
+
+  const evmChains = blockchains.filter(isEvmBlockchain);
+
+  const { fetchApiConfig } = useFetchApiConfig();
+
+  // At the moment, we only detect the disconnection of EVM wallets.
+  useQueueManager({
+    lastConnectedWallet: lastConnectedWalletWithNetwork,
+    clearDisconnectedWallet: () => {
+      setDisconnectedWallet(undefined);
+    },
+    disconnectedWallet: disconnectedWallet,
+    evmChains,
+    canSwitchNetworkTo,
+  });
+
+  useEffect(() => {
+    tabManager.init();
+
+    if (!useNotificationStore.persist.hasHydrated()) {
+      void useNotificationStore.persist.rehydrate();
+    }
+
+    /**
+     * Add handlers to the widget context for connecting and disconnecting wallets.
+     * We pass these handlers to the wallet provider to keep track of the last connected and last disconnected wallets.
+     * The 'queue-manager' uses these details to spot any changes in the connection status of the required wallet during the swap process.
+     *
+     * with this approch anyone who use the widget context can override these handlers and causes some bugs happens.
+     * it the future we should add a safer soloution like considering array of handlers .
+     * https://github.com/rango-exchange/rango-client/pull/630/files#r1518846728
+     */
+    widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
+    widgetContext.onDisconnectWallet((walletType) => {
+      setDisconnectedWallet(walletType);
+      if (
+        walletType === splitWalletNetwork(lastConnectedWalletWithNetwork)?.[0]
+      ) {
+        setLastConnectedWalletWithNetwork('');
+      }
+    });
+
+    void fetchApiConfig().catch(console.log);
+
+    return tabManager.destroy;
+  }, []);
+}

package/src/hooks/useScreenDetect.ts

@@ -0,0 +1,49 @@
+import { useLayoutEffect, useState } from 'react';
+
+/*
+ * mobile: screen <= 480
+ * tablet: screen > 480 and screen <= 768
+ * notebook: screen > 768 & screen <= 1024
+ * large: screen > 1024 & screen <= 1200
+ * extra large: screen > 1200
+ */
+
+const MIN_TABLET_WIDTH = 480;
+const MIN_NOTEBOOK_WIDTH = 768;
+const MIN_LARGE_SCREEN_WIDTH = 1024;
+const MIN_EXTRA_LARGE_SCREEN_WIDTH = 1200;
+
+const useScreenDetect = () => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [isTablet, setIsTablet] = useState(false);
+  const [isNotebook, setIsNotebook] = useState(false);
+  const [isLargeScreen, setIsLargeScreen] = useState(false);
+  const [isExtraLargeScreen, setIsExtraLargeScreen] = useState(false);
+
+  const handleResize = () => {
+    setIsMobile(window.innerWidth <= MIN_TABLET_WIDTH);
+    setIsTablet(
+      window.innerWidth > MIN_TABLET_WIDTH &&
+        window.innerWidth <= MIN_NOTEBOOK_WIDTH
+    );
+    setIsNotebook(
+      window.innerWidth > MIN_NOTEBOOK_WIDTH &&
+        window.innerWidth <= MIN_LARGE_SCREEN_WIDTH
+    );
+    setIsLargeScreen(
+      window.innerWidth > MIN_LARGE_SCREEN_WIDTH &&
+        window.innerWidth <= MIN_EXTRA_LARGE_SCREEN_WIDTH
+    );
+    setIsExtraLargeScreen(window.innerWidth > MIN_EXTRA_LARGE_SCREEN_WIDTH);
+  };
+
+  useLayoutEffect(() => {
+    handleResize(); // Initial check
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return { isMobile, isTablet, isNotebook, isLargeScreen, isExtraLargeScreen };
+};
+
+export default useScreenDetect;

package/src/hooks/useSwapInput.ts

@@ -46,7 +46,11 @@ export function useSwapInput({
   refetchQuote,
 }: UseSwapInputProps): UseSwapInput {
   const { fetch: fetchQuote, cancelFetch } = useFetchAllQuotes();
-  const { enableNewLiquiditySources, features } = useAppStore().config;
+  const {
+    excludeLiquiditySources: configExcludeLiquiditySources,
+    features,
+    enableCentralizedSwappers,
+  } = useAppStore().config;
   const connectedWallets = useWalletsStore.use.connectedWallets();
 
   const tokens = useAppStore().tokens();
@@ -118,6 +122,7 @@ export function useSwapInput({
         affiliateRef,
         affiliatePercent,
         affiliateWallets,
+        enableCentralizedSwappers,
       });
       if (isFeatureEnabled('experimentalRoute', features)) {
         requestBody.experimental = true;
@@ -223,7 +228,7 @@ export function useSwapInput({
     toToken?.blockchain,
     shouldSkipRequest,
     liquiditySources?.length,
-    enableNewLiquiditySources,
+    configExcludeLiquiditySources,
     disabledLiquiditySources.length,
     userSlippage,
     affiliateRef,

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/hooks/useWalletList.ts

@@ -109,6 +109,18 @@ export function useWalletList(params: Params) {
    * but we have ethereum injected
    */
   const shouldShowDefaultInjectedWallet = (wallets: WalletInfo[]) => {
+    // don't show default injected wallet when it's not installed
+    const defaultWallet = wallets.find(
+      (wallet) => wallet.type === WalletTypes.DEFAULT
+    );
+    if (!defaultWallet || defaultWallet.state === WalletState.NOT_INSTALLED) {
+      return false;
+    }
+
+    /*
+     * if we have another evm wallet installed (except wallet connect),
+     * there is no need to show default injected wallet anymore
+     */
     const isEvmWalletInstalledExceptDefault = wallets.filter(
       (wallet) =>
         wallet.state != WalletState.NOT_INSTALLED &&

package/src/pages/ConfirmSwapPage.tsx

@@ -87,6 +87,7 @@ export function ConfirmSwapPage() {
   const { connectedWallets } = useWalletsStore();
   const showWalletsOnInit = !quoteWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
+  const [isConfirming, setIsConfirming] = useState(false);
   const { isActiveTab } = useUiStore();
   const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
   const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
@@ -137,7 +138,9 @@ export function ConfirmSwapPage() {
   };
 
   const onConfirm = async () => {
+    setIsConfirming(true);
     await addNewSwap();
+    setIsConfirming(false);
   };
 
   const onStartConfirmSwap = async () => {
@@ -326,7 +329,7 @@ export function ConfirmSwapPage() {
               type="primary"
               size="large"
               fullWidth
-              loading={fetchingConfirmationQuote}
+              loading={fetchingConfirmationQuote || isConfirming}
               disabled={!!confirmSwapResult.error || !isActiveTab}
               onClick={onStartConfirmSwap}>
               {i18n.t('Start Swap')}
@@ -336,7 +339,8 @@ export function ConfirmSwapPage() {
             variant="contained"
             type="primary"
             size="large"
-            loading={fetchingConfirmationQuote}
+            loading={fetchingConfirmationQuote || isConfirming}
+            disabled={!isActiveTab}
             onClick={setShowWallets.bind(null, true)}>
             <WalletIcon size={24} />
           </IconButton>
@@ -371,14 +375,19 @@ export function ConfirmSwapPage() {
         </div>
         <Divider size="12" />
 
-        {joinList(alerts, <Divider size={10} />)}
+        {joinList(
+          alerts.map((alert, index) => ({
+            element: alert,
+            key: `alert-${index}`,
+          })),
+          <Divider size={10} />
+        )}
         {alerts.length > 0 ? <Divider size={10} /> : null}
 
         <QuoteInfo
           quote={selectedQuote}
           type="swap-preview"
-          expanded={true}
-          selected
+          expanded
           tagHidden
           error={confirmSwapResult.error}
           loading={fetchingConfirmationQuote}

package/src/pages/Home.tsx

@@ -1,3 +1,5 @@
+import type { SelectedQuote } from '../types';
+
 import { i18n } from '@lingui/core';
 import { Button, Divider, styled, WarningIcon } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
@@ -10,19 +12,20 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { ExpandedQuotes } from '../containers/ExpandedQuotes';
 import { Inputs } from '../containers/Inputs';
 import { QuoteInfo } from '../containers/QuoteInfo';
-import useMobileDetect from '../hooks/useMobileDetect';
+import useScreenDetect from '../hooks/useScreenDetect';
 import { useSwapInput } from '../hooks/useSwapInput';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
-import { getSwapButtonState } from '../utils/swap';
+import { isVariantExpandable } from '../utils/configs';
+import { getSwapButtonState, isTokensIdentical } from '../utils/swap';
 
 const MainContainer = styled('div', {
   display: 'grid',
   gridTemplateColumns: 'auto auto',
   alignItems: 'flex-start',
-  height: 700,
+  maxHeight: 700,
   '& .footer__alert': {
     paddingTop: '0',
   },
@@ -46,7 +49,7 @@ export function Home() {
     updateQuotePartialState,
   } = useQuoteStore();
   const [isVisibleExpanded, setIsVisibleExpanded] = useState<boolean>(false);
-  const isMobile = useMobileDetect();
+  const { isLargeScreen, isExtraLargeScreen } = useScreenDetect();
 
   const { fetch: fetchQuote, loading } = useSwapInput({ refetchQuote });
   const { config, fetchStatus: fetchMetaStatus } = useAppStore();
@@ -67,9 +70,20 @@ export function Home() {
     warning: quoteWarning,
     needsToWarnEthOnPath,
   });
-  const isExpandable = config?.variant === 'expandable' && !isMobile;
+
+  const isExpandable = isVariantExpandable(
+    isLargeScreen,
+    isExtraLargeScreen,
+    config?.variant
+  );
+
   const hasInputs =
-    !!inputAmount && !!fromToken && !!toToken && inputAmount !== '0';
+    !!inputAmount &&
+    !!fromToken &&
+    !!toToken &&
+    inputAmount !== '0' &&
+    !isTokensIdentical(fromToken, toToken);
+
   const fetchingQuote = hasInputs && fetchMetaStatus === 'success' && loading;
 
   const hasValidQuotes =
@@ -102,6 +116,13 @@ export function Home() {
     }
   };
 
+  const onClickOnQuote = (quote: SelectedQuote) => {
+    if (selectedQuote?.requestId !== quote.requestId) {
+      setShowQuoteWarningModal(false);
+      setSelectedQuote(quote);
+    }
+  };
+
   return (
     <MainContainer>
       <Layout
@@ -148,6 +169,7 @@ export function Home() {
           <Inputs
             fetchingQuote={fetchingQuote}
             fetchMetaStatus={fetchMetaStatus}
+            isExpandable={isExpandable}
             onClickToken={(mode) => {
               onHandleNavigation(
                 mode === 'from'
@@ -203,7 +225,7 @@ export function Home() {
       {isExpandable ? (
         <ExpandedQuotes
           loading={fetchingQuote}
-          onClickOnQuote={(quote) => setSelectedQuote(quote)}
+          onClickOnQuote={onClickOnQuote}
           fetch={fetchQuote}
           onClickRefresh={onClickRefresh}
           isVisible={isVisibleExpanded}

package/src/pages/LanguagePage.tsx

@@ -1,5 +1,7 @@
 import { i18n } from '@lingui/core';
 import {
+  Alert,
+  Divider,
   List,
   ListItemButton,
   Radio,
@@ -10,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;
@@ -24,7 +28,10 @@ export function LanguagePage() {
           {label}
         </Typography>
       ),
-      onClick: () => changeLanguage(languageItem.local),
+      onClick: () => {
+        changeLanguage(languageItem.local);
+        navigateBack();
+      },
       end: <Radio value={local} />,
       start: <SVGFlag />,
     };
@@ -36,6 +43,12 @@ export function LanguagePage() {
         title: i18n.t('Language'),
       }}>
       <PageContainer>
+        <Alert
+          type="warning"
+          variant="alarm"
+          title="Important Notice: Machine translations are in use"
+        />
+        <Divider size={'8'} />
         <RadioRoot value={activeLanguage}>
           <List
             type={

package/src/pages/LiquiditySourcePage.tsx

@@ -44,8 +44,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
     validTypes.push('DEX');
   }
   if (sourceType === 'Bridges') {
-    validTypes.push('BRIDGE');
-    validTypes.push('AGGREGATOR');
+    validTypes.push('BRIDGE', 'AGGREGATOR', 'OFF_CHAIN');
   }
 
   const liquiditySources = supportedUniqueSwappersGroups.filter((uniqueItem) =>
@@ -136,11 +135,13 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           fetchStatus === 'success' && (
             <LiquiditySourceList disabled={campaignMode}>
               {filteredList.map((sourceItem) => {
+                const { groupTitle, ...otherProps } = sourceItem;
+
                 return (
                   <React.Fragment key={sourceItem.id}>
                     <ListItemButton
                       style={{ height: '61px' }}
-                      {...sourceItem}
+                      {...otherProps}
                       selected={false}
                       hasDivider
                     />