The accountChanged event is not triggering when switching accounts directly from Phantom Wallet. This issue occurs in a React + Vite project using @solana/wallet-adapter.

[Ritikchhipa5]

The accountChanged event is not triggering when switching accounts directly from Phantom Wallet. This issue occurs in a React + Vite project using @solana/wallet-adapter.

Steps to Reproduce
1️⃣ Connect Phantom Wallet to the app.
2️⃣ Switch to another account inside Phantom Wallet.
3️⃣ The UI does not update, and accountChanged is not triggered.

Expected Behavior
The app should detect the account change and update the UI with the new public key.

[beeman]

Can you please provide a repo with a reproduction of the issue?

[Ritikchhipa5]

Can you please provide a repo with a reproduction of the issue?

Yes, I will share the code with you and library version

import { WalletError } from "@solana/wallet-adapter-base";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";

import {
  PhantomWalletAdapter,
  SolflareWalletAdapter,
} from "@solana/wallet-adapter-wallets";

import { useCallback, useMemo, ReactNode } from "react";
import { SOLANA_RPC_URL } from "@/utility/constant";
import { Toaster } from "@/components/ui/sonner";
import {
  AlertTriangle,
  CheckCircle,
  Info,
  Loader,
  XCircle,
} from "lucide-react";
import { toast } from "sonner";

interface SolanaProviderProps {
  children: ReactNode;
}

function SolanaProvider({ children }: SolanaProviderProps) {
  // Define the Solana RPC endpoint
  const endpoint = useMemo(() => SOLANA_RPC_URL, []);
  // const endpoint = useMemo(() => clusterApiUrl("mainnet-beta"), []);

  // Initialize the wallet adapter
  const wallets = useMemo(
    () => [
      new PhantomWalletAdapter({
        // config: {
        //   linkingUri: window.location.origin + "/wallet-redirect",
        // },
      }),
      new SolflareWalletAdapter(),
    ],
    []
  );

  // Handle wallet connection errors
  const onError = useCallback((error: WalletError) => {
    toast.error("Wallet Connection Error:", {
      description: error?.message,
    });
  }, []);

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        {children}
        <Toaster
          theme="dark"
          toastOptions={{
            classNames: {
              toast:
                "group toast group-[.toaster]:bg-[#111] group-[.toaster]:text-white group-[.toaster]:border-[#27272a] group-[.toaster]:shadow-lg",
              description: "group-[.toast]:text-muted-foreground",
              actionButton:
                "group-[.toast]:bg-primary  group-[.toast]:text-primary-foreground",
              cancelButton:
                "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
            },
          }}
          icons={{
            success: <CheckCircle className="w-4 h-4 text-green-500" />,
            info: <Info className="w-4 h-4 text-blue-500" />,
            warning: <AlertTriangle className="w-4 h-4 text-amber-500" />,
            error: <XCircle className="w-4 h-4 text-red-500" />,
            loading: <Loader className="w-4 h-4 text-gray-500 animate-spin" />,
          }}
        />
      </WalletProvider>
    </ConnectionProvider>
  );
}

export default SolanaProvider;

and wallletModal

