@rango-dev/widget-embedded 0.23.1-next.2 → 0.23.1-next.4

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,wBAAgB,YAAY,sBA6M3B"}
+{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,wBAAgB,YAAY,sBA+C3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.2",
+  "version": "0.23.1-next.4",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -23,9 +23,9 @@
     "@lingui/react": "4.2.1",
     "@rango-dev/provider-all": "^0.28.0",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.28.1-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.28.1-next.1",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.29.1-next.1",
+    "@rango-dev/ui": "^0.29.1-next.4",
     "@rango-dev/wallets-react": "^0.14.0",
     "@rango-dev/wallets-shared": "^0.28.0",
     "bignumber.js": "^9.1.1",

package/src/components/AppRoutes.tsx

@@ -14,7 +14,6 @@ import { SelectBlockchainPage } from '../pages/SelectBlockchainPage';
 import { SelectSwapItemsPage } from '../pages/SelectSwapItemsPage';
 import { SettingsPage } from '../pages/SettingsPage';
 import { SwapDetailsPage } from '../pages/SwapDetailsPage';
-import { ThemePage } from '../pages/ThemePage';
 import { WalletsPage } from '../pages/WalletsPage';
 
 export function AppRoutes() {
@@ -69,10 +68,6 @@ export function AppRoutes() {
           index: true,
           element: <SettingsPage />,
         },
-        {
-          path: navigationRoutes.themes,
-          element: <ThemePage />,
-        },
         {
           path: navigationRoutes.languages,
           element: <LanguagePage />,

package/src/constants/navigationRoutes.ts

@@ -5,7 +5,6 @@ export const navigationRoutes = {
   blockchains: 'blockchains',
   settings: 'settings',
   liquiditySources: 'liquidity-sources',
-  themes: 'themes',
   bridges: 'bridges',
   exchanges: 'exchanges',
   languages: 'languages',

package/src/constants/settings.ts

@@ -0,0 +1,5 @@
+export enum ThemeModeEnum {
+  DARK = 'dark',
+  LIGHT = 'light',
+  AUTO = 'auto',
+}

package/src/containers/Settings/Lists.tsx

@@ -0,0 +1,265 @@
+import type { ThemeMode } from '../../store/slices/settings';
+import type { ListPropTypes, SvgIconProps } from '@rango-dev/ui';
+
+import { i18n } from '@lingui/core';
+import {
+  AutoThemeIcon,
+  BridgeIcon,
+  ChevronRightIcon,
+  DarkModeIcon,
+  Divider,
+  DoneIcon,
+  ExchangeIcon,
+  InfoIcon,
+  LanguageIcon,
+  LightModeIcon,
+  List,
+  ListItem,
+  ListItemButton,
+  Skeleton,
+  styled,
+  Switch,
+  Tabs,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+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 { useAppStore } from '../../store/AppStore';
+import { getContainer } from '../../utils/common';
+import { getUniqueSwappersGroups, isFeatureHidden } from '../../utils/settings';
+
+const ThemeSection = styled('div', {
+  width: '202px',
+  height: '$40',
+});
+
+const themesList = [
+  {
+    id: ThemeModeEnum.LIGHT,
+    icon: <LightModeIcon color="black" size={16} />,
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        {i18n.t('Light')}
+      </Typography>
+    ),
+  },
+  {
+    id: ThemeModeEnum.DARK,
+    icon: <DarkModeIcon color="black" size={16} />,
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        {i18n.t('Dark')}
+      </Typography>
+    ),
+  },
+  {
+    id: ThemeModeEnum.AUTO,
+    icon: <AutoThemeIcon color="black" size={16} />,
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        {i18n.t('Auto')}
+      </Typography>
+    ),
+  },
+];
+
+const getThemeIcon = (theme: ThemeMode) => {
+  const iconProps: SvgIconProps = { color: 'gray', size: 12 };
+
+  switch (theme) {
+    case 'auto':
+      return <AutoThemeIcon {...iconProps} />;
+    case 'dark':
+      return <DarkModeIcon {...iconProps} />;
+    default:
+      return <LightModeIcon {...iconProps} />;
+  }
+};
+
+export function SettingsLists() {
+  const navigate = useNavigate();
+  const { theme: themeConfig } = useAppStore().config;
+  const { setTheme, theme } = useAppStore();
+
+  const fetchStatus = useAppStore().fetchStatus;
+  const swappers = useAppStore().swappers();
+  const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
+  const {
+    config: { features },
+  } = useAppStore();
+  const isThemeHidden = isFeatureHidden('theme', features);
+  const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
+  const isLanguageHidden = isFeatureHidden('language', features);
+
+  const infiniteApprove = useAppStore().infiniteApprove;
+  const toggleInfiniteApprove = useAppStore().toggleInfiniteApprove;
+
+  const supportedUniqueSwappersGroups = getUniqueSwappersGroups(
+    swappers,
+    disabledLiquiditySources
+  );
+
+  const bridgeSources = supportedUniqueSwappersGroups.filter(
+    (uniqueItem) =>
+      uniqueItem.type === 'BRIDGE' || uniqueItem.type === 'AGGREGATOR'
+  );
+
+  const totalBridgeSources = bridgeSources.length;
+  const totalSelectedBridgeSources = bridgeSources.filter(
+    (uniqueItem) => uniqueItem.selected
+  ).length;
+
+  const exchangeSources = supportedUniqueSwappersGroups.filter(
+    (uniqueItem) => uniqueItem.type === 'DEX'
+  );
+
+  const totalExchangeSources = exchangeSources.length;
+  const totalSelectedExchangeSources = exchangeSources.filter(
+    (uniqueItem) => uniqueItem.selected
+  ).length;
+
+  const handleEndItem = (totalSelected: number, total: number) => {
+    switch (fetchStatus) {
+      case 'loading':
+        return <Skeleton variant="text" size="medium" width={50} />;
+      case 'failed':
+        return (
+          <Typography variant="body" size="medium" color="$error500">
+            {i18n.t('Loading failed')}
+          </Typography>
+        );
+      default:
+        return (
+          <Typography variant="body" size="medium">
+            {`${totalSelected} / ${total}`}
+          </Typography>
+        );
+    }
+  };
+
+  const bridgeItem = {
+    id: 'bridge-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Enabled bridges')}
+      </Typography>
+    ),
+    end: (
+      <>
+        {handleEndItem(totalSelectedBridgeSources, totalBridgeSources)}
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="black" />
+      </>
+    ),
+    onClick: () => navigate(navigationRoutes.bridges),
+    start: <BridgeIcon color="gray" size={12} />,
+  };
+
+  const exchangeItem = {
+    id: 'exchange-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Enabled exchanges')}
+      </Typography>
+    ),
+    end: (
+      <>
+        {handleEndItem(totalSelectedExchangeSources, totalExchangeSources)}
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="gray" />
+      </>
+    ),
+    start: <ExchangeIcon color="gray" size={12} />,
+    onClick: () => navigate(navigationRoutes.exchanges),
+  };
+
+  const languageItem = {
+    id: 'language-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Language')}
+      </Typography>
+    ),
+    start: <LanguageIcon color="gray" size={12} />,
+    end: <ChevronRightIcon color="gray" />,
+    onClick: () => navigate(navigationRoutes.languages),
+  };
+
+  const infiniteApprovalItem = {
+    id: 'infinite-approval-item',
+    title: (
+      <>
+        <Typography variant="title" size="xmedium">
+          {i18n.t('Infinite approval')}
+        </Typography>
+        <Divider direction="horizontal" size={4} />
+        <Tooltip
+          side="top"
+          sideOffset={4}
+          container={getContainer()}
+          content={
+            <TooltipContainer>
+              <Typography variant="label" size="medium" color="neutral700">
+                {i18n.t(
+                  "Enabling the 'Infinite approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
+                )}
+              </Typography>
+            </TooltipContainer>
+          }>
+          <InfoIcon color="gray" />
+        </Tooltip>
+      </>
+    ),
+    start: <DoneIcon color="gray" size={12} />,
+    end: <Switch checked={infiniteApprove} />,
+    onClick: toggleInfiniteApprove,
+  };
+
+  const themeItem = {
+    id: 'theme-item',
+    type: <ListItem />,
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Theme')}
+      </Typography>
+    ),
+    end: (
+      <ThemeSection>
+        <Tabs
+          container={getContainer()}
+          items={themesList}
+          value={theme}
+          onChange={(item) => setTheme(item.id as ThemeMode)}
+          type="primary"
+          borderRadius="small"
+        />
+      </ThemeSection>
+    ),
+    start: getThemeIcon(theme),
+  };
+
+  const settingItems: ListPropTypes['items'] = isLiquidityHidden
+    ? []
+    : [bridgeItem, exchangeItem];
+
+  if (!isLanguageHidden) {
+    settingItems.push(languageItem);
+  }
+  settingItems.push(infiniteApprovalItem);
+
+  if (!themeConfig?.singleTheme && !isThemeHidden) {
+    settingItems.push(themeItem);
+  }
+
+  return (
+    <List
+      type={<ListItemButton hasDivider id="_" onClick={() => console.log()} />}
+      items={settingItems}
+    />
+  );
+}

