Menu
Scaffold a vanilla JS/TS app with Phantom Browser SDK for wallet integration, without any framework dependency
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
Configure Google and Apple social login with Phantom Connect SDK to enable embedded wallet creation
Build and send SOL transfers with Phantom Connect SDK, including transaction construction, signing, and verification
Scaffold a React app with Phantom Connect SDK for wallet integration, including social login and Solana support
Scaffold a React Native (Expo) app with Phantom React Native SDK for mobile wallet integration, including polyfills and deep linking
Implement message signing with Phantom Connect SDK for Solana and EVM, including Sign-in with Solana (SIWS) authentication
| name | setup-browser-app |
| description | Scaffold a vanilla JS/TS app with Phantom Browser SDK for wallet integration, without any framework dependency |
npm install @phantom/browser-sdk @solana/web3.js
Initialize a single BrowserSDK instance for your application:
import { BrowserSDK, AddressType } from "@phantom/browser-sdk";
const sdk = new BrowserSDK({
appId: "your-app-id-from-phantom-portal",
providers: ["google", "apple"],
addressTypes: [AddressType.Solana, AddressType.Ethereum],
});
Important: Create only ONE BrowserSDK instance per application. Reuse this singleton everywhere.
async function connectWallet() {
try {
const accounts = await sdk.connect();
console.log("Connected accounts:", accounts);
const solanaAccount = accounts.find((a) => a.chain === "solana");
if (solanaAccount) {
console.log("Solana address:", solanaAccount.address);
}
} catch (error) {
console.error("Connection failed:", error);
}
}
async function disconnectWallet() {
try {
await sdk.disconnect();
console.log("Disconnected");
} catch (error) {
console.error("Disconnect failed:", error);
}
}
Use sdk.solana for Solana operations and sdk.ethereum for EVM operations:
// Solana operations
const solana = sdk.solana;
// Sign and send a transaction
const { signature } = await solana.signAndSendTransaction(transaction);
// Sign a message
const { signature: msgSig } = await solana.signMessage(
new TextEncoder().encode("Hello from Phantom!")
);
function isWalletConnected(): boolean {
return sdk.isConnected;
}
function getAccounts() {
return sdk.accounts;
}
<!DOCTYPE html>
<html>
<body>
<button id="connect">Connect Wallet</button>
<button id="disconnect" style="display:none">Disconnect</button>
<p id="address"></p>
<script type="module" src="./main.ts"></script>
</body>
</html>
AddressType from @phantom/browser-sdk, not from other packages.signAndSendTransaction — signTransaction is NOT supported for embedded wallets.appId.