@rango-dev/widget-embedded 0.17.1-next.9 → 0.19.0

package/src/components/Quote/QuoteSkeleton.tsx

@@ -1,108 +0,0 @@
-import type { PropTypes } from './QuoteSkeleton.types';
-
-import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
-import React from 'react';
-
-import { Container, StepSeparator } from './QuoteSkeleton.styles';
-
-function StepSkeleton(props: { separator?: boolean }) {
-  const { separator = true } = props;
-  return (
-    <>
-      <div className="step__title">
-        <Skeleton height={22} width={22} variant="circular" />
-        <Divider direction="horizontal" size={8} />
-        <Skeleton height={15} width={148} variant="rounded" />
-      </div>
-      <div className="step__content">
-        <StepSeparator hideSeparator={!separator} />
-        <div className="step__tokens">
-          <div className="step__token-info">
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={8} />
-            <Skeleton height={12} width={76} variant="rounded" />
-          </div>
-          <div className="step__icon-container">
-            <NextIcon color="gray" size={16} />
-          </div>
-          <div className="step__token-info">
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={8} />
-            <Skeleton height={12} width={76} variant="rounded" />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export function QuoteSkeleton(props: PropTypes) {
-  const { type, expanded, tag = false } = props;
-  const quoteSummary = (
-    <div className="quote-summary">
-      <div className="token-amount">
-        <ChainToken loading size="medium" chainImage="" tokenImage="" />
-        <Divider size={8} direction="horizontal" />
-        <div className="token-amount__label">
-          <Skeleton height={10} width={60} variant="rounded" />
-          <Divider size={4} />
-          <Skeleton height={15} width={148} variant="rounded" />
-        </div>
-      </div>
-      <Skeleton height={12} width={64} variant="rounded" />
-    </div>
-  );
-
-  return (
-    <Container>
-      <div className="cost-and-tag">
-        <div className="cost">
-          <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" />
-        </div>
-        {tag && <Skeleton height={22} width={100} variant="rounded" />}
-      </div>
-      {type === 'basic' && (
-        <div className="basic-summary">
-          <Skeleton height={15} width={148} variant="rounded" />
-        </div>
-      )}
-      {type === 'list-item' && (
-        <div className="output">
-          <div className="output__token-info">
-            <ChainToken loading size="medium" chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={4} />
-            <Skeleton height={15} width={150} variant="rounded" />
-          </div>
-          <Divider size={4} />
-          <Skeleton height={10} width={184} variant="rounded" />
-        </div>
-      )}
-      {type === 'swap-preview' && (
-        <>
-          <Divider size={4} />
-          <div className="swap-preview">
-            {quoteSummary}
-            <div className="quote-summary__separator" />
-            {quoteSummary}
-          </div>
-        </>
-      )}
-      <div className="chains">
-        <Skeleton height={15} width={321} variant="rounded" />
-      </div>
-
-      {expanded && (
-        <div className="steps">
-          <Divider size={20} />
-          <StepSkeleton />
-          <StepSkeleton />
-          <StepSkeleton separator={false} />
-        </div>
-      )}
-    </Container>
-  );
-}

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

@@ -1,5 +0,0 @@
-export type PropTypes = {
-  type: 'basic' | 'list-item' | 'swap-preview';
-  expanded?: boolean;
-  tag?: boolean;
-};

package/src/components/Quote/QuoteSummary.styles.ts

@@ -1,15 +0,0 @@
-import { styled } from '@rango-dev/ui';
-
-export const Container = styled('div', {
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  '& .separator': {
-    height: '14px',
-    marginLeft: '14px',
-    position: 'absolute',
-    borderLeft: '1px solid $foreground',
-    top: '42%',
-  },
-});

package/src/components/Quote/QuoteSummary.tsx

@@ -1,46 +0,0 @@
-import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
-
-import { TokenAmount } from '@rango-dev/ui';
-import React from 'react';
-
-import { Container } from './QuoteSummary.styles';
-
-type PropTypes = {
-  from: Step['from'];
-  to: Step['to'];
-  percentageChange?: string | null;
-  warningLevel: PriceImpactWarningLevel;
-};
-
-export function QuoteSummary(props: PropTypes) {
-  const { from, to, percentageChange, warningLevel } = props;
-  return (
-    <Container>
-      <TokenAmount
-        direction="horizontal"
-        label="Swap input"
-        type="input"
-        price={{ value: from.price.value, usdValue: from.price.usdValue }}
-        token={{
-          displayName: from.token.displayName,
-          image: from.token.image,
-        }}
-        chain={{ image: from.chain.image }}
-      />
-      <div className="separator" />
-      <TokenAmount
-        direction="horizontal"
-        label="Estimated output"
-        type="output"
-        price={{ value: to.price.value, usdValue: to.price.usdValue }}
-        token={{
-          displayName: to.token.displayName,
-          image: to.token.image,
-        }}
-        chain={{ image: to.chain.image }}
-        percentageChange={percentageChange}
-        warningLevel={warningLevel}
-      />
-    </Container>
-  );
-}

package/src/components/Quote/index.ts

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

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -1,107 +0,0 @@
-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/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts

@@ -1,67 +0,0 @@
-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/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -1,103 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

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

package/src/containers/QuoteInfo/QuoteInfo.styles.ts

@@ -1,15 +0,0 @@
-import { styled } from '@rango-dev/ui';
-
-export const QuoteContainer = styled('div', {
-  width: '100%',
-  paddingTop: '$2',
-});
-
-export const FooterStepAlarm = styled('div', {
-  paddingBottom: '$15',
-});
-
-export const FooterAlert = styled('div', {
-  width: '100%',
-  display: 'flex',
-});