@rango-dev/ui 0.0.0-experimental-936229e8-20251208

package/src/components/FullExpandedQuote/FullExpandedQuote.styles.ts

@@ -0,0 +1,315 @@
+import { css, darkTheme, styled } from '../../theme.js';
+import { PriceImpact } from '../PriceImpact/index.js';
+import { Typography } from '../Typography/Typography.js';
+
+export const FlexCenter = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+export const RouteContainer = styled('div', {
+  border: '1px solid',
+  padding: '$20 $15',
+  backgroundColor: '$neutral200',
+  borderRadius: '$xm',
+  cursor: 'pointer',
+  gap: '$20',
+  display: 'flex',
+  flexDirection: 'column',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral500',
+  },
+  '&:hover': {
+    backgroundColor: '$neutral300',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral400',
+    },
+  },
+  variants: {
+    selected: {
+      true: {
+        $$color: '$colors$secondary500',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary250',
+        },
+        borderColor: '$$color',
+      },
+      false: {
+        borderColor: 'transparent',
+      },
+    },
+    hovered: {
+      true: {
+        '&:hover': {
+          backgroundColor: '$neutral200',
+          [`.${darkTheme} &`]: {
+            backgroundColor: '$neutral500',
+          },
+        },
+      },
+    },
+  },
+});
+
+export const RouteHeader = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  variants: {
+    loading: {
+      true: {
+        padding: '$2',
+      },
+    },
+  },
+});
+
+export const TagsContainer = styled('div', {
+  display: 'flex',
+  gap: '$5',
+});
+
+export const Steps = styled('div', {
+  display: 'flex',
+  height: '85px',
+});
+
+export const StepItem = styled('div', {
+  padding: '$10 $5 $5 0',
+  height: '100px',
+  display: 'flex',
+  width: '100%',
+  variants: {
+    isHovered: {
+      true: {
+        backgroundColor: '$neutral400',
+        boxShadow: '4px 4px 10px 0 #0000001A',
+        borderRadius: '$xs',
+        zIndex: 10,
+      },
+    },
+  },
+});
+
+export const StepItemContainer = styled('div', {
+  width: '100%',
+  display: 'flex',
+  height: '100%',
+});
+
+export const TokenSectionContainer = styled(FlexCenter, {
+  minWidth: '42px',
+  position: 'relative',
+  variants: {
+    isInternalSwap: {
+      true: {
+        flexDirection: 'column',
+        gap: '$5',
+
+        '& .token-info': {
+          position: 'static',
+          flexDirection: 'column-reverse',
+        },
+      },
+    },
+  },
+});
+
+export const SwapperSection = styled('div', {
+  width: '100%',
+  height: '50%',
+  borderBottom: '1px dashed',
+  borderColor: '$secondary200',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-end',
+  gap: '2px',
+  [`.${darkTheme} &`]: {
+    borderColor: '$secondary550',
+  },
+});
+
+export const TokenInfo = styled(FlexCenter, {
+  position: 'absolute',
+  flexDirection: 'column',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  '& .internal_swap_amount_typography, & .token_label_typography': {
+    color: '$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$neutral900',
+    },
+  },
+});
+
+export const SwapperContainer = styled(FlexCenter, {
+  flexDirection: 'column',
+  '& ._typography': {
+    color: '$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$neutral900',
+    },
+  },
+});
+
+export const SwapperContent = styled(FlexCenter, {
+  flexDirection: 'column',
+  width: 'fit-content',
+});
+
+export const SwapperImagesContainer = styled(FlexCenter, {
+  position: 'relative',
+});
+
+export const SwapperImage = styled(FlexCenter, {
+  borderRadius: '$lg',
+  position: 'relative',
+  width: '$24',
+  height: '$24',
+  border: '1px solid transparent',
+  variants: {
+    state: {
+      warning: {
+        borderColor: '$warning500',
+      },
+      error: {
+        borderColor: '$error500',
+      },
+    },
+  },
+});
+
+export const IconHighlight = styled(FlexCenter, {
+  borderRadius: '$lg',
+  position: 'absolute',
+  width: '$10',
+  height: '$10',
+  bottom: -3,
+  right: -3,
+  variants: {
+    type: {
+      warning: {
+        $$color: '$colors$warning300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$warning600',
+        },
+        backgroundColor: '$$color',
+      },
+      error: {
+        $$color: '$colors$error300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$error600',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+});
+
+export const OutputSection = styled(FlexCenter, {
+  flexDirection: 'column',
+  paddingLeft: '$8',
+});
+
+export const VerticalLine = styled('div', {
+  display: 'flex',
+  width: 'calc(50% + 1px)',
+  borderRight: '1px dashed',
+  height: '$10',
+  borderColor: '$secondary200',
+  [`.${darkTheme} &`]: {
+    borderColor: '$secondary550',
+  },
+});
+
+export const StyledPriceImpact = styled(PriceImpact, {
+  justifyContent: 'center',
+  gap: '$4',
+  maxWidth: 150,
+});
+
+export const lastStepStyle = css({
+  position: 'relative',
+  '&::after': {
+    content: '',
+    position: 'absolute',
+    bottom: '-6px',
+    right: '-3px',
+    transform: 'translate(-50%, -50%) rotate(45deg)',
+    width: '$6',
+    height: '$6',
+    borderTop: '2px solid',
+    borderRight: '2px solid',
+    borderColor: '$secondary200',
+    [`.${darkTheme} &`]: {
+      borderColor: '$secondary550',
+    },
+  },
+});
+
+// Styles for the skeleton
+
+export const Separator = styled('div', {
+  height: '$12',
+  marginLeft: '$10',
+  marginRight: '$10',
+  borderLeft: '1px solid $neutral700',
+});
+
+export const OutputLoading = styled(FlexCenter, {
+  padding: '$10 $2 0',
+  height: '85px',
+  gap: '$10',
+  flexDirection: 'column',
+});
+
+export const SkeletonItemLeftContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  paddingTop: '$25',
+});
+
+// Styles for the tooltip
+
+export const TooltipContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+  flexDirection: 'column',
+  gap: '$10',
+});
+
+export const TooltipHeader = styled('div', {
+  width: '100%',
+  variants: {
+    hasFooter: {
+      true: {
+        paddingBottom: '$5',
+        borderBottom: '1px solid',
+        borderColor: '$neutral500',
+        [`.${darkTheme} &`]: {
+          borderColor: '$neutral800',
+        },
+      },
+    },
+  },
+});
+
+export const TooltipFooter = styled(FlexCenter, {
+  width: '100%',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+  gap: '$10',
+});
+
+export const Icon = styled('div', {
+  paddingBottom: '$20',
+});
+
+export const OutputPriceValue = styled(Typography, {
+  maxWidth: '65px',
+});
+
+export const AmountText = styled(Typography, {
+  maxWidth: '34px',
+});

