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

package/src/components/StepDetails/StepDetails.tsx

@@ -1,12 +1,13 @@
-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';
 import { Image } from '../common';
 import { Divider } from '../Divider';
+import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -16,16 +17,37 @@ import {
   stepInfoStyles,
   StepSeparator,
   SwapperImage,
-  swapperStyles,
+  swapperItemStyles,
+  SwapperSeparator,
+  swappersStyles,
   tokensContainerStyles,
   tokensStyles,
 } from './StepDetails.styles';
 
 const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
   (props, parentRef) => {
-    const { step, hasSeparator, type, state, isFocused, tabIndex } = props;
+    const {
+      step,
+      hasSeparator,
+      type,
+      state,
+      isFocused,
+      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>)
@@ -43,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()}>
@@ -73,12 +131,16 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 tokenImage={step.from.token.image}
                 size="small"
               />
-              <Typography
-                ml={4}
-                mr={4}
-                size="small"
-                color="$neutral700"
-                variant="body">{`${step.from.price.value} ${step.from.token.displayName}`}</Typography>
+              <Tooltip
+                content={step.from.price.realValue}
+                container={tooltipContainer}>
+                <Typography
+                  ml={4}
+                  mr={4}
+                  size="small"
+                  color="$neutral700"
+                  variant="body">{`${step.from.price.value} ${step.from.token.displayName}`}</Typography>
+              </Tooltip>
               <NextIcon color="gray" />
               <Divider size={4} direction="horizontal" />
               <ChainToken
@@ -86,13 +148,17 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 tokenImage={step.to.token.image}
                 size="small"
               />
-              <Typography
-                ml={4}
-                size="small"
-                color="$neutral700"
-                variant="body">{`${isCompleted ? '' : '~'}${
-                step.to.price.value
-              } ${step.to.token.displayName}`}</Typography>
+              <Tooltip
+                content={step.to.price.realValue}
+                container={tooltipContainer}>
+                <Typography
+                  ml={4}
+                  size="small"
+                  color="$neutral700"
+                  variant="body">{`${isCompleted ? '' : '~'}${
+                  step.to.price.value
+                } ${step.to.token.displayName}`}</Typography>
+              </Tooltip>
             </div>
             <Alerts pb={hasSeparator && type === 'quote-details'}>
               {step.alerts}

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 = {
@@ -22,4 +38,5 @@ export type StepDetailsProps = {
   state?: 'default' | 'in-progress' | 'completed' | 'warning' | 'error';
   isFocused?: boolean;
   tabIndex?: number;
+  tooltipContainer?: HTMLElement;
 };

package/src/components/SwapListItem/SwapListItem.tsx

@@ -40,6 +40,7 @@ export function SwapListItem(props: PropsWithChildren<PropTypes>) {
     onlyShowTime,
     status,
     swapTokenData,
+    tooltipContainer,
   } = props;
   return (
     <Main onClick={onClick.bind(null, requestId)}>
@@ -57,7 +58,11 @@ export function SwapListItem(props: PropsWithChildren<PropTypes>) {
             {getStatus(status)}
           </Typography>
         </Header>
-        <SwapToken data={swapTokenData} status={status} />
+        <SwapToken
+          data={swapTokenData}
+          status={status}
+          tooltipContainer={tooltipContainer}
+        />
       </Container>
     </Main>
   );

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

@@ -7,6 +7,7 @@ export interface SwapListItemProps {
   onClick: (requestId: string) => void;
   swapTokenData: SwapTokenData;
   onlyShowTime?: boolean;
+  tooltipContainer?: HTMLElement;
 }
 
 export interface LoadingProps {
@@ -31,6 +32,7 @@ export interface SwapTokenData {
       image: string;
     };
     amount: string;
+    realAmount: string;
   };
 
   to: {
@@ -42,6 +44,6 @@ export interface SwapTokenData {
       image: string;
     };
     amount: string;
-    estimatedAmount?: string;
+    realAmount: string;
   };
 }

package/src/components/SwapListItem/SwapToken.tsx

@@ -7,6 +7,7 @@ import { NextIcon } from '../../icons';
 import { ChainToken } from '../ChainToken';
 import { Divider } from '../Divider';
 import { Skeleton } from '../Skeleton';
+import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -70,16 +71,19 @@ export function SwapToken(props: PropTypes) {
         token: fromToken,
         amount: fromAmount,
         blockchain: fromBlockchain,
+        realAmount: fromRealAmount,
       },
       to: {
-        estimatedAmount,
         token: toToken,
         amount: toAmount,
         blockchain: toBlockchain,
+        realAmount: toRealAmount,
       },
     },
     status,
