@rango-dev/widget-embedded 0.23.1-next.0 → 0.23.1-next.10

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/index.ts

@@ -6,5 +6,6 @@ export const SCANNER_BASE_URL = 'https://scan.rango.exchange';
 
 export const WIDGET_UI_ID = {
   SWAP_BOX_ID: 'rango-swap-box',
+  EXPANDED_BOX_ID: 'rango-expanded-box',
   ...UI_ID,
 };

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/quote.ts

@@ -22,13 +22,28 @@ export type FeesGroup = {
   nonePayable: { [key in NameOfFees]?: SwapFee[] };
 };
 
-export const ROUTE_SORTING_STRATEGY: { [key in PreferenceType]: string } = {
-  SPEED: i18n.t('Fastest Transfer'),
-  NET_OUTPUT: i18n.t('Maximum Return'),
-  FEE: i18n.t('Lowest Fee'),
-  PRICE: i18n.t('Maximum Output'),
-  SMART: i18n.t('Smart Routing'),
-};
+export const ROUTE_STRATEGY: { value: PreferenceType; label: string }[] = [
+  {
+    value: 'SMART',
+    label: i18n.t('Smart Routing'),
+  },
+  {
+    value: 'FEE',
+    label: i18n.t('Lowest Fee'),
+  },
+  {
+    value: 'SPEED',
+    label: i18n.t('Fastest Transfer'),
+  },
+  {
+    value: 'NET_OUTPUT',
+    label: i18n.t('Maximum Return'),
+  },
+  {
+    value: 'PRICE',
+    label: i18n.t('Maximum Output'),
+  },
+];
 
 export const HIGH_PRIORITY_TAGS: TagValue[] = [
   'RECOMMENDED',

package/src/constants/settings.ts

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

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

@@ -0,0 +1,30 @@
+import { darkTheme, styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  transition: 'width 0.2s, opacity 0.2s, margin-left 0.2s',
+  height: '700px',
+  width: '390px',
+  opacity: 1,
+  marginLeft: '$16',
+  backgroundColor: '$neutral100',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral300',
+  },
+  '&.is-hidden': {
+    width: 0,
+    opacity: 0,
+    marginLeft: 0,
+  },
+});
+
+export const Content = styled('div', {
+  position: 'relative',
+  overflow: 'hidden',
+  padding: '$20',
+  flexGrow: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  overflowY: 'auto',
+  borderRadius: '$primary',
+  backgroundColor: '$background',
+});

package/src/containers/ExpandedQuotes/ExpandedQuotes.tsx

@@ -0,0 +1,71 @@
+import type { PropTypes } from './ExpandedQuotes.types';
+
+import { i18n } from '@lingui/core';
+import { Header } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { HeaderButtons } from '../../components/HeaderButtons';
+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 { getExpanded } from '../../utils/common';
+
+import { Container, Content } from './ExpandedQuotes.styles';
+
+export const TIME_TO_CLOSE_OPEN_EXPANDED = 100;
+
+export function ExpandedQuotes(props: PropTypes) {
+  const { fetch, loading, onClickOnQuote, onClickRefresh, isVisible } = props;
+  const [isDelayedVisible, setIsDelayedVisible] = useState(false);
+  const containerClass = isDelayedVisible ? '' : 'is-hidden';
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+
+    if (isVisible) {
+      timeout = setTimeout(() => {
+        setIsDelayedVisible(true);
+      }, TIME_TO_CLOSE_OPEN_EXPANDED);
+    } else {
+      setIsDelayedVisible(false);
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    }
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [isVisible]);
+
+  return (
+    <Container
+      className={`${containerClass} ${LayoutContainer()}`}
+      id={WIDGET_UI_ID.EXPANDED_BOX_ID}>
+      <Header
+        title={i18n.t('Routes')}
+        suffix={
+          <>
+            <SelectStrategy container={getExpanded()} />
+            <HeaderButtons
+              onClickRefresh={onClickRefresh}
+              hidden={['history', 'notifications', 'settings']}
+            />
+          </>
+        }
+      />
+      <Content>
+        <Quotes
+          showModalFee={false}
+          fetch={fetch}
+          hasSort={false}
+          loading={loading}
+          onClickOnQuote={onClickOnQuote}
+        />
+      </Content>
+    </Container>
+  );
+}

package/src/containers/ExpandedQuotes/ExpandedQuotes.types.ts

@@ -0,0 +1,9 @@
+import type { SelectedQuote } from '../../types';
+
+export type PropTypes = {
+  loading: boolean;
+  onClickOnQuote: (quote: SelectedQuote) => void;
+  fetch: (shouldChangeSelectedQuote?: boolean) => void;
+  onClickRefresh?: () => void;
+  isVisible: boolean;
+};

package/src/containers/ExpandedQuotes/index.ts

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

package/src/containers/Inputs/Inputs.styles.ts

@@ -0,0 +1,12 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '$5',
+  alignSelf: 'stretch',
+});
+
+export const FromContainer = styled('div', {
+  position: 'relative',
+});

package/src/containers/Inputs/Inputs.tsx

