From d35a1d56e0d72efe9b92cd6dffa7e6d0e0c0b5ec Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 23 Feb 2019 19:34:28 +0100 Subject: [PATCH 01/27] port over account popup from pleuston --- src/components/Header.tsx | 2 + src/components/Web3message.module.scss | 30 ----- src/components/Web3message.tsx | 37 +++--- .../molecules/AccountStatus.module.scss | 106 ++++++++++++++++++ src/components/molecules/AccountStatus.tsx | 88 +++++++++++++++ 5 files changed, 213 insertions(+), 50 deletions(-) create mode 100644 src/components/molecules/AccountStatus.module.scss create mode 100644 src/components/molecules/AccountStatus.tsx diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 79afc75..543469f 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,6 +1,7 @@ import React from 'react' import { NavLink } from 'react-router-dom' import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg' +import AccountStatus from './molecules/AccountStatus' import styles from './Header.module.scss' import menu from '../data/menu.json' @@ -27,6 +28,7 @@ const Header = () => ( ))} + ) diff --git a/src/components/Web3message.module.scss b/src/components/Web3message.module.scss index 759ebb8..5f78d8c 100644 --- a/src/components/Web3message.module.scss +++ b/src/components/Web3message.module.scss @@ -11,36 +11,6 @@ padding-bottom: $spacer / 2; } -// default: red square -.indicator { - display: inline-block; - width: $font-size-small; - height: $font-size-small; - background: $red; - margin-right: $spacer / 8; - position: absolute; - left: 0; - top: ($spacer / 2) + .3rem; -} - -// yellow triangle -.indicatorCloseEnough { - composes: indicator; - background: none; - width: 0; - height: 0; - border-left: $font-size-small / 1.75 solid transparent; - border-right: $font-size-small / 1.75 solid transparent; - border-bottom: $font-size-small solid $yellow; -} - -// green circle -.indicatorActive { - composes: indicator; - border-radius: 50%; - background: $green; -} - .account { display: inline-block; margin-left: $spacer / 8; diff --git a/src/components/Web3message.tsx b/src/components/Web3message.tsx index b0996aa..919da5f 100644 --- a/src/components/Web3message.tsx +++ b/src/components/Web3message.tsx @@ -1,33 +1,31 @@ import React, { PureComponent } from 'react' import Button from '../components/atoms/Button' +import AccountStatus from './molecules/AccountStatus' import styles from './Web3message.module.scss' import { User } from '../context/User' export default class Web3message extends PureComponent { public render() { return ( - <> - - {states => - !states.isWeb3 - ? this.noWeb3() - : !states.isLogged - ? this.unlockAccount(states) - : states.isLogged - ? this.haveAccount(states.account) - : null - } - - + + {states => + !states.isWeb3 + ? this.noWeb3() + : !states.isLogged + ? this.unlockAccount(states) + : states.isLogged + ? this.haveAccount(states.account) + : null + } + ) } public noWeb3() { return (
- No Web3 Browser. For - publishing an asset you need to use a Web3-capable plugin or - browser, like{' '} + No Web3 Browser. For publishing an asset you + need to use a Web3-capable plugin or browser, like{' '} MetaMask @@ -39,8 +37,8 @@ export default class Web3message extends PureComponent { public unlockAccount(states: any) { return (
- Account locked. - For publishing an asset you need to unlock your Web3 account. + Account locked. For publishing an asset you + need to unlock your Web3 account. @@ -51,8 +49,7 @@ export default class Web3message extends PureComponent { public haveAccount(account: string) { return (
- Connected with - account + Connected with account {`${account && account.substring(0, 20)}...`} diff --git a/src/components/molecules/AccountStatus.module.scss b/src/components/molecules/AccountStatus.module.scss new file mode 100644 index 0000000..ccbdc9b --- /dev/null +++ b/src/components/molecules/AccountStatus.module.scss @@ -0,0 +1,106 @@ +@import '../../styles/variables'; + +.status { + display: inline-block; + position: relative; +} + +// default: red square +.statusIndicator { + width: $font-size-small; + height: $font-size-small; + display: block; + background: $red; + margin-bottom: -.1rem; +} + +// yellow triangle +.statusIndicatorCloseEnough { + composes: statusIndicator; + background: none; + width: 0; + height: 0; + border-left: $font-size-small / 1.7 solid transparent; + border-right: $font-size-small / 1.7 solid transparent; + border-bottom: $font-size-small solid $yellow; +} + +// green circle +.statusIndicatorActive { + composes: statusIndicator; + border-radius: 50%; + background: $green; +} + +$popoverWidth: 18rem; + +.popover { + position: absolute; + top: 1.5rem; + right: -($spacer / 3); + width: $popoverWidth; + padding: $spacer / 2; + background: $brand-black; + border-radius: .1rem; + border: .1rem solid $brand-grey-light; + box-shadow: 0 6px 16px 0 rgba($brand-black, .3); + 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; + } +} + +.popoverInfoline { + border-bottom: .05rem solid $brand-grey; + padding: $spacer / 3 0; + display: flex; + flex-wrap: wrap; + align-items: center; + + &:first-child { + padding-top: 0; + } + + &:last-child { + padding-bottom: 0; + border-bottom: 0; + } + + button { + font-size: $font-size-small; + } +} + +.accountName { + composes: popoverInfoline; + flex-wrap: nowrap; + + // blockies avatar + canvas { + display: inline-block; + border-radius: 50%; + overflow: hidden; + flex: 0 0 20px; + margin-right: $spacer / 4; + } +} + +.address { + width: 15rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/src/components/molecules/AccountStatus.tsx b/src/components/molecules/AccountStatus.tsx new file mode 100644 index 0000000..09d9356 --- /dev/null +++ b/src/components/molecules/AccountStatus.tsx @@ -0,0 +1,88 @@ +import React, { PureComponent } from 'react' +// import Blockies from 'react-blockies' +import Button from '../atoms/Button' +import { User } from '../../context/User' +import styles from './AccountStatus.module.scss' + +interface AccountStatusState { + popoverOpen: boolean +} + +export default class AccountStatus extends PureComponent< + {}, + 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 && } +
+ ) + } +} + +const AccountPopover = () => ( +
+
+ + {states => + states.account ? ( + <> + {/* */} + + {states.account} + + + ) : ( + 'No account selected' + ) + } + +
+
+ Network:  {''} +
+
+ +
+
+) From 3a75a00668a4e5fc446a7b33f9c2842f6585a69c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 26 Feb 2019 08:38:58 -0300 Subject: [PATCH 02/27] add faucet function * use function implemented in #24 --- src/components/molecules/AccountStatus.tsx | 27 ++++++++-------------- 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/src/components/molecules/AccountStatus.tsx b/src/components/molecules/AccountStatus.tsx index 09d9356..b2fac9a 100644 --- a/src/components/molecules/AccountStatus.tsx +++ b/src/components/molecules/AccountStatus.tsx @@ -56,20 +56,9 @@ const AccountPopover = () => ( {states => states.account ? ( - <> - {/* */} - - {states.account} - - + + {states.account} + ) : ( 'No account selected' ) @@ -80,9 +69,13 @@ const AccountPopover = () => ( Network:  {''}
- + + {states => ( + + )} +
) From 855cdc00af0ac348d45efbb629e58d1ae44ecfdf Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 26 Feb 2019 09:35:30 -0300 Subject: [PATCH 03/27] allow adding styles to account status --- src/components/molecules/AccountStatus.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/molecules/AccountStatus.tsx b/src/components/molecules/AccountStatus.tsx index b2fac9a..9450745 100644 --- a/src/components/molecules/AccountStatus.tsx +++ b/src/components/molecules/AccountStatus.tsx @@ -1,15 +1,19 @@ import React, { PureComponent } from 'react' -// import Blockies from 'react-blockies' -import Button from '../atoms/Button' +import cx from 'classnames' +// import Button from '../atoms/Button' import { User } from '../../context/User' import styles from './AccountStatus.module.scss' +interface AccountStatusProps { + className?: string +} + interface AccountStatusState { popoverOpen: boolean } export default class AccountStatus extends PureComponent< - {}, + AccountStatusProps, AccountStatusState > { public state = { @@ -25,7 +29,7 @@ export default class AccountStatus extends PureComponent< public render() { return (
this.togglePopover()} onMouseLeave={() => this.togglePopover()} onTouchStart={() => this.togglePopover()} @@ -68,7 +72,7 @@ const AccountPopover = () => (
Network:  {''}
-
+ {/*
{states => ( )} -
+
*/}
) From 6b5e5e3a444f6bf72f52b03ea6a44cc62dd1b5e1 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 26 Feb 2019 09:36:45 -0300 Subject: [PATCH 04/27] style account status in header --- src/components/Header.module.scss | 5 +++++ src/components/Header.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Header.module.scss b/src/components/Header.module.scss index 4538491..d77aaf4 100644 --- a/src/components/Header.module.scss +++ b/src/components/Header.module.scss @@ -94,3 +94,8 @@ color: $brand-pink; pointer-events: none; } + +.accountStatus { + margin-left: $spacer; + margin-bottom: .3rem; +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 543469f..225d5d3 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -28,7 +28,7 @@ const Header = () => ( ))} - +
) From 5aff55545523ff7227ee6c970949bc4675bb3556 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 26 Feb 2019 10:26:40 -0300 Subject: [PATCH 05/27] use react-popover for smart placement of account popover --- package-lock.json | 53 ++++++++ package.json | 2 + .../molecules/AccountStatus.module.scss | 34 ++--- src/components/molecules/AccountStatus.tsx | 116 ++++++++++-------- 4 files changed, 138 insertions(+), 67 deletions(-) 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 && } -
- ) - } -} - const AccountPopover = () => (
@@ -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 ( + + + + ) + } +} From a38bb20bfc7999dfeae264439479f1728c5ee281 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 26 Feb 2019 10:45:42 -0300 Subject: [PATCH 06/27] fix indicator placement in web3 message --- src/components/Web3message.module.scss | 7 ++++++- src/components/Web3message.tsx | 12 +++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/Web3message.module.scss b/src/components/Web3message.module.scss index 5f78d8c..f24ef53 100644 --- a/src/components/Web3message.module.scss +++ b/src/components/Web3message.module.scss @@ -3,7 +3,7 @@ .message { margin-bottom: $spacer; color: $brand-grey; - padding-left: 1.5rem; + padding-left: 2rem; position: relative; border-bottom: .1rem solid $brand-grey-lighter; border-top: .1rem solid $brand-grey-lighter; @@ -16,3 +16,8 @@ margin-left: $spacer / 8; background: none; } + +.status { + margin-left: -($spacer); + margin-right: $spacer / 3; +} diff --git a/src/components/Web3message.tsx b/src/components/Web3message.tsx index 919da5f..ee0ed34 100644 --- a/src/components/Web3message.tsx +++ b/src/components/Web3message.tsx @@ -24,8 +24,9 @@ export default class Web3message extends PureComponent { public noWeb3() { return (
- No Web3 Browser. For publishing an asset you - need to use a Web3-capable plugin or browser, like{' '} + No Web3 Browser. For + publishing an asset you need to use a Web3-capable plugin or + browser, like{' '} MetaMask @@ -37,8 +38,8 @@ export default class Web3message extends PureComponent { public unlockAccount(states: any) { return (
- Account locked. For publishing an asset you - need to unlock your Web3 account. + Account locked. For + publishing an asset you need to unlock your Web3 account. @@ -49,7 +50,8 @@ export default class Web3message extends PureComponent { public haveAccount(account: string) { return (
- Connected with account + Connected with + account {`${account && account.substring(0, 20)}...`} From b71649b0d076d194d3838829340a83db932acd4a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 26 Feb 2019 10:56:34 -0300 Subject: [PATCH 07/27] activate faucet UI in popover --- .../molecules/AccountStatus.module.scss | 1 + src/components/molecules/AccountStatus.tsx | 18 ++++++------------ 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/components/molecules/AccountStatus.module.scss b/src/components/molecules/AccountStatus.module.scss index 377ae34..4c02a71 100644 --- a/src/components/molecules/AccountStatus.module.scss +++ b/src/components/molecules/AccountStatus.module.scss @@ -3,6 +3,7 @@ .status { display: inline-block; position: relative; + cursor: pointer; } // default: red square diff --git a/src/components/molecules/AccountStatus.tsx b/src/components/molecules/AccountStatus.tsx index 23e2939..a24e7dc 100644 --- a/src/components/molecules/AccountStatus.tsx +++ b/src/components/molecules/AccountStatus.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' import cx from 'classnames' -// import Button from '../atoms/Button' +import Button from '../atoms/Button' import { User } from '../../context/User' import Popover from 'react-popover' import styles from './AccountStatus.module.scss' @@ -15,7 +15,7 @@ const AccountPopover = () => ( {states.account} ) : ( - 'No account selected' + No account selected ) } @@ -23,15 +23,15 @@ const AccountPopover = () => (
Network:  {''}
- {/*
+
{states => ( - )} -
*/} +
) @@ -41,9 +41,6 @@ interface AccountStatusProps { interface AccountStatusState { popoverIsOpen: boolean - preferPlace?: string - place?: string - enterExitTransitionDurationMs?: number } export default class AccountStatus extends PureComponent< @@ -63,9 +60,8 @@ export default class AccountStatus extends PureComponent< public AccountIndicator = () => (
this.togglePopover(true)} onMouseOver={() => this.togglePopover(true)} - onMouseOut={() => this.togglePopover(false)} - onTouchStart={() => this.togglePopover(true)} > {states => @@ -84,8 +80,6 @@ export default class AccountStatus extends PureComponent< 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), From 3d7746c46c3a9bd9544a5f270269eecf5efda876 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 26 Feb 2019 11:22:12 -0300 Subject: [PATCH 08/27] component splitup, prepare loading state for faucet action --- src/components/Header.tsx | 2 +- src/components/Web3message.tsx | 2 +- src/components/molecules/AccountStatus.tsx | 95 ------------------- .../molecules/AccountStatus/Faucet.tsx | 49 ++++++++++ .../AccountStatus/Indicator.module.scss | 34 +++++++ .../molecules/AccountStatus/Indicator.tsx | 32 +++++++ .../Popover.module.scss} | 35 +------ .../molecules/AccountStatus/Popover.tsx | 30 ++++++ .../molecules/AccountStatus/index.tsx | 46 +++++++++ 9 files changed, 194 insertions(+), 131 deletions(-) delete mode 100644 src/components/molecules/AccountStatus.tsx create mode 100644 src/components/molecules/AccountStatus/Faucet.tsx create mode 100644 src/components/molecules/AccountStatus/Indicator.module.scss create mode 100644 src/components/molecules/AccountStatus/Indicator.tsx rename src/components/molecules/{AccountStatus.module.scss => AccountStatus/Popover.module.scss} (67%) create mode 100644 src/components/molecules/AccountStatus/Popover.tsx create mode 100644 src/components/molecules/AccountStatus/index.tsx diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 225d5d3..1f73dce 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,7 +1,7 @@ import React from 'react' import { NavLink } from 'react-router-dom' import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg' -import AccountStatus from './molecules/AccountStatus' +import AccountStatus from './molecules/AccountStatus/' import styles from './Header.module.scss' import menu from '../data/menu.json' diff --git a/src/components/Web3message.tsx b/src/components/Web3message.tsx index ee0ed34..05aa3ad 100644 --- a/src/components/Web3message.tsx +++ b/src/components/Web3message.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' import Button from '../components/atoms/Button' -import AccountStatus from './molecules/AccountStatus' +import AccountStatus from './molecules/AccountStatus/' import styles from './Web3message.module.scss' import { User } from '../context/User' diff --git a/src/components/molecules/AccountStatus.tsx b/src/components/molecules/AccountStatus.tsx deleted file mode 100644 index a24e7dc..0000000 --- a/src/components/molecules/AccountStatus.tsx +++ /dev/null @@ -1,95 +0,0 @@ -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' - -const AccountPopover = () => ( -
-
- - {states => - states.account ? ( - - {states.account} - - ) : ( - No account selected - ) - } - -
-
- Network:  {''} -
-
- - {states => ( - - )} - -
-
-) - -interface AccountStatusProps { - className?: string -} - -interface AccountStatusState { - popoverIsOpen: boolean -} - -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)} - onMouseOver={() => this.togglePopover(true)} - > - - {states => - !states.isWeb3 ? ( - - ) : !states.isLogged ? ( - - ) : states.isLogged ? ( - - ) : null - } - -
- ) - - public render() { - const popoverProps = { - isOpen: this.state.popoverIsOpen, - enterExitTransitionDurationMs: 300, - tipSize: 0.01, - onOuterAction: () => this.togglePopover(false), - body: - } - - return ( - - - - ) - } -} diff --git a/src/components/molecules/AccountStatus/Faucet.tsx b/src/components/molecules/AccountStatus/Faucet.tsx new file mode 100644 index 0000000..4febe8e --- /dev/null +++ b/src/components/molecules/AccountStatus/Faucet.tsx @@ -0,0 +1,49 @@ +import React, { PureComponent } from 'react' +import Button from '../../atoms/Button' +import { User } from '../../../context/User' + +interface FaucetState { + isLoading: boolean + error?: string +} + +export default class Faucet extends PureComponent<{}, FaucetState> { + public state = { + isLoading: false, + error: undefined + } + + private getTokens = async (requestFromFaucet: any) => { + this.setState({ isLoading: true }) + + try { + await requestFromFaucet() + this.setState({ isLoading: false }) + } catch (error) { + this.setState({ isLoading: false, error }) + } + } + + public render() { + return ( + + {states => + this.state.isLoading ? ( + 'Getting tokens...' + ) : this.state.error ? ( + this.state.error + ) : ( + + ) + } + + ) + } +} diff --git a/src/components/molecules/AccountStatus/Indicator.module.scss b/src/components/molecules/AccountStatus/Indicator.module.scss new file mode 100644 index 0000000..c7a3c60 --- /dev/null +++ b/src/components/molecules/AccountStatus/Indicator.module.scss @@ -0,0 +1,34 @@ +@import '../../../styles/variables'; + +.status { + display: inline-block; + position: relative; + cursor: pointer; +} + +// default: red square +.statusIndicator { + width: $font-size-small; + height: $font-size-small; + display: block; + background: $red; + margin-bottom: -.1rem; +} + +// yellow triangle +.statusIndicatorCloseEnough { + composes: statusIndicator; + background: none; + width: 0; + height: 0; + border-left: $font-size-small / 1.7 solid transparent; + border-right: $font-size-small / 1.7 solid transparent; + border-bottom: $font-size-small solid $yellow; +} + +// green circle +.statusIndicatorActive { + composes: statusIndicator; + border-radius: 50%; + background: $green; +} diff --git a/src/components/molecules/AccountStatus/Indicator.tsx b/src/components/molecules/AccountStatus/Indicator.tsx new file mode 100644 index 0000000..0a75427 --- /dev/null +++ b/src/components/molecules/AccountStatus/Indicator.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import cx from 'classnames' +import { User } from '../../../context/User' +import styles from './Indicator.module.scss' + +const Indicator = ({ + className, + showPopover +}: { + className?: string + showPopover: any +}) => ( +
+ + {states => + !states.isWeb3 ? ( + + ) : !states.isLogged ? ( + + ) : states.isLogged ? ( + + ) : null + } + +
+) + +export default Indicator diff --git a/src/components/molecules/AccountStatus.module.scss b/src/components/molecules/AccountStatus/Popover.module.scss similarity index 67% rename from src/components/molecules/AccountStatus.module.scss rename to src/components/molecules/AccountStatus/Popover.module.scss index 4c02a71..f776482 100644 --- a/src/components/molecules/AccountStatus.module.scss +++ b/src/components/molecules/AccountStatus/Popover.module.scss @@ -1,37 +1,4 @@ -@import '../../styles/variables'; - -.status { - display: inline-block; - position: relative; - cursor: pointer; -} - -// default: red square -.statusIndicator { - width: $font-size-small; - height: $font-size-small; - display: block; - background: $red; - margin-bottom: -.1rem; -} - -// yellow triangle -.statusIndicatorCloseEnough { - composes: statusIndicator; - background: none; - width: 0; - height: 0; - border-left: $font-size-small / 1.7 solid transparent; - border-right: $font-size-small / 1.7 solid transparent; - border-bottom: $font-size-small solid $yellow; -} - -// green circle -.statusIndicatorActive { - composes: statusIndicator; - border-radius: 50%; - background: $green; -} +@import '../../../styles/variables'; $popoverWidth: 18rem; diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx new file mode 100644 index 0000000..439a113 --- /dev/null +++ b/src/components/molecules/AccountStatus/Popover.tsx @@ -0,0 +1,30 @@ +import React from 'react' +import { User } from '../../../context/User' +import Faucet from './Faucet' +import styles from './Popover.module.scss' + +const Popover = () => ( +
+
+ + {states => + states.account ? ( + + {states.account} + + ) : ( + No account selected + ) + } + +
+
+ Network:  {''} +
+
+ +
+
+) + +export default Popover diff --git a/src/components/molecules/AccountStatus/index.tsx b/src/components/molecules/AccountStatus/index.tsx new file mode 100644 index 0000000..446e265 --- /dev/null +++ b/src/components/molecules/AccountStatus/index.tsx @@ -0,0 +1,46 @@ +import React, { PureComponent } from 'react' +import Popover from 'react-popover' +import AccountPopover from './Popover' +import AccountIndicator from './Indicator' + +interface AccountStatusProps { + className?: string +} + +interface AccountStatusState { + popoverIsOpen: boolean +} + +export default class AccountStatus extends PureComponent< + AccountStatusProps, + AccountStatusState +> { + public state = { + popoverIsOpen: false + } + + public togglePopover(toState?: boolean) { + const popoverIsOpen = + typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen + this.setState({ popoverIsOpen }) + } + + public render() { + const popoverProps = { + isOpen: this.state.popoverIsOpen, + enterExitTransitionDurationMs: 300, + tipSize: 0.01, + onOuterAction: () => this.togglePopover(false), + body: + } + + return ( + + this.togglePopover(true)} + className={this.props.className} + /> + + ) + } +} From a50a700c92abef743741558a2c378f4c2f4eb451 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 26 Feb 2019 12:44:23 -0300 Subject: [PATCH 09/27] prepare balances, use fake data for now --- .../AccountStatus/Popover.module.scss | 11 +++++++++++ .../molecules/AccountStatus/Popover.tsx | 18 +++++++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/components/molecules/AccountStatus/Popover.module.scss b/src/components/molecules/AccountStatus/Popover.module.scss index f776482..a7794cf 100644 --- a/src/components/molecules/AccountStatus/Popover.module.scss +++ b/src/components/molecules/AccountStatus/Popover.module.scss @@ -72,3 +72,14 @@ $popoverWidth: 18rem; overflow: hidden; text-overflow: ellipsis; } + +.balance { + font-size: $font-size-small; + color: $brand-grey-light; + margin-left: $spacer / 2; + white-space: nowrap; + + &:first-child { + margin-left: 0; + } +} diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx index 439a113..0d85c17 100644 --- a/src/components/molecules/AccountStatus/Popover.tsx +++ b/src/components/molecules/AccountStatus/Popover.tsx @@ -19,7 +19,23 @@ const Popover = () => (
- Network:  {''} + Network:   Fake Network Name + {/* Network: + + {states => states.network && {states.network}} + */} +
+
+ + 30 ETH + + {/* + {(eth / 1e18).toFixed(3).slice(0, -1)} ETH + */} + + {/* {ocn} OCEAN */} + 2474290 OCEAN +
From db90d7cb5aef57e6af0ce969b029bc07d7d8251d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 26 Feb 2019 13:32:47 -0300 Subject: [PATCH 10/27] popover fixes --- .../molecules/AccountStatus/Indicator.tsx | 6 ++++-- src/components/molecules/AccountStatus/Popover.tsx | 14 ++++++++++++-- src/components/molecules/AccountStatus/index.tsx | 8 +++++++- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/molecules/AccountStatus/Indicator.tsx b/src/components/molecules/AccountStatus/Indicator.tsx index 0a75427..66d014f 100644 --- a/src/components/molecules/AccountStatus/Indicator.tsx +++ b/src/components/molecules/AccountStatus/Indicator.tsx @@ -5,15 +5,17 @@ import styles from './Indicator.module.scss' const Indicator = ({ className, - showPopover + showPopover, + hidePopover }: { className?: string showPopover: any + hidePopover: any }) => (
{states => diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx index 0d85c17..16fb41b 100644 --- a/src/components/molecules/AccountStatus/Popover.tsx +++ b/src/components/molecules/AccountStatus/Popover.tsx @@ -3,8 +3,18 @@ import { User } from '../../../context/User' import Faucet from './Faucet' import styles from './Popover.module.scss' -const Popover = () => ( -
+const Popover = ({ + showPopover, + hidePopover +}: { + showPopover: any + hidePopover: any +}) => ( +
{states => diff --git a/src/components/molecules/AccountStatus/index.tsx b/src/components/molecules/AccountStatus/index.tsx index 446e265..245b611 100644 --- a/src/components/molecules/AccountStatus/index.tsx +++ b/src/components/molecules/AccountStatus/index.tsx @@ -31,13 +31,19 @@ export default class AccountStatus extends PureComponent< enterExitTransitionDurationMs: 300, tipSize: 0.01, onOuterAction: () => this.togglePopover(false), - body: + body: ( + this.togglePopover(true)} + hidePopover={() => this.togglePopover(false)} + /> + ) } return ( this.togglePopover(true)} + hidePopover={() => this.togglePopover(false)} className={this.props.className} /> From d58ed5dc296788e3c436ffddea892ae2e09897ac Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 26 Feb 2019 20:26:53 -0300 Subject: [PATCH 11/27] switch popover library --- package-lock.json | 50 ++---------------- package.json | 2 +- src/components/Header.module.scss | 5 +- .../AccountStatus/Indicator.module.scss | 1 - .../molecules/AccountStatus/Indicator.tsx | 10 ++-- .../AccountStatus/Popover.module.scss | 19 ------- .../molecules/AccountStatus/Popover.tsx | 12 ++--- .../molecules/AccountStatus/index.tsx | 51 ++++++++++--------- 8 files changed, 42 insertions(+), 108 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5ecac47..0e114e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4912,14 +4912,6 @@ "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", @@ -9727,11 +9719,6 @@ "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", @@ -11232,11 +11219,6 @@ "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", @@ -11261,14 +11243,6 @@ "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", @@ -11311,14 +11285,6 @@ "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", @@ -16654,17 +16620,6 @@ "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", @@ -17032,6 +16987,11 @@ "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-transition-group": { "version": "2.5.3", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.3.tgz", diff --git a/package.json b/package.json index 07a9728..63d3a97 100644 --- a/package.json +++ b/package.json @@ -30,8 +30,8 @@ "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-tiny-popover": "^3.4.2", "react-transition-group": "^2.5.3", "slugify": "^1.3.4", "web3": "^1.0.0-beta.43" diff --git a/src/components/Header.module.scss b/src/components/Header.module.scss index d77aaf4..1a88648 100644 --- a/src/components/Header.module.scss +++ b/src/components/Header.module.scss @@ -1,9 +1,6 @@ @import '../styles/variables'; .header { - // background: $brand-black - // url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center -6rem; - // background-size: cover; width: 100%; padding: $spacer / 2 0; } @@ -97,5 +94,5 @@ .accountStatus { margin-left: $spacer; - margin-bottom: .3rem; + margin-bottom: .2rem; } diff --git a/src/components/molecules/AccountStatus/Indicator.module.scss b/src/components/molecules/AccountStatus/Indicator.module.scss index c7a3c60..e1e9ef9 100644 --- a/src/components/molecules/AccountStatus/Indicator.module.scss +++ b/src/components/molecules/AccountStatus/Indicator.module.scss @@ -12,7 +12,6 @@ height: $font-size-small; display: block; background: $red; - margin-bottom: -.1rem; } // yellow triangle diff --git a/src/components/molecules/AccountStatus/Indicator.tsx b/src/components/molecules/AccountStatus/Indicator.tsx index 66d014f..aa3c6e0 100644 --- a/src/components/molecules/AccountStatus/Indicator.tsx +++ b/src/components/molecules/AccountStatus/Indicator.tsx @@ -5,17 +5,15 @@ import styles from './Indicator.module.scss' const Indicator = ({ className, - showPopover, - hidePopover + togglePopover }: { className?: string - showPopover: any - hidePopover: any + togglePopover: any }) => (
{states => diff --git a/src/components/molecules/AccountStatus/Popover.module.scss b/src/components/molecules/AccountStatus/Popover.module.scss index a7794cf..2818c7b 100644 --- a/src/components/molecules/AccountStatus/Popover.module.scss +++ b/src/components/molecules/AccountStatus/Popover.module.scss @@ -3,9 +3,6 @@ $popoverWidth: 18rem; .popover { - // position: absolute; - // top: 1.5rem; - // right: -($spacer / 3); width: $popoverWidth; padding: $spacer / 2; background: $brand-black; @@ -14,21 +11,6 @@ $popoverWidth: 18rem; box-shadow: 0 6px 16px 0 rgba($brand-black, .3); 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; - // } } .popoverInfoline { @@ -75,7 +57,6 @@ $popoverWidth: 18rem; .balance { font-size: $font-size-small; - color: $brand-grey-light; margin-left: $spacer / 2; white-space: nowrap; diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx index 16fb41b..51918b5 100644 --- a/src/components/molecules/AccountStatus/Popover.tsx +++ b/src/components/molecules/AccountStatus/Popover.tsx @@ -3,17 +3,11 @@ import { User } from '../../../context/User' import Faucet from './Faucet' import styles from './Popover.module.scss' -const Popover = ({ - showPopover, - hidePopover -}: { - showPopover: any - hidePopover: any -}) => ( +const Popover = ({ togglePopover }: { togglePopover: any }) => (
diff --git a/src/components/molecules/AccountStatus/index.tsx b/src/components/molecules/AccountStatus/index.tsx index 245b611..e166018 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 from 'react-popover' +import Popover, { ArrowContainer } from 'react-tiny-popover' import AccountPopover from './Popover' import AccountIndicator from './Indicator' @@ -8,7 +8,7 @@ interface AccountStatusProps { } interface AccountStatusState { - popoverIsOpen: boolean + isPopoverOpen: boolean } export default class AccountStatus extends PureComponent< @@ -16,34 +16,39 @@ export default class AccountStatus extends PureComponent< AccountStatusState > { public state = { - popoverIsOpen: false + isPopoverOpen: false } - public togglePopover(toState?: boolean) { - const popoverIsOpen = - typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen - this.setState({ popoverIsOpen }) + public togglePopover() { + this.setState(prevState => ({ + isPopoverOpen: !prevState.isPopoverOpen + })) } public render() { - const popoverProps = { - isOpen: this.state.popoverIsOpen, - enterExitTransitionDurationMs: 300, - tipSize: 0.01, - onOuterAction: () => this.togglePopover(false), - body: ( - this.togglePopover(true)} - hidePopover={() => this.togglePopover(false)} - /> - ) - } - return ( - + ( + + this.togglePopover()} + /> + + )} + > this.togglePopover(true)} - hidePopover={() => this.togglePopover(false)} + togglePopover={() => this.togglePopover()} className={this.props.className} /> From c9abfa08907299d7091c5879eff4abf83e520039 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 26 Feb 2019 20:51:29 -0300 Subject: [PATCH 12/27] cleanup --- .../AccountStatus/Popover.module.scss | 18 +----------------- .../molecules/AccountStatus/Popover.tsx | 2 +- .../{ => molecules}/Web3message.module.scss | 2 +- src/components/{ => molecules}/Web3message.tsx | 6 +++--- src/routes/Publish/index.tsx | 2 +- 5 files changed, 7 insertions(+), 23 deletions(-) rename src/components/{ => molecules}/Web3message.module.scss (92%) rename src/components/{ => molecules}/Web3message.tsx (93%) diff --git a/src/components/molecules/AccountStatus/Popover.module.scss b/src/components/molecules/AccountStatus/Popover.module.scss index 2818c7b..944c3a2 100644 --- a/src/components/molecules/AccountStatus/Popover.module.scss +++ b/src/components/molecules/AccountStatus/Popover.module.scss @@ -16,9 +16,6 @@ $popoverWidth: 18rem; .popoverInfoline { border-bottom: .05rem solid $brand-grey; padding: $spacer / 3 0; - display: flex; - flex-wrap: wrap; - align-items: center; &:first-child { padding-top: 0; @@ -34,22 +31,9 @@ $popoverWidth: 18rem; } } -.accountName { - composes: popoverInfoline; - flex-wrap: nowrap; - - // blockies avatar - canvas { - display: inline-block; - border-radius: 50%; - overflow: hidden; - flex: 0 0 20px; - margin-right: $spacer / 4; - } -} - .address { width: 15rem; + display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx index 51918b5..47d51a4 100644 --- a/src/components/molecules/AccountStatus/Popover.tsx +++ b/src/components/molecules/AccountStatus/Popover.tsx @@ -9,7 +9,7 @@ const Popover = ({ togglePopover }: { togglePopover: any }) => ( onMouseOver={togglePopover} onMouseOut={togglePopover} > -
+
{states => states.account ? ( diff --git a/src/components/Web3message.module.scss b/src/components/molecules/Web3message.module.scss similarity index 92% rename from src/components/Web3message.module.scss rename to src/components/molecules/Web3message.module.scss index f24ef53..5ff7574 100644 --- a/src/components/Web3message.module.scss +++ b/src/components/molecules/Web3message.module.scss @@ -1,4 +1,4 @@ -@import '../styles/variables'; +@import '../../styles/variables'; .message { margin-bottom: $spacer; diff --git a/src/components/Web3message.tsx b/src/components/molecules/Web3message.tsx similarity index 93% rename from src/components/Web3message.tsx rename to src/components/molecules/Web3message.tsx index 05aa3ad..9b31253 100644 --- a/src/components/Web3message.tsx +++ b/src/components/molecules/Web3message.tsx @@ -1,8 +1,8 @@ import React, { PureComponent } from 'react' -import Button from '../components/atoms/Button' -import AccountStatus from './molecules/AccountStatus/' +import Button from '../atoms/Button' +import AccountStatus from './AccountStatus/' import styles from './Web3message.module.scss' -import { User } from '../context/User' +import { User } from '../../context/User' export default class Web3message extends PureComponent { public render() { diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index 8e23393..299eb0e 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -8,7 +8,7 @@ import Label from '../../components/atoms/Form/Label' import Row from '../../components/atoms/Form/Row' import { User } from '../../context/User' import AssetModel from '../../models/AssetModel' -import Web3message from '../../components/Web3message' +import Web3message from '../../components/molecules/Web3message' import Files from './Files/' import form from '../../data/form-publish.json' From 825bb7a0eea0a030cbc8515fed49562460c5dced Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 27 Feb 2019 09:42:31 -0300 Subject: [PATCH 13/27] copy, success feedback for faucet action --- .../molecules/AccountStatus/Faucet.tsx | 17 ++++++-- .../molecules/AccountStatus/Popover.tsx | 39 ++++++++++--------- 2 files changed, 35 insertions(+), 21 deletions(-) diff --git a/src/components/molecules/AccountStatus/Faucet.tsx b/src/components/molecules/AccountStatus/Faucet.tsx index 4febe8e..0836c08 100644 --- a/src/components/molecules/AccountStatus/Faucet.tsx +++ b/src/components/molecules/AccountStatus/Faucet.tsx @@ -2,23 +2,32 @@ import React, { PureComponent } from 'react' import Button from '../../atoms/Button' import { User } from '../../../context/User' +interface FaucetProps { + togglePopover: any +} + interface FaucetState { isLoading: boolean + success?: string error?: string } -export default class Faucet extends PureComponent<{}, FaucetState> { +export default class Faucet extends PureComponent { public state = { isLoading: false, + success: undefined, error: undefined } private getTokens = async (requestFromFaucet: any) => { + // prevent popup from closing on click + this.props.togglePopover() + this.setState({ isLoading: true }) try { await requestFromFaucet() - this.setState({ isLoading: false }) + this.setState({ isLoading: false, success: 'Tokens added!' }) } catch (error) { this.setState({ isLoading: false, error }) } @@ -32,6 +41,8 @@ export default class Faucet extends PureComponent<{}, FaucetState> { 'Getting tokens...' ) : this.state.error ? ( this.state.error + ) : this.state.success ? ( + this.state.success ) : ( ) } diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx index 47d51a4..570f4b5 100644 --- a/src/components/molecules/AccountStatus/Popover.tsx +++ b/src/components/molecules/AccountStatus/Popover.tsx @@ -9,6 +9,23 @@ const Popover = ({ togglePopover }: { togglePopover: any }) => ( onMouseOver={togglePopover} onMouseOut={togglePopover} > +
+ + 30 ETH + + {/* + {(eth / 1e18).toFixed(3).slice(0, -1)} ETH + */} + + {/* {ocn} OCEAN */} + 2474290 OCEAN + +
+ +
+ +
+
{states => @@ -22,28 +39,14 @@ const Popover = ({ togglePopover }: { togglePopover: any }) => ( }
+
- Network:   Fake Network Name - {/* Network: + Fake Network Name + {/* - {states => states.network && {states.network}} + {states => states.network && states.network} */}
-
- - 30 ETH - - {/* - {(eth / 1e18).toFixed(3).slice(0, -1)} ETH - */} - - {/* {ocn} OCEAN */} - 2474290 OCEAN - -
-
- -
) From 7781d72aa5b3992623e69b413a027615c0aa0fd6 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 27 Feb 2019 11:39:41 -0300 Subject: [PATCH 14/27] log faucet errors --- src/App.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 20ddff1..67c71c6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import React, { Component } from 'react' import Web3 from 'web3' import { BrowserRouter as Router } from 'react-router-dom' +import { Logger } from '@oceanprotocol/squid' import Header from './components/Header' import Footer from './components/Footer' import Spinner from './components/atoms/Spinner' @@ -62,7 +63,7 @@ class App extends Component<{}, AppState> { } ) } catch (error) { - // show error + Logger.log(error) } } else { // no account found From 76a3c740bbee4c8d246a10a85e6187ee0e75c218 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 27 Feb 2019 14:58:11 -0300 Subject: [PATCH 15/27] change metamask tutorial link --- src/components/molecules/Web3message.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/molecules/Web3message.tsx b/src/components/molecules/Web3message.tsx index 9b31253..94ca7dc 100644 --- a/src/components/molecules/Web3message.tsx +++ b/src/components/molecules/Web3message.tsx @@ -25,12 +25,11 @@ export default class Web3message extends PureComponent { return (
No Web3 Browser. For - publishing an asset you need to use a Web3-capable plugin or - browser, like{' '} - - MetaMask - - . + publishing an asset you need to{' '} + + setup MetaMask + {' '} + or use any other Web3-capable plugin or browser.
) } From 5c2821565e33a6a2317f6c81f38f65ce51525ef2 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 28 Feb 2019 12:20:32 -0300 Subject: [PATCH 16/27] copy --- src/components/molecules/AccountStatus/Faucet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/molecules/AccountStatus/Faucet.tsx b/src/components/molecules/AccountStatus/Faucet.tsx index 0836c08..7b1ea80 100644 --- a/src/components/molecules/AccountStatus/Faucet.tsx +++ b/src/components/molecules/AccountStatus/Faucet.tsx @@ -50,7 +50,7 @@ export default class Faucet extends PureComponent { this.getTokens(states.requestFromFaucet) } > - Request Ether & Ocean + Request Ether ) } From dbd765124a9383111f0cc4f0645952a7df9a83cf Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 28 Feb 2019 13:12:48 -0300 Subject: [PATCH 17/27] put faucet onto its own page --- src/Routes.tsx | 2 + .../molecules/AccountStatus/Faucet.tsx | 60 ----------------- .../molecules/AccountStatus/Indicator.tsx | 2 +- .../molecules/AccountStatus/Popover.tsx | 6 +- src/data/menu.json | 4 ++ src/routes/Faucet.module.scss | 2 + src/routes/Faucet.tsx | 65 +++++++++++++++++++ 7 files changed, 77 insertions(+), 64 deletions(-) delete mode 100644 src/components/molecules/AccountStatus/Faucet.tsx create mode 100644 src/routes/Faucet.module.scss create mode 100644 src/routes/Faucet.tsx diff --git a/src/Routes.tsx b/src/Routes.tsx index 84fef08..4b82bf3 100644 --- a/src/Routes.tsx +++ b/src/Routes.tsx @@ -7,6 +7,7 @@ import Home from './routes/Home' import NotFound from './routes/NotFound' import Publish from './routes/Publish/' import Search from './routes/Search' +import Faucet from './routes/Faucet' import Styleguide from './routes/Styleguide' const Routes = () => ( @@ -17,6 +18,7 @@ const Routes = () => ( + ) diff --git a/src/components/molecules/AccountStatus/Faucet.tsx b/src/components/molecules/AccountStatus/Faucet.tsx deleted file mode 100644 index 7b1ea80..0000000 --- a/src/components/molecules/AccountStatus/Faucet.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React, { PureComponent } from 'react' -import Button from '../../atoms/Button' -import { User } from '../../../context/User' - -interface FaucetProps { - togglePopover: any -} - -interface FaucetState { - isLoading: boolean - success?: string - error?: string -} - -export default class Faucet extends PureComponent { - public state = { - isLoading: false, - success: undefined, - error: undefined - } - - private getTokens = async (requestFromFaucet: any) => { - // prevent popup from closing on click - this.props.togglePopover() - - this.setState({ isLoading: true }) - - try { - await requestFromFaucet() - this.setState({ isLoading: false, success: 'Tokens added!' }) - } catch (error) { - this.setState({ isLoading: false, error }) - } - } - - public render() { - return ( - - {states => - this.state.isLoading ? ( - 'Getting tokens...' - ) : this.state.error ? ( - this.state.error - ) : this.state.success ? ( - this.state.success - ) : ( - - ) - } - - ) - } -} diff --git a/src/components/molecules/AccountStatus/Indicator.tsx b/src/components/molecules/AccountStatus/Indicator.tsx index aa3c6e0..52c2d86 100644 --- a/src/components/molecules/AccountStatus/Indicator.tsx +++ b/src/components/molecules/AccountStatus/Indicator.tsx @@ -8,7 +8,7 @@ const Indicator = ({ togglePopover }: { className?: string - togglePopover: any + togglePopover: () => void }) => (
( +const Popover = ({ togglePopover }: { togglePopover: () => void }) => (
(
- + Request Ether
diff --git a/src/data/menu.json b/src/data/menu.json index 5dc0a19..b48c27b 100644 --- a/src/data/menu.json +++ b/src/data/menu.json @@ -3,6 +3,10 @@ "title": "Publish", "link": "/publish" }, + { + "title": "Faucet", + "link": "/faucet" + }, { "title": "About", "link": "/about" diff --git a/src/routes/Faucet.module.scss b/src/routes/Faucet.module.scss new file mode 100644 index 0000000..38b9719 --- /dev/null +++ b/src/routes/Faucet.module.scss @@ -0,0 +1,2 @@ +@import '../styles/variables'; + diff --git a/src/routes/Faucet.tsx b/src/routes/Faucet.tsx new file mode 100644 index 0000000..2a7ae5e --- /dev/null +++ b/src/routes/Faucet.tsx @@ -0,0 +1,65 @@ +import React, { PureComponent } from 'react' +import Route from '../components/templates/Route' +import Button from '../components/atoms/Button' +import { User } from '../context/User' +import Web3message from '../components/molecules/Web3message' +import styles from './Faucet.module.scss' + +interface FaucetState { + isLoading: boolean + success?: string + error?: string +} + +class Faucet extends PureComponent<{}, FaucetState> { + public state = { + isLoading: false, + success: undefined, + error: undefined + } + + private getTokens = async (requestFromFaucet: () => void) => { + this.setState({ isLoading: true }) + + try { + await requestFromFaucet() + this.setState({ isLoading: false, success: 'Tokens added!' }) + } catch (error) { + this.setState({ isLoading: false, error }) + } + } + + public render() { + return ( + + + + + {states => + this.state.isLoading ? ( + 'Getting tokens...' + ) : this.state.error ? ( + this.state.error + ) : this.state.success ? ( + this.state.success + ) : ( + + ) + } + + + ) + } +} + +export default Faucet From 94201d202168ef6b1ac265eb0e5cb2ffbf5199a3 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 28 Feb 2019 13:28:38 -0300 Subject: [PATCH 18/27] faucet styling --- src/components/atoms/Spinner.module.scss | 3 +- src/routes/Faucet.module.scss | 12 +++++ src/routes/Faucet.tsx | 62 +++++++++++++++--------- 3 files changed, 54 insertions(+), 23 deletions(-) diff --git a/src/components/atoms/Spinner.module.scss b/src/components/atoms/Spinner.module.scss index 78992c6..d2406f2 100644 --- a/src/components/atoms/Spinner.module.scss +++ b/src/components/atoms/Spinner.module.scss @@ -3,6 +3,7 @@ .spinner { position: relative; text-align: center; + margin-top: $spacer * $line-height; margin-bottom: $spacer / 2; &:before { @@ -13,7 +14,7 @@ left: 50%; width: 20px; height: 20px; - margin-top: -10px; + margin-top: -20px; margin-left: -10px; border-radius: 50%; border: 2px solid $brand-purple; diff --git a/src/routes/Faucet.module.scss b/src/routes/Faucet.module.scss index 38b9719..2aef577 100644 --- a/src/routes/Faucet.module.scss +++ b/src/routes/Faucet.module.scss @@ -1,2 +1,14 @@ @import '../styles/variables'; +.action { + text-align: center; + margin-top: $spacer * $line-height; + + p { + margin-bottom: $spacer; + } +} + +.success { + color: $green; +} diff --git a/src/routes/Faucet.tsx b/src/routes/Faucet.tsx index 2a7ae5e..28acefb 100644 --- a/src/routes/Faucet.tsx +++ b/src/routes/Faucet.tsx @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react' import Route from '../components/templates/Route' import Button from '../components/atoms/Button' +import Spinner from '../components/atoms/Spinner' import { User } from '../context/User' import Web3message from '../components/molecules/Web3message' import styles from './Faucet.module.scss' @@ -9,13 +10,15 @@ interface FaucetState { isLoading: boolean success?: string error?: string + eth?: string } class Faucet extends PureComponent<{}, FaucetState> { public state = { isLoading: false, success: undefined, - error: undefined + error: undefined, + eth: 'xx' } private getTokens = async (requestFromFaucet: () => void) => { @@ -23,7 +26,12 @@ class Faucet extends PureComponent<{}, FaucetState> { try { await requestFromFaucet() - this.setState({ isLoading: false, success: 'Tokens added!' }) + this.setState({ + isLoading: false, + success: `Successfully added ${ + this.state.eth + } ETH to your account.` + }) } catch (error) { this.setState({ isLoading: false, error }) } @@ -37,26 +45,36 @@ class Faucet extends PureComponent<{}, FaucetState> { > - - {states => - this.state.isLoading ? ( - 'Getting tokens...' - ) : this.state.error ? ( - this.state.error - ) : this.state.success ? ( - this.state.success - ) : ( - - ) - } - +
+

+ Click the button below to request Ether for the Ocean + POA network. +
You can only request Ether once every 24 hours + for your address. +

+ + {states => + this.state.isLoading ? ( + + ) : this.state.error ? ( + this.state.error + ) : this.state.success ? ( +
+ {this.state.success} +
+ ) : ( + + ) + } + +
) } From f21706bcf3faf15c52f7eea7d45327addda63dca Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 28 Feb 2019 13:39:35 -0300 Subject: [PATCH 19/27] shuffle copy around --- src/routes/Faucet.module.scss | 5 +++-- src/routes/Faucet.tsx | 13 ++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/routes/Faucet.module.scss b/src/routes/Faucet.module.scss index 2aef577..4ec11b4 100644 --- a/src/routes/Faucet.module.scss +++ b/src/routes/Faucet.module.scss @@ -2,10 +2,11 @@ .action { text-align: center; - margin-top: $spacer * $line-height; + margin-top: $spacer * 2; p { - margin-bottom: $spacer; + margin-top: $spacer; + color: $brand-grey-light; } } diff --git a/src/routes/Faucet.tsx b/src/routes/Faucet.tsx index 28acefb..2909dce 100644 --- a/src/routes/Faucet.tsx +++ b/src/routes/Faucet.tsx @@ -41,17 +41,11 @@ class Faucet extends PureComponent<{}, FaucetState> { return (
-

- Click the button below to request Ether for the Ocean - POA network. -
You can only request Ether once every 24 hours - for your address. -

{states => this.state.isLoading ? ( @@ -74,6 +68,11 @@ class Faucet extends PureComponent<{}, FaucetState> { ) } + +

+ You can only request Ether once every 24 hours for your + address. +

) From acef1130cb0ab180be48ffb5ae0d805c881db795 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 28 Feb 2019 14:04:55 -0300 Subject: [PATCH 20/27] cleanup, keep render function short --- src/routes/Faucet.tsx | 78 +++++++++++++++++++++++++------------------ 1 file changed, 46 insertions(+), 32 deletions(-) diff --git a/src/routes/Faucet.tsx b/src/routes/Faucet.tsx index 2909dce..51f9404 100644 --- a/src/routes/Faucet.tsx +++ b/src/routes/Faucet.tsx @@ -13,7 +13,7 @@ interface FaucetState { eth?: string } -class Faucet extends PureComponent<{}, FaucetState> { +export default class Faucet extends PureComponent<{}, FaucetState> { public state = { isLoading: false, success: undefined, @@ -37,6 +37,50 @@ class Faucet extends PureComponent<{}, FaucetState> { } } + private RequestMarkup = () => ( + + {states => ( + + )} + + ) + + private ActionMarkup = () => ( +
+ {this.state.isLoading ? ( + + ) : this.state.error ? ( +
+ {this.state.error}{' '} + +
+ ) : this.state.success ? ( +
{this.state.success}
+ ) : ( + + )} + +

+ You can only request Ether once every 24 hours for your address. +

+
+ ) + + private reset = () => { + this.setState({ + error: undefined, + success: undefined, + isLoading: false + }) + } + public render() { return ( { > -
- - {states => - this.state.isLoading ? ( - - ) : this.state.error ? ( - this.state.error - ) : this.state.success ? ( -
- {this.state.success} -
- ) : ( - - ) - } - - -

- You can only request Ether once every 24 hours for your - address. -

-
+ ) } } - -export default Faucet From f9013acbc2c4bcffcdb6ef00eec1b548aa13889d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 1 Mar 2019 15:43:50 -0300 Subject: [PATCH 21/27] switch to react-tether, solve almost all the popup issues with it --- package-lock.json | 33 +++++++++++-- package.json | 3 +- .../AccountStatus/Indicator.module.scss | 2 +- .../molecules/AccountStatus/Indicator.tsx | 5 +- .../molecules/AccountStatus/Popover.tsx | 12 +---- .../molecules/AccountStatus/index.tsx | 49 +++++++++---------- 6 files changed, 62 insertions(+), 42 deletions(-) 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 && ( + + ) + } + /> ) } } From 37bff21e4b33023789e91b41293f507e3d3686df Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 1 Mar 2019 16:21:00 -0300 Subject: [PATCH 22/27] never stop switching popover libraries, switch to react-popper --- package-lock.json | 135 +++++++++++++----- package.json | 3 +- .../molecules/AccountStatus/Indicator.tsx | 2 +- .../AccountStatus/Popover.module.scss | 11 ++ .../molecules/AccountStatus/Popover.tsx | 17 ++- .../molecules/AccountStatus/index.tsx | 47 +++--- 6 files changed, 151 insertions(+), 64 deletions(-) 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 && ( - - ) - } - /> + ) } } From 87cb5fe36b47065f2b929c8c313eae04b4cd9dc5 Mon Sep 17 00:00:00 2001 From: Jernej Pregelj Date: Mon, 4 Mar 2019 11:58:52 +0100 Subject: [PATCH 23/27] balances, network to context --- src/App.tsx | 20 +++++++++++++++++--- src/context/User.ts | 3 +++ 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 67c71c6..31a3df1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -32,6 +32,9 @@ interface AppState { isLoading: boolean isWeb3: boolean account: string + balanceEth: number + balanceOcn: number + network: string web3: Web3 ocean: {} startLogin: () => void @@ -63,7 +66,7 @@ class App extends Component<{}, AppState> { } ) } catch (error) { - Logger.log(error) + Logger.log('requestFromFaucet', error) } } else { // no account found @@ -74,6 +77,9 @@ class App extends Component<{}, AppState> { isLogged: false, isLoading: true, isWeb3: false, + balanceEth: 0, + balanceOcn: 0, + network: '', web3: new Web3( new Web3.providers.HttpProvider( `${nodeScheme}://${nodeHost}:${nodePort}` @@ -141,7 +147,7 @@ class App extends Component<{}, AppState> { }) } } catch (e) { - // continue with default + Logger.log('web3 error', e) } } try { @@ -150,8 +156,16 @@ class App extends Component<{}, AppState> { isLoading: false, ocean }) + // TODO: squid-js balance retrieval fix + const accounts = await ocean.getAccounts() + const balance = await accounts[0].getBalance() + this.setState({ + balanceEth: balance.eth, + balanceOcn: balance.ocn + }) + // TODO: squid-js expose keeper for getNetworkName } catch (e) { - // show loading error / unable to initialize ocean + Logger.log('ocean/balance error', e) this.setState({ isLoading: false }) diff --git a/src/context/User.ts b/src/context/User.ts index d3b3a21..03b7ec4 100644 --- a/src/context/User.ts +++ b/src/context/User.ts @@ -7,6 +7,9 @@ export const User = React.createContext({ account: '', web3: {}, ocean: {}, + balanceEth: 0, + balanceOcn: 0, + network: '', startLogin: () => { /* empty */ }, From f3d011cae73d81c1f98c3b6bc4702e5557e0496d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 4 Mar 2019 11:46:02 -0300 Subject: [PATCH 24/27] ditch popover arrow for now --- .../molecules/AccountStatus/Popover.module.scss | 1 + src/components/molecules/AccountStatus/Popover.tsx | 8 +------- src/components/molecules/AccountStatus/index.tsx | 3 +-- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/components/molecules/AccountStatus/Popover.module.scss b/src/components/molecules/AccountStatus/Popover.module.scss index b67c144..0860ed9 100644 --- a/src/components/molecules/AccountStatus/Popover.module.scss +++ b/src/components/molecules/AccountStatus/Popover.module.scss @@ -3,6 +3,7 @@ $popoverWidth: 18rem; .popover { + position: relative; width: $popoverWidth; padding: $spacer / 2; background: $brand-black; diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx index 28741c3..e782a5e 100644 --- a/src/components/molecules/AccountStatus/Popover.tsx +++ b/src/components/molecules/AccountStatus/Popover.tsx @@ -4,15 +4,10 @@ import styles from './Popover.module.scss' const Popover = ({ forwardedRef, - style, - arrowProps + style }: { forwardedRef: (ref: HTMLElement | null) => void style: React.CSSProperties - arrowProps: { - ref: (ref: HTMLElement | null) => void - style: React.CSSProperties - } }) => (
@@ -49,7 +44,6 @@ const Popover = ({ {states => states.network && states.network} */}
-
) diff --git a/src/components/molecules/AccountStatus/index.tsx b/src/components/molecules/AccountStatus/index.tsx index 248d087..8c420bb 100644 --- a/src/components/molecules/AccountStatus/index.tsx +++ b/src/components/molecules/AccountStatus/index.tsx @@ -39,11 +39,10 @@ export default class AccountStatus extends PureComponent< {this.state.isPopoverOpen && ( - {({ ref, style, placement, arrowProps }) => ( + {({ ref, style, placement }) => ( )} From 662b608148b23ebc4b2270faea829d9c4e459bc3 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 4 Mar 2019 11:56:24 -0300 Subject: [PATCH 25/27] prepare showing real balances and network name --- .../molecules/AccountStatus/Popover.tsx | 39 ++++++++++++++++--- 1 file changed, 34 insertions(+), 5 deletions(-) diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx index e782a5e..6e47316 100644 --- a/src/components/molecules/AccountStatus/Popover.tsx +++ b/src/components/molecules/AccountStatus/Popover.tsx @@ -10,15 +10,40 @@ const Popover = ({ style: React.CSSProperties }) => (
+ {/* + TODO: uncomment to show real balances, + and remove next infoline block with fake data + */} + {/* + + {states => + (states.balanceEth || states.balanceOcn) && ( +
+ + + {(states.balanceEth / 1e18) + .toFixed(3) + .slice(0, -1)} + {' '} + ETH + + + {states.balanceOcn} OCEAN + +
+ ) + } + + */} +
30 ETH - {/* - {(eth / 1e18).toFixed(3).slice(0, -1)} ETH - */} - {/* {ocn} OCEAN */} 2474290 OCEAN
@@ -39,10 +64,14 @@ const Popover = ({
Fake Network Name + {/* + TODO: uncomment to show real network name + */} {/* {states => states.network && states.network} - */} + + */}
) From a6c2431cb190a1b83cd2598068d2f65c811b1e9d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 4 Mar 2019 12:06:52 -0300 Subject: [PATCH 26/27] balance display tweaks --- src/App.tsx | 17 ++++++----- .../molecules/AccountStatus/Popover.tsx | 30 ++++--------------- src/context/User.ts | 6 ++-- 3 files changed, 18 insertions(+), 35 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 31a3df1..7eb6481 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -32,8 +32,10 @@ interface AppState { isLoading: boolean isWeb3: boolean account: string - balanceEth: number - balanceOcn: number + balance: { + eth: number + ocn: number + } network: string web3: Web3 ocean: {} @@ -77,8 +79,10 @@ class App extends Component<{}, AppState> { isLogged: false, isLoading: true, isWeb3: false, - balanceEth: 0, - balanceOcn: 0, + balance: { + eth: 0, + ocn: 0 + }, network: '', web3: new Web3( new Web3.providers.HttpProvider( @@ -159,10 +163,7 @@ class App extends Component<{}, AppState> { // TODO: squid-js balance retrieval fix const accounts = await ocean.getAccounts() const balance = await accounts[0].getBalance() - this.setState({ - balanceEth: balance.eth, - balanceOcn: balance.ocn - }) + this.setState({ balance }) // TODO: squid-js expose keeper for getNetworkName } catch (e) { Logger.log('ocean/balance error', e) diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx index 6e47316..e8c3541 100644 --- a/src/components/molecules/AccountStatus/Popover.tsx +++ b/src/components/molecules/AccountStatus/Popover.tsx @@ -10,43 +10,29 @@ const Popover = ({ style: React.CSSProperties }) => (
- {/* - TODO: uncomment to show real balances, - and remove next infoline block with fake data - */} - {/* {states => - (states.balanceEth || states.balanceOcn) && ( + states.account && + states.balance && (
- {(states.balanceEth / 1e18) + {(states.balance.eth / 1e18) .toFixed(3) .slice(0, -1)} {' '} ETH - {states.balanceOcn} OCEAN + {states.balance.ocn} OCEAN
) } - */} - -
- - 30 ETH - - - 2474290 OCEAN - -
@@ -63,15 +49,9 @@ const Popover = ({
- Fake Network Name - {/* - TODO: uncomment to show real network name - */} - {/* {states => states.network && states.network} - */}
) diff --git a/src/context/User.ts b/src/context/User.ts index 03b7ec4..6a36c98 100644 --- a/src/context/User.ts +++ b/src/context/User.ts @@ -7,8 +7,10 @@ export const User = React.createContext({ account: '', web3: {}, ocean: {}, - balanceEth: 0, - balanceOcn: 0, + balance: { + eth: 0, + ocn: 0 + }, network: '', startLogin: () => { /* empty */ From c52fa5d0bf1b42bd05909c482d1374515f4a3e30 Mon Sep 17 00:00:00 2001 From: Jernej Pregelj Date: Tue, 5 Mar 2019 15:21:41 +0100 Subject: [PATCH 27/27] path fix --- src/routes/Publish/StepRegisterContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Publish/StepRegisterContent.tsx b/src/routes/Publish/StepRegisterContent.tsx index ea1a718..753578b 100644 --- a/src/routes/Publish/StepRegisterContent.tsx +++ b/src/routes/Publish/StepRegisterContent.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react' -import Web3message from '../../components/Web3message' +import Web3message from '../../components/molecules/Web3message' import Spinner from '../../components/atoms/Spinner' import styles from './StepRegisterContent.module.scss'