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

package/src/components/StepDetails/StepDetails.styles.ts

@@ -0,0 +1,180 @@
+import { css } from '@stitches/react';
+
+import { darkTheme, styled } from '../../theme.js';
+import { Typography } from '../Typography/Typography.js';
+
+export const Container = styled('div', {
+  width: '100%',
+  position: 'relative',
+  padding: '0 0.5rem',
+  boxSizing: 'border-box',
+  border: '1px solid transparent',
+  variants: {
+    type: {
+      'quote-details': { border: 'none' },
+      'swap-progress': {
+        backgroundColor: '$neutral100',
+        $$color: '$colors$neutral100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral300',
+        },
+        borderRadius: '$xm',
+        padding: '$10 $15',
+        marginBottom: '15px',
+      },
+    },
+    state: {
+      default: {
+        borderColor: 'transparent',
+      },
+      'in-progress': { borderColor: '$info500' },
+      completed: {
+        borderColor: '$success500',
+      },
+      warning: { borderColor: '$warning500' },
+      error: { borderColor: '$error500' },
+    },
+  },
+});
+
+export const SwapperImage = styled('div', {
+  borderRadius: '100%',
+  width: '24px',
+  height: '24px',
+  overflow: 'hidden',
+  border: '1.5px solid transparent',
+  variants: {
+    state: {
+      default: {
+        borderColor: 'transparent',
+      },
+      'in-progress': { borderColor: '$info500' },
+      completed: {
+        borderColor: '$success500',
+      },
+      warning: { borderColor: '$warning500' },
+      error: { borderColor: '$error500' },
+    },
+  },
+});
+
+export const Alerts = styled('div', {
+  width: '100%',
+  variants: {
+    pb: {
+      true: {
+        paddingBottom: '35px',
+      },
+    },
+  },
+});
+
+export const DashedLine = styled('div', {
+  borderLeft: '1px dashed $foreground',
+  minHeight: '64px',
+  margin: '0 11.5px',
+  alignSelf: 'stretch',
+  variants: {
+    invisible: {
+      true: {
+        visibility: 'hidden',
+        minHeight: 'unset',
+      },
+    },
+  },
+});
+
+export const SwapperSeparator = styled('div', {
+  borderLeft: '1px solid transparent',
+  margin: '0 $12',
+  display: 'block',
+  height: '8px',
+  variants: {
+    state: {
+      default: {
+        borderColor: 'transparent',
+      },
+      'in-progress': { borderColor: '$info500' },
+      completed: {
+        borderColor: '$success500',
+      },
+      warning: { borderColor: '$warning500' },
+      error: { borderColor: '$error500' },
+    },
+  },
+});
+
+export const StepSeparator = styled('div', {
+  borderLeft: '1px dashed transparent',
+  margin: '0 $10',
+  alignSelf: 'stretch',
+  display: 'block',
+  height: '15px',
+  position: 'absolute',
+  top: '-16px',
+  left: '16px',
+  variants: {
+    state: {
+      default: {
+        borderColor: 'transparent',
+      },
+      'in-progress': { borderColor: '$info500' },
+      completed: {
+        borderColor: '$success500',
+      },
+      warning: { borderColor: '$warning500' },
+      error: { borderColor: '$error500' },
+    },
+  },
+});
+
+export const TokenNameText = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '38px',
+});
+
+export const ValueTypography = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '60px',
+});
+
+export const tokensContainerStyles = css({
+  width: '100%',
+  overflow: 'hidden',
+});
+
+export const swappersStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+});
+
+export const swapperItemStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const stepInfoStyles = css({
+  display: 'flex',
+  flex: '1',
+  width: '100%',
+  alignItems: 'start',
+  variants: {
+    tx: {
+      true: {
+        paddingLeft: '36px',
+      },
+    },
+  },
+});
+
+export const tokensStyles = css({
+  display: 'flex',
+  paddingTop: '$5',
+  paddingBottom: '$10',
+  alignItems: 'center',
+});

package/src/components/StepDetails/StepDetails.tsx

