@rango-dev/widget-embedded 0.42.3-next.2 → 0.42.3-next.3

package/src/components/SwapMetrics/SwapMetrics.tsx

@@ -0,0 +1,134 @@
+import type { PropTypes } from './SwapMetrics.types';
+
+import { i18n } from '@lingui/core';
+import {
+  IconButton,
+  ReverseIcon,
+  Skeleton,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { useTheme } from '../../hooks/useTheme';
+import { useAppStore } from '../../store/AppStore';
+import { getContainer } from '../../utils/common';
+import { getSlippageValidation } from '../../utils/settings';
+
+import {
+  formatTokenValueInUsd,
+  getSlippageColor,
+  getUsdExchangeRate,
+} from './SwapMetrics.helpers';
+import { Container, Rate, TokenName } from './SwapMetrics.styles';
+
+export function SwapMetrics(props: PropTypes) {
+  const { slippage, customSlippage, quoteTokensRate, changeQuoteTokensRate } =
+    useAppStore();
+  const {
+    quoteError,
+    quoteWarning,
+    fromToken: initialFromToken,
+    toToken: initialToToken,
+    quote,
+    loading,
+  } = props;
+  const currentSlippage = customSlippage !== null ? customSlippage : slippage;
+  const { mode } = useTheme({});
+  const slippageValidation = getSlippageValidation(currentSlippage);
+  const isDarkTheme = mode === 'dark';
+  const isDefaultRate = quoteTokensRate === 'default';
+
+  const error = {
+    quoteError,
+    slippageError:
+      slippageValidation?.type === 'error' ? slippageValidation.message : null,
+  };
+  const warning = {
+    quoteWarning,
+    slippageWarning:
+      slippageValidation?.type === 'warning'
+        ? slippageValidation.message
+        : null,
+  };
+
+  const sourceToken = quote?.swaps[0].from || initialFromToken;
+  const destinationToken =
+    quote?.swaps[quote?.swaps.length - 1].to || initialToToken;
+
+  const fromToken = isDefaultRate ? sourceToken : destinationToken;
+  const toToken = isDefaultRate ? destinationToken : sourceToken;
+
+  const fromAmount = Number(
+    isDefaultRate ? quote?.outputAmount : quote?.requestAmount
+  );
+  const toAmount = Number(
+    isDefaultRate ? quote?.requestAmount : quote?.outputAmount
+  );
+
+  const fromTokenUsdPrice = fromAmount || fromToken.usdPrice;
+  const toTokenUsdPrice = toAmount || toToken.usdPrice;
+
+  const { rawValue: rawExchangeRate, displayValue: displayExchangeRate } =
+    getUsdExchangeRate({
+      toTokenUsdPrice,
+      fromTokenUsdPrice,
+    });
+
+  return (
+    <Container>
+      <Typography
+        variant={!!error || !!warning ? 'label' : 'body'}
+        size={!!error || !!warning ? 'medium' : 'small'}
+        color={getSlippageColor({ error, warning, isDarkTheme })}>
+        {i18n.t('Slippage:')} {currentSlippage}%
+      </Typography>
+      {loading ? (
+        <Skeleton height={16} width={104} variant="rounded" />
+      ) : (
+        fromTokenUsdPrice &&
+        toTokenUsdPrice && (
+          <Rate>
+            <Typography className="rate-text" variant="body" size="small">
+              1
+            </Typography>
+            <TokenName className="rate-text" variant="body" size="small">
+              {toToken.symbol}
+            </TokenName>
+            <IconButton
+              id="widget-home-page-change-rate-button"
+              onClick={changeQuoteTokensRate}>
+              <ReverseIcon size={14} color="secondary" />
+            </IconButton>
+            <Tooltip
+              container={getContainer()}
+              side="top"
+              sideOffset={4}
+              content={
+                <Typography className="rate-text" variant="body" size="small">
+                  {rawExchangeRate}
+                </Typography>
+              }>
+              <Typography className="rate-text" variant="body" size="small">
+                {displayExchangeRate}
+              </Typography>
+            </Tooltip>
+
+            <TokenName className="rate-text" variant="body" size="small">
+              {fromToken.symbol}
+            </TokenName>
+            {fromToken.usdPrice && (
+              <Typography color="neutral600" variant="body" size="small">
+                ~
+                {formatTokenValueInUsd(
+                  Number(rawExchangeRate),
+                  fromToken.usdPrice
+                )}
+              </Typography>
+            )}
+          </Rate>
+        )
+      )}
+    </Container>
+  );
+}

package/src/components/SwapMetrics/SwapMetrics.types.ts

@@ -0,0 +1,26 @@
+import type { QuoteError, QuoteWarning, SelectedQuote } from '../../types';
+import type { TokenData } from '../TokenList/TokenList.types';
+import type { SwapResultAsset } from 'rango-sdk';
+
+export interface PropTypes {
+  quoteError: QuoteError | null;
+  quoteWarning: QuoteWarning | null;
+  fromToken: TokenData;
+  toToken: TokenData;
+  quote: SelectedQuote | null;
+  loading: boolean;
+}
+
+export type Tokens = {
+  to: TokenData | SwapResultAsset;
+  from: TokenData | SwapResultAsset;
+};
+
+export type SlippageColorParams = {
+  error: { quoteError: QuoteError | null; slippageError: string | null };
+  warning: {
+    quoteWarning: QuoteWarning | null;
+    slippageWarning: string | null;
+  };
+  isDarkTheme: boolean;
+};

package/src/components/SwapMetrics/index.ts

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

package/src/hooks/useSwapInput.ts

@@ -205,7 +205,7 @@ export function useSwapInput({
       }
       return;
     }
-    if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
+    if (!isPositiveNumber(inputAmount) && inputUsdValue?.eq(0)) {
       resetState(false);
       cancelFetch();
       return;

package/src/pages/ConfirmSwapPage.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
 import type {
   ConfirmSwap,
   ConfirmSwapFetchResult,
@@ -29,6 +28,7 @@ import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
+import { QuoteErrorType, QuoteWarningType } from '../types';
 import { isQuoteWarningConfirmationRequired } from '../utils/quote';
 import { joinList } from '../utils/ui';
 
@@ -121,6 +121,7 @@ export function ConfirmSwapPage() {
           setInputAmount('');
         }, 0);
       } catch (e) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         setDbErrorMessage('Error: ' + (e as any)?.message);
       }
     }
