@getpara/create-para-app 0.5.0 → 2.7.0

package/package.json

@@ -1,44 +1,49 @@
 {
   "name": "@getpara/create-para-app",
-  "version": "0.5.0",
-  "main": "dist/src/index.js",
+  "version": "2.7.0",
+  "description": "Create Para SDK applications with one command",
   "type": "module",
   "bin": {
-    "create-para-app": "dist/bin/index.js"
+    "create-para-app": "./dist/index.js"
   },
+  "main": "./dist/index.js",
   "files": [
-    "dist"
+    "dist",
+    "templates"
   ],
-  "engines": {
-    "node": ">=14.0.0"
-  },
-  "license": "MIT",
   "scripts": {
     "build": "tsc",
-    "start": "node --no-warnings dist/bin/index.js",
-    "dev": "node --no-warnings --loader ts-node/esm src/index.ts"
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "yarn build"
   },
   "dependencies": {
-    "chalk": "5.4.1",
-    "commander": "13.1.0",
-    "execa": "9.5.2",
-    "fs-extra": "11.3.0",
-    "inquirer": "12.4.1",
-    "ora": "8.2.0",
-    "prettier": "3.5.0",
-    "update-notifier": "7.3.1"
+    "@clack/prompts": "^0.9.1",
+    "picocolors": "^1.1.1"
   },
   "devDependencies": {
-    "@types/chalk": "^2.2.4",
-    "@types/commander": "^2.12.5",
-    "@types/inquirer": "^9.0.7",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^22.13.1",
-    "@types/update-notifier": "6.0.8",
-    "@types/fs-extra": "11.0.4",
-    "jest": "^29.7.0",
-    "ts-jest": "^29.2.5",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.7.3"
-  }
+    "@types/node": "^22.13.10",
+    "typescript": "^5.8.3"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "para",
+    "wallet",
+    "web3",
+    "scaffolding",
+    "cli",
+    "create-app",
+    "nextjs"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/para-space/web-sdk.git",
+    "directory": "packages/create-para-app"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
 }

package/templates/expo/_env.example

@@ -0,0 +1,3 @@
+# Para API Key
+# Get your API key at https://developer.getpara.com
+EXPO_PUBLIC_PARA_API_KEY=your_api_key_here

package/templates/expo/_gitignore

@@ -0,0 +1,48 @@
+# Dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native builds
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# iOS
+ios/
+*.xcworkspace
+*.xcodeproj
+
+# Android
+android/
+*.apk
+*.aab
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# TypeScript
+*.tsbuildinfo

package/templates/expo/_yarnrc.yml

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

package/templates/expo/app/(auth)/_layout.tsx

@@ -0,0 +1,12 @@
+import { Stack } from 'expo-router';
+
+export default function AuthLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: '#fff' },
+      }}
+    />
+  );
+}

package/templates/expo/app/(auth)/index.tsx.template

@@ -0,0 +1,86 @@
+import { View, Text, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+
+// @if:hasOAuth
+import { Divider } from '@/components/ui';
+// @endif
+import { AuthForm } from '@/components/features';
+// @if:hasOAuth
+import { OAuthButtons } from '@/components/features';
+// @endif
+import { useOneClickLogin } from '@/hooks/useOneClickLogin';
+import { usePara } from '@/providers/ParaProvider';
+
+export default function LoginScreen() {
+  const router = useRouter();
+  const { setAuthenticated } = usePara();
+
+  const handleSuccess = () => {
+    setAuthenticated(true);
+    router.replace('/(tabs)');
+  };
+
+  const {
+// @if:hasEmail
+    loginWithEmail,
+// @endif
+// @if:hasPhone
+    loginWithPhone,
+// @endif
+// @if:hasOAuth
+    loginWithGoogle,
+// @endif
+    status,
+    error,
+  } = useOneClickLogin(handleSuccess);
+
+  const isLoading = status === 'loading' || status === 'verifying' || status === 'completing';
+
+  const handleAuthSubmit = async (value: string, method: 'email' | 'phone') => {
+// @if:hasEmail
+    if (method === 'email') {
+      await loginWithEmail(value);
+    }
+// @endif
+// @if:hasPhone
+    if (method === 'phone') {
+      await loginWithPhone(value);
+    }
+// @endif
+  };
+
+  return (
+    <SafeAreaView className="flex-1 bg-white">
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        className="flex-1">
+        <ScrollView
+          contentContainerStyle={{ flexGrow: 1 }}
+          keyboardShouldPersistTaps="handled"
+          className="flex-1">
+          <View className="flex-1 px-6 pb-8 pt-12">
+            <View className="mb-10 items-center">
+              <View className="mb-4 h-16 w-16 items-center justify-center rounded-2xl bg-gray-900">
+                <Ionicons name="wallet-outline" size={32} color="#fff" />
+              </View>
+              <Text className="mb-2 text-2xl font-bold text-gray-900">{{expoAppName}}</Text>
+              <Text className="text-center text-gray-500">Sign in to access your wallet</Text>
+            </View>
+            <AuthForm onSubmit={handleAuthSubmit} loading={isLoading} error={error} />
+// @if:hasOAuth
+            <Divider text="or continue with" />
+            <OAuthButtons onGooglePress={loginWithGoogle} disabled={isLoading} />
+// @endif
+          </View>
+          <View className="px-6 pb-4">
+            <Text className="text-center text-xs text-gray-400">
+              By continuing, you agree to our Terms of Service and Privacy Policy
+            </Text>
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}

package/templates/expo/app/(tabs)/_layout.tsx

@@ -0,0 +1,16 @@
+import { Stack } from 'expo-router';
+
+export default function TabsLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+      <Stack.Screen
+        name="send"
+        options={{
+          title: 'Send',
+          headerBackTitle: 'Back',
+        }}
+      />
+    </Stack>
+  );
+}

