@rango-dev/widget-embedded 0.17.1-next.1 → 0.17.1-next.11

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -0,0 +1,107 @@
+import type { HighValueLossWarning } from '../../types';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  MessageBox,
+  Modal,
+  Typography,
+  WarningIcon,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { errorMessages } from '../../constants/errors';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { getContainer } from '../../utils/common';
+import { numberToString } from '../../utils/numbers';
+
+import { QuoteErrorsModalItem } from './QuoteErrorsModalItem';
+import { Flex } from './QuoteWarningsAndErrors.styles';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  warning: HighValueLossWarning;
+};
+
+export function HighValueLossWarningModal(props: Props) {
+  const { open, onClose, onConfirm, warning } = props;
+  const type = warning.warningLevel === 'high' ? 'error' : 'warning';
+  const highValueLossData = [
+    {
+      title: i18n.t('Swapping'),
+      value: numberToString(
+        warning.inputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Gas cost'),
+      value: numberToString(
+        warning.totalFee,
+        GAS_FEE_MIN_DECIMALS,
+        GAS_FEE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Receiving'),
+      value: numberToString(
+        warning.outputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Price impact'),
+      value: numberToString(
+        warning.priceImpact,
+        PERCENTAGE_CHANGE_MIN_DECIMALS,
+        PERCENTAGE_CHANGE_MAX_DECIMALS
+      ),
+      valueColor: `${type}500`,
+    },
+  ];
+
+  return (
+    <Modal open={open} onClose={onClose} container={getContainer()}>
+      <MessageBox
+        type={type}
+        title={errorMessages().highValueLossError.impactTitle}
+        description={errorMessages().highValueLossError.description}
+      />
+
+      <Flex>
+        <Divider size={20} />
+        <Typography size="small" variant="title">
+          {i18n.t('Details')}
+        </Typography>
+        <Flex>
+          {highValueLossData.map((item, index) => {
+            const key = index;
+            return <QuoteErrorsModalItem key={key} {...item} />;
+          })}
+        </Flex>
+      </Flex>
+
+      <Divider size={32} />
+      <Button
+        type="primary"
+        size="large"
+        prefix={<WarningIcon />}
+        fullWidth
+        onClick={onConfirm}>
+        {errorMessages().highValueLossError.confirmMessage}
+      </Button>
+    </Modal>
+  );
+}

package/src/components/{RouteErrors/RouteErrorsModalItem.tsx → QuoteWarningsAndErrors/QuoteErrorsModalItem.tsx}

@@ -1,16 +1,16 @@
-import type { ModalContentData } from './RouteErrors.types';
+import type { ModalContentData } from './QuoteWarningsAndErrors.types';
 
 import { Typography } from '@rango-dev/ui';
 import React from 'react';
 
-import { Item } from './RouteErrors.styles';
+import { Item } from './QuoteWarningsAndErrors.styles';
 
-export function RouteErrorsModalItem(props: ModalContentData) {
+export function QuoteErrorsModalItem(props: ModalContentData) {
   const { title, value, valueColor } = props;
 
   return (
     <Item>
-      <Typography size="medium" variant="label" color="neutral600">
+      <Typography size="medium" variant="label" className="_title">
         {title}
       </Typography>
       <Typography

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

@@ -0,0 +1,67 @@
+import type {
+  BridgeLimitError,
+  InsufficientSlippageError,
+  QuoteWarning,
+} from '../../types';
+
+import { i18n } from '@lingui/core';
+
+import { errorMessages } from '../../constants/errors';
+import { QuoteErrorType, QuoteWarningType } from '../../types';
+import { getPriceImpactLevel } from '../../utils/quote';
+
+type AlertInfo = {
+  alertType: 'error' | 'warning';
+  title: string;
+  action: 'show-info' | 'change-settings' | null;
+};
+
+export function makeAlerts(
+  warning: QuoteWarning | null,
+  error: BridgeLimitError | InsufficientSlippageError | null
+): AlertInfo | null {
+  const alertInfo: AlertInfo = {
+    alertType: 'warning',
+    title: '',
+    action: 'show-info',
+  };
+  if (warning) {
+    if (warning.type === QuoteWarningType.HIGH_VALUE_LOSS) {
+      const warningLevel = getPriceImpactLevel(warning.priceImpact);
+      if (warningLevel === 'high') {
+        alertInfo.alertType = 'error';
+      }
+      alertInfo.title = errorMessages().highValueLossError.title;
+    }
+    if (warning.type === QuoteWarningType.UNKNOWN_PRICE) {
+      alertInfo.title = errorMessages().unknownPriceError.title;
+    }
+    if (warning.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE) {
+      alertInfo.title = i18n.t({
+        id: 'minimum required slippage for this route: {minRequiredSlippage}',
+        values: {
+          minRequiredSlippage: warning.minRequiredSlippage,
+        },
+      });
+    }
+    if (warning.type === QuoteWarningType.HIGH_SLIPPAGE) {
+      alertInfo.title = i18n.t('Caution, your slippage is high');
+    }
+    return alertInfo;
+  }
+  if (error) {
+    alertInfo.alertType = 'error';
+    if (error.type === QuoteErrorType.BRIDGE_LIMIT) {
+      alertInfo.title = error.recommendation;
+      alertInfo.action = null;
+    }
+
+    if (error.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE) {
+      alertInfo.title = '';
+      alertInfo.action = 'change-settings';
+    }
+
+    return alertInfo;
+  }
+  return null;
+}

package/src/components/{RouteErrors/RouteErrors.styles.ts → QuoteWarningsAndErrors/QuoteWarningsAndErrors.styles.ts}

@@ -1,4 +1,4 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
@@ -19,6 +19,13 @@ export const Item = styled('div', {
   justifyContent: 'space-between',
   alignItems: 'center',
   width: '100%',
+  '._title': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
 });
 
 export const Action = styled('div', {

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -0,0 +1,103 @@
+import type { PropTypes } from './QuoteWarningsAndErrors.types';
+
+import { i18n } from '@lingui/core';
+import { Alert, Button, InfoIcon } from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { QuoteErrorType, QuoteWarningType } from '../../types';
+import { NoResult } from '../NoResult';
+
+import { HighValueLossWarningModal } from './HighValueLossWarningModal';
+import { makeAlerts } from './QuoteWarningsAndErrors.helpers';
+import { Action, Alerts } from './QuoteWarningsAndErrors.styles';
+import { SlippageWarningModal } from './SlippageWariningModal';
+import { UnknownPriceWarningModal } from './UnknownPriceWarningModal';
+
+export function QuoteWarningsAndErrors(props: PropTypes) {
+  const {
+    warning,
+    error,
+    refetchQuote,
+    showWarningModal,
+    onOpenWarningModal,
+    onCloseWarningModal,
+    onConfirmWarningModal,
+  } = props;
+
+  const navigate = useNavigate();
+
+  const warningModalHandlers = {
+    open: showWarningModal,
+    onClose: onCloseWarningModal,
+    onConfirm: onConfirmWarningModal,
+  };
+
+  const showNoResultMessage =
+    error?.type === QuoteErrorType.NO_RESULT ||
+    error?.type === QuoteErrorType.REQUEST_FAILED;
+
+  const alertInfo = makeAlerts(
+    warning,
+    error?.type === QuoteErrorType.BRIDGE_LIMIT ||
+      error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE
+      ? error
+      : null
+  );
+
+  const showAlerts = !!alertInfo;
+
+  return (
+    <>
+      {showNoResultMessage && <NoResult error={error} fetch={refetchQuote} />}
+
+      {showAlerts && (
+        <Alerts>
+          <Alert
+            title={alertInfo.title}
+            type={alertInfo.alertType}
+            variant="alarm"
+            action={
+              alertInfo.action === 'show-info' ? (
+                <Action onClick={onOpenWarningModal}>
+                  <InfoIcon size={12} color="gray" />
+                </Action>
+              ) : (
+                <Button
+                  size="xsmall"
+                  type={'error'}
+                  onClick={() => navigate(navigationRoutes.settings)}>
+                  {i18n.t('Change Settings')}
+                </Button>
+              )
+            }
+          />
+        </Alerts>
+      )}
+
+      {warning && (
+        <>
+          {warning.type === QuoteWarningType.HIGH_VALUE_LOSS && (
+            <HighValueLossWarningModal
+              {...warningModalHandlers}
+              warning={warning}
+            />
+          )}
+
+          {(warning.type === QuoteWarningType.HIGH_SLIPPAGE ||
+            warning.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE) && (
+            <SlippageWarningModal {...warningModalHandlers} warning={warning} />
+          )}
+
+          {warning.type === QuoteWarningType.UNKNOWN_PRICE && (
+            <UnknownPriceWarningModal
+              {...warningModalHandlers}
+              warning={warning}
+            />
+          )}
+        </>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,24 @@
+import type { QuoteError, QuoteWarning } from '../../types';
+
+export interface PropTypes {
+  loading: boolean;
+  error: QuoteError | null;
+  warning: QuoteWarning | null;
+  showWarningModal: boolean;
+  refetchQuote: () => void;
+  onOpenWarningModal: () => void;
+  onCloseWarningModal: () => void;
+  onConfirmWarningModal: () => void;
+}
+
+type ModalPropTypesKeys = keyof Omit<PropTypes, 'extraSpace' | 'loading'>;
+
+export type ModalPropTypes = Pick<PropTypes, ModalPropTypesKeys> & {
+  open: boolean;
+};
+
+export interface ModalContentData {
+  title: string;
+  value: string;
+  valueColor?: string;
+}

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -0,0 +1,77 @@
+import type {
+  HighSlippageWarning,
+  InsufficientSlippageWarning,
+} from '../../types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox, Modal, Typography } from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useSettingsStore } from '../../store/settings';
+import { QuoteWarningType } from '../../types';
+import { getContainer } from '../../utils/common';
+
+type PropsTypes = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  warning: InsufficientSlippageWarning | HighSlippageWarning;
+};
+
+export function SlippageWarningModal(props: PropsTypes) {
+  const { customSlippage, slippage } = useSettingsStore();
+  const { open, onClose, onConfirm, warning } = props;
+  const navigate = useNavigate();
+  const userSlippage = customSlippage ?? slippage;
+  return (
+    <Modal
+      anchor="bottom"
+      open={open}
+      prefix={
+        <Button
+          size="small"
+          variant="ghost"
+          onClick={() => navigate('/' + navigationRoutes.settings)}>
+          <Typography variant="label" size="medium" color="$neutral900">
+            {i18n.t('Change settings')}
+          </Typography>
+        </Button>
+      }
+      container={getContainer()}
+      onClose={onClose}>
+      <MessageBox
+        type="warning"
+        title={
+          warning.type === QuoteWarningType.HIGH_SLIPPAGE
+            ? i18n.t('High slippage')
+            : i18n.t('Low slippage')
+        }
+        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({
+                id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+                values: {
+                  minRequiredSlippage: warning.minRequiredSlippage,
+                },
+              })
+        }>
+        <Divider size={18} />
+        <Divider size={32} />
+        <Button
+          size="large"
+          type="primary"
+          variant="contained"
+          fullWidth
+          onClick={onConfirm}>
+          {i18n.t('Confirm anyway')}
+        </Button>
+      </MessageBox>
+    </Modal>
+  );
+}

package/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx

@@ -0,0 +1,38 @@
+import type { UnknownPriceWarning } from '../../types';
+
+import { Button, Divider, MessageBox, Modal, WarningIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { errorMessages } from '../../constants/errors';
+import { getContainer } from '../../utils/common';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  warning: UnknownPriceWarning;
+};
+
+export function UnknownPriceWarningModal(props: Props) {
+  const { open, onClose, onConfirm } = props;
+
+  return (
+    <Modal open={open} onClose={onClose} container={getContainer()}>
+      <MessageBox
+        type="warning"
+        title={errorMessages().unknownPriceError.impactTitle}
+        description={errorMessages().unknownPriceError.description}
+      />
+
+      <Divider size={32} />
+      <Button
+        type="primary"
+        size="large"
+        prefix={<WarningIcon />}
+        fullWidth
+        onClick={onConfirm}>
+        {errorMessages().unknownPriceError.confirmMessage}
+      </Button>
+    </Modal>
+  );
+}

package/src/components/QuoteWarningsAndErrors/index.ts

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

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -31,7 +31,7 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
       noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
-        onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
+        onBack: () => navigateBackFrom(navigationRoutes.swapDetails),
         suffix: <SuffixContainer />,
       }}>
       {showSkeleton && (

package/src/components/SwapDetails/SwapDetails.tsx

@@ -13,8 +13,7 @@ import {
   CopyIcon,
   Divider,
   IconButton,
-  RouteCost,
-  RouteSummary,
+  QuoteCost,
   StepDetails,
   Typography,
   useCopyToClipboard,
@@ -35,18 +34,17 @@ import {
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
-import { useBestRouteStore } from '../../store/bestRoute';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
+import { useQuoteStore } from '../../store/quote';
 import {
   numberToString,
   secondsToString,
   totalArrivalTime,
 } from '../../utils/numbers';
-import { getPriceImpactLevel } from '../../utils/routing';
+import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
 import {
   getLastConvertedTokenInFailedSwap,
-  getPercentageChange,
   getSwapMessages,
   shouldRetrySwap,
 } from '../../utils/swap';
@@ -54,6 +52,7 @@ import { getSwapDate } from '../../utils/time';
 import { getConciseAddress, getUsdPrice } from '../../utils/wallets';
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
 import { Layout } from '../Layout';
+import { QuoteSummary } from '../Quote';
 import {
   SwapDetailsCompleteModal,
   SwapDetailsModal,
@@ -65,7 +64,9 @@ import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
-  const retry = useBestRouteStore.use.retry();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const retry = useQuoteStore.use.retry();
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
   const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
@@ -74,9 +75,6 @@ export function SwapDetails(props: SwapDetailsProps) {
   const [showCompletedModal, setShowCompletedModal] = useState<
     'success' | 'failed' | null
   >(null);
-  const {
-    meta: { tokens, blockchains },
-  } = useMetaStore();
 
   const onCancel = () => {
     onCancelProps();
@@ -151,7 +149,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     showNetworkModal: currentStepNetworkStatus,
     setNetworkModal: setModalState,
     message: stepMessage,
-    blockchains,
+    blockchains: blockchains,
   });
   const numberOfSteps = steps.length;
   const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];
@@ -201,7 +199,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     USD_VALUE_MAX_DECIMALS
   );
 
-  const percentageChange = getPercentageChange(inputUsdValue, outputUsdValue);
+  const percentageChange = getPriceImpact(inputUsdValue, outputUsdValue);
 
   const completeModalDesc =
     swap.status === 'success'
@@ -239,7 +237,7 @@ export function SwapDetails(props: SwapDetailsProps) {
       noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
-        onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
+        onBack: () => navigateBackFrom(navigationRoutes.swapDetails),
         onCancel:
           swap.status === 'running' ? () => setModalState('cancel') : undefined,
         suffix: swap.status !== 'running' && (
@@ -265,7 +263,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             type="primary"
             size="large"
             onClick={() => {
-              retry(swap);
+              retry(swap, { blockchains: blockchains, tokens: tokens });
               setTimeout(() => {
                 navigate(navigationRoutes.home);
               }, 0);
@@ -302,7 +300,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         </HeaderDetails>
 
         <div className="output">
-          <RouteCost
+          <QuoteCost
             fee={numberToString(
               String(totalFee),
               GAS_FEE_MIN_DECIMALS,
@@ -311,7 +309,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             time={secondsToString(totalArrivalTime(swap.steps))}
             steps={numberOfSteps}
           />
-          <RouteSummary
+          <QuoteSummary
             from={{
               price: {
                 value: numberToString(
@@ -349,13 +347,11 @@ export function SwapDetails(props: SwapDetailsProps) {
               },
             }}
             percentageChange={numberToString(
-              percentageChange,
+              String(percentageChange),
               PERCENTAGE_CHANGE_MIN_DECIMALS,
               PERCENTAGE_CHANGE_MAX_DECIMALS
             )}
-            warningLevel={getPriceImpactLevel(
-              percentageChange?.toNumber() ?? 0
-            )}
+            warningLevel={getPriceImpactLevel(percentageChange ?? 0)}
           />
         </div>
         <div className="title-steps">
@@ -377,7 +373,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               <StepDetails
                 key={key}
                 step={step}
-                type="route-progress"
+                type="swap-progress"
                 ref={listRef}
                 state={state}
                 hasSeparator={index !== 0}
@@ -409,7 +405,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         )}
         usdValue={outputUsdValue}
         percentageChange={numberToString(
-          percentageChange,
+          String(percentageChange),
           PERCENTAGE_CHANGE_MIN_DECIMALS,
           PERCENTAGE_CHANGE_MAX_DECIMALS
         )}

package/src/components/SwapsGroup/SwapsGroup.styles.ts

@@ -1,9 +1,16 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Group = styled('div', {
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
+  '.group-title': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
 });
 
 export const Time = styled('div', {

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -34,7 +34,6 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  color="neutral600"
                   className="group-title">
                   {i18n.t(group.title)}
                 </Typography>
@@ -68,7 +67,6 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  color="neutral600"
                   className="group-title">
                   {i18n.t(group.title)}
                 </Typography>

package/src/components/SwitchFromAndTo.tsx

@@ -1,7 +1,7 @@
 import { ReverseIcon, styled } from '@rango-dev/ui';
 import React from 'react';
 
-import { useBestRouteStore } from '../store/bestRoute';
+import { useQuoteStore } from '../store/quote';
 
 const SwitchButtonContainer = styled('div', {
   position: 'absolute',
@@ -27,7 +27,7 @@ const StyledButton = styled('div', {
 });
 
 export function SwitchFromAndToButton() {
-  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
+  const switchFromAndTo = useQuoteStore.use.switchFromAndTo();
 
   return (
     <SwitchButtonContainer>