@getpara/create-para-app 0.5.0 → 2.7.0

package/templates/expo/components/features/AuthForm.tsx.template

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import { View, Text, Alert } from 'react-native';
+
+import { Button, Input } from '@/components/ui';
+// @if:hasEmail
+import { isValidEmail } from '@/lib/auth';
+// @endif
+// @if:hasPhone
+import { isValidPhone } from '@/lib/auth';
+// @endif
+
+// @if:hasEmail && hasPhone
+type AuthMethod = 'email' | 'phone';
+// @endif
+
+interface AuthFormProps {
+  onSubmit: (value: string, method: 'email' | 'phone') => Promise<void>;
+  loading?: boolean;
+  error?: string | null;
+}
+
+export function AuthForm({ onSubmit, loading = false, error }: AuthFormProps) {
+// @if:hasEmail && hasPhone
+  const [method, setMethod] = useState<AuthMethod>('email');
+// @endif
+// @if:hasEmail
+  const [email, setEmail] = useState('');
+// @endif
+// @if:hasPhone
+  const [phone, setPhone] = useState('');
+// @endif
+
+  const handleSubmit = async () => {
+// @if:hasEmail && hasPhone
+    if (method === 'email') {
+      if (!isValidEmail(email)) {
+        Alert.alert('Invalid Email', 'Please enter a valid email address');
+        return;
+      }
+      await onSubmit(email, 'email');
+    } else {
+      if (!isValidPhone(phone)) {
+        Alert.alert('Invalid Phone', 'Please enter a valid phone number');
+        return;
+      }
+      await onSubmit(phone, 'phone');
+    }
+// @endif
+// @if:hasEmail && !hasPhone
+    if (!isValidEmail(email)) {
+      Alert.alert('Invalid Email', 'Please enter a valid email address');
+      return;
+    }
+    await onSubmit(email, 'email');
+// @endif
+// @if:hasPhone && !hasEmail
+    if (!isValidPhone(phone)) {
+      Alert.alert('Invalid Phone', 'Please enter a valid phone number');
+      return;
+    }
+    await onSubmit(phone, 'phone');
+// @endif
+  };
+
+  return (
+    <View>
+// @if:hasEmail && hasPhone
+      <View className="mb-4 flex-row rounded-xl bg-gray-100 p-1">
+        <Button
+          title="Email"
+          variant={method === 'email' ? 'primary' : 'secondary'}
+          onPress={() => setMethod('email')}
+          fullWidth={false}
+        />
+        <Button
+          title="Phone"
+          variant={method === 'phone' ? 'primary' : 'secondary'}
+          onPress={() => setMethod('phone')}
+          fullWidth={false}
+        />
+      </View>
+// @endif
+
+// @if:hasEmail && hasPhone
+      {method === 'email' ? (
+        <Input
+          label="Email Address"
+          placeholder="you@example.com"
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+      ) : (
+        <Input
+          label="Phone Number"
+          placeholder="+1 (555) 000-0000"
+          value={phone}
+          onChangeText={setPhone}
+          keyboardType="phone-pad"
+        />
+      )}
+// @endif
+// @if:hasEmail && !hasPhone
+      <Input
+        label="Email Address"
+        placeholder="you@example.com"
+        value={email}
+        onChangeText={setEmail}
+        keyboardType="email-address"
+        autoCapitalize="none"
+        autoCorrect={false}
+      />
+// @endif
+// @if:hasPhone && !hasEmail
+      <Input
+        label="Phone Number"
+        placeholder="+1 (555) 000-0000"
+        value={phone}
+        onChangeText={setPhone}
+        keyboardType="phone-pad"
+      />
+// @endif
+
+      {error && (
+        <Text className="mb-4 text-center text-sm text-red-500">{error}</Text>
+      )}
+
+      <Button
+        title={loading ? 'Signing in...' : 'Continue'}
+        onPress={handleSubmit}
+        disabled={loading}
+        loading={loading}
+      />
+    </View>
+  );
+}

package/templates/expo/components/features/OAuthButtons.tsx.template

@@ -0,0 +1,27 @@
+// @if:hasOAuth
+import { View } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+import { Button } from '@/components/ui';
+
+interface OAuthButtonsProps {
+  onGooglePress?: () => void;
+  disabled?: boolean;
+}
+
+export function OAuthButtons({ onGooglePress, disabled = false }: OAuthButtonsProps) {
+  return (
+    <View className="gap-3">
+      {onGooglePress && (
+        <Button
+          title="Continue with Google"
+          variant="outline"
+          onPress={onGooglePress}
+          disabled={disabled}
+          icon={<Ionicons name="logo-google" size={20} color="#111" />}
+        />
+      )}
+    </View>
+  );
+}
+// @endif

