🍡 Display balance with less precision digits (#51)

Co-authored-by: Bartlomiej Tarczynski <[email protected]>

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 />

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]}

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