@phantom/browser-sdk

Phantom Browser SDK

The Phantom Browser SDK allows you to interact with the Phantom wallet from your web application. It uses a plugin system to support different blockchains.

Installation

You can install the SDK using npm or yarn:

npm:

npm install @phantom/browser-sdk

yarn:

yarn add @phantom/browser-sdk

Usage

Here's an example of how to import and use the SDK with the Solana plugin:

import { createPhantom } from "@phantom/browser-sdk";
import { createSolanaPlugin } from "@phantom/browser-sdk/solana"; // Import the solana plugin

// Create a Phantom instance with the Solana plugin
const phantom = createPhantom({
  plugins: [createSolanaPlugin()],
});

// Now you can use the Solana-specific methods
async function connectAndSign() {
  try {
    // Attempt to connect to the wallet
    const connectionResult = await phantom.solana.connect();
    console.log("Connection Result:", connectionResult.address);

    // Example: Sign in (if supported by the specific provider/plugin)
    // Construct SolanaSignInData according to your needs
    const signInData = { domain: window.location.host, statement: "Please sign in to access this dApp." };
    const signInResult = await phantom.solana.signIn(signInData);
    console.log("Sign In Result:", signInResult.address);

    // Example: Sign a message
    const message = new TextEncoder().encode("Hello from Phantom Browser SDK!");
    const signedMessage = await phantom.solana.signMessage(message, "utf8");
    console.log("Signed Message:", signedMessage);
  } catch (error) {
    console.error("Error interacting with Phantom:", error);
  }
}

connectAndSign();

Available Solana Methods

Once the phantom.solana object is initialized, you can access the following methods:

• connect(opts?: { onlyIfTrusted?: boolean }): Promise<string>
  • Connects to the Phantom wallet. Optionally, onlyIfTrusted can be set to true to only connect if the dApp is already trusted.
• disconnect(): Promise<void>
  • Disconnects from the Phantom wallet.
• getAccount(): Promise<string | undefined>
  • Gets the current connected address
• signIn(): Promise<SignInResult>
  • Initiates a sign-in request to the wallet.
• signMessage(message: Uint8Array | string, display?: 'utf8' | 'hex'): Promise<SignedMessage>
  • Prompts the user to sign a given message.
• signAndSendTransaction(transaction: Transaction): Promise<{ signature: string; address?: string }>
  • Prompts the user to sign and send a Kit Transaction and returns the confirmed signature.

Event Handling

The SDK also allows you to listen for connect, disconnect, and accountChanged events:

• addEventListener(event: PhantomEventType, callback: PhantomEventCallback): () => void

  • Registers a callback that will be invoked when the specified event occurs.
  • For the connect event, the callback receives the public key (as a string) of the connected account.
  • For the disconnect event, the callback receives no arguments.
  • For the accountChanged event, the callback receives the new public key (as a string).
  • Returns a function that, when called, will unregister the callback.
  • Multiple callbacks can be registered for the same event.

  Example:

  const phantom = createPhantom({ plugins: [createSolanaPlugin()] });
  
  const handleConnect = (address: string) => {
    console.log(`Wallet connected with public key: ${address}`);
  };
  
  const clearConnectListener = phantom.solana.addEventListener("connect", handleConnect);
  
  const handleAccountChanged = (newAddress: string) => {
    console.log(`Account changed to: ${newAddress}`);
  };
  
  const clearAccountChangedListener = phantom.solana.addEventListener("accountChanged", handleAccountChanged);
  
  // To stop listening for a specific event:
  // clearConnectListener();
  // clearAccountChangedListener();
  

• removeEventListener(event: PhantomEventType, callback: PhantomEventCallback): void

  • Unregisters a previously registered callback for the specified event.

  Example:

  const phantom = createPhantom({ plugins: [createSolanaPlugin()] });
  
  const handleDisconnect = () => {
    console.log("Wallet disconnected");
  };
  
  phantom.solana.addEventListener("disconnect", handleDisconnect);
  
  // To stop listening for this specific disconnect event:
  // phantom.solana.removeEventListener("disconnect", handleDisconnect);
  

Creating a transaction

Phantom's SDK uses the @solana/kit library to create transactions. You can use the createTransactionMessage function to create a transaction message.

import {
  createSolanaRpc,
  pipe,
  createTransactionMessage,
  setTransactionMessageFeePayer,
  setTransactionMessageLifetimeUsingBlockhash,
  address,
  compileTransaction,
} from "@solana/kit";

// Example: Sign and send a transaction

const rpc = createSolanaRpc("https://my-rpc-url.com"); // Replace with your own RPC URL

const { value: latestBlockhash } = await rpc.getLatestBlockhash().send();

const transactionMessage = pipe(
  createTransactionMessage({ version: 0 }),
  tx => setTransactionMessageFeePayer(address(userPublicKey as string), tx),
  tx => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, tx),
);

const transaction = compileTransaction(transactionMessage);

const { signature } = await phantomInstance.solana.signAndSendTransaction(transaction);