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 <[email protected]> --------- Co-authored-by: Omri Dan <[email protected]>
MetaMask · Nov 28, 2023 · 967bdc6 · 967bdc6
1 parent c55df00
commit 967bdc6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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,