@rango-dev/widget-embedded 0.17.1-next.2 → 0.17.1-next.21

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

@@ -0,0 +1,15 @@
+import type { QuoteError, QuoteWarning } from '../../types';
+import type { BestRouteResponse } from 'rango-sdk';
+import type { ReactNode } from 'react';
+
+export type QuoteProps = {
+  type: 'basic' | 'list-item' | 'swap-preview';
+  error: QuoteError | null;
+  warning: QuoteWarning | null;
+  recommended: boolean;
+  tag?: ReactNode;
+  quote: BestRouteResponse;
+  input: { value: string; usdValue: string };
+  output: { value: string; usdValue?: string };
+  expanded?: boolean;
+};

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

@@ -0,0 +1,110 @@
+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 ',
+  '& .cost-and-tag': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '22px',
+  },
+  variants: {
+    rounded: {
+      true: {
+        borderRadius: '$xm',
+      },
+    },
+  },
+  '& .cost': {
+    display: 'flex',
+  },
+  '& .basic-summary': {
+    padding: '$15 $0 14px $0',
+  },
+  '& .output': {
+    padding: '$6 $0 $15 $0',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  '& .output__token-info': {
+    display: 'flex',
+    justifyContent: 'start',
+    alignItems: 'center',
+    paddingBottom: '$5',
+  },
+  '& .quote-summary': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'end',
+  },
+  '& .quote-summary__separator': {
+    height: '$28',
+    marginLeft: '13px',
+    borderLeft: '1px solid $neutral700',
+  },
+  '& .token-amount': {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  '& .token-amount__label': {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'start',
+  },
+  '& .chains': {
+    paddingTop: '$2',
+  },
+  '& .swap-preview': {
+    padding: '$15 $0 $15 $0',
+  },
+  '& .steps': {
+    paddingLeft: '$8',
+  },
+  '& .step__title': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '& .step__content': {
+    display: 'flex',
+    alignItems: 'start',
+  },
+  '& .step__tokens': {
+    paddingTop: '$5',
+    paddingBottom: '$10',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '& .step__token-info': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '& .step__icon-container': {
+    margin: '$0 $2',
+    padding: '$4',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export const StepSeparator = styled('div', {
+  borderLeft: '1px dashed black',
+  minHeight: ' 64px',
+  margin: '0px 11.5px',
+  alignSelf: 'stretch',
+  variants: {
+    hideSeparator: {
+      true: {
+        minHeight: 'unset',
+        height: '0',
+      },
+    },
+  },
+});

package/src/components/Quote/QuoteSkeleton.tsx

@@ -0,0 +1,108 @@
+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 rounded={type !== 'basic'}>
+      <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

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

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

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

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

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

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,74 @@
+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/{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 { 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

@@ -0,0 +1,25 @@
+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;
+}