@rango-dev/ui 0.35.1-next.9 → 0.36.0

package/src/components/TokenAmount/TokenAmount.tsx

@@ -6,7 +6,7 @@ import { ChainToken } from '../ChainToken';
 import { Divider } from '../Divider';
 import { PriceImpact } from '../PriceImpact';
 import { ValueTypography } from '../PriceImpact/PriceImpact.styles';
-import { Tooltip } from '../Tooltip';
+import { NumericTooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -33,7 +33,7 @@ export function TokenAmount(props: PropTypes) {
             </Typography>
           )}
           <div>
-            <Tooltip
+            <NumericTooltip
               content={props.price.realValue}
               open={!props.price.realValue ? false : undefined}
               container={props.tooltipContainer}>
@@ -50,13 +50,13 @@ export function TokenAmount(props: PropTypes) {
                 style={{ fontWeight: 400 }}>
                 {props.token.displayName}
               </Typography>
-            </Tooltip>
+            </NumericTooltip>
           </div>
         </div>
       </div>
       {props.price.usdValue && props.price.usdValue !== '0' && (
         <div className={usdValueStyles()}>
-          <Tooltip
+          <NumericTooltip
             content={props.price.realUsdValue}
             container={props.tooltipContainer}>
             {props.type === 'input' && (
@@ -67,7 +67,7 @@ export function TokenAmount(props: PropTypes) {
                 <Divider direction="horizontal" size={4} />
               </ValueTypography>
             )}
-          </Tooltip>
+          </NumericTooltip>
           {props.type === 'output' && (
             <PriceImpact
               size="small"

package/src/components/Tooltip/NumericTooltip.tsx

@@ -0,0 +1,16 @@
+import type { NumericTooltipPropTypes } from './NumericTooltip.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Tooltip } from './Tooltip';
+
+export function NumericTooltip(
+  props: PropsWithChildren<NumericTooltipPropTypes>
+) {
+  const MAX_DECIMALS = 12;
+  const formattedNumber = Number(props.content)
+    .toFixed(props.maxDecimals || MAX_DECIMALS)
+    .replace(/(?:\.0*|(\.\d+?)0*)$/, '$1');
+  return <Tooltip {...props} content={formattedNumber} />;
+}

package/src/components/Tooltip/NumericTooltip.types.tsx

@@ -0,0 +1,6 @@
+import type { TooltipPropTypes } from './Tooltip.types';
+
+export interface NumericTooltipPropTypes extends TooltipPropTypes {
+  content: string | number | null | undefined;
+  maxDecimals?: number;
+}

package/src/components/Tooltip/index.ts

@@ -1,2 +1,4 @@
 export { Tooltip } from './Tooltip';
 export type { TooltipPropTypes } from './Tooltip.types';
+export { NumericTooltip } from './NumericTooltip';
+export type { NumericTooltipPropTypes } from './NumericTooltip.types';

package/src/components/Wallet/Wallet.helpers.ts

@@ -21,7 +21,7 @@ export function makeInfo(state: WalletState): Info {
     case WalletState.CONNECTING:
       return {
         color: 'neutral600',
-        description: i18n.t('Connecting...'),
+        description: i18n.t('Connecting ...'),
         tooltipText: i18n.t('Connecting'),
       };
     case WalletState.DISCONNECTED:

package/src/containers/SwapInput/SwapInput.tsx

@@ -5,9 +5,9 @@ import React from 'react';
 
 import {
   Divider,
+  NumericTooltip,
   PriceImpact,
   Skeleton,
-  Tooltip,
   Typography,
 } from '../../components';
 import { UI_ID } from '../../constants';
@@ -96,7 +96,8 @@ export function SwapInput(props: SwapInputPropTypes) {
             </>
           ) : (
             <>
-              <Tooltip
+              <NumericTooltip
+                align="end"
                 content={props.price.realValue}
                 container={props.tooltipContainer}
                 open={
@@ -109,6 +110,7 @@ export function SwapInput(props: SwapInputPropTypes) {
                   style={{ padding: 0 }}
                   value={props.price.value}
                   type={'onInputChange' in props ? 'number' : 'text'}
+                  step="any"
                   size="large"
                   placeholder="0"
                   variant="ghost"
@@ -119,7 +121,7 @@ export function SwapInput(props: SwapInputPropTypes) {
                       props.onInputChange(event.target.value),
                   })}
                 />
-              </Tooltip>
+              </NumericTooltip>
               {'percentageChange' in props ? (
                 <PriceImpact
                   size="medium"
@@ -134,7 +136,7 @@ export function SwapInput(props: SwapInputPropTypes) {
                   warningLevel={props.warningLevel}
                 />
               ) : (
-                <Tooltip
+                <NumericTooltip
                   content={props.price.realUsdValue}
                   container={props.tooltipContainer}
                   open={
@@ -153,7 +155,7 @@ export function SwapInput(props: SwapInputPropTypes) {
                         : props.price.error}
                     </UsdPrice>
                   </ValueTypography>
-                </Tooltip>
+                </NumericTooltip>
               )}
             </>
           )}

package/src/containers/SwapInput/TokenSection.styles.ts

@@ -1,6 +1,5 @@
-import { ChainImageContainer } from 'src/components/ChainToken/ChainToken.styles';
-
 import { Button } from '../../components';
+import { ChainImageContainer } from '../../components/ChainToken/ChainToken.styles';
 import { css, darkTheme, styled } from '../../theme';
 
 export const Container = styled(Button, {