feat: add Porto + Para EIP-7702 smart account example

web/with-react-nextjs/aa-porto-7702/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

web/with-react-nextjs/aa-porto-7702/README.md

@@ -0,0 +1,57 @@
+# Smart Wallet Porto (EIP-7702)
+
+This example demonstrates how to integrate Para SDK with Porto to upgrade Para EOA wallets to smart accounts using
+EIP-7702. It showcases account upgrading, session keys, and transaction batching while preserving the original wallet
+address.
+
+## Setup
+
+### Environment Variables
+
+Create a `.env.local` file in the root directory:
+
+```env
+NEXT_PUBLIC_PARA_API_KEY=your_para_api_key
+```
+
+### Installation
+
+Install dependencies using your preferred package manager:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Key Dependencies
+
+- `@getpara/react-sdk` (v2.0.0-alpha.72) - Para React SDK for wallet integration
+- `porto` (latest) - Porto smart account SDK
+- `viem` (v2.33.0) - TypeScript interface for Ethereum
+- `@tanstack/react-query` (v5.83.0) - Data fetching and state management
+- `next` (v15.1.5) - React framework
+
+## Key Files
+
+- `src/context/Providers.tsx` - Para provider setup with Base Sepolia chain
+- `src/hooks/usePortoAccount.ts` - Porto account upgrade and management hook
+- `src/components/PortoDemo.tsx` - Demo UI showing EOA vs Smart Account comparison
+
+## Important Notes
+
+- Porto requires raw signing (no EIP-191 prefix) - uses `para.signMessage()` directly
+- Must use Porto relay endpoint: `https://rpc.porto.sh`
+- Currently supports Base Sepolia testnet
+
+## Learn More
+
+- [Para Documentation](https://docs.getpara.com)
+- [Para Developer Portal](https://developer.getpara.com)
+- [Porto Documentation](https://porto.sh/sdk)
+- [EIP-7702 Specification](https://eips.ethereum.org/EIPS/eip-7702)

web/with-react-nextjs/aa-porto-7702/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

web/with-react-nextjs/aa-porto-7702/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

web/with-react-nextjs/aa-porto-7702/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "aa-porto-7702",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "postinstall": "npx setup-para"
+  },
+  "dependencies": {
+    "@cosmjs/cosmwasm-stargate": "^0.34.0",
+    "@cosmjs/launchpad": "^0.27.1",
+    "@cosmjs/proto-signing": "^0.34.0",
+    "@cosmjs/stargate": "^0.34.0",
+    "@cosmjs/tendermint-rpc": "^0.34.0",
+    "@getpara/react-sdk": "2.0.0-alpha.72",
+    "@solana-mobile/wallet-adapter-mobile": "^2.2.2",
+    "@solana/wallet-adapter-base": "^0.9.27",
+    "@solana/wallet-adapter-react": "^0.15.39",
+    "@solana/wallet-adapter-walletconnect": "^0.1.21",
+    "@solana/web3.js": "^1.98.2",
+    "@tanstack/react-query": "^5.83.0",
+    "graz": "^0.4.1",
+    "long": "^5.3.2",
+    "next": "15.1.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "porto": "latest",
+    "starknet": "^7.6.4",
+    "viem": "^2.33.0",
+    "wagmi": "^2.16.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.5",
+    "pino-pretty": "13.0.0",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "resolutions": {
+    "@getpara/evm-wallet-connectors": "2.0.0-alpha.72"
+  }
+}

web/with-react-nextjs/aa-porto-7702/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

web/with-react-nextjs/aa-porto-7702/src/app/layout.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "@/styles/globals.css";
+import "@getpara/react-sdk/styles.css";
+import { Providers } from "@/context/Providers";
+import { Header } from "@/components/layout/Header";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Para Example",
+  description: "Para SDK integration example",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Providers>
+          <Header />
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}

web/with-react-nextjs/aa-porto-7702/src/app/page.tsx

@@ -0,0 +1,9 @@
+import { PortoDemo } from "@/components/PortoDemo";
+
+export default function Home() {
+  return (
+    <main className="min-h-screen">
+      <PortoDemo />
+    </main>
+  );
+}