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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.42.3-next.2",
+  "version": "0.42.3-next.3",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/NoResult/NoResult.tsx

@@ -26,7 +26,7 @@ import {
 } from './NoResult.styles';
 
 export function NoResult(props: PropTypes) {
-  const { fetch, error, size = 'small' } = props;
+  const { fetch, error, size = 'small', skipAlerts } = props;
   const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
   const toggleAllLiquiditySources = useAppStore().toggleAllLiquiditySources;
 
@@ -37,6 +37,9 @@ export function NoResult(props: PropTypes) {
     () => toggleAllLiquiditySources(swappers, true),
     fetch
   );
+  if (skipAlerts) {
+    info.alert = null;
+  }
 
   return (
     <Container>

package/src/components/NoResult/NoResult.types.ts

@@ -4,6 +4,7 @@ export interface PropTypes {
   fetch: () => void;
   error: NoResultError | QuoteRequestFailed | null;
   size?: 'small' | 'large';
+  skipAlerts?: boolean;
 }
 
 type AlertAction = {

package/src/components/Quote/Quote.tsx

@@ -263,7 +263,7 @@ export function Quote(props: QuoteProps) {
                             variant="body"
                             color="neutral900">
                             {i18n.t({
-                              id: 'Minimum required slippage: {minRequiredSlippage}',
+                              id: 'Minimum suggested slippage: {minRequiredSlippage}',
                               values: {
                                 ...(error?.type ===
                                   QuoteErrorType.INSUFFICIENT_SLIPPAGE && {

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

@@ -10,10 +10,17 @@ import { errorMessages } from '../../constants/errors';
 import { QuoteErrorType, QuoteWarningType } from '../../types';
 import { getPriceImpactLevel } from '../../utils/quote';
 
-type AlertInfo = {
+export type ActionType =
+  | 'show-info'
+  | 'change-settings'
+  | 'change-slippage'
+  | null;
+
+export type AlertInfo = {
   alertType: 'error' | 'warning';
   title: string;
-  action: 'show-info' | 'change-settings' | null;
+  action: ActionType;
+  actionButtonTitle: string | null;
 };
 
 export function makeAlerts(
@@ -24,7 +31,9 @@ export function makeAlerts(
     alertType: 'warning',
     title: '',
     action: null,
+    actionButtonTitle: null,
   };
+
   if (error) {
     alertInfo.alertType = 'error';
     if (error.type === QuoteErrorType.BRIDGE_LIMIT) {
@@ -38,7 +47,8 @@ export function makeAlerts(
           minRequiredSlippage: error.minRequiredSlippage,
         },
       });
-      alertInfo.action = 'change-settings';
+      alertInfo.action = 'change-slippage';
+      alertInfo.actionButtonTitle = i18n.t('Increase');
     }
 
     return alertInfo;
@@ -75,7 +85,9 @@ export function makeAlerts(
             minRequiredSlippage: warning.minRequiredSlippage,
           },
         });
-        alertInfo.action = 'change-settings';
+        alertInfo.action = 'change-slippage';
+        alertInfo.actionButtonTitle = i18n.t('Increase');
+
         break;
       }
       case QuoteWarningType.HIGH_SLIPPAGE: {
@@ -92,3 +104,16 @@ export function makeAlerts(
   }
   return null;
 }
+
+export function getRequiredSlippage(
+  warning: QuoteWarning | null,
+  error: BridgeLimitError | InsufficientSlippageError | null
+) {
+  if (error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE) {
+    return Number(error.minRequiredSlippage);
+  }
+  if (warning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE) {
+    return Number(warning.minRequiredSlippage);
+  }
+  return null;
+}

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.styles.ts

@@ -1,4 +1,4 @@
-import { darkTheme, styled } from '@rango-dev/ui';
+import { Button, darkTheme, styled } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
@@ -32,3 +32,12 @@ export const Action = styled('div', {
   alignSelf: 'flex-start',
   cursor: 'pointer',
 });
+
+export const SwapButton = styled(Button, {
+  '& ._text': {
+    gap: '$5',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -1,14 +1,18 @@
+import type { ActionType } from './QuoteWarningsAndErrors.helpers';
 import type { PropTypes } from './QuoteWarningsAndErrors.types';
 
 import { i18n } from '@lingui/core';
-import { Alert, Button, InfoIcon } from '@rango-dev/ui';
+import { Alert, Button, Divider, InfoIcon } from '@rango-dev/ui';
 import React from 'react';
 
 import { QuoteErrorType, QuoteWarningType } from '../../types';
 import { NoResult } from '../NoResult';
 
 import { HighValueLossWarningModal } from './HighValueLossWarningModal';
-import { makeAlerts } from './QuoteWarningsAndErrors.helpers';
+import {
+  getRequiredSlippage,
+  makeAlerts,
+} from './QuoteWarningsAndErrors.helpers';
 import { Action, Alerts } from './QuoteWarningsAndErrors.styles';
 import { SlippageWarningModal } from './SlippageWariningModal';
 import { UnknownPriceWarningModal } from './UnknownPriceWarningModal';
@@ -20,11 +24,13 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
     couldChangeSettings,
     showWarningModal,
     confirmationDisabled,
+    skipAlerts,
     refetchQuote,
     onOpenWarningModal,
     onCloseWarningModal,
     onConfirmWarningModal,
     onChangeSettings,
+    onChangeSlippage,
   } = props;
 
   const warningModalHandlers = {
@@ -49,14 +55,38 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
     alertInfo.action = null;
   }
 
-  const showAlerts = !!alertInfo;
+  const showAlerts = !!alertInfo && !skipAlerts;
+
+  const onclickActionButton = (action: ActionType) => {
+    if (action === 'change-slippage') {
+      const quoteError =
+        error?.type === QuoteErrorType.BRIDGE_LIMIT ||
+        error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE
+          ? error
+          : null;
+      const requestedSlippage = getRequiredSlippage(warning, quoteError);
+      onChangeSlippage?.(requestedSlippage);
+    } else if (action === 'change-settings') {
+      onChangeSettings();
+    }
+  };
 
   return (
     <>
-      {showNoResultMessage && <NoResult error={error} fetch={refetchQuote} />}
+      {showNoResultMessage && (
+        <>
+          <Divider size={10} />
+          <NoResult
+            skipAlerts={skipAlerts}
+            error={error}
+            fetch={refetchQuote}
+          />
+        </>
+      )}
 
       {showAlerts && (
         <Alerts>
+          <Divider size={10} />
           <Alert
             title={alertInfo.title}
             type={alertInfo.alertType}
@@ -68,14 +98,15 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
                 </Action>
               ),
             })}
-            {...(alertInfo.action === 'change-settings' && {
+            {...((alertInfo.action === 'change-settings' ||
+              alertInfo.action === 'change-slippage') && {
               action: (
                 <Button
                   id="widget-quote-warning-error-change-settings-btn"
                   size="xxsmall"
                   type={alertInfo.alertType}
-                  onClick={onChangeSettings}>
-                  {i18n.t('Change')}
+                  onClick={() => onclickActionButton(alertInfo.action)}>
+                  {alertInfo.actionButtonTitle || i18n.t('Change')}
                 </Button>
               ),
             })}

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.types.ts

@@ -6,11 +6,13 @@ export interface PropTypes {
   showWarningModal: boolean;
   confirmationDisabled: boolean;
   couldChangeSettings: boolean;
+  skipAlerts?: boolean;
   refetchQuote: () => void;
   onOpenWarningModal: () => void;
   onCloseWarningModal: () => void;
   onConfirmWarningModal: () => void;
   onChangeSettings: () => void;
+  onChangeSlippage?: (slippage: number | null) => void;
 }
 
 type ModalPropTypesKeys = keyof Omit<PropTypes, 'extraSpace' | 'loading'>;

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -4,16 +4,17 @@ import type {
 } from '../../types';
 
 import { i18n } from '@lingui/core';
-import { Button, Divider, MessageBox, Typography } from '@rango-dev/ui';
+import { Button, Divider, MessageBox, WarningIcon } from '@rango-dev/ui';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
-import { useAppStore } from '../../store/AppStore';
 import { QuoteWarningType } from '../../types';
 import { getContainer } from '../../utils/common';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 
+import { SwapButton } from './QuoteWarningsAndErrors.styles';
+
 type PropsTypes = {
   open: boolean;
   confirmationDisabled: boolean;
@@ -23,26 +24,13 @@ type PropsTypes = {
 };
 
 export function SlippageWarningModal(props: PropsTypes) {
-  const { customSlippage, slippage } = useAppStore();
   const { open, onClose, onConfirm, warning, confirmationDisabled } = props;
   const navigate = useNavigate();
-  const userSlippage = customSlippage ?? slippage;
 
   return (
     <WatermarkedModal
       anchor="bottom"
       open={open}
-      prefix={
-        <Button
-          size="small"
-          id="widget-slippage-warning-modal-change-settings-btn"
-          variant="ghost"
-          onClick={() => navigate('../' + navigationRoutes.settings)}>
-          <Typography variant="label" size="medium" color="$neutral900">
-            {i18n.t('Change settings')}
-          </Typography>
-        </Button>
-      }
       container={getContainer()}
       onClose={onClose}>
       <MessageBox
@@ -54,10 +42,9 @@ export function SlippageWarningModal(props: PropsTypes) {
         }
         description={
           warning.type === QuoteWarningType.HIGH_SLIPPAGE
-            ? i18n.t({
-                id: ' Caution, your slippage is high (={userSlippage}). Your trade may be front run.',
-                values: { userSlippage },
-              })
+            ? i18n.t(
+                'Caution, your slippage is high. Your trade may be front run.'
+              )
             : i18n.t({
                 id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
                 values: {
@@ -67,7 +54,7 @@ export function SlippageWarningModal(props: PropsTypes) {
         }>
         <Divider size={18} />
         <Divider size={32} />
-        <Button
+        <SwapButton
           id="widget-slippage-warning-modal-confirm-anyway-btn"
           size="large"
           type="primary"
@@ -75,7 +62,19 @@ export function SlippageWarningModal(props: PropsTypes) {
           fullWidth
           disabled={confirmationDisabled}
           onClick={onConfirm}>
-          {i18n.t('Confirm anyway')}
+          <WarningIcon color="white" size={16} />
+          {i18n.t('Swap anyway')}
+        </SwapButton>
+        <Divider size={10} />
+        <Button
+          id="widget-slippage-warning-modal-change-slippage-btn"
+          size="large"
+          type="primary"
+          variant="outlined"
+          fullWidth
+          disabled={confirmationDisabled}
+          onClick={() => navigate('../' + navigationRoutes.settings)}>
+          {i18n.t('Change Slippage')}
         </Button>
       </MessageBox>
     </WatermarkedModal>

package/src/components/Slippage/Slippage.styles.ts

@@ -32,3 +32,26 @@ export const SlippageChip = styled(Chip, {
   width: '61px',
   flexShrink: 0,
 });
+
+export const SlippageTextFieldContainer = styled('div', {
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderRadius: '$xs',
+  flex: 1,
+  variants: {
+    status: {
+      safe: {
+        borderColor: '$secondary500',
+      },
+      error: {
+        borderColor: '$error500',
+      },
+      warning: {
+        borderColor: '$warning500',
+      },
+      empty: {
+        borderWidth: 0,
+      },
+    },
+  },
+});

package/src/components/Slippage/Slippage.tsx

@@ -20,6 +20,7 @@ import {
   Head,
   SlippageChip,
   SlippageChipsContainer,
+  SlippageTextFieldContainer,
 } from './Slippage.styles';
 import { SlippageTooltipContent } from './SlippageTooltipContent';
 
@@ -90,26 +91,31 @@ export function Slippage() {
             />
           );
         })}
-        <TextField
-          type="number"
-          min="0.01"
-          max="30"
-          step="0.01"
-          onInput={onInput}
-          fullWidth
-          variant="contained"
-          value={customSlippage === null ? '' : customSlippage}
-          color="dark"
-          onChange={onSlippageValueChange}
-          suffix={
-            customSlippage && (
-              <Typography variant="body" size="small">
-                %
-              </Typography>
-            )
-          }
-          placeholder={i18n.t('Custom')}
-        />
+        <SlippageTextFieldContainer
+          status={
+            slippageValidation?.type || (customSlippage ? 'safe' : 'empty')
+          }>
+          <TextField
+            type="number"
+            min="0.01"
+            max="30"
+            step="0.01"
+            onInput={onInput}
+            fullWidth
+            variant="contained"
+            value={customSlippage === null ? '' : customSlippage}
+            color="dark"
+            onChange={onSlippageValueChange}
+            suffix={
+              customSlippage && (
+                <Typography variant="body" size="small">
+                  %
+                </Typography>
+              )
+            }
+            placeholder={i18n.t('Custom')}
+          />
+        </SlippageTextFieldContainer>
       </SlippageChipsContainer>
 
       {slippageValidation && (

package/src/components/SlippageWarningsAndErrors/SlippageWarningsAndErrors.helpers.ts

@@ -0,0 +1,33 @@
+import type { AlertInfo } from '../QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers';
+
+import { i18n } from '@lingui/core';
+
+import { HIGH_SLIPPAGE, MIN_SLIPPAGE } from '../../constants/swapSettings';
+
+export type ActionType = AlertInfo['action'] | 'reset-slippage';
+
+type Alert = Omit<AlertInfo, 'action'> & {
+  action: ActionType;
+};
+
+export function makeAlerts(slippage: number): Alert | null {
+  let alertInfo: Alert | null = null;
+  if (slippage === MIN_SLIPPAGE) {
+    alertInfo = {
+      alertType: 'error',
+      action: 'reset-slippage',
+      actionButtonTitle: i18n.t('Reset'),
+      title: i18n.t('Slippage cannot be set lower than 0.01%.'),
+    };
+    return alertInfo;
+  } else if (slippage > HIGH_SLIPPAGE) {
+    alertInfo = {
+      alertType: 'warning',
+      action: 'change-settings',
+      actionButtonTitle: i18n.t('Change'),
+      title: i18n.t('Caution, your slippage is high!'),
+    };
+    return alertInfo;
+  }
+  return null;
+}

package/src/components/SlippageWarningsAndErrors/SlippageWarningsAndErrors.tsx

@@ -0,0 +1,48 @@
+import type { ActionType } from './SlippageWarningsAndErrors.helpers';
+import type { PropTypes } from './SlippageWarningsAndErrors.types';
+
+import { Alert, Button } from '@rango-dev/ui';
+import React from 'react';
+
+import { DEFAULT_SLIPPAGE } from '../../constants/swapSettings';
+import { useAppStore } from '../../store/AppStore';
+
+import { makeAlerts } from './SlippageWarningsAndErrors.helpers';
+
+export function SlippageWarningsAndErrors(props: PropTypes) {
+  const { slippage, customSlippage, setSlippage, setCustomSlippage } =
+    useAppStore();
+  const { onChangeSettings } = props;
+  const currentSlippage = customSlippage !== null ? customSlippage : slippage;
+
+  const alertInfo = makeAlerts(currentSlippage);
+
+  const onClickActionButton = (action: ActionType) => {
+    if (action === 'reset-slippage') {
+      setSlippage(DEFAULT_SLIPPAGE);
+      setCustomSlippage(null);
+    } else if (action === 'change-settings') {
+      onChangeSettings();
+    }
+  };
+
+  if (!alertInfo) {
+    return null;
+  }
+  return (
+    <Alert
+      title={alertInfo.title}
+      type={alertInfo.alertType}
+      variant="alarm"
+      action={
+        <Button
+          id="widget-slippage-warning-error-change-settings-or-reset-slippage-btn"
+          size="xxsmall"
+          type={alertInfo.alertType}
+          onClick={() => onClickActionButton(alertInfo.action)}>
+          {alertInfo.actionButtonTitle}
+        </Button>
+      }
+    />
+  );
+}

package/src/components/SlippageWarningsAndErrors/SlippageWarningsAndErrors.types.ts

@@ -0,0 +1,3 @@
+export interface PropTypes {
+  onChangeSettings: () => void;
+}

package/src/components/SwapMetrics/SwapMetrics.constants.ts

@@ -0,0 +1,4 @@
+export const USD_FORMAT_DECIMALS = 2;
+export const USD_EXCHANGE_MINIMUM = 0.001;
+export const SMALL_VALUE_DECIMALS = 14;
+export const LARGE_VALUE_MAX_DIGITS = 10;

package/src/components/SwapMetrics/SwapMetrics.helpers.ts

@@ -0,0 +1,76 @@
+import type { SlippageColorParams } from './SwapMetrics.types';
+
+import BigNumber from 'bignumber.js';
+
+import { QuoteErrorType, QuoteWarningType } from '../../types';
+
+import {
+  LARGE_VALUE_MAX_DIGITS,
+  SMALL_VALUE_DECIMALS,
+  USD_EXCHANGE_MINIMUM,
+  USD_FORMAT_DECIMALS,
+} from './SwapMetrics.constants';
+
+export function getSlippageColor(params: SlippageColorParams) {
+  const { error, isDarkTheme, warning } = params;
+  const { quoteError, slippageError } = error;
+  const { quoteWarning, slippageWarning } = warning;
+  const hasSlippageError =
+    !!slippageError ||
+    quoteError?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE;
+  const hasSlippageWarning =
+    !!slippageWarning ||
+    quoteWarning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE;
+
+  if (hasSlippageError) {
+    return '$error500';
+  } else if (hasSlippageWarning) {
+    return '$warning500';
+  }
+  if (isDarkTheme) {
+    return '$neutral600';
+  }
+  return '$neutral700';
+}
+
+export function getUsdExchangeRate(params: {
+  toTokenUsdPrice: number | null;
+  fromTokenUsdPrice: number | null;
+}) {
+  const { toTokenUsdPrice, fromTokenUsdPrice } = params;
+  if (!toTokenUsdPrice || !fromTokenUsdPrice) {
+    return { rawValue: '0', displayValue: '0' };
+  }
+
+  const toPrice = new BigNumber(toTokenUsdPrice);
+  const fromPrice = new BigNumber(fromTokenUsdPrice);
+  const rawValue = toPrice.dividedBy(fromPrice);
+  let displayValue: string;
+
+  if (rawValue.isLessThan(1)) {
+    displayValue = rawValue.toFixed(SMALL_VALUE_DECIMALS);
+  } else if (rawValue.toFixed(0).length > LARGE_VALUE_MAX_DIGITS) {
+    displayValue = rawValue.toFixed(0).slice(0, LARGE_VALUE_MAX_DIGITS);
+  } else {
+    displayValue = rawValue.toFixed(USD_FORMAT_DECIMALS);
+  }
+  return {
+    displayValue,
+    rawValue: rawValue.toFixed(),
+  };
+}
+
+export function formatTokenValueInUsd(
+  usdExchangeRate: number,
+  tokenUsdPrice: number
+): string {
+  const value = new BigNumber(usdExchangeRate).multipliedBy(tokenUsdPrice);
+  if (value.isLessThan(USD_EXCHANGE_MINIMUM)) {
+    return '$0';
+  }
+  const result = value
+    .decimalPlaces(USD_FORMAT_DECIMALS, BigNumber.ROUND_DOWN)
+    .toFormat(USD_FORMAT_DECIMALS);
+
+  return `$${result}`;
+}

package/src/components/SwapMetrics/SwapMetrics.styles.ts

@@ -0,0 +1,32 @@
+import { darkTheme, styled, Typography } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  padding: '$4',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const Rate = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$2',
+  '& .rate-text': {
+    color: '$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$neutral700',
+    },
+  },
+  '& ._icon-button': {
+    transform: 'rotate(90deg)',
+    width: '$16',
+    height: '$16',
+  },
+});
+
+export const TokenName = styled(Typography, {
+  maxWidth: '$32',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});