​
Connecting to Phantom Wallets

The React SDK provides the useConnect hook to establish connections with Phantom wallets, supporting both browser extension and embedded wallet types.

​
useConnect Hook

import { useConnect } from "@phantom/react-sdk";

function ConnectButton() {
  const { connect, isLoading, error } = useConnect();

  const handleConnect = async () => {
    try {
      const result = await connect();
      console.log("Connection successful:", result);
      // result: { walletId: string, addresses: WalletAddress[] }
    } catch (error) {
      console.error("Connection failed:", error);
    }
  };

  return (
    <button onClick={handleConnect} disabled={isLoading}>
      {isLoading ? "Connecting..." : "Connect Phantom"}
    </button>
  );
}

​
Connection Response

The connect() method returns: 
interface ConnectResult {
  walletId: string;
  addresses: WalletAddress[];
}

interface WalletAddress {
  addressType: AddressType; // 'solana', 'ethereum', 'bitcoin', 'sui'
  address: string;
}

​
Example Response

{
  walletId: "wallet_123abc456def",
  addresses: [
    {
      addressType: "solana",
      address: "8UviJpZ7Q...x2"
    },
    {
      addressType: "ethereum", 
      address: "0x742d35...4686"
    }
  ]
}

​
Checking Connection Status

Use the useAccounts hook to check if a wallet is already connected: 
import { useConnect, useAccounts } from "@phantom/react-sdk";

function WalletStatus() {
  const { connect } = useConnect();
  const accounts = useAccounts(); // WalletAddress[] | null

  const isConnected = accounts && accounts.length > 0;

  if (isConnected) {
    return (
      <div>
        <p>Connected to Phantom</p>
        {accounts.map((account, index) => (
          <p key={index}>
            {account.addressType}: {account.address}
          </p>
        ))}
      </div>
    );
  }

  return (
    <button onClick={connect}>
      Connect Phantom
    </button>
  );
}

​
Extension Detection

For injected providers, you can check if the Phantom extension is installed: 
import { useIsExtensionInstalled } from "@phantom/react-sdk";

function ExtensionCheck() {
  const isExtensionInstalled = useIsExtensionInstalled();

  if (!isExtensionInstalled) {
    return (
      <div>
        <p>Phantom extension not found</p>
        <a 
          href="https://phantom.app/download" 
          target="_blank" 
          rel="noopener noreferrer"
        >
          Download Phantom
        </a>
      </div>
    );
  }

  return <ConnectButton />;
}