1. Install the Browser SDK
npm install @phantom/browser-sdk @solana/web3.js
2. Initialize the SDK
// wallet.ts
import { BrowserSDK, AddressType } from "@phantom/browser-sdk";
// These functions are defined in main.ts
declare function updateUI(address: string): void;
declare function showConnectButton(): void;
export const sdk = new BrowserSDK({
providers: ["google", "apple", "injected"],
appId: "your-app-id", // Get from phantom.com/portal
addressTypes: [AddressType.solana],
authOptions: {
redirectUrl: "https://yourapp.com/callback.html",
},
});
// Set up event listeners
sdk.on("connect", (data) => {
console.log("Connected:", data.addresses);
updateUI(data.addresses[0].address);
});
sdk.on("disconnect", () => {
console.log("Disconnected");
showConnectButton();
});
// Try to restore existing session
sdk.autoConnect();
3. Create the HTML
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="app">
<div id="disconnected">
<h1>Welcome</h1>
<button id="connect-google">Continue with Google</button>
<button id="connect-apple">Continue with Apple</button>
<button id="connect-extension">Connect Phantom</button>
</div>
<div id="connected" style="display: none;">
<p>Connected: <span id="address"></span></p>
<button id="sign">Sign Message</button>
<button id="disconnect">Disconnect</button>
</div>
</div>
<script type="module" src="./main.ts"></script>
</body>
</html>
4. Add the JavaScript
// main.ts
import { sdk } from "./wallet";
// Connect buttons
document.getElementById("connect-google")!.onclick = () => {
sdk.connect({ provider: "google" });
};
document.getElementById("connect-apple")!.onclick = () => {
sdk.connect({ provider: "apple" });
};
document.getElementById("connect-extension")!.onclick = () => {
sdk.connect({ provider: "injected" });
};
// Sign message
document.getElementById("sign")!.onclick = async () => {
const { signature } = await sdk.solana.signMessage("Hello!");
alert("Signature: " + signature);
};
// Disconnect
document.getElementById("disconnect")!.onclick = () => {
sdk.disconnect();
};
// UI helpers
function updateUI(address: string) {
document.getElementById("disconnected")!.style.display = "none";
document.getElementById("connected")!.style.display = "block";
document.getElementById("address")!.textContent = address;
}
function showConnectButton() {
document.getElementById("disconnected")!.style.display = "block";
document.getElementById("connected")!.style.display = "none";
}
5. Create the callback page
<!-- callback.html -->
<!DOCTYPE html>
<html>
<head>
<title>Connecting...</title>
</head>
<body>
<p>Connecting to Phantom...</p>
<script type="module">
import { sdk } from "./wallet";
// SDK handles the callback automatically
// Redirect back to main page after connection
sdk.on("connect", () => {
window.location.href = "/";
});
</script>
</body>
</html>
6. Configure Phantom Portal
- Go to phantom.com/portal
- Create or select your app
- Add your domain to allowed URLs
- Add your callback URL to redirect URLs
- Copy your App ID