@rango-dev/ui 0.26.1-next.5 → 0.26.1-next.7

package/src/components/Divider/Divider.styles.ts

@@ -0,0 +1,165 @@
+import { styled } from '../../theme';
+
+export const DividerContainer = styled('div', {
+  flexShrink: 0,
+  variants: {
+    size: {
+      4: {},
+      8: {},
+      10: {},
+      12: {},
+      16: {},
+      18: {},
+      20: {},
+      24: {},
+      30: {},
+      32: {},
+    },
+    direction: {
+      vertical: {},
+      horizontal: {},
+    },
+  },
+  compoundVariants: [
+    {
+      size: 4,
+      direction: 'horizontal',
+      css: {
+        width: '$4',
+      },
+    },
+    {
+      size: 4,
+      direction: 'vertical',
+      css: {
+        height: '$4',
+      },
+    },
+    {
+      size: 8,
+      direction: 'horizontal',
+      css: {
+        width: '$8',
+      },
+    },
+    {
+      size: 8,
+      direction: 'vertical',
+      css: {
+        height: '$8',
+      },
+    },
+    {
+      size: 10,
+      direction: 'horizontal',
+      css: {
+        width: '$10',
+      },
+    },
+    {
+      size: 10,
+      direction: 'vertical',
+      css: {
+        height: '$10',
+      },
+    },
+    {
+      size: 12,
+      direction: 'horizontal',
+      css: {
+        width: '$12',
+      },
+    },
+    {
+      size: 12,
+      direction: 'vertical',
+      css: {
+        height: '$12',
+      },
+    },
+    {
+      size: 16,
+      direction: 'horizontal',
+      css: {
+        width: '$16',
+      },
+    },
+    {
+      size: 16,
+      direction: 'vertical',
+      css: {
+        height: '$16',
+      },
+    },
+    {
+      size: 18,
+      direction: 'horizontal',
+      css: {
+        width: '$18',
+      },
+    },
+    {
+      size: 18,
+      direction: 'vertical',
+      css: {
+        height: '$18',
+      },
+    },
+    {
+      size: 20,
+      direction: 'horizontal',
+      css: {
+        width: '$20',
+      },
+    },
+    {
+      size: 20,
+      direction: 'vertical',
+      css: {
+        height: '$20',
+      },
+    },
+    {
+      size: 24,
+      direction: 'horizontal',
+      css: {
+        width: '$24',
+      },
+    },
+    {
+      size: 24,
+      direction: 'vertical',
+      css: {
+        height: '$24',
+      },
+    },
+    {
+      size: 30,
+      direction: 'horizontal',
+      css: {
+        width: '$30',
+      },
+    },
+    {
+      size: 30,
+      direction: 'vertical',
+      css: {
+        height: '$30',
+      },
+    },
+    {
+      size: 32,
+      direction: 'horizontal',
+      css: {
+        width: '$32',
+      },
+    },
+    {
+      size: 32,
+      direction: 'vertical',
+      css: {
+        height: '$32',
+      },
+    },
+  ],
+});

package/src/components/Divider/Divider.tsx

@@ -1,146 +1,14 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { PropTypes } from './Divider.types';
+
 import React from 'react';
 
-import { styled } from '../../theme';
+import { DividerContainer } from './Divider.styles';
 
