refactor(web): useReadContract hook from wagmi

Author: ShubhamParkhi

web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/Balance.tsx

@@ -1,10 +1,11 @@
 import React, { useMemo } from "react";
 import styled from "styled-components";
 import Skeleton from "react-loading-skeleton";
-import { useAccount, useBalance } from "wagmi";
+import { useAccount, useReadContract } from "wagmi";
 import { IToken } from "context/NewTransactionContext";
 import { isUndefined } from "utils/index";
 import { getFormattedBalance } from "utils/getFormattedBalance";
+import { erc20Abi } from "viem";
 
 const Container = styled.p`
   color: ${({ theme }) => theme.primaryText};
@@ -23,9 +24,11 @@ interface IBalance {
 const Balance: React.FC<IBalance> = ({ token }) => {
   const { address } = useAccount();
 
-  const { data: balanceData } = useBalance({
-    address: address,
-    token: token?.address === "native" ? undefined : token?.address,
+  const { data: balanceData } = useReadContract({
+    address: token?.address as `0x${string}`,
+    abi: erc20Abi,
+    functionName: 'balanceOf',
+    args: [address as `0x${string}`],
   });
 
   const formattedBalance = useMemo(() => getFormattedBalance(balanceData, token), [balanceData, token]);