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

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/containers/Inputs/Inputs.tsx

@@ -34,6 +34,7 @@ export function Inputs(props: PropTypes) {
     toToken,
     toBlockchain,
     setInputAmount,
+    sanitizeInputAmount,
     inputAmount,
     inputUsdValue,
     outputAmount,
@@ -79,6 +80,7 @@ export function Inputs(props: PropTypes) {
           label={i18n.t('From')}
           mode="From"
           onInputChange={setInputAmount}
+          onInputBlur={sanitizeInputAmount}
           balance={fromTokenFormattedBalance}
           chain={{
             displayName: fromBlockchain?.displayName || '',

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

@@ -83,6 +83,7 @@ export function useSyncUrlAndStore() {
   useEffect(() => {
     const { autoConnect, clientUrl, utmQueryParams, blockchain } =
       getUrlSearchParams();
+
     if (isInRouterContext && fetchMetaStatus === 'success') {
       updateUrlSearchParams({
         [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
@@ -107,6 +108,7 @@ export function useSyncUrlAndStore() {
     toBlockchain,
     toToken,
     campaignMode,
+    fetchMetaStatus,
   ]);
 
   useEffect(() => {

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/pages/LiquiditySourcePage.tsx

@@ -22,6 +22,7 @@ import {
 } from '../components/SettingsContainer';
 import { useAppStore } from '../store/AppStore';
 import { containsText } from '../utils/numbers';
+import { replaceSpacesWithDash } from '../utils/sanitizers';
 import { getUniqueSwappersGroups } from '../utils/settings';
 
 interface PropTypes {
@@ -70,9 +71,10 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   const list = liquiditySources.map((sourceItem) => {
     const { selected, groupTitle, logo, id, ...restSourceItem } = sourceItem;
     return {
-      id: `widget-setting-liquidity-source-${id
-        .toLowerCase()
-        .replace(/\s+/g, '-')}-item-btn`,
+      id: `widget-setting-liquidity-source-${replaceSpacesWithDash(
+        id.toLowerCase()
+      )}-item-btn`,
+
       start: <Image src={logo} size={22} type="circular" />,
       onClick: () => {
         if (!campaignMode) {

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

@@ -21,8 +21,13 @@ import {
   type Wallet,
   WidgetEvents,
 } from '../types';
-import { isPositiveNumber } from '../utils/numbers';
+import { isPositiveNumber, sanitizeInputAmount } from '../utils/numbers';
+import {
+  ensureLeadingZeroForDecimal,
+  removeLeadingZeros,
+} from '../utils/sanitizers';
 import { getUsdInputFrom, getUsdOutputFrom } from '../utils/swap';
+import { isZeroValue } from '../utils/validation';
 
 import createSelectors from './selectors';
 
@@ -87,6 +92,7 @@ export interface QuoteState {
     value: SomeQuoteState[K]
   ) => void;
   setInputAmount: (amount: string) => void;
+  sanitizeInputAmount: (amount: string) => void;
   setSelectedQuote: (quote: SelectedQuote | null) => void;
   retry: (retryQuote: RetryQuote) => void;
   switchFromAndTo: () => void;
@@ -223,16 +229,29 @@ export const useQuoteStore = createSelectors(
           }),
         }));
       },
+      sanitizeInputAmount: (amount) => {
+        const sanitized = sanitizeInputAmount(amount);
+
+        set(() => ({
+          inputAmount: sanitized,
+        }));
+      },
       setInputAmount: (amount) => {
+        let sanitized = amount;
+        if (!isZeroValue(amount)) {
+          // sanitize once a meaningful digit is entered (e.g. "00001" → "1")
+          sanitized = removeLeadingZeros(sanitized);
+          sanitized = ensureLeadingZeroForDecimal(sanitized);
+        }
         set((state) => ({
-          inputAmount: amount,
-          ...(!amount && {
+          inputAmount: sanitized,
+          ...(!sanitized && {
             outputAmount: null,
             outputUsdValue: new BigNumber(0),
             selectedQuote: null,
           }),
           ...(!!state.fromToken && {
-            inputUsdValue: getUsdValue(state.fromToken, amount),
+            inputUsdValue: getUsdValue(state.fromToken, sanitized),
           }),
         }));
       },

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

@@ -2,6 +2,8 @@
 // Types
 import type { ThemeColors, WidgetColors, WidgetColorsKeys } from '../types';
 
+import { isColorKeyOverridden } from './validation';
+
 type RGB = {
   red: number;
   green: number;
@@ -40,15 +42,6 @@ function expandShortHexColor(hexColor: string) {
   return `#${hexColor}`;
 }
 
-/*
- * We letting users to override some specific colors (e.g. `primary550`, `secondary100`).
- * So we are generating a range of colors if `primary` (or other keys) has passed but if user is passing a specific color,
- * we will override the user color to generated range.
- */
-function isOverridingColor(colorKey: string): boolean {
-  return /[0-9]+$/.test(colorKey);
-}
-
 // pad a hexadecimal string with zeros if it needs it
 function pad(number: string, length: number) {
   return number.padStart(length, '0');
@@ -171,7 +164,7 @@ export function expandToGenerateThemeColors(
      */
     const isSingleColor = ['background', 'foreground'].includes(colorKey);
 
-    if (!isSingleColor && !isOverridingColor(colorKey)) {
+    if (!isSingleColor && !isColorKeyOverridden(colorKey)) {
       const expandedHexColor = expandShortHexColor(expandColor);
       Object.assign(
         output,

package/src/utils/numbers.ts

@@ -4,6 +4,9 @@ import type { BestRouteResponse } from 'rango-sdk';
 
 import { BigNumber } from 'bignumber.js';
 
+import { stripTrailingZeros } from './sanitizers';
+import { isZeroValue } from './validation';
+
 /*
  * if time > 1h -> rounded with 5 minutes precision
  * if time < 1h -> rounded with 15 seconds precision
@@ -125,3 +128,11 @@ export const containsText = (text: string, searchText: string) =>
 
 export const isPositiveNumber = (text?: string) =>
   !!text && parseFloat(text) > 0;
+
+export function sanitizeInputAmount(amount: string): string {
+  if (isZeroValue(amount)) {
+    return '0';
+  }
+
+  return stripTrailingZeros(amount);
+}