We have released a new beta version that includes a connection modal. This modal can be customized to support different login methods. It also changes the configuration interface, so you will need to adapt in some places:

import { PhantomProvider, useModal, darkTheme, usePhantom } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";

function App() {
  return (
    <PhantomProvider
      config={{
        providers: ["google", "apple", "injected"],
        appId: "your-app-id",
        addressTypes: [AddressType.solana],
      }}
      theme={darkTheme}
      appIcon="https://your-app.com/icon.png"
      appName="Your App Name"
    >
      <WalletComponent />
    </PhantomProvider>
  );
}

You can provide customized values for your theme with the following variables:

const customTheme = {
  background: "#1a1a1a",      // Background color for modal
  text: "#ffffff",             // Primary text color
  secondary: "#98979C",        // Secondary color for text, borders, dividers (must be hex)
  brand: "#ab9ff2",            // Brand/primary action color
  error: "#ff4444",            // Error state color
  success: "#00ff00",          // Success state color
  borderRadius: "16px",        // Border radius for buttons and modal
  overlay: "rgba(0, 0, 0, 0.8)", // Overlay background color (with opacity)
};
<PhantomProvider config={config} theme={customTheme} appIcon="..." appName="...">
  <App />
</PhantomProvider>

Note: The secondary color must be a hex color value (e.g., #98979C) as it's used to derive auxiliary colors with opacity.

Using the Modal

To control the modal, use the useModal() hook:

function WalletComponent() {
  const { open, close, isOpened } = useModal();
  const { isConnected, user } = usePhantom();

  if (isConnected) {
    return <div>Connected as {user?.email || "Unknown"}</div>;
  }

  return <button onClick={open}>Connect Wallet</button>;
}

Or you can use our Connect button component

import { ConnectButton, AddressType } from "@phantom/react-sdk";

function Header() {
  return (
    <div>
      {/* Default: Shows first available address when connected */}
      <ConnectButton />

      {/* Show specific address type */}
      <ConnectButton addressType={AddressType.solana} />
      <ConnectButton addressType={AddressType.ethereum} />

      {/* Full width button */}
      <ConnectButton fullWidth />
    </div>
  );
}

Features

Pre-built Themes

You can use the pre-built darkTheme or lightTheme:

import { darkTheme, lightTheme } from "@phantom/react-sdk";

<PhantomProvider config={config} theme={darkTheme} ...>

The new version is: https://www.npmjs.com/package/@phantom/react-sdk/v/1.0.0-beta.25