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

package/src/hooks/useScreenDetect.ts

@@ -0,0 +1,49 @@
+import { useEffect, 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);
+  };
+
+  useEffect(() => {
+    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/pages/ConfirmSwapPage.tsx

@@ -371,15 +371,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
-          tagHidden
           error={confirmSwapResult.error}
           loading={fetchingConfirmationQuote}
           warning={confirmSwapResult.warnings?.quote ?? null}

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,23 @@ 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',
+  },
 });
 export const TIME_TO_NAVIGATE_ANOTHER_PAGE = 300;
 
@@ -43,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();
@@ -64,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 =
@@ -99,6 +116,13 @@ export function Home() {
     }
   };
 
+  const onClickOnQuote = (quote: SelectedQuote) => {
+    if (selectedQuote?.requestId !== quote.requestId) {
+      setShowQuoteWarningModal(false);
+      setSelectedQuote(quote);
+    }
+  };
+
   return (
     <MainContainer>
       <Layout
@@ -200,7 +224,7 @@ export function Home() {
       {isExpandable ? (
         <ExpandedQuotes
           loading={fetchingQuote}
-          onClickOnQuote={(quote) => setSelectedQuote(quote)}
+          onClickOnQuote={onClickOnQuote}
           fetch={fetchQuote}
           onClickRefresh={onClickRefresh}
           isVisible={isVisibleExpanded}

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
                     />

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();
@@ -205,7 +32,6 @@ export function SettingsPage() {
       updateCampaignMode('liquiditySources', undefined);
     }
   };
-
   return (
     <Layout
       header={{
@@ -222,19 +48,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/store/slices/config.ts

@@ -6,7 +6,7 @@ export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   title: undefined,
   multiWallets: true,
-  enableNewLiquiditySources: true,
+  excludeLiquiditySources: true,
   customDestination: true,
 };
 
@@ -72,7 +72,7 @@ export const createConfigSlice: StateCreatorWithInitialData<
       const { config, campaignMode } = get();
       return campaignMode.liquiditySources?.length
         ? false
-        : !!config.enableNewLiquiditySources;
+        : !!config.excludeLiquiditySources;
     },
     isInCampaignMode: () => {
       const { campaignMode } = get();

package/src/store/slices/data.ts

@@ -177,12 +177,12 @@ export const createDataSlice: StateCreator<
     const liquiditySources =
       campaignModeLiquiditySource ?? config.liquiditySources;
 
-    const enableNewLiquiditySources = campaignModeLiquiditySource
+    const excludeLiquiditySources = campaignModeLiquiditySource
       ? false
-      : config.enableNewLiquiditySources;
+      : config.excludeLiquiditySources;
 
     /*
-     * If the enableNewLiquiditySources flag is set to true, we return all swappers that are not included in the config.
+     * If the excludeLiquiditySources flag is set to true, we return all swappers that are not included in the config.
      * Otherwise, we return all swappers that are included in the config.
      */
     const swappers = get()._swappers.filter((swapper) => {
@@ -191,7 +191,7 @@ export const createDataSlice: StateCreator<
       );
 
       const shouldExcludeLiquiditySources =
-        enableNewLiquiditySources ||
+        excludeLiquiditySources ||
         !liquiditySources ||
         liquiditySources.length === 0;
 
@@ -207,7 +207,10 @@ export const createDataSlice: StateCreator<
   // Actions
   fetch: async () => {
     try {
-      const response = await sdk().getAllMetadata();
+      const { enableCentralizedSwappers } = get().config;
+      const response = await sdk().getAllMetadata({
+        enableCentralizedSwappers,
+      });
 
       set({ fetchStatus: 'success' });
       const blockchains: BlockchainMeta[] = [];

package/src/store/slices/settings.ts

@@ -160,9 +160,13 @@ export const createSettingsSlice: StateCreator<
     const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
 
     set({
-      ...(isThemeHidden && { theme: 'auto' }),
-      ...(isLanguageHidden && { language: DEFAULT_LANGUAGE }),
-      ...(isLiquidityHidden && { disabledLiquiditySources: [] }),
+      ...(isThemeHidden && { theme: nextConfig.theme?.mode || 'auto' }),
+      ...(isLanguageHidden && {
+        language: nextConfig.language || DEFAULT_LANGUAGE,
+      }),
+      ...(isLiquidityHidden && {
+        disabledLiquiditySources: nextConfig.liquiditySources || [],
+      }),
     });
   },
 });

package/src/types/config.ts

@@ -3,7 +3,7 @@ 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';
+export type WidgetVariant = 'default' | 'expanded' | 'full-expanded';
 
 /**
  * The above type defines a set of optional color properties for a widget.
@@ -171,8 +171,8 @@ export type Features = Partial<
  * that defines the various properties of the theme, such as colors, fonts, and others.
  * @property {boolean} externalWallets
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
- * @property {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
- * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
+ * @property {boolean} excludeLiquiditySources - The `excludeLiquiditySources` property is a boolean value that when you
+ * set it to true, the list of liquidity sources provided in `liquiditySources` will be excluded; otherwise, they will be included.
  * @property {Features} features - An optional object for configuring the visibility or enablement of various features.
  *   Keys include:
  *   - 'notification': Visibility state for the notification icon.
@@ -182,8 +182,11 @@ export type Features = Partial<
  *   - '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 it is expanded, multiple routes will show up on the home page;
+ *   If it is full-expanded, multiple routes will show up on the home page with full routes;
  *   if not, you will need to go to a different page to see the suggested routes.
+ * @property {boolean} enableCentralizedSwappers
+ * If you want to enable routing from the centralized protocols like XO Swap, you could set this parameter to true.
  */
 
 export type WidgetConfig = {
@@ -202,7 +205,8 @@ export type WidgetConfig = {
   language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
-  enableNewLiquiditySources?: boolean;
+  excludeLiquiditySources?: boolean;
   features?: Features;
   variant?: WidgetVariant;
+  enableCentralizedSwappers?: boolean;
 };