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

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/hooks/useMobileDetect.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+const MIN_WIDTH_WINDOW = 768;
+
+const useMobileDetect = () => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  const handleResize = () => {
+    setIsMobile(window.innerWidth < MIN_WIDTH_WINDOW);
+  };
+
+  useEffect(() => {
+    handleResize(); // Initial check
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return isMobile;
+};
+
+export default useMobileDetect;

package/src/hooks/useSwapInput.ts

@@ -58,6 +58,8 @@ export function useSwapInput({
     selectedQuote,
     sortStrategy,
     resetQuote,
+    error,
+    warning,
     setSelectedQuote,
     updateQuotePartialState,
   } = useQuoteStore();
@@ -184,7 +186,7 @@ export function useSwapInput({
     }
     if (shouldSkipRequest) {
       setLoading(false);
-      if (selectedQuote) {
+      if (selectedQuote || error || warning) {
         resetQuote();
       }
       return;

package/src/index.ts

@@ -7,6 +7,7 @@ import type {
   WidgetColorsKeys,
   WidgetConfig,
   WidgetTheme,
+  WidgetVariant,
 } from './types';
 import type {
   PendingSwapWithQueueID,
@@ -89,6 +90,7 @@ export type {
   HandleWalletsUpdate,
   ConnectedWallet,
   Tokens,
+  WidgetVariant,
 };
 export {
   Widget,

package/src/pages/ConfirmSwapPage.tsx

@@ -282,7 +282,6 @@ export function ConfirmSwapPage() {
       <QuoteWarningsAndErrors
         warning={quoteWarning}
         error={quoteError}
-        loading={fetchingConfirmationQuote}
         refetchQuote={onRefresh}
         showWarningModal={showQuoteWarningModal}
         confirmationDisabled={!isActiveTab}