Phantom does not auto-connect after page refresh in templates with the new Wallet UI.

[glendell03]

The wallet fails to auto-connect upon refreshing the page.

Steps to Reproduce:

1. Initialize the project:

npx create-solana-dapp@latest

2. Select the Next.js template during setup.
3. Run the development server:

    npm run dev

4. Open the application in a browser.
5. Connect a wallet (e.g., Phantom).
6. Refresh the page.

Expected Behavior:

After refreshing the page, the application should automatically reconnect to the previously connected wallet without requiring user intervention.

Actual Behavior:

Upon refreshing, the wallet disconnects, and the user must manually reconnect.

Screen.Recording.2025-04-24.at.11.49.01.PM.mov

// solana-provider.tsx

'use client'

import dynamic from 'next/dynamic'
import { ReactNode } from 'react'
import { createSolanaDevnet, createSolanaLocalnet, createStorageAccount, createWalletUiConfig, WalletUi,} from '@wallet-ui/react'
import '@wallet-ui/tailwind/index.css'

export const WalletButton = dynamic(async () => (await import('@wallet-ui/react')).WalletUiDropdown, {
  ssr: false,
})
export const ClusterButton = dynamic(async () => (await import('@wallet-ui/react')).WalletUiClusterDropdown, {
  ssr: false,
})

const config = createWalletUiConfig({
  clusters: [createSolanaDevnet(), createSolanaLocalnet()]
})

export function SolanaProvider({ children }: { children: ReactNode }) {
  return <WalletUi config={config}>{children}</WalletUi>
}

[beeman]

Hi there, this should work well with Backpack and Solflare, but not Phantom.

We have informed Phantom of this behavior and they are looking into it.