@getpara/cli 2.15.0

package/templates/expo/lib/auth.ts

@@ -0,0 +1,54 @@
+import { openAuthSessionAsync } from 'expo-web-browser';
+import { APP_SCHEME } from './constants';
+
+/**
+ * Opens an authentication URL in the system browser with deep link callback
+ */
+export async function openAuthUrl(url: string): Promise<{ success: boolean }> {
+  const authUrl = new URL(url);
+  authUrl.searchParams.set('nativeCallbackUrl', APP_SCHEME);
+
+  const result = await openAuthSessionAsync(authUrl.toString(), APP_SCHEME);
+
+  return {
+    success: result.type === 'success',
+  };
+}
+
+/**
+ * Formats a phone number for display
+ */
+export function formatPhoneNumber(phone: string): string {
+  const cleaned = phone.replace(/\D/g, '');
+  if (cleaned.length === 10) {
+    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
+  }
+  if (cleaned.length === 11 && cleaned.startsWith('1')) {
+    return `+1 (${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7)}`;
+  }
+  return phone;
+}
+
+/**
+ * Validates an email address
+ */
+export function isValidEmail(email: string): boolean {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+}
+
+/**
+ * Validates a phone number (basic validation)
+ */
+export function isValidPhone(phone: string): boolean {
+  const cleaned = phone.replace(/\D/g, '');
+  return cleaned.length >= 10 && cleaned.length <= 15;
+}
+
+/**
+ * Truncates an address for display
+ */
+export function truncateAddress(address: string, chars = 6): string {
+  if (address.length <= chars * 2 + 3) return address;
+  return `${address.slice(0, chars)}...${address.slice(-chars)}`;
+}

package/templates/expo/lib/constants.ts.template

@@ -0,0 +1,2 @@
+// App scheme for deep linking
+export const APP_SCHEME = '{{expoScheme}}://';

package/templates/expo/lib/para.ts

@@ -0,0 +1,14 @@
+import { ParaMobile, Environment } from '@getpara/react-native-wallet';
+
+const API_KEY = process.env.EXPO_PUBLIC_PARA_API_KEY || '';
+const ENVIRONMENT = (process.env.EXPO_PUBLIC_PARA_ENVIRONMENT as Environment) || Environment.BETA;
+
+if (!API_KEY) {
+  console.warn('EXPO_PUBLIC_PARA_API_KEY is not set. Please add it to your environment variables.');
+}
+
+// Create Para singleton instance
+// disableWorkers is required for React Native (no Web Worker support)
+export const para = new ParaMobile(ENVIRONMENT, API_KEY, undefined, {
+  disableWorkers: true,
+});

package/templates/expo/metro.config.cjs

@@ -0,0 +1,14 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+// Para SDK requires crypto and buffer polyfills
+config.resolver.extraNodeModules = {
+  crypto: require.resolve('react-native-quick-crypto'),
+  buffer: require.resolve('@craftzdog/react-native-buffer'),
+};
+
+module.exports = withNativeWind(config, { input: './global.css' });

package/templates/expo/nativewind-env.d.ts

@@ -0,0 +1,2 @@
+// @ts-ignore
+/// <reference types="nativewind/types" />

package/templates/expo/prettier.config.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  singleQuote: true,
+  bracketSameLine: true,
+  trailingComma: 'es5',
+
+  plugins: [require.resolve('prettier-plugin-tailwindcss')],
+  tailwindAttributes: ['className'],
+};

package/templates/expo/providers/ParaProvider.tsx

