Phantom

https://docs.phantom.com/
Admin
Phantom is a leading crypto wallet that enables users to manage digital assets and access...
Tokens:197,259
Snippets:1,693
Trust Score:9.8
Update:4 days ago
Show doc for...
Tokens:
Raw
### BrowserSDK Event Handler Setup

Source: https://docs.phantom.com/sdks/browser-sdk/index

Example of initializing the BrowserSDK and registering event listeners for connection lifecycle events.

```APIDOC
## BrowserSDK Event Handler Setup

### Description
Initializes the BrowserSDK with providers, appId, and addressTypes, and demonstrates how to register event listeners for connection lifecycle events.

### Code Example
```javascript
import { BrowserSDK, AddressType } from "@phantom/browser-sdk";

const sdk = new BrowserSDK({
  providers: ["google", "apple", "injected"],
  appId: "your-app-id",
  addressTypes: [AddressType.solana],
});

// Fired when connection starts
sdk.on("connect_start", (data) => {
  console.log("Connection starting:", data.source); // "auto-connect" | "manual-connect"
});

// Fired when connection succeeds
sdk.on("connect", (data) => {
  console.log("Connected successfully!");
  console.log("Provider type:", data.provider);
  console.log("Addresses:", data.addresses);
  console.log("Status:", data.status);
});

// Fired when connection fails
sdk.on("connect_error", (data) => {
  console.error("Connection failed:", data.error);
  console.log("Source:", data.source);
});

// Fired when disconnected
sdk.on("disconnect", (data) => {
  console.log("Disconnected from wallet");
});

// Remove listeners when done
sdk.off("connect", handleConnect);
```

### Events
| Event | When fired | Key data |
| --- | --- | --- |
| `connect_start` | Connection initiated | `source`, `authOptions` |
| `connect` | Connection successful | `provider`, `addresses`, `status`, `source` |
| `connect_error` | Connection failed | `error`, `source` |
| `disconnect` | Disconnected | `source` |
| `error` | General SDK errors | Error details |
```

--------------------------------

### Install Dependencies

Source: https://docs.phantom.com/recipes/transactions/resolve-transaction-simulation-warnings

Install the required Solana and base58 libraries.

```bash
npm install @solana/web3.js@1.99.0 bs58@6.0.0
```

--------------------------------

### Installation Dependencies

Source: https://docs.phantom.com/recipes/transactions/send-solana-v1-transaction

Install the required Solana and Wallet Standard packages.

```bash
npm install @solana/kit@8.3.0 @solana-program/system@0.15.0 \
  @solana/wallet-standard-features@1.5.0 @wallet-standard/app@1.1.1 \
  @wallet-standard/base@1.1.0 @wallet-standard/features@1.1.0
```

--------------------------------

### Install Dependencies

Source: https://docs.phantom.com/sdks/guides/wallet-authentication-with-jwts

Install the necessary packages for the backend implementation.

```bash
npm install express jsonwebtoken @solana/web3.js tweetnacl bs58
```

--------------------------------

### Install, Authenticate, and Check Balances

Source: https://docs.phantom.com/phantom-cli/index

Commands to install the CLI globally, perform the initial authentication, and retrieve wallet balances.

```bash
# Install globally
npm install -g @phantom/cli

# Authenticate
phantom login

# Check your balances
phantom wallet balances
```

--------------------------------

### Install Phantom Connect dependencies

Source: https://docs.phantom.com/recipes/quickstarts/react-native

Install the required SDK, web3.js, and peer dependencies. Use npx expo install for Expo projects to ensure compatibility.

```bash
npm install @phantom/react-native-sdk @solana/web3.js bs58

# Required polyfill for cryptographic operations
npm install react-native-get-random-values

# Install peer dependencies
npx expo install expo-secure-store expo-web-browser expo-auth-session react-native-svg
```

--------------------------------

### Install Phantom React SDK beta

Source: https://docs.phantom.com/updates

Command to install the prerelease version of the Phantom React SDK.

```bash
npm install @phantom/react-sdk@beta
```

--------------------------------

### Install Dependencies

