profile popover hover fixes (#215)

navabr profile address fixes

Author: poojachigitey

src/containers/NavBar/ProfilePopover.js

@@ -39,7 +39,7 @@ const ProfilePopover = (props) => {
             classes={{
                 paper: classes.paper,
             }}
-            open={props.open}
+            open={props.open && Boolean(props.anchorEl)}
             transformOrigin={{
                 vertical: 'top',
                 horizontal: 'center',
@@ -54,15 +54,19 @@ const ProfilePopover = (props) => {
                     <p className="address_heading">{variables[props.lang].transparent_address}</p>
                     <div className="hash_text" title={props.address}>
                         <p className="name">{props.address}</p>
-                        {props.address && props.address.slice(props.address.length - 6, props.address.length)}
+                        {props.address &&
+  props.address.slice(props.address.length - 6)}
                         <CopyButton data={props.address}>
                             {variables[props.lang].copy}
                         </CopyButton>
                     </div>
                     <p className="address_heading">{variables[props.lang].shielded_address}</p>
                     <div className="hash_text" title={props.address}>
-                        <p className="name">{props.shieldedaddress?.shieldedDetails}</p>
-                        {props.address && props.shieldedaddress?.shieldedDetails.slice(props.shieldedaddress?.shieldedDetails.length - 6, props.shieldedaddress?.shieldedDetails.length)}
+                        <p className="name">{props.shieldedaddress?.shieldedDetails || '-'}</p>
+                        {props.shieldedaddress?.shieldedDetails &&
+                            props.shieldedaddress.shieldedDetails.slice(
+                                props.shieldedaddress.shieldedDetails.length - 6
+                            )}
                         <CopyButton data={props.shieldedaddress?.shieldedDetails}>
                             {variables[props.lang].copy}
                         </CopyButton>

src/containers/NavBar/index.js

@@ -90,6 +90,9 @@ class NavBar extends Component {
             profileAnchorEl: null,
         };
 
+        this.hoveringProfileArea = false;
+        this.closeTimeout = null;
+
         this.initKeplr = this.initKeplr.bind(this);
         this.handleFetch = this.handleFetch.bind(this);
         this.handleFetchValidators = this.handleFetchValidators.bind(this);
@@ -497,6 +500,24 @@ class NavBar extends Component {
         });
     };
 
+    handleProfileMouseEnter = (event) => {
+        this.hoveringProfileArea = true;
+        clearTimeout(this.closeTimeout);
+
+        if (!this.state.profileAnchorEl) {
+            this.setState({ profileAnchorEl: event.currentTarget });
+        }
+    };
+
+    handleProfileMouseLeave = () => {
+        this.hoveringProfileArea = false;
+        this.closeTimeout = setTimeout(() => {
+            if (!this.hoveringProfileArea) {
+                this.setState({ profileAnchorEl: null });
+            }
+        }, 200);
+    };
+
     render () {
         const { profileAnchorEl } = this.state;
         const profileOpen = Boolean(profileAnchorEl);
@@ -546,8 +567,8 @@ class NavBar extends Component {
                             </CustomTooltip> : null}
                         {localStorage.getItem('of_co_address') || this.props.address
                             ? (<div 
-                                onMouseEnter={this.handleProfilePopoverOpen}
-                                onMouseLeave={this.handleProfilePopoverClose}
+                                onMouseEnter={this.handleProfileMouseEnter}
+                                onMouseLeave={this.handleProfileMouseLeave}
                                 className="profile_button"
                                 style={{ cursor: 'pointer', position: 'relative' }}
                             >
@@ -556,6 +577,8 @@ class NavBar extends Component {
                                     <ProfilePopover
                                         anchorEl={profileAnchorEl}
                                         open={profileOpen}
+                                        onMouseEnter={this.handleProfileMouseEnter}
+                                        onMouseLeave={this.handleProfileMouseLeave}
                                         onClose={this.handleProfilePopoverClose}
                                     />
                                 )}