Merge branch 'main' of github.com:efdevcon/monorepo

Author: lassejaco

devconnect-app/EIP7702_SETUP.md

@@ -0,0 +1,173 @@
+# EIP-7702 with Para + Alchemy Setup
+
+Gasless USDC transactions for Para wallets using EIP-7702 temporary account upgrades and Alchemy Account Kit.
+
+## Overview
+
+- **What**: EOA wallets (Para) get temporary smart account functionality for gas sponsorship
+- **How**: EIP-7702 authorization + Alchemy Gas Manager
+- **Benefit**: Zero gas fees for USDC transfers on Base
+
+## Architecture
+
+```
+Para Wallet (EOA)
+    ↓
+Custom Signature Utilities (para-signature-utils.ts)
+    ↓
+EIP-7702 Authorization Signing
+    ↓
+Alchemy Modular Account V2 (mode: "7702")
+    ↓
+Alchemy Gas Manager (sponsored transaction)
+    ↓
+Base Network (confirmed transaction)
+```
+
+## Key Files
+
+### 1. Signature Utilities
+**`src/lib/para-signature-utils.ts`**
+- Custom signing methods that bypass Ethereum Signed Message prefix
+- Uses viem's `hashAuthorization`, `hashMessage`, `hashTypedData`
+- Properly formats v-values (0/1 for EIP-7702, 27/28 for standard)
+
+### 2. Configuration
+**`src/config/eip7702.ts`**
+```typescript
+export const EIP7702_CONFIG = {
+  ENABLED: process.env.NEXT_PUBLIC_ENABLE_EIP7702 === 'true',
+  ALCHEMY_RPC_URL: process.env.NEXT_PUBLIC_ALCHEMY_RPC_URL,
+  ALCHEMY_GAS_POLICY_ID: process.env.NEXT_PUBLIC_ALCHEMY_GAS_POLICY_ID,
+  USDC_CONTRACT: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
+  USDC_DECIMALS: 6,
+  CHAIN_ID: 8453, // Base
+};
+```
+
+### 3. Transaction Hook
+**`src/hooks/useParaEIP7702Transaction.ts`**
+- Creates extended viem account with custom signing methods
+- Overrides: `signAuthorization`, `signMessage`, `signTypedData`
+- Uses Alchemy's `createModularAccountV2Client` with `mode: "7702"`
+
+### 4. Router
+**`src/hooks/useTransactionRouter.ts`**
+- Switches between legacy (backend relayer) and EIP-7702 (Alchemy) systems
+- Based on `NEXT_PUBLIC_ENABLE_EIP7702` feature flag
+
+## Environment Variables
+
+```bash
+# Enable EIP-7702
+NEXT_PUBLIC_ENABLE_EIP7702=true
+
+# Alchemy Configuration
+NEXT_PUBLIC_ALCHEMY_RPC_URL=https://base-mainnet.g.alchemy.com/v2/YOUR_API_KEY
+NEXT_PUBLIC_ALCHEMY_GAS_POLICY_ID=your-gas-policy-id
+```
+
+## Alchemy Setup
+
+1. **Create Account**: https://dashboard.alchemy.com
+2. **Create App**: Base Mainnet
+3. **Configure Gas Manager**:
+   - Go to Gas Manager
+   - Create Policy
+   - Set spending limits
+   - Configure allowlist (optional)
+4. **Copy Credentials**:
+   - RPC URL from app dashboard
+   - Policy ID from Gas Manager
+
+## How It Works
+
+### Legacy System (Before)
+```typescript
+User signs EIP-712 → Backend relayer → Pays gas → USDC transfer
+```
+
+### EIP-7702 System (Now)
+```typescript
+User signs EIP-7702 auth → Temporary account upgrade → 
+Alchemy sponsors gas → USDC transfer → Account reverts to EOA
+```
+
+## Technical Details
+
+### Why Custom Signature Utilities?
+
+Para's standard signing methods add Ethereum Signed Message prefix:
+```typescript
+keccak256("\x19Ethereum Signed Message:\n32" + message)
+```
+
+EIP-7702 requires raw signatures:
+```typescript
+keccak256(message) // No prefix!
+```
+
+Our custom utilities:
+1. Hash the data with viem's proper hash functions
+2. Sign the hash directly with Para's `signMessage`
+3. Adjust v-values correctly for each context
+
+### Signature v-value Handling
+
+- **Standard Ethereum**: v = 27 or 28
+- **EIP-7702**: yParity = 0 or 1
+
+Our utilities automatically convert based on context.
+
+## Testing
+
+1. Set environment variables
+2. Enable feature flag: `NEXT_PUBLIC_ENABLE_EIP7702=true`
+3. Trigger USDC payment with Para wallet
+4. Check console logs for EIP-7702 flow
+5. Verify gas sponsorship in Alchemy dashboard
+
+## Fallback Behavior
+
+If EIP-7702 is disabled or misconfigured, automatically falls back to legacy backend relayer system.
+
+## Dependencies
+
+```json
+{
+  "@account-kit/smart-contracts": "^4.70.0",
+  "@account-kit/infra": "^4.70.0",
+  "@aa-sdk/core": "^4.70.0",
+  "@getpara/react-sdk": "^2.0.0-alpha.63"
+}
+```
+
+## Console Logs (Success)
+
+```
+🔄 [EIP-7702] Starting EIP-7702 transaction with Alchemy Account Kit
+🔄 [EIP-7702] Signing EIP-7702 authorization with Para custom utilities...
+✅ [EIP-7702] Authorization signed successfully!
+🔄 [EIP-7702] Signing message with Para custom utilities...
+✅ [EIP-7702] Message signed successfully
+✅ [EIP-7702] UserOperation submitted
+✅ [EIP-7702] Transaction confirmed
+```
+
+## Troubleshooting
+
+### "User operation cost exceeds specified spend limit"
+**Solution**: Increase spending limit in Alchemy Gas Manager policy
+
+### "Invalid account signature"
+**Solution**: Verify all signing methods are using custom utilities
+
+### "Invalid 7702 Auth signature"
+**Solution**: Check RLP encoding and v-value formatting
+
+## References
+
+- [EIP-7702 Specification](https://eips.ethereum.org/EIPS/eip-7702)
+- [Alchemy Account Kit](https://accountkit.alchemy.com/)
+- [Para EIP-7702 Guide](https://docs.para.gg/v2/react/guides/account-abstraction/eip7702-alchemy)
+

devconnect-app/package.json

@@ -14,6 +14,9 @@
     "q": "npx tsx scripts/fetch-quests.ts"
   },
   "dependencies": {
+    "@aa-sdk/core": "^4.70.0",
+    "@account-kit/infra": "^4.70.0",
+    "@account-kit/smart-contracts": "^4.70.0",
     "@base-org/account": "^2.2.0",
     "@coinbase/cdp-sdk": "^1.0.0",
     "@cosmjs/cosmwasm-stargate": "^0.34.0",
@@ -25,7 +28,9 @@
     "@farcaster/miniapp-sdk": "^0.1.8",
     "@farcaster/miniapp-wagmi-connector": "^1.0.0",
     "@getpara/graz": "2.0.0-alpha.19",
+    "@getpara/react-common": "2.0.0-alpha.63",
     "@getpara/react-sdk": "2.0.0-alpha.63",
+    "@getpara/viem-v2-integration": "2.0.0-alpha.63",
     "@getpara/wagmi-v2-integration": "2.0.0-alpha.63",
     "@leapwallet/cosmos-social-login-capsule-provider": "^0.0.44",
     "@netlify/plugin-nextjs": "^5.13.5",
@@ -62,6 +67,7 @@
     "next": "16.0.0-beta.0",
     "next-themes": "^0.4.6",
     "panzoom": "^9.4.3",
+    "permissionless": "^0.2.57",
     "pino-pretty": "^13.1.1",
     "qrcode": "^1.5.4",
     "qrcode.react": "^4.2.0",
@@ -74,7 +80,7 @@
     "starknet": "^7.6.4",
     "tailwind-merge": "^3.3.1",
     "usehooks-ts": "^3.1.1",
-    "viem": "^2.37.11",
+    "viem": "^2.38.2",
     "wagmi": "^2.17.5",
     "zustand": "^5.0.7"
   },

devconnect-app/src/app/api/auth/tickets/pretix.ts

@@ -1,5 +1,14 @@
 import stores from './pretix-stores-list';
 
+interface PretixItem {
+  id: number;
+  name: string | { en: string;[key: string]: string };
+  description?: string | { en: string;[key: string]: string };
+  category?: string;
+  active?: boolean;
+  [key: string]: any;
+}
+
 export async function getPaidTicketsByEmail(
   email: string,
   storeID = 'devconnect'
@@ -30,7 +39,7 @@ export async function getPaidTicketsByEmail(
   }
 
   const itemsData = await itemsResponse.json();
-  const itemsMap = new Map(
+  const itemsMap = new Map<number, PretixItem>(
     itemsData.results.map((item: any) => [item.id, item])
   );
 
@@ -72,23 +81,26 @@ export async function getPaidTicketsByEmail(
           const addons = order.positions
             .filter((p: any) => p.addon_to === position.id)
             .map((addon: any) => {
-              const itemDetails = itemsMap.get(addon.item) as any;
+              const itemDetails = itemsMap.get(addon.item);
+              const name = itemDetails?.name;
+              const description = itemDetails?.description;
               return {
                 id: addon.item,
                 secret: addon.secret,
                 itemName:
-                  itemDetails?.name?.en ||
-                  itemDetails?.name ||
-                  `Item ${addon.item}`,
+                  typeof name === 'object' ? name.en : name || `Item ${addon.item}`,
                 description:
-                  itemDetails?.description?.en || itemDetails?.description,
+                  typeof description === 'object' ? description.en : description,
                 price: addon.price,
                 attendeeName: addon.attendee_name,
                 category: itemDetails?.category,
                 active: itemDetails?.active,
               };
             });
 
+          const mainName = mainItemDetails?.name;
+          const mainDescription = mainItemDetails?.description;
+
           return {
             secret: position.secret,
             attendeeName: position.attendee_name,
@@ -97,12 +109,9 @@ export async function getPaidTicketsByEmail(
             // Use item details from the items endpoint
             itemId: position.item,
             itemName:
-              mainItemDetails?.name?.en ||
-              mainItemDetails?.name ||
-              position.item_name ||
-              'Ticket',
+              typeof mainName === 'object' ? mainName.en : mainName || position.item_name || 'Ticket',
             itemDescription:
-              mainItemDetails?.description?.en || mainItemDetails?.description,
+              typeof mainDescription === 'object' ? mainDescription.en : mainDescription,
             addons: addons,
           };
         }),

devconnect-app/src/components/PaymentModal.tsx

@@ -8,6 +8,7 @@ import { toast } from 'sonner';
 import { base } from '@base-org/account';
 import { useWalletManager } from '@/hooks/useWalletManager';
 import { useTransaction } from '@/hooks/useTransaction';
+import { isEIP7702Available } from '@/config/eip7702';
 import TokenSelector from '@/components/payment/TokenSelector';
 import NetworkSelector from '@/components/payment/NetworkSelector';
 import StatusStep from '@/components/payment/StatusStep';
@@ -122,6 +123,9 @@ export default function PaymentModal({
   const [isAddingTransaction, setIsAddingTransaction] = useState(false);
   const [isInitialLoad, setIsInitialLoad] = useState(true);
 
+  // Check if EIP-7702 is available
+  const isUsingEIP7702 = isPara && isEIP7702Available();
+
   // PaymentForm state
   const [recipient, setRecipient] = useState('');
   const [amount, setAmount] = useState('0.01');
@@ -1257,6 +1261,24 @@ export default function PaymentModal({
                 Simulation Mode
               </div>
             )}
+            {isPara && isUsingEIP7702 && !isSystemSimulationMode && (
+              <div className="inline-flex items-center gap-1 bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium">
+                <svg
+                  className="h-3 w-3"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13 10V3L4 14h7v7l9-11h-7z"
+                  />
+                </svg>
+                EIP-7702
+              </div>
+            )}
           </div>
 
           <button
@@ -1455,12 +1477,34 @@ export default function PaymentModal({
                         </div>
                       </div>
                       {isPara && (
-                        <p className="text-[#ededf0] text-xs text-center">
-                          <span className="font-bold">Para: </span>
-                          <span className="font-normal">
-                            This transaction is gas-free
-                          </span>
-                        </p>
+                        <div className="space-y-1">
+                          <p className="text-[#ededf0] text-xs text-center">
+                            <span className="font-bold">Para: </span>
+                            <span className="font-normal">
+                              This transaction is gas-free
+                            </span>
+                          </p>
+                          {isUsingEIP7702 && (
+                            <p className="text-[#f6b613] text-xs text-center flex items-center justify-center gap-1">
+                              <svg
+                                className="h-3 w-3"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  strokeWidth={2}
+                                  d="M13 10V3L4 14h7v7l9-11h-7z"
+                                />
+                              </svg>
+                              <span className="font-semibold">
+                                EIP-7702 Enabled
+                              </span>
+                            </p>
+                          )}
+                        </div>
                       )}
                     </div>
                     {/* <button className="text-[#1b6fae] text-sm font-medium">