@rango-dev/ui 0.26.1-next.0 → 0.26.1-next.10

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/PriceImpact/PriceImpact.tsx

@@ -2,12 +2,20 @@ import type { PriceImpactProps } from './PriceImpact.types';
 
 import React from 'react';
 
-import { Typography } from '..';
+import { Tooltip, Typography } from '..';
 
 import { Container, OutputUsdValue } from './PriceImpact.styles';
 
 export function PriceImpact(props: PriceImpactProps) {
-  const { size, outputUsdValue, percentageChange, warningLevel, error } = props;
+  const {
+    size,
+    outputUsdValue,
+    realOutputUsdValue,
+    percentageChange,
+    warningLevel,
+    error,
+    tooltipProps,
+  } = props;
 
   let percentageChangeColor = '$neutral600';
   if (!outputUsdValue || warningLevel === 'low') {
@@ -19,12 +27,22 @@ export function PriceImpact(props: PriceImpactProps) {
   return (
     <Container>
       {outputUsdValue && (
-        <OutputUsdValue
-          size={size === 'small' ? 'small' : 'medium'}
-          variant="body"
-          color="$neutral600">
-          {`~$${outputUsdValue}`}
-        </OutputUsdValue>
+        <Tooltip
+          content={realOutputUsdValue}
+          container={tooltipProps?.container}
+          open={
+            !realOutputUsdValue || realOutputUsdValue === '0'
+              ? false
+              : undefined
+          }
+          side={tooltipProps?.side}>
+          <OutputUsdValue
+            size={size === 'small' ? 'small' : 'medium'}
+            variant="body"
+            color="$neutral600">
+            {`~$${outputUsdValue}`}
+          </OutputUsdValue>
+        </Tooltip>
       )}
       {((outputUsdValue && percentageChange) || !outputUsdValue) && (
         <Typography

package/src/components/PriceImpact/PriceImpact.types.ts

@@ -1,9 +1,16 @@
+import type { PropTypes as TooltipPropTypes } from '../Tooltip/Tooltip.types';
+
 export type PriceImpactWarningLevel = 'low' | 'high' | undefined;
 
 export type PriceImpactProps = {
   size: 'small' | 'large';
   outputUsdValue?: string;
+  realOutputUsdValue?: string;
   error?: string;
   percentageChange?: string | null;
   warningLevel?: PriceImpactWarningLevel;
+  tooltipProps?: {
+    container?: TooltipPropTypes['container'];
+    side?: TooltipPropTypes['side'];
+  };
 };

package/src/components/QuoteCost/QuoteCost.styles.ts

@@ -1,4 +1,4 @@
-import { css, styled } from '../../theme';
+import { css, keyframes, styled } from '../../theme';
 
 export const Container = styled('div', {
   borderRadius: '$xs',
@@ -23,7 +23,34 @@ export const iconStyles = css({
   alignItems: 'center',
 });
 
+const blinker = keyframes({
+  '50%': {
+    opacity: 0.2,
+  },
+});
+
 export const itemStyles = css({
   display: 'flex',
   alignItems: 'center',
+  '&.feeSection': {
+    cursor: 'pointer',
+    '&:hover': {
+      svg: {
+        color: '$secondary',
+      },
+      '._typography': {
+        color: '$secondary',
+      },
+    },
+  },
+  '&.warning': {
+    animation: `${blinker} 2s linear infinite`,
+
+    svg: {
+      color: '$warning500',
+    },
+    '._typography': {
+      color: '$warning500',
+    },
+  },
 });

package/src/components/QuoteCost/QuoteCost.tsx

@@ -3,6 +3,7 @@ import type { PropTypes } from './QuoteCost.types';
 import React from 'react';
 
 import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
+import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -13,17 +14,36 @@ import {
 } from './QuoteCost.styles';
 
 export function QuoteCost(props: PropTypes) {
-  const { fee, time, steps } = props;
+  const {
+    fee,
+    time,
+    steps,
+    onClickFee,
+    tooltipGas,
+    feeWarning,
+    tooltipContainer,
+  } = props;
   return (
     <Container>
-      <div className={itemStyles()}>
-        <div className={iconStyles()}>
-          <GasIcon size={12} color={'gray'} />
+      <Tooltip
+        container={tooltipContainer}
+        content={tooltipGas}
+        open={!onClickFee && !tooltipGas ? false : undefined}
+        side="bottom">
+        <div
+          className={`${itemStyles()} ${onClickFee ? 'feeSection' : ''} ${
+            feeWarning ? 'warning' : ''
+          }`}
+          onClick={onClickFee}>
+          <div className={iconStyles()}>
+            <GasIcon size={12} color={'gray'} />
+          </div>
+          <Typography ml={2} align="center" variant="body" size="small">
+            ${fee}
+          </Typography>
         </div>
-        <Typography ml={2} align="center" variant="body" size="small">
-          ${fee}
-        </Typography>
-      </div>
+      </Tooltip>
+
       <Separator />
       <div className={itemStyles()}>
         <div className={iconStyles()}>

package/src/components/QuoteCost/QuoteCost.types.ts

@@ -2,4 +2,8 @@ export type PropTypes = {
   fee: string;
   time: string | number;
   steps: number;
+  onClickFee?: () => void;
+  tooltipGas?: string;
+  feeWarning?: boolean;
+  tooltipContainer?: HTMLElement;
 };

package/src/components/RefreshProgressButton/RefreshProgressButton.styles.ts

@@ -0,0 +1,28 @@
+import { styled } from '../../theme';
+
+export const StyledEllipse = styled('ellipse', {
+  cx: '12.5px',
+  cy: '12.5px',
+  rx: '7.7px',
+  ry: '7.7px',
+  strokeLinecap: 'round',
+  fill: 'none',
+  strokeDasharray: 100,
+  transform: `rotate(20deg)`,
+  transformOrigin: 'center',
+  variants: {
+    type: {
+      'in-progress': {
+        stroke: '$info500',
+        strokeWidth: 2,
+      },
+      basic: {
+        strokeWidth: 1.8,
+      },
+    },
+  },
+});
+
+export const StyledPath = styled('path', {
+  fill: '$info500',
+});

package/src/components/RefreshProgressButton/RefreshProgressButton.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { SvgIconPropsWithChildren } from '../SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../SvgIcon';
+
+import { StyledEllipse, StyledPath } from './RefreshProgressButton.styles';
+
+const DEFAULT_STROKE_DASHOFFSET = 59;
+const MAX_PERCENTAGE = 100;
+const MAX_PROGRESS = 41;
+const MIN_PROGRESS = 0;
+const NORMALIZE_FACTOR = 10;
+const OPACITY_THRESHOLD = 82;
+const DIVISION_FACTOR = 2;
+
+const Ellipse = (props: { fill?: string; progress?: number }) => {
+  const type = props.progress ? 'in-progress' : 'basic';
+  return (
+    <StyledEllipse
+      type={type}
+      stroke="currentColor"
+      strokeDashoffset={props.progress || DEFAULT_STROKE_DASHOFFSET}
+    />
+  );
+};
+
+function RefreshProgressButton(
+  props: SvgIconPropsWithChildren & { progress: number }
+) {
+  const normalizeValue = (value: number) => {
+    return (value - OPACITY_THRESHOLD) / NORMALIZE_FACTOR;
+  };
+  const normalizedProgress = Math.min(
+    props.progress / DIVISION_FACTOR,
+    MAX_PROGRESS
+  );
+  const opacity =
+    normalizedProgress !== MAX_PROGRESS
+      ? MIN_PROGRESS
+      : normalizeValue(props.progress);
+
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <Ellipse />
+      <Ellipse progress={MAX_PERCENTAGE - normalizedProgress} />
+
+      <path
+        d="M19.2696 9.6089C19.1207 9.49207 19.0218 9.31141 19.01 9.10738L18.807 5.14476C18.788 4.77467 19.0763 4.45089 19.4464 4.43183C19.8165 4.41278 20.1402 4.70108 20.1593 5.07117L20.3622 9.0338C20.3813 9.40389 20.093 9.72767 19.7229 9.74672C19.5584 9.76661 19.3973 9.70903 19.2696 9.6089Z"
+        fill="currentColor"
+      />
+      <StyledPath
+        d="M19.2696 9.6089C19.1207 9.49207 19.0218 9.31141 19.01 9.10738L18.807 5.14476C18.788 4.77467 19.0763 4.45089 19.4464 4.43183C19.8165 4.41278 20.1402 4.70108 20.1593 5.07117L20.3622 9.0338C20.3813 9.40389 20.093 9.72767 19.7229 9.74672C19.5584 9.76661 19.3973 9.70903 19.2696 9.6089Z"
+        fillOpacity={opacity}
+      />
+      <path
+        d="M15.5108 9.47903C15.3476 9.35108 15.2457 9.14511 15.2505 8.9198C15.2639 8.55221 15.575 8.25778 15.9482 8.26404L19.707 8.3939C20.0802 8.40016 20.3691 8.71837 20.3628 9.09152C20.3565 9.46466 20.0383 9.75353 19.6652 9.74728L15.9007 9.62451C15.7529 9.62312 15.6243 9.56804 15.5108 9.47903Z"
+        fill="currentColor"
+      />
+      <StyledPath
+        d="M15.5108 9.47903C15.3476 9.35108 15.2457 9.14511 15.2505 8.9198C15.2639 8.55221 15.575 8.25778 15.9482 8.26404L19.707 8.3939C20.0802 8.40016 20.3691 8.71837 20.3628 9.09152C20.3565 9.46466 20.0383 9.75353 19.6652 9.74728L15.9007 9.62451C15.7529 9.62312 15.6243 9.56804 15.5108 9.47903Z"
+        fillOpacity={opacity}
+      />
+    </svg>
+  );
+}
+export { RefreshProgressButton };

package/src/components/RefreshProgressButton/index.ts

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

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',
 });