add increaseZindex prop to EtherscanBtn to fix tooltip in provider dropdown in header

src/components/EtherscanBtn/index.jsx

@@ -1,13 +1,13 @@
 // @flow
 import React from 'react'
 import Tooltip from '@material-ui/core/Tooltip'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Img from '~/components/layout/Img'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
 import { xs } from '~/theme/variables'
 import SearchIcon from './search.svg'
 
-const styles = () => ({
+const useStyles = makeStyles({
   container: {
     display: 'flex',
     justifyContent: 'center',
@@ -19,30 +19,34 @@ const styles = () => ({
       backgroundColor: '#F0EFEE',
     },
   },
+  inreasedPopperZindex: {
+    zIndex: 2001,
+  },
 })
 
 type EtherscanBtnProps = {
   type: 'tx' | 'address',
   value: string,
-  classes: Object,
+  increaseZindex?: boolean,
 }
 
-const EtherscanBtn = ({
-  type, value, classes,
-}: EtherscanBtnProps) => (
-  <Tooltip title="Show details on Etherscan" placement="top">
-    <a
-      className={classes.container}
-      href={getEtherScanLink(type, value)}
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label="Show details on Etherscan"
-    >
-      <Img src={SearchIcon} height={20} alt="Etherscan" />
-    </a>
-  </Tooltip>
-)
+const EtherscanBtn = ({ type, value, increaseZindex = false }: EtherscanBtnProps) => {
+  const classes = useStyles()
+  const customClasses = increaseZindex ? { popper: classes.inreasedPopperZindex } : {}
 
-const EtherscanBtnWithStyles = withStyles(styles)(EtherscanBtn)
+  return (
+    <Tooltip title="Show details on Etherscan" placement="top" classes={customClasses}>
+      <a
+        className={classes.container}
+        href={getEtherScanLink(type, value)}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Show details on Etherscan"
+      >
+        <Img src={SearchIcon} height={20} alt="Etherscan" />
+      </a>
+    </Tooltip>
+  )
+}
 
-export default EtherscanBtnWithStyles
+export default EtherscanBtn

src/components/Header/component/ProviderDetails/UserDetails.jsx

@@ -119,7 +119,7 @@ const UserDetails = ({
           {userAddress && (
             <>
               <CopyBtn content={userAddress} increaseZindex />
-              <EtherscanBtn type="address" value={userAddress} />
+              <EtherscanBtn type="address" value={userAddress} increaseZindex />
             </>
           )}
         </Block>