From 77fa00a92353a233e812b6d6c38d72ab03c4c949 Mon Sep 17 00:00:00 2001
From: Nikita Yutanov <nikitayutanov@gmail.com>
Date: Fri, 20 Dec 2024 15:15:36 +0300
Subject: [PATCH] truncate formatted balance

---
 .../formatted-balance/fortmatted-balance.module.scss |  7 -------
 .../formatted-balance/fortmatted-balance.tsx         | 12 +++++-------
 .../swap/components/balance/balance.module.scss      |  1 -
 3 files changed, 5 insertions(+), 15 deletions(-)
 delete mode 100644 frontend/src/components/formatted-balance/fortmatted-balance.module.scss

diff --git a/frontend/src/components/formatted-balance/fortmatted-balance.module.scss b/frontend/src/components/formatted-balance/fortmatted-balance.module.scss
deleted file mode 100644
index e603c026..00000000
--- a/frontend/src/components/formatted-balance/fortmatted-balance.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.balance {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  position: relative;
-}
diff --git a/frontend/src/components/formatted-balance/fortmatted-balance.tsx b/frontend/src/components/formatted-balance/fortmatted-balance.tsx
index 1627204d..fd654c7d 100644
--- 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>
   );
 }
diff --git a/frontend/src/features/swap/components/balance/balance.module.scss b/frontend/src/features/swap/components/balance/balance.module.scss
index bb461670..784db1cc 100644
--- a/frontend/src/features/swap/components/balance/balance.module.scss
+++ b/frontend/src/features/swap/components/balance/balance.module.scss
@@ -1,6 +1,5 @@
 .balance {
   display: flex;
-  align-items: flex-start;
   flex-direction: column;
 
   white-space: nowrap;