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

package/src/components/Quote/QuoteCostDetails.tsx

@@ -0,0 +1,235 @@
+import type { QuoteCostDetailsProps } from './Quote.types';
+import type { NameOfFees } from '../../constants/quote';
+import type BigNumber from 'bignumber.js';
+
+import { i18n } from '@lingui/core';
+import {
+  ChevronDownIcon,
+  CloseIcon,
+  Divider,
+  IconButton,
+  NumericTooltip,
+  QuoteCost,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
+
+import { getFeeLabel } from '../../constants/quote';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { getContainer, getExpanded } from '../../utils/common';
+import { numberToString } from '../../utils/numbers';
+import { getFeesGroup, getTotalFeesInUsd, getUsdFee } from '../../utils/swap';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
+import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
+
+import {
+  FeeSection,
+  Line,
+  ModalContainer,
+  ModalHeader,
+  trigger,
+} from './QuoteCostDetails.styles';
+
+const NonPayableFee = (props: { fee: BigNumber; label: string }) => {
+  return !props.fee.isZero() ? (
+    <FeeSection>
+      <Typography variant="label" size="medium" color="neutral600">
+        {props.label}
+      </Typography>
+      <Typography variant="label" size="medium">
+        $
+        {numberToString(
+          props.fee,
+          USD_VALUE_MIN_DECIMALS,
+          USD_VALUE_MAX_DECIMALS
+        )}
+      </Typography>
+    </FeeSection>
+  ) : null;
+};
+
+export function QuoteCostDetails(props: QuoteCostDetailsProps) {
+  const [open, setOpen] = useState<boolean>(false);
+  const [openCollapse, setOpenCollapse] = useState<boolean>(false);
+  const {
+    steps,
+    quote,
+    fee,
+    time,
+    feeWarning,
+    timeWarning,
+    showModalFee,
+    fullExpandedMode = false,
+  } = props;
+  const swaps = quote?.swaps ?? [];
+  const container = fullExpandedMode ? getExpanded() : getContainer();
+
+  const feesGroup = getFeesGroup(swaps);
+  const roundedFee = numberToString(
+    fee,
+    GAS_FEE_MIN_DECIMALS,
+    GAS_FEE_MAX_DECIMALS
+  );
+
+  return (
+    <>
+      <QuoteCost
+        onClickFee={
+          showModalFee
+            ? (e) => {
+                e.stopPropagation();
+                setOpen(!open);
+              }
+            : undefined
+        }
+        fee={roundedFee}
+        feeWarning={feeWarning}
+        timeWarning={timeWarning}
+        time={time}
+        steps={steps}
+        tooltipGas={showModalFee ? i18n.t('View more info') : undefined}
+        tooltipContainer={container}
+      />
+
+      <WatermarkedModal
+        id="widget-quote-cost-explanation-modal"
+        container={container}
+        open={open}
+        anchor={fullExpandedMode ? 'center' : 'bottom'}
+        styles={{
+          container: {
+            maxWidth: fullExpandedMode ? '484px' : 'unset',
+          },
+        }}
+        header={
+          <ModalHeader
+            style={{
+              textAlign: fullExpandedMode ? 'left' : 'center',
+            }}>
+            <Typography variant="title" size="medium">
+              {i18n.t('Gas & Fee Explanation')}
+            </Typography>
+
+            <IconButton
+              id="widget-quote-cost-details-modal-close-icon-btn"
+              onClick={() => setOpen(false)}
+              variant="ghost">
+              <CloseIcon color="gray" size={14} />
+            </IconButton>
+          </ModalHeader>
+        }
+        onClose={() => {
+          setOpen(false);
+        }}>
+        <ModalContainer>
+          <Typography variant="title" size="small">
+            {i18n.t('Details')}
+          </Typography>
+          <Divider size={10} />
+          {Object.entries(feesGroup.payable).flatMap(
+            ([payableFeesKey, feeArray]) =>
+              feeArray.map((fee, index) => {
+                const key = `payable-fee-${index}`;
+                const usdValue = getUsdFee(fee);
+                return (
+                  <FeeSection key={key}>
+                    <Typography
+                      variant="label"
+                      size="medium"
+                      color="neutral600">
+                      {getFeeLabel(payableFeesKey as NameOfFees, i18n.t)}
+                    </Typography>
+                    <NumericTooltip content={fee.amount} container={container}>
+                      <Typography variant="label" size="medium">
+                        {numberToString(
+                          fee.amount,
+                          GAS_FEE_MIN_DECIMALS,
+                          GAS_FEE_MAX_DECIMALS
+                        )}
+                        {fee.asset.symbol} ($
+                        {numberToString(
+                          usdValue,
+                          USD_VALUE_MIN_DECIMALS,
+                          USD_VALUE_MAX_DECIMALS
+                        )}
+                        )
+                      </Typography>
+                    </NumericTooltip>
+                  </FeeSection>
+                );
+              })
+          )}
+
+          <FeeSection className="total_payable_fee">
+            <Typography variant="label" size="medium">
+              {i18n.t('Total Payable Fee')}
+            </Typography>
+            <Typography variant="label" size="medium">
+              $
+              {numberToString(
+                fee,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              )}
+            </Typography>
+          </FeeSection>
+          <Line />
+          {!!Object.keys(feesGroup.nonePayable).length && (
+            <CustomCollapsible
+              triggerAnchor="bottom"
+              onClickTrigger={() => setOpenCollapse((prev) => !prev)}
+              trigger={
+                <div className={trigger()}>
+                  <Typography size="small" variant="body" color="neutral700">
+                    {openCollapse
+                      ? i18n.t('Hide non-payable fees')
+                      : i18n.t('Show non-payable fees')}
+                  </Typography>
+                  <Divider size={4} direction="horizontal" />
+                  <ExpandedIcon orientation={openCollapse ? 'up' : 'down'}>
+                    <ChevronDownIcon size={12} color="gray" />
+                  </ExpandedIcon>
+                </div>
+              }
+              open={openCollapse}>
+              <Typography size="small" variant="title">
+                {i18n.t('Description')}
+              </Typography>
+              <Divider size={4} />
+              <Typography size="small" variant="body" color="neutral700">
+                {i18n.t(`The following fees are considered in the transaction output and
+                you won’t need to pay extra gas for them.`)}
+              </Typography>
+              <Divider size={10} />
+              {Object.entries(feesGroup.nonePayable).map(
+                ([nonPayableFeesKey, fees], index) => {
+                  const totalFeeInUsd = getTotalFeesInUsd(fees);
+                  const label = getFeeLabel(
+                    nonPayableFeesKey as NameOfFees,
+                    i18n.t
+                  );
+                  const key = `non-payable-fee-${index}`;
+                  return (
+                    <NonPayableFee
+                      key={key}
+                      fee={totalFeeInUsd}
+                      label={label}
+                    />
+                  );
+                }
+              )}
+
+              <Line />
+            </CustomCollapsible>
+          )}
+        </ModalContainer>
+      </WatermarkedModal>
+    </>
+  );
+}

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

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

package/src/components/Quote/QuoteSummary.tsx

@@ -0,0 +1,64 @@
+import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
+
+import { i18n } from '@lingui/core';
+import { TokenAmount } from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../utils/common';
+
+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={i18n.t('Swap input')}
+        id="widget-quote-summary-swap-input"
+        type="input"
+        tooltipContainer={getContainer()}
+        price={{
+          value: from.price.value,
+          usdValue: from.price.usdValue,
+          realValue: from.price.realValue,
+          realUsdValue: from.price.realUsdValue,
+        }}
+        token={{
+          displayName: from.token.displayName,
+          image: from.token.image,
+        }}
+        chain={{ image: from.chain.image }}
+      />
+      <div className={separatorStyles()} />
+      <TokenAmount
+        id="widget-quote-summary-estimated-input"
+        direction="horizontal"
+        tooltipContainer={getContainer()}
+        label={i18n.t('Estimated output')}
+        type="output"
+        price={{
+          value: to.price.value,
+          usdValue: to.price.usdValue,
+          realValue: to.price.realValue,
+          realUsdValue: to.price.realUsdValue,
+        }}
+        token={{
+          displayName: to.token.displayName,
+          image: to.token.image,
+        }}
+        chain={{ image: to.chain.image }}
+        percentageChange={percentageChange}
+        warningLevel={warningLevel}
+      />
+    </Container>
+  );
+}