@@ -0,0 +1,215 @@
+import type { InternalSwap, StepDetailsProps } from './StepDetails.types.js';
+
+import { i18n } from '@lingui/core';
+import React, { forwardRef, Fragment, memo, useEffect, useRef } from 'react';
+
+import { ChainToken } from '../../components/ChainToken/index.js';
+import { InfoIcon, NextIcon } from '../../icons/index.js';
+import { Image } from '../common/index.js';
+import { Divider } from '../Divider/index.js';
+import { NumericTooltip } from '../Tooltip/index.js';
+import { Typography } from '../Typography/index.js';
+
+import {
+  Alerts,
+  Container,
+  DashedLine,
+  stepInfoStyles,
+  StepSeparator,
+  SwapperImage,
+  swapperItemStyles,
+  SwapperSeparator,
+  swappersStyles,
+  TokenNameText,
+  tokensContainerStyles,
+  tokensStyles,
+  ValueTypography,
+} from './StepDetails.styles.js';
+
+const HIGHT_OF_STICKY_HEADER = 45;
+const VALUE_LENGTH_THRESHOLD = 9;
+
+const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
+  (props, parentRef) => {
+    const {
+      step,
+      hasSeparator,
+      type,
+      state,
+      isFocused,
+      tabIndex,
+      tooltipContainer,
+      className,
+    } = props;
+
+    const { from, to, swapper } = step;
+    const containerRef = useRef<HTMLDivElement>(null);
+    const childElement = containerRef.current;
+    const isCompleted = state === 'completed' || state === 'error';
+    const swappers: InternalSwap[] = step.internalSwaps?.length
+      ? step.internalSwaps
+      : [
+          {
+            from,
+            to,
+            swapper,
+          },
+        ];
+
+    useEffect(() => {
+      const parentElement = (parentRef as React.RefObject<HTMLDivElement>)
+        ?.current;
+      if (isFocused && childElement && parentElement) {
+        parentElement.scrollTop =
+          childElement.offsetTop - HIGHT_OF_STICKY_HEADER;
+      }
+    }, [isFocused, childElement]);
+
+    return (
+      <Container
+        type={type}
+        state={state}
+        ref={containerRef}
+        className={className}
+        tabIndex={tabIndex}>
+        {type === 'quote-details' && (
+          <div className={swapperItemStyles()}>
+            <SwapperImage state={state}>
+              <Image size={22} src={step.swapper.image} />
+            </SwapperImage>
+            <Divider direction="horizontal" size={8} />
+            <Typography size="medium" variant="label">
+              {step.from.chain.displayName === step.to.chain.displayName
+                ? i18n.t({
+                    id: 'Swap on {fromChain} via {swapper}',
+                    values: {
+                      fromChain: step.from.chain.displayName,
+                      swapper: step.swapper.displayName,
+                    },
+                  })
+                : i18n.t({
+                    id: 'Bridge from {fromChain} via {swapper}',
+                    values: {
+                      fromChain: step.from.chain.displayName,
+                      swapper: step.swapper.displayName,
+                    },
+                  })}
+            </Typography>
+          </div>
+        )}
+
+        {type === 'swap-progress' && (
+          <div className={swappersStyles()}>
+            {hasSeparator && <StepSeparator state={state} />}
+            {swappers.map((swapperItem, index) => {
+              const key = `${swapperItem.swapper.displayName}-${index}`;
+              return (
+                <Fragment key={key}>
+                  <div
+                    id={swapperItem.swapper.displayName}
+                    className={swapperItemStyles()}>
+                    <SwapperImage state={state}>
+                      <Image size={22} src={swapperItem.swapper.image} />
+                    </SwapperImage>
+                    <Divider direction="horizontal" size={8} />
+                    <Typography size="medium" variant="label">
+                      {swapperItem?.swapper.type === 'DEX'
+                        ? i18n.t({
+                            id: 'Swap on {fromChain} via {swapper}',
+                            values: {
+                              fromChain: swapperItem.from.chain.displayName,
+                              swapper: swapperItem.swapper.displayName,
+                            },
+                          })
+                        : i18n.t({
+                            id: 'Bridge to {toChain} via {swapper}',
+                            values: {
+                              toChain: swapperItem.to.chain.displayName,
+                              swapper: swapperItem.swapper.displayName,
+                            },
+                          })}
+                    </Typography>
+                  </div>
+                  {index !== swappers.length - 1 && (
+                    <SwapperSeparator state={state} />
+                  )}
+                </Fragment>
+              );
+            })}
+          </div>
+        )}
+
+        <div className={stepInfoStyles()}>
+          <DashedLine invisible={!hasSeparator || type === 'swap-progress'} />
+          <div className={tokensContainerStyles()}>
+            <div className={tokensStyles()}>
+              <ChainToken
+                chainImage={step.from.chain.image}
+                tokenImage={step.from.token.image}
+                size="small"
+              />
+              <NumericTooltip
+                content={step.from.price.realValue}
+                container={tooltipContainer}>
+                <Divider direction="horizontal" size={4} />
+                <ValueTypography
+                  size="small"
+                  color="$neutral700"
+                  variant="body">{`${step.from.price.realValue}`}</ValueTypography>
+
+                {step.from.price.realValue &&
+                  step.from.price.realValue.length > VALUE_LENGTH_THRESHOLD && (
+                    <>
+                      <Divider direction="horizontal" size={2} />
+                      <InfoIcon size={12} color="gray" />
+                    </>
+                  )}
+                <Divider direction="horizontal" size={2} />
+
+                <TokenNameText size="small" color="$neutral700" variant="body">
+                  {step.from.token.displayName}
+                </TokenNameText>
+              </NumericTooltip>
+
+              <Divider direction="horizontal" size={4} />
+
+              <NextIcon color="gray" />
+              <Divider size={4} direction="horizontal" />
+              <ChainToken
+                chainImage={step.to.chain.image}
+                tokenImage={step.to.token.image}
+                size="small"
+              />
+              <NumericTooltip
+                content={step.to.price.realValue}
+                container={tooltipContainer}>
+                <Divider direction="horizontal" size={4} />
+
+                <ValueTypography
+                  size="small"
+                  color="$neutral700"
+                  variant="body">{`${isCompleted ? '' : '~'}${
+                  step.to.price.value
+                }`}</ValueTypography>
+                <Divider direction="horizontal" size={2} />
+                {step.to.price.value.length + (isCompleted ? 0 : 1) >
+                  VALUE_LENGTH_THRESHOLD && <InfoIcon size={12} color="gray" />}
+                <Divider direction="horizontal" size={2} />
+                <TokenNameText size="small" color="$neutral700" variant="body">
+                  {step.to.token.displayName}
+                </TokenNameText>
+              </NumericTooltip>
+            </div>
+            <Alerts pb={hasSeparator && type === 'quote-details'}>
+              {step.alerts}
+            </Alerts>
+          </div>
+        </div>
+      </Container>
+    );
+  }
+);
+
+StepDetailsComponent.displayName = 'StepDetailsComponent';
+
+export const StepDetails = memo(StepDetailsComponent);

