close user profile dropdown after click on buttons/link inside it

toolkit/chakra/popover.tsx

@@ -55,10 +55,16 @@ export const PopoverCloseTriggerWrapper = React.forwardRef<
   HTMLButtonElement,
   ChakraPopover.CloseTriggerProps
 >(function PopoverCloseTriggerWrapper(props, ref) {
+  const { disabled, ...rest } = props;
+
+  if (disabled) {
+    return props.children;
+  }
+
   return (
     <ChakraPopover.CloseTrigger
       ref={ ref }
-      { ...props }
+      { ...rest }
       asChild
     />
   );

ui/snippets/auth/AuthModal.tsx

@@ -19,7 +19,6 @@ import AuthModalScreenSelectMethod from './screens/AuthModalScreenSelectMethod';
 import AuthModalScreenSuccessEmail from './screens/AuthModalScreenSuccessEmail';
 import AuthModalScreenSuccessWallet from './screens/AuthModalScreenSuccessWallet';
 
-// TODO @tom2drum: check login flow
 const feature = config.features.account;
 
 interface Props {

ui/snippets/user/profile/UserProfileContent.tsx

@@ -64,6 +64,11 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }
   const { isAutoConnectDisabled } = useMarketplaceContext();
   const logout = useLogout();
 
+  const handleLogoutClick = React.useCallback(() => {
+    logout();
+    onClose();
+  }, [ logout, onClose ]);
+
   if (!data) {
     return (
       <Box>
@@ -96,17 +101,13 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }
               ml={ 1 }
             />
             { data?.address_hash ?
-              <Box ml="auto">{ shortenString(data?.address_hash) }</Box> :
-              <Link ml="auto" onClick={ onAddAddress }>Add address</Link>
-            }
+              <Box ml="auto">{ shortenString(data?.address_hash) }</Box> : <Link ml="auto" onClick={ onAddAddress }>Add address</Link> }
           </Flex>
         ) }
         <Flex p={ 2 } columnGap={ 4 }>
           <Box mr="auto">Email</Box>
           { data?.email ?
-            <TruncatedValue value={ data.email }/> :
-            <Link onClick={ onAddEmail }>Add email</Link>
-          }
+            <TruncatedValue value={ data.email }/> : <Link onClick={ onAddEmail }>Add email</Link> }
         </Flex>
       </Box>
 
@@ -127,7 +128,7 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }
       <UserProfileContentNavLink
         text="Sign out"
         icon="sign_out"
-        onClick={ logout }
+        onClick={ handleLogoutClick }
       />
     </Box>
   );

ui/snippets/user/profile/UserProfileContentWallet.tsx

@@ -32,6 +32,10 @@ const UserProfileContentWallet = ({ onClose, className }: Props) => {
     onClose?.();
   }, [ web3Wallet, onClose ]);
 
+  const handleAddressClick = React.useCallback(() => {
+    onClose?.();
+  }, [ onClose ]);
+
   const content = (() => {
     if (web3Wallet.isConnected && web3AccountWithDomain.address) {
       return (
@@ -52,6 +56,7 @@ const UserProfileContentWallet = ({ onClose, className }: Props) => {
             fontSize="sm"
             fontWeight={ 500 }
             noAltHash
+            onClick={ handleAddressClick }
           />
           { web3Wallet.isReconnecting ? <Spinner size="sm" m="2px" flexShrink={ 0 }/> : (
             <IconButton

ui/snippets/user/profile/UserProfileDesktop.tsx

@@ -51,29 +51,28 @@ const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) =>
   const handleAddEmailClick = React.useCallback(() => {
     setAuthInitialScreen({ type: 'email', isAuth: true });
     authModal.onOpen();
-  }, [ authModal ]);
+    profileMenu.onClose();
+  }, [ authModal, profileMenu ]);
 
   const handleAddAddressClick = React.useCallback(() => {
     setAuthInitialScreen({ type: 'connect_wallet', isAuth: true, loginToRewards: true });
     authModal.onOpen();
-  }, [ authModal ]);
+    profileMenu.onClose();
+  }, [ authModal, profileMenu ]);
 
   const handleAuthModalClose = React.useCallback(() => {
     setAuthInitialScreen(initialScreen);
     authModal.onClose();
   }, [ authModal ]);
 
-  const handleOpenChange = React.useCallback(({ open }: { open: boolean }) => {
-    if (open) {
-      profileMenu.onOpen();
-    } else {
-      profileMenu.onClose();
-    }
-  }, [ profileMenu ]);
+  const handleLoginClick = React.useCallback(() => {
+    authModal.onOpen();
+    profileMenu.onClose();
+  }, [ authModal, profileMenu ]);
 
   return (
     <>
-      <PopoverRoot positioning={{ placement: 'bottom-end' }} open={ profileMenu.open } onOpenChange={ handleOpenChange }>
+      <PopoverRoot positioning={{ placement: 'bottom-end' }} open={ profileMenu.open } onOpenChange={ profileMenu.onOpenChange }>
         <PopoverTrigger>
           <UserProfileButton
             profileQuery={ profileQuery }
@@ -88,7 +87,7 @@ const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) =>
               <UserProfileContent
                 data={ profileQuery.data }
                 onClose={ profileMenu.onClose }
-                onLogin={ authModal.onOpen }
+                onLogin={ handleLoginClick }
                 onAddEmail={ handleAddEmailClick }
                 onAddAddress={ handleAddAddressClick }
               />

ui/snippets/user/profile/UserProfileMobile.tsx

@@ -45,31 +45,30 @@ const UserProfileMobile = () => {
   const handleAddEmailClick = React.useCallback(() => {
     setAuthInitialScreen({ type: 'email', isAuth: true });
     authModal.onOpen();
-  }, [ authModal ]);
+    profileMenu.onClose();
+  }, [ authModal, profileMenu ]);
 
   const handleAddAddressClick = React.useCallback(() => {
     setAuthInitialScreen({ type: 'connect_wallet', isAuth: true, loginToRewards: true });
     authModal.onOpen();
-  }, [ authModal ]);
+    profileMenu.onClose();
+  }, [ authModal, profileMenu ]);
 
   const handleAuthModalClose = React.useCallback(() => {
     setAuthInitialScreen(initialScreen);
     authModal.onClose();
   }, [ authModal ]);
 
-  const handleDrawerOpenChange = React.useCallback(({ open }: { open: boolean }) => {
-    if (profileQuery.data || web3Address) {
-      open ? profileMenu.onOpen() : profileMenu.onClose();
-    } else {
-      authModal.onOpen();
-    }
-  }, [ profileQuery.data, web3Address, authModal, profileMenu ]);
+  const handleLoginClick = React.useCallback(() => {
+    authModal.onOpen();
+    profileMenu.onClose();
+  }, [ authModal, profileMenu ]);
 
   return (
     <>
       <DrawerRoot
         open={ profileMenu.open }
-        onOpenChange={ handleDrawerOpenChange }
+        onOpenChange={ profileMenu.onOpenChange }
       >
         <DrawerBackdrop/>
         <DrawerTrigger>
@@ -84,7 +83,7 @@ const UserProfileMobile = () => {
             <UserProfileContent
               data={ profileQuery.data }
               onClose={ profileMenu.onClose }
-              onLogin={ authModal.onOpen }
+              onLogin={ handleLoginClick }
               onAddEmail={ handleAddEmailClick }
               onAddAddress={ handleAddAddressClick }
             />