@rango-dev/widget-embedded 0.18.0 → 0.19.0

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, separatorStyles } 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={separatorStyles()} />
-      <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,2 +0,0 @@
-export { Quote } from './Quote';
-export { QuoteSummary } from './QuoteSummary';

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

@@ -1,42 +0,0 @@
-import { darkTheme, styled } from '@rango-dev/ui';
-
-export const Container = styled('div', {
-  $$color: '$colors$neutral100',
-  [`.${darkTheme} &`]: {
-    $$color: '$colors$neutral300',
-  },
-  backgroundColor: '$$color',
-  borderBottomLeftRadius: '$xm',
-  borderBottomRightRadius: '$xm',
-  padding: '$15 ',
-  variants: {
-    rounded: {
-      true: {
-        borderRadius: '$xm',
-      },
-    },
-  },
-});
-
-export const Chains = styled('div', {
-  paddingTop: '$2',
-});
-
-export const Steps = styled('div', {
-  paddingLeft: '$8',
-});
-
-export const StepSeparator = styled('div', {
-  borderLeft: '1px dashed black',
-  minHeight: ' 0',
-  margin: '0px 11.5px',
-  alignSelf: 'stretch',
-  variants: {
-    hideSeparator: {
-      true: {
-        minHeight: 'unset',
-        height: '0',
-      },
-    },
-  },
-});

package/src/components/QuoteSkeleton/QuoteSkeleton.tsx

@@ -1,30 +0,0 @@
-import type { PropTypes } from './QuoteSkeleton.types';
-
-import { Divider, Skeleton } from '@rango-dev/ui';
-import React from 'react';
-
-import { Chains, Container, Steps } from './QuoteSkeleton.styles';
-import { QuoteSummarySkeleton } from './QuoteSummarySkeleton';
-import { StepSkeleton } from './StepSkeleton';
-
-export function QuoteSkeleton(props: PropTypes) {
-  const { type, expanded, tag = false } = props;
-
-  return (
-    <Container rounded={type !== 'basic'}>
-      <QuoteSummarySkeleton type={type} tag={tag} />
-      <Chains>
-        <Skeleton height={15} variant="rounded" />
-      </Chains>
-
-      {expanded && (
-        <Steps>
-          <Divider size={20} />
-          <StepSkeleton />
-          <StepSkeleton />
-          <StepSkeleton separator={false} />
-        </Steps>
-      )}
-    </Container>
-  );
-}

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

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

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

@@ -1,57 +0,0 @@
-import { styled } from '@rango-dev/ui';
-
-export const CostAndTag = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  height: '22px',
-});
-
-export const Cost = styled('div', {
-  display: 'flex',
-});
-
-export const BasicSummary = styled('div', {
-  padding: '$15 $0 14px $0',
-});
-
-export const Output = styled('div', {
-  padding: '$6 $0 $15 $0',
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-export const OutputTokenInfo = styled('div', {
-  display: 'flex',
-  justifyContent: 'start',
-  alignItems: 'center',
-  paddingBottom: '$5',
-});
-
-export const QuoteSummary = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'end',
-});
-
-export const QuoteSummarySeparator = styled('div', {
-  height: '$28',
-  marginLeft: '13px',
-  borderLeft: '1px solid $neutral700',
-});
-
-export const TokenAmount = styled('div', {
-  width: '65%',
-  display: 'flex',
-  justifyContent: 'start',
-});
-
-export const TokenAmountLabel = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'start',
-  flexGrow: 1,
-  maxWidth: '148px',
-});
-
-export const SwapPreview = styled('div', { padding: '$15 $0 $15 $0' });

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.tsx

@@ -1,76 +0,0 @@
-import type { PropTypes } from './QuoteSummarySkeleton.types';
-
-import { ChainToken, Divider, Skeleton } from '@rango-dev/ui';
-import React from 'react';
-
-import {
-  BasicSummary,
-  Cost,
-  CostAndTag,
-  Output,
-  OutputTokenInfo,
-  QuoteSummary,
-  QuoteSummarySeparator,
-  SwapPreview,
-  TokenAmount,
-  TokenAmountLabel,
-} from './QuoteSummarySkeleton.styles';
-
-export function QuoteSummarySkeleton(props: PropTypes) {
-  const { type, tag = false } = props;
-  const quotePreview = (
-    <QuoteSummary>
-      <TokenAmount>
-        <ChainToken loading size="medium" chainImage="" tokenImage="" />
-        <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>
-  );
-
-  return (
-    <div>
-      <CostAndTag>
-        <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" />
-        </Cost>
-        {tag && <Skeleton height={22} width={100} variant="rounded" />}
-      </CostAndTag>
-      {type === 'basic' && (
-        <BasicSummary>
-          <Skeleton height={15} width={148} variant="rounded" />
-        </BasicSummary>
-      )}
-      {type === 'list-item' && (
-        <Output>
-          <OutputTokenInfo>
-            <ChainToken loading size="medium" chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={4} />
-            <Skeleton height={15} width={150} variant="rounded" />
-          </OutputTokenInfo>
-          <Divider size={4} />
-          <Skeleton height={10} width={184} variant="rounded" />
-        </Output>
-      )}
-      {type === 'swap-preview' && (
-        <>
-          <Divider size={4} />
-          <SwapPreview>
-            {quotePreview}
-            <QuoteSummarySeparator />
-            {quotePreview}
-          </SwapPreview>
-        </>
-      )}
-    </div>
-  );
-}

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

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

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

@@ -1,33 +0,0 @@
-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',
-});
-
-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

@@ -1,44 +0,0 @@
-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>
-          <StepTokenInfo>
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={8} />
-            <Skeleton height={12} variant="rounded" />
-          </StepTokenInfo>
-          <StepIconContainer>
-            <NextIcon color="gray" size={16} />
-          </StepIconContainer>
-          <StepTokenInfo>
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={8} />
-            <Skeleton height={12} variant="rounded" />
-          </StepTokenInfo>
-        </StepTokens>
-      </StepContent>
-    </>
-  );
-}

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

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

package/src/components/QuoteSkeleton/index.ts

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

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,74 +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.action = null;
-      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: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
-        values: {
-          minRequiredSlippage: warning.minRequiredSlippage,
-        },
-      });
-      alertInfo.action = 'change-settings';
-    }
-    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 = 'show-info';
-    }
-
-    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-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 { 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,
-    onChangeSettings,
-  } = props;
-
-  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"
-            {...(alertInfo.action === 'show-info' && {
-              action: (
-                <Action onClick={onOpenWarningModal}>
-                  <InfoIcon size={12} color="gray" />
-                </Action>
-              ),
-            })}
-            {...(alertInfo.action === 'change-settings' && {
-              action: (
-                <Button
-                  size="xxsmall"
-                  type={alertInfo.alertType}
-                  onClick={onChangeSettings}>
-                  {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

@@ -1,25 +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;
-  onChangeSettings: () => 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;
-}