package/src/components/StepDetails/StepDetails.types.ts

@@ -0,0 +1,44 @@
+import type { SwapInputPropTypes } from '../../containers/SwapInput/SwapInput.types.js';
+import type { SwapperType } from 'rango-types';
+import type { ReactNode } from 'react';
+
+type BaseStep = Pick<SwapInputPropTypes, 'chain' | 'token' | 'price'>;
+type BaseInternalStep = {
+  chain: BaseStep['chain'];
+} & Partial<Pick<BaseStep, 'token' | 'price'>>;
+
+type SwapperInfo = SwapInputPropTypes['chain'] & {
+  type?: SwapperType;
+};
+
+export type InternalSwap = {
+  swapper: SwapperInfo;
+  from: BaseInternalStep;
+  to: BaseInternalStep;
+};
+
+export type Step = {
+  swapper: SwapperInfo;
+  from: BaseStep;
+  to: BaseStep;
+  error?: {
+    title?: string;
+    description?: string;
+  };
+  alerts?: ReactNode;
+  state?: 'error' | 'warning';
+  time?: string;
+  fee?: string;
+  internalSwaps?: InternalSwap[];
+};
+
+export type StepDetailsProps = {
+  step: Step;
+  hasSeparator: boolean;
+  type: 'quote-details' | 'swap-progress';
+  state?: 'default' | 'in-progress' | 'completed' | 'warning' | 'error';
+  isFocused?: boolean;
+  tabIndex?: number;
+  className: string;
+  tooltipContainer?: HTMLElement;
+};

package/src/components/StepDetails/index.ts

@@ -0,0 +1,2 @@
+export { StepDetails } from './StepDetails.js';
+export type { StepDetailsProps, Step } from './StepDetails.types.js';

package/src/components/SvgIcon/SvgIcon.style.ts

