laconic-wallet/components/Accounts.tsx

import React, { useState } from 'react';
import { TouchableOpacity, View } from 'react-native';
import { Button, List, Text, useTheme } from 'react-native-paper';

import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

import { AccountsProps, StackParamsList, Account } from '../types';
import { addAccount } from '../utils';
import styles from '../styles/stylesheet';

const Accounts: React.FC<AccountsProps> = ({
  network,
  accounts,
  updateAccounts,
  currentIndex,
  updateIndex,
}) => {
  const navigation =
    useNavigation<NativeStackNavigationProp<StackParamsList>>();

  const [expanded, setExpanded] = useState(false);
  const [isAccountCreating, setIsAccountCreating] = useState(false);

  const handlePress = () => setExpanded(!expanded);

  const addAccountHandler = async () => {
    setIsAccountCreating(true);
    const newAccount = await addAccount(network);
    setIsAccountCreating(false);
    setExpanded(false);

    if (newAccount) {
      updateAccounts(newAccount);
      updateIndex(selectedAccounts[selectedAccounts.length - 1].id + 1);
    }
  };

  const selectedAccounts: Account[] = (() => {
    switch (network) {
      case 'eth':
        return accounts.ethAccounts;
      case 'cosmos':
        return accounts.cosmosAccounts;
      default:
        return [];
    }
  })();

  const renderAccountItems = () =>
    selectedAccounts.map(account => (
      <List.Item
        key={account.id}
        title={`Account ${account.id + 1}`}
        onPress={() => {
          updateIndex(account.id);
          setExpanded(false);
        }}
      />
    ));
  const theme = useTheme();

  return (
    <View>
      <List.Accordion
        title={`Account ${currentIndex + 1}`}
        expanded={expanded}
        onPress={handlePress}>
        {renderAccountItems()}
      </List.Accordion>

      <View style={styles.addAccountButton}>
        <Button
          mode="contained"
          onPress={addAccountHandler}
          loading={isAccountCreating}>
          {isAccountCreating ? 'Adding' : 'Add Account'}
        </Button>
      </View>

      <View style={styles.accountContainer}>
        <Text variant="bodyLarge">
          <Text style={styles.highlight}>Address: </Text>
          {selectedAccounts[currentIndex]?.address}
        </Text>
        <Text variant="bodyLarge">
          <Text style={styles.highlight}>Public Key: </Text>
          {selectedAccounts[currentIndex]?.pubKey}
        </Text>
      </View>

      <View style={styles.signLink}>
        <TouchableOpacity
          onPress={() => {
            navigation.navigate('SignMessage', {
              selectedNetwork: network,
              accountInfo: selectedAccounts[currentIndex],
            });
          }}>
          <Text
            variant="titleSmall"
            style={[styles.hyperlink, { color: theme.colors.primary }]}>
            Sign Message
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default Accounts;