WalletContextState is not getting updated, so cannot get any value like publicKey or connected

[nukec]

I successfully connect to the wallet:

Code is below, but publicKey is not getting updated after I am connected so useEffects is not triggered aka I am not getting anything from useWallet:

import {
  WalletError,
} from "@solana/wallet-adapter-base";
import {
  ConnectionProvider,
  useLocalStorage,
  useWallet,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import {
  getBloctoWallet,
  getLedgerWallet,
  getPhantomWallet,
  getSlopeWallet,
  getSolflareWallet,
  getSolletExtensionWallet,
  getSolletWallet,
} from "@solana/wallet-adapter-wallets";
import { useSnackbar } from "notistack";
import { useCallback, useEffect, useMemo } from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import {
  atomClusterApiUrl,
  atomIsWalletConnected,
  atomNetwork,
} from "../../recoil/atoms";

function WalletSolana() {
  const network = useRecoilValue(atomNetwork);
  const clusterUrl = useRecoilValue(atomClusterApiUrl);

  const { publicKey, connected } = useWallet();

  const [isWalletConnected, setWalletConnected] = useRecoilState(
    atomIsWalletConnected
  );

  const [autoConnect, setAutoConnect] = useLocalStorage("autoConnect", false);

  const wallets = useMemo(
    () => [
      getPhantomWallet(),
      getSolflareWallet(),
      getSlopeWallet(),
      getLedgerWallet(),
      getBloctoWallet(),
      getSolletWallet(),
      getSolletExtensionWallet(),
    ],
    [network]
  );

  const { enqueueSnackbar } = useSnackbar();

  const onError = useCallback(
    (error: WalletError) => {
      enqueueSnackbar(
        error.message ? `${error.name}: ${error.message}` : error.name,
        { variant: "error" }
      );
      console.error(error);
    },
    [enqueueSnackbar]
  );

  useEffect(() => {
    if (publicKey) {
      console.log("got public key " + publicKey);
    }
  }, [publicKey]);

  return (
    <div>
      <ConnectionProvider endpoint={clusterUrl}>
        <WalletProvider
          wallets={wallets}
          onError={onError}
          autoConnect={autoConnect}
        >
          <ReactUIWalletModalProvider>
            <ReactUIWalletMultiButton />
          </ReactUIWalletModalProvider>
        </WalletProvider>
      </ConnectionProvider>
    </div>
  );
}

export default WalletSolana;

[nukec]

This has been resolved by wrapping the app with context.

[jordaaash]

Yeah, you need to wrap the app -- or more specifically, any component subtree you expect to call the useWallet hook from -- with the context. Glad you figured out out!

[DadAndSonCartoon]

Thanks for the questions and answers. I was briefly stuck on this.

[justinbalaguer]

can somebody give me an example on how should I wrap my component with context?

[jordaaash]

@justinbalaguer See https://github.com/solana-labs/wallet-adapter/blob/master/packages/starter/example/components/ContextProvider.tsx

In the example Next.js app, this is used to wrap the entire app: https://github.com/solana-labs/wallet-adapter/blob/master/packages/starter/example/pages/_app.tsx