package/templates/expo/components/features/index.ts.template

@@ -0,0 +1,4 @@
+export { AuthForm } from './AuthForm';
+// @if:hasOAuth
+export { OAuthButtons } from './OAuthButtons';
+// @endif

package/templates/expo/components/ui/Button.tsx

@@ -0,0 +1,58 @@
+import { TouchableOpacity, Text, View, ActivityIndicator } from 'react-native';
+import type { ReactNode } from 'react';
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'danger' | 'outline';
+  disabled?: boolean;
+  loading?: boolean;
+  icon?: ReactNode;
+  fullWidth?: boolean;
+}
+
+export function Button({
+  title,
+  onPress,
+  variant = 'primary',
+  disabled = false,
+  loading = false,
+  icon,
+  fullWidth = true,
+}: ButtonProps) {
+  const baseClasses = 'flex-row items-center justify-center rounded-xl py-4 px-6';
+  const widthClass = fullWidth ? 'w-full' : '';
+
+  const variantClasses = {
+    primary: 'bg-gray-900',
+    secondary: 'bg-gray-100',
+    danger: 'bg-red-500',
+    outline: 'bg-transparent border border-gray-300',
+  };
+
+  const textClasses = {
+    primary: 'text-white',
+    secondary: 'text-gray-900',
+    danger: 'text-white',
+    outline: 'text-gray-900',
+  };
+
+  const disabledClasses = disabled || loading ? 'opacity-50' : '';
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled || loading}
+      className={`${baseClasses} ${widthClass} ${variantClasses[variant]} ${disabledClasses}`}
+      activeOpacity={0.8}>
+      {loading ? (
+        <ActivityIndicator color={variant === 'outline' || variant === 'secondary' ? '#111' : '#fff'} />
+      ) : (
+        <View className="flex-row items-center gap-2">
+          {icon}
+          <Text className={`text-base font-semibold ${textClasses[variant]}`}>{title}</Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}

package/templates/expo/components/ui/Card.tsx

@@ -0,0 +1,11 @@
+import { View } from 'react-native';
+import type { ReactNode } from 'react';
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function Card({ children, className = '' }: CardProps) {
+  return <View className={`rounded-2xl bg-white p-6 shadow-sm ${className}`}>{children}</View>;
+}

package/templates/expo/components/ui/Divider.tsx

@@ -0,0 +1,19 @@
+import { View, Text } from 'react-native';
+
+interface DividerProps {
+  text?: string;
+}
+
+export function Divider({ text }: DividerProps) {
+  if (!text) {
+    return <View className="my-4 h-px bg-gray-200" />;
+  }
+
+  return (
+    <View className="my-6 flex-row items-center">
+      <View className="h-px flex-1 bg-gray-200" />
+      <Text className="mx-4 text-sm text-gray-400">{text}</Text>
+      <View className="h-px flex-1 bg-gray-200" />
+    </View>
+  );
+}

package/templates/expo/components/ui/Input.tsx

@@ -0,0 +1,23 @@
+import { TextInput, View, Text } from 'react-native';
+import type { TextInputProps } from 'react-native';
+
+interface InputProps extends Omit<TextInputProps, 'className'> {
+  label?: string;
+  error?: string;
+}
+
+export function Input({ label, error, ...props }: InputProps) {
+  return (
+    <View className="mb-4">
+      {label && <Text className="mb-2 text-sm font-medium text-gray-700">{label}</Text>}
+      <TextInput
+        className={`rounded-xl border bg-white p-4 text-base ${
+          error ? 'border-red-500' : 'border-gray-200'
+        }`}
+        placeholderTextColor="#9CA3AF"
+        {...props}
+      />
+      {error && <Text className="mt-1 text-sm text-red-500">{error}</Text>}
+    </View>
+  );
+}

package/templates/expo/components/ui/WalletCard.tsx

@@ -0,0 +1,44 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import * as Clipboard from 'expo-clipboard';
+
+interface WalletCardProps {
+  address: string;
+  balance: string;
+  network: string;
+  onSend?: () => void;
+}
+
+export function WalletCard({ address, balance, network, onSend }: WalletCardProps) {
+  const handleCopyAddress = async () => {
+    await Clipboard.setStringAsync(address);
+  };
+
+  const shortAddress = `${address.slice(0, 10)}...${address.slice(-8)}`;
+
+  return (
+    <View className="rounded-2xl border border-gray-200 bg-white p-6">
+      <View className="mb-4 flex-row items-center justify-between">
+        <View className="rounded-full bg-gray-100 px-3 py-1">
+          <Text className="text-xs font-medium text-gray-600">{network}</Text>
+        </View>
+        <TouchableOpacity onPress={handleCopyAddress} className="flex-row items-center gap-1">
+          <Text className="font-mono text-xs text-gray-500">{shortAddress}</Text>
+          <Ionicons name="copy-outline" size={14} color="#6b7280" />
+        </TouchableOpacity>
+      </View>
+
+      <Text className="mb-1 text-sm text-gray-500">Balance</Text>
+      <Text className="mb-6 text-3xl font-bold text-gray-900">{balance}</Text>
+
+      {onSend && (
+        <TouchableOpacity
+          onPress={onSend}
+          className="flex-row items-center justify-center gap-2 rounded-xl bg-gray-900 py-3">
+          <Ionicons name="send-outline" size={18} color="#fff" />
+          <Text className="font-semibold text-white">Send</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}

package/templates/expo/components/ui/index.ts

@@ -0,0 +1,5 @@
+export { Button } from './Button';
+export { Card } from './Card';
+export { Divider } from './Divider';
+export { Input } from './Input';
+export { WalletCard } from './WalletCard';

package/templates/expo/eslint.config.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+const { defineConfig } = require('eslint/config');
+const expoConfig = require('eslint-config-expo/flat');
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: ['dist/*'],
+  },
+  {
+    rules: {
+      'react/display-name': 'off',
+    },
+  },
+]);

package/templates/expo/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/expo/hooks/useOneClickLogin.ts.template

@@ -0,0 +1,161 @@
+import { useState, useCallback } from 'react';
+import { para } from '@/lib/para';
+import { openAuthUrl } from '@/lib/auth';
+import type { AuthStatus } from '@/types';
+
+interface UseOneClickLoginResult {
+  status: AuthStatus;
+  error: string | null;
+// @if:hasEmail
+  loginWithEmail: (email: string) => Promise<boolean>;
+// @endif
+// @if:hasPhone
+  loginWithPhone: (phone: string) => Promise<boolean>;
+// @endif
+// @if:hasOAuth
+  loginWithGoogle: () => Promise<boolean>;
+// @endif
+  reset: () => void;
+}
+
+export function useOneClickLogin(onSuccess: () => void): UseOneClickLoginResult {
+  const [status, setStatus] = useState<AuthStatus>('idle');
+  const [error, setError] = useState<string | null>(null);
+
+  const reset = useCallback(() => {
+    setStatus('idle');
+    setError(null);
+  }, []);
+
+// @if:hasEmail
+  const loginWithEmail = useCallback(
+    async (email: string): Promise<boolean> => {
+      try {
+        reset();
+        setStatus('loading');
+
+        const authState = await para.signUpOrLogIn({ auth: { email } });
+
+        if (authState?.stage === 'verify' && 'loginUrl' in authState && authState.loginUrl) {
+          const result = await openAuthUrl(authState.loginUrl);
+
+          if (!result.success) {
+            throw new Error('Authentication was cancelled');
+          }
+
+          if (authState.nextStage === 'login') {
+            await para.waitForLogin({});
+          } else {
+            await para.waitForWalletCreation({});
+          }
+
+          setStatus('success');
+          onSuccess();
+          return true;
+        }
+
+        throw new Error('One-click login not available for this account');
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Login failed';
+        setError(message);
+        setStatus('error');
+        return false;
+      }
+    },
+    [reset, onSuccess]
+  );
+// @endif
+
+// @if:hasPhone
+  const loginWithPhone = useCallback(
+    async (phone: string): Promise<boolean> => {
+      try {
+        reset();
+        setStatus('loading');
+
+        const authState = await para.signUpOrLogIn({
+          auth: { phone: phone as `+${number}` },
+        });
+
+        if (authState?.stage === 'verify' && 'loginUrl' in authState && authState.loginUrl) {
+          const result = await openAuthUrl(authState.loginUrl);
+
+          if (!result.success) {
+            throw new Error('Authentication was cancelled');
+          }
+
+          if (authState.nextStage === 'login') {
+            await para.waitForLogin({});
+          } else {
+            await para.waitForWalletCreation({});
+          }
+
+          setStatus('success');
+          onSuccess();
+          return true;
+        }
+
+        throw new Error('One-click login not available for this account');
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Login failed';
+        setError(message);
+        setStatus('error');
+        return false;
+      }
+    },
+    [reset, onSuccess]
+  );
+// @endif
+
+// @if:hasOAuth
+  const loginWithGoogle = useCallback(async (): Promise<boolean> => {
+    try {
+      reset();
+      setStatus('loading');
+
+      const oauthUrl = await para.getOAuthUrl({ method: 'GOOGLE' });
+      const result = await openAuthUrl(oauthUrl);
+
+      if (!result.success) {
+        throw new Error('Authentication was cancelled');
+      }
+
+      const authState = await para.verifyOAuth({ method: 'GOOGLE' });
+
+      if (authState.stage === 'done') {
+        if (authState.isNewUser) {
+          await para.waitForWalletCreation({});
+        } else {
+          await para.waitForLogin({});
+        }
+
+        setStatus('success');
+        onSuccess();
+        return true;
+      }
+
+      throw new Error('Unexpected OAuth state');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Google login failed';
+      setError(message);
+      setStatus('error');
+      return false;
+    }
+  }, [reset, onSuccess]);
+// @endif
+
+  return {
+    status,
+    error,
+// @if:hasEmail
+    loginWithEmail,
+// @endif
+// @if:hasPhone
+    loginWithPhone,
+// @endif
+// @if:hasOAuth
+    loginWithGoogle,
+// @endif
+    reset,
+  };
+}

package/templates/expo/hooks/useViemClient.ts

@@ -0,0 +1,118 @@
+import { useMemo, useCallback, useState } from 'react';
+import {
+  createWalletClient,
+  createPublicClient,
+  http,
+  formatEther,
+  parseEther,
+  type WalletClient,
+  type PublicClient,
+  type LocalAccount,
+  type Hex,
+} from 'viem';
+import { sepolia } from 'viem/chains';
+import { createParaAccount } from '@getpara/viem-v2-integration';
+
+import { para } from '@/lib/para';
+import { usePara } from '@/providers/ParaProvider';
+
+interface UseViemClientResult {
+  account: LocalAccount | null;
+  walletClient: WalletClient | null;
+  publicClient: PublicClient | null;
+  isReady: boolean;
+  getBalance: () => Promise<string | null>;
+  sendTransaction: (to: Hex, amount: string) => Promise<Hex | null>;
+  isLoading: boolean;
+  error: string | null;
+}
+
+export function useViemClient(): UseViemClientResult {
+  const { isAuthenticated, wallets } = usePara();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const { account, walletClient, publicClient } = useMemo(() => {
+    if (!isAuthenticated || wallets.length === 0) {
+      return { account: null, walletClient: null, publicClient: null };
+    }
+
+    const walletAddress = wallets[0].address as Hex;
+    const paraAccount = createParaAccount(para, walletAddress);
+
+    const wallet = createWalletClient({
+      account: paraAccount,
+      chain: sepolia,
+      transport: http(),
+    });
+
+    const public_ = createPublicClient({
+      chain: sepolia,
+      transport: http(),
+    });
+
+    return { account: paraAccount, walletClient: wallet, publicClient: public_ };
+  }, [isAuthenticated, wallets]);
+
+  const getBalance = useCallback(async (): Promise<string | null> => {
+    if (!publicClient || !account) {
+      return null;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const balance = await publicClient.getBalance({ address: account.address });
+      const formatted = formatEther(balance);
+
+      return formatted;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to get balance';
+      setError(message);
+      return null;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [publicClient, account]);
+
+  const sendTransaction = useCallback(
+    async (to: Hex, amount: string): Promise<Hex | null> => {
+      if (!walletClient || !account) {
+        return null;
+      }
+
+      try {
+        setIsLoading(true);
+        setError(null);
+        const value = parseEther(amount);
+
+        const hash = await walletClient.sendTransaction({
+          to,
+          value,
+          chain: sepolia,
+        });
+
+        return hash;
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Failed to send transaction';
+        setError(message);
+        return null;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [walletClient, account]
+  );
+
+  return {
+    account,
+    walletClient,
+    publicClient,
+    isReady: account !== null && walletClient !== null && publicClient !== null,
+    getBalance,
+    sendTransaction,
+    isLoading,
+    error,
+  };
+}

package/templates/expo/hooks/useWallets.ts

@@ -0,0 +1,52 @@
+import { useState, useCallback } from 'react';
+import { para } from '@/lib/para';
+import type { Wallet } from '@/types';
+
+interface UseWalletsResult {
+  wallets: Wallet[];
+  isLoading: boolean;
+  error: string | null;
+  loadWallets: () => Promise<void>;
+  clearWallets: () => void;
+}
+
+export function useWallets(): UseWalletsResult {
+  const [wallets, setWallets] = useState<Wallet[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadWallets = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const evmWallets = await para.getWalletsByType('EVM');
+
+      const walletList: Wallet[] = Object.values(evmWallets || {}).map((w) => ({
+        id: w.id,
+        address: w.address || '',
+        type: 'EVM',
+      }));
+
+      setWallets(walletList);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to load wallets';
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const clearWallets = useCallback(() => {
+    setWallets([]);
+    setError(null);
+  }, []);
+
+  return {
+    wallets,
+    isLoading,
+    error,
+    loadWallets,
+    clearWallets,
+  };
+}

package/templates/expo/index.js

@@ -0,0 +1,2 @@
+import '@getpara/react-native-wallet/shim';
+import 'expo-router/entry';