DynamicHookComponent does use the connected wallet

[chaincrucial]

examples/next-app-route/app/_components/dinamycHook.tsx

Lines 14 to 17 in 314fab5

	setUseCustomHook(() => useWallet);
	const wallet = await BrowserWallet.enable('eternl');
	const balance = await wallet.getBalance();
	console.log("balance",balance);

The dynamic hook is hardcoded to use eternl and does not show how to hook to a connected wallet.

Reproduction Steps

If there is no eternl wallet w/ approved Dapp it is easy to overlook in the developer console. The reproduction steps could be much shorter, but to demonstrate fully I have described the testing environment I used which made this quite apparent.

1. Create 2 testing wallets, 1 in lace and 1 in eternl.
2. Enable Dapp for wallet in eternl
3. run npm run dev for next-app-route.
4. Open Localhost:3000
   1. Connect Lace, approve Dapp (, and disconnect
   2. Connect Eternel, approve Dapp and disconnect
5. Fund the lace wallet with 10,000 tADA from the faucet.
6. Send 1000 tADA to the eternl wallet.
7. Open localhost:3000, open the developer console
   1. Connect Lace wallet (with 10k tADA balance)
   2. Observe dynamic hoook print the balance of 1000 tADA from the eternl wallet, instead of the 8999 tADA of the connected Lace wallets balance.

Expected Behavior

1. The DynamicHook should access the connected wallet, regardless of which wallet the user connected.
2. The balance displayed should be for the connected wallet and not potentially access a different wallet that also approved a Dapp connection.

[chaincrucial]

Also, when an eternl wallet is already Dapp approved, the balance of eternl is displayed prior to the user connecting any wallet.

[chaincrucial]

I am unsure if this is the best way to handle this so I'm skipping a PR at the moment in favor of discussion. I did work around using a hardcoded wallet and showing a balance before the wallet is connected by delaying access until after useCustomHook is not null

examples/next-app-route/app/_components/dinamycHook.tsx

Lines 27 to 32 in 314fab5

	if (useCustomHook === null) {
	return <div>Loading...</div>;
	}
	const result = useCustomHook();
	console.log(result);

Then creating a new async function and calling it:

  if (useCustomHook === null) {
    return <div>Loading...</div>;
  }

  const result = useCustomHook();
  console.log(result);

  const ConnectedWalletBalance = async () => {
    const wallet = result.wallet;
    const balance = await wallet.getBalance();
    console.log("balance",balance);
    }
  ConnectedWalletBalance();

Which could instead be:

  if (useCustomHook === null) {
    return <div>Loading...</div>;
  }

  const {wallet, connected} = useCustomHook(); // Reference the useWallet Hook https://meshjs.dev/react/wallet-hooks#useWallet

  const ConnectedWalletBalance = async () => {
    const balance = await wallet.getBalance();
    console.log("connectedWalletBalance",balance);
    }
  ConnectedWalletBalance();


  return (
    <div>      
      <div>Hook Result: {connected.toString()}</div>
    </div>
  );
};

Unsure what the preferred example would be, but I think demonstrating how to interact with useWallet() and useCustomHook() in the example makes the most sense to help a new developer learn how to leverage MeshJS.

[jinglescode]

for examples/next-app-route example, its really just an example, and because its nextjs app route, requires all these hacky workaround to use hooks.

to help a new developer learn how to leverage MeshJS
use nextjs page instead.