diff --git a/package-lock.json b/package-lock.json index 78fa561..0766274 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1534,16 +1534,6 @@ "@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", @@ -1559,12 +1549,6 @@ "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", @@ -2418,8 +2402,7 @@ "asap": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", - "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=", - "dev": true + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" }, "asn1": { "version": "0.2.4", @@ -5064,6 +5047,15 @@ "sha.js": "^2.4.8" } }, + "create-react-context": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz", + "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==", + "requires": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -6290,6 +6282,14 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "~0.4.13" + } + }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -7490,6 +7490,35 @@ "bser": "^2.0.0" } }, + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "requires": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + }, + "dependencies": { + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } + }, "fd-slicer": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz", @@ -8998,6 +9027,11 @@ "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=", "dev": true }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz", @@ -10492,6 +10526,26 @@ "isarray": "1.0.0" } }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + }, + "dependencies": { + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + } + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -13420,6 +13474,11 @@ "ts-pnp": "^1.0.0" } }, + "popper.js": { + "version": "1.14.7", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz", + "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==" + }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", @@ -17249,6 +17308,19 @@ "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.8.4.tgz", "integrity": "sha512-QhI19OcfhiAn60/O6bMR0w8ApXrPFCjv6+eV0I/P9/AswzjgEAx4L7VxMBCpS/jrythLa12Q9v88req+ys4YpA==" }, + "react-popper": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz", + "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==", + "requires": { + "@babel/runtime": "^7.1.2", + "create-react-context": "<=0.2.2", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.7", + "warning": "^4.0.2" + } + }, "react-router": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", @@ -17556,15 +17628,6 @@ "shallowequal": "^1.0.1" } }, - "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", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.6.0.tgz", @@ -21072,11 +21135,6 @@ } } }, - "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", @@ -21373,6 +21431,11 @@ "mime-types": "~2.1.18" } }, + "typed-styles": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", @@ -21393,6 +21456,11 @@ "integrity": "sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==", "dev": true }, + "ua-parser-js": { + "version": "0.7.19", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz", + "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==" + }, "uglify-js": { "version": "3.4.9", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", @@ -23414,8 +23482,7 @@ "whatwg-fetch": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz", - "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==", - "dev": true + "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==" }, "whatwg-mimetype": { "version": "2.3.0", diff --git a/package.json b/package.json index 6b5d6b3..ac4111a 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,8 @@ "react-dom": "^16.8.3", "react-helmet": "^5.2.0", "react-moment": "^0.8.4", + "react-popper": "^1.3.3", "react-router-dom": "^4.3.1", - "react-tether": "^2.0.0", "react-transition-group": "^2.6.0", "slugify": "^1.3.4", "web3": "^1.0.0-beta.46" @@ -41,7 +41,6 @@ "@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.tsx b/src/components/molecules/AccountStatus/Indicator.tsx index 23082f6..8deeacb 100644 --- a/src/components/molecules/AccountStatus/Indicator.tsx +++ b/src/components/molecules/AccountStatus/Indicator.tsx @@ -10,7 +10,7 @@ const Indicator = ({ }: { className?: string togglePopover: () => void - forwardedRef: any + forwardedRef: (ref: HTMLElement | null) => void }) => (
( -
+const Popover = ({ + forwardedRef, + style, + arrowProps +}: { + forwardedRef: (ref: HTMLElement | null) => void + style: React.CSSProperties + arrowProps: { + ref: (ref: HTMLElement | null) => void + style: React.CSSProperties + } +}) => ( +
30 ETH @@ -39,6 +49,7 @@ const Popover = ({ forwardedRef }: { forwardedRef: any }) => ( {states => states.network && states.network} */}
+
) diff --git a/src/components/molecules/AccountStatus/index.tsx b/src/components/molecules/AccountStatus/index.tsx index b88bd24..248d087 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 TetherComponent from 'react-tether' +import { Manager, Reference, Popper } from 'react-popper' import AccountPopover from './Popover' import AccountIndicator from './Indicator' @@ -27,30 +27,29 @@ export default class AccountStatus extends PureComponent< public render() { return ( - ( - this.togglePopover()} - className={this.props.className} - forwardedRef={ref} - /> + + + {({ ref }) => ( + this.togglePopover()} + className={this.props.className} + forwardedRef={ref} + /> + )} + + {this.state.isPopoverOpen && ( + + {({ ref, style, placement, arrowProps }) => ( + + )} + )} - renderElement={ref => - this.state.isPopoverOpen && ( - - ) - } - /> + ) } }