Getting undefined value after connecting the wallet

[jairaj0]

package.json

"dependencies": {
"@reown/appkit": "^1.0.2",
"@reown/appkit-adapter-solana": "^1.0.2",
"@solana/wallet-adapter-wallets": "^0.19.32",
"@solana/web3.js": "^1.95.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-toastify": "^10.0.5"
},

App.jsx

// App.tsx
import { createAppKit, useAppKitProvider } from '@reown/appkit/react'
import { SolanaAdapter } from '@reown/appkit-adapter-solana/react'
import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/networks'
import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets'
import { useAppKitAccount } from '@reown/appkit/vue'
import { useEffect } from 'react'

// 0. Set up Solana Adapter
const solanaWeb3JsAdapter = new SolanaAdapter({
wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()]
})

// 1. Get projectId from https://cloud.reown.com
const projectId = 'bdb051d52ce4ae1849b9e253....'

// 2. Create a metadata object - optional
const metadata = {
name: 'AppKit',
description: 'AppKit Solana Example',
url: 'https://web3modal.com', // origin must match your domain & subdomain
icons: ['https://avatars.githubusercontent.com/u/179229932']
}

// 3. Create modal
createAppKit({
adapters: [solanaWeb3JsAdapter],
networks: [solana, solanaTestnet, solanaDevnet],
metadata: metadata,
projectId,
features: {
analytics: true // Optional - defaults to your Cloud configuration
}
})

const App = () => {
const { walletProvider, connection } = useAppKitProvider();
const { address, currentChain } = useAppKitAccount()

console.log({ walletProvider, connection , address , currentChain });

useEffect(() => {
  (async () => {
    // Ensure walletProvider and connection are defined
    if (walletProvider?.publicKey && connection) {
      try {
        const balance = await connection.getBalance(walletProvider.publicKey);
        console.log({ balance });  // Display the balance
        console.log({ walletProvider, connection }); // Display walletProvider and connection objects
      } catch (error) {
        console.error('Error fetching balance:', error);
      }
    } else {
      console.warn('Wallet not connected or connection is undefined.');
    }
  })();
}, [connection, walletProvider, walletProvider?.publicKey]);

return (
<>

</>
);
}

export default App;

in console I get this output

{walletProvider: undefined, connection: undefined, address: '64Tx7ji4tjPyRt2QCozGJNZ...f8ss........', currentChain: undefined}

[harissatti]

facing the same issue in ethers