Para Integration

.env.example

@@ -7,6 +7,11 @@ TAPESTRY_URL=your_tapestry_url_here
 NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id_here
 PRIVY_PUBLIC_KEY=your_privy_public_key_here
 
+# Para Wallet Configuration
+# Get your API key from: https://developer.getpara.com/
+NEXT_PUBLIC_PARA_API_KEY=your_para_api_key_here
+NEXT_PUBLIC_PARA_ENVIRONMENT=BETA  # BETA or PRODUCTION
+
 # Zerion API
 ZERION_API_KEY=your_zerion_api_key_here
 

README.md

@@ -18,6 +18,7 @@ cd solana-starter-kit
 At this stage, you need to sign up for API keys from each infrastructure partner required for your project. Use the links below to sign up:
 
 - **Privy**: Web3 authentication and embedded wallet infrastructure – <a href="https://dashboard.privy.io" target="_blank">Sign up for Privy</a>
+- **Para**: OAuth-based web3 wallet infrastructure – <a href="https://developer.getpara.com/" target="_blank">Get your Para API key</a>
 - **Tapestry**: Social graph and onchain identity API – <a href="https://app.usetapestry.dev/" target="_blank">Get Early Access at Tapestry</a>
 - **Jupiter**: Open source liquidity and trading API – <a href="https://portal.jup.ag" target="_blank">Get your Jupiter API key</a>
 - **Helius**: Real-time Solana RPC platform - <a href="https://dashboard.helius.dev/" target="_blank">Sign up at Helius</a>
@@ -40,6 +41,8 @@ Add the following docs URLs so Cursor can access them at any time:
 
 - **Privy**: https://docs.privy.io/
 
+- **Para**: https://docs.getpara.com/
+
 - **Tapestry**: https://docs.usetapestry.dev/api
 
 - **Zerion**: https://developers.zerion.io/reference/intro/getting-started
@@ -59,6 +62,74 @@ pnpm run dev
 
 Now you're all set to start coding! Begin by exploring the codebase, and use our documentation to guide your development.
 
+## Para Wallet Integration
+
+This starter kit includes a seamless integration with the [Para Wallet SDK](https://developer.getpara.com/), providing OAuth-based authentication with social login options. Para offers a modern approach to wallet connectivity with enterprise-grade security.
+
+### Para Key Features:
+- **OAuth Authentication**: Connect via Google, Twitter, Apple, Discord, Facebook, and Farcaster
+- **Email/Phone Login**: Traditional authentication methods for broader user adoption
+- **Embedded Wallets**: Automatically generated Solana wallets for authenticated users
+- **Transaction Signing**: Native Solana transaction signing capabilities
+- **Recovery Options**: Built-in wallet recovery mechanisms
+- **On-Ramp Integration**: Fiat-to-crypto purchase flows (test mode enabled)
+
+### Para Configuration:
+
+1. **Get Para API Key**: Visit [Para Developer Portal](https://developer.getpara.com/) to obtain your API key
+2. **Add to Environment**: Set `NEXT_PUBLIC_PARA_API_KEY` in your `.env.local`
+3. **Customize Theme**: The integration includes a custom dark theme matching the app design
+
+### Para Implementation Details:
+
+- **ParaProvider** (`src/components/provider/ParaProvider.tsx`): Main context provider managing Para authentication state
+- **Header Integration** (`src/components/common/header.tsx`): Dual login buttons for both Privy and Para
+- **Para Signer Hook** (`src/hooks/useParaSigner.ts`): Custom hook for Solana transaction signing with Para
+- **Unified Logout**: Single logout function handling both wallet types
+
+### Dual Wallet Architecture
+
+The application intelligently handles both Para and Privy wallet types:
+
+```typescript
+// Users can connect with either Para or Privy
+const isParaConnected = account?.isConnected && wallet
+const isPrivyConnected = authenticated
+
+// Unified logout handles both wallet types
+const handleLogout = async () => {
+  if (isParaConnected) {
+    await logoutAsync() // Para logout
+  }
+  if (isPrivyConnected) {
+    logout() // Privy logout
+  }
+}
+```
+
+### Benefits of Dual Integration:
+
+1. **User Choice**: Let users choose their preferred authentication method
+2. **Broader Adoption**: Support both Web3 natives (Privy) and mainstream users (Para)
+3. **Fallback Options**: If one service has issues, users can use the alternative
+4. **Testing**: Compare user experience and conversion rates between platforms
+
+This dual approach provides maximum flexibility and ensures your dApp can serve the widest possible user base.
+
+## Environment Variables
+
+For a complete list of environment variables and their setup instructions, please refer to the [.env.example](.env.example) file in the root directory.
+
+### Required Para Configuration:
+
+```bash
+# Para Wallet Configuration - Required for Para integration
+NEXT_PUBLIC_PARA_API_KEY=your_para_api_key_here
+NEXT_PUBLIC_PARA_ENVIRONMENT=BETA  # or PRODUCTION
+```
+
+**Para API Key Setup**: Visit [Para Developer Portal](https://developer.getpara.com/) to get your API key.
+
 ## NFT Portfolio Viewer Setup
 
 For the NFT portfolio viewer to work correctly, you need to obtain a Helius API key:

package.json

@@ -15,18 +15,22 @@
     "@emotion/react": "^11.14.0",
     "@eslint/eslintrc": "^3.3.0",
     "@ethersproject/properties": "^5.8.0",
+    "@getpara/react-sdk": "^1.18.1",
+    "@getpara/solana-web3.js-v1-integration": "^1.18.1",
     "@privy-io/react-auth": "^2.13.0",
     "@radix-ui/react-alert-dialog": "^1.1.13",
     "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-checkbox": "^1.3.1",
     "@radix-ui/react-dialog": "^1.1.13",
     "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-tabs": "^1.1.11",
+    "@solana/kit": "^2.3.0",
     "@solana/spl-token": "^0.4.12",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-wallets": "^0.19.32",
-    "@solana/web3.js": "^1.98.0",
+    "@solana/web3.js": "^1.98.2",
     "@solflare-wallet/wallet-adapter": "^1.0.3",
+    "@tanstack/react-query": "^5.82.0",
     "bs58": "^6.0.0",
     "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",