@@ -0,0 +1,35 @@
+import { styled } from '../../theme.js';
+
+export const SvgWithColor = styled('svg', {
+  variants: {
+    color: {
+      primary: {
+        color: '$primary500',
+      },
+      secondary: {
+        color: '$secondary500',
+      },
+      error: {
+        color: '$error500',
+      },
+      warning: {
+        color: '$warning500',
+      },
+      success: {
+        color: '$success500',
+      },
+      black: {
+        color: '$foreground',
+      },
+      white: {
+        color: '$background',
+      },
+      info: {
+        color: '$info500',
+      },
+      gray: {
+        color: '$neutral700',
+      },
+    },
+  },
+});

package/src/components/SvgIcon/SvgIcon.tsx

@@ -0,0 +1,22 @@
+import type { SvgIconPropsWithChildren } from './SvgIcon.types.js';
+
+import React from 'react';
+
+import { SvgWithColor } from './SvgIcon.style.js';
+
+export function SvgIcon(props: SvgIconPropsWithChildren) {
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  const { size = '1em', color, children } = props;
+  const originalSvgProps = children?.props;
+  const commonProps = {
+    ...originalSvgProps,
+    width: size,
+    height: size,
+    color: color,
+    className: '_icon',
+  };
+
+  return (
+    <SvgWithColor {...commonProps}>{children?.props.children}</SvgWithColor>
+  );
+}

package/src/components/SvgIcon/SvgIcon.types.ts

@@ -0,0 +1,16 @@
+export interface SvgIconProps {
+  size?: number;
+  color?:
+    | 'primary'
+    | 'secondary'
+    | 'error'
+    | 'warning'
+    | 'success'
+    | 'black'
+    | 'white'
+    | 'info'
+    | 'gray';
+}
+export type SvgIconPropsWithChildren = SvgIconProps & {
+  children?: React.ReactElement;
+};

package/src/components/SvgIcon/index.ts

@@ -0,0 +1,5 @@
+export { SvgIcon } from './SvgIcon.js';
+export type {
+  SvgIconPropsWithChildren,
+  SvgIconProps,
+} from './SvgIcon.types.js';

package/src/components/SwapListItem/SwapListItem.helpers.ts

@@ -0,0 +1,51 @@
+import type { Status } from './SwapListItem.types.js';
+
+import { i18n } from '@lingui/core';
+
+export function getStatus(status: Status): string {
+  switch (status) {
+    case 'failed':
+      return i18n.t('Failed');
+    case 'success':
+      return i18n.t('Completed');
+    default:
+      return i18n.t('In progress');
+  }
+}
+
+export function formattedDateAndTime(
+  time: string,
+  onlyShowTime?: boolean
+): string {
+  if (!time) {
+    return '';
+  }
+
+  const date = new Date(Number(time));
+  const HOURS_IN_HALF_DAY = 12; // Constant for 12 hours
+  const MINUTES_IN_SINGLE_DIGIT = 10; // Constant for 10 minutes
+
+  if (!onlyShowTime) {
+    const options: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    };
+    return date.toLocaleDateString(undefined, options);
+  }
+
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const period = hours >= HOURS_IN_HALF_DAY ? 'pm' : 'am';
+
+  const formattedHours =
+    hours % HOURS_IN_HALF_DAY === 0
+      ? HOURS_IN_HALF_DAY
+      : hours % HOURS_IN_HALF_DAY;
+  const formattedMinutes =
+    minutes < MINUTES_IN_SINGLE_DIGIT ? `0${minutes}` : minutes;
+
+  const formattedTime = `${formattedHours}:${formattedMinutes} ${period}`;
+
+  return formattedTime;
+}

package/src/components/SwapListItem/SwapListItem.styles.ts

@@ -0,0 +1,74 @@
+import { darkTheme, styled } from '../../theme.js';
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  flexDirection: 'column',
+  gap: 10,
+});
+
+export const Header = styled('div', {
+  display: 'flex',
+  padding: 0,
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+});
+
+export const Main = styled('button', {
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  border: 'none',
+  width: '100%',
+  borderRadius: '$xm',
+  gap: 10,
+  padding: 15,
+  cursor: 'pointer',
+  fontFamily: 'inherit',
+  '&:hover': {
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+    outline: 'none',
+  },
+});
+
+export const Date = styled('div', {
+  display: 'flex',
+  padding: '$2',
+  alignItems: 'flex-start',
+});
+
+export const LoadingMain = styled('div', {
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  border: 'none',
+  width: '100%',
+  borderRadius: '$xm',
+  gap: 10,
+  padding: 15,
+});
+
+export const LoadingContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  flexDirection: 'column',
+  gap: 25,
+});