import { cn } from "@/lib/utils";
import { useSolanaWallet } from "@/provider/WalletProvider";
import { WalletAdapter, WalletReadyState } from "@solana/wallet-adapter-base";
import { useWallet, Wallet } from "@solana/wallet-adapter-react";
import { useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "../../ui/dialog";
import { toast } from "sonner";

const WalletsConnectModal = () => {
  const { wallets, select, connected, connect, wallet, publicKey } =
    useWallet();
  const { showModal, setShowModal } = useSolanaWallet();

  const filteredAdapters = wallets?.reduce(
    (acc: any, wallet: Wallet) => {
      const adapterName = wallet?.adapter?.name;
      if (wallet.readyState === WalletReadyState.Installed && adapterName) {
        acc.installed.push(wallet?.adapter);
      }

      if (wallet.readyState === WalletReadyState.Loadable && adapterName) {
        acc.loadable.push(wallet?.adapter);
      }

      if (wallet.readyState === WalletReadyState.NotDetected && adapterName) {
        acc.notDetected.push(wallet?.adapter);
      }

      return acc;
    },
    { installed: [], loadable: [], notDetected: [] }
  );

  useEffect(() => {
    if (connected && wallet) {
      toast.success("Wallet connected successfully", {
        description: "Your wallet has been connected securely.",
      });
    }
  }, [connected, wallet]);

  useEffect(() => {
    if (publicKey) {
      // Dispatch a custom event when the wallet address changes
      const event = new CustomEvent("wallet-address-changed", {
        detail: { address: publicKey.toBase58() },
      });
      window.dispatchEvent(event);

      // Optionally, show a toast notification
      toast.info("Wallet Connected", {
        description: `Connected with address: ${publicKey.toBase58()}`,
      });
    }
  }, [publicKey]);

  const onClickWallet = async (wallet: WalletAdapter) => {
    try {
      select(wallet?.name);
      // await wallet.connect();
      if (wallet.readyState === WalletReadyState.NotDetected) {
        throw new Error(
          "No compatible wallet detected. Please install a Solana wallet like Phantom or Solflare and try again."
        );
      }
      setTimeout(async () => {
        await connect()
          .then((res) => console.log("Wallet Connected:", res))
          .catch((err) => console.error("Connect Error:", err));
      }, 500);

      setShowModal(false);
    } catch {
      await connect();
      // toast.error("Wallet connected issue.", {
      //   description: error?.message,
      // });
      setShowModal(false);
    }
  };

  return (
    <Dialog open={showModal} onOpenChange={setShowModal}>
      <DialogContent className="bg-[#000000] border-2 min-w-[400px]  max-w-[400px]  border-[#272727]  font-minecraft ">
        <DialogHeader className="">
          <DialogTitle className="mb-4 text-white ">
            Connect a wallet
          </DialogTitle>
          <DialogDescription>
            <div className="flex flex-col gap-2 ">
              {filteredAdapters?.installed?.map(
                (wallet: WalletAdapter, index: number) => (
                  <WalletListItem
                    handleClick={() => onClickWallet(wallet)}
                    walletAdapter={wallet}
                    key={index}
                  />
                )
              )}
              {filteredAdapters?.loadable?.map(
                (wallet: WalletAdapter, index: number) => (
                  <WalletListItem
                    handleClick={() => onClickWallet(wallet)}
                    walletAdapter={wallet}
                    key={index}
                  />
                )
              )}
              {filteredAdapters?.notDetected?.map(
                (wallet: WalletAdapter, index: number) => (
                  <WalletListItem
                    handleClick={() => onClickWallet(wallet)}
                    walletAdapter={wallet}
                    key={index}
                  />
                )
              )}
            </div>
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
};

const WalletListItem = ({
  walletAdapter,
  handleClick,
}: {
  walletAdapter: WalletAdapter;
  handleClick: () => void;
}) => {
  const adapterName = walletAdapter?.name;

  return (
    <div
      onClick={handleClick}
      className={cn(
        `flex items-center w-full px-5 py-4 space-x-3 transition-all border rounded-lg cursor-pointer bg-[#111111] border-none hover:border hover:border-primary hover:bg-white/10 hover:backdrop-blur-xl hover:shadow-2xl`
      )}
    >
      <img
        src={walletAdapter?.icon}
        className="w-10 h-10 border border-[#d4ff00]/50 rounded-full"
      />
      <div className="text-white">{adapterName}</div>
    </div>
  );
};
export default WalletsConnectModal;




```version of library 

"@solana/spl-token": "0.2.0",
"@solana/wallet-adapter-base": "^0.9.20",
"@solana/wallet-adapter-react": "^0.15.36",
"@solana/wallet-adapter-react-ui": "^0.9.36",
"@solana/wallet-adapter-wallets": "^0.19.33",
"@solana/web3.js": "^1.73.2",

[beeman]

Can you please provide a repo with a reproduction of the issue?

Yes, I will share the code with you and library version

import { WalletError } from "@solana/wallet-adapter-base";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";

import {
  PhantomWalletAdapter,
  SolflareWalletAdapter,
} from "@solana/wallet-adapter-wallets";

import { useCallback, useMemo, ReactNode } from "react";
import { SOLANA_RPC_URL } from "@/utility/constant";
import { Toaster } from "@/components/ui/sonner";
import {
  AlertTriangle,
  CheckCircle,
  Info,
  Loader,
  XCircle,
} from "lucide-react";
import { toast } from "sonner";

interface SolanaProviderProps {
  children: ReactNode;
}

function SolanaProvider({ children }: SolanaProviderProps) {
  // Define the Solana RPC endpoint
  const endpoint = useMemo(() => SOLANA_RPC_URL, []);
  // const endpoint = useMemo(() => clusterApiUrl("mainnet-beta"), []);

  // Initialize the wallet adapter
  const wallets = useMemo(
    () => [
      new PhantomWalletAdapter({
        // config: {
        //   linkingUri: window.location.origin + "/wallet-redirect",
        // },
      }),
      new SolflareWalletAdapter(),
    ],
    []
  );

  // Handle wallet connection errors
  const onError = useCallback((error: WalletError) => {
    toast.error("Wallet Connection Error:", {
      description: error?.message,
    });
  }, []);

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        {children}
        <Toaster
          theme="dark"
          toastOptions={{
            classNames: {
              toast:
                "group toast group-[.toaster]:bg-[#111] group-[.toaster]:text-white group-[.toaster]:border-[#27272a] group-[.toaster]:shadow-lg",
              description: "group-[.toast]:text-muted-foreground",
              actionButton:
                "group-[.toast]:bg-primary  group-[.toast]:text-primary-foreground",
              cancelButton:
                "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
            },
          }}
          icons={{
            success: <CheckCircle className="w-4 h-4 text-green-500" />,
            info: <Info className="w-4 h-4 text-blue-500" />,
            warning: <AlertTriangle className="w-4 h-4 text-amber-500" />,
            error: <XCircle className="w-4 h-4 text-red-500" />,
            loading: <Loader className="w-4 h-4 text-gray-500 animate-spin" />,
          }}
        />
      </WalletProvider>
    </ConnectionProvider>
  );
}

export default SolanaProvider;

and wallletModal

import { cn } from "@/lib/utils";
import { useSolanaWallet } from "@/provider/WalletProvider";
import { WalletAdapter, WalletReadyState } from "@solana/wallet-adapter-base";
import { useWallet, Wallet } from "@solana/wallet-adapter-react";
import { useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "../../ui/dialog";
import { toast } from "sonner";

const WalletsConnectModal = () => {
  const { wallets, select, connected, connect, wallet, publicKey } =
    useWallet();
  const { showModal, setShowModal } = useSolanaWallet();

  const filteredAdapters = wallets?.reduce(
    (acc: any, wallet: Wallet) => {
      const adapterName = wallet?.adapter?.name;
      if (wallet.readyState === WalletReadyState.Installed && adapterName) {
        acc.installed.push(wallet?.adapter);
      }

      if (wallet.readyState === WalletReadyState.Loadable && adapterName) {
        acc.loadable.push(wallet?.adapter);
      }

      if (wallet.readyState === WalletReadyState.NotDetected && adapterName) {
        acc.notDetected.push(wallet?.adapter);
      }

      return acc;
    },
    { installed: [], loadable: [], notDetected: [] }
  );

  useEffect(() => {
    if (connected && wallet) {
      toast.success("Wallet connected successfully", {
        description: "Your wallet has been connected securely.",
      });
    }
  }, [connected, wallet]);

  useEffect(() => {
    if (publicKey) {
      // Dispatch a custom event when the wallet address changes
      const event = new CustomEvent("wallet-address-changed", {
        detail: { address: publicKey.toBase58() },
      });
      window.dispatchEvent(event);

      // Optionally, show a toast notification
      toast.info("Wallet Connected", {
        description: `Connected with address: ${publicKey.toBase58()}`,
      });
    }
  }, [publicKey]);

  const onClickWallet = async (wallet: WalletAdapter) => {
    try {
      select(wallet?.name);
      // await wallet.connect();
      if (wallet.readyState === WalletReadyState.NotDetected) {
        throw new Error(
          "No compatible wallet detected. Please install a Solana wallet like Phantom or Solflare and try again."
        );
      }
      setTimeout(async () => {
        await connect()
          .then((res) => console.log("Wallet Connected:", res))
          .catch((err) => console.error("Connect Error:", err));
      }, 500);

      setShowModal(false);
    } catch {
      await connect();
      // toast.error("Wallet connected issue.", {
      //   description: error?.message,
      // });
      setShowModal(false);
    }
  };

  return (
    <Dialog open={showModal} onOpenChange={setShowModal}>
      <DialogContent className="bg-[#000000] border-2 min-w-[400px]  max-w-[400px]  border-[#272727]  font-minecraft ">
        <DialogHeader className="">
          <DialogTitle className="mb-4 text-white ">
            Connect a wallet
          </DialogTitle>
          <DialogDescription>
            <div className="flex flex-col gap-2 ">
              {filteredAdapters?.installed?.map(
                (wallet: WalletAdapter, index: number) => (
                  <WalletListItem
                    handleClick={() => onClickWallet(wallet)}
                    walletAdapter={wallet}
                    key={index}
                  />
                )
              )}
              {filteredAdapters?.loadable?.map(
                (wallet: WalletAdapter, index: number) => (
                  <WalletListItem
                    handleClick={() => onClickWallet(wallet)}
                    walletAdapter={wallet}
                    key={index}
                  />
                )
              )}
              {filteredAdapters?.notDetected?.map(
                (wallet: WalletAdapter, index: number) => (
                  <WalletListItem
                    handleClick={() => onClickWallet(wallet)}
                    walletAdapter={wallet}
                    key={index}
                  />
                )
              )}
            </div>
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
};

const WalletListItem = ({
  walletAdapter,
  handleClick,
}: {
  walletAdapter: WalletAdapter;
  handleClick: () => void;
}) => {
  const adapterName = walletAdapter?.name;

  return (
    <div
      onClick={handleClick}
      className={cn(
        `flex items-center w-full px-5 py-4 space-x-3 transition-all border rounded-lg cursor-pointer bg-[#111111] border-none hover:border hover:border-primary hover:bg-white/10 hover:backdrop-blur-xl hover:shadow-2xl`
      )}
    >
      <img
        src={walletAdapter?.icon}
        className="w-10 h-10 border border-[#d4ff00]/50 rounded-full"
      />
      <div className="text-white">{adapterName}</div>
    </div>
  );
};
export default WalletsConnectModal;