Source: https://docs.phantom.com/sdks/guides/wallet-authentication-with-jwts

Install the required Phantom React SDK, axios, and bs58 packages.

```bash
npm install @phantom/react-sdk axios bs58
```

--------------------------------

### Complete Ethereum message signing example

Source: https://docs.phantom.com/sdks/react-sdk/sign-messages

A full component example demonstrating Ethereum personal message signing, typed data signing, and connection status.

```javascript
import { useEthereum } from "@phantom/react-sdk";

function EthereumOperations() {
  const { ethereum } = useEthereum();

  const signPersonalMessage = async () => {
    const accounts = await ethereum.getAccounts();
    const signature = await ethereum.signPersonalMessage("Hello Ethereum!", accounts[0]);
    console.log("Signature:", signature);
  };

  const signTypedData = async () => {
    const accounts = await ethereum.getAccounts();
    const typedData = {
      types: {
        EIP712Domain: [
          { name: "name", type: "string" },
          { name: "version", type: "string" },
          { name: "chainId", type: "uint256" },
          { name: "verifyingContract", type: "address" }
        ],
        Mail: [
          { name: "from", type: "string" },
          { name: "to", type: "string" },
          { name: "contents", type: "string" }
        ]
      },
      primaryType: "Mail",
      domain: {
        name: "Ether Mail",
        version: "1",
        chainId: 1,
        verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC"
      },
      message: {
        from: "Alice",
        to: "Bob",
        contents: "Hello!"
      }
    };

    const signature = await ethereum.signTypedData(typedData, accounts[0]);
    console.log("Typed data signature:", signature);
  };


  return (
    <div>
      <button onClick={signPersonalMessage}>Sign Personal Message</button>
      <button onClick={signTypedData}>Sign Typed Data</button>
      <p>Connected: {ethereum.isConnected() ? 'Yes' : 'No'}</p>
    </div>
  );
}
```

--------------------------------

### ConnectBox Usage Examples

Source: https://docs.phantom.com/sdks/react-sdk/index

Provides various configuration examples for the ConnectBox component, including custom width and transparency settings.

```javascript
import { ConnectBox } from "@phantom/react-sdk";

// Default usage
<ConnectBox />

// Custom width
<ConnectBox maxWidth="500px" />

// Transparent (no background/border)
<ConnectBox transparent />

// Custom width with transparent
<ConnectBox maxWidth={600} transparent />
```

--------------------------------

### Install dependencies

Source: https://docs.phantom.com/recipes/payments/request-payment

Install the required packages for Solana Pay integration using either the React SDK or the Browser SDK.

```bash
npm install @solana/pay bignumber.js @phantom/react-sdk
# or
npm install @solana/pay bignumber.js @phantom/browser-sdk
```

--------------------------------

### Install the Phantom OpenClaw plugin

Source: https://docs.phantom.com/phantom-mcp-server/openclaw-plugin

Use this command to install the plugin from the package registry.

```bash
openclaw plugins install @phantom/phantom-openclaw-plugin
```

--------------------------------

### Install Phantom React SDK

Source: https://docs.phantom.com/phantom-portal/get-app-id

Installation commands for the Phantom React SDK using npm, yarn, or pnpm.

```bash
# Using npm
npm install @phantom/react-sdk

# Using yarn
yarn add @phantom/react-sdk

# Using pnpm
pnpm add @phantom/react-sdk
```

--------------------------------

### Install Phantom MCP server globally

Source: https://docs.phantom.com/phantom-mcp-server/setup

Install the package globally for faster startup, followed by the command to run the server.

```bash
npm install -g @phantom/mcp-server@latest
```

```bash
phantom-mcp
```

--------------------------------

### Install Phantom React SDK and dependencies

Source: https://docs.phantom.com/sdks/react-sdk/index

Install the core SDK along with required network-specific dependencies for Solana and Ethereum support.

```bash
npm install @phantom/react-sdk @solana/web3.js viem
```

--------------------------------

### Install Phantom Connect dependencies

Source: https://docs.phantom.com/recipes/quickstarts/nextjs

Install the required Phantom React SDK and Solana web3 library.

```bash
npm install @phantom/react-sdk @solana/web3.js
```

--------------------------------

### Install required dependencies

Source: https://docs.phantom.com/sdks/react-native-sdk/sign-messages

Install expo-clipboard for copying signatures and bs58 for encoding Solana signatures.

```bash
npx expo install expo-clipboard
npm install bs58
```

--------------------------------

### Using @solana/web3.js to get block and transaction

Source: https://docs.phantom.com/developer-powertools/solana-versioned-transactions

Example of using the @solana/web3.js library to get the latest block and a specific transaction with maxSupportedTransactionVersion set to 0.

```APIDOC
## [SDK] @solana/web3.js - getBlock and getTransaction

### Description
Demonstrates how to use the @solana/web3.js library to fetch the latest block and a specific transaction while supporting versioned transactions.

### Method
SDK method calls

### Endpoint
N/A (SDK)

### Parameters
#### getBlock
- **slot** (number) - Required - The slot number of the block to fetch
- **options** (object) - Required - Options object
  - **maxSupportedTransactionVersion** (number) - Required - Set to 0 to support versioned transactions

#### getTransaction
- **signature** (string) - Required - Transaction signature
- **options** (object) - Required - Options object
  - **maxSupportedTransactionVersion** (number) - Required - Set to 0 to support versioned transactions

### Request Example
// connect to the `devnet` cluster and get the current `slot`
const connection = new web3.Connection(web3.clusterApiUrl("devnet"));
const slot = await connection.getSlot();

// get the latest block (allowing for v0 transactions)
const block = await connection.getBlock(slot, {
  maxSupportedTransactionVersion: 0,
});

// get a specific transaction (allowing for v0 transactions)
const getTx = await connection.getTransaction(
  "3jpoANiFeVGisWRY5UP648xRXs3iQasCHABPWRWnoEjeA93nc79WrnGgpgazjq4K9m8g2NJoyKoWBV1Kx5VmtwHQ",
  {
    maxSupportedTransactionVersion: 0,
  },
);

### Response
Returns the block or transaction data as per the options.
```

--------------------------------

### Get provider or redirect

Source: https://docs.phantom.com/solana/detecting-the-provider

A function to retrieve the Phantom provider if installed, or open the Phantom website in a new tab if it is not.

```javascript
const getProvider = () => {
  if ('phantom' in window) {
    const provider = window.phantom?.solana;

    if (provider?.isPhantom) {
      return provider;
    }
  }

  window.open('https://phantom.app/', '_blank');
};
```

--------------------------------

### SDK Initialization with usePhantom

Source: https://docs.phantom.com/sdks/react-sdk/index

Shows how to use the usePhantom hook to track SDK initialization and autoconnect state, and use useConnect to connect a wallet.

```APIDOC
## usePhantom

### Description
Returns the SDK initialization state, including an `isLoading` flag that indicates when initialization and autoconnect are in progress.

### Returns
- `isLoading` (boolean) - Whether the SDK is initializing or autoconnecting.

### Example
```jsx
import { useConnect, usePhantom } from "@phantom/react-sdk";

function App() {
  const { isLoading } = usePhantom();
  const { connect } = useConnect();

  if (isLoading) {
    return <div>Initializing Phantom SDK...</div>;
  }

  return <button onClick={() => connect({ provider: "injected" })}>Connect Wallet</button>;
}
```

## useConnect

### Description
Provides a `connect` function to initiate a wallet connection.

### Returns
- `connect` (function) - Call with `{ provider: "injected" }` to connect.

### Example
```jsx
const { connect } = useConnect();
connect({ provider: "injected" });
```
```

--------------------------------

### Access selectedAddress with window.phantom.ethereum

Source: https://docs.phantom.com/ethereum-monad-testnet-base-and-polygon/provider-api-reference/properties/selectedaddress

Use window.phantom.ethereum.selectedAddress to get the currently connected wallet address. The value updates on accountsChanged and connect events and returns a hexadecimal string. The example logs the address to the console.

```javascript
const address = window.phantom.ethereum.selectedAddress;
console.log(address);
// "0xDAFEA492D9c6733ae3d56b7Ed1ADB60692c98Bc5"
```

--------------------------------

### Verify Phantom CLI installation

Source: https://docs.phantom.com/phantom-cli/installation

Checks the installed version of the phantom binary to confirm the installation succeeded.

```bash
phantom --version

```

--------------------------------

### Initialize project with npm

Source: https://docs.phantom.com/sdks/react-sdk/index

Use the npx command to generate a new Solana project using the Phantom Embedded React Starter template.

```bash
npx -y create-solana-dapp@latest -t solana-foundation/templates/community/phantom-embedded-react
```

--------------------------------

### Initialize project with bun

Source: https://docs.phantom.com/sdks/react-sdk/index

Use the bun command to generate a new Solana project using the Phantom Embedded React Starter template.

```bash
bun create solana-dapp@latest -t solana-foundation/templates/community/phantom-embedded-react
```

--------------------------------

### Wallet connection and chain operations example

Source: https://docs.phantom.com/sdks/react-sdk/connect

Demonstrates the basic pattern of connecting to a wallet provider and performing transactions on Solana and Ethereum.

```javascript
import { useConnect, useSolana, useEthereum } from "@phantom/react-sdk";

function WalletExample() {
  const { connect } = useConnect();
  const { solana } = useSolana();
  const { ethereum } = useEthereum();

  // 1. Connect first - specify which provider to use
  const handleConnect = async () => {
    await connect({ provider: "google" }); // or "apple", "injected"
  };

  // 2. Then use chain-specific operations
  const sendSolanaTransaction = async () => {
    const result = await solana.signAndSendTransaction(transaction);
  };

  const sendEthereumTransaction = async () => {
    const result = await ethereum.sendTransaction(transaction);
  };
}
```

--------------------------------

### Install express-rate-limit

Source: https://docs.phantom.com/sdks/guides/wallet-authentication-with-jwts

Command to install the rate limiting package for Express.

```bash
npm install express-rate-limit
```

--------------------------------

### Initialize PhantomProvider and WalletScreen

Source: https://docs.phantom.com/sdks/react-native-sdk/index

Setup the PhantomProvider in your root component and implement a basic wallet connection screen.

```typescript
// App.tsx or _layout.tsx (for Expo Router)
import { PhantomProvider, AddressType, darkTheme } from "@phantom/react-native-sdk";

export default function App() {
  return (
    <PhantomProvider
      config={{
        providers: ["google", "apple"], // Enabled auth providers for React Native
        appId: "your-app-id",
        scheme: "mywalletapp",
        addressTypes: [AddressType.solana],
        authOptions: {
          redirectUrl: "mywalletapp://phantom-auth-callback",
        },
      }}
      theme={darkTheme} // Optional: Customize modal appearance
      appIcon="https://your-app.com/icon.png" // Optional: Your app icon
      appName="Your App Name" // Optional: Your app name
    >
      <WalletScreen />
    </PhantomProvider>
  );
}

// WalletScreen.tsx
import { View, Button, Text } from "react-native";
import { useModal, usePhantom } from "@phantom/react-native-sdk";

export function WalletScreen() {
  const { open, close, isOpened } = useModal();
  const { isConnected } = usePhantom();

  if (isConnected) {
    return (
      <View style={{ padding: 20 }}>
        <Text>Connected</Text>
      </View>
    );
  }

  return (
    <View style={{ padding: 20 }}>
      <Button title="Connect Wallet" onPress={open} />
    </View>
  );
}
```

--------------------------------

### Install bs58 dependency

Source: https://docs.phantom.com/sdks/browser-sdk/sign-messages

Install the bs58 library to encode Solana signatures.

```bash
npm install bs58
```

--------------------------------

### Initialize project with bun

Source: https://docs.phantom.com/sdks/browser-sdk/index

Use the bun package manager to generate a new Solana project using the Phantom Embedded JS Starter template.

```bash
bun create solana-dapp@latest -t solana-foundation/templates/community/phantom-embedded-js
```

--------------------------------

### Install Phantom Browser SDK

Source: https://docs.phantom.com/recipes/quickstarts/vanilla-js

Install the required dependencies via npm.

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

--------------------------------

### PhantomProvider Setup

Source: https://docs.phantom.com/resources/cursor-prompts

Wrap your application with the PhantomProvider in your main entry file, providing the necessary configuration object.

```javascript
import { PhantomProvider, AddressType } from "@phantom/react-native-sdk";
  
  export default function App() {
    return (
      <PhantomProvider
        config={{
          providerType: "embedded",
          appId: "[YOUR_APP_ID]",
          scheme: "[YOUR_SCHEME]",
          addressTypes: [AddressType.solana],
          authOptions: {
            redirectUrl: "[YOUR_SCHEME]://phantom-auth-callback",
          },
          appName: "My Solana Wallet App",
        }}
      >
        <YourAppContent />
      </PhantomProvider>
    );
  }
```

--------------------------------

### Initialize PhantomProvider and use hooks

Source: https://docs.phantom.com/sdks/react-sdk/index

Wrap your application with the PhantomProvider and use the useModal and usePhantom hooks to manage wallet connection states.

```javascript
import { PhantomProvider, useModal, darkTheme, usePhantom } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";

function App() {
  return (
    <PhantomProvider
      config={{
        providers: ["google", "apple", "injected"], // Enabled auth methods
        appId: "your-app-id", // Get your app ID from phantom.com/portal
        addressTypes: [AddressType.solana, AddressType.ethereum],
        authOptions: {
          redirectUrl: "https://yourapp.com/auth/callback", // Must be whitelisted in Phantom Portal
        },
      }}
      theme={darkTheme}
      appIcon="https://your-app.com/icon.png"
      appName="Your App Name"
    >
      <WalletComponent />
    </PhantomProvider>
  );
}

function WalletComponent() {
  const { open, close, isOpened } = useModal();
  const { isConnected, user } = usePhantom();

  if (isConnected) {
    return (
      <div>
        <p>Connected</p>
      </div>
    );
  }

  return <button onClick={open}>Connect Wallet</button>;
}
```

--------------------------------

### Verify Claude Code installation

Source: https://docs.phantom.com/phantom-mcp-server/setup

List the configured MCP servers to verify the installation.

```bash
claude mcp list
```

--------------------------------

### Initialize project with npm

Source: https://docs.phantom.com/sdks/browser-sdk/index

Use the npm package manager to generate a new Solana project using the Phantom Embedded JS Starter template.

```bash
npx -y create-solana-dapp@latest -t solana-foundation/templates/community/phantom-embedded-js
```

--------------------------------

### Initialize project with bun

Source: https://docs.phantom.com/sdks/react-native-sdk/index

Use the bun package manager to generate a new Solana project using the Phantom Embedded React Native Starter template.

```bash
bun create solana-dapp@latest -t solana-foundation/templates/community/phantom-embedded-react-native
```

--------------------------------

### transfer_spot_to_perps Example

Source: https://docs.phantom.com/phantom-mcp-server/perps

Example JSON payload to move USDC from spot to the perp account.

```json
{
  "amountUsdc": "100"
}
```

--------------------------------

### Ethereum request() Example

Source: https://docs.phantom.com/developer-powertools/signing-a-message

Demonstrates signing a message on Ethereum using the request() method.

```javascript
const provider = getProvider(); // see "Detecting the Provider"
const message = `magiceden.io wants you to sign in with your Ethereum account:
eip155:1:0xb9c5714089478a327f09197987f16f9e5d936e8a

Click Sign or Approve only means you have proved this wallet is owned by you.

URI: https://magiceden.io
Version: 1
Chain ID: eip155:1
Nonce: bZQJ0SL6gJ
Issued At: 2022-10-25T16:52:02.748Z
Resources:
- https://foo.com
- https://bar.com`;
const encodedMessage = new TextEncoder().encode(message);
const signedMessage = await provider.request({
    method: "signMessage",
    params: {
         message: encodedMessage,
         display: "utf8",
    }
});
```

--------------------------------

### deposit_to_hyperliquid Arbitrum Example

Source: https://docs.phantom.com/phantom-mcp-server/perps

Example JSON payload for bridging funds from Arbitrum to Hyperliquid.

```json
{
  "sourceChainId": "eip155:42161",
  "amount": "250",
  "sellTokenMint": "0xaf88d065e77c8cc2239327c5edb3a432268e5831",
  "execute": true
}
```

--------------------------------

### Install the plugin from a local path

Source: https://docs.phantom.com/phantom-mcp-server/openclaw-plugin

Use this command if you are testing a local checkout of the plugin instead of the published package.

```bash
openclaw plugins install -l /absolute/path/to/packages/phantom-openclaw-plugin
```

--------------------------------

### deposit_to_hyperliquid Solana Example

Source: https://docs.phantom.com/phantom-mcp-server/perps

Example JSON payload for bridging funds from Solana to Hyperliquid.

```json
{
  "sourceChainId": "solana:mainnet",
  "amount": "10",
  "execute": true
}
```

--------------------------------

### withdraw_from_perps Example

Source: https://docs.phantom.com/phantom-mcp-server/perps

Example JSON payload to bridge USDC from the perps account to an external chain.

```json
{
  "amountUsdc": "50",
  "destinationChainId": "solana:mainnet"
}
```

--------------------------------

### Event Handlers Usage

Source: https://docs.phantom.com/sdks/browser-sdk

Example of setting up event listeners for the Browser SDK, including connect_start, connect, connect_error, disconnect, and removing listeners with off.

```APIDOC
## Event Handlers

### Description
Register event listeners to handle SDK lifecycle events such as connection start, success, failure, and disconnection.

### Usage Example
```javascript
import { BrowserSDK, AddressType } from "@phantom/browser-sdk";

const sdk = new BrowserSDK({
  providers: ["google", "apple", "injected"],
  appId: "your-app-id",
  addressTypes: [AddressType.solana],
});

// Fired when connection starts
sdk.on("connect_start", (data) => {
  console.log("Connection starting:", data.source); // "auto-connect" | "manual-connect"
});

// Fired when connection succeeds
sdk.on("connect", (data) => {
  console.log("Connected successfully!");
  console.log("Provider type:", data.provider);
  console.log("Addresses:", data.addresses);
  console.log("Status:", data.status);
});

// Fired when connection fails
sdk.on("connect_error", (data) => {
  console.error("Connection failed:", data.error);
  console.log("Source:", data.source);
});

// Fired when disconnected
sdk.on("disconnect", (data) => {
  console.log("Disconnected from wallet");
});

// Remove listeners when done
sdk.off("connect", handleConnect);
```

### Available Events
| Event | When fired | Key data |
| --- | --- | --- |
| `connect_start` | Connection initiated | `source`, `authOptions` |
| `connect` | Connection successful | `provider`, `addresses`, `status`, `source` |
| `connect_error` | Connection failed | `error`, `source` |
| `disconnect` | Disconnected | `source` |
| `error` | General SDK errors | Error details |
```

--------------------------------

### Initialize project with yarn

Source: https://docs.phantom.com/sdks/react-sdk/index

Use the yarn command to generate a new Solana project using the Phantom Embedded React Starter template.

```bash
yarn create solana-dapp -t solana-foundation/templates/community/phantom-embedded-react
```

--------------------------------

### Ethereum signMessage() Example

Source: https://docs.phantom.com/developer-powertools/signing-a-message

Demonstrates signing a message on Ethereum using the signMessage() method.

```javascript
const provider = getProvider(); // see "Detecting the Provider"
const message = `magiceden.io wants you to sign in with your Ethereum account:
eip155:1:0xb9c5714089478a327f09197987f16f9e5d936e8a

Click Sign or Approve only means you have proved this wallet is owned by you.

URI: https://magiceden.io
Version: 1
Chain ID: eip155:1
Nonce: bZQJ0SL6gJ
Issued At: 2022-10-25T16:52:02.748Z
Resources:
- https://foo.com
- https://bar.com`;
const encodedMessage = new TextEncoder().encode(message);
const signedMessage = await provider.signMessage(encodedMessage, "utf8");
```
Tokens:
Raw