diff --git a/package-lock.json b/package-lock.json index 2b3ea37..78fa561 100644 --- a/package-lock.json +++ b/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": { - "version": "3.4.2", - "resolved": "https://registry.npmjs.org/react-tiny-popover/-/react-tiny-popover-3.4.2.tgz", - "integrity": "sha512-3lH+GHvyJbjHNg14B7Md8bpUapQ5W3s8IdBFguODjrgEV1+LWrKOmVrpe8xhIQDOkgkiDfLwMVgsI7BQM9Udpg==" + "react-tether": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/react-tether/-/react-tether-2.0.0.tgz", + "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", diff --git a/package.json b/package.json index 861b11c..6b5d6b3 100644 --- a/package.json +++ b/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", diff --git a/src/components/molecules/AccountStatus/Indicator.module.scss b/src/components/molecules/AccountStatus/Indicator.module.scss index e1e9ef9..7d82117 100644 --- a/src/components/molecules/AccountStatus/Indicator.module.scss +++ b/src/components/molecules/AccountStatus/Indicator.module.scss @@ -3,7 +3,7 @@ .status { display: inline-block; position: relative; - cursor: pointer; + cursor: help; } // default: red square diff --git a/src/components/molecules/AccountStatus/Indicator.tsx b/src/components/molecules/AccountStatus/Indicator.tsx index 52c2d86..23082f6 100644 --- a/src/components/molecules/AccountStatus/Indicator.tsx +++ b/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 }) => (
{states => diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx index ce46c1f..1ddf691 100644 --- a/src/components/molecules/AccountStatus/Popover.tsx +++ b/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 }) => ( +
30 ETH @@ -22,10 +18,6 @@ const Popover = ({ togglePopover }: { togglePopover: () => void }) => (
-
- Request Ether -
-
{states => diff --git a/src/components/molecules/AccountStatus/index.tsx b/src/components/molecules/AccountStatus/index.tsx index e166018..b88bd24 100644 --- a/src/components/molecules/AccountStatus/index.tsx +++ b/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 ( - ( - - this.togglePopover()} - /> - + ( + this.togglePopover()} + className={this.props.className} + forwardedRef={ref} + /> )} - > - this.togglePopover()} - className={this.props.className} - /> - + renderElement={ref => + this.state.isPopoverOpen && ( + + ) + } + /> ) } }