package/src/components/FullExpandedQuote/FullExpandedQuote.tsx

@@ -0,0 +1,288 @@
+import type { DataLoadedProps, PropTypes } from './FullExpandedQuote.types.js';
+import type { Tag } from 'rango-types/lib/api/main';
+
+import { i18n } from '@lingui/core';
+import React, { useState } from 'react';
+
+import { ErrorIcon, InfoIcon, WarningIcon } from '../../icons/index.js';
+import { ChainToken } from '../ChainToken/index.js';
+import { Image } from '../common/index.js';
+import { Divider } from '../Divider/index.js';
+import { QuoteTag } from '../QuoteTag/index.js';
+import { textTruncate } from '../TokenAmount/TokenAmount.styles.js';
+import { NumericTooltip, Tooltip } from '../Tooltip/index.js';
+import { Typography } from '../Typography/index.js';
+
+import {
+  getTagLabel,
+  ITEM_SKELETON_COUNT,
+  shortenAmount,
+  shortenDisplayName,
+  TOOLTIP_SIDE_OFFSET,
+} from './FullExpandedQuote.helpers.js';
+import {
+  SkeletonHeader,
+  SkeletonItemLeft,
+  SkeletonItemRight,
+  SkeletonOutput,
+} from './FullExpandedQuote.Skeletons.js';
+import {
+  IconHighlight,
+  lastStepStyle,
+  OutputPriceValue,
+  OutputSection,
+  RouteContainer,
+  RouteHeader,
+  StepItem,
+  StepItemContainer,
+  Steps,
+  StyledPriceImpact,
+  SwapperContainer,
+  SwapperContent,
+  SwapperImage,
+  SwapperImagesContainer,
+  SwapperSection,
+  TagsContainer,
+  VerticalLine,
+} from './FullExpandedQuote.styles.js';
+import { TokenSection } from './FullExpandedQuote.TokenSection.js';
+import { TooltipContent } from './FullExpandedQuote.Tooltip.js';
+
+const MAX_OUTPUT_AMOUNT_LENGTH_FOR_INFO_ICON = 7;
+export function FullExpandedQuote(props: PropTypes) {
+  const {
+    loading,
+    percentageChange,
+    warningLevel,
+    tooltipContainer,
+    onClick,
+    selected = false,
+    id,
+  } = props;
+  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
+
+  const steps: DataLoadedProps['steps'] = loading
+    ? Array(ITEM_SKELETON_COUNT).fill(undefined)
+    : props.steps;
+  const numberOfSteps = steps.length;
+
+  return (
+    <RouteContainer
+      id={id}
+      selected={selected}
+      onClick={onClick}
+      hovered={hoveredItemIndex !== null}>
+      <RouteHeader loading={loading}>
+        {loading ? (
+          <SkeletonHeader />
+        ) : (
+          <>
+            {props.quoteCost}
+            <TagsContainer>
+              {props.tags.map((tag) => (
+                <QuoteTag
+                  key={tag.label}
+                  label={getTagLabel(tag.value as Tag, i18n.t)}
+                  value={tag.value}
+                />
+              ))}
+            </TagsContainer>
+          </>
+        )}
+      </RouteHeader>
+      <Steps>
+        {steps.map((step, index) => {
+          const key = `item-${index}`;
+          const isStepHovered = hoveredItemIndex === index;
+          const isLastItem = index === numberOfSteps - 1;
+          const isFirstItem = index === 0;
+          return (
+            <StepItem
+              key={key}
+              isHovered={isStepHovered}
+              style={{
+                marginLeft: !isFirstItem && !loading ? '-47px' : '0px',
+              }}>
+              <Tooltip
+                container={tooltipContainer}
+                side="bottom"
+                align={isLastItem && !isFirstItem ? 'end' : 'start'}
+                sideOffset={TOOLTIP_SIDE_OFFSET}
+                open={!loading && isStepHovered}
+                styles={{
+                  root: {
+                    width: '100%',
+                  },
+                  content: {
+                    borderRadius: '5px',
+                    padding: '10px',
+                    backgroundColor: '$neutral400 !important',
+                  },
+                }}
+                content={
+                  !loading ? (
+                    <TooltipContent
+                      internalSwaps={step.internalSwaps || []}
+                      time={step.time || ''}
+                      fee={step.fee || ''}
+                      alerts={step.alerts}
+                    />
+                  ) : null
+                }>
+                <StepItemContainer>
+                  {loading ? (
+                    <SkeletonItemLeft />
+                  ) : (
+                    <TokenSection
+                      style={{
+                        opacity: hoveredItemIndex === index - 1 ? 0 : 1,
+                      }}
+                      chainImage={step.from.chain.image}
+                      tokenImage={step.from.token.image}
+                      amount={
+                        isStepHovered
+                          ? shortenAmount(step.from.price.value)
+                          : step.from.price.value
+                      }
+                      name={
+                        isStepHovered
+                          ? shortenDisplayName(step.from.token.displayName)
+                          : step.from.token.displayName
+                      }
+                      tooltipProps={{
+                        content: step.from.price.realValue,
+                        open: !step.from.price.realValue ? false : undefined,
+                        container: tooltipContainer,
+                      }}
+                    />
+                  )}
+                  <SwapperSection className={isLastItem ? lastStepStyle() : ''}>
+                    {loading ? (
+                      <SkeletonItemRight />
+                    ) : (
+                      <>
+                        <SwapperContainer>
+                          <SwapperContent
+                            onMouseEnter={() => setHoveredItemIndex(index)}
+                            onMouseLeave={() => setHoveredItemIndex(null)}>
+                            <SwapperImagesContainer>
+                              {!step.internalSwaps ? (
+                                <SwapperImage state={step.state}>
+                                  <Image
+                                    size={22}
+                                    type="circular"
+                                    src={step.swapper.image}
+                                  />
+                                </SwapperImage>
+                              ) : (
+                                step.internalSwaps.map(
+                                  (internalswap, iIndex) => {
+                                    const key = `${iIndex}-swapper-image`;
+                                    return (
+                                      <SwapperImage
+                                        state={step.state}
+                                        key={key}
+                                        style={{
+                                          marginLeft:
+                                            iIndex !== 0 ? '-10px' : '0px',
+                                        }}>
+                                        <Image
+                                          size={22}
+                                          type="circular"
+                                          src={internalswap.swapper.image}
+                                        />
+                                      </SwapperImage>
+                                    );
+                                  }
+                                )
+                              )}
+                              {step.state && (
+                                <IconHighlight type={step.state}>
+                                  {step.state === 'error' ? (
+                                    <ErrorIcon size={8} color="error" />
+                                  ) : (
+                                    <WarningIcon size={8} color="warning" />
+                                  )}
+                                </IconHighlight>
+                              )}
+                            </SwapperImagesContainer>
+
+                            <Divider size={2} />
+                            <Typography
+                              size="xsmall"
+                              variant="body"
+                              align="center">
+                              {step.swapper.displayName}
+                            </Typography>
+                          </SwapperContent>
+                        </SwapperContainer>
+
+                        <VerticalLine />
+                      </>
+                    )}
+                  </SwapperSection>
+                  {!loading && !isLastItem && (
+                    <TokenSection
+                      style={{
+                        opacity: isStepHovered ? 1 : 0,
+                      }}
+                      chainImage={step.to.chain.image}
+                      tokenImage={step.to.token.image}
+                      amount={shortenAmount(step.to.price.value)}
+                      name={shortenDisplayName(step.to.token.displayName)}
+                    />
+                  )}
+                  {!loading && isLastItem && (
+                    <OutputSection>
+                      <ChainToken
+                        chainImage={step.to.chain.image}
+                        tokenImage={step.to.token.image}
+                        size="medium"
+                      />
+                      <Divider size={4} />
+                      <div>
+                        <NumericTooltip
+                          content={props.outputPrice.realValue}
+                          container={tooltipContainer}
+                          open={
+                            !props.outputPrice.realValue ? false : undefined
+                          }>
+                          <OutputPriceValue
+                            className={textTruncate()}
+                            size="xmedium"
+                            variant="title">
+                            {props.outputPrice.value}
+                          </OutputPriceValue>
+                          {props.outputPrice.value.length >
+                            MAX_OUTPUT_AMOUNT_LENGTH_FOR_INFO_ICON && (
+                            <InfoIcon color="gray" size={12} />
+                          )}
+                          <Divider size={4} direction="horizontal" />
+                          <Typography size="xmedium" variant="title">
+                            {step.to.token.displayName}
+                          </Typography>
+                        </NumericTooltip>
+                      </div>
+                      <StyledPriceImpact
+                        size="small"
+                        warningLevel={warningLevel}
+                        outputUsdValue={props.outputPrice.usdValue}
+                        realOutputUsdValue={props.outputPrice.realUsdValue}
+                        percentageChange={percentageChange}
+                        tooltipProps={{
+                          container: tooltipContainer,
+                        }}
+                      />
+                    </OutputSection>
+                  )}
+                </StepItemContainer>
+              </Tooltip>
+            </StepItem>
+          );
+        })}
+
+        {loading && <SkeletonOutput />}
+      </Steps>
+    </RouteContainer>
+  );
+}

