Features
Embedded Wallet Authentication with Privy supporting Google, Apple, and Email login methods
Natural Language Interface Chat interface for interacting with Solana blockchain using simple language
AI-Powered Solana transaction capabilities through an intelligent AI assistant
Chat History Persistent chat history management across sessions
Profile Management User profile creation and management
Native Mobile Experience Built with React Native for native mobile performance
Prerequisites
Node.js (v16+)
MongoDB
OpenAI API Key
Helius API Key (for Solana RPC access)
iOS/Android development environment
Setup Instructions
Clone the repository
git clone https://github.com/yourusername/privy-sak-react-native.git cd privy-sak-react-native
Configure environment variables
Copy the example environment files:
# For client cp .env.local.example .env.local # For server cd server cp .env.example .env cd .. # For Expo configuration cp app.example.json app.json Update these files with your app’s information and API keys.
This app cannot be run with Expo Go as some polyfills used in the project are not compatible with Expo Go. You must use the development build with npx expo run:ios or npx expo run:android.
Environment Variables The following environment variables are required:
Client (.env.local) # OpenAI API Key for chat functionality EXPO_PUBLIC_OPENAI_API_KEY=your_openai_api_key # Server URL EXPO_PUBLIC_API_URL=http://localhost:3001 # Helius RPC URL with API key EXPO_PUBLIC_HELIUS_URL=https://mainnet.helius-rpc.com/?api-key=your_helius_api_key Server (.env) # OpenAI API Key OPENAI_API_KEY=your_openai_api_key # MongoDB connection string MONGODB_URI=mongodb://localhost:27017/privy-sak # Helius RPC URL HELIUS_STAKED_URL=https://mainnet.helius-rpc.com/?api-key=your_helius_api_key # Server port PORT=3001 Project Structure
src/ ├── screens/ # App screens │ ├── AuthScreen.js # Authentication screen │ ├── ChatScreen.js # Main chat interface │ ├── ProfileScreen.js # User profile management │ └── SettingsScreen.js # App settings ├── components/ # Reusable components │ ├── chat/ # Chat-related components │ ├── wallet/ # Wallet components │ └── ui/ # UI components ├── hooks/ # Custom React hooks │ ├── useChat.js # Chat functionality │ ├── useSolana.js # Solana interaction │ └── useAuth.js # Authentication ├── walletProviders/ # Privy wallet integration ├── navigation/ # Navigation setup ├── assets/ # Images, colors, icons ├── lib/ # Utility functions │ ├── ai/ # AI providers and tools │ ├── api/ # API interactions │ └── utils/ # Helper functions └── state/ # State management
server/ ├── controllers/ # API endpoint controllers │ ├── authController.js # Authentication endpoints │ ├── chatController.js # Chat history management │ └── userController.js # User profile management ├── models/ # MongoDB models │ ├── Chat.js # Chat data model │ └── User.js # User data model ├── routes/ # API routes │ ├── auth.js # Auth routes │ ├── chat.js # Chat routes │ └── user.js # User routes ├── middleware/ # Custom middleware │ ├── auth.js # Authentication middleware │ └── error.js # Error handling ├── db/ # Database connection └── server.js # Main server file Privy Integration This example demonstrates how to integrate Privy’s embedded wallet solution with React Native. Key integration points include:
Wallet Provider Setup
Wallet Provider Implementation
// src/walletProviders/index.js import React , { createContext , useContext , useState , useEffect } from 'react' ; import { PrivyClient } from '@privy-io/react-native' ; const WalletContext = createContext ( null ); export function WalletProvider ({ children }) { const [ privyClient , setPrivyClient ] = useState ( null ); const [ wallet , setWallet ] = useState ( null ); const [ connected , setConnected ] = useState ( false ); useEffect (() => { const initPrivy = async () => { const client = new PrivyClient ({ appId: process . env . EXPO_PUBLIC_PRIVY_APP_ID , }); setPrivyClient ( client ); // Check if user is already logged in const session = await client . getSession (); if ( session ) { const walletInfo = await client . getWallet (); setWallet ( walletInfo ); setConnected ( true ); } }; initPrivy (); }, []); const login = async ( method ) => { try { await privyClient . login ( method ); const walletInfo = await privyClient . getWallet (); setWallet ( walletInfo ); setConnected ( true ); return true ; } catch ( error ) { console . error ( 'Login failed:' , error ); return false ; } }; const logout = async () => { try { await privyClient . logout (); setWallet ( null ); setConnected ( false ); return true ; } catch ( error ) { console . error ( 'Logout failed:' , error ); return false ; } }; return ( < WalletContext.Provider value = { { privyClient , wallet , connected , login , logout , // Additional wallet functions signTransaction : async ( tx ) => await wallet ?. signTransaction ( tx ), signMessage : async ( msg ) => await wallet ?. signMessage ( msg ), sendTransaction : async ( tx , connection ) => { return await wallet ?. sendTransaction ( tx , connection ); }, } } > { children } </ WalletContext.Provider > ); } export const useWallet = () => useContext ( WalletContext ); Solana Agent Kit Integration
// src/hooks/useSolanaAgent.js import { useMemo } from 'react' ; import { SolanaAgentKit , createVercelAITools } from 'solana-agent-kit' ; import TokenPlugin from '@solana-agent-kit/plugin-token' ; import { Connection , PublicKey } from '@solana/web3.js' ; import { useWallet } from '../walletProviders' ; export function useSolanaAgent () { const { wallet , connected , signTransaction , signMessage , sendTransaction } = useWallet (); const agent = useMemo (() => { if ( ! connected || ! wallet ) return null ; return new SolanaAgentKit ( { publicKey: new PublicKey ( wallet . address ), signTransaction , signMessage , sendTransaction , signAndSendTransaction : async ( tx ) => { const signed = await signTransaction ( tx ); const connection = new Connection ( process . env . EXPO_PUBLIC_HELIUS_URL , 'confirmed' ); const signature = await sendTransaction ( signed , connection ); return { signature }; }, }, process . env . EXPO_PUBLIC_HELIUS_URL , {} ). use ( TokenPlugin ); }, [ wallet , connected , signTransaction , signMessage , sendTransaction ]); const tools = useMemo (() => { if ( ! agent ) return null ; return createVercelAITools ( agent , agent . actions ); }, [ agent ]); return { agent , tools , isReady: !! agent }; } Mobile-Specific Considerations When working with Solana Agent Kit in React Native, consider these mobile-specific aspects:
Polyfills : Several Node.js modules need polyfills in React NativePerformance : Be mindful of resource usage on mobile devicesOffline Handling : Implement proper handling for intermittent connectivityDeep Linking : Configure for wallet connection redirectsSecure Storage : Use secure storage for sensitive information
License This project is licensed under the MIT License - see the LICENSE file for details.
Contributing Contributions are welcome! Please feel free to submit a Pull Request.
