@rango-dev/ui 0.35.1-next.9 → 0.36.1-next.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/Tooltip.tsx

@@ -21,6 +21,7 @@ export function Tooltip(props: PropsWithChildren<TooltipPropTypes>) {
     side = 'top',
     styles,
     align,
+    alignOffset,
   } = props;
 
   return (
@@ -31,6 +32,7 @@ export function Tooltip(props: PropsWithChildren<TooltipPropTypes>) {
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal container={container}>
           <TooltipContent
+            alignOffset={alignOffset}
             align={align}
             side={side}
             sideOffset={sideOffset}

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

@@ -17,4 +17,5 @@ export interface TooltipPropTypes {
     content?: CSS;
   };
   align?: RadixTooltipContentProps['align'];
+  alignOffset?: RadixTooltipContentProps['alignOffset'];
 }

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

package/src/icons/RangoExplorer.tsx

@@ -17,9 +17,9 @@ function SvgRangoExplorer(props: SvgIconPropsWithChildren) {
       />
       <path
         d="M20.2351 15.5998C20.2351 18.1601 18.1596 20.2355 15.5994 20.2355C13.0392 20.2355 10.9637 18.1601 10.9637 15.5998C10.9637 13.0396 13.0392 10.9641 15.5994 10.9641C18.1596 10.9641 20.2351 13.0396 20.2351 15.5998ZM20.6394 20.7498C20.6096 20.7498 20.5817 20.7377 20.5642 20.7202L19.6076 19.7636C19.5686 19.7246 19.5637 19.6554 19.6091 19.6065C19.6486 19.5688 19.7169 19.5647 19.7652 19.61L20.7198 20.5646C20.7579 20.6028 20.7634 20.6698 20.7212 20.7184C20.6955 20.74 20.6657 20.7498 20.6394 20.7498Z"
-        stroke="#727272"
+        stroke="currentColor"
         strokeWidth={0.5}
-        fill="white"
+        fill="transparent"
       />
       <defs>
         <linearGradient