+    tooltipContainer,
   } = props;
+
   return (
     <TokenContainer>
       <Images>
@@ -125,9 +129,11 @@ export function SwapToken(props: PropTypes) {
               {fromToken.displayName}
             </Typography>
             {!!fromAmount && (
-              <Typography size="small" variant="body" color="neutral700">
-                {fromAmount}
-              </Typography>
+              <Tooltip content={fromRealAmount} container={tooltipContainer}>
+                <Typography size="small" variant="body" color="neutral700">
+                  {fromAmount}
+                </Typography>
+              </Tooltip>
             )}
           </TokenInfo>
           <Icon>
@@ -137,10 +143,11 @@ export function SwapToken(props: PropTypes) {
             <Typography size="medium" variant="title">
               {toToken.displayName}
             </Typography>
-
-            <Typography size="small" variant="body" color="neutral700">
-              {toAmount || estimatedAmount}
-            </Typography>
+            <Tooltip content={toRealAmount} container={tooltipContainer}>
+              <Typography size="small" variant="body" color="neutral700">
+                {toAmount}
+              </Typography>
+            </Tooltip>
           </TokenInfo>
         </Layout>
       )}

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

@@ -3,6 +3,7 @@ import type { LoadingProps, Status, SwapTokenData } from './SwapListItem.types';
 export interface SwapTokenProps {
   data: SwapTokenData;
   status: Status;
+  tooltipContainer?: HTMLElement;
 }
 
 export type PropTypes = SwapTokenProps | LoadingProps;

package/src/components/SwapListItem/mock.ts

@@ -305,6 +305,7 @@ export const swapTokenData: SwapTokenData = {
       image: 'https://api.rango.exchange/swappers/osmosis.png',
     },
     amount: '1.1',
+    realAmount: '1.1',
   },
   to: {
     token: {
@@ -315,5 +316,6 @@ export const swapTokenData: SwapTokenData = {
       image: 'https://api.rango.exchange/swappers/osmosis.png',
     },
     amount: '0.7',
+    realAmount: '0.7',
   },
 };

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/components/TokenAmount/TokenAmount.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import { ChainToken } from '../ChainToken';
 import { PriceImpact } from '../PriceImpact/PriceImpact';
+import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -27,37 +28,52 @@ export function TokenAmount(props: PropTypes) {
               {props.label}
             </Typography>
           )}
-          <div title={`${props.price.value} ${props.token.displayName}`}>
-            <Typography
-              ml={4}
-              size="medium"
-              variant="title"
-              style={{ fontWeight: 600 }}>
-              {props.price.value}
-            </Typography>
-            <Typography
-              ml={8}
-              size="medium"
-              variant="title"
-              style={{ fontWeight: 400 }}>
-              {props.token.displayName}
-            </Typography>
+          <div>
+            <Tooltip
+              content={props.price.realValue}
+              open={!props.price.realValue ? false : undefined}
+              container={props.tooltipContainer}>
+              <Typography
+                ml={4}
+                size="medium"
+                variant="title"
+                style={{ fontWeight: 600 }}>
+                {props.price.value}
+              </Typography>
+              <Typography
+                ml={8}
+                size="medium"
+                variant="title"
+                style={{ fontWeight: 400 }}>
+                {props.token.displayName}
+              </Typography>
+            </Tooltip>
           </div>
         </div>
       </div>
       {props.price.usdValue && props.price.usdValue !== '0' && (
         <div className={usdValueStyles()}>
-          {props.type === 'input' && (
-            <Typography mr={4} size="small" variant="body" color="$neutral700">
-              {`~$${props.price.usdValue}`}
-            </Typography>
-          )}
+          <Tooltip
+            content={props.price.realUsdValue}
+            container={props.tooltipContainer}>
+            {props.type === 'input' && (
+              <Typography
+                mr={4}
+                size="small"
+                variant="body"
+                color="$neutral700">
+                {`~$${props.price.usdValue}`}
+              </Typography>
+            )}
+          </Tooltip>
           {props.type === 'output' && (
             <PriceImpact
               size="small"
+              tooltipProps={{ container: props.tooltipContainer, side: 'top' }}
               outputUsdValue={props.price.usdValue}
               percentageChange={props.percentageChange}
               warningLevel={props.warningLevel}
+              realOutputUsdValue={props.price.realUsdValue}
             />
           )}
         </div>

package/src/components/TokenAmount/TokenAmount.types.ts

@@ -6,6 +6,7 @@ type BaseProps = Pick<SwapInputProps, 'token' | 'price'> & {
   direction?: 'vertical' | 'horizontal';
   centerAlign?: boolean;
   label?: string;
+  tooltipContainer?: HTMLElement;
 };
 
 type InputAmountProps = { type: 'input' };

package/src/components/Tooltip/Tooltip.styles.ts

@@ -5,6 +5,13 @@ import { Typography } from '../Typography';
 
 export const TooltipContent = styled(RadixTooltip.Content, {
   zIndex: '999999',
+  variants: {
+    align: {
+      right: {
+        position: 'absolute',
+      },
+    },
+  },
 });
 
 export const TooltipTypography = styled(Typography, {

package/src/components/Tooltip/Tooltip.tsx

@@ -19,15 +19,17 @@ export function Tooltip(props: PropsWithChildren<PropTypes>) {
     container,
     open,
     side = 'top',
+    style,
+    align,
   } = props;
   return (
     <RadixTooltip.Provider delayDuration={0}>
       <RadixTooltip.Root open={open}>
-        <RadixTooltip.Trigger asChild>
+        <RadixTooltip.Trigger asChild style={style}>
           <TriggerContent>{children}</TriggerContent>
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal container={container}>
-          <TooltipContent side={side} sideOffset={sideOffset}>
+          <TooltipContent align={align} side={side} sideOffset={sideOffset}>
             <TooltipTypography variant="label" size="medium" color={color}>
               {content}
             </TooltipTypography>

package/src/components/Tooltip/Tooltip.types.ts

@@ -1,7 +1,11 @@
+import type { TooltipContent } from './Tooltip.styles';
 import type * as RadixTooltip from '@radix-ui/react-tooltip';
+import type * as Stitches from '@stitches/react';
 import type { ComponentProps, ReactNode } from 'react';
 
 type RadixTooltipContentProps = ComponentProps<typeof RadixTooltip.Content>;
+type BaseProps = Stitches.VariantProps<typeof TooltipContent>;
+type BaseAlign = Exclude<BaseProps['align'], object>;
 
 export interface PropTypes {
   content: ReactNode;
@@ -10,4 +14,6 @@ export interface PropTypes {
   sideOffset?: RadixTooltipContentProps['sideOffset'];
   container?: HTMLElement;
   open?: boolean;
+  style?: Stitches.CSSProperties;
+  align?: BaseAlign;
 }

package/src/components/Wallet/Wallet.styles.ts

@@ -72,5 +72,5 @@ export const LoadingButton = styled('div', {
   backgroundColor: '$neutral100',
   alignItems: 'center',
   justifyContent: 'center',
-  width: 110,
+  width: 100,
 });

package/src/components/index.ts

@@ -16,6 +16,7 @@ export * from './Modal';
 export * from './MessageBox';
 export * from './PercentageChange';
 export * from './RadioGroup';
+export * from './RefreshProgressButton';
 export * from './RoutesOverview';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';