Added types to the header so I can figure out what's going on

Closes #652

src/background/controller/wallet.ts

@@ -29,7 +29,7 @@ import { type FeatureFlagKey, type FeatureFlags } from '@/shared/types/feature-t
 import { ContactType } from '@/shared/types/network-types';
 import { type TrackingEvents } from '@/shared/types/tracking-types';
 import { type TransferItem, type TransactionState } from '@/shared/types/transaction-types';
-import { type LoggedInAccount } from '@/shared/types/wallet-types';
+import { type ActiveChildType, type LoggedInAccount } from '@/shared/types/wallet-types';
 import { ensureEvmAddressPrefix, isValidEthereumAddress, withPrefix } from '@/shared/utils/address';
 import { getSignAlgo } from '@/shared/utils/algo';
 import { convertToIntegerAmount, validateAmount } from '@/shared/utils/number';
@@ -1589,8 +1589,12 @@ export class WalletController extends BaseController {
     return activeWallet;
   };
 
-  setActiveWallet = async (wallet: any, key: any, index = null) => {
-    await userWalletService.setActiveWallet(key);
+  setActiveWallet = async (
+    wallet: BlockchainResponse,
+    key: ActiveChildType | null,
+    index: number | null = null
+  ) => {
+    userWalletService.setActiveWallet(key);
 
     const network = await this.getNetwork();
     await userWalletService.setCurrentWallet(wallet, key, network, index);

src/background/service/userWallet.ts

@@ -147,9 +147,9 @@ class UserWallet {
 
   setCurrentWallet = async (
     wallet: BlockchainResponse,
-    key: string,
+    key: ActiveChildType | null,
     network: string,
-    index = null
+    index: number | null = null
   ) => {
     if (key && key !== 'evm') {
       this.store.currentWallet = wallet;

src/ui/views/Approval/components/EthApproval/EthConnect/index.tsx

@@ -75,6 +75,8 @@ const EthConnect = ({ params: { icon, name, origin } }: ConnectProps) => {
         chain_id: currentNetwork,
         coins: ['flow'],
         id: 1,
+        icon: icon,
+        color: '#282828',
       };
       await usewallet.setActiveWallet(walletInfo, 'evm');
     }

src/ui/views/Dashboard/Components/MenuDrawer.tsx

@@ -17,7 +17,12 @@ import { makeStyles } from '@mui/styles';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import type { UserInfoResponse } from '@/shared/types/network-types';
+import type { ChildAccount, UserInfoResponse, WalletType } from '@/shared/types/network-types';
+import {
+  type LoggedInAccount,
+  type LoggedInAccountWithIndex,
+  type ActiveChildType,
+} from '@/shared/types/wallet-types';
 import { isValidEthereumAddress } from '@/shared/utils/address';
 import { useProfiles } from '@/ui/hooks/useProfileHook';
 import importIcon from 'ui/FRWAssets/svg/importIcon.svg';
@@ -45,18 +50,22 @@ const useStyles = makeStyles(() => ({
 interface MenuDrawerProps {
   userInfo: UserInfoResponse | null;
   drawer: boolean;
-  toggleDrawer: any;
-  otherAccounts: any;
-  switchAccount: any;
-  togglePop: any;
-  walletList: any;
-  childAccounts: any;
-  current: any;
-  createWalletList: any;
-  setWallets: any;
+  toggleDrawer: () => void;
+  otherAccounts: LoggedInAccount[];
+  switchAccount: (account: LoggedInAccountWithIndex) => Promise<void>;
+  togglePop: () => void;
+  walletList: WalletType[];
+  childAccounts: ChildAccount | null;
+  current: WalletType;
+  createWalletList: (props: WalletType) => React.ReactNode;
+  setWallets: (
+    walletInfo: WalletType,
+    key: ActiveChildType | null,
+    index?: number | null
+  ) => Promise<void>;
   currentNetwork: string;
-  evmWallet: any;
-  networkColor: any;
+  evmWallet: WalletType;
+  networkColor: (network: string) => string;
   evmLoading: boolean;
   modeOn: boolean;
   mainAddressLoading: boolean;
@@ -279,6 +288,8 @@ const MenuDrawer = (props: MenuDrawerProps) => {
                       chain_id: props.currentNetwork,
                       coins: ['flow'],
                       id: 1,
+                      icon: props.evmWallet.icon,
+                      color: props.evmWallet.color,
                     },
                     'evm'
                   )
@@ -368,15 +379,20 @@ const MenuDrawer = (props: MenuDrawerProps) => {
                   }}
                   key={index}
                   onClick={() =>
+                    props.childAccounts &&
                     props.setWallets(
                       {
                         name: props.childAccounts[key]?.name ?? key,
                         address: key,
                         chain_id: props.currentNetwork,
                         coins: ['flow'],
                         id: 1,
+                        icon:
+                          props.childAccounts?.[key]?.thumbnail?.url ??
+                          'https://lilico.app/placeholder-2.0.png',
+                        color: '#282828',
                       },
-                      key
+                      key as ActiveChildType | null
                     )
                   }
                 >
@@ -393,7 +409,7 @@ const MenuDrawer = (props: MenuDrawerProps) => {
                     <CardMedia
                       component="img"
                       image={
-                        props.childAccounts[key]?.thumbnail?.url ??
+                        props.childAccounts?.[key]?.thumbnail?.url ??
                         'https://lilico.app/placeholder-2.0.png'
                       }
                       sx={{
@@ -419,7 +435,7 @@ const MenuDrawer = (props: MenuDrawerProps) => {
                           color="#E6E6E6"
                           fontSize={'12px'}
                         >
-                          {props.childAccounts[key]?.name ?? key}
+                          {props.childAccounts?.[key]?.name ?? key}
                         </Typography>
                         {props.current['address'] === key && (
                           <ListItemIcon sx={{ display: 'flex', alignItems: 'center' }}>

src/ui/views/Dashboard/Components/NetworkList.tsx

@@ -8,7 +8,12 @@ import mainnetIndicator from '../../../FRWAssets/svg/mainnetArrow.svg';
 import networkLink from '../../../FRWAssets/svg/networkLink.svg';
 import testnetIndicator from '../../../FRWAssets/svg/testnetArrow.svg';
 
-const NetworkList = ({ networkColor, currentNetwork }) => {
+interface NetworkListProps {
+  networkColor: (network: string) => string;
+  currentNetwork: string;
+}
+
+const NetworkList = ({ networkColor, currentNetwork }: NetworkListProps) => {
   const usewallet = useWallet();
 
   const history = useHistory();

src/ui/views/Dashboard/Components/Popup.tsx

@@ -16,7 +16,7 @@ import CircularProgress, { circularProgressClasses } from '@mui/material/Circula
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import type { UserInfoResponse } from '@/shared/types/network-types';
+import type { UserInfoResponse, WalletType } from '@/shared/types/network-types';
 import { type LoggedInAccountWithIndex, type LoggedInAccount } from '@/shared/types/wallet-types';
 import { useProfiles } from '@/ui/hooks/useProfileHook';
 import iconCheck from 'ui/FRWAssets/svg/iconCheck.svg';
@@ -27,13 +27,12 @@ import { useWallet } from 'ui/utils';
 
 interface TransferConfirmationProps {
   isConfirmationOpen: boolean;
-  data: any;
   handleCloseIconClicked: () => void;
   handleCancelBtnClicked: () => void;
   handleAddBtnClicked: () => void;
   userInfo: UserInfoResponse;
-  current: any;
-  switchAccount: (account: LoggedInAccountWithIndex) => void;
+  current: WalletType;
+  switchAccount: (account: LoggedInAccountWithIndex) => Promise<void>;
   loggedInAccounts: LoggedInAccount[];
   switchLoading: boolean;
 }

src/ui/views/Dashboard/Components/WalletFunction.tsx

@@ -2,16 +2,37 @@ import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import { ListItem, ListItemButton, ListItemIcon, Typography, Box } from '@mui/material';
 import React, { useState, useEffect, useCallback } from 'react';
 
+import { type WalletType } from '@/shared/types/network-types';
+import { type ActiveChildType, type WalletAddress } from '@/shared/types/wallet-types';
 import { useWallet } from 'ui/utils';
 
 import IconEnd from '../../../../components/iconfont/IconAVector11Stroke';
 
-const WalletFunction = (props) => {
+interface WalletFunctionProps {
+  props_id: number;
+  name: string;
+  address: WalletAddress;
+  icon: string;
+  color: string;
+  setWallets: (
+    walletInfo: WalletType,
+    key: ActiveChildType | null,
+    index?: number | null
+  ) => Promise<void>;
+  currentWalletIndex: number;
+  currentWallet: WalletType;
+  mainAddress: string;
+  setExpandAccount: React.Dispatch<React.SetStateAction<boolean>>;
+  expandAccount: boolean;
+  walletList: WalletType[];
+}
+
+const WalletFunction = (props: WalletFunctionProps) => {
   const usewallet = useWallet();
-  const [currentBalance, setCurrentBalance] = useState(null);
+  const [currentBalance, setCurrentBalance] = useState<string | null>(null);
 
   const walletFlowBalance = useCallback(
-    async (address) => {
+    async (address: string) => {
       const balance = await usewallet.getFlowBalance(address);
       return balance || 0;
     },
@@ -41,7 +62,7 @@ const WalletFunction = (props) => {
         if (props.address === props.currentWallet['address']) {
           toggleExpand(); // Toggle the list if the current address is clicked
         } else {
-          props.setWallets(props, null, props.props_id); // Set the wallet if it's a different address
+          props.setWallets(props.walletList[props.props_id], null, props.props_id); // Set the wallet if it's a different address
         }
       }}
       sx={{ mb: 0, padding: '0', cursor: 'pointer' }}

src/ui/views/Dashboard/Header.tsx

@@ -1,5 +1,4 @@
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
-import MenuIcon from '@mui/icons-material/Menu';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import SettingsIcon from '@mui/icons-material/Settings';
 import {
@@ -17,7 +16,6 @@ import {
   Avatar,
   Skeleton,
   CircularProgress,
-  Icon,
   Chip,
 } from '@mui/material';
 import Box from '@mui/material/Box';
@@ -28,7 +26,12 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
 import { storage } from '@/background/webapi';
-import { type LoggedInAccountWithIndex } from '@/shared/types/wallet-types';
+import { type UserInfoResponse, type WalletType } from '@/shared/types/network-types';
+import {
+  type WalletAddress,
+  type ActiveChildType,
+  type LoggedInAccountWithIndex,
+} from '@/shared/types/wallet-types';
 import { isValidEthereumAddress } from '@/shared/utils/address';
 import StorageExceededAlert from '@/ui/FRWComponent/StorageExceededAlert';
 import { useCoins } from '@/ui/hooks/useCoinHook';
@@ -38,7 +41,6 @@ import { useNews } from '@/ui/utils/NewsContext';
 import { useWallet, formatAddress, useWalletLoaded } from 'ui/utils';
 
 import IconCopy from '../../../components/iconfont/IconCopy';
-import EyeOff from '../../FRWAssets/svg/EyeOff.svg';
 
 import MenuDrawer from './Components/MenuDrawer';
 import NewsView from './Components/NewsView';
@@ -58,17 +60,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-type ChildAccount = {
-  [key: string]: {
-    name: string;
-    description: string;
-    thumbnail: {
-      url: string;
-    };
-  };
-};
-
-const Header = ({ loading = false }) => {
+const Header = ({ _loading = false }) => {
   const usewallet = useWallet();
   const walletLoaded = useWalletLoaded();
   const classes = useStyles();
@@ -172,7 +164,11 @@ const Header = ({ loading = false }) => {
     [usewallet, history, setNetwork, clearCoins, clearProfileData]
   );
 
-  const setWallets = async (walletInfo, key, index = null) => {
+  const setWallets = async (
+    walletInfo: WalletType,
+    key: ActiveChildType | null,
+    index: number | null = null
+  ) => {
     await usewallet.setActiveWallet(walletInfo, key, index);
     // Clear collections
     usewallet.clearNFTCollection();
@@ -236,6 +232,7 @@ const Header = ({ loading = false }) => {
       case 'crescendo':
         return '#CCAF21';
     }
+    return '#41CC5D';
   };
 
   const checkAuthStatus = useCallback(async () => {
@@ -298,7 +295,12 @@ const Header = ({ loading = false }) => {
     return `${repoUrl}/commits`;
   }, []);
 
-  const AccountFunction = (props) => {
+  interface AccountFunctionProps {
+    username: string;
+    avatar: string;
+  }
+
+  const AccountFunction = (props: AccountFunctionProps) => {
     return (
       <ListItem
         disablePadding
@@ -434,13 +436,13 @@ const Header = ({ loading = false }) => {
     );
   };
 
-  const createWalletList = (props) => {
+  const createWalletList = (props: WalletType) => {
     return (
       <List component="nav" key={props.id} sx={{ mb: '0', padding: 0 }}>
         <WalletFunction
           props_id={props.id}
           name={props.name}
-          address={props.address}
+          address={props.address as WalletAddress}
           icon={props.icon}
           color={props.color}
           setWallets={setWallets}
@@ -455,7 +457,7 @@ const Header = ({ loading = false }) => {
     );
   };
 
-  const createAccountList = (props) => {
+  const createAccountList = (props: UserInfoResponse) => {
     return (
       props && (
         <List component="nav" key={props.username}>
@@ -506,7 +508,12 @@ const Header = ({ loading = false }) => {
   };
   const deploymentEnv = process.env.DEPLOYMENT_ENV || 'local';
 
-  const appBarLabel = (props) => {
+  interface AppBarLabelProps {
+    address: string;
+    name: string;
+  }
+
+  const appBarLabel = (props: AppBarLabelProps) => {
     const haveAddress = !mainAddressLoading && props && props.address;
 
     return (
@@ -753,14 +760,13 @@ const Header = ({ loading = false }) => {
           {userInfo && (
             <Popup
               isConfirmationOpen={ispop}
-              data={{ amount: 0 }}
               handleCloseIconClicked={() => setPop(false)}
               handleCancelBtnClicked={() => setPop(false)}
               handleAddBtnClicked={() => {
                 setPop(false);
               }}
               userInfo={userInfo!}
-              current={currentWallet!}
+              current={currentWallet}
               switchAccount={switchAccount}
               loggedInAccounts={loggedInAccounts}
               switchLoading={switchLoading}