تشغيل أي مهارة في Manus بنقرة واحدة

ابدأ الآن

setup-browser-app

النجوم٧

التفرعات٦

آخر تحديث٩ مارس ٢٠٢٦ في ١٧:٠٠

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

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مطوّرو الويبمهن الحاسوب والرياضيات·SOC 15-1254

SKILL.md

readonly

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.

المزيد من هذا المستودع

نفس المستودع

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.