laconic-wallet/components/HomeScreen.tsx

import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { Button, Text } from 'react-native-paper';

import { createWallet, resetWallet, retrieveAccounts } from '../utils/accounts';
import { DialogComponent } from './Dialog';
import { NetworkDropdown } from './NetworkDropdown';
import { Account, AccountsState } from '../types';
import Accounts from './Accounts';
import CreateWallet from './CreateWallet';
import ResetWalletDialog from './ResetWalletDialog';
import styles from '../styles/stylesheet';

const HomeScreen = () => {
  const [isWalletCreated, setIsWalletCreated] = useState<boolean>(false);
  const [isWalletCreating, setIsWalletCreating] = useState<boolean>(false);
  const [walletDialog, setWalletDialog] = useState<boolean>(false);
  const [resetWalletDialog, setResetWalletDialog] = useState<boolean>(false);
  const [network, setNetwork] = useState<string>('eth');
  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const [isAccountsFetched, setIsAccountsFetched] = useState<boolean>(false);
  const [phrase, setPhrase] = useState('');
  const [accounts, setAccounts] = useState<AccountsState>({
    ethAccounts: [],
    cosmosAccounts: [],
  });

  const hideWalletDialog = () => setWalletDialog(false);
  const hideResetDialog = () => setResetWalletDialog(false);

  const createWalletHandler = async () => {
    setIsWalletCreating(true);
    const { mnemonic, ethAccounts, cosmosAccounts } = await createWallet();
    if (ethAccounts && cosmosAccounts) {
      setAccounts({
        ethAccounts: [...accounts.ethAccounts, ethAccounts],
        cosmosAccounts: [...accounts.cosmosAccounts, cosmosAccounts],
      });
      setWalletDialog(true);
      setIsWalletCreated(true);
      setPhrase(mnemonic);
    }
  };

  const confirmResetWallet = async () => {
    await resetWallet();
    setIsWalletCreated(false);
    setIsWalletCreating(false);
    setAccounts({
      ethAccounts: [],
      cosmosAccounts: [],
    });
    setCurrentIndex(0);
    hideResetDialog();
    setNetwork('eth');
  };

  const updateNetwork = (newNetwork: string) => {
    setNetwork(newNetwork);
    setCurrentIndex(0);
  };

  const updateIndex = (index: number) => {
    setCurrentIndex(index);
  };

  const updateAccounts = (account: Account) => {
    switch (network) {
      case 'eth':
        setAccounts({
          ...accounts,
          ethAccounts: [...accounts.ethAccounts, account],
        });
        break;
      case 'cosmos':
        setAccounts({
          ...accounts,
          cosmosAccounts: [...accounts.cosmosAccounts, account],
        });
        break;
      default:
        console.error('Select a valid network!');
    }
  };

  useEffect(() => {
    const fetchAccounts = async () => {
      if (isAccountsFetched) {
        return;
      }
      const { ethLoadedAccounts, cosmosLoadedAccounts } =
        await retrieveAccounts();

      if (ethLoadedAccounts && cosmosLoadedAccounts) {
        setAccounts({
          ethAccounts: ethLoadedAccounts,
          cosmosAccounts: cosmosLoadedAccounts,
        });

        setIsWalletCreated(true);
      }

      setIsAccountsFetched(true);
    };

    fetchAccounts();
  }, [isAccountsFetched]);

  return (
    <View style={styles.appContainer}>
      {!isAccountsFetched ? (
        <View style={styles.spinnerContainer}>
          <Text style={{ color: 'black', fontSize: 18, padding: 10 }}>
            Loading...
          </Text>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      ) : isWalletCreated ? (
        <>
          <NetworkDropdown
            selectedNetwork={network}
            updateNetwork={updateNetwork}
          />
          <View style={styles.accountComponent}>
            <Accounts
              network={network}
              accounts={accounts}
              currentIndex={currentIndex}
              updateIndex={updateIndex}
              updateAccounts={updateAccounts}
            />
          </View>
          <View style={styles.resetContainer}>
            <Button
              style={styles.resetButton}
              mode="contained"
              buttonColor="#B82B0D"
              onPress={() => {
                setResetWalletDialog(true);
              }}>
              Reset Wallet
            </Button>
          </View>
        </>
      ) : (
        <CreateWallet
          isWalletCreating={isWalletCreating}
          createWalletHandler={createWalletHandler}
        />
      )}
      <DialogComponent
        visible={walletDialog}
        hideDialog={hideWalletDialog}
        contentText={phrase}
      />
      <ResetWalletDialog
        visible={resetWalletDialog}
        hideDialog={hideResetDialog}
        onConfirm={confirmResetWallet}
      />
    </View>
  );
};

export default HomeScreen;