App.tsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import BdkRn, { Mnemonic } from 'bdk-rn';
import React, { useState, useRef, useEffect } from 'react';
import type {PropsWithChildren} from 'react';
import {
  Button,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  TouchableOpacity,
  Animated,
  Alert,
  FlatList,
  Platform,
} from 'react-native';
import * as Keychain from 'react-native-keychain';

import {
  Colors,
  DebugInstructions,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { get } from 'react-native/Libraries/TurboModule/TurboModuleRegistry';
import Icon from 'react-native-vector-icons/Ionicons';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  const [mnemonic, setMnemonic] = useState('');
  const [currentPage, setCurrentPage] = useState('mnemonic');
  const [savedMnemonics, setSavedMnemonics] = useState<Array<{id: string, words: string}>>([]);
  const [selectedMnemonicId, setSelectedMnemonicId] = useState<string | null>(null);
  const scaleAnim = useRef(new Animated.Value(1)).current;
  const colorAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    loadSavedMnemonics();
  }, []);

  const loadSavedMnemonics = async () => {
    try {
      const mnemonicsKey = 'saved_mnemonics_list';
      const authOptions = Platform.select({
        ios: {
          authenticationPrompt: {
            title: 'Authenticate to view your mnemonics'
          }
        },
        android: {
          authenticationType: Keychain.AUTHENTICATION_TYPE.BIOMETRICS,
          authenticationPrompt: {
            title: 'Authenticate to view your mnemonics',
            cancel: 'Cancel'
          }
        },
        default: {}
      });

      const savedList = await Keychain.getInternetCredentials(mnemonicsKey, authOptions);
      
      if (savedList && savedList.password) {
        const mnemonicsList = JSON.parse(savedList.password);
        setSavedMnemonics(mnemonicsList);
      }
    } catch (error) {
      console.error('Error loading mnemonics:', error);
    }
  };

  const saveMnemonic = async (mnemonicToSave: string) => {
    try {
      const newId = Date.now().toString();
      const newMnemonic = {
        id: newId,
        words: mnemonicToSave
      };

      const updatedMnemonics = [...savedMnemonics, newMnemonic];
      
      // Cross-platform security options
      const securityOptions = Platform.select({
        ios: {
          accessControl: Keychain.ACCESS_CONTROL.BIOMETRY_ANY_OR_DEVICE_PASSCODE,
          accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED,
          authenticationPrompt: {
            title: 'Authenticate to access your mnemonics'
          }
        },
        android: {
          accessControl: Keychain.ACCESS_CONTROL.BIOMETRY_ANY,
          accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED,
          authenticationType: Keychain.AUTHENTICATION_TYPE.BIOMETRICS,
          storage: Keychain.STORAGE_TYPE.AES,
        },
        default: {}
      });

      await Keychain.setInternetCredentials(
        'saved_mnemonics_list',
        'mnemonics',
        JSON.stringify(updatedMnemonics),
        securityOptions
      );

      setSavedMnemonics(updatedMnemonics);
      setMnemonic(mnemonicToSave);
      Alert.alert('Success', 'Mnemonic words saved securely with biometric protection');
    } catch (error) {
      console.error('Error saving mnemonic:', error);
      Alert.alert('Error', 'Failed to save mnemonic words');
    }
  };

  const deleteMnemonic = async (id: string) => {
    try {
      const updatedMnemonics = savedMnemonics.filter(m => m.id !== id);
      
      await Keychain.setInternetCredentials(
        'saved_mnemonics_list',
        'mnemonics',
        JSON.stringify(updatedMnemonics)
      );

      setSavedMnemonics(updatedMnemonics);
      if (selectedMnemonicId === id) {
        setSelectedMnemonicId(null);
      }
      Alert.alert('Success', 'Mnemonic deleted successfully');
    } catch (error) {
      console.error('Error deleting mnemonic:', error);
      Alert.alert('Error', 'Failed to delete mnemonic');
    }
  };

  const animatePress = () => {
    Animated.parallel([
      Animated.sequence([
        Animated.timing(scaleAnim, {
          toValue: 0.95,
          duration: 100,
          useNativeDriver: true,
        }),
        Animated.timing(scaleAnim, {
          toValue: 1,
          duration: 100,
          useNativeDriver: true,
        }),
      ]),
      Animated.sequence([
        Animated.timing(colorAnim, {
          toValue: 1,
          duration: 100,
          useNativeDriver: false,
        }),
        Animated.timing(colorAnim, {
          toValue: 0,
          duration: 100,
          useNativeDriver: false,
        }),
      ]),
    ]).start();
  };

  const buttonBackgroundColor = colorAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['#1A2628', '#FFA500']
  });

  const buttonTextColor = colorAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['#FFA500', '#1A2628']
  });

  const getMnemonic = async (): Promise<void> => {
    animatePress();
    try {
      const mnemonicInstance = new Mnemonic();
      const newMnemonic = await mnemonicInstance.create();
      const mnemonicString = newMnemonic.asString();
      setMnemonic(mnemonicString);
      await saveMnemonic(mnemonicString);
    } catch (error) {
      console.error('Error generating mnemonic:', error);
      Alert.alert('Error', 'Failed to generate mnemonic words');
    }
  };

  const backgroundStyle = {
    backgroundColor: '#0A1A1C',
  };

  /*
   * To keep the template simple and small we're adding padding to prevent view
   * from rendering under the System UI.
   * For bigger apps the reccomendation is to use `react-native-safe-area-context`:
   * https://github.com/AppAndFlow/react-native-safe-area-context
   *
   * You can read more about it here:
   * https://github.com/react-native-community/discussions-and-proposals/discussions/827
   */
  const safePadding = '5%';

  const renderMnemonicWords = (words: string) => (
    <View style={styles.mnemonicContainer}>
      <View style={styles.column}>
        {words.split(' ').slice(0, 6).map((word, index) => (
          <View key={index} style={styles.wordBox}>
            <Text style={styles.wordNumber}>{index + 1}</Text>
            <Text style={styles.wordText}>{word}</Text>
          </View>
        ))}
      </View>
      <View style={styles.column}>
        {words.split(' ').slice(6, 12).map((word, index) => (
          <View key={index + 6} style={styles.wordBox}>
            <Text style={styles.wordNumber}>{index + 7}</Text>
            <Text style={styles.wordText}>{word}</Text>
          </View>
        ))}
      </View>
    </View>
  );

  const renderContent = () => {
    switch (currentPage) {
      case 'mnemonic':
        return (
          <View style={{ flex: 1 }}>
            <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
              <TouchableOpacity 
                activeOpacity={1}
                onPress={getMnemonic}
              >
                <Animated.View style={[styles.button, { backgroundColor: buttonBackgroundColor }]}>
                  <Animated.Text style={[styles.buttonText, { color: buttonTextColor }]}>
                    Generate Mnemonic
                  </Animated.Text>
                </Animated.View>
              </TouchableOpacity>
            </Animated.View>
            
            {mnemonic ? renderMnemonicWords(mnemonic) : null}
          </View>
        );
      case 'wallet':
        return (
          <ScrollView style={{ flex: 1 }}>
            <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
              <TouchableOpacity 
                activeOpacity={1}
                onPress={() => {
                  animatePress();
                }}
              >
                <Animated.View style={[styles.button, { backgroundColor: buttonBackgroundColor }]}>
                  <Animated.Text style={[styles.buttonText, { color: buttonTextColor }]}>
                    Create Address
                  </Animated.Text>
                </Animated.View>
              </TouchableOpacity>
            </Animated.View>
            
            <Text style={[styles.screenText, { marginVertical: 20 }]}>Saved Mnemonics:</Text>
            
            {savedMnemonics.length > 0 ? (
              savedMnemonics.map((savedMnemonic) => (
                <View key={savedMnemonic.id} style={styles.savedMnemonicContainer}>
                  <TouchableOpacity
                    style={styles.mnemonicHeader}
                    onPress={() => setSelectedMnemonicId(
                      selectedMnemonicId === savedMnemonic.id ? null : savedMnemonic.id
                    )}
                  >
                    <Text style={styles.mnemonicDate}>
                      Created: {new Date(parseInt(savedMnemonic.id)).toLocaleDateString()} {new Date(parseInt(savedMnemonic.id)).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                    </Text>
                    <TouchableOpacity
                      onPress={() => {
                        Alert.alert(
                          'Delete Mnemonic',
                          'Are you sure you want to delete these mnemonic words?',
                          [
                            { text: 'Cancel', style: 'cancel' },
                            { 
                              text: 'Delete',
                              style: 'destructive',
                              onPress: () => deleteMnemonic(savedMnemonic.id)
                            }
                          ]
                        );
                      }}
                      style={styles.deleteButton}
                    >
                      <Icon name="trash-outline" size={24} color="#FF6B6B" />
                    </TouchableOpacity>
                  </TouchableOpacity>
                  
                  {selectedMnemonicId === savedMnemonic.id && (
                    renderMnemonicWords(savedMnemonic.words)
                  )}
                </View>
              ))
            ) : (
              <Text style={styles.screenText}>No mnemonics saved yet</Text>
            )}
          </ScrollView>
        );
      case 'send':
        return (
          <View style={styles.screenContainer}>
            <Text style={styles.screenText}>Send Screen</Text>
          </View>
        );
      case 'receive':
        return (
          <View style={styles.screenContainer}>
            <Text style={styles.screenText}>Receive Screen</Text>
          </View>
        );
      default:
        return null;
    }
  };

  return (
    <View style={[backgroundStyle, { flex: 1 }]}>
      <StatusBar
        barStyle="light-content"
        backgroundColor="#0A1A1C"
      />
      <ScrollView style={backgroundStyle}>
        <View
          style={{
            backgroundColor: '#0A1A1C',
            paddingHorizontal: safePadding,
            paddingTop: '20%',
            paddingBottom: safePadding,
            flex: 1,
            minHeight: '100%',
          }}>
          {renderContent()}
        </View>
      </ScrollView>
      
      <View style={styles.bottomNav}>
        <TouchableOpacity 
          style={[styles.navButton, currentPage === 'mnemonic' && styles.navButtonActive]}
          onPress={() => setCurrentPage('mnemonic')}
        >
          <Icon name="wallet-outline" size={24} color={currentPage === 'mnemonic' ? '#FFA500' : '#6B7B7D'} />
          <Text style={[styles.navButtonText, currentPage === 'mnemonic' && styles.navButtonTextActive]}>Mnemonic</Text>
        </TouchableOpacity>
        <TouchableOpacity 
          style={[styles.navButton, currentPage === 'wallet' && styles.navButtonActive]}
          onPress={() => setCurrentPage('wallet')}
        >
          <Icon name="stats-chart" size={24} color={currentPage === 'wallet' ? '#FFA500' : '#6B7B7D'} />
          <Text style={[styles.navButtonText, currentPage === 'wallet' && styles.navButtonTextActive]}>Wallet</Text>
        </TouchableOpacity>
        <TouchableOpacity 
          style={[styles.navButton, currentPage === 'send' && styles.navButtonActive]}
          onPress={() => setCurrentPage('send')}
        >
          <Icon name="arrow-down" size={24} color={currentPage === 'send' ? '#FFA500' : '#6B7B7D'} />
          <Text style={[styles.navButtonText, currentPage === 'send' && styles.navButtonTextActive]}>Send</Text>
        </TouchableOpacity>
        <TouchableOpacity 
          style={[styles.navButton, currentPage === 'receive' && styles.navButtonActive]}
          onPress={() => setCurrentPage('receive')}
        >
          <Icon name="settings-outline" size={24} color={currentPage === 'receive' ? '#FFA500' : '#6B7B7D'} />
          <Text style={[styles.navButtonText, currentPage === 'receive' && styles.navButtonTextActive]}>Receive</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0A1A1C',
  },
  button: {
    backgroundColor: '#1A2628',
    padding: 15,
    borderRadius: 20,
    marginHorizontal: 20,
    marginTop: 20,
    ...Platform.select({
      ios: {
        shadowColor: '#FFA500',
        shadowOffset: {
          width: 0,
          height: 2,
        },
        shadowOpacity: 0.15,
        shadowRadius: 3.84,
      },
      android: {
        elevation: 5,
      },
    }),
  },
  buttonText: {
    color: '#FFA500',
    textAlign: 'center',
    fontSize: 16,
    fontWeight: '600',
  },
  mnemonicContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#1A2628',
    margin: 20,
    padding: 20,
    borderRadius: 20,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
      },
      android: {
        elevation: 5,
      },
    }),
  },
  bottomNav: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#111E20',
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderTopWidth: 0.5,
    borderTopColor: '#2A3638',
  },
  navButton: {
    alignItems: 'center',
    justifyContent: 'center',
    minWidth: 70,
    paddingVertical: 8,
  },
  navButtonActive: {
    backgroundColor: 'transparent',
  },
  navButtonText: {
    color: '#6B7B7D',
    fontSize: 12,
    marginTop: 4,
  },
  navButtonTextActive: {
    color: '#FFA500',
  },
  screenText: {
    color: '#FFFFFF',
    fontSize: 16,
    textAlign: 'center',
    marginTop: 20,
  },
  screenContainer: {
    flex: 1,
    backgroundColor: '#0A1A1C',
    padding: 20,
  },
  column: {
    width: '48%',
    gap: 10,
  },
  wordBox: {
    backgroundColor: '#1A2628',
    padding: 10,
    borderRadius: 12,
    width: '100%',
    minHeight: 50,
    alignItems: 'center',
    justifyContent: 'center',
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 1,
        },
        shadowOpacity: 0.2,
        shadowRadius: 2,
      },
      android: {
        elevation: 2,
      },
    }),
  },
  wordNumber: {
    color: '#FFA500',
    fontSize: 14,
    fontWeight: '600',
  },
  wordText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '400',
  },
  savedMnemonicContainer: {
    backgroundColor: '#1A2628',
    borderRadius: 15,
    marginBottom: 15,
    overflow: 'hidden',
  },
  mnemonicHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#2A3638',
  },
  mnemonicDate: {
    color: '#FFA500',
    fontSize: 16,
    fontWeight: '600',
  },
  deleteButton: {
    padding: 5,
  },
});

export default App;