@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.tsx

@@ -0,0 +1,96 @@
+import type { PropTypes } from './QuoteSummarySkeleton.types';
+
+import { ChainToken, Divider, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { Line } from '../Quote/Quote.styles';
+
+import {
+  BasicSummary,
+  FlexContent,
+  Output,
+  OutputTokenInfo,
+  QuoteSummary,
+  QuoteSummarySeparator,
+  RowStyle,
+  SwapPreview,
+  TokenAmount,
+  TokenAmountLabel,
+} from './QuoteSummarySkeleton.styles';
+
+export function QuoteSummarySkeleton(props: PropTypes) {
+  const { type, tagHidden = true } = props;
+  const quotePreview = (
+    <QuoteSummary>
+      <TokenAmount>
+        <ChainToken loading size="medium" />
+        <Divider size={8} direction="horizontal" />
+        <TokenAmountLabel>
+          <Skeleton height={10} width={60} variant="rounded" />
+          <Divider size={4} />
+          <Skeleton height={15} variant="rounded" />
+        </TokenAmountLabel>
+      </TokenAmount>
+      <Skeleton height={12} width={64} variant="rounded" />
+    </QuoteSummary>
+  );
+  const showAllRoutesSkeleton = type === 'basic' && !tagHidden;
+
+  return (
+    <div>
+      {!tagHidden && (
+        <>
+          <FlexContent>
+            <Skeleton width={65} height={20} variant="rounded" />
+            <Divider size={4} direction="horizontal" />
+            <Skeleton width={65} height={20} variant="rounded" />
+            <Divider size={4} direction="horizontal" />
+            <Skeleton width={65} height={20} variant="rounded" />
+          </FlexContent>
+          <Line />
+          {!showAllRoutesSkeleton && <Divider size={4} />}
+        </>
+      )}
+      <div className={RowStyle()}>
+        <FlexContent>
+          <Skeleton width={60} height={10} variant="rounded" />
+          <Divider size={4} direction="horizontal" />
+          <Skeleton width={60} height={10} variant="rounded" />
+          <Divider size={4} direction="horizontal" />
+          <Skeleton width={60} height={10} variant="rounded" />
+        </FlexContent>
+        {showAllRoutesSkeleton && (
+          <Skeleton width={85} height={24} variant="rounded" />
+        )}
+      </div>
+
+      {type === 'basic' && (
+        <BasicSummary>
+          <Skeleton height={15} width={148} variant="rounded" />
+        </BasicSummary>
+      )}
+      {type === 'list-item' && (
+        <Output>
+          <OutputTokenInfo>
+            <ChainToken loading size="medium" />
+            <Divider direction="horizontal" size={4} />
+            <Skeleton height={15} width={150} variant="rounded" />
+          </OutputTokenInfo>
+          <Divider size={10} />
+          <Skeleton height={10} width={184} variant="rounded" />
+        </Output>
+      )}
+      {type === 'swap-preview' && (
+        <>
+          <Divider size={4} />
+          <SwapPreview>
+            {quotePreview}
+            <QuoteSummarySeparator />
+            {quotePreview}
+          </SwapPreview>
+          <Divider size={12} />
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.types.ts

@@ -0,0 +1,6 @@
+import type { QuoteProps } from '../Quote/Quote.types';
+
+export type PropTypes = {
+  type: QuoteProps['type'];
+  tagHidden?: boolean;
+};

package/src/components/QuoteSkeleton/StepSkeleton.styles.ts

@@ -0,0 +1,40 @@
+import { styled } from '@rango-dev/ui';
+
+export const StepContent = styled('div', {
+  display: 'flex',
+  alignItems: 'start',
+});
+
+export const StepTokens = styled('div', {
+  flexGrow: 1,
+  paddingTop: '$5',
+  paddingBottom: '$10',
+  display: 'flex',
+  alignItems: 'center',
+  variants: {
+    extraSpace: {
+      true: {
+        paddingBottom: '$40',
+      },
+    },
+  },
+});
+
+export const StepTokenInfo = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  flexGrow: 1,
+});
+
+export const StepIconContainer = styled('div', {
+  margin: '$0 $2',
+  padding: '$4',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const StepTitle = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});

package/src/components/QuoteSkeleton/StepSkeleton.tsx

@@ -0,0 +1,44 @@
+import type { PropTypes } from './StepSkeleton.types';
+
+import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { StepSeparator } from './QuoteSkeleton.styles';
+import {
+  StepContent,
+  StepIconContainer,
+  StepTitle,
+  StepTokenInfo,
+  StepTokens,
+} from './StepSkeleton.styles';
+
+export function StepSkeleton(props: PropTypes) {
+  const { separator = true } = props;
+  return (
+    <>
+      <StepTitle>
+        <Skeleton height={22} width={22} variant="circular" />
+        <Divider direction="horizontal" size={8} />
+        <Skeleton height={15} width={148} variant="rounded" />
+      </StepTitle>
+      <StepContent>
+        <StepSeparator hideSeparator={!separator} />
+        <StepTokens extraSpace={separator}>
+          <StepTokenInfo>
+            <ChainToken size="small" loading />
+            <Divider direction="horizontal" size={8} />
+            <Skeleton height={12} variant="rounded" />
+          </StepTokenInfo>
+          <StepIconContainer>
+            <NextIcon color="gray" size={16} />
+          </StepIconContainer>
+          <StepTokenInfo>
+            <ChainToken size="small" loading />
+            <Divider direction="horizontal" size={8} />
+            <Skeleton height={12} variant="rounded" />
+          </StepTokenInfo>
+        </StepTokens>
+      </StepContent>
+    </>
+  );
+}

package/src/components/QuoteSkeleton/StepSkeleton.types.ts

@@ -0,0 +1 @@
+export type PropTypes = { separator?: boolean };

package/src/components/QuoteSkeleton/index.ts

@@ -0,0 +1,3 @@
+export { QuoteSkeleton } from './QuoteSkeleton';
+export { StepSkeleton } from './StepSkeleton';
+export { QuoteSummarySkeleton } from './QuoteSummarySkeleton';

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -0,0 +1,105 @@
+import type { HighValueLossWarning } from '../../types';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  MessageBox,
+  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,
+} from '../../constants/routing';
+import { getContainer } from '../../utils/common';
+import { numberToString } from '../../utils/numbers';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+
+import { QuoteErrorsModalItem } from './QuoteErrorsModalItem';
+import { Flex } from './QuoteWarningsAndErrors.styles';
+
+type Props = {
+  open: boolean;
+  confirmationDisabled: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  warning: HighValueLossWarning;
+};
+
+export function HighValueLossWarningModal(props: Props) {
+  const { open, onClose, onConfirm, warning, confirmationDisabled } = props;
+  const type = warning.warningLevel === 'high' ? 'error' : 'warning';
+
+  const highValueLossData = [
+    {
+      title: i18n.t('Swapping'),
+      value: numberToString(warning.inputUsdValue),
+    },
+    {
+      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),
+    },
+    {
+      title: i18n.t('Price impact'),
+      value: numberToString(
+        warning.priceImpact,
+        PERCENTAGE_CHANGE_MIN_DECIMALS,
+        PERCENTAGE_CHANGE_MAX_DECIMALS
+      ),
+      valueColor: `${type}500`,
+    },
+  ];
+
+  return (
+    <WatermarkedModal
+      id="widget-high-value-loss-warning-modal"
+      footer={
+        <Button
+          id="widget-high-value-loss-warning-modal-confirm-btn"
+          type="primary"
+          size="large"
+          prefix={<WarningIcon />}
+          fullWidth
+          disabled={confirmationDisabled}
+          onClick={onConfirm}>
+          {errorMessages().highValueLossError.confirmMessage}
+        </Button>
+      }
+      open={open}
+      onClose={onClose}
+      container={getContainer()}>
+      <MessageBox
+        type={type}
+        title={errorMessages().highValueLossError.impactTitle}
+        description={errorMessages().highValueLossError.description}
+      />
+
+      <Flex>
+        <Divider size="4" />
+        <Typography size="small" variant="title">
+          {i18n.t('Details')}
+        </Typography>
+        <Flex>
+          {highValueLossData.map((item, index) => {
+            const key = index;
+            return <QuoteErrorsModalItem key={key} {...item} />;
+          })}
+        </Flex>
+      </Flex>
+    </WatermarkedModal>
+  );
+}

package/src/components/QuoteWarningsAndErrors/QuoteErrorsModalItem.tsx

@@ -0,0 +1,40 @@
+import type { ModalContentData } from './QuoteWarningsAndErrors.types';
+
+import { InfoIcon, Tooltip, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../utils/common';
+
+import {
+  Item,
+  ValueContent,
+  ValueTypography,
+} from './QuoteWarningsAndErrors.styles';
+
+const VALUE_LENGTH_THRESHOLD = 35;
+
+export function QuoteErrorsModalItem(props: ModalContentData) {
+  const { title, value, valueColor } = props;
+  const container = getContainer();
+
+  return (
+    <Item>
+      <Typography size="medium" variant="label" className="_title">
+        {title}
+      </Typography>
+      <ValueContent>
+        <ValueTypography
+          size="large"
+          variant="label"
+          color={valueColor || 'foreground'}>
+          {`${valueColor ? '%' : '$'}${value}`}
+        </ValueTypography>
+        {value.length > VALUE_LENGTH_THRESHOLD && (
+          <Tooltip content={value} container={container}>
+            <InfoIcon size={12} color="gray" />
+          </Tooltip>
+        )}
+      </ValueContent>
+    </Item>
+  );
+}

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

@@ -0,0 +1,119 @@
+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';
+
+export type ActionType =
+  | 'show-info'
+  | 'change-settings'
+  | 'change-slippage'
+  | null;
+
+export type AlertInfo = {
+  alertType: 'error' | 'warning';
+  title: string;
+  action: ActionType;
+  actionButtonTitle: string | null;
+};
+
+export function makeAlerts(
+  warning: QuoteWarning | null,
+  error: BridgeLimitError | InsufficientSlippageError | null
+): AlertInfo | null {
+  const alertInfo: AlertInfo = {
+    alertType: 'warning',
+    title: '',
+    action: null,
+    actionButtonTitle: null,
+  };
+
+  if (error) {
+    alertInfo.alertType = 'error';
+    if (error.type === QuoteErrorType.BRIDGE_LIMIT) {
+      alertInfo.title = error.recommendation;
+    }
+
+    if (error.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE) {
+      alertInfo.title = i18n.t({
+        id: 'You need to increase slippage to at least {minRequiredSlippage} for this route.',
+        values: {
+          minRequiredSlippage: error.minRequiredSlippage,
+        },
+      });
+      alertInfo.action = 'change-slippage';
+      alertInfo.actionButtonTitle = i18n.t('Increase');
+    }
+
+    return alertInfo;
+  }
+  if (warning) {
+    switch (warning.type) {
+      case QuoteWarningType.HIGH_VALUE_LOSS: {
+        const warningLevel = getPriceImpactLevel(warning.priceImpact);
+        if (warningLevel === 'high') {
+          alertInfo.alertType = 'error';
+        }
+        alertInfo.action = 'show-info';
+        alertInfo.title = errorMessages().highValueLossError.title;
+        break;
+      }
+      case QuoteWarningType.EXCESSIVE_OUTPUT_AMOUNT_CHANGE: {
+        alertInfo.title = i18n.t({
+          id: 'Output amount changed by {percentageChange}% (${usdValueChange}).',
+          values: {
+            percentageChange: warning.percentageChange,
+            usdValueChange: warning.usdValueChange,
+          },
+        });
+        break;
+      }
+      case QuoteWarningType.UNKNOWN_PRICE: {
+        alertInfo.title = errorMessages().unknownPriceError.title;
+        break;
+      }
+      case QuoteWarningType.INSUFFICIENT_SLIPPAGE: {
+        alertInfo.title = i18n.t({
+          id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+          values: {
+            minRequiredSlippage: warning.minRequiredSlippage,
+          },
+        });
+        alertInfo.action = 'change-slippage';
+        alertInfo.actionButtonTitle = i18n.t('Increase');
+
+        break;
+      }
+      case QuoteWarningType.HIGH_SLIPPAGE: {
+        alertInfo.title = i18n.t('Caution, your slippage is high.');
+        alertInfo.action = 'change-settings';
+        break;
+      }
+
+      default:
+        break;
+    }
+
+    return alertInfo;
+  }
+  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

@@ -0,0 +1,57 @@
+import { Button, darkTheme, styled, Typography } from '@rango-dev/ui';
+
+export const Alerts = styled('div', {
+  width: '100%',
+});
+
+export const Flex = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: '$5',
+  width: '100%',
+});
+
+export const Item = styled('div', {
+  display: 'flex',
+  padding: '$5 0',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  '._title': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
+});
+
+export const ValueContent = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '$2',
+});
+
+export const ValueTypography = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '250px',
+});
+
+export const Action = styled('div', {
+  padding: '$2',
+  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

@@ -0,0 +1,142 @@
+import type { ActionType } from './QuoteWarningsAndErrors.helpers';
+import type { PropTypes } from './QuoteWarningsAndErrors.types';
+
+import { i18n } from '@lingui/core';
+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 {
+  getRequiredSlippage,
+  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,
+    couldChangeSettings,
+    showWarningModal,
+    confirmationDisabled,
+    skipAlerts,
+    refetchQuote,
+    onOpenWarningModal,
+    onCloseWarningModal,
+    onConfirmWarningModal,
+    onChangeSettings,
+    onChangeSlippage,
+  } = props;
+
+  const warningModalHandlers = {
+    confirmationDisabled,
+    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
+  );
+  if (alertInfo && !couldChangeSettings) {
+    alertInfo.action = null;
+  }
+
+  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 && (
+        <>
+          <Divider size={10} />
+          <NoResult
+            skipAlerts={skipAlerts}
+            error={error}
+            fetch={refetchQuote}
+          />
+        </>
+      )}
+
+      {showAlerts && (
+        <Alerts>
+          <Divider size={10} />
+          <Alert
+            id="widget-quote-warning-and-errors-alert"
+            title={alertInfo.title}
+            type={alertInfo.alertType}
+            variant="alarm"
+            {...(alertInfo.action === 'show-info' && {
+              action: (
+                <Action onClick={onOpenWarningModal}>
+                  <InfoIcon size={12} color="gray" />
+                </Action>
+              ),
+            })}
+            {...((alertInfo.action === 'change-settings' ||
+              alertInfo.action === 'change-slippage') && {
+              action: (
+                <Button
+                  id="widget-quote-warning-error-change-settings-btn"
+                  size="xxsmall"
+                  type={alertInfo.alertType}
+                  onClick={() => onclickActionButton(alertInfo.action)}>
+                  {alertInfo.actionButtonTitle || i18n.t('Change')}
+                </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,28 @@
+import type { QuoteError, QuoteWarning } from '../../types';
+
+export interface PropTypes {
+  error: QuoteError | null;
+  warning: QuoteWarning | null;
+  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'>;
+
+export type ModalPropTypes = Pick<PropTypes, ModalPropTypesKeys> & {
+  open: boolean;
+};
+
+export interface ModalContentData {
+  title: string;
+  value: string;
+  valueColor?: string;
+}