@@ -0,0 +1,140 @@
+import { createContext, useContext, useEffect, useState, useCallback, type ReactNode } from 'react';
+import { View, ActivityIndicator, Text } from 'react-native';
+import { para } from '@/lib/para';
+import { useWallets } from '@/hooks/useWallets';
+import type { User, Wallet } from '@/types';
+
+interface ParaContextValue {
+  isReady: boolean;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  user: User | null;
+  wallets: Wallet[];
+  logout: () => Promise<void>;
+  refreshAuth: () => Promise<void>;
+  setAuthenticated: (authenticated: boolean) => void;
+}
+
+const ParaContext = createContext<ParaContextValue | null>(null);
+
+interface ParaProviderProps {
+  children: ReactNode;
+}
+
+export function ParaProvider({ children }: ParaProviderProps) {
+  const [isReady, setIsReady] = useState(false);
+  const [initError, setInitError] = useState<string | null>(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [user, setUser] = useState<User | null>(null);
+
+  const { wallets, loadWallets, clearWallets } = useWallets();
+
+  const checkAuth = useCallback(async () => {
+    try {
+      setIsLoading(true);
+
+      const loggedIn = await para.isFullyLoggedIn();
+
+      if (loggedIn) {
+        setIsAuthenticated(true);
+        await loadWallets();
+      } else {
+        setIsAuthenticated(false);
+        setUser(null);
+        clearWallets();
+      }
+    } catch {
+      setIsAuthenticated(false);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [loadWallets, clearWallets]);
+
+  const logout = useCallback(async () => {
+    try {
+      await para.logout();
+      setIsAuthenticated(false);
+      setUser(null);
+      clearWallets();
+    } catch {
+      // Logout failed silently
+    }
+  }, [clearWallets]);
+
+  const refreshAuth = useCallback(async () => {
+    await checkAuth();
+  }, [checkAuth]);
+
+  const setAuthenticated = useCallback(
+    (authenticated: boolean) => {
+      setIsAuthenticated(authenticated);
+      if (authenticated) {
+        loadWallets();
+      } else {
+        clearWallets();
+      }
+    },
+    [loadWallets, clearWallets]
+  );
+
+  // Initialize Para SDK, then check auth
+  useEffect(() => {
+    const initialize = async () => {
+      try {
+        await para.init();
+        setIsReady(true);
+        await checkAuth();
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Failed to initialize Para';
+        setInitError(message);
+      }
+    };
+
+    initialize();
+  }, [checkAuth]);
+
+  if (initError) {
+    return (
+      <View className="flex-1 items-center justify-center bg-white p-6">
+        <Text className="mb-2 text-center text-lg font-semibold text-red-500">
+          Initialization Error
+        </Text>
+        <Text className="text-center text-gray-600">{initError}</Text>
+      </View>
+    );
+  }
+
+  if (!isReady) {
+    return (
+      <View className="flex-1 items-center justify-center bg-white">
+        <ActivityIndicator size="large" color="#4F46E5" />
+        <Text className="mt-4 text-gray-500">Initializing...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ParaContext.Provider
+      value={{
+        isReady,
+        isAuthenticated,
+        isLoading,
+        user,
+        wallets,
+        logout,
+        refreshAuth,
+        setAuthenticated,
+      }}>
+      {children}
+    </ParaContext.Provider>
+  );
+}
+
+export function usePara() {
+  const context = useContext(ParaContext);
+  if (!context) {
+    throw new Error('usePara must be used within a ParaProvider');
+  }
+  return context;
+}

package/templates/expo/tailwind.config.cjs

@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./app/**/*.{js,ts,tsx}', './components/**/*.{js,ts,tsx}'],
+
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50: '#fff4ed',
+          100: '#ffe6d5',
+          200: '#ffc9a6',
+          300: '#ffa36d',
+          400: '#ff7635',
+          500: '#ff4e00',
+          600: '#f03d00',
+          700: '#c72c00',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

package/templates/expo/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts", "nativewind-env.d.ts"]
+}

package/templates/expo/types/index.ts

@@ -0,0 +1,28 @@
+// Auth types
+export type AuthMethod = 'email' | 'phone' | 'google';
+
+export type AuthStatus = 'idle' | 'loading' | 'verifying' | 'completing' | 'success' | 'error';
+
+export interface AuthState {
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  user: User | null;
+}
+
+export interface User {
+  id: string;
+  email?: string;
+  phone?: string;
+}
+
+export interface Wallet {
+  id: string;
+  address: string;
+  type: string;
+}
+
+// One-click login types
+export interface OneClickLoginResult {
+  success: boolean;
+  error?: string;
+}

package/templates/nextjs/README.md

@@ -0,0 +1,69 @@
+# {{appName}}
+
+A Next.js application with Para SDK integration, created with `@getpara/create-para-app`.
+
+## Getting Started
+
+1. **Set up environment variables:**
+
+   ```bash
+   cp .env.example .env
+   ```
+
+   Edit `.env` and add your Para API key:
+   ```
+   NEXT_PUBLIC_PARA_API_KEY=your_api_key_here
+   ```
+
+   Get your API key at [developer.getpara.com](https://developer.getpara.com).
+
+2. **Install dependencies:**
+
+   ```bash
+   npm install
+   ```
+
+3. **Run the development server:**
+
+   ```bash
+   npm run dev
+   ```
+
+4. Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+## Project Structure
+
+```
+src/
+├── app/
+│   ├── layout.tsx      # Root layout with ParaProvider
+│   └── page.tsx        # Home page with auth flow
+├── components/
+│   ├── ParaProvider.tsx # Para SDK configuration
+│   ├── layout/
+│   │   └── Header.tsx   # Navigation header
+│   └── ui/
+│       ├── ConnectCard.tsx  # Connect wallet card
+│       ├── WalletInfo.tsx   # Wallet display
+│       └── SignMessage.tsx  # Message signing
+└── hooks/
+    └── useSignHelloWorld.ts # Signing hook
+```
+
+## Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run start` - Start production server
+- `npm run lint` - Run ESLint
+- `npm run typecheck` - Run TypeScript type checking
+
+## Learn More
+
+- [Para Documentation](https://docs.getpara.com)
+- [Para React SDK](https://docs.getpara.com/react-sdk)
+- [Next.js Documentation](https://nextjs.org/docs)
+
+## License
+
+MIT

package/templates/nextjs/_env.example

@@ -0,0 +1,8 @@
+# Para API Configuration
+# Get your API key at https://developer.getpara.com
+NEXT_PUBLIC_PARA_API_KEY=your_api_key_here
+NEXT_PUBLIC_PARA_ENVIRONMENT=BETA
+
+# WalletConnect Project ID (required for WalletConnect integration)
+# Get your project ID at https://cloud.walletconnect.com
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=

package/templates/nextjs/_gitignore

@@ -0,0 +1,36 @@
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/templates/nextjs/_yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package/templates/nextjs/eslint.config.mjs

@@ -0,0 +1,10 @@
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    ignores: ['.next/*', 'node_modules/*'],
+  },
+);

package/templates/nextjs/next.config.ts

@@ -0,0 +1,5 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;

package/templates/nextjs/postcss.config.mjs

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

package/templates/nextjs/public/para.svg

@@ -0,0 +1,3 @@
+<svg width="216" height="204" viewBox="0 0 216 204" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60 0H144C183.764 0 216 32.2355 216 72C216 111.765 183.764 144 144 144H96C82.7452 144 72 154.745 72 168V204H0V132H36C49.2548 132 60 121.255 60 108L60 0Z" fill="black"/>
+</svg>

package/templates/nextjs/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 { ParaProvider } from "@/components/ParaProvider";
+import { Header } from "@/components/layout/Header";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "{{appName}}",
+  description: "Built with Para SDK",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <ParaProvider>
+          <Header />
+          {children}
+        </ParaProvider>
+      </body>
+    </html>
+  );
+}

package/templates/nextjs/src/app/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useModal, useAccount } from "@getpara/react-sdk";
+import { useSignHelloWorld } from "@/hooks/useSignHelloWorld";
+import { ConnectCard } from "@/components/ui/ConnectCard";
+import { WalletInfo } from "@/components/ui/WalletInfo";
+import { SignMessage } from "@/components/ui/SignMessage";
+
+export default function Home() {
+  const { openModal } = useModal();
+  const { isConnected } = useAccount();
+  const { sign, message, isPending, error, signature } = useSignHelloWorld();
+
+  return (
+    <div className="container mx-auto px-4 py-12">
+      <div className="text-center mb-12">
+        <h1 className="text-4xl font-bold tracking-tight mb-4">{{appName}}</h1>
+        <p className="text-lg text-gray-600 max-w-3xl mx-auto">
+          Sign messages with your Para wallet. This example demonstrates the
+          simplest integration using Para&apos;s built-in modal and React SDK hooks.
+        </p>
+      </div>
+
+      {!isConnected ? (
+        <ConnectCard onConnect={openModal} />
+      ) : (
+        <div className="max-w-xl mx-auto">
+          <WalletInfo />
+          <SignMessage
+            message={message}
+            onSign={sign}
+            isPending={isPending}
+            error={error}
+            signature={signature}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/src/components/ParaProvider.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Environment, ParaProvider as ParaSDKProvider } from "@getpara/react-sdk";
+// @if:evm
+import { sepolia } from "wagmi/chains";
+// @endif
+// @if:cosmos
+import { cosmoshub, osmosis, noble } from "graz/chains";
+// @endif
+// @if:solana
+import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
+import { clusterApiUrl } from "@solana/web3.js";
+// @endif
+
+const API_KEY = process.env.NEXT_PUBLIC_PARA_API_KEY ?? "";
+const ENVIRONMENT = (process.env.NEXT_PUBLIC_PARA_ENVIRONMENT as Environment) || Environment.BETA;
+
+const queryClient = new QueryClient();
+
+// @if:cosmos
+const cosmosChains = [cosmoshub, osmosis, noble];
+// @endif
+// @if:solana
+const solanaNetwork = WalletAdapterNetwork.Devnet;
+const endpoint = clusterApiUrl(solanaNetwork);
+// @endif
+
+export function ParaProvider({ children }: { children: React.ReactNode }) {
+  if (!API_KEY) {
+    return (
+      <div style={{ padding: "20px", textAlign: "center" }}>
+        <h2>Missing API Key</h2>
+        <p>Please set NEXT_PUBLIC_PARA_API_KEY in your .env file.</p>
+        <p>
+          Get your API key at{" "}
+          <a href="https://developer.getpara.com" target="_blank" rel="noopener noreferrer">
+            developer.getpara.com
+          </a>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ParaSDKProvider
+        paraClientConfig={{
+          apiKey: API_KEY,
+          env: ENVIRONMENT,
+        }}
+        // @if:hasExternalWallets
+        externalWalletConfig={{
+          wallets: [
+            // @inject:wallets
+          ],
+          // @if:evm
+          evmConnector: {
+            config: {
+              chains: [sepolia],
+            },
+          },
+          walletConnect: {
+            projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID || "",
+          },
+          // @endif
+          // @if:cosmos
+          cosmosConnector: {
+            config: {
+              chains: cosmosChains,
+              selectedChainId: cosmoshub.chainId,
+              multiChain: false,
+              onSwitchChain: (chainId) => {
+                console.log("Switched chain to:", chainId);
+              },
+            },
+          },
+          // @endif
+          // @if:solana
+          solanaConnector: {
+            config: {
+              endpoint,
+              chain: solanaNetwork,
+              appIdentity: {
+                uri: typeof window !== "undefined" ? `${window.location.protocol}//${window.location.host}` : "",
+              },
+            },
+          },
+          // @endif
+        }}
+        // @endif
+        config={{ appName: "{{appName}}" }}
+        paraModalConfig={{
+          disableEmailLogin: {{disableEmail}},
+          disablePhoneLogin: {{disablePhone}},
+          authLayout: ["AUTH:FULL", "EXTERNAL:FULL"],
+          oAuthMethods: [{{oauthMethods}}],
+          theme: {
+            foregroundColor: "#222222",
+            backgroundColor: "#FFFFFF",
+            accentColor: "#888888",
+            darkForegroundColor: "#EEEEEE",
+            darkBackgroundColor: "#111111",
+            darkAccentColor: "#AAAAAA",
+            mode: "light",
+            borderRadius: "none",
+            font: "Inter",
+          },
+          recoverySecretStepEnabled: true,
+          twoFactorAuthEnabled: false,
+        }}>
+        {children}
+      </ParaSDKProvider>
+    </QueryClientProvider>
+  );
+}