package/src/components/Quote/QuoteTrigger.tsx

@@ -0,0 +1,216 @@
+import type { QuoteTriggerImagesProps, QuoteTriggerProps } from './Quote.types';
+
+import { i18n } from '@lingui/core';
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  Divider,
+  Image,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import useScreenDetect from '../../hooks/useScreenDetect';
+import { getContainer } from '../../utils/common';
+import { getUniqueBlockchains } from '../../utils/quote';
+
+import {
+  IconContainer,
+  ImageContainer,
+  MoreStep,
+  rowStyles,
+  Trigger,
+} from './Quote.styles';
+
+const MAX_STEPS = 4;
+const MAX_BLOCKCHAINS = 6;
+
+const ImageComponent = (props: QuoteTriggerImagesProps) => {
+  const { content, src, className, open, state, container } = props;
+  const tooltipContainer = container || getContainer();
+  return (
+    <Tooltip
+      container={tooltipContainer}
+      side="bottom"
+      sideOffset={4}
+      open={open}
+      content={content}>
+      <ImageContainer className={className} state={state}>
+        <Image src={src} size={16} />
+      </ImageContainer>
+    </Tooltip>
+  );
+};
+
+export function QuoteTrigger(props: QuoteTriggerProps) {
+  const { quoteRef, selected, setExpanded, steps, expanded, type, container } =
+    props;
+  const tooltipContainer = container || getContainer();
+  const numberOfSteps = steps.length;
+  const blockchains = getUniqueBlockchains(steps);
+  const { isTablet, isMobile } = useScreenDetect();
+
+  return (
+    <Trigger
+      className="widget-quote-trigger-btn"
+      listItem={type === 'list-item'}
+      ref={(ref) => (quoteRef.current = ref)}
+      selected={selected}
+      onClick={(e) => {
+        e.stopPropagation();
+        setExpanded((prevState) => !prevState);
+      }}>
+      <div className={rowStyles()}>
+        <Typography variant="body" size="xsmall">
+          {i18n.t('Via:')}
+        </Typography>
+        <Divider direction="horizontal" size={4} />
+        {steps.map((step, index) => {
+          const key = `item-${index}`;
+          const arrow = (
+            <IconContainer>
+              <ChevronRightIcon size={12} color="black" />
+            </IconContainer>
+          );
+
+          return isMobile || isTablet ? (
+            <React.Fragment key={key}>
+              <ImageComponent
+                content={step.swapper.displayName}
+                src={step.swapper.image ?? ''}
+                state={step.state}
+                container={container}
+              />
+              {index !== numberOfSteps - 1 && <>{arrow}</>}
+            </React.Fragment>
+          ) : (
+            <React.Fragment key={key}>
+              {numberOfSteps <= MAX_STEPS ||
+              (numberOfSteps > MAX_STEPS && index < MAX_STEPS - 1) ? (
+                <>
+                  <ImageComponent
+                    content={step.swapper.displayName}
+                    src={step.swapper.image ?? ''}
+                    state={step.state}
+                    container={container}
+                  />
+                  {index !== numberOfSteps - 1 && <>{arrow}</>}
+                </>
+              ) : (
+                index === MAX_STEPS - 1 && (
+                  <Tooltip
+                    container={tooltipContainer}
+                    side="bottom"
+                    align="end"
+                    sideOffset={4}
+                    content={
+                      <div className={rowStyles()}>
+                        {arrow}
+                        {steps.map((step, i) => {
+                          const key = `image-${i}`;
+                          return (
+                            i >= index && (
+                              <React.Fragment key={key}>
+                                <ImageComponent
+                                  content={step.swapper.displayName}
+                                  src={step.swapper.image ?? ''}
+                                  state={step.state}
+                                  open={false}
+                                />
+                                {i !== numberOfSteps - 1 && <>{arrow}</>}
+                              </React.Fragment>
+                            )
+                          );
+                        })}
+                      </div>
+                    }>
+                    <MoreStep
+                      state={
+                        steps.find(
+                          (step, i) =>
+                            i >= index &&
+                            (step.state === 'error' || step.state === 'warning')
+                        )?.state
+                      }>
+                      <Typography size="xsmall" variant="body">
+                        +{numberOfSteps - index}
+                      </Typography>
+                    </MoreStep>
+                  </Tooltip>
+                )
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+      <div className={rowStyles()}>
+        <div className="blockchains_section">
+          <div className={rowStyles()}>
+            <Typography variant="body" size="xsmall">
+              {i18n.t('Chains:')}
+            </Typography>
+            <Divider direction="horizontal" size={4} />
+            {blockchains.map((blockchain, index) => (
+              <React.Fragment key={blockchain.displayName}>
+                {blockchains.length <= MAX_BLOCKCHAINS ||
+                (blockchains.length > MAX_BLOCKCHAINS &&
+                  index < MAX_BLOCKCHAINS - 1) ? (
+                  <Tooltip
+                    container={tooltipContainer}
+                    side="bottom"
+                    content={blockchain.displayName}
+                    sideOffset={4}>
+                    <ImageComponent
+                      content={''}
+                      src={blockchain.image ?? ''}
+                      open={false}
+                      className={index !== 0 ? 'blockchainImage' : ''}
+                    />
+                  </Tooltip>
+                ) : (
+                  index === MAX_BLOCKCHAINS - 1 && (
+                    <Tooltip
+                      container={tooltipContainer}
+                      side="bottom"
+                      align="end"
+                      sideOffset={4}
+                      content={
+                        <div className={rowStyles()}>
+                          {blockchains.map(
+                            (chain, i) =>
+                              i >= index && (
+                                <ImageComponent
+                                  key={chain.displayName}
+                                  content={''}
+                                  src={chain.image ?? ''}
+                                  open={false}
+                                  className={i > index ? 'blockchainImage' : ''}
+                                  container={container}
+                                />
+                              )
+                          )}
+                        </div>
+                      }>
+                      <MoreStep className={'blockchainImage'}>
+                        <Typography size="xsmall" variant="body">
+                          +{blockchains.length - index}
+                        </Typography>
+                      </MoreStep>
+                    </Tooltip>
+                  )
+                )}
+              </React.Fragment>
+            ))}
+
+            <Divider direction="horizontal" size={32} />
+          </div>
+        </div>
+
+        <IconContainer orientation={expanded ? 'up' : 'down'}>
+          <ChevronDownIcon size={12} color="black" />
+        </IconContainer>
+      </div>
+    </Trigger>
+  );
+}

package/src/components/Quote/index.ts

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

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

@@ -0,0 +1,50 @@
+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',
+      },
+    },
+    expanded: {
+      true: {
+        paddingBottom: '3px',
+      },
+      false: {
+        paddingBottom: '$12',
+      },
+    },
+  },
+});
+
+export const Chains = styled('div', {
+  paddingTop: '$2',
+});
+
+export const Steps = styled('div', {
+  paddingLeft: '$8',
+});
+
+export const StepSeparator = styled('div', {
+  borderLeft: '1px dashed $foreground',
+  minHeight: ' 0',
+  margin: '0px 11.5px',
+  alignSelf: 'stretch',
+  variants: {
+    hideSeparator: {
+      true: {
+        minHeight: 'unset',
+        height: '0',
+      },
+    },
+  },
+});

package/src/components/QuoteSkeleton/QuoteSkeleton.tsx

@@ -0,0 +1,30 @@
+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, tagHidden = false } = props;
+
+  return (
+    <Container expanded={expanded} rounded={type !== 'basic'}>
+      <QuoteSummarySkeleton type={type} tagHidden={tagHidden} />
+      <Chains>
+        <Skeleton height={15} variant="rounded" />
+      </Chains>
+
+      {expanded && (
+        <Steps>
+          <Divider size={24} />
+          <StepSkeleton />
+          <StepSkeleton />
+          <StepSkeleton separator={false} />
+        </Steps>
+      )}
+    </Container>
+  );
+}

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

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

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

@@ -0,0 +1,55 @@
+import { css, styled } from '@rango-dev/ui';
+
+export const FlexContent = styled('div', {
+  display: 'flex',
+});
+
+export const BasicSummary = styled('div', {
+  padding: '$10 $0 $20',
+});
+
+export const Output = styled('div', {
+  padding: '14px $0 $20 $0',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const OutputTokenInfo = styled('div', {
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center',
+});
+
+export const QuoteSummary = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'end',
+});
+
+export const QuoteSummarySeparator = styled('div', {
+  height: '$24',
+  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' });
+
+export const RowStyle = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});