@rango-dev/ui 0.26.0 → 0.26.1-next.1

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 = {