laconic-wallet/components/Accounts.tsx

import React, { useState } from 'react';
import { ScrollView, 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/accounts';
import styles from '../styles/stylesheet';
import HDPathDialog from './HDPathDialog';
import AccountDetails from './AccountDetails';

const Accounts = ({
  network,
  accounts,
  updateAccounts,
  currentIndex,
  updateIndex: updateId,
}: AccountsProps) => {
  const navigation =
    useNavigation<NativeStackNavigationProp<StackParamsList>>();
  const [expanded, setExpanded] = useState(false);
  const [isAccountCreating, setIsAccountCreating] = useState(false);
  const [hdDialog, setHdDialog] = useState(false);
  const [pathCode, setPathCode] = useState('');
  const theme = useTheme();

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

  const addAccountHandler = async () => {
    setIsAccountCreating(true);
    const newAccount = await addAccount(network);
    setIsAccountCreating(false);
    if (newAccount) {
      updateAccounts(newAccount);
      updateId(newAccount.counterId);
    }
  };

  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.counterId}
        title={`Account ${account.counterId + 1}`}
        onPress={() => {
          updateId(account.counterId);
          setExpanded(false);
        }}
      />
    ));

  return (
    <ScrollView>
      <View>
        <HDPathDialog
          visible={hdDialog}
          hideDialog={() => setHdDialog(false)}
          updateAccounts={updateAccounts}
          updateIndex={updateId}
          pathCode={pathCode}
        />
        <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.addAccountButton}>
          <Button
            mode="contained"
            onPress={() => {
              setHdDialog(true);
              setPathCode(network === 'eth' ? "m/44'/60'/" : "m/44'/118'/");
            }}>
            Add Account from HD path
          </Button>
        </View>

        <AccountDetails account={selectedAccounts[currentIndex]} />

        <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>

          <TouchableOpacity
            onPress={() => {
              navigation.navigate('WalletConnect');
            }}>
            <Text
              variant="titleSmall"
              style={[styles.hyperlink, { color: theme.colors.primary }]}>
              Connect Wallet
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
};

export default Accounts;