truncate formatted balance

gear-tech · Dec 20, 2024 · aaa0941 · aaa0941
1 parent 4be9c1d
commit aaa0941
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 14 deletions.
diff --git a/frontend/src/components/formatted-balance/fortmatted-balance.module.scss b/frontend/src/components/formatted-balance/fortmatted-balance.module.scss
diff --git a/frontend/src/components/formatted-balance/fortmatted-balance.tsx b/frontend/src/components/formatted-balance/fortmatted-balance.tsx
@@ -2,12 +2,9 @@ import { formatBalance } from '@polkadot/util';
 import { ComponentProps } from 'react';
 import { formatUnits } from 'viem';
 
-import { cx } from '@/utils';
-
+import { TruncatedText } from '../layout';
 import { Tooltip } from '../tooltip';
 
-import styles from './fortmatted-balance.module.scss';
-
 type Props = {
   value: bigint;
   decimals: number;
@@ -22,9 +19,10 @@ function FormattedBalance({ value, decimals, symbol, tooltipPosition, className
 
   return (
     <Tooltip value={`${formattedValue} ${symbol}`} position={tooltipPosition}>
-      <span className={cx(styles.balance, className)}>
-        {compactBalance === '0' ? `${compactBalance} ${symbol}` : compactBalance}
-      </span>
+      <TruncatedText
+        value={compactBalance === '0' ? `${compactBalance} ${symbol}` : compactBalance}
+        className={className}
+      />
     </Tooltip>
   );
 }