When switching Phantom wallet account with multi chain set to off the accountChanged event doesn't get triggered

[ghost]

Summary

I am trying to get the public key when the user changes account. It works fine when the multi chain is turned on but as soon as I set the multichain off it doesn't trigger the accountChange event.

Here is the accountChanged event code

provider.on('accountChanged', (publicKey: PublicKey) => {
if (publicKey) {
console.log('publicKey: ', publicKey.toBase58())
} else {
// Attempt to reconnect to Phantom
provider.connect().catch((error) => {
// Handle connection failure
console.log(error)
})
}
})

Example

No response

Steps to Reproduce

none

Phantom Version

version 23.13.0

Is there an existing discussion for this?

• I have searched the existing discussions

[adamdelphantom]

@TanoliHA is this happening on main net? What method are you using to connect to the wallet?

[ghost]

I am testing on this https://phantom-sandboxes.vercel.app/sol-sandbox

But when I switch the account from my phantom wallet it doesn't show the updated key of the account

[adamdelphantom]

@TanoliHA ah you're right. Sorry, I was testing it on multi-chain. Thank you for reporting! We will investigate.

[ghost]

@adamdelphantom I would also like to investigate it , how can I contribute?

[adamdelphantom]

@TanoliHA Thank you for the offer but this appears to have been an internal bug. This should be fixed in version 23.15.0. Thank you again for reporting!

[ghost]

@adamdelphantom when can we expect the new release?

[adamdelphantom]

It will likely be around 2-3 weeks.

[ghost]

@adamdelphantom
Is there any workaroud to this for the time being ?

[adamdelphantom]

@TanoliHA No, unfortunately not, other than for users to re-enable multi-chain mode.

[Haseebshah936]

@adamdelphantom Is there any update to this issue I am facing this issue with the next.js App router with "next": "14.2.3". It was working fine in our previous site code which is using next: 13. Which is kind of weird as I have just migrated the same code. Also this is not only happing with Phantom its also happening with Solflare. Here is how you can recreate this.

Package.json

{
  "name": "xyz,
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@gsap/react": "^2.1.1",
    "@heroicons/react": "^2.1.3",
    "@metaplex-foundation/mpl-candy-machine": "^6.0.1",
    "@metaplex-foundation/mpl-token-metadata": "^3.2.1",
    "@metaplex-foundation/umi": "^0.9.1",
    "@metaplex-foundation/umi-bundle-defaults": "^0.9.1",
    "@metaplex-foundation/umi-signer-wallet-adapters": "^0.9.1",
    "@reduxjs/toolkit": "^2.2.4",
    "@solana/wallet-adapter-react": "^0.15.35",
    "@solana/wallet-adapter-react-ui": "^0.9.35",
    "@solana/wallet-adapter-wallets": "^0.19.32",
    "@solana/web3.js": "^1.91.8",
    "bs58": "^5.0.0",
    "gsap": "^3.12.5",
    "moment": "^2.30.1",
    "next": "14.2.3",
    "next-cloudinary": "^6.5.2",
    "react": "^18",
    "react-dom": "^18",
    "react-redux": "^9.1.2",
    "react-toastify": "^10.0.5",
    "redux": "^5.0.1"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

SolanaContextProvider

"use client";
import React from "react";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import * as wallet from "@solana/wallet-adapter-wallets";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { clusterApiUrl } from "@solana/web3.js";
import "@solana/wallet-adapter-react-ui/styles.css";

const network = process.env.NEXT_PUBLIC_NETWORK || WalletAdapterNetwork.Devnet;
const endpoint =
  process.env.NEXT_PUBLIC_RPC || clusterApiUrl(network as WalletAdapterNetwork);
const wallets = [
  new wallet.CoinbaseWalletAdapter(),
  new wallet.LedgerWalletAdapter(),
  new wallet.PhantomWalletAdapter(),
];

function SolanaContextProvider({ children }: { children: React.ReactNode }) {
  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>{children}</WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}

export default SolanaContextProvider;

SolanaContextProvider is being used from the orignal code base that is working. I also tried https://solana.com/developers/guides/wallets/add-solana-wallet-adapter-to-nextjs but got the same thing

AppWrapper

"use client";
import React, { memo } from "react";
import ReduxWrapper from "../ReduxWrapper";
import SolanaContextProvider from "../SolanaContextProvider";
import { ToastContainer } from "react-toastify";
import "react-toastify/ReactToastify.css";

function AppWrapper({ children }: { children: React.ReactNode }) {
  return (
    <ReduxWrapper>
      <SolanaContextProvider>
        {children}
        <ToastContainer />
      </SolanaContextProvider>
    </ReduxWrapper>
  );
}

export default memo(AppWrapper);

layout.tsx

import type { Metadata } from "next";
import { Share_Tech_Mono } from "next/font/google";

import { AppWrapper, Header } from "@/components/client";
import "@/styles/globals.css";
import { Footer } from "@/components/server";

const shareTechMono = Share_Tech_Mono({
  subsets: ["latin"],
  weight: ["400"],
  display: "swap",
});

export const metadata: Metadata = {
  title: "XYZ",
  keywords:
    "bitcoin, blockchain, crypto, crypto collectibles, crypto makretplace, cryptocurrency, digital items, market, nft, nft marketplace, nft next js, NFT react, non-fungible tokens, virtual asset, wallet",
  description:
    "XYZ is a marketplace for digital items, including NFTs, crypto collectibles, and virtual assets.",
  icons: {
    icon: "/images/favicon.png",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={shareTechMono.className}>
        <AppWrapper>
          <Header />
          {children}
          <Footer />
        </AppWrapper>
      </body>
    </html>
  );
}