switch to react-tether, solve almost all the popup issues with it

package-lock.json

@@ -1534,6 +1534,16 @@
         "@types/react-router": "*"
       }
     },
+    "@types/react-tether": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@types/react-tether/-/react-tether-0.5.5.tgz",
+      "integrity": "sha512-ZM/wd77k/kn+nPQyP3j9tnLfK1MehIG/KXAhPbZeHP4J2ZLQ/xXonzdxbeyOdQgLSQtB0hbuRZcSOUOP/VjQnw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "@types/tether": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "2.0.16",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.16.tgz",
@@ -1549,6 +1559,12 @@
       "integrity": "sha512-42zEJkBpNfMEAvWR5WlwtTH22oDzcMjFsL9gDGExwF8X8WvAiw7Vwop7hPw03QT8TKfec83LwbHj6SvpqM4ELQ==",
       "dev": true
     },
+    "@types/tether": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/@types/tether/-/tether-1.4.4.tgz",
+      "integrity": "sha512-6qhsFJVMuMqaQRVyQVi3zUBLfKYyryktL0ZP0Z3zegzeQ7WKm0PZNCdl3JsaitJbzqaoQ9qsFKMfaj5MiMfcSQ==",
+      "dev": true
+    },
     "@types/underscore": {
       "version": "1.8.9",
       "resolved": "https://registry.npmjs.org/@types/underscore/-/underscore-1.8.9.tgz",
@@ -17540,10 +17556,14 @@
         "shallowequal": "^1.0.1"
       }
     },
-    "react-tiny-popover": {
+    "react-tether": {
-      "version": "3.4.2",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-tiny-popover/-/react-tiny-popover-3.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-tether/-/react-tether-2.0.0.tgz",
-      "integrity": "sha512-3lH+GHvyJbjHNg14B7Md8bpUapQ5W3s8IdBFguODjrgEV1+LWrKOmVrpe8xhIQDOkgkiDfLwMVgsI7BQM9Udpg=="
+      "integrity": "sha512-iJnqTQV42Pf7w4xrg3g1gxSxbBCXleDt8AzlSoAqRINqB+mhcJUeegpB8SFMJ/nKT7lSfMkx3GvUfYY+9sPBGw==",
+      "requires": {
+        "prop-types": "^15.6.2",
+        "tether": "^1.4.5"
+      }
     },
     "react-transition-group": {
       "version": "2.6.0",
@@ -21052,6 +21072,11 @@
         }
       }
     },
+    "tether": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.5.tgz",
+      "integrity": "sha512-fysT1Gug2wbRi7a6waeu39yVDwiNtvwj5m9eRD+qZDSHKNghLo6KqP/U3yM2ap6TNUL2skjXGJaJJTJqoC31vw=="
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",

package.json

@@ -26,7 +26,7 @@
     "react-helmet": "^5.2.0",
     "react-moment": "^0.8.4",
     "react-router-dom": "^4.3.1",
-    "react-tiny-popover": "^3.4.2",
+    "react-tether": "^2.0.0",
     "react-transition-group": "^2.6.0",
     "slugify": "^1.3.4",
     "web3": "^1.0.0-beta.46"
@@ -41,6 +41,7 @@
     "@types/react-dom": "^16.8.2",
     "@types/react-helmet": "^5.0.8",
     "@types/react-router-dom": "^4.3.1",
+    "@types/react-tether": "^0.5.5",
     "@types/react-transition-group": "^2.0.16",
     "@types/web3": "^1.0.18",
     "@typescript-eslint/eslint-plugin": "^1.4.2",

src/components/molecules/AccountStatus/Indicator.module.scss

@@ -3,7 +3,7 @@
 .status {
     display: inline-block;
     position: relative;
-    cursor: pointer;
+    cursor: help;
 }
 
 // default: red square

src/components/molecules/AccountStatus/Indicator.tsx

@@ -5,15 +5,18 @@ import styles from './Indicator.module.scss'
 
 const Indicator = ({
     className,
-    togglePopover
+    togglePopover,
+    forwardedRef
 }: {
     className?: string
     togglePopover: () => void
+    forwardedRef: any
 }) => (
     <div
         className={cx(styles.status, className)}
         onMouseOver={togglePopover}
         onMouseOut={togglePopover}
+        ref={forwardedRef}
     >
         <User.Consumer>
             {states =>

src/components/molecules/AccountStatus/Popover.tsx

@@ -3,12 +3,8 @@ import { Link } from 'react-router-dom'
 import { User } from '../../../context/User'
 import styles from './Popover.module.scss'
 
-const Popover = ({ togglePopover }: { togglePopover: () => void }) => (
+const Popover = ({ forwardedRef }: { forwardedRef: any }) => (
-    <div
+    <div className={styles.popover} ref={forwardedRef}>
-        className={styles.popover}
-        onMouseOver={togglePopover}
-        onMouseOut={togglePopover}
-    >
         <div className={styles.popoverInfoline}>
             <span className={styles.balance} title="Fake data">
                 <strong>30</strong> ETH
@@ -22,10 +18,6 @@ const Popover = ({ togglePopover }: { togglePopover: () => void }) => (
             </span>
         </div>
 
-        <div className={styles.popoverInfoline}>
-            <Link to={'/faucet'}>Request Ether</Link>
-        </div>
-
         <div className={styles.popoverInfoline}>
             <User.Consumer>
                 {states =>

src/components/molecules/AccountStatus/index.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import Popover, { ArrowContainer } from 'react-tiny-popover'
+import TetherComponent from 'react-tether'
 import AccountPopover from './Popover'
 import AccountIndicator from './Indicator'
 
@@ -27,31 +27,30 @@ export default class AccountStatus extends PureComponent<
 
     public render() {
         return (
-            <Popover
+            <TetherComponent
-                isOpen={this.state.isPopoverOpen}
+                // http://tether.io/#options
-                padding={10}
+                attachment="top center"
-                position={'bottom'}
+                constraints={[
-                transitionDuration={0.2}
+                    {
-                windowBorderPadding={15}
+                        to: 'scrollParent',
-                content={({ position, targetRect, popoverRect }) => (
+                        attachment: 'together',
-                    <ArrowContainer
+                        pin: true
-                        position={position}
+                    }
-                        targetRect={targetRect}
+                ]}
-                        popoverRect={popoverRect}
+                // https://github.com/danreeves/react-tether#props
-                        arrowColor={'#8b98a9'}
+                renderTarget={ref => (
-                        arrowSize={10}
+                    <AccountIndicator
-                    >
+                        togglePopover={() => this.togglePopover()}
-                        <AccountPopover
+                        className={this.props.className}
-                            togglePopover={() => this.togglePopover()}
+                        forwardedRef={ref}
-                        />
+                    />
-                    </ArrowContainer>
                 )}
-            >
+                renderElement={ref =>
-                <AccountIndicator
+                    this.state.isPopoverOpen && (
-                    togglePopover={() => this.togglePopover()}
+                        <AccountPopover forwardedRef={ref} />
-                    className={this.props.className}
+                    )
-                />
+                }
-            </Popover>
+            />
         )
     }
 }