@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.4

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

@@ -0,0 +1,130 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  width: '100%',
+  position: 'relative',
+  padding: '0 0.5rem',
+  boxSizing: 'border-box',
+  border: '1px solid transparent',
+  variants: {
+    type: {
+      'route-details': { border: 'none' },
+      'route-progress': {
+        backgroundColor: '$neutral100',
+        borderRadius: '$xm',
+        padding: '$10 $15',
+        marginBottom: '15px',
+      },
+    },
+    state: {
+      default: {
+        borderColor: 'transparent',
+      },
+      'in-progress': { borderColor: '$info500' },
+      completed: {
+        borderColor: '$success500',
+      },
+      warning: { borderColor: '$warning500' },
+      error: { borderColor: '$error500' },
+    },
+  },
+  '& .swapper': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '& .swapper__description': {
+    fontWeight: '$medium',
+  },
+  '& .step-info': {
+    display: 'flex',
+    flex: '1',
+    width: '100%',
+    alignItems: 'start',
+    variants: {
+      tx: {
+        true: {
+          paddingLeft: '36px',
+        },
+      },
+    },
+  },
+  '& div:nth-child(3)': { display: 'flex', flexDirection: 'column', flex: 1 },
+  '& .tokens-container': { width: '100%' },
+  '& .tokens': {
+    display: 'flex',
+    paddingTop: '$5',
+    paddingBottom: '$10',
+    alignItems: 'center',
+  },
+});
+
+export const SwapperImage = styled('div', {
+  borderRadius: '100%',
+  width: 'max-content',
+  height: 'max-content',
+  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 black',
+  minHeight: '64px',
+  margin: '0 11.5px',
+  alignSelf: 'stretch',
+  variants: {
+    invisible: {
+      true: {
+        visibility: 'hidden',
+        minHeight: 'unset',
+      },
+    },
+  },
+});
+
+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' },
+    },
+  },
+});

package/src/components/StepDetails/StepDetails.tsx

@@ -0,0 +1,96 @@
+import type { StepDetailsProps } from './StepDetails.types';
+
+import React, { forwardRef, memo, useEffect, useRef } from 'react';
+
+import { ChainToken } from '../../components/ChainToken/ChainToken';
+import { NextIcon } from '../../icons';
+import { Image } from '../common';
+import { Divider } from '../Divider';
+import { Typography } from '../Typography';
+
+import {
+  Alerts,
+  Container,
+  DashedLine,
+  StepSeparator,
+  SwapperImage,
+} from './StepDetails.styles';
+
+const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
+  (props, parentRef) => {
+    const { step, hasSeparator, type, state, isFocused, tabIndex } = props;
+    const containerRef = useRef<HTMLDivElement>(null);
+    const isCompleted = state === 'completed' || state === 'error';
+
+    useEffect(() => {
+      const parentElement = (parentRef as React.RefObject<HTMLDivElement>)
+        ?.current;
+      const childElement = containerRef.current;
+      if (isFocused && childElement && parentElement) {
+        parentElement.scrollTop =
+          childElement.offsetTop - parentElement.offsetTop;
+      }
+    }, [isFocused]);
+
+    return (
+      <Container
+        type={type}
+        state={state}
+        ref={containerRef}
+        tabIndex={tabIndex}>
+        <div className="swapper">
+          {type === 'route-progress' && hasSeparator && (
+            <StepSeparator state={state} />
+          )}
+          <SwapperImage state={state}>
+            <Image size={22} src={step.swapper.image} />
+          </SwapperImage>
+          <Typography
+            className="swapper__description"
+            ml={8}
+            size="small"
+            variant="body">{`Swap on ${step.from.chain.displayName} via ${step.swapper.displayName}`}</Typography>
+        </div>
+        <div className="step-info">
+          <DashedLine invisible={!hasSeparator || type === 'route-progress'} />
+          <div className="tokens-container">
+            <div className="tokens">
+              <ChainToken
+                chainImage={step.from.chain.image}
+                tokenImage={step.from.token.image}
+                size="small"
+              />
+              <Typography
+                ml={4}
+                mr={4}
+                size="small"
+                color="$neutral900"
+                variant="body">{`${step.from.price.value} ${step.from.token.displayName}`}</Typography>
+              <NextIcon color="gray" />
+              <Divider size={4} direction="horizontal" />
+              <ChainToken
+                chainImage={step.to.chain.image}
+                tokenImage={step.to.token.image}
+                size="small"
+              />
+              <Typography
+                ml={4}
+                size="small"
+                color="$neutral900"
+                variant="body">{`${isCompleted ? '' : '~'}${
+                step.to.price.value
+              } ${step.to.token.displayName}`}</Typography>
+            </div>
+            <Alerts pb={hasSeparator && type === 'route-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,10 @@
+import type { Step } from '../BestRoute/BestRoute.types';
+
+export type StepDetailsProps = {
+  step: Step;
+  hasSeparator: boolean;
+  type: 'route-details' | 'route-progress';
+  state?: 'default' | 'in-progress' | 'completed' | 'warning' | 'error';
+  isFocused?: boolean;
+  tabIndex?: number;
+};

package/src/components/StepDetails/index.ts

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

package/src/components/StepDetails/mock.ts

@@ -0,0 +1,35 @@
+import type { Step } from '../BestRoute/BestRoute.types';
+
+export const step1: Step = {
+  swapper: {
+    displayName: 'MayaProtocol',
+    image: 'https://api.rango.exchange/swappers/maya.jpg',
+  },
+  from: {
+    token: {
+      displayName: 'BTC',
+      image: 'https://api.rango.exchange/tokens/BTC/BTC.png',
+    },
+    chain: {
+      displayName: 'BTC',
+      image: 'https://api.rango.exchange/tokens/BTC/BTC.png',
+    },
+    price: {
+      value: '1.00000000',
+    },
+  },
+  to: {
+    chain: {
+      displayName: 'ETH',
+      image: 'https://api.rango.exchange/blockchains/ethereum.svg',
+    },
+    token: {
+      displayName: 'ETH',
+
+      image: 'https://api.rango.exchange/tokens/ETH/ETH.png',
+    },
+    price: {
+      value: '14.863736725876758517',
+    },
+  },
+};

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

@@ -0,0 +1,39 @@
+import { darkTheme, styled } from '../../theme';
+
+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: '$colors$neutral900',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral800',
+        },
+        color: '$$color',
+      },
+    },
+  },
+});

