phantom-connect

Phantom Connect SDK

Build wallet-connected Solana applications with the Phantom Connect SDK ecosystem.

SDK Selection

Platform	SDK	Package
React web apps	React SDK	@phantom/react-sdk
React Native / Expo	React Native SDK	@phantom/react-native-sdk
Vanilla JS / Vue / Angular	Browser SDK	@phantom/browser-sdk

Prerequisites

1. Phantom Portal Account — Register at phantom.com/portal
2. App ID — Get from Portal → App → Set Up
3. Allowlisted URLs — Add domains and redirect URLs in Portal

Auth Providers

Provider	Description	Requires appId
"injected"	Phantom browser extension	No
"google"	Google OAuth (embedded wallet)	Yes
"apple"	Apple ID (embedded wallet)	Yes

Critical Rules

1. Always use signAndSendTransaction — signTransaction and signAllTransactions are NOT supported for embedded wallets
2. Always use LAMPORTS_PER_SOL from @solana/web3.js for amount conversion — never hardcode 1000000000
3. Wrap all async SDK calls in try-catch — users can reject prompts at any time
4. Check isConnected before signing — verify wallet connection before any operation
5. React Native: react-native-get-random-values must be the FIRST import — before any other imports
6. BrowserSDK must be a singleton — create one instance per app, never multiple
7. Import AddressType from @phantom/browser-sdk only
8. Use devnet for testing, mainnet-beta for production — never test against mainnet with real funds
9. Never expose private keys — Phantom handles all signing internally
10. Embedded wallet spending limit: $1,000 USD per day per app per user
11. Social login sessions persist 7 days from last auth event — handle expiration gracefully

Quick Start

React SDK

import { PhantomProvider, useModal, usePhantom, darkTheme } 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],
        authOptions: { redirectUrl: "https://yourapp.com/callback" },
      }}
      theme={darkTheme}
    >
      <YourApp />
    </PhantomProvider>
  );
}