diff --git a/package-lock.json b/package-lock.json
index 36dfb3c..5ecac47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1231,6 +1231,14 @@
"@types/react": "*"
}
},
+ "@types/react-popover": {
+ "version": "0.5.3",
+ "resolved": "https://registry.npmjs.org/@types/react-popover/-/react-popover-0.5.3.tgz",
+ "integrity": "sha512-xfmnFHRKMXtGdWuSwEg4XiHxODKlN/bPEXfretBpojI7cNoeAtnmpyTmFk4UNcO+ys3W2SOsMXzcaqCNPyYP2g==",
+ "requires": {
+ "@types/react": "*"
+ }
+ },
"@types/react-router": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-4.4.3.tgz",
@@ -4904,6 +4912,14 @@
"integrity": "sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=",
"dev": true
},
+ "css-vendor": {
+ "version": "0.3.8",
+ "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
+ "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
+ "requires": {
+ "is-in-browser": "^1.0.2"
+ }
+ },
"css-what": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz",
@@ -9711,6 +9727,11 @@
"integrity": "sha512-but/G3sapV3MNyqiDBLrOi4x8uCIw0RY3o/Vb5GT0sMFHrVV7731wFSVy41T5FO1og7G0gXLJh0MkgPRouko/A==",
"dev": true
},
+ "is-in-browser": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+ "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+ },
"is-installed-globally": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
@@ -11211,6 +11232,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
},
+ "lodash._getnative": {
+ "version": "3.9.1",
+ "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+ "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
+ },
"lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -11235,6 +11261,14 @@
"integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
"dev": true
},
+ "lodash.debounce": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-3.1.1.tgz",
+ "integrity": "sha1-gSIRw3ipTMKdWqTjNGzwv846ffU=",
+ "requires": {
+ "lodash._getnative": "^3.0.0"
+ }
+ },
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -11277,6 +11311,14 @@
"lodash._reinterpolate": "~3.0.0"
}
},
+ "lodash.throttle": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-3.0.4.tgz",
+ "integrity": "sha1-vE9HH7Mo5Nb9xt8rPTyvET8Pick=",
+ "requires": {
+ "lodash.debounce": "^3.0.0"
+ }
+ },
"lodash.unescape": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/lodash.unescape/-/lodash.unescape-4.0.1.tgz",
@@ -16612,6 +16654,17 @@
"resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.8.4.tgz",
"integrity": "sha512-QhI19OcfhiAn60/O6bMR0w8ApXrPFCjv6+eV0I/P9/AswzjgEAx4L7VxMBCpS/jrythLa12Q9v88req+ys4YpA=="
},
+ "react-popover": {
+ "version": "0.5.10",
+ "resolved": "https://registry.npmjs.org/react-popover/-/react-popover-0.5.10.tgz",
+ "integrity": "sha512-5SYDTfncywSH00I70oHd4gFRUR8V0rJ4sRADSI/P6G0RVXp9jUgaWloJ0Bk+SFnjpLPuipTKuzQNNd2CTs5Hrw==",
+ "requires": {
+ "css-vendor": "^0.3.1",
+ "debug": "^2.6.8",
+ "lodash.throttle": "^3.0.3",
+ "prop-types": "^15.5.10"
+ }
+ },
"react-router": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
diff --git a/package.json b/package.json
index ee147b1..07a9728 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"@oceanprotocol/squid": "^0.3.0",
"@types/is-url": "^1.2.28",
"@types/react-helmet": "^5.0.8",
+ "@types/react-popover": "^0.5.3",
"@types/react-transition-group": "^2.0.15",
"classnames": "^2.2.6",
"eslint": "^5.6.0",
@@ -29,6 +30,7 @@
"react-dom": "^16.8.1",
"react-helmet": "^5.2.0",
"react-moment": "^0.8.4",
+ "react-popover": "^0.5.10",
"react-router-dom": "^4.3.1",
"react-transition-group": "^2.5.3",
"slugify": "^1.3.4",
diff --git a/src/components/molecules/AccountStatus.module.scss b/src/components/molecules/AccountStatus.module.scss
index ccbdc9b..377ae34 100644
--- a/src/components/molecules/AccountStatus.module.scss
+++ b/src/components/molecules/AccountStatus.module.scss
@@ -35,9 +35,9 @@
$popoverWidth: 18rem;
.popover {
- position: absolute;
- top: 1.5rem;
- right: -($spacer / 3);
+ // position: absolute;
+ // top: 1.5rem;
+ // right: -($spacer / 3);
width: $popoverWidth;
padding: $spacer / 2;
background: $brand-black;
@@ -47,20 +47,20 @@ $popoverWidth: 18rem;
color: $brand-grey-light;
font-size: $font-size-small;
- &:after {
- bottom: 100%;
- right: 2%;
- border: solid transparent;
- content: '';
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-color: transparent;
- border-bottom-color: $brand-grey-light;
- border-width: 10px;
- margin-left: -10px;
- }
+ // &:after {
+ // bottom: 100%;
+ // right: 2%;
+ // border: solid transparent;
+ // content: '';
+ // height: 0;
+ // width: 0;
+ // position: absolute;
+ // pointer-events: none;
+ // border-color: transparent;
+ // border-bottom-color: $brand-grey-light;
+ // border-width: 10px;
+ // margin-left: -10px;
+ // }
}
.popoverInfoline {
diff --git a/src/components/molecules/AccountStatus.tsx b/src/components/molecules/AccountStatus.tsx
index 9450745..23e2939 100644
--- a/src/components/molecules/AccountStatus.tsx
+++ b/src/components/molecules/AccountStatus.tsx
@@ -2,58 +2,9 @@ import React, { PureComponent } from 'react'
import cx from 'classnames'
// import Button from '../atoms/Button'
import { User } from '../../context/User'
+import Popover from 'react-popover'
import styles from './AccountStatus.module.scss'
-interface AccountStatusProps {
- className?: string
-}
-
-interface AccountStatusState {
- popoverOpen: boolean
-}
-
-export default class AccountStatus extends PureComponent<
- AccountStatusProps,
- AccountStatusState
-> {
- public state = {
- popoverOpen: false
- }
-
- private togglePopover() {
- this.setState(prevState => ({
- popoverOpen: !prevState.popoverOpen
- }))
- }
-
- public render() {
- return (
- this.togglePopover()}
- onMouseLeave={() => this.togglePopover()}
- onTouchStart={() => this.togglePopover()}
- >
-
- {states =>
- !states.isWeb3 ? (
-
- ) : !states.isLogged ? (
-
- ) : states.isLogged ? (
-
- ) : null
- }
-
-
- {this.state.popoverOpen &&
}
-
@@ -83,3 +34,68 @@ const AccountPopover = () => (
*/}
)
+
+interface AccountStatusProps {
+ className?: string
+}
+
+interface AccountStatusState {
+ popoverIsOpen: boolean
+ preferPlace?: string
+ place?: string
+ enterExitTransitionDurationMs?: number
+}
+
+export default class AccountStatus extends PureComponent<
+ AccountStatusProps,
+ AccountStatusState
+> {
+ public state = {
+ popoverIsOpen: false
+ }
+
+ private togglePopover(toState: boolean) {
+ const popoverIsOpen =
+ typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen
+ this.setState({ popoverIsOpen })
+ }
+
+ public AccountIndicator = () => (
+ this.togglePopover(true)}
+ onMouseOut={() => this.togglePopover(false)}
+ onTouchStart={() => this.togglePopover(true)}
+ >
+
+ {states =>
+ !states.isWeb3 ? (
+
+ ) : !states.isLogged ? (
+
+ ) : states.isLogged ? (
+
+ ) : null
+ }
+
+
+ )
+
+ public render() {
+ const popoverProps = {
+ isOpen: this.state.popoverIsOpen,
+ // preferPlace: this.state.preferPlace,
+ // place: this.state.place,
+ enterExitTransitionDurationMs: 300,
+ tipSize: 0.01,
+ onOuterAction: () => this.togglePopover(false),
+ body:
+ }
+
+ return (
+
+
+
+ )
+ }
+}