package/src/components/SvgIcon/SvgIcon.tsx

@@ -0,0 +1,22 @@
+import type { SvgIconPropsWithChildren } from './SvgIcon.types';
+
+import React from 'react';
+
+import { SvgWithColor } from './SvgIcon.style';
+
+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,2 @@
+export { SvgIcon } from './SvgIcon';
+export type { SvgIconPropsWithChildren, SvgIconProps } from './SvgIcon.types';

package/src/components/SwapContainer/SwapContainer.tsx

@@ -1,40 +1,32 @@
-import { CSSProperties } from '@stitches/react';
-import React, { PropsWithChildren } from 'react';
+import type { CSSProperties } from '@stitches/react';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
 import { styled } from '../../theme';
 
 const MainContainer = styled('div', {
   position: 'relative',
   display: 'flex',
   flexDirection: 'column',
-  borderRadius: '$10',
-  boxShadow: '$s',
   width: '100%',
+  borderRadius: '$xl',
+  boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
+
   minWidth: '375px',
-  maxWidth: '512px',
-  padding: '$16',
+  maxWidth: '390px',
   boxSizing: 'border-box',
-  backgroundColor: '$background',
+  backgroundColor: '$neutral100',
   overflow: 'hidden',
   '& *': {
     boxSizing: 'border-box',
     listStyleType: 'none',
-    '&::-webkit-scrollbar': { width: '$8', height: '$8' },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '$neutral400',
-      borderRadius: '$10',
-    },
-    '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: '$neutral500',
-    },
-    '&::-webkit-scrollbar-track': {
-      backgroundColor: '$neutral100',
-    },
   },
   variants: {
     fixedHeight: {
       true: {
-        height: '595px',
-        maxHeight: '595px',
+        height: '633px',
+        maxHeight: '633px',
       },
       false: {
         height: 'auto',

package/src/components/SwapDetailsPlaceholder/SwapDetailsPlaceholder.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
-import { SecondaryPage, Spinner, Alert, styled } from '../..';
 import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { Alert, SecondaryPage, Spinner } from '../..';
+import { styled } from '../../theme';
 
 const PlaceholderContainer = styled('div', { height: '450px' });
 
@@ -33,7 +35,7 @@ export function SwapDetailsPlaceholder(props: PropTypes) {
           </LoaderContainer>
         ) : (
           <Alert
-            type="secondary"
+            type="error"
             title={i18n.t(
               'swapNotFound',
               { requestId },

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

@@ -0,0 +1,51 @@
+import type { Status } from './SwapListItem.types';
+
+import { i18n } from '@lingui/core';
+
+export function getStatus(status: Status): string {
+  switch (status) {
+    case 'failed':
+      return i18n.t('Failed');
+    case 'success':
+      return i18n.t('Complete');
+    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.stories.tsx

@@ -0,0 +1,32 @@
+import type { PropTypes } from './SwapListItem.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { swap, swapTokenData } from './mock';
+import { SwapListItem } from './SwapListItem';
+
+export default {
+  title: 'Components/Swap List Item',
+  component: SwapListItem,
+  args: {
+    status: 'running',
+  },
+  argTypes: {
+    status: {
+      name: 'status',
+      control: { type: 'select' },
+      options: ['running', 'failed', 'success'],
+      defaultValue: 'running',
+    },
+  },
+} as Meta<typeof SwapListItem>;
+
+export const Main = (props: PropTypes) => (
+  <SwapListItem
+    {...props}
+    requestId={swap.requestId}
+    creationTime={swap.creationTime}
+    swapTokenData={swapTokenData}
+  />
+);

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

@@ -0,0 +1,61 @@
+import { darkTheme, styled } from '../../theme';
+
+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', {
+  backgroundColor: '$neutral100',
+  border: 'none',
+  width: '100%',
+  borderRadius: '$xm',
+  gap: 10,
+  padding: 15,
+  cursor: 'pointer',
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    backgroundColor: '$surface600',
+    outline: 'none',
+  },
+});
+
+export const Date = styled('div', {
+  display: 'flex',
+  padding: '$2',
+  alignItems: 'flex-start',
+});
+
+export const LoadingMain = styled('div', {
+  backgroundColor: '$neutral100',
+  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,
+});

package/src/components/SwapListItem/SwapListItem.tsx

@@ -0,0 +1,64 @@
+import type { PropTypes } from './SwapListItem.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Skeleton } from '../Skeleton';
+import { Typography } from '../Typography';
+
+import { formattedDateAndTime, getStatus } from './SwapListItem.helpers';
+import {
+  Container,
+  Date,
+  Header,
+  LoadingContainer,
+  LoadingMain,
+  Main,
+} from './SwapListItem.styles';
+import { StatusColors } from './SwapListItem.types';
+import { SwapToken } from './SwapToken';
+
+export function SwapListItem(props: PropsWithChildren<PropTypes>) {
+  if ('isLoading' in props) {
+    return (
+      <LoadingMain>
+        <LoadingContainer>
+          <Header>
+            <Skeleton variant="text" size="medium" width={76} />
+            <Skeleton variant="text" size="medium" width={76} />
+          </Header>
+          <SwapToken isLoading={true} />
+        </LoadingContainer>
+      </LoadingMain>
+    );
+  }
+
+  const {
+    onClick,
+    requestId,
+    creationTime,
+    onlyShowTime,
+    status,
+    swapTokenData,
+  } = props;
+  return (
+    <Main onClick={onClick.bind(null, requestId)}>
+      <Container>
+        <Header>
+          <Date>
+            <Typography variant="label" size="medium" color="neutral800">
+              {formattedDateAndTime(creationTime, onlyShowTime)}
+            </Typography>
+          </Date>
+          <Typography
+            variant="label"
+            size="medium"
+            color={StatusColors[status]}>
+            {getStatus(status)}
+          </Typography>
+        </Header>
+        <SwapToken data={swapTokenData} status={status} />
+      </Container>
+    </Main>
+  );
+}

package/src/components/SwapListItem/SwapListItem.types.ts

@@ -0,0 +1,47 @@
+export type Status = 'running' | 'failed' | 'success';
+
+export interface SwapListItemProps {
+  requestId: string;
+  creationTime: string;
+  status: Status;
+  onClick: (requestId: string) => void;
+  swapTokenData: SwapTokenData;
+  onlyShowTime?: boolean;
+}
+
+export interface LoadingProps {
+  isLoading: true;
+}
+
+export type PropTypes = SwapListItemProps | LoadingProps;
+
+export const StatusColors = {
+  failed: 'error500',
+  running: 'info500',
+  success: 'success500',
+};
+
+export interface SwapTokenData {
+  from: {
+    token: {
+      image: string;
+      displayName: string;
+    };
+    blockchain: {
+      image: string;
+    };
+    amount: string;
+  };
+
+  to: {
+    token: {
+      image: string;
+      displayName: string;
+    };
+    blockchain: {
+      image: string;
+    };
+    amount: string;
+    estimatedAmount?: string;
+  };
+}