```version of library 

"@solana/spl-token": "0.2.0", "@solana/wallet-adapter-base": "^0.9.20", "@solana/wallet-adapter-react": "^0.15.36", "@solana/wallet-adapter-react-ui": "^0.9.36", "@solana/wallet-adapter-wallets": "^0.19.33", "@solana/web3.js": "^1.73.2",

Can't help you by reading the code or trying to rebuild your problem manually.

I need a minimum reproduction.

If you create something I can clone and run with instructions on how to trigger the error I will take a look.

[Ritikchhipa5]

Cannot share my code, when I am going to connect the wallet with this library, it's working, but when I switch, my wallet, address from Phantom wallet is not update in this library

[beeman]

Try reading and understanding the link I shared. I'm explicitly asking for a reproduction of the problem, not 'your code'

[Ritikchhipa5]

You can check code in this zip and thanks for help

solana.zip

[beeman]

You can check code in this zip and thanks for help

solana.zip

Ok, a few things. If you want to make it easy for people to help you, you need to put in the work to isolate this issue.

A 'minimal reproduction' needs to be as minimal as possible to show your problem. It also wants to be in a git repo so I can fork it, make changes. This is clearly explained in the document I shared.

The zip file you provided is not minimal, it has a bunch of UI elements, calls to Jupiter endpoints, imports that don't work, etc etc etc which all make it impossible to isolate the problem.

If I try to run it, I get a bunch of errors. And because it's not in a git repo, if I want to suggest any changes, I'll have to list them out manually and paste them here? If using Git, people can show a commit which makes it around 10x easier.

Considering your issue is supposedly with wallet adapter, create a minimal app (or use create-solana-dapp), rebuild what you find with accountChanged, add some instructions and push that up to a repo that people can clone and run.

Anything that doesn't contribute to showing the issue must be left out.

Before you post it, make sure to test the 'clone and run' part in a new directory and run your instructions.

[Ritikchhipa5]

Archive.zip

this is wokring fine

https://github.com/Ritikchhipa5/solana-wallet
and github repo to

[Ritikchhipa5]

guys can anyone help me?

[beeman]

guys can anyone help me?

I checked the repo a few days back and can verify what you see.

I also checked the source and I don't think any such even exists. It might not be part of the wallet standard.

[Ritikchhipa5]

The accountChanged event is not triggering when switching accounts directly from Phantom Wallet. This issue occurs in a React + Vite project using @solana/wallet-adapter.

Steps to Reproduce
1️⃣ Connect Phantom Wallet to the app.
2️⃣ Switch to another account inside Phantom Wallet.
3️⃣ The UI does not update, and accountChanged is not triggered.

Expected Behavior
The app should detect the account change and update the UI with the new public key.

[GiovaniGuizzo]

This is a long time issue: #883
Try building your app and running in production mode. It worked for me.

[github-actions]

Hi @Ritikchhipa5,

Thanks for your question!

We want to make sure to keep signal strong in the GitHub issue tracker – to make sure that it remains the best place to track issues that affect the development of Wallet Adapter itself.

Questions like yours deserve a purpose-built Q & A forum. Unless there exists evidence that this is a bug with Wallet Adapter itself, please post your question to the Solana Stack Exchange using this link:

https://solana.stackexchange.com/questions/ask

---

This automated message is a result of having added the ‘question’ tag.