@@ -0,0 +1,165 @@
+import type { PropTypes } from './Inputs.types';
+
+import { i18n } from '@lingui/core';
+import { SwapInput } from '@rango-dev/ui';
+import React from 'react';
+
+import { SwitchFromAndToButton } from '../../components/SwitchFromAndTo';
+import { errorMessages } from '../../constants/errors';
+import {
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { useQuoteStore } from '../../store/quote';
+import { useWalletsStore } from '../../store/wallets';
+import { getContainer } from '../../utils/common';
+import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
+import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
+import { canComputePriceImpact } from '../../utils/swap';
+import { formatBalance, isFetchingBalance } from '../../utils/wallets';
+
+import { Container, FromContainer } from './Inputs.styles';
+
+export function Inputs(props: PropTypes) {
+  const { fetchingQuote, fetchMetaStatus, onClickToken } = props;
+  const {
+    fromToken,
+    fromBlockchain,
+    toToken,
+    toBlockchain,
+    setInputAmount,
+    inputAmount,
+    inputUsdValue,
+    outputAmount,
+    outputUsdValue,
+    selectedQuote,
+  } = useQuoteStore();
+  const { connectedWallets, getBalanceFor } = useWalletsStore();
+
+  const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
+
+  const fromTokenFormattedBalance =
+    formatBalance(fromTokenBalance)?.amount ?? '0';
+
+  const tokenBalanceReal =
+    !!fromBlockchain && !!fromToken
+      ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
+      : '0';
+
+  const fetchingBalance =
+    !!fromBlockchain &&
+    isFetchingBalance(connectedWallets, fromBlockchain.name);
+
+  const priceImpactInputCanNotBeComputed = !canComputePriceImpact(
+    selectedQuote,
+    inputAmount,
+    inputUsdValue
+  );
+
+  const priceImpactOutputCanNotBeComputed = !canComputePriceImpact(
+    selectedQuote,
+    inputAmount,
+    outputUsdValue
+  );
+
+  const percentageChange =
+    !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
+      ? null
+      : getPriceImpact(inputUsdValue.toString(), outputUsdValue.toString());
+  return (
+    <Container>
+      <FromContainer>
+        <SwapInput
+          label={i18n.t('From')}
+          mode="From"
+          onInputChange={setInputAmount}
+          balance={fromTokenFormattedBalance}
+          chain={{
+            displayName: fromBlockchain?.displayName || '',
+            image: fromBlockchain?.logo || '',
+          }}
+          token={{
+            displayName: fromToken?.symbol || '',
+            image: fromToken?.image || '',
+          }}
+          onClickToken={() => onClickToken('from')}
+          price={{
+            value: inputAmount,
+            usdValue: priceImpactInputCanNotBeComputed
+              ? undefined
+              : numberToString(
+                  inputUsdValue,
+                  USD_VALUE_MIN_DECIMALS,
+                  USD_VALUE_MAX_DECIMALS
+                ),
+            realUsdValue: priceImpactInputCanNotBeComputed
+              ? undefined
+              : formatTooltipNumbers(inputUsdValue),
+            error: priceImpactInputCanNotBeComputed
+              ? errorMessages().unknownPriceError.impactTitle
+              : undefined,
+          }}
+          disabled={fetchMetaStatus === 'failed'}
+          loading={fetchMetaStatus === 'loading'}
+          loadingBalance={fetchingBalance}
+          tooltipContainer={getContainer()}
+          onSelectMaxBalance={() => {
+            if (fromTokenFormattedBalance !== '0') {
+              setInputAmount(tokenBalanceReal.split(',').join(''));
+            }
+          }}
+        />
+        <SwitchFromAndToButton />
+      </FromContainer>
+      <SwapInput
+        sharpBottomStyle={!!selectedQuote || fetchingQuote}
+        label={i18n.t('To')}
+        mode="To"
+        fetchingQuote={fetchingQuote}
+        chain={{
+          displayName: toBlockchain?.displayName || '',
+          image: toBlockchain?.logo || '',
+        }}
+        token={{
+          displayName: toToken?.symbol || '',
+          image: toToken?.image || '',
+        }}
+        percentageChange={numberToString(
+          getPriceImpact(inputUsdValue, outputUsdValue),
+          PERCENTAGE_CHANGE_MIN_DECIMALS,
+          PERCENTAGE_CHANGE_MAX_DECIMALS
+        )}
+        warningLevel={getPriceImpactLevel(percentageChange ?? 0)}
+        price={{
+          value: numberToString(
+            outputAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          usdValue: priceImpactOutputCanNotBeComputed
+            ? undefined
+            : numberToString(
+                outputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
+          realValue: formatTooltipNumbers(outputAmount),
+          realUsdValue: priceImpactOutputCanNotBeComputed
+            ? undefined
+            : formatTooltipNumbers(outputUsdValue),
+          error: priceImpactOutputCanNotBeComputed
+            ? errorMessages().unknownPriceError.impactTitle
+            : undefined,
+        }}
+        onClickToken={() => onClickToken('to')}
+        disabled={fetchMetaStatus === 'failed'}
+        loading={fetchMetaStatus === 'loading'}
+        tooltipContainer={getContainer()}
+      />
+    </Container>
+  );
+}

package/src/containers/Inputs/Inputs.types.ts

@@ -0,0 +1,7 @@
+import type { FetchStatus } from '../../store/slices/data';
+
+export type PropTypes = {
+  fetchingQuote: boolean;
+  fetchMetaStatus: FetchStatus;
+  onClickToken: (mode: 'from' | 'to') => void;
+};

package/src/containers/Inputs/index.ts

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

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -22,6 +22,7 @@ export function QuoteInfo(props: PropTypes) {
     expanded = false,
     tagHidden,
     onClick,
+    showModalFee,
     selected,
     onClickAllRoutes,
   } = props;
@@ -57,6 +58,7 @@ export function QuoteInfo(props: PropTypes) {
       <Quote
         quote={quote}
         error={error}
+        showModalFee={showModalFee}
         warning={warning}
         tagHidden={tagHidden}
         selected={selected}

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

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

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