Fix issues

Author: 22388o

src/navigation/ZKPoolEnter.tsx

@@ -1,72 +1,94 @@
 import React, { useState } from 'react';
 import { Box, Button, Input, Heading, Text } from '@gluestack-ui/themed';
 import { useNavigation } from '@react-navigation/native';
-function ZKPoolEnter() {
+
+// Type definition for navigation prop
+type NavigationProp = ReturnType<typeof useNavigation>;
+
+const ZKPoolEnter = () => {
   const [amount, setAmount] = useState('');
   const [loading, setLoading] = useState(false);
-  const navigation = useNavigation();
+  const navigation = useNavigation<NavigationProp>();
 
   const onEnterPool = async () => {
-    // Validate the input amount
-    const parsedAmount = parseFloat(amount);
-    if (isNaN(parsedAmount) || parsedAmount <= 0) {
-      alert('Please enter a valid positive Bitcoin amount.');
-      return;
-    }
+    try {
+      // Validate the input amount
+      const parsedAmount = parseFloat(amount);
+      if (isNaN(parsedAmount) || parsedAmount <= 0) {
+        alert('Please enter a valid positive Bitcoin amount.');
+        return;
+      }
 
-    setLoading(true);
+      setLoading(true);
 
-    try {
       // Generate the ZK proof for the entered amount
       const zkProof = await createZKDepositProof(parsedAmount);
 
-      // Broadcast or submit the transaction (depending on your integration logic)
+      // Broadcast or submit the transaction
       await broadcastZKPoolEntry(zkProof);
 
-      // Show success message and navigate (e.g., to a success screen)
+      // Show success message and navigate
       alert('ZK Pool Entry Successful!');
-      navigation.goBack(); // Replace with a success screen navigation if needed
+      navigation.goBack();
     } catch (error) {
       console.error('Error entering ZK pool:', error);
-      alert('Failed to enter the ZK Pool.');
+      alert(`Failed to enter the ZK Pool: ${error instanceof Error ? error.message : String(error)}`);
     } finally {
       setLoading(false);
     }
   };
-
   return (
-    <Box flex={1} justifyContent="center" alignItems="center" bg="$primary400" p={4}>
-      <Heading size="xl" color="white" mb={5}>
+    <Box 
+      flex={1} 
+      justifyContent="center" 
+      alignItems="center" 
+      bg="$primary400" 
+      p="$4"
+    >
+      <Heading size="xl" color="$white" mb="$5">
         Enter ZK Pool
       </Heading>
-      <Text size="lg" color="white" mb={2}>
-        Enter the amount of Bitcoin to deposit into the ZK Pool
+      <Text size="lg" color="$white" mb="$2">
+        Enter the amount of Bitcoin to deposit
       </Text>
       <Input
+        variant="outline"
+        size="md"
+        placeholderTextColor="$gray400"
         placeholder="Amount (BTC)"
         value={amount}
         onChangeText={setAmount}
         keyboardType="numeric"
-        mb={5}
+        mb="$5"
         w="80%"
+        bg="$white"
+        borderColor="$gray300"
       />
-      <Button onPress={onEnterPool} isDisabled={loading} isLoading={loading} variant="solid">
-        {loading ? 'Processing...' : 'Enter Pool'}
+      <Button
+        size="md"
+        variant="solid"
+        bg="$primary500"
+        onPress={onEnterPool}
+        isDisabled={loading}
+        $loading={loading}
+      >
+        <Text color="$white">
+          {loading ? 'Processing...' : 'Enter Pool'}
+        </Text>
       </Button>
     </Box>
   );
-}
-
-async function createZKDepositProof(amount: number) {
-  // Replace this mock function with your ZK proof generation logic
+};
+const createZKDepositProof = async (amount: number): Promise<string> => {
+  // Replace with actual ZK proof generation logic
   return new Promise((resolve) => {
     setTimeout(() => resolve(`zk-proof-for-${amount}-btc`), 2000);
   });
-}
+};
 
-async function broadcastZKPoolEntry(zkProof: string) {
-  // Replace this mock function with your actual broadcasting logic
+const broadcastZKPoolEntry = async (zkProof: string): Promise<void> => {
+  // Replace with actual broadcasting logic
   console.log('Broadcasting ZK Pool Entry with proof:', zkProof);
-}
+};
 
-export default ZKPoolEnter;
+export default ZKPoolEnter;

src/navigation/ZKPoolExit.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { Box, Button, Input, Heading, Text } from '@gluestack-ui/themed';
+import { useNavigation } from '@react-navigation/native';
+// import { createZKDepositProof, broadcastZKPoolEntry } from '../services/zkPoolService';
+
+// Type definition for navigation prop
+type NavigationProp = ReturnType<typeof useNavigation>;
+
+const ZKPoolExit = () => {
+  const [amount, setAmount] = useState('');
+  const [loading, setLoading] = useState(false); 
+  const navigation = useNavigation<NavigationProp>();
+
+  const onEnterPool = async () => {
+    try {
+      // Validate the amount
+      const parsedAmount = parseFloat(amount);
+      if (isNaN(parsedAmount) || parsedAmount <= 0) {
+        alert('Please enter a valid amount greater than zero.');
+        return;
+      }
+
+      setLoading(true);
+
+      // Generate ZK Proof of deposit
+      // const zkProof = await createZKDepositProof(parsedAmount);
+
+      // Broadcast the transaction
+      // await broadcastZKPoolEntry(zkProof);
+
+      // Success feedback and navigation
+      alert('ZK Pool Exit Successful!');
+      navigation.goBack();
+    } catch (error) {
+      console.error('Error entering ZK pool:', error);
+      alert(`Failed to enter ZK Pool: ${error.message || 'Please try again.'}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Box
+      flex={1}
+      justifyContent="center"
+      alignItems="center"
+      bg="$primary400"
+      p="$4"
+    >
+      <Heading size="xl" color="$white" mb="$5">
+        Exit ZK Pool
+      </Heading>
+      <Text size="lg" color="$white" mb="$2" textAlign="center">
+        Enter the amount of Bitcoin to withdraw
+      </Text>
+      <Input
+        variant="outline"
+        size="md"
+        placeholder="Amount (BTC)"
+        value={amount}
+        onChangeText={setAmount}
+        keyboardType="numeric"
+        mb="$5"
+        w="80%"
+        bg="$white"
+        borderColor="$gray300"
+        accessibilityLabel="Bitcoin amount input"
+      />
+      <Button
+        size="md"
+        variant="solid"
+        bg="$primary500"
+        onPress={onEnterPool}
+        isDisabled={loading}
+        isLoading={loading}
+      >
+        <Text color="$white">
+          {loading ? 'Processing...' : 'Exit Pool'}
+        </Text>
+      </Button>
+    </Box>
+  );
+};
+
+const createZKDepositProof = async (amount: number): Promise<string> => {
+  // Replace with actual ZK proof generation logic
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(`zk-proof-for-${amount}-btc`), 2000);
+  });
+};
+
+const broadcastZKPoolEntry = async (zkProof: string): Promise<void> => {
+  // Replace with actual broadcasting logic
+  console.log('Broadcasting ZK Pool Entry with proof:', zkProof);
+};
+export default ZKPoolExit;