Cursor AI prompts

One-shot prompts for implementing Phantom SDK integrations in Cursor AI

Overview

Use these prompts with Cursor AI to implement Phantom wallet integration. Copy the prompt for your preferred SDK and paste it into Cursor.

For the best experience, install the Phantom Cursor plugin. It bundles MCP servers, subagents, skills, and rules so Cursor can scaffold complete Phantom integrations, follow best practices automatically, and execute wallet operations — all without manual prompts.

For better results with manual prompts, add the Phantom Connect SDK MCP server to Cursor. This gives your AI assistant access to Phantom documentation for more accurate answers.

React SDK prompt

View React SDK prompt

Implement Phantom React SDK integration for Solana with the following requirements:

INSTALLATION:
1. Install the SDK: npm install @phantom/react-sdk
2. Install Solana dependencies: npm install @solana/web3.js

SETUP:
1. Create App.tsx that wraps your application with PhantomProvider:
   - Import: PhantomProvider, useConnect, useSolana, useAccounts, useDisconnect from "@phantom/react-sdk"
   - Import: AddressType from "@phantom/browser-sdk"
   - Configure PhantomProvider with:
     * providerType: "embedded"
     * addressTypes: [AddressType.solana]
     * appId: "[YOUR_APP_ID]"
     * authOptions: {
         authUrl: "https://connect.phantom.app/login",
         redirectUrl: "[YOUR_REDIRECT_URL]"
       }

WALLET CONNECTION COMPONENT:
1. Create a component that uses useConnect() and useAccounts() hooks
2. useConnect() returns: { connect, isConnecting }
3. Call connect() to initiate connection, returns: { addresses }
4. useAccounts() returns the connected Solana addresses array
5. Display "Connect Wallet" button when not connected
6. Display connected Solana address when connected
7. Add a disconnect button using useDisconnect() hook

MESSAGE SIGNING COMPONENT:
1. Create component that uses useSolana() hook
2. Get Solana interface: const { solana } = useSolana()
3. Sign message: await solana.signMessage("Your message here")
4. Returns signature object with the signed message
5. Display signature to user in a readable format
6. Add copy-to-clipboard functionality for signature

TRANSACTION COMPONENT:
1. Import required Solana libraries:
   - Import Transaction, SystemProgram, PublicKey from @solana/web3.js
2. Create transfer transaction:
   - Use SystemProgram.transfer() to create a SOL transfer
   - Set fromPubkey, toPubkey, and lamports (1 SOL = 1,000,000,000 lamports)
3. Sign and send transaction:
   - await solana.signAndSendTransaction(transaction)
   - Returns { hash } with transaction signature
4. Display transaction hash with link to Solana explorer
5. Add input fields for recipient address and amount in SOL
6. Validate inputs before sending

REQUIREMENTS:
- Use TypeScript with proper types
- Add try-catch error handling for all async operations
- Show loading states during connection and transactions
- Display error messages to users with helpful context
- Add null checks before accessing addresses
- Style with Tailwind CSS for modern UI
- Add helpful comments explaining Solana-specific concepts
- Format addresses with truncation (show first 4 and last 4 characters)
- Convert lamports to SOL for user display (divide by 1,000,000,000)

The SDK automatically handles wallet connection UI, authentication flow, and transaction confirmation.

What to replace in the prompt

• [YOUR_APP_ID]: Replace with your App ID from Phantom Portal
• [YOUR_REDIRECT_URL]: Replace with your authentication callback URL (must be allowlisted in Phantom Portal)

React Native SDK prompt

View React Native SDK prompt

Implement Phantom React Native SDK integration for Solana mobile apps with the following requirements:

INSTALLATION:
1. Install SDK: npm install @phantom/react-native-sdk
2. Install Solana dependency: npm install @solana/web3.js
3. Install peer dependencies:
   - For Expo: npx expo install expo-secure-store expo-web-browser expo-auth-session expo-router
   - Required polyfill: npm install react-native-get-random-values

POLYFILL SETUP (CRITICAL):
Add this import at the VERY TOP of your app entry point (index.js, App.tsx, or _layout.tsx):
  // MUST be the first import - before any other imports
  import "react-native-get-random-values";
  
  import { PhantomProvider } from "@phantom/react-native-sdk";
  // ... other imports

APP CONFIGURATION:
Configure app.json with your custom URL scheme:
  {
    "expo": {
      "name": "My Solana Wallet App",
      "slug": "my-solana-wallet-app",
      "scheme": "[YOUR_SCHEME]",
      "plugins": ["expo-router", "expo-secure-store", "expo-web-browser", "expo-auth-session"]
    }
  }

PROVIDER SETUP:
Wrap your app with PhantomProvider in App.tsx or _layout.tsx:
  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>
    );
  }

WALLET SCREEN COMPONENT:
Create a component using hooks from "@phantom/react-native-sdk":
1. Import: useConnect, useAccounts, useSolana, useDisconnect
2. Use React Native components: View, Button, Text, Alert, StyleSheet from "react-native"
3. Connect flow:
   - const { connect, isConnecting, error } = useConnect()
   - await connect({ provider: "google" })  // or "apple"
   - const { addresses, isConnected } = useAccounts()
4. Display Solana address when connected (truncate for mobile: show first 4 and last 4 chars)
5. Add disconnect button using useDisconnect()
6. Show wallet balance if needed

MESSAGE SIGNING:
Implement message signing for authentication:
  - const { solana } = useSolana()
  - const signature = await solana.signMessage("Sign in to MyApp")
  - signature.signature contains the signature string
  - Show success Alert with truncated signature
  - Use for login or authentication flows

TRANSACTION SCREEN:
Build a transfer screen with @solana/web3.js:
1. Import Transaction, SystemProgram, PublicKey from @solana/web3.js
2. Create TextInput fields for:
   - Recipient address (validate it's a valid Solana address)
   - Amount in SOL (convert to lamports: amount * 1,000,000,000)
3. Build transaction:
   - Create transfer with SystemProgram.transfer()
   - Set fromPubkey, toPubkey, lamports
4. Send transaction:
   - await solana.signAndSendTransaction(transaction)
   - Returns { hash } with transaction signature
5. Show success Alert with link to Solana Explorer
6. Handle errors with user-friendly messages

REQUIREMENTS:
- Use TypeScript with proper types
- Handle all errors with try-catch and Alert.alert
- Show loading states during connection and transactions
- Use StyleSheet for component styling
- Add pull-to-refresh for balance updates
- Format SOL amounts properly (show 2-4 decimal places)
- Truncate addresses for mobile display
- Add haptic feedback for actions
- Test thoroughly on both iOS and Android
- Implement proper null checks for addresses
- Add helpful comments explaining Solana concepts

The SDK handles OAuth flow automatically with system browser and deep link redirect back to your app.

What to replace in the prompt

• [YOUR_APP_ID]: Replace with your App ID from Phantom Portal
• [YOUR_SCHEME]: Replace with your custom URL scheme (for example, myapp)

Browser SDK prompt

View Browser SDK prompt

Implement Phantom Browser SDK integration for Solana with the following requirements:

INSTALLATION:
1. Install SDK: npm install @phantom/browser-sdk
2. Install Solana dependency: npm install @solana/web3.js

BUILD SETUP:
- Use Vite as build tool: npm create vite@latest my-solana-app -- --template vanilla-ts
- Configure proper TypeScript settings

SDK INITIALIZATION (phantom.ts):
Create a module that initializes and exports the SDK:
  import { BrowserSDK, AddressType } from "@phantom/browser-sdk";
  
  export const sdk = new BrowserSDK({
    providerType: "embedded",
    addressTypes: [AddressType.solana],
    appId: "[YOUR_APP_ID]",
    authOptions: {
      authUrl: "https://connect.phantom.app/login",
      redirectUrl: "[YOUR_REDIRECT_URL]",
    },
  });

MAIN APPLICATION (main.ts):
1. Import the SDK instance
2. Set up DOM elements and event listeners
3. Implement wallet connection:
   - Call sdk.connect() which returns { addresses }
   - Display connected Solana address in UI
   - Store address in state variable
4. Implement disconnect:
   - Call sdk.disconnect()
   - Clear address from state
   - Update UI to show disconnected state

MESSAGE SIGNING:
Implement message signing for authentication:
  const message = "Sign in to MyApp";
  const signature = await sdk.solana.signMessage(message);
  console.log("Signature:", signature);
  // Display signature in UI
  // Can be used for server-side verification

TRANSACTIONS:
Build SOL transfer functionality:
  import { Transaction, SystemProgram, PublicKey, LAMPORTS_PER_SOL } from "@solana/web3.js";
  
  // Get amount in SOL from user input
  const solAmount = parseFloat(amountInput.value);
  const lamports = solAmount * LAMPORTS_PER_SOL;
  
  // Create transaction
  const transaction = new Transaction().add(
    SystemProgram.transfer({
      fromPubkey: new PublicKey(connectedAddress),
      toPubkey: new PublicKey(recipientAddress),
      lamports: lamports,
    })
  );
  
  // Sign and send
  const result = await sdk.solana.signAndSendTransaction(transaction);
  console.log("Transaction signature:", result.hash);
  
  // Show success with link to Solana Explorer
  const explorerUrl = `https://explorer.solana.com/tx/${result.hash}`;

WALLET BALANCE:
Display user's SOL balance:
  // Fetch balance using Solana web3.js Connection
  // Format as SOL (divide lamports by LAMPORTS_PER_SOL)
  // Update on connection and after transactions

HTML STRUCTURE:
Create index.html with clean sections:
- Header with app title and network selector
- Connect/Disconnect button (style differently based on state)
- Connected address display (truncated with copy button)
- Wallet balance display in SOL
- Message signing section:
  * Text input for message
  * Sign button
  * Signature display area
- Transaction section:
  * Input for recipient address (validate format)
  * Input for amount in SOL
  * Send button
  * Transaction status display
- Use Tailwind CSS for modern, responsive styling

REQUIREMENTS:
- Use TypeScript with strict mode enabled
- Add try-catch error handling for all SDK calls
- Display user-friendly error messages in UI
- Show loading spinners during async operations
- Add null checks before accessing addresses
- Update UI reactively based on connection state
- Format addresses (show first 4 and last 4 characters)
- Format SOL amounts with proper decimals
- Add copy-to-clipboard functionality for addresses and signatures
- Include helpful comments explaining Solana concepts
- Validate user inputs before transactions
- Use modern JavaScript (async/await, optional chaining, nullish coalescing)

The SDK automatically handles authentication UI, wallet selection, and transaction confirmation.

What to replace in the prompt

• [YOUR_APP_ID]: Replace with your App ID from Phantom Portal
• [YOUR_REDIRECT_URL]: Replace with your authentication callback URL (must be allowlisted in Phantom Portal)

Step-by-step guide for using the prompts

1. Get your App ID

   Make sure you have your App ID from Phantom Portal before using any prompt.

2. Customize the prompt

   Replace placeholder values such as [YOUR_APP_ID], [YOUR_REDIRECT_URL], and [YOUR_SCHEME] with your actual values.

3. Paste into Cursor

   Open Cursor AI, press Cmd+K (or Ctrl+K on Windows), and paste the complete prompt.

4. Review the generated code

   Cursor will generate a full implementation. Review the code to ensure it meets your requirements.

5. Test the integration

   Run your application and test wallet connection, message signing, and transaction flows. Phantom Connect manages authentication using social login through Google or Apple.

Need more customization?

These prompts generate a working integration. For advanced features, refer to the SDK documentation.

React SDK docs

Explore React SDK features and hooks

React Native SDK docs

Review React Native SDK capabilities

Browser SDK docs

Learn about Browser SDK features

Developer support

Contact the Phantom developer support team