package/src/pages/SettingsPage.tsx

@@ -1,194 +1,21 @@
 import { i18n } from '@lingui/core';
-import {
-  Alert,
-  Button,
-  ChevronRightIcon,
-  Divider,
-  InfoIcon,
-  List,
-  ListItemButton,
-  Skeleton,
-  styled,
-  Switch,
-  Tooltip,
-  Typography,
-} from '@rango-dev/ui';
+import { Alert, Button, styled } from '@rango-dev/ui';
 import React from 'react';
-import {
-  useInRouterContext,
-  useNavigate,
-  useSearchParams,
-} from 'react-router-dom';
+import { useInRouterContext, useSearchParams } from 'react-router-dom';
 
 import { Layout, PageContainer } from '../components/Layout';
 import { Slippage } from '../components/Slippage';
-import { SlippageTooltipContainer as TooltipContainer } from '../components/Slippage/Slippage.styles';
-import { navigationRoutes } from '../constants/navigationRoutes';
 import { SearchParams } from '../constants/searchParams';
+import { SettingsLists } from '../containers/Settings/Lists';
 import { useAppStore } from '../store/AppStore';
-import { getContainer } from '../utils/common';
-import { getUniqueSwappersGroups, isFeatureHidden } from '../utils/settings';
 
 const ResetAction = styled('div', {
   paddingLeft: '$8',
 });
 
 export function SettingsPage() {
-  const navigate = useNavigate();
-  const { theme } = useAppStore().config;
-  const fetchStatus = useAppStore().fetchStatus;
-  const swappers = useAppStore().swappers();
-  const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
-  const {
-    config: { features },
-    isInCampaignMode,
-    updateCampaignMode,
-  } = useAppStore();
+  const { isInCampaignMode, updateCampaignMode } = useAppStore();
   const campaignMode = isInCampaignMode();
-  const isThemeHidden = isFeatureHidden('theme', features);
-
-  const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
-
-  const isLanguageHidden = isFeatureHidden('language', features);
-
-  const infiniteApprove = useAppStore().infiniteApprove;
-  const toggleInfiniteApprove = useAppStore().toggleInfiniteApprove;
-
-  const supportedUniqueSwappersGroups = getUniqueSwappersGroups(
-    swappers,
-    disabledLiquiditySources
-  );
-
-  const bridgeSources = supportedUniqueSwappersGroups.filter(
-    (uniqueItem) =>
-      uniqueItem.type === 'BRIDGE' || uniqueItem.type === 'AGGREGATOR'
-  );
-  const totalBridgeSources = bridgeSources.length;
-  const totalSelectedBridgeSources = bridgeSources.filter(
-    (uniqueItem) => uniqueItem.selected
-  ).length;
-
-  const exchangeSources = supportedUniqueSwappersGroups.filter(
-    (uniqueItem) => uniqueItem.type === 'DEX'
-  );
-  const totalExchangeSources = exchangeSources.length;
-  const totalSelectedExchangeSources = exchangeSources.filter(
-    (uniqueItem) => uniqueItem.selected
-  ).length;
-
-  const handleEndItem = (totalSelected: number, total: number) => {
-    switch (fetchStatus) {
-      case 'loading':
-        return <Skeleton variant="text" size="medium" width={50} />;
-      case 'failed':
-        return (
-          <Typography variant="body" size="medium" color="$error500">
-            {i18n.t('Loading failed')}
-          </Typography>
-        );
-      default:
-        return (
-          <Typography variant="body" size="medium">
-            {`${totalSelected} / ${total}`}
-          </Typography>
-        );
-    }
-  };
-
-  const bridgeItem = {
-    id: 'bridge-item',
-    title: (
-      <Typography variant="title" size="xmedium">
-        {i18n.t('Enabled bridges')}
-      </Typography>
-    ),
-    end: (
-      <>
-        {handleEndItem(totalSelectedBridgeSources, totalBridgeSources)}
-        <Divider direction="horizontal" size={8} />
-        <ChevronRightIcon color="black" />
-      </>
-    ),
-    onClick: () => navigate(navigationRoutes.bridges),
-  };
-
-  const exchangeItem = {
-    id: 'exchange-item',
-    title: (
-      <Typography variant="title" size="xmedium">
-        {i18n.t('Enabled exchanges')}
-      </Typography>
-    ),
-    end: (
-      <>
-        {handleEndItem(totalSelectedExchangeSources, totalExchangeSources)}
-        <Divider direction="horizontal" size={8} />
-        <ChevronRightIcon color="gray" />
-      </>
-    ),
-    onClick: () => navigate(navigationRoutes.exchanges),
-  };
-
-  const languageItem = {
-    id: 'language-item',
-    title: (
-      <Typography variant="title" size="xmedium">
-        {i18n.t('Language')}
-      </Typography>
-    ),
-    end: <ChevronRightIcon color="gray" />,
-    onClick: () => navigate(navigationRoutes.languages),
-  };
-
-  const themeItem = {
-    id: 'theme-item',
-    title: (
-      <Typography variant="title" size="xmedium">
-        {i18n.t('Theme')}
-      </Typography>
-    ),
-    end: <ChevronRightIcon color="gray" />,
-    onClick: () => navigate(navigationRoutes.themes),
-  };
-
-  const infiniteApprovalItem = {
-    id: 'infinite-approval-item',
-    title: (
-      <>
-        <Typography variant="title" size="xmedium">
-          {i18n.t('Infinite approval')}
-        </Typography>
-        <Divider direction="horizontal" size={4} />
-        <Tooltip
-          side="top"
-          sideOffset={4}
-          container={getContainer()}
-          content={
-            <TooltipContainer>
-              <Typography variant="label" size="medium" color="neutral700">
-                {i18n.t(
-                  "Enabling the 'Infinite approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
-                )}
-              </Typography>
-            </TooltipContainer>
-          }>
-          <InfoIcon color="gray" />
-        </Tooltip>
-      </>
-    ),
-    end: <Switch checked={infiniteApprove} />,
-    onClick: toggleInfiniteApprove,
-  };
-
-  const settingItems = isLiquidityHidden ? [] : [bridgeItem, exchangeItem];
-
-  if (!isLanguageHidden) {
-    settingItems.push(languageItem);
-  }
-  if (!theme?.singleTheme && !isThemeHidden) {
-    settingItems.push(themeItem);
-  }
-  settingItems.push(infiniteApprovalItem);
 
   const [, setSearchParams] = useSearchParams();
   const isRouterInContext = useInRouterContext();
@@ -222,19 +49,14 @@ export function SettingsPage() {
             action={
               <ResetAction>
                 <Button type="secondary" size="small" onClick={onClick}>
-                  Reset
+                  {i18n.t('Reset')}
                 </Button>
               </ResetAction>
             }
           />
         )}
         <Slippage />
