chore: fix account click event

Consensys · Feb 24, 2025 · a3b94e3 · a3b94e3
1 parent 1e7a814
commit a3b94e3
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 44 deletions.
diff --git a/packages/wallet-ui/src/components/ui/organism/AccountListModal/AccountItem.view.tsx b/packages/wallet-ui/src/components/ui/organism/AccountListModal/AccountItem.view.tsx
@@ -14,29 +14,45 @@ export interface Props {
   selected?: boolean;
   visible: boolean;
   scrollToRef?: React.RefObject<HTMLDivElement> | null;
-  onAccountItemClick?: (event: React.MouseEvent) => void;
-  onAccountIconClick: (event: React.MouseEvent) => void;
+  onItemClick?: (account: Account) => Promise<void>;
+  onIconButtonClick: (account: Account) => Promise<void>;
 }
 
 export const AccountItem = ({
   selected = false,
   account,
   visible,
   scrollToRef,
-  onAccountItemClick,
-  onAccountIconClick,
+  onItemClick,
+  onIconButtonClick,
 }: Props) => {
   const { address, accountName } = account;
+
+  const preventDefaultMouseEvent = (event: React.MouseEvent) => {
+    // Prevent triggering the native behaviour
+    event.preventDefault();
+    // Prevent triggering the parent onClick event
+    event.stopPropagation();
+  };
+
+  const onIconBtnClick = async (event: React.MouseEvent) => {
+    preventDefaultMouseEvent(event);
+    await onIconButtonClick(account);
+  };
+
+  const onClick = async (event: React.MouseEvent) => {
+    preventDefaultMouseEvent(event);
+    if (typeof onItemClick === 'function') {
+      await onItemClick(account);
+    }
+  };
+
   return (
     <Wrapper
       ref={scrollToRef}
       selected={selected}
       visible={visible}
-      onClick={
-        typeof onAccountItemClick === 'function'
-          ? onAccountItemClick
-          : undefined
-      }
+      onClick={onClick}
     >
       <AccountInfoWrapper>
         <AccountImageStyled size={30} address={address} />
@@ -45,7 +61,7 @@ export const AccountItem = ({
           <div>{formatAddress(address)}</div>
         </div>
       </AccountInfoWrapper>
-      <IconButton size="small" onClick={onAccountIconClick}>
+      <IconButton size="small" onClick={onIconBtnClick}>
         <VisibilityIcon icon={visible ? 'eye-slash' : 'eye'} />
       </IconButton>
     </Wrapper>

diff --git a/packages/wallet-ui/src/components/ui/organism/AccountListModal/AccountList.view.tsx b/packages/wallet-ui/src/components/ui/organism/AccountListModal/AccountList.view.tsx
@@ -24,7 +24,11 @@ export const AccountListModalView = ({
   onAddAccountClick: () => void;
 }) => {
   const toastr = new Toastr();
-  const { switchAccount, hideAccount, unHideAccount } = useStarkNetSnap();
+  const {
+    switchAccount: switchSnapAccount,
+    hideAccount: hideSnapAccount,
+    unHideAccount: showSnapAccount,
+  } = useStarkNetSnap();
   const { translate } = useMultiLanguage();
   const currentNework = useCurrentNetwork();
   const { address: currentAddress } = useCurrentAccount();
@@ -47,43 +51,25 @@ export const AccountListModalView = ({
   }, [accounts]);
   const chainId = currentNework?.chainId;
 
-  const preventDefaultMouseEvent = (event: React.MouseEvent) => {
-    // Prevent triggering the native behaviour
-    event.preventDefault();
-    // Prevent triggering the parent onClick event
-    event.stopPropagation();
-  };
-
-  const onAccountSwitchClick = async (account: Account) => {
+  const switchAccount = async (account: Account) => {
     onClose();
-
-    await switchAccount(chainId, account.address);
+    await switchSnapAccount(chainId, account.address);
   };
 
-  const onAccountHiddenClick = async (
-    event: React.MouseEvent,
-    account: Account,
-  ) => {
-    preventDefaultMouseEvent(event);
-
+  const hideAccount = async (account: Account) => {
     if (visibleAccounts.length < 2) {
       toastr.error(translate('youCannotHideLastAccount'));
     } else {
-      await hideAccount({
+      await hideSnapAccount({
         chainId,
         address: account.address,
         currentAddress,
       });
     }
   };
 
-  const onAccountUnHideClick = async (
-    event: React.MouseEvent,
-    account: Account,
-  ) => {
-    preventDefaultMouseEvent(event);
-
-    await unHideAccount({
+  const showAccount = async (account: Account) => {
+    await showSnapAccount({
       chainId,
       address: account.address,
     });
@@ -106,12 +92,8 @@ export const AccountListModalView = ({
                       selected={selected}
                       visible={true}
                       account={account}
-                      onAccountItemClick={() =>
-                        selected ? undefined : onAccountSwitchClick(account)
-                      }
-                      onAccountIconClick={(event) =>
-                        onAccountHiddenClick(event, account)
-                      }
+                      onItemClick={selected ? undefined : switchAccount}
+                      onIconButtonClick={hideAccount}
                     />
                   );
                 })}
@@ -128,9 +110,7 @@ export const AccountListModalView = ({
                   <AccountItem
                     visible={false}
                     account={account}
-                    onAccountIconClick={(event) =>
-                      onAccountUnHideClick(event, account)
-                    }
+                    onIconButtonClick={showAccount}
                   />
                 ))}
               </>