From 967bdc67ef6f5b7ccc05e5e223280f0cb6d77c26 Mon Sep 17 00:00:00 2001
From: abretonc7s <107169956+abretonc7s@users.noreply.github.com>
Date: Tue, 28 Nov 2023 16:12:05 +0800
Subject: [PATCH] fix: balance not updating on metamask button (#553)

* fix: balance not updating on metamask button

* Update packages/sdk-react-ui/src/MetaMaskUIProvider.tsx

Co-authored-by: Omri Dan <61094771+omridan159@users.noreply.github.com>

---------

Co-authored-by: Omri Dan <61094771+omridan159@users.noreply.github.com>
---
 packages/sdk-react-ui/package.json            |  6 +++-
 .../src/MetaMaskButton/Balance.tsx            | 29 +++++++++++++++----
 .../sdk-react-ui/src/MetaMaskUIProvider.tsx   |  2 +-
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/sdk-react-ui/package.json b/packages/sdk-react-ui/package.json
index 79309eae2..6b13951ab 100644
--- a/packages/sdk-react-ui/package.json
+++ b/packages/sdk-react-ui/package.json
@@ -116,7 +116,11 @@
       "@metamask/sdk-react>@metamask/sdk-communication-layer>utf-8-validate": false,
       "@metamask/sdk-react>@metamask/sdk>@metamask/sdk-communication-layer>bufferutil": false,
       "@metamask/sdk-react>@metamask/sdk>@metamask/sdk-communication-layer>eciesjs>secp256k1": false,
-      "@metamask/sdk-react>@metamask/sdk>@metamask/sdk-communication-layer>utf-8-validate": false
+      "@metamask/sdk-react>@metamask/sdk>@metamask/sdk-communication-layer>utf-8-validate": false,
+      "@metamask/sdk>@metamask/sdk-communication-layer>bufferutil": false,
+      "@metamask/sdk>@metamask/sdk-communication-layer>eciesjs>secp256k1": false,
+      "@metamask/sdk>@metamask/sdk-communication-layer>utf-8-validate": false,
+      "@metamask/sdk>eciesjs>secp256k1": false
     }
   }
 }
diff --git a/packages/sdk-react-ui/src/MetaMaskButton/Balance.tsx b/packages/sdk-react-ui/src/MetaMaskButton/Balance.tsx
index ab46e73f7..f634cf515 100644
--- a/packages/sdk-react-ui/src/MetaMaskButton/Balance.tsx
+++ b/packages/sdk-react-ui/src/MetaMaskButton/Balance.tsx
@@ -1,21 +1,38 @@
-import React from 'react';
+import { useSDK } from '@metamask/sdk-react';
+import React, { useMemo } from 'react';
 import {
-  useNetwork,
   useAccount,
   useBalance,
+  useNetwork,
 } from '../hooks/MetaMaskWagmiHooks';
-import { getBalance } from './utils';
 
 const Balance = ({ theme }: { theme: string }) => {
   const { address, isConnected } = useAccount();
   const { chain } = useNetwork();
-  const { data, isError, isLoading } = useBalance({
+  const { isError, isLoading } = useBalance({
     address: address,
     chainId: chain?.id,
     enabled: isConnected,
   });
+  const { balance } = useSDK();
+  const decimals = 2;
+
+  const formattedBalance = useMemo(() => {
+    if (!balance) {
+      return `0.${'0'.repeat(decimals)}`;
+    }
+    // Convert the hexadecimal balance to a decimal number
+    const balanceInWei = parseInt(balance, 16);
+
+    // Assuming the balance is in Wei (for Ethereum), convert it to Ether.
+    // 1 Ether = 1e18 Wei
+    const balanceInEther = balanceInWei / 1e18;
+
+    // Format the number
+    return balanceInEther.toFixed(decimals);
+  }, [balance, decimals]);
 
-  const balance = getBalance({ data, isError, isLoading });
+  // const balance = getBalance({ data, isError, isLoading });
 
   if (!balance || isLoading || isError) return null;
 
@@ -29,7 +46,7 @@ const Balance = ({ theme }: { theme: string }) => {
           theme === 'light' ? 'tw-bg-neutral-200' : 'tw-bg-neutral-400'
         } tw-p-1.5 tw-rounded`}
       >
-        {balance}
+        {formattedBalance}
       </span>
     </div>
   );
diff --git a/packages/sdk-react-ui/src/MetaMaskUIProvider.tsx b/packages/sdk-react-ui/src/MetaMaskUIProvider.tsx
index d40a71032..930e916da 100644
--- a/packages/sdk-react-ui/src/MetaMaskUIProvider.tsx
+++ b/packages/sdk-react-ui/src/MetaMaskUIProvider.tsx
@@ -64,7 +64,7 @@ const WagmiWrapper = ({
     if (debug) {
       console.debug(`[MetamaskProvider] validConnectors`, { ready, sdk });
     }
-    if (ready && sdk) {
+    if (ready && sdk?.isInitialized()) {
       return [
         new MetaMaskConnector({
           chains: networks,