원클릭으로 Manus에서 모든 스킬 실행

시작하기

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 저장소 열기 Creator 저장소 보기

다운로드

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.