Phantom connect

Skill sendaifun/skills/skills/phantom-connect

Build wallet-connected applications with the Phantom Connect SDK for Solana. Use when integrating Phantom wallets into React, React Native, or vanilla JS/TS apps — including wallet connection, social login (Google/Apple), transaction signing, message signing, token-gated access, crypto payments, and NFT minting. Covers @phantom/react-sdk, @phantom/react-native-sdk, and @phantom/browser-sdk.From its SKILL.md

Install

npx -y skills add sendaifun/skills --skill phantom-connect

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

5.1 KB, ~1.1k tokens by cl100k_base, as published. Nobody here has run it

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

Phantom Portal Account — Register at phantom.com/portal
App ID — Get from Portal → App → Set Up
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

Always use signAndSendTransaction — signTransaction and signAllTransactions are NOT supported for embedded wallets
Always use LAMPORTS_PER_SOL from @solana/web3.js for amount conversion — never hardcode 1000000000
Wrap all async SDK calls in try-catch — users can reject prompts at any time
Check isConnected before signing — verify wallet connection before any operation
React Native: react-native-get-random-values must be the FIRST import — before any other imports
BrowserSDK must be a singleton — create one instance per app, never multiple
Import AddressType from @phantom/browser-sdk only
Use devnet for testing, mainnet-beta for production — never test against mainnet with real funds
Never expose private keys — Phantom handles all signing internally
Embedded wallet spending limit: $1,000 USD per day per app per user
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>
  );
}

React Native SDK

// CRITICAL: Must be first import
import "react-native-get-random-values";
import { PhantomProvider, AddressType, darkTheme } from "@phantom/react-native-sdk";

// Requires app.json: { "expo": { "scheme": "myapp", "plugins": [...] } }

Browser SDK

import { BrowserSDK, AddressType } from "@phantom/browser-sdk";

const sdk = new BrowserSDK({
  providers: ["google", "apple", "injected"],
  appId: "your-app-id",
  addressTypes: [AddressType.solana],
  autoConnect: true,
});

Reference Docs

For detailed implementation patterns, read these files:

references/react-sdk.md — Complete React SDK reference (hooks, components, theming)
references/react-native-sdk.md — Mobile setup, Expo config, deep links
references/browser-sdk.md — Vanilla JS patterns, events, wallet discovery
references/transactions.md — Solana transaction patterns (SOL, SPL tokens)
references/payments.md — Crypto payment flows (SOL, USDC, backend verification)
references/token-gating.md — Token-gated access (client-side, server-side, NFT)
references/nft-minting.md — NFT mint pages, Metaplex Core, compressed NFTs

Common Issues

Issue	Solution
"appId required"	Add appId from Phantom Portal when using google/apple providers
Redirect not working	Allowlist redirectUrl in Phantom Portal
React Native crashes	Import `react-native-get-random-values` as FIRST import
Extension not detected	Use `waitForPhantomExtension()` with timeout
`signTransaction` error	Use `signAndSendTransaction` instead — embedded wallets don't support `signTransaction`