@rango-dev/widget-embedded 0.23.1-next.1 → 0.23.1-next.11

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/src/types/config.ts

@@ -3,6 +3,8 @@ import type { ProviderInterface } from '@rango-dev/wallets-react';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
 
+export type WidgetVariant = 'default' | 'expandable';
+
 /**
  * The above type defines a set of optional color properties for a widget.
  * @property {string} background
@@ -179,6 +181,9 @@ export type Features = Partial<
  *   - 'connectWalletButton': Visibility state for the wallet connect icon.
  *   - 'language': Visibility state for the language.
  *   - 'experimentalRoute': Enablement state for the experimental route.
+ * @property {WidgetVariant} variant
+ *   If it is expandable, multiple routes will show up on the home page;
+ *   if not, you will need to go to a different page to see the suggested routes.
  */
 
 export type WidgetConfig = {
@@ -199,4 +204,5 @@ export type WidgetConfig = {
   externalWallets?: boolean;
   enableNewLiquiditySources?: boolean;
   features?: Features;
+  variant?: WidgetVariant;
 };

package/src/utils/common.ts

@@ -34,3 +34,6 @@ export function containsText(text: string, searchText: string): boolean {
 
 export const getContainer = () =>
   document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) as HTMLElement;
+
+export const getExpanded = () =>
+  document.getElementById(WIDGET_UI_ID.EXPANDED_BOX_ID) as HTMLElement;

package/dist/components/Quote/QuoteTrigger .d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuoteTrigger .d.ts","sourceRoot":"","sources":["../../../src/components/Quote/QuoteTrigger .tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA2B,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWhF,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkCnD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA6KpD"}

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>
-  );
-}