fix(web): Balance fetching

Author: ShubhamParkhi

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

@@ -37,7 +37,7 @@ const Balance: React.FC<IBalance> = ({ token }) => {
   });
 
   const formattedBalance = useMemo(() => {
-    const balance = isNativeTransaction ? nativeBalance : tokenBalance;
+    const balance = isNativeTransaction ? nativeBalance?.value : tokenBalance;
     return getFormattedBalance(balance, token);
   }, [isNativeTransaction, nativeBalance, tokenBalance, token]);
 

web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx

@@ -79,7 +79,7 @@ const TokenAndAmount: React.FC<ITokenAndAmount> = ({ quantity, setQuantity }) =>
   }, [quantity, balanceAmount, setHasSufficientNativeBalance]);
 
   const formattedBalance = useMemo(() => {
-    const balance = isNativeTransaction ? nativeBalance : tokenBalance;
+    const balance = isNativeTransaction ? nativeBalance?.value : tokenBalance;
     return getFormattedBalance(balance, sendingToken);
   }, [balanceAmount, sendingToken, isNativeTransaction, nativeBalance, tokenBalance]);
 

web/src/utils/format.ts

@@ -8,16 +8,20 @@ export const roundNumberDown = (value: number, fractionDigits = 0) => {
 
 export const formatUnitsWei = (value: bigint) => formatUnits(value, 18);
 
-export const formatValue = (value: string, fractionDigits, roundDown) => {
+export const formatValue = (value: string, fractionDigits: number, roundDown: boolean) => {
   let units = Number(value);
   if (roundDown) units = roundNumberDown(units, fractionDigits);
   return commify(units.toFixed(fractionDigits));
 };
 
-export const formatPNK = (value: bigint, fractionDigits = 0, roundDown = true) =>
-  formatValue(formatUnitsWei(value), fractionDigits, roundDown);
+export const formatPNK = (value: bigint, fractionDigits = 0, roundDown = true) => {
+  if (value === undefined) return "0";
+  return formatValue(formatUnitsWei(value), fractionDigits, roundDown);
+};
 
-export const formatETH = (value: bigint, fractionDigits = 4, roundDown = true) =>
-  formatValue(formatEther(value), fractionDigits, roundDown);
+export const formatETH = (value: bigint, fractionDigits = 4, roundDown = true) => {
+  if (value === undefined) return "0";
+  return formatValue(formatEther(value), fractionDigits, roundDown);
+};
 
 export const formatUSD = (value: number, fractionDigits = 2) => "$" + commify(Number(value).toFixed(fractionDigits));

web/src/utils/getFormattedBalance.ts

@@ -1,7 +1,7 @@
 import { formatETH, formatPNK } from "./format";
 
-export const getFormattedBalance = (balanceData: any, token: any) => {
-  if (!balanceData) return undefined;
-  if (token?.symbol === "PNK") return formatPNK(balanceData.value);
-  return formatETH(balanceData.value);
+export const getFormattedBalance = (balanceData: bigint | undefined, token: any) => {
+  if (balanceData === undefined) return undefined;
+  if (token?.symbol === "PNK") return formatPNK(balanceData);
+  return formatETH(balanceData);
 };