package/templates/expo/app/(tabs)/index.tsx

@@ -0,0 +1,112 @@
+import { View, Text, ScrollView, RefreshControl, Alert } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import { useState, useCallback, useEffect } from 'react';
+
+import { WalletCard, Button } from '@/components/ui';
+import { usePara } from '@/providers/ParaProvider';
+import { useViemClient } from '@/hooks/useViemClient';
+
+export default function HomeScreen() {
+  const router = useRouter();
+  const { wallets, refreshAuth, logout } = usePara();
+  const { isReady, getBalance } = useViemClient();
+  const [refreshing, setRefreshing] = useState(false);
+  const [balance, setBalance] = useState<string | null>(null);
+
+  const fetchBalance = useCallback(async () => {
+    if (isReady) {
+      const bal = await getBalance();
+      setBalance(bal);
+    }
+  }, [isReady, getBalance]);
+
+  useEffect(() => {
+    fetchBalance();
+  }, [fetchBalance]);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await refreshAuth();
+    await fetchBalance();
+    setRefreshing(false);
+  }, [refreshAuth, fetchBalance]);
+
+  const handleLogout = () => {
+    Alert.alert('Sign Out', 'Are you sure you want to sign out?', [
+      { text: 'Cancel', style: 'cancel' },
+      {
+        text: 'Sign Out',
+        style: 'destructive',
+        onPress: async () => {
+          await logout();
+          router.replace('/(auth)');
+        },
+      },
+    ]);
+  };
+
+  const handleSend = () => {
+    router.push('/(tabs)/send');
+  };
+
+  const primaryWallet = wallets[0];
+  const displayBalance = balance ? `${parseFloat(balance).toFixed(6)} ETH` : 'Loading...';
+
+  return (
+    <SafeAreaView testID="walletsView" className="flex-1 bg-gray-50">
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{ padding: 24 }}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
+        <View className="mb-6">
+          <Text className="text-2xl font-bold text-gray-900">Your Wallet</Text>
+          <Text className="mt-1 text-gray-500">Manage your assets</Text>
+        </View>
+        {primaryWallet ? (
+          <WalletCard
+            address={primaryWallet.address}
+            balance={displayBalance}
+            network="Sepolia"
+            onSend={handleSend}
+          />
+        ) : (
+          <View className="items-center rounded-2xl bg-white p-6">
+            <Text className="text-center text-gray-500">No wallet found. Pull to refresh.</Text>
+          </View>
+        )}
+        {wallets.length > 1 && (
+          <View className="mt-6">
+            <Text className="mb-3 text-lg font-semibold text-gray-900">Other Wallets</Text>
+            {wallets.slice(1).map((wallet) => (
+              <View
+                key={wallet.id}
+                className="mb-2 flex-row items-center justify-between rounded-xl bg-white p-4">
+                <Text className="font-mono text-sm text-gray-600">
+                  {wallet.address.slice(0, 10)}...{wallet.address.slice(-8)}
+                </Text>
+                <View className="rounded bg-gray-100 px-2 py-1">
+                  <Text className="text-xs text-gray-600">{wallet.type}</Text>
+                </View>
+              </View>
+            ))}
+          </View>
+        )}
+
+        <View className="mt-8">
+          <Button
+            title="Sign Out"
+            variant="danger"
+            onPress={handleLogout}
+            icon={<Ionicons name="log-out-outline" size={20} color="#fff" />}
+          />
+        </View>
+
+        <View className="mt-8 items-center">
+          <Text className="text-sm text-gray-400">Powered by Para</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

package/templates/expo/app/(tabs)/send.tsx

