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

package/src/components/Quote/QuoteTrigger.tsx

@@ -11,7 +11,7 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
-import useMobileDetect from '../../hooks/useMobileDetect';
+import useScreenDetect from '../../hooks/useScreenDetect';
 import { getContainer } from '../../utils/common';
 import { getUniqueBlockchains } from '../../utils/quote';
 
@@ -48,7 +48,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
   const tooltipContainer = getContainer();
   const numberOfSteps = steps.length;
   const blockchains = getUniqueBlockchains(steps);
-  const isMobile = useMobileDetect();
+  const { isTablet, isMobile } = useScreenDetect();
 
   return (
     <Trigger
@@ -72,15 +72,15 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
             </IconContainer>
           );
 
-          return isMobile ? (
-            <>
+          return isMobile || isTablet ? (
+            <React.Fragment key={key}>
               <ImageComponent
                 content={step.swapper.displayName}
                 src={step.swapper.image}
                 state={step.state}
               />
               {index !== numberOfSteps - 1 && <>{arrow}</>}
-            </>
+            </React.Fragment>
           ) : (
             <React.Fragment key={key}>
               {numberOfSteps <= MAX_STEPS ||
@@ -148,12 +148,11 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
             </Typography>
             <Divider direction="horizontal" size={4} />
             {blockchains.map((blockchain, index) => (
-              <>
+              <React.Fragment key={blockchain.displayName}>
                 {blockchains.length <= MAX_BLOCKCHAINS ||
                 (blockchains.length > MAX_BLOCKCHAINS &&
                   index < MAX_BLOCKCHAINS - 1) ? (
                   <ImageComponent
-                    key={blockchain.displayName}
                     content={''}
                     src={blockchain.image}
                     open={false}
@@ -190,7 +189,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                     </Tooltip>
                   )
                 )}
-              </>
+              </React.Fragment>
             ))}
 
             <Divider direction="horizontal" size={32} />

package/src/components/QuoteSkeleton/QuoteSkeleton.styles.ts

@@ -27,7 +27,7 @@ export const Steps = styled('div', {
 });
 
 export const StepSeparator = styled('div', {
-  borderLeft: '1px dashed black',
+  borderLeft: '1px dashed $foreground',
   minHeight: ' 0',
   margin: '0px 11.5px',
   alignSelf: 'stretch',

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts

@@ -23,13 +23,12 @@ export function makeAlerts(
   const alertInfo: AlertInfo = {
     alertType: 'warning',
     title: '',
-    action: 'show-info',
+    action: null,
   };
   if (error) {
     alertInfo.alertType = 'error';
     if (error.type === QuoteErrorType.BRIDGE_LIMIT) {
       alertInfo.title = error.recommendation;
-      alertInfo.action = 'show-info';
     }
 
     if (error.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE) {
@@ -50,7 +49,7 @@ export function makeAlerts(
       if (warningLevel === 'high') {
         alertInfo.alertType = 'error';
       }
-      alertInfo.action = null;
+      alertInfo.action = 'show-info';
       alertInfo.title = errorMessages().highValueLossError.title;
     }
     if (warning.type === QuoteWarningType.UNKNOWN_PRICE) {

package/src/components/Quotes/Quotes.tsx

@@ -2,7 +2,7 @@ import type { PropTypes } from './Quotes.types';
 import type { MultiRouteSimulationResult } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
-import { Divider, Typography } from '@rango-dev/ui';
+import { Divider, FullExpandedQuote, Typography } from '@rango-dev/ui';
 import React from 'react';
 
 import { QuoteInfo } from '../../containers/QuoteInfo';
@@ -26,6 +26,7 @@ export function Quotes(props: PropTypes) {
     fetch,
     showModalFee,
     hasSort = true,
+    fullExpandedMode = false,
   } = props;
   const {
     selectedQuote,
@@ -69,12 +70,16 @@ export function Quotes(props: PropTypes) {
       {loading &&
         Array.from({ length: ITEM_SKELETON_COUNT }, (_, index) => (
           <React.Fragment key={index}>
-            <QuoteSkeleton
-              tagHidden={false}
-              type="list-item"
-              expanded={false}
-            />
-            <Divider size={16} />
+            {fullExpandedMode ? (
+              <FullExpandedQuote loading />
+            ) : (
+              <QuoteSkeleton
+                tagHidden={false}
+                type="list-item"
+                expanded={false}
+              />
+            )}
+            {index !== ITEM_SKELETON_COUNT - 1 && <Divider size={16} />}
           </React.Fragment>
         ))}
 
@@ -92,9 +97,10 @@ export function Quotes(props: PropTypes) {
             </>
           )}
           {hasQuotes
-            ? sortQuotes.map((quote) => {
+            ? sortQuotes.map((quote, index) => {
                 const quoteWarning = getQuoteWarning(quote);
                 const quoteError = getQuoteError(quote.swaps);
+                const lastIndex = sortQuotes.length - 1 === index;
 
                 return (
                   <React.Fragment key={quote.requestId}>
@@ -106,6 +112,7 @@ export function Quotes(props: PropTypes) {
                       loading={loading}
                       error={quoteError?.options || null}
                       warning={quoteWarning}
+                      fullExpandedMode={fullExpandedMode}
                       onClick={(quote) => {
                         if (!quoteError) {
                           updateQuotePartialState('warning', quoteWarning);
@@ -118,13 +125,17 @@ export function Quotes(props: PropTypes) {
                       }}
                       type="list-item"
                     />
-                    <Divider size={16} />
+                    {!lastIndex && <Divider size={16} />}
                   </React.Fragment>
                 );
               })
             : showNoResultMessage && (
                 <ErrorsContainer>
-                  <NoResult error={error} fetch={fetch} />
+                  <NoResult
+                    size={fullExpandedMode ? 'large' : 'small'}
+                    error={error}
+                    fetch={fetch}
+                  />
                 </ErrorsContainer>
               )}
         </>

package/src/components/Quotes/Quotes.types.ts

@@ -6,4 +6,5 @@ export type PropTypes = {
   fetch: (shouldChangeSelectedQuote?: boolean) => void;
   showModalFee?: boolean;
   hasSort?: boolean;
+  fullExpandedMode?: boolean;
 };

package/src/components/Quotes/SelectStrategy.tsx

@@ -1,5 +1,3 @@
-import type { PreferenceType } from 'rango-sdk';
-
 import { Select } from '@rango-dev/ui';
 import React from 'react';
 
@@ -16,17 +14,11 @@ export function SelectStrategy(props: { container: HTMLElement }) {
       <Select
         container={props.container}
         options={ROUTE_STRATEGY}
-        value={
-          ROUTE_STRATEGY.find(
-            (strategy) => strategy.value === sortStrategy
-          ) as {
-            value: PreferenceType;
-            label: string;
-          }
-        }
+        value={sortStrategy}
         handleItemClick={(item) => {
-          updateQuotePartialState('sortStrategy', item.value as PreferenceType);
+          updateQuotePartialState('sortStrategy', item.value);
         }}
+        variant="filled"
       />
     </SelectContainer>
   );

package/src/components/Slippage/Slippage.tsx

@@ -47,19 +47,17 @@ export function Slippage() {
         {SLIPPAGES.map((slippageItem, index) => {
           const key = `slippage-${index}`;
           return (
-            <>
-              <SlippageChip
-                key={key}
-                onClick={() => {
-                  if (customSlippage) {
-                    setCustomSlippage(null);
-                  }
-                  setSlippage(slippageItem);
-                }}
-                selected={!customSlippage && slippageItem === slippage}
-                label={`${slippageItem.toString()}%`}
-              />
-            </>
+            <SlippageChip
+              key={key}
+              onClick={() => {
+                if (customSlippage) {
+                  setCustomSlippage(null);
+                }
+                setSlippage(slippageItem);
+              }}
+              selected={!customSlippage && slippageItem === slippage}
+              label={`${slippageItem.toString()}%`}
+            />
           );
         })}
         <TextField

package/src/components/SwapDetails/SwapDetails.tsx

@@ -111,7 +111,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         setAsRead(swap.requestId);
       }
     }
-  }, [swap.status]);
+  }, [swap.status, swap.requestId]);
 
   useEffect(() => {
     if (showSwitchNetwork) {

package/src/components/TokenList/TokenList.tsx

@@ -19,7 +19,7 @@ import React, { useEffect, useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
-import { generateRangeColors } from '../../utils/colors';
+import { generateShade, isBright } from '../../utils/colors';
 import { formatBalance } from '../../utils/wallets';
 
 import { LoadingTokenList } from './LoadingTokenList';
@@ -133,23 +133,24 @@ export function TokenList(props: PropTypes) {
           const blockchain = blockchains.find(
             (blockchain) => blockchain.name === token.blockchain
           );
-          const color = generateRangeColors(
-            token.symbol,
-            blockchain?.color || ''
+          const lightShade = generateShade(
+            blockchain?.color || '',
+            isBright(blockchain?.color || '') ? 5 : 125
           );
+          const darkShade = generateShade(blockchain?.color || '', -100);
 
           const customCssForTag = {
-            $$color: color[`${token.symbol}100`],
+            $$color: lightShade,
             [`.${darkTheme} &`]: {
-              $$color: color[`${token.symbol}900`],
+              $$color: darkShade,
             },
             backgroundColor: '$$color',
           };
 
           const customCssForTagTitle = {
-            $$color: color[`${token.symbol}700`],
+            $$color: darkShade,
             [`.${darkTheme} &`]: {
-              $$color: color[`${token.symbol}100`],
+              $$color: lightShade,
             },
             color: '$$color',
           };

package/src/components/common/ActivateTabAlert/ActivateTabAlert.tsx

@@ -13,14 +13,12 @@ export function ActivateTabAlert(props: PropTypes) {
           variant="contained"
           size="xxsmall"
           type="warning">
-          {i18n.t('Activate')}
+          {i18n.t('Activate this tab')}
         </Button>
       }
       type="warning"
       variant="alarm"
-      title={i18n.t(
-        'Another tab is open and handles transactions. You can activate this tab.'
-      )}
+      title={i18n.t('Another tab is open and handles transactions.')}
     />
   );
 }

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/App/App.styles.ts

@@ -1,13 +1,9 @@
 import { styled } from '@rango-dev/ui';
 
 export const MainContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
   fontFamily: '$widget',
   boxSizing: 'border-box',
   textAlign: 'left',
-
   '& *, *::before, *::after': {
     boxSizing: 'inherit',
   },

package/src/containers/ExpandedQuotes/ExpandedQuotes.styles.ts

@@ -10,8 +10,21 @@ export const Container = styled('div', {
   [`.${darkTheme} &`]: {
     backgroundColor: '$neutral300',
   },
+
+  variants: {
+    expandMode: {
+      default: {
+        width: '390px',
+      },
+      full: {
+        width: '719px',
+      },
+    },
+  },
+
   '&.is-hidden': {
     width: 0,
+    height: 0,
     opacity: 0,
     marginLeft: 0,
   },

package/src/containers/ExpandedQuotes/ExpandedQuotes.tsx

@@ -9,6 +9,7 @@ import { LayoutContainer } from '../../components/Layout/Layout.styles';
 import { Quotes } from '../../components/Quotes';
 import { SelectStrategy } from '../../components/Quotes/SelectStrategy';
 import { WIDGET_UI_ID } from '../../constants';
+import { useAppStore } from '../../store/AppStore';
 import { getExpanded } from '../../utils/common';
 
 import { Container, Content } from './ExpandedQuotes.styles';
@@ -19,6 +20,8 @@ export function ExpandedQuotes(props: PropTypes) {
   const { fetch, loading, onClickOnQuote, onClickRefresh, isVisible } = props;
   const [isDelayedVisible, setIsDelayedVisible] = useState(false);
   const containerClass = isDelayedVisible ? '' : 'is-hidden';
+  const { config } = useAppStore();
+  const fullExpandedMode = config?.variant === 'full-expanded';
 
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout> | null = null;
@@ -43,6 +46,7 @@ export function ExpandedQuotes(props: PropTypes) {
 
   return (
     <Container
+      expandMode={config?.variant === 'full-expanded' ? 'full' : 'default'}
       className={`${containerClass} ${LayoutContainer()}`}
       id={WIDGET_UI_ID.EXPANDED_BOX_ID}>
       <Header
@@ -64,6 +68,7 @@ export function ExpandedQuotes(props: PropTypes) {
           hasSort={false}
           loading={loading}
           onClickOnQuote={onClickOnQuote}
+          fullExpandedMode={fullExpandedMode}
         />
       </Content>
     </Container>

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -25,6 +25,7 @@ export function QuoteInfo(props: PropTypes) {
     showModalFee,
     selected,
     onClickAllRoutes,
+    fullExpandedMode = false,
   } = props;
   const { inputAmount, inputUsdValue, toToken } = useQuoteStore();
 
@@ -65,6 +66,7 @@ export function QuoteInfo(props: PropTypes) {
         type={type}
         expanded={expanded}
         onClickAllRoutes={onClickAllRoutes}
+        fullExpandedMode={fullExpandedMode}
         input={{
           value: inputAmount,
           usdValue: inputUsdValue?.toString() ?? '',

package/src/containers/QuoteInfo/QuoteInfo.types.ts

@@ -14,4 +14,5 @@ export type PropTypes = {
   onClickAllRoutes?: () => void;
   selected?: boolean;
   showModalFee?: boolean;
+  fullExpandedMode?: boolean;
 };

package/src/containers/Settings/Lists.tsx

@@ -0,0 +1,264 @@
+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={14} />,
+    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: 14 };
+
+  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) =>
+    ['BRIDGE', 'AGGREGATOR', 'OFF_CHAIN'].includes(uniqueItem.type)
+  );
+
+  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={14} />,
+  };
+
+  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={14} />,
+    onClick: () => navigate(navigationRoutes.exchanges),
+  };
+
+  const languageItem = {
+    id: 'language-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Language')}
+      </Typography>
+    ),
+    start: <LanguageIcon color="gray" size={14} />,
+    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={14} />,
+    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}
+    />
+  );
+}