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} ); 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,