-const DividerContainer = styled('div', {
-  flexShrink: 0,
-  variants: {
-    size: {
-      4: {},
-      8: {},
-      12: {},
-      16: {},
-      18: {},
-      20: {},
-      24: {},
-      32: {},
-    },
-    direction: {
-      vertical: {},
-      horizontal: {},
-    },
-  },
-  compoundVariants: [
-    {
-      size: 4,
-      direction: 'horizontal',
-      css: {
-        width: '$4',
-      },
-    },
-    {
-      size: 4,
-      direction: 'vertical',
-      css: {
-        height: '$4',
-      },
-    },
-    {
-      size: 8,
-      direction: 'horizontal',
-      css: {
-        width: '$8',
-      },
-    },
-    {
-      size: 8,
-      direction: 'vertical',
-      css: {
-        height: '$8',
-      },
-    },
-    {
-      size: 12,
-      direction: 'horizontal',
-      css: {
-        width: '$12',
-      },
-    },
-    {
-      size: 12,
-      direction: 'vertical',
-      css: {
-        height: '$12',
-      },
-    },
-    {
-      size: 16,
-      direction: 'horizontal',
-      css: {
-        width: '$16',
-      },
-    },
-    {
-      size: 16,
-      direction: 'vertical',
-      css: {
-        height: '$16',
-      },
-    },
-    {
-      size: 18,
-      direction: 'horizontal',
-      css: {
-        width: '$18',
-      },
-    },
-    {
-      size: 18,
-      direction: 'vertical',
-      css: {
-        height: '$18',
-      },
-    },
-    {
-      size: 20,
-      direction: 'horizontal',
-      css: {
-        width: '$20',
-      },
-    },
-    {
-      size: 20,
-      direction: 'vertical',
-      css: {
-        height: '$20',
-      },
-    },
-    {
-      size: 24,
-      direction: 'horizontal',
-      css: {
-        width: '$24',
-      },
-    },
-    {
-      size: 24,
-      direction: 'vertical',
-      css: {
-        height: '$24',
-      },
-    },
-    {
-      size: 32,
-      direction: 'horizontal',
-      css: {
-        width: '$32',
-      },
-    },
-    {
-      size: 32,
-      direction: 'vertical',
-      css: {
-        height: '$32',
-      },
-    },
-  ],
-});
-export interface PropTypes {
-  size?: 4 | 8 | 12 | 16 | 18 | 20 | 24 | 32;
-  direction?: 'vertical' | 'horizontal';
-}
+const Default_Size = 12;
 
