From ff866b669e99bbb1beb3bee4068d249bdd7d070b Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Tue, 30 Apr 2024 14:43:31 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=A1=20Display=20balance=20with=20less?=
 =?UTF-8?q?=20precision=20digits=20(#51)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Bartlomiej Tarczynski <51199571+b-tarczynski@users.noreply.github.com>
---
 packages/frontend/src/components/form/Input.tsx    |  4 ++--
 .../frontend/src/components/form/ReviewForm.tsx    |  3 ++-
 .../frontend/src/utils/formatters/formatBalance.ts | 14 ++++++++++++++
 3 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/src/utils/formatters/formatBalance.ts

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]}
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()
+}