From 92e31f6091ae888dff04a8af52bae2c1fa7e895d Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Tue, 5 Jun 2018 16:47:56 +0200 Subject: [PATCH 1/7] Fix clock not sync error --- src/stores/healthStore.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/stores/healthStore.js b/src/stores/healthStore.js index afae19ec..14218d5b 100644 --- a/src/stores/healthStore.js +++ b/src/stores/healthStore.js @@ -25,7 +25,7 @@ class HealthStore { @observable nodeHealth; @observable syncing; - constructor () { + constructor() { nodeHealth$().subscribe(this.setNodeHealth); syncing$().subscribe(this.setSyncing); } @@ -37,7 +37,7 @@ class HealthStore { * represents the current status, with a custom payload. */ @computed - get health () { + get health() { // Check download progress if (parityStore.downloadProgress > 0 && !parityStore.isParityRunning) { return { @@ -70,7 +70,7 @@ class HealthStore { if (this.syncing) { const { currentBlock, highestBlock, startingBlock } = this.syncing; const percentage = Math.round( - (currentBlock - startingBlock) * 100 / (highestBlock - startingBlock) + ((currentBlock - startingBlock) * 100) / (highestBlock - startingBlock) ); return { status: STATUS.SYNCING, @@ -129,7 +129,7 @@ class HealthStore { if ( message.includes( - 'Your clock is not in sync. Detected difference is too big for the protocol to work.' + 'Your clock is not in sync. Detected difference is too big for the protocol to work' ) ) { return { status: STATUS.CLOCKNOTSYNC, payload: message }; -- GitLab From 055187fe90c63f877e920ce6e0ff9be1dadc31cc Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Tue, 5 Jun 2018 17:39:02 +0200 Subject: [PATCH 2/7] Add different overlays --- src/App/App.js | 43 +++++++++++------- src/App/ProtectedRoute/ProtectedRoute.js | 37 --------------- src/Health/Health.js | 22 +++++---- src/Overlay/ClockNotSync/ClockNotSync.js | 30 +++++++++++++ .../ClockNotSync}/index.js | 4 +- src/Overlay/Loading/Loading.js | 28 ++++++++++++ src/{ => Overlay}/Loading/index.js | 0 src/Overlay/NoInternet/NoInternet.js | 24 ++++++++++ src/Overlay/NoInternet/index.js | 8 ++++ src/Overlay/Overlay.js | 45 +++++++++++++++++++ .../Loading.js => Overlay/Syncing/Syncing.js} | 24 +++++----- src/Overlay/Syncing/index.js | 8 ++++ src/Overlay/index.js | 8 ++++ src/Receive/Receive.js | 20 ++++----- src/stores/healthStore.js | 4 +- 15 files changed, 218 insertions(+), 87 deletions(-) delete mode 100644 src/App/ProtectedRoute/ProtectedRoute.js create mode 100644 src/Overlay/ClockNotSync/ClockNotSync.js rename src/{App/ProtectedRoute => Overlay/ClockNotSync}/index.js (61%) create mode 100644 src/Overlay/Loading/Loading.js rename src/{ => Overlay}/Loading/index.js (100%) create mode 100644 src/Overlay/NoInternet/NoInternet.js create mode 100644 src/Overlay/NoInternet/index.js create mode 100644 src/Overlay/Overlay.js rename src/{Loading/Loading.js => Overlay/Syncing/Syncing.js} (54%) create mode 100644 src/Overlay/Syncing/index.js create mode 100644 src/Overlay/index.js diff --git a/src/App/App.js b/src/App/App.js index 9e17df20..87f81feb 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -3,7 +3,7 @@ // // SPDX-License-Identifier: MIT -import React, { PureComponent } from 'react'; +import React, { Component } from 'react'; import { BrowserRouter, MemoryRouter, @@ -11,14 +11,15 @@ import { Route, Switch } from 'react-router-dom'; +import { inject, observer } from 'mobx-react'; import Accounts from '../Accounts'; -import Loading from '../Loading'; -import ProtectedRoute from './ProtectedRoute'; +import Overlay from '../Overlay'; import Receive from '../Receive'; import Send from '../Send'; import Settings from '../Settings'; import Signer from '../Send/Signer'; +import { STATUS } from '../stores/healthStore'; import Tokens from '../Tokens'; import './App.css'; @@ -27,8 +28,16 @@ import './App.css'; const Router = process.env.NODE_ENV === 'production' ? MemoryRouter : BrowserRouter; -class App extends PureComponent { +@inject('healthStore') +@observer +class App extends Component { render () { + const { + healthStore: { + health: { status } + } + } = this.props; + return (
@@ -39,17 +48,21 @@ class App extends PureComponent {
- - {/* Change homepage on the next line */} - - - - - - - - - + {status === STATUS.GOOD ? ( + + {/* Change homepage on the next line */} + + + + + + + + + + ) : ( + + )}
diff --git a/src/App/ProtectedRoute/ProtectedRoute.js b/src/App/ProtectedRoute/ProtectedRoute.js deleted file mode 100644 index 3079dc9e..00000000 --- a/src/App/ProtectedRoute/ProtectedRoute.js +++ /dev/null @@ -1,37 +0,0 @@ -// Copyright 2015-2018 Parity Technologies (UK) Ltd. -// This file is part of Parity. -// -// SPDX-License-Identifier: MIT - -import React, { Component } from 'react'; -import { inject, observer } from 'mobx-react'; -import { Redirect, Route, withRouter } from 'react-router-dom'; - -/** - * Protected routes are routes that cannot be access if parity Api is not - * connected yet. - */ -// https://github.com/mobxjs/mobx-react/issues/210 -@withRouter -@inject('parityStore') -@observer -class ProtectedRoute extends Component { - render () { - const { component, parityStore, ...rest } = this.props; - - return ; - } - - renderComponent = props => { - const { - component: RoutedComponent, - parityStore: { isApiConnected } - } = this.props; - - return isApiConnected - ? - : ; - }; -} - -export default ProtectedRoute; diff --git a/src/Health/Health.js b/src/Health/Health.js index 8b4b3f9f..e7fd591b 100644 --- a/src/Health/Health.js +++ b/src/Health/Health.js @@ -19,9 +19,7 @@ class Health extends Component { - - {this.statusToFriendlyMessage()} - + {this.statusToFriendlyMessage()} ); } @@ -30,7 +28,11 @@ class Health extends Component { * Get className from the status icon from the status enum */ statusToClassName = () => { - const { healthStore: { health: { status } } } = this.props; + const { + healthStore: { + health: { status } + } + } = this.props; switch (status) { case STATUS.GOOD: return '-good'; @@ -44,7 +46,11 @@ class Health extends Component { }; statusToFriendlyMessage = () => { - const { healthStore: { health: { status, payload } } } = this.props; + const { + healthStore: { + health: { status, payload } + } + } = this.props; switch (status) { case STATUS.CANTCONNECT: return "Can't connect to Parity"; @@ -59,9 +65,9 @@ class Health extends Component { case STATUS.RUNNING: return 'Running...'; case STATUS.SYNCING: - return `Syncing...${payload.percentage - ? ` (${payload.percentage}%)` - : ''}`; + return `Syncing...${ + payload && payload.percentage ? ` (${payload.percentage}%)` : '' + }`; default: return JSON.stringify(payload); // Just in case payload is an object } diff --git a/src/Overlay/ClockNotSync/ClockNotSync.js b/src/Overlay/ClockNotSync/ClockNotSync.js new file mode 100644 index 00000000..1be2222e --- /dev/null +++ b/src/Overlay/ClockNotSync/ClockNotSync.js @@ -0,0 +1,30 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React, { PureComponent } from 'react'; + +class ClockNotSync extends PureComponent { + render () { + return ( +
+
+
+
+ Your time is not sync. +
+ Mac: System Preferences -> Date & Time -> Uncheck and recheck + "Set date and time automatically" +
+ Windows: Control Panel -> "Clock, Language, and Region" -> "Date + and Time" -> Uncheck and recheck "Set date and time automatically" +
+
+
+
+ ); + } +} + +export default ClockNotSync; diff --git a/src/App/ProtectedRoute/index.js b/src/Overlay/ClockNotSync/index.js similarity index 61% rename from src/App/ProtectedRoute/index.js rename to src/Overlay/ClockNotSync/index.js index 19ef6069..a7390a7c 100644 --- a/src/App/ProtectedRoute/index.js +++ b/src/Overlay/ClockNotSync/index.js @@ -3,6 +3,6 @@ // // SPDX-License-Identifier: MIT -import ProtectedRoute from './ProtectedRoute'; +import ClockNotSync from './ClockNotSync'; -export default ProtectedRoute; +export default ClockNotSync; diff --git a/src/Overlay/Loading/Loading.js b/src/Overlay/Loading/Loading.js new file mode 100644 index 00000000..2004d620 --- /dev/null +++ b/src/Overlay/Loading/Loading.js @@ -0,0 +1,28 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React, { PureComponent } from 'react'; + +import loading from '../../assets/img/icons/loading.svg'; + +class Loading extends PureComponent { + render () { + return ( +
+
+
+
+
+ loading +
+
+
+
+
+ ); + } +} + +export default Loading; diff --git a/src/Loading/index.js b/src/Overlay/Loading/index.js similarity index 100% rename from src/Loading/index.js rename to src/Overlay/Loading/index.js diff --git a/src/Overlay/NoInternet/NoInternet.js b/src/Overlay/NoInternet/NoInternet.js new file mode 100644 index 00000000..c64bd8f8 --- /dev/null +++ b/src/Overlay/NoInternet/NoInternet.js @@ -0,0 +1,24 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React, { PureComponent } from 'react'; + +class NoInternet extends PureComponent { + render () { + return ( +
+
+
+
+ Poor connection detected. Please check your network. +
+
+
+
+ ); + } +} + +export default NoInternet; diff --git a/src/Overlay/NoInternet/index.js b/src/Overlay/NoInternet/index.js new file mode 100644 index 00000000..184bf82a --- /dev/null +++ b/src/Overlay/NoInternet/index.js @@ -0,0 +1,8 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import NoInternet from './NoInternet'; + +export default NoInternet; diff --git a/src/Overlay/Overlay.js b/src/Overlay/Overlay.js new file mode 100644 index 00000000..972be82a --- /dev/null +++ b/src/Overlay/Overlay.js @@ -0,0 +1,45 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React, { Component } from 'react'; +import { inject, observer } from 'mobx-react'; + +import ClockNotSync from './ClockNotSync'; +import Loading from './Loading'; +import NoInternet from './NoInternet'; +import { STATUS } from '../stores/healthStore'; +import Syncing from './Syncing/Syncing'; + +@inject('healthStore') +@observer +class Overlays extends Component { + render () { + const { + healthStore: { + health: { status } + } + } = this.props; + + switch (status) { + case STATUS.CLOCKNOTSYNC: { + return ; + } + case STATUS.GOOD: { + return null; + } + case STATUS.NOINTERNET: { + return ; + } + case STATUS.SYNCING: { + return ; + } + + default: + return ; + } + } +} + +export default Overlays; diff --git a/src/Loading/Loading.js b/src/Overlay/Syncing/Syncing.js similarity index 54% rename from src/Loading/Loading.js rename to src/Overlay/Syncing/Syncing.js index 57e1b1f5..bd3528b1 100644 --- a/src/Loading/Loading.js +++ b/src/Overlay/Syncing/Syncing.js @@ -4,28 +4,26 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; -import loading from '../assets/img/icons/loading.svg'; import { inject, observer } from 'mobx-react'; -import { Redirect } from 'react-router-dom'; -@inject('parityStore') +@inject('healthStore') @observer -class Loading extends Component { +class Syncing extends Component { render () { - const { parityStore: { isApiConnected } } = this.props; - - if (isApiConnected) { - return ; - } + const { + healthStore: { + health: { payload } + } + } = this.props; return (
-
- -
+ {`Syncing...${ + payload && payload.percentage ? ` (${payload.percentage}%)` : '' + }`}
@@ -34,4 +32,4 @@ class Loading extends Component { } } -export default Loading; +export default Syncing; diff --git a/src/Overlay/Syncing/index.js b/src/Overlay/Syncing/index.js new file mode 100644 index 00000000..1dbe5d74 --- /dev/null +++ b/src/Overlay/Syncing/index.js @@ -0,0 +1,8 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import Loading from './Loading'; + +export default Loading; diff --git a/src/Overlay/index.js b/src/Overlay/index.js new file mode 100644 index 00000000..ef5ea441 --- /dev/null +++ b/src/Overlay/index.js @@ -0,0 +1,8 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import Overlay from './Overlay'; + +export default Overlay; diff --git a/src/Receive/Receive.js b/src/Receive/Receive.js index 9d1c2f39..b5563461 100644 --- a/src/Receive/Receive.js +++ b/src/Receive/Receive.js @@ -3,7 +3,7 @@ // // SPDX-License-Identifier: MIT -import React, { PureComponent } from 'react'; +import React, { Component } from 'react'; import { accountsInfo$, defaultAccount$ } from '@parity/light.js'; import Blockie from 'react-blockies'; import { Link } from 'react-router-dom'; @@ -14,7 +14,7 @@ import light from '../hoc'; accountsInfo: accountsInfo$, defaultAccount: defaultAccount$ }) -class Receive extends PureComponent { +class Receive extends Component { render () { const { accountsInfo, defaultAccount } = this.props; return ( @@ -43,24 +43,24 @@ class Receive extends PureComponent {
- {accountsInfo && defaultAccount && accountsInfo[defaultAccount] + {accountsInfo && + defaultAccount && + accountsInfo[defaultAccount] ? accountsInfo[defaultAccount].name : 'Loading...'}
-
- {defaultAccount} -
+
{defaultAccount}

Your address is:

-
- {defaultAccount} -
+
{defaultAccount}
- +
diff --git a/src/stores/healthStore.js b/src/stores/healthStore.js index 14218d5b..77fb338b 100644 --- a/src/stores/healthStore.js +++ b/src/stores/healthStore.js @@ -25,7 +25,7 @@ class HealthStore { @observable nodeHealth; @observable syncing; - constructor() { + constructor () { nodeHealth$().subscribe(this.setNodeHealth); syncing$().subscribe(this.setSyncing); } @@ -37,7 +37,7 @@ class HealthStore { * represents the current status, with a custom payload. */ @computed - get health() { + get health () { // Check download progress if (parityStore.downloadProgress > 0 && !parityStore.isParityRunning) { return { -- GitLab From 40ce97872be6fb780a1b7310d5942b0c3430b46e Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Tue, 5 Jun 2018 17:46:15 +0200 Subject: [PATCH 3/7] Fix bug observer on purecomponent --- src/Send/Signer/Signer.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/Send/Signer/Signer.js b/src/Send/Signer/Signer.js index e354c7a5..5a2a500c 100644 --- a/src/Send/Signer/Signer.js +++ b/src/Send/Signer/Signer.js @@ -13,13 +13,12 @@ import { defaultAccount$, myBalance$, post$ } from '@parity/light.js'; import ethereumIcon from '../../assets/img/tokens/ethereum.png'; import light from '../../hoc'; -@inject('signerStore') -@observer - @light({ balance: () => myBalance$().pipe(map(value => +fromWei(value))), me: defaultAccount$ }) +@inject('signerStore') +@observer class Signer extends Component { state = { password: '', @@ -72,11 +71,13 @@ class Signer extends Component { }; render () { - const { balance, location: { state: tx } } = this.props; + const { + balance, + location: { state: tx } + } = this.props; const { password } = this.state; return ( -
@@ -138,11 +137,9 @@ class Signer extends Component { > Cancel - {' '} +
-- GitLab From 8eea31fa72d8a8968a2776dbb167e6879cf10af0 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Tue, 5 Jun 2018 18:15:04 +0200 Subject: [PATCH 4/7] Fix small bug --- src/Receive/Receive.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/Receive/Receive.js b/src/Receive/Receive.js index b5563461..eef3a418 100644 --- a/src/Receive/Receive.js +++ b/src/Receive/Receive.js @@ -3,7 +3,7 @@ // // SPDX-License-Identifier: MIT -import React, { Component } from 'react'; +import React, { PureComponent } from 'react'; import { accountsInfo$, defaultAccount$ } from '@parity/light.js'; import Blockie from 'react-blockies'; import { Link } from 'react-router-dom'; @@ -14,9 +14,12 @@ import light from '../hoc'; accountsInfo: accountsInfo$, defaultAccount: defaultAccount$ }) -class Receive extends Component { +class Receive extends PureComponent { render () { const { accountsInfo, defaultAccount } = this.props; + + if (!defaultAccount) return
Loading...
; + return (