@@ -209,6 +210,10 @@ export function ConfirmSwapPage() {
         error={quoteError}
         couldChangeSettings={false}
         refetchQuote={onRefresh}
+        skipAlerts={
+          quoteError?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE ||
+          quoteWarning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE
+        }
         showWarningModal={showQuoteWarningModal}
         confirmationDisabled={!isActiveTab}
         onOpenWarningModal={() => setShowQuoteWarningModal(true)}

package/src/pages/Home.tsx

@@ -10,6 +10,8 @@ import { HeaderButtons } from '../components/HeaderButtons';
 import { Layout, PageContainer } from '../components/Layout';
 import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
 import { SameTokensWarning } from '../components/SameTokensWarning';
+import { SlippageWarningsAndErrors } from '../components/SlippageWarningsAndErrors/SlippageWarningsAndErrors';
+import { SwapMetrics } from '../components/SwapMetrics';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { ExpandedQuotes } from '../containers/ExpandedQuotes';
 import { Inputs } from '../containers/Inputs';
@@ -22,6 +24,7 @@ import { useUiStore } from '../store/ui';
 import { UiEventTypes } from '../types';
 import { isVariantExpandable } from '../utils/configs';
 import { emitPreventableEvent } from '../utils/events';
+import { getSlippageValidation } from '../utils/settings';
 import { getSwapButtonState, isTokensIdentical } from '../utils/swap';
 
 const MainContainer = styled('div', {
@@ -50,6 +53,7 @@ export function Home() {
     setQuoteWarningsConfirmed,
     updateQuotePartialState,
   } = useQuoteStore();
+
   const [isVisibleExpanded, setIsVisibleExpanded] = useState<boolean>(false);
   const { isLargeScreen, isExtraLargeScreen } = useScreenDetect();
 
@@ -58,10 +62,17 @@ export function Home() {
     config,
     fetchStatus: fetchMetaStatus,
     connectedWallets,
+    customSlippage,
+    slippage,
+    setSlippage,
+    setCustomSlippage,
   } = useAppStore();
 
   const { isActiveTab } = useUiStore();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
+  const currentSlippage = customSlippage !== null ? customSlippage : slippage;
+
+  const slippageValidation = getSlippageValidation(currentSlippage);
 
   const needsToWarnEthOnPath = false;
 
@@ -91,19 +102,16 @@ export function Home() {
 
   const fetchingQuote = hasInputs && fetchMetaStatus === 'success' && loading;
 
+  const currentQuoteWarning =
+    slippageValidation?.quoteValidation || quoteWarning;
+
   const hasValidQuotes =
     !isExpandable || (isExpandable && quotes?.results.length);
-  const hasWarningOrError = quoteWarning || quoteError;
+  const hasWarningOrError = currentQuoteWarning || quoteError;
   const showMessages = hasValidQuotes && hasWarningOrError;
 
-  useEffect(() => {
-    resetQuoteWallets();
-    updateQuotePartialState('refetchQuote', true);
-  }, []);
-
-  useEffect(() => {
-    setIsVisibleExpanded(hasInputs);
-  }, [hasInputs]);
+  const showSwapMetrics = !!fromToken && !!toToken;
+  const showSlippageAlerts = showSwapMetrics && !!slippageValidation;
 
   const onClickRefresh =
     (!!selectedQuote || quoteError) && !showQuoteWarningModal
@@ -127,6 +135,22 @@ export function Home() {
     }
   };
 
+  const onChangeSlippage = (slippage: number | null) => {
+    if (slippage) {
+      setSlippage(slippage);
+      setCustomSlippage(null);
+    }
+  };
+
+  useEffect(() => {
+    resetQuoteWallets();
+    updateQuotePartialState('refetchQuote', true);
+  }, []);
+
+  useEffect(() => {
+    setIsVisibleExpanded(hasInputs);
+  }, [hasInputs]);
+
   return (
     <MainContainer>
       <Layout
@@ -194,7 +218,7 @@ export function Home() {
               loading={fetchingQuote}
               error={quoteError}
               tagHidden={false}
-              warning={quoteWarning}
+              warning={currentQuoteWarning}
               type="basic"
               onClickAllRoutes={
                 !!quotes && quotes.results.length > 1
@@ -206,19 +230,33 @@ export function Home() {
               }
             />
           ) : null}
+          {showSwapMetrics && (
+            <>
+              <Divider size={8} />
+              <SwapMetrics
+                quoteError={quoteError}
+                quoteWarning={currentQuoteWarning}
+                fromToken={fromToken}
+                toToken={toToken}
+                quote={selectedQuote}
+                loading={fetchingQuote}
+              />
+            </>
+          )}
 
           {showMessages ? (
             <>
-              <Divider size="10" />
               <QuoteWarningsAndErrors
-                warning={quoteWarning}
+                warning={currentQuoteWarning}
                 error={quoteError}
+                skipAlerts={!!slippageValidation}
                 couldChangeSettings={true}
                 refetchQuote={fetchQuote}
                 showWarningModal={showQuoteWarningModal}
                 confirmationDisabled={!isActiveTab}
                 onOpenWarningModal={() => setShowQuoteWarningModal(true)}
                 onCloseWarningModal={() => setShowQuoteWarningModal(false)}
+                onChangeSlippage={onChangeSlippage}
                 onConfirmWarningModal={() => {
                   setShowQuoteWarningModal(false);
                   setQuoteWarningsConfirmed(true);
@@ -230,6 +268,17 @@ export function Home() {
               />
             </>
           ) : null}
+
+          {showSlippageAlerts && (
+            <>
+              <Divider size="10" />
+              <SlippageWarningsAndErrors
+                onChangeSettings={() =>
+                  onHandleNavigation(navigationRoutes.settings)
+                }
+              />
+            </>
+          )}
           <SameTokensWarning />
         </PageContainer>
       </Layout>

package/src/store/app.ts

@@ -46,6 +46,7 @@ export function createAppStore(initialData?: WidgetConfig) {
             infiniteApprove: state.infiniteApprove,
             preferredBlockchains: state.preferredBlockchains,
             disabledLiquiditySources: state.disabledLiquiditySources,
+            quoteTokensRate: state.quoteTokensRate,
           };
         },
         version: 1,

package/src/store/slices/settings.ts

@@ -16,6 +16,7 @@ import { isFeatureHidden } from '../../utils/settings';
 import { getSupportedBlockchainsFromConfig } from '../utils';
 
 export type ThemeMode = 'auto' | 'dark' | 'light';
+export type QuoteTokensRate = 'default' | 'reversed';
 
 export interface SettingsSlice {
   theme: ThemeMode;
@@ -30,6 +31,8 @@ export interface SettingsSlice {
   affiliatePercent: number | null;
   affiliateWallets: { [key: string]: string } | null;
   _customTokens: Token[];
+  quoteTokensRate: QuoteTokensRate;
+
   setSlippage: (slippage: number) => void;
   setCustomSlippage: (customSlippage: number | null) => void;
   toggleInfiniteApprove: () => void;
@@ -50,6 +53,7 @@ export interface SettingsSlice {
   setCustomToken: (token: TokenData) => void;
   deleteCustomToken: (token: Token) => void;
   customTokens: () => Token[];
+  changeQuoteTokensRate: () => void;
 }
 
 export const createSettingsSlice: StateCreator<
@@ -69,6 +73,13 @@ export const createSettingsSlice: StateCreator<
   affiliatePercent: null,
   affiliateWallets: null,
   _customTokens: [],
+  quoteTokensRate: 'default',
+
+  changeQuoteTokensRate: () =>
+    set((state) => ({
+      quoteTokensRate:
+        state.quoteTokensRate === 'default' ? 'reversed' : 'default',
+    })),
   addPreferredBlockchain: (blockchain) => {
     const currentPreferredBlockchains = get().preferredBlockchains;
 

package/src/utils/settings.ts

@@ -1,4 +1,4 @@
-import type { Features, Routing } from '../types';
+import type { Features, HighSlippageWarning, Routing } from '../types';
 import type { SwapperMeta, SwapperType, Token } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
@@ -8,6 +8,7 @@ import {
   MAX_SLIPPAGE,
   MIN_SLIPPAGE,
 } from '../constants/swapSettings';
+import { QuoteWarningType } from '../types';
 
 import { removeDuplicateFrom } from './common';
 
@@ -96,9 +97,11 @@ export const addCustomTokensToSupportedTokens = (
     : supportedTokens.concat(customTokens);
 };
 
-export function getSlippageValidation(
-  slippage: number
-): { type: 'error' | 'warning'; message: string } | null {
+export function getSlippageValidation(slippage: number): {
+  type: 'error' | 'warning';
+  message: string;
+  quoteValidation?: HighSlippageWarning;
+} | null {
   if (slippage == MIN_SLIPPAGE) {
     return {
       type: 'error',
@@ -110,6 +113,10 @@ export function getSlippageValidation(
       message: i18n.t(
         'Your transaction is at risk of being frontrun due to high slippage tolerance.'
       ),
+      quoteValidation: {
+        type: QuoteWarningType.HIGH_SLIPPAGE,
+        slippage: slippage.toString(),
+      },
     };
   }