-        <List
-          type={
-            <ListItemButton title="_" id="_" onClick={() => console.log()} />
-          }
-          items={settingItems}
-        />
+        <SettingsLists />
       </PageContainer>
     </Layout>
   );

package/dist/pages/ThemePage.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare function ThemePage(): React.JSX.Element;
-//# sourceMappingURL=ThemePage.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ThemePage.d.ts","sourceRoot":"","sources":["../../src/pages/ThemePage.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,wBAAgB,SAAS,sBAiExB"}

package/src/pages/ThemePage.tsx

@@ -1,90 +0,0 @@
-import { i18n } from '@lingui/core';
-import {
-  AutoThemeIcon,
-  DarkModeIcon,
-  LightModeIcon,
-  List,
-  ListItemButton,
-  Radio,
-  RadioRoot,
-  Typography,
-} from '@rango-dev/ui';
-import React from 'react';
-
-import { Layout, PageContainer } from '../components/Layout';
-import { useAppStore } from '../store/AppStore';
-
-type Theme = 'dark' | 'light' | 'auto';
-
-enum Mode {
-  DARK = 'dark',
-  LIGHT = 'light',
-  AUTO = 'auto',
-}
-
-export function ThemePage() {
-  const { setTheme, theme } = useAppStore();
-
-  const themesList = [
-    {
-      id: Mode.LIGHT,
-      value: Mode.LIGHT,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t('Light')}
-        </Typography>
-      ),
-      onClick: () => setTheme(Mode.LIGHT as Theme),
-      start: <LightModeIcon color="gray" />,
-      end: <Radio value={Mode.LIGHT} />,
-    },
-    {
-      id: Mode.DARK,
-      value: Mode.DARK,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t('Dark')}
-        </Typography>
-      ),
-      onClick: () => setTheme(Mode.DARK as Theme),
-      start: <DarkModeIcon color="gray" />,
-      end: <Radio value={Mode.DARK} />,
-    },
-    {
-      id: Mode.AUTO,
-      value: Mode.AUTO,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t('Auto')}
-        </Typography>
-      ),
-      onClick: () => setTheme(Mode.AUTO as Theme),
-      start: <AutoThemeIcon color="gray" />,
-      end: <Radio value={Mode.AUTO} />,
-    },
-  ];
-
-  return (
-    <Layout
-      header={{
-        title: i18n.t('Theme'),
-      }}>
-      <PageContainer>
-        <RadioRoot
-          onValueChange={(value) => setTheme(value as Theme)}
-          value={theme}>
-          <List
-            type={
-              <ListItemButton
-                title={i18n.t('Theme')}
-                id="_"
-                onClick={() => console.log()}
-              />
-            }
-            items={themesList}
-          />
-        </RadioRoot>
-      </PageContainer>
-    </Layout>
-  );
-}