@@ -0,0 +1,111 @@
+import { View, Text, TextInput, Alert, KeyboardAvoidingView, Platform } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import { useState, useCallback, useEffect } from 'react';
+import type { Hex } from 'viem';
+
+import { Button } from '@/components/ui';
+import { useViemClient } from '@/hooks/useViemClient';
+
+export default function SendScreen() {
+  const router = useRouter();
+  const { isReady, getBalance, sendTransaction, isLoading, error } = useViemClient();
+
+  const [balance, setBalance] = useState<string | null>(null);
+  const [recipient, setRecipient] = useState('');
+  const [amount, setAmount] = useState('');
+
+  const fetchBalance = useCallback(async () => {
+    if (isReady) {
+      const bal = await getBalance();
+      setBalance(bal);
+    }
+  }, [isReady, getBalance]);
+
+  useEffect(() => {
+    fetchBalance();
+  }, [fetchBalance]);
+
+  const handleSend = async () => {
+    if (!recipient) {
+      Alert.alert('Error', 'Please enter a recipient address');
+      return;
+    }
+    if (!amount || parseFloat(amount) <= 0) {
+      Alert.alert('Error', 'Please enter a valid amount');
+      return;
+    }
+
+    Alert.alert(
+      'Confirm Transaction',
+      `Send ${amount} ETH to\n${recipient.slice(0, 16)}...?`,
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Send',
+          onPress: async () => {
+            const hash = await sendTransaction(recipient as Hex, amount);
+            if (hash) {
+              Alert.alert('Success', `Transaction sent!\n\nHash: ${hash.slice(0, 20)}...`, [
+                { text: 'OK', onPress: () => router.back() },
+              ]);
+            } else if (error) {
+              Alert.alert('Error', error);
+            }
+          },
+        },
+      ]
+    );
+  };
+
+  const displayBalance = balance ? `${parseFloat(balance).toFixed(6)} ETH` : 'Loading...';
+
+  return (
+    <SafeAreaView className="flex-1 bg-gray-50" edges={['bottom']}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        className="flex-1">
+        <View className="flex-1 p-6">
+          {/* Balance Display */}
+          <View className="mb-6 rounded-2xl bg-white p-4">
+            <Text className="text-sm text-gray-500">Available Balance</Text>
+            <Text className="text-2xl font-bold text-gray-900">{displayBalance}</Text>
+          </View>
+
+          {/* Form */}
+          <View className="flex-1">
+            <Text className="mb-2 text-sm font-medium text-gray-700">Recipient Address</Text>
+            <TextInput
+              className="mb-4 rounded-xl border border-gray-200 bg-white p-4 font-mono text-sm text-gray-900"
+              placeholder="0x..."
+              placeholderTextColor="#9ca3af"
+              value={recipient}
+              onChangeText={setRecipient}
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+
+            <Text className="mb-2 text-sm font-medium text-gray-700">Amount (ETH)</Text>
+            <TextInput
+              className="mb-6 rounded-xl border border-gray-200 bg-white p-4 text-sm text-gray-900"
+              placeholder="0.001"
+              placeholderTextColor="#9ca3af"
+              value={amount}
+              onChangeText={setAmount}
+              keyboardType="decimal-pad"
+            />
+          </View>
+
+          {/* Send Button */}
+          <Button
+            title={isLoading ? 'Sending...' : 'Send ETH'}
+            onPress={handleSend}
+            disabled={isLoading || !isReady}
+            icon={<Ionicons name="send-outline" size={20} color="#fff" />}
+          />
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}

package/templates/expo/app/_layout.tsx

@@ -0,0 +1,17 @@
+import '../global.css';
+
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { ParaProvider } from '@/providers/ParaProvider';
+
+export default function RootLayout() {
+  return (
+    <SafeAreaProvider>
+      <ParaProvider>
+        <StatusBar style="auto" />
+        <Stack screenOptions={{ headerShown: false }} />
+      </ParaProvider>
+    </SafeAreaProvider>
+  );
+}

package/templates/expo/app/index.tsx

@@ -0,0 +1,22 @@
+import { Redirect } from 'expo-router';
+import { View, ActivityIndicator, Text } from 'react-native';
+import { usePara } from '@/providers/ParaProvider';
+
+export default function Index() {
+  const { isAuthenticated, isLoading } = usePara();
+
+  if (isLoading) {
+    return (
+      <View className="flex-1 items-center justify-center bg-white">
+        <ActivityIndicator size="large" color="#4F46E5" />
+        <Text className="mt-4 text-gray-500">Loading...</Text>
+      </View>
+    );
+  }
+
+  if (isAuthenticated) {
+    return <Redirect href="/(tabs)" />;
+  }
+
+  return <Redirect href="/(auth)" />;
+}

package/templates/expo/app.json.template

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "{{expoAppName}}",
+    "slug": "{{expoSlug}}",
+    "version": "1.0.0",
+    "scheme": "{{expoScheme}}",
+    "platforms": ["ios", "android"],
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "{{bundleId}}"
+    },
+    "android": {
+      "package": "{{bundleId}}",
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "plugins": ["expo-router"],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

package/templates/expo/babel.config.cjs

@@ -0,0 +1,12 @@
+module.exports = function (api) {
+  api.cache(true);
+  let plugins = [];
+
+  plugins.push('react-native-worklets/plugin');
+
+  return {
+    presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'],
+
+    plugins,
+  };
+};