package/src/components/FullExpandedQuote/FullExpandedQuote.types.ts

@@ -0,0 +1,58 @@
+import type { SwapInputPropTypes } from '../../containers/SwapInput/SwapInput.types.js';
+import type { ChainTokenPropTypes } from '../ChainToken/index.js';
+import type { PriceImpactPropTypes } from '../PriceImpact/PriceImpact.types.js';
+import type { PropTypes as QuoteCostProps } from '../QuoteCost/QuoteCost.types.js';
+import type { InternalSwap, Step } from '../StepDetails/StepDetails.types.js';
+import type {
+  NumericTooltipPropTypes,
+  TooltipPropTypes,
+} from '../Tooltip/index.js';
+import type { CSSProperties } from '@stitches/react';
+import type { RouteTag } from 'rango-types/lib/api/main';
+
+type BaseProps = {
+  percentageChange?: PriceImpactPropTypes['percentageChange'];
+  warningLevel?: PriceImpactPropTypes['warningLevel'];
+  id?: string;
+  tooltipContainer?: HTMLElement;
+  onClick?: () => void;
+  selected?: boolean;
+};
+
+export type DataLoadedProps = {
+  steps: Step[];
+  tags: RouteTag[];
+  time: QuoteCostProps['time'];
+  fee: QuoteCostProps['fee'];
+  outputPrice: SwapInputPropTypes['price'];
+  id?: string;
+  loading?: false;
+  quoteCost: React.ReactElement;
+};
+type LoadingProps = {
+  loading: true;
+};
+
+export type PropTypes = BaseProps & (DataLoadedProps | LoadingProps);
+
+export interface TooltipContentProps {
+  internalSwaps: InternalSwap[];
+  time: QuoteCostProps['time'];
+  fee: DataLoadedProps['fee'];
+  alerts?: Step['alerts'];
+}
+
+export interface TokenSectionPropTypes {
+  style?: CSSProperties;
+  tooltipProps?: {
+    container: TooltipPropTypes['container'];
+    content: NumericTooltipPropTypes['content'];
+    open?: TooltipPropTypes['open'];
+  };
+  isInternalSwap?: boolean;
+  tokenImage: ChainTokenPropTypes['tokenImage'];
+  chainImage: ChainTokenPropTypes['chainImage'];
+  size?: ChainTokenPropTypes['size'];
+  amount?: string;
+  name?: string;
+}

package/src/components/FullExpandedQuote/index.ts

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

package/src/components/Header/Header.constants.ts

@@ -0,0 +1 @@
+export const HEADER_CORNDER_RADIUS = 20;