-export function Divider({ size = 12, direction = 'vertical' }: PropTypes) {
+export function Divider({
+  size = Default_Size,
+  direction = 'vertical',
+}: PropTypes) {
   return <DividerContainer size={size} direction={direction} />;
 }

package/src/components/Divider/Divider.types.ts

@@ -0,0 +1,10 @@
+import type { DividerContainer } from './Divider.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof DividerContainer>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+
+export interface PropTypes {
+  size?: BaseSizes;
+  direction?: 'vertical' | 'horizontal';
+}

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

@@ -12,6 +12,7 @@ export const Container = styled('div', {
     type: {
       'quote-details': { border: 'none' },
       'swap-progress': {
+        backgroundColor: '$neutral100',
         $$color: '$colors$neutral100',
         [`.${darkTheme} &`]: {
           $$color: '$colors$neutral300',
@@ -33,10 +34,6 @@ export const Container = styled('div', {
       error: { borderColor: '$error500' },
     },
   },
-  '& .swapper__description': {
-    fontWeight: '$medium',
-  },
-  '& div:nth-child(3)': { display: 'flex', flexDirection: 'column', flex: 1 },
 });
 
 export const SwapperImage = styled('div', {
@@ -86,6 +83,26 @@ export const DashedLine = styled('div', {
   },
 });
 
+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',
@@ -114,7 +131,13 @@ export const tokensContainerStyles = css({
   width: '100%',
 });
 
-export const swapperStyles = css({
+export const swappersStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+});
+
+export const swapperItemStyles = css({
   display: 'flex',
   alignItems: 'center',
 });

package/src/components/StepDetails/StepDetails.tsx

@@ -1,7 +1,7 @@
-import type { StepDetailsProps } from './StepDetails.types';
+import type { InternalSwap, StepDetailsProps } from './StepDetails.types';
 
 import { i18n } from '@lingui/core';
-import React, { forwardRef, memo, useEffect, useRef } from 'react';
+import React, { forwardRef, Fragment, memo, useEffect, useRef } from 'react';
 
 import { ChainToken } from '../../components/ChainToken/ChainToken';
 import { NextIcon } from '../../icons';
@@ -17,7 +17,9 @@ import {
   stepInfoStyles,
   StepSeparator,
   SwapperImage,
-  swapperStyles,
+  swapperItemStyles,
+  SwapperSeparator,
+  swappersStyles,
   tokensContainerStyles,
   tokensStyles,
 } from './StepDetails.styles';
@@ -33,8 +35,20 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
       tabIndex,
       tooltipContainer,
     } = props;
+
+    const { from, to, swapper } = step;
     const containerRef = useRef<HTMLDivElement>(null);
     const isCompleted = state === 'completed' || state === 'error';
+    const swappers: InternalSwap[] = step.internalSwaps?.length
+      ? step.internalSwaps
+      : [
+          {
+            from: { blockchain: from.chain.displayName },
+            to: { blockchain: to.chain.displayName },
+            swapper,
+          },
+        ];
+
     useEffect(() => {
       const parentElement = (parentRef as React.RefObject<HTMLDivElement>)
         ?.current;
@@ -51,27 +65,63 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
         state={state}
         ref={containerRef}
         tabIndex={tabIndex}>
-        <div className={swapperStyles()}>
-          {type === 'swap-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">
-            {i18n.t({
-              id: 'Swap on {fromChain} via {swapper}',
-              values: {
-                fromChain: step.from.chain.displayName,
-                swapper: step.swapper.displayName,
-              },
+        {type === 'quote-details' && (
+          <div className={swapperItemStyles()}>
+            <SwapperImage state={state}>
+              <Image size={22} src={step.swapper.image} />
+            </SwapperImage>
+            <Typography ml={8} size="medium" variant="label">
+              {i18n.t({
+                id: 'Swap on {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>
+                    <Typography ml={8} size="medium" variant="label">
+                      {swapperItem?.swapper.type === 'DEX'
+                        ? i18n.t({
+                            id: 'Swap on {fromChain} via {swapper}',
+                            values: {
+                              fromChain: swapperItem.from.blockchain,
+                              swapper: swapperItem.swapper.displayName,
+                            },
+                          })
+                        : i18n.t({
+                            id: 'Bridge to {toChain} via {swapper}',
+                            values: {
+                              toChain: swapperItem.to.blockchain,
+                              swapper: swapperItem.swapper.displayName,
+                            },
+                          })}
+                    </Typography>
+                  </div>
+                  {index !== swappers.length - 1 && (
+                    <SwapperSeparator state={state} />
+                  )}
+                </Fragment>
+              );
             })}
-          </Typography>
-        </div>
+          </div>
+        )}
+
         <div className={stepInfoStyles()}>
           <DashedLine invisible={!hasSeparator || type === 'swap-progress'} />
           <div className={tokensContainerStyles()}>

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

@@ -1,10 +1,25 @@
+import type { SwapperType } from 'rango-sdk';
 import type { ReactNode } from 'react';
 import type { SwapInputProps } from 'src/containers/SwapInput/SwapInput.types';
 
 type BaseStep = Pick<SwapInputProps, 'chain' | 'token' | 'price'>;
 
+type SwapperInfo = SwapInputProps['chain'] & {
+  type?: SwapperType;
+};
+
+export type InternalSwap = {
+  swapper: SwapperInfo;
+  from: {
+    blockchain: string;
+  };
+  to: {
+    blockchain: string;
+  };
+};
+
 export type Step = {
-  swapper: SwapInputProps['chain'];
+  swapper: SwapperInfo;
   from: BaseStep;
   to: BaseStep;
   error?: {
@@ -13,6 +28,7 @@ export type Step = {
   };
   alerts?: ReactNode;
   state?: 'error' | 'warning';
+  internalSwaps?: InternalSwap[];
 };
 
 export type StepDetailsProps = {

package/src/components/Switch/Switch.styles.tsx

@@ -17,6 +17,7 @@ export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   padding: '0',
   cursor: 'pointer',
   transition: 'all 0.35s',
+  overflow: 'hidden',
 
   '&[data-state="checked"]': {
     $$color: '$colors$secondary500',
@@ -41,6 +42,12 @@ export const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
   transition: ' transform 300ms',
   borderRadius: '999999px',
   willChange: 'transform',
+  '&:hover': {
+    boxShadow: 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+    '-moz-box-shadow': 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+    '-webkit-box-shadow': 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+    '-o-box-shadow': 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+  },
 
   '&[data-state="checked"]': {
     transform: 'translateX(8px)',

package/src/components/TextField/TextField.tsx

@@ -17,14 +17,17 @@ function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
     style,
     variant,
     fullWidth,
+    labelProps,
     ...inputAttributes
   } = props;
   return (
     <>
       {label && (
         <>
-          <Label {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
-            <Typography variant="label" size="large">
+          <Label
+            className="_text"
+            {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
+            <Typography variant="label" size="large" {...labelProps}>
               {label}
             </Typography>
           </Label>

package/src/components/TextField/TextField.types.tsx

@@ -1,4 +1,5 @@
 import type { InputContainer } from './TextField.styles';
+import type { PropTypes as TypographyProps } from '../Typography/Typography.types';
 import type * as Stitches from '@stitches/react';
 
 type BaseProps = Stitches.VariantProps<typeof InputContainer>;
@@ -12,10 +13,11 @@ export type Ref =
   | undefined;
 
 export type PropTypes = {
-  label?: string;
+  label?: string | React.ReactNode;
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   size?: BaseSizes;
   variant?: BaseVariants;
   fullWidth?: boolean;
+  labelProps?: TypographyProps;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'size'>;

package/src/icons/Height.tsx

@@ -0,0 +1,24 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgHeight(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Height">
+        <path
+          id="Height_2"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.3807 23.7933C12.1204 24.0689 11.6983 24.0689 11.4379 23.7933L7.19526 19.301C6.93491 19.0254 6.93491 18.5784 7.19526 18.3028C7.45561 18.0271 7.87772 18.0271 8.13807 18.3028L11.2426 21.59V2.41003L8.13807 5.69723C7.87772 5.97289 7.45561 5.97289 7.19526 5.69723C6.93491 5.42156 6.93491 4.97462 7.19526 4.69896L11.4379 0.206747C11.6983 -0.0689157 12.1204 -0.0689157 12.3807 0.206747L16.6234 4.69896C16.8837 4.97462 16.8837 5.42156 16.6234 5.69723C16.363 5.97289 15.9409 5.97289 15.6805 5.69723L12.576 2.41003V21.59L15.6805 18.3028C15.9409 18.0271 16.363 18.0271 16.6234 18.3028C16.8837 18.5784 16.8837 19.0254 16.6234 19.301L12.3807 23.7933Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgHeight;

package/src/icons/Key.tsx

@@ -0,0 +1,32 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgKey(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg">
+      <g id="key">
+        <path
+          id="Vector"
+          d="M3.26028 12.4995C3.20753 12.4995 3.1495 12.4942 3.10203 12.489L1.95736 12.3307C1.40876 12.2569 0.912912 11.7663 0.828513 11.2072L0.670263 10.052C0.617513 9.68278 0.775763 9.20278 1.03951 8.93377L3.35523 6.61815C2.98071 5.12011 3.41325 3.53768 4.51573 2.44581C6.22482 0.742057 9.00473 0.736782 10.7191 2.44581C11.5473 3.27394 12.0009 4.37637 12.0009 5.54737C12.0009 6.71837 11.5473 7.82079 10.7191 8.64893C9.61136 9.74608 8.03414 10.1786 6.54659 9.79883L4.2256 12.1144C4.00405 12.3465 3.60843 12.4995 3.26028 12.4995ZM7.61214 1.95525C6.68902 1.95525 5.77117 2.30339 5.0696 3.00493C4.1201 3.94911 3.77723 5.3311 4.17285 6.61815C4.21505 6.76056 4.17813 6.90826 4.07263 7.01375L1.59338 9.49289C1.50371 9.58256 1.42986 9.81465 1.44569 9.93597L1.60393 11.0911C1.63558 11.2916 1.85186 11.5184 2.05231 11.5448L3.20225 11.703C3.32885 11.7241 3.56095 11.6503 3.65063 11.5606L6.14042 9.07619C6.24592 8.97069 6.39889 8.93904 6.53604 8.98124C7.80731 9.38212 9.19463 9.03926 10.1441 8.0898C10.8193 7.41463 11.1939 6.50737 11.1939 5.54737C11.1939 4.58209 10.8193 3.6801 10.1441 3.00493C9.45838 2.30866 8.53526 1.95525 7.61214 1.95525Z"
+          fill="#727272"
+        />
+        <path
+          id="Vector_2"
+          d="M4.84974 11.3351C4.74951 11.3351 4.64929 11.2982 4.57016 11.2191L3.35692 10.0059C3.20394 9.85291 3.20394 9.59973 3.35692 9.44676C3.50989 9.29379 3.76309 9.29379 3.91607 9.44676L5.12931 10.66C5.28229 10.8129 5.28229 11.0661 5.12931 11.2191C5.05019 11.2982 4.94996 11.3351 4.84974 11.3351Z"
+          fill="#727272"
+        />
+        <path
+          id="Vector_3"
+          d="M7.64781 6.69786C6.99371 6.69786 6.46094 6.16511 6.46094 5.51104C6.46094 4.85697 6.99371 4.32422 7.64781 4.32422C8.30191 4.32422 8.83468 4.85697 8.83468 5.51104C8.83468 6.16511 8.30191 6.69786 7.64781 6.69786ZM7.64781 5.11543C7.43153 5.11543 7.25218 5.29478 7.25218 5.51104C7.25218 5.72731 7.43153 5.90665 7.64781 5.90665C7.86408 5.90665 8.04343 5.72731 8.04343 5.51104C8.04343 5.29478 7.86408 5.11543 7.64781 5.11543Z"
+          fill="#727272"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgKey;