Cursor AI prompts

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.

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.

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.