一键在 Manus 中运行任何 Skill

开始使用

setup-browser-app

星标7

分支6

更新时间2026年3月9日 17:00

Scaffold a vanilla JS/TS app with Phantom Browser SDK for wallet integration, without any framework dependency

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

phantom

phantom/phantom-agent-kit

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Scaffold Browser App with Phantom Connect

When to use

User asks to set up a vanilla JS app with Phantom Connect
User wants to create a framework-agnostic wallet integration
User wants to use the Browser SDK directly

Workflow

Step 1: Install Dependencies

npm install @phantom/browser-sdk @solana/web3.js

Step 2: Create the SDK Singleton

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.

Step 3: Implement Connect / Disconnect

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);
  }
}

Step 4: Access Chain-Specific APIs

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!")
);

Step 5: Check Connection State

function isWalletConnected(): boolean {
  return sdk.isConnected;
}

function getAccounts() {
  return sdk.accounts;
}

Step 6: HTML Setup (Minimal Example)

<!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>

Important Notes

Import AddressType from @phantom/browser-sdk, not from other packages.
Always use signAndSendTransaction — signTransaction is NOT supported for embedded wallets.
The SDK singleton should be created once and reused across your application.
Register your app at Phantom Portal to get an appId.

同仓库更多 Skills

同仓库

phantom-connect

phantom/phantom-agent-kit

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.

2026-03-097

add-social-login

phantom/phantom-agent-kit

Configure Google and Apple social login with Phantom Connect SDK to enable embedded wallet creation

2026-03-097

send-sol-transaction

phantom/phantom-agent-kit

Build and send SOL transfers with Phantom Connect SDK, including transaction construction, signing, and verification

2026-03-097

setup-react-app

phantom/phantom-agent-kit

Scaffold a React app with Phantom Connect SDK for wallet integration, including social login and Solana support

2026-03-097

setup-react-native-app

phantom/phantom-agent-kit

Scaffold a React Native (Expo) app with Phantom React Native SDK for mobile wallet integration, including polyfills and deep linking

2026-03-097

sign-message

phantom/phantom-agent-kit

Implement message signing with Phantom Connect SDK for Solana and EVM, including Sign-in with Solana (SIWS) authentication

2026-03-097

name	setup-browser-app
description	Scaffold a vanilla JS/TS app with Phantom Browser SDK for wallet integration, without any framework dependency

Scaffold Browser App with Phantom Connect

When to use

User asks to set up a vanilla JS app with Phantom Connect
User wants to create a framework-agnostic wallet integration
User wants to use the Browser SDK directly

Workflow

Step 1: Install Dependencies

npm install @phantom/browser-sdk @solana/web3.js

Step 2: Create the SDK Singleton

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.

Step 3: Implement Connect / Disconnect

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);
  }
}

Step 4: Access Chain-Specific APIs

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!")
);

Step 5: Check Connection State

function isWalletConnected(): boolean {
  return sdk.isConnected;
}

function getAccounts() {
  return sdk.accounts;
}

Step 6: HTML Setup (Minimal Example)

<!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>

Important Notes

Import AddressType from @phantom/browser-sdk, not from other packages.
Always use signAndSendTransaction — signTransaction is NOT supported for embedded wallets.
The SDK singleton should be created once and reused across your application.
Register your app at Phantom Portal to get an appId.