How to integrate Phantom Connect

Install the @phantom/react-sdk package, wrap your app with the provider, and start using wallet hooks.

1. Install the SDK

Add the Phantom SDK to your project with your preferred package manager.

npm install @phantom/react-sdk

2. Configure the Provider

Wrap your application with PhantomProvider. This enables all wallet hooks throughout your app.

// app/layout.tsx or _app.tsx
import { AddressType, PhantomProvider, darkTheme } from '@phantom/react-sdk';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <PhantomProvider
          config={{
            providers: ['google', 'apple', 'injected'], // Social login + wallet-standard
            appId: process.env.NEXT_PUBLIC_PHANTOM_APP_ID || '',
            addressTypes: [AddressType.solana],
          }}
          theme={darkTheme}
          appName="My Solana App"
          appIcon="https://example.com/icon.png" // Optional: your app icon
        >
          {children}
        </PhantomProvider>
      </body>
    </html>
  );
}

3. Use Wallet Hooks

Access wallet state with hooks like usePhantom, useAccounts, and useDisconnect.

import { useWallet } from '@/shared/hooks/use-wallet';

function WalletStatus() {
  const {
    isConnected,
    isConnecting,
    address,
    connectors,
    connect,
    disconnect
  } = useWallet();

  if (isConnecting) return <div>Connecting...</div>;

  if (!isConnected) {
    return (
      <div>
        {/* Open modal with all options */}
        <button onClick={() => connect()}>Connect Wallet</button>

        {/* Or connect to a specific wallet */}
        {connectors.map((wallet) => (
          <button key={wallet.id} onClick={() => connect(wallet.id)}>
            Connect {wallet.name}
          </button>
        ))}
      </div>
    );
  }

  return (
    <div>
      <p>Connected: {address}</p>
      <button onClick={disconnect}>Disconnect</button>
    </div>
  );
}

Frequently Asked Questions

How do I install the Phantom SDK?
Install @phantom/react-sdk using npm, yarn, or pnpm. Then wrap your app with PhantomProvider in your layout or _app file.
Do I need an App ID from Phantom?
An App ID is optional but recommended for production apps. It enables analytics and allows you to customize the connection modal. Get one from the Phantom Developer Portal at phantom.com/portal.
Does Phantom Connect work with Next.js?
Yes, Phantom Connect works with Next.js. The SDK is client-side only, so make sure to use "use client" in components that use the hooks, or wrap the provider at the layout level.
Can I customize the connection modal theme?
Yes, pass a theme prop to PhantomProvider. Options include "light", "dark", or "system" to match the user's preference.

Learn More