From fa3422f5b964833c5ff80dc7439575431a1dff19 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <maria.rushkova@trusttoken.com>
Date: Tue, 30 Apr 2024 12:40:55 +0200
Subject: [PATCH 1/2] Add `formatBalance` function

---
 .../frontend/src/utils/formatters/formatBalance.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 packages/frontend/src/utils/formatters/formatBalance.ts

diff --git a/packages/frontend/src/utils/formatters/formatBalance.ts b/packages/frontend/src/utils/formatters/formatBalance.ts
new file mode 100644
index 000000000..18bfdc323
--- /dev/null
+++ b/packages/frontend/src/utils/formatters/formatBalance.ts
@@ -0,0 +1,14 @@
+import { formatEther } from 'viem'
+
+const decimalPlaces = 4
+const factor = 10 ** decimalPlaces
+
+export function formatBalance(balance: bigint | undefined) {
+  if (!balance) {
+    return '-'
+  }
+
+  const balanceStr = formatEther(balance)
+  const formattedValue = Math.round(Number(balanceStr) * factor) / factor
+  return formattedValue.toString()
+}

From 1bfef69e17dec63b36f2bb8c13e4d4f22cf504d1 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <maria.rushkova@trusttoken.com>
Date: Tue, 30 Apr 2024 12:42:49 +0200
Subject: [PATCH 2/2] Display balance with less precision digits

---
 packages/frontend/src/components/form/Input.tsx      | 4 ++--
 packages/frontend/src/components/form/ReviewForm.tsx | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/form/Input.tsx b/packages/frontend/src/components/form/Input.tsx
index e17728210..56a6aa5be 100644
--- a/packages/frontend/src/components/form/Input.tsx
+++ b/packages/frontend/src/components/form/Input.tsx
@@ -5,7 +5,7 @@ import { useAccount, useBalance } from 'wagmi'
 import { formatInputAmount } from './formatInputAmount'
 import { CloseCircleIcon, EtherIcon } from '../icons'
 import { Colors } from '@/styles/colors'
-import { formatEther } from 'viem'
+import { formatBalance } from '@/utils/formatters/formatBalance'
 
 interface InputProps {
   initialAmount: string
@@ -63,7 +63,7 @@ export const Input = ({ initialAmount, setAmount, notEnoughBalance, bidTooLow }:
 
   return (
     <InputWrapper $userHasBid={!!userBid}>
-      <InputLabel>Balance: {userBalance !== undefined ? formatEther(userBalance) : '-'} ETH</InputLabel>
+      <InputLabel>Balance: {formatBalance(userBalance)} ETH</InputLabel>
       <StyledInputWrapper $isBadAmount={notEnoughBalance || bidTooLow}>
         <TokenIconWrapper>
           <EtherIcon />
diff --git a/packages/frontend/src/components/form/ReviewForm.tsx b/packages/frontend/src/components/form/ReviewForm.tsx
index e1dddf60a..4da7ca3c9 100644
--- a/packages/frontend/src/components/form/ReviewForm.tsx
+++ b/packages/frontend/src/components/form/ReviewForm.tsx
@@ -5,6 +5,7 @@ import { Form, FormRow } from '.'
 import { formatEther } from 'viem'
 import { Button } from '../buttons'
 import { heading } from '../auction/AuctionTransaction'
+import { formatBalance } from '@/utils/formatters/formatBalance'
 
 const amountLabel = {
   [Transactions.Place]: 'Your Bid',
@@ -44,7 +45,7 @@ export const ReviewForm = ({ action: { status, ...action }, amount, impact, view
       )}
       <FormRow>
         <span>Wallet Balance</span>
-        <span>{!!etherBalance && formatEther(etherBalance)} ETH</span>
+        <span>{formatBalance(etherBalance)} ETH</span>
       </FormRow>
       <Button view="primary" isLoading={isPending} onClick={sendTransaction} wide>
         {heading[action.type]}