1. Introduction
Overview • Why Solana + Phantom
Fast, low-cost blockchain for web apps
Solana is designed for high throughput and minimal fees — an excellent choice for dApps that need low-latency transactions. Phantom is a popular browser wallet that provides a clean developer API and native UX for connecting wallets to web applications.
2. Prerequisites
Tools • Accounts • Keys
Before you begin
- Node.js (LTS) installed
- A code editor (VS Code recommended)
- Phantom Wallet extension installed in your browser
- A Solana devnet account (you can airdrop SOL for testing)
3. How Phantom integrates
Wallet Provider & API surface
Window object & adapters
Phantom injects a provider into the browser (window.solana). Your dApp detects the provider, requests connection, and signs transactions with the user's permission.
// sample detection
if (window.solana && window.solana.isPhantom) {
// connect
}
4. Connect flow
UX patterns
Deep link vs popup
Offer a clear "Connect Wallet" button. On click, call window.solana.connect()
. Handle user rejection gracefully and show a short explanation of required permissions.
5. Key APIs
connect • signTransaction • signAllTransactions
Common methods
connect()
— prompts user to connect their account
disconnect()
— ends the session
signTransaction(tx)
— requests signature for a transaction
6. Example: Connecting (JS)
Minimal code snippet
async function connectWallet(){
if (!window.solana) throw new Error('Phantom not found')
const resp = await window.solana.connect()
console.log('Connected:', resp.publicKey.toString())
}
Note
Always check for provider and handle exceptions; never assume a wallet is present.
7. Transactions & signing
Building transactions • Serialization
Build on Solana web3.js
Use @solana/web3.js to create Transaction objects, add instructions, then ask Phantom to sign and send. Use devnet or test validator for development and keep key material local.
8. Best practices
Security • UX
Security-first mindset
- Never transmit private keys
- Show clear transaction details to users
- Provide fallbacks when Phantom is unavailable
9. Troubleshooting
Common issues
Connection fails?
Ask users to unlock Phantom, ensure the extension is installed and the site is allowed. Check console logs and network settings. Use window.solana.on('connect', callback)
to react to changes.
10. Resources & next steps
Docs • Links • Samples
Read the official documentation for detailed examples, SDK references, and the latest updates. Clone example repos and run them locally to learn by doing.
Open in Office (export)
Phantom Developer Docs