@rango-dev/ui 0.15.1-next.1 → 0.15.1-next.10

package/src/components/Skeleton/Skeleton.tsx

@@ -1,66 +1,16 @@
-import React from 'react';
-import { keyframes, styled } from '../../theme';
+import type { PropTypes } from './Skeleton.types';
 
-const waveSquares = keyframes({
-  '0%': {
-    backgroundPosition: '-468px 0',
-  },
-  '100%': {
-    backgroundPosition: '468px 0',
-  },
-});
+import React from 'react';
 
-const SkeletonContainer = styled('div', {
-  borderRadius: '$5',
-  backgroundColor: '$neutral100',
-  background: `linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%)`,
-  backgroundSize: '800px 100px',
-  animation: `${waveSquares} 2s infinite ease-out`,
-  variants: {
-    width: {
-      16: {
-        width: '$16',
-      },
-      20: {
-        width: '$20',
-      },
-      24: {
-        width: '$24',
-      },
-      36: {
-        width: '$36',
-      },
-      48: {
-        width: '$48',
-      },
-    },
-    height: {
-      16: {
-        height: '$16',
-      },
-      20: {
-        height: '$20',
-      },
-      24: {
-        height: '$24',
-      },
-      36: {
-        height: '$36',
-      },
-      48: {
-        height: '$48',
-      },
-      94: {
-        height: 94,
-      },
-    },
-  },
-});
-export interface PropTypes {
-  width?: 20 | 24 | 36 | 48;
-  height?: 20 | 24 | 36 | 48 | 94;
-}
+import { SkeletonContainer } from './Skeleton.styles';
 
-export function Skeleton({ width = 20, height = 20 }: PropTypes) {
-  return <SkeletonContainer width={width} height={height} />;
+export function Skeleton(props: PropTypes) {
+  const customCss =
+    props.variant !== 'text'
+      ? {
+          width: props.width,
+          height: props.height,
+        }
+      : { width: props.width };
+  return <SkeletonContainer css={customCss} {...props} />;
 }

package/src/components/Skeleton/Skeleton.types.ts

@@ -0,0 +1,20 @@
+import type { SkeletonContainer } from './Skeleton.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof SkeletonContainer>;
+type BaseVariants = Exclude<BaseProps['variant'], object>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+
+type TextVariant = {
+  variant: 'text';
+  size: BaseSizes;
+  width: number;
+};
+
+type OtherVariant = {
+  variant: Exclude<BaseVariants, 'text'>;
+  width?: number;
+  height: number;
+};
+
+export type PropTypes = TextVariant | OtherVariant;

package/src/components/Spinner/Spinner.tsx

@@ -1,4 +1,9 @@
+import type { SvgIconProps } from '../SvgIcon';
+import type * as Stitches from '@stitches/react';
+
 import React from 'react';
+
+import { LoadingIcon } from '../../icons';
 import { keyframes, styled } from '../../theme';
 
 const spin = keyframes({
@@ -8,54 +13,25 @@ const spin = keyframes({
 });
 
 const SpinnerContainer = styled('div', {
-  borderRadius: '50%',
   position: 'relative',
-  border: `2px solid $neutral100`,
-  borderRight: `2px solid`,
   animation: `${spin} 1.5s linear infinite`,
-  margin: `0px $8`,
-  variants: {
-    color: {
-      primary: {
-        borderRightColor: '$primary',
-      },
-      error: {
-        borderRightColor: '$error',
-      },
-      warning: {
-        borderRightColor: '$warning',
-      },
-      success: {
-        borderRightColor: '$success',
-      },
-      black: {
-        borderRightColor: '$black',
-      },
-      white: {
-        borderRightColor: '$white',
-      },
-    },
-    size: {
-      16: {
-        width: '$16',
-        height: '$16',
-      },
-      20: {
-        width: '$20',
-        height: '$20',
-      },
-      24: {
-        width: '$24',
-        height: '$24',
-      },
-    },
-  },
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
 });
+
 export interface PropTypes {
-  size?: 16 | 20 | 24;
-  color?: 'primary' | 'error' | 'warning' | 'success' | 'black' | 'white';
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  size?: 12 | 16 | 20 | 24 | 30;
+  color?: SvgIconProps['color'];
+  css?: Stitches.CSS;
 }
 
-export function Spinner({ size = 16, color = 'primary' }: PropTypes) {
-  return <SpinnerContainer size={size} color={color} />;
+export function Spinner(props: PropTypes) {
+  const { size, color, css = {} } = props;
+  return (
+    <SpinnerContainer css={css}>
+      <LoadingIcon size={size} color={color} />
+    </SpinnerContainer>
+  );
 }

package/src/components/StepDetail/StepDetail.tsx

@@ -112,28 +112,28 @@ export function StepDetail(props: PropsWithChildren<PropTypes>) {
         {amount && (
           <Typography
             noWrap
-            variant={direction === 'vertical' ? 'body2' : 'title'}
-          >
+            variant={direction === 'vertical' ? 'body' : 'title'}
+            size="medium">
             {amount}
           </Typography>
         )}
         {!amount && estimatedAmount && (
           <Typography
             noWrap
-            variant={direction === 'vertical' ? 'body2' : 'title'}
-            color={'$neutral600'}
-          >
+            variant={direction === 'vertical' ? 'body' : 'title'}
+            size="medium"
+            color={'$neutral600'}>
             {estimatedAmount}
           </Typography>
         )}
         &nbsp;
         <Typography
-          variant={direction === 'vertical' ? 'body2' : 'title'}
-          noWrap
-        >
+          variant={direction === 'vertical' ? 'body' : 'title'}
+          size="medium"
+          noWrap>
           {symbol}
         </Typography>
-        <SubTitle noWrap variant="caption" color="$neutral800">
+        <SubTitle noWrap variant="body" size="xsmall" color="$neutral800">
           on {blockchain}
         </SubTitle>
       </Detail>

package/src/components/StepDetails/StepDetails.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import React from 'react';
+
+import { Alert } from '../Alert';
+
+import { step1 } from './mock';
+import { StepDetails } from './StepDetails';
+
+const meta: Meta<typeof StepDetails> = {
+  component: StepDetails,
+};
+
+export default meta;
+type Story = StoryObj<typeof StepDetails>;
+
+export const Main: Story = {
+  args: {
+    step: { ...step1, alerts: <Alert title="test alert" type="warning" /> },
+    type: 'route-progress',
+    state: 'completed',
+  },
+};

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 },