npm install @phantom/react-sdk @solana/web3.js
Wrap your app's root component in PhantomProvider with the required configuration:
import { PhantomProvider } from "@phantom/react-sdk";
function App() {
return (
<PhantomProvider
config={{
appId: "your-app-id-from-phantom-portal",
providers: ["google", "apple"],
addressTypes: ["solana", "ethereum"],
}}
>
<YourApp />
</PhantomProvider>
);
}
Required config fields:
appId — Register at Phantom Portal to obtain this.providers — Social login providers to enable (e.g. ["google", "apple"]).addressTypes — Blockchain address types to request (e.g. ["solana"], ["solana", "ethereum"]).Use the built-in ConnectButton component for the simplest integration:
import { ConnectButton } from "@phantom/react-sdk";
function Navbar() {
return (
<nav>
<ConnectButton />
</nav>
);
}
Wire up the core hooks to access wallet state and chain-specific APIs:
import {
useConnect,
useAccounts,
useDisconnect,
useSolana,
} from "@phantom/react-sdk";
function WalletInfo() {
const { isConnected } = useConnect();
const { accounts } = useAccounts();
const { disconnect } = useDisconnect();
const solana = useSolana();
if (!isConnected) {
return <p>Not connected</p>;
}
const solanaAccount = accounts.find((a) => a.chain === "solana");
return (
<div>
<p>Address: {solanaAccount?.address}</p>
<button onClick={disconnect}>Disconnect</button>
</div>
);
}
Always wrap connection logic in try-catch:
import { useConnect } from "@phantom/react-sdk";
function ConnectFlow() {
const { connect } = useConnect();
const handleConnect = async () => {
try {
await connect();
} catch (error) {
console.error("Connection failed:", error);
}
};
return <button onClick={handleConnect}>Connect Wallet</button>;
}
| Hook | Purpose |
|---|---|
useConnect | Connect/disconnect, check isConnected |
useAccounts | Access connected wallet accounts |
useDisconnect | Disconnect the current session |
useSolana | Access Solana-specific APIs (sign, send) |
useEthereum | Access EVM-specific APIs |
signAndSendTransaction — signTransaction is NOT supported for embedded wallets.appId.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).