feat(mobile): add wallet creation success screen (#77) (#479)

Co-authored-by: root <root@vmi3321457.contaboserver.net>

Author: GBOYEE

app/(auth)/_layout.tsx

@@ -18,6 +18,7 @@ export default function AuthLayout() {
       <Stack.Screen name="index" options={{ headerShown: false }} />
       <Stack.Screen name="create" options={{ title: 'Create Wallet' }} />
       <Stack.Screen name="import" options={{ title: 'Import Wallet' }} />
+      <Stack.Screen name="wallet-creation-success" options={{ title: 'Wallet Created', headerBackVisible: false }} />
     </Stack>
   );
 }

app/(auth)/create.tsx

@@ -23,7 +23,6 @@ export default function CreateWalletScreen() {
   const { setWallet, markBackupPending } = useWalletStore();
   const [keypair, setKeypair] = useState<{ publicKey: string; secretKey: string } | null>(null);
   const [isLoading, setIsLoading] = useState(false);
-  const [isSuccess, setIsSuccess] = useState(false);
 
   // Recovery states
   const [onboardingError, setOnboardingError] = useState<OnboardingError | null>(null);
@@ -67,16 +66,13 @@ export default function CreateWalletScreen() {
               return;
             }
             await markBackupPending();
-            setIsSuccess(true);
+            router.replace('/(auth)/wallet-creation-success');
           }
         }
       ]
     );
   };
 
-  const handleGoToWallet = () => {
-    router.replace('/(tabs)');
-  };
 
   const handleRetry = () => {
     resetErrors();

app/(auth)/wallet-creation-success.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useRouter } from 'expo-router';
+import { AsyncActionButton } from '../../src/components/AsyncActionButton';
+import { SIZES, ThemeColors } from '../../src/constants/theme';
+import { useTheme } from '../../src/hooks/useTheme';
+import { CheckCircle } from 'lucide-react-native';
+
+export default function WalletCreationSuccessScreen() {
+  const router = useRouter();
+  const { colors } = useTheme();
+  const styles = useMemo(() => createStyles(colors), [colors]);
+
+  const handleGoToWallet = () => {
+    router.replace('/(tabs)');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.successIcon}>
+          <CheckCircle color={colors.success} size={64} />
+        </View>
+        <Text style={styles.title}>Wallet Created!</Text>
+        <Text style={styles.subtitle}>
+          Your Testnet wallet is ready. Fund it with the Friendbot on the home screen to start sending test XLM.
+        </Text>
+      </View>
+      <AsyncActionButton title="Go to Wallet" onPress={handleGoToWallet} />
+    </View>
+  );
+}
+
+const createStyles = (colors: ThemeColors) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background,
+      padding: SIZES.xl,
+      justifyContent: 'space-between',
+      paddingBottom: SIZES.xxl,
+    },
+    content: {
+      flex: 1,
+      justifyContent: 'center',
+    },
+    successIcon: {
+      alignItems: 'center',
+      marginBottom: SIZES.lg,
+    },
+    title: {
+      fontSize: 28,
+      fontWeight: 'bold',
+      color: colors.textPrimary,
+      marginBottom: SIZES.sm,
+    },
+    subtitle: {
+      fontSize: 16,
+      color: colors.textSecondary,
+      lineHeight: 24,
+    },
+  });