1  import React, { useState } from "react";
 2  import styles from './transactiontokenswitcher.module.scss'
 3  import TransactionRecords from "./TransactionRecords";
 4  import TokenList from "./TokenList";
 5  
 6  const TransactionTokenSwitcher = ({ handleSelectedAccount, latestBalance }) => {
 7    const [onTransactionActive, setOnTransactionActive] = useState(false);
 8  
 9    const handleOnTransactionClick = () => {
10      setOnTransactionActive(true);
11    };
12  
13    const handleTokenListClick = () => {
14      setOnTransactionActive(false);
15    };
16  
17    return (
18      <div className={styles.switchContainer}>
19        <div className={styles.switchButtonContainer}>
20          <button
21            className={`${styles.switchButton} ${
22              !onTransactionActive ? styles.active : styles.inactive
23            }`}
24            onClick={handleTokenListClick}
25          >
26            Token List
27          </button>
28          <button
29            className={`${styles.switchButton} ${
30              onTransactionActive ? styles.active : styles.inactive
31            }`}
32            onClick={handleOnTransactionClick}
33          >
34            Transaction
35          </button>
36        </div>
37        <div className={styles.contentContainer}>
38          <div className={styles.componentWrapper}>
39            {onTransactionActive 
40            ? <TransactionRecords /> 
41            : <TokenList 
42                onSelectedAccount={handleSelectedAccount}
43                latestBalance={latestBalance}
44              />}
45          </div>
46        </div>
47      </div>
48    );
49  };
50  
51  export default TransactionTokenSwitcher;