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

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

@@ -19,11 +19,12 @@ export function Tooltip(props: PropsWithChildren<PropTypes>) {
     container,
     open,
     side = 'top',
+    style,
   } = 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}>

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

@@ -1,4 +1,5 @@
 import type * as RadixTooltip from '@radix-ui/react-tooltip';
+import type { CSSProperties } from '@stitches/react';
 import type { ComponentProps, ReactNode } from 'react';
 
 type RadixTooltipContentProps = ComponentProps<typeof RadixTooltip.Content>;
@@ -10,4 +11,5 @@ export interface PropTypes {
   sideOffset?: RadixTooltipContentProps['sideOffset'];
   container?: HTMLElement;
   open?: boolean;
+  style?: CSSProperties;
 }

package/src/containers/SwapInput/SwapInput.tsx

@@ -3,7 +3,13 @@ import type { SwapInputProps } from './SwapInput.types';
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { Divider, PriceImpact, Skeleton, Typography } from '../../components';
+import {
+  Divider,
+  PriceImpact,
+  Skeleton,
+  Tooltip,
+  Typography,
+} from '../../components';
 
 import {
   amountStyles,
@@ -77,36 +83,61 @@ export function SwapInput(props: SwapInputProps) {
             </>
           ) : (
             <>
-              <InputAmount
-                disabled={props.disabled || props.mode === 'To'}
-                style={{ padding: 0 }}
-                value={props.price.value}
-                type={'onInputChange' in props ? 'number' : 'text'}
-                size="large"
-                placeholder="0"
-                variant="ghost"
-                min={0}
-                {...('onInputChange' in props && {
-                  onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
-                    props.onInputChange(event.target.value),
-                })}
-              />
+              <Tooltip
+                content={props.price.realValue}
+                container={props.tooltipContainer}
+                open={
+                  !props.price.realValue || props.price.realValue === '0'
+                    ? false
+                    : undefined
+                }>
+                <InputAmount
+                  disabled={props.disabled || props.mode === 'To'}
+                  style={{ padding: 0 }}
+                  value={props.price.value}
+                  type={'onInputChange' in props ? 'number' : 'text'}
+                  size="large"
+                  placeholder="0"
+                  variant="ghost"
+                  min={0}
+                  {...('onInputChange' in props && {
+                    onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+                      props.onInputChange(event.target.value),
+                  })}
+                />
+              </Tooltip>
               {'percentageChange' in props ? (
                 <PriceImpact
                   size="large"
+                  tooltipProps={{
+                    container: props.tooltipContainer,
+                    side: 'bottom',
+                  }}
                   outputUsdValue={props.price.usdValue}
+                  realOutputUsdValue={props.price.realUsdValue}
                   error={props.price.error}
                   percentageChange={props.percentageChange}
                   warningLevel={props.warningLevel}
                 />
               ) : (
-                <ValueTypography hasWarning={!!props.price.error}>
-                  <UsdPrice variant="body" size="medium">
-                    {props.price.usdValue
-                      ? `~$${props.price.usdValue}`
-                      : props.price.error}
-                  </UsdPrice>
-                </ValueTypography>
+                <Tooltip
+                  content={props.price.realUsdValue}
+                  container={props.tooltipContainer}
+                  open={
+                    !props.price.realUsdValue ||
+                    props.price.realUsdValue === '0'
+                      ? false
+                      : undefined
+                  }
+                  side="bottom">
+                  <ValueTypography hasWarning={!!props.price.error}>
+                    <UsdPrice variant="body" size="medium">
+                      {props.price.usdValue
+                        ? `~$${props.price.usdValue}`
+                        : props.price.error}
+                    </UsdPrice>
+                  </ValueTypography>
+                </Tooltip>
               )}
             </>
           )}

package/src/containers/SwapInput/SwapInput.types.ts

@@ -12,6 +12,8 @@ export type BaseProps = {
   price: {
     value: string;
     usdValue?: string;
+    realValue?: string;
+    realUsdValue?: string;
     error?: string;
   };
   loading?: boolean;
@@ -20,6 +22,7 @@ export type BaseProps = {
   label: string;
   sharpBottomStyle?: boolean;
   onClickToken: () => void;
+  tooltipContainer?: HTMLElement;
 };
 
 type FromProps = {