diff --git a/package.json b/package.json index 9c220170a1743a0e46832ae3c6758f096eaf62d9..22fc601f5cc6288701f9514596456b76655aad5e 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ }, "dependencies": { "@parity/api": "^2.1.22", - "@parity/light.js": "https://github.com/parity-js/light.js#2052c910d1ff4f4e38d4cba7fb5578ac4500f0ae", + "@parity/light.js": "https://github.com/parity-js/light.js#24ed8bed60917207a84d85cd5622636f8489fd7a", "@parity/shared": "^3.0.1", "async-retry": "^1.2.1", "axios": "^0.18.0", diff --git a/src/App/App.css b/src/App/App.css index 937e3aab3ec08ba49a6e976ecf95590ddb6367b0..e2ae348cd2d8cde136681f684bf934989510db7f 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -1079,25 +1079,6 @@ nav.range-nav { .wrapper .content .window .window_content { min-height: 7.5rem; } -.debug-nav { - background-color: rgba(34, 34, 34, 0.125); - position: fixed; - left: 1rem; - right: 1rem; - bottom: 1rem; - padding: 1rem; } - .debug-nav a, - .debug-nav a:link, - .debug-nav a:visited { - color: #f9f9f9; - display: block; - padding: 0.5rem 1rem; } - .debug-nav a:hover, - .debug-nav a:link:hover, - .debug-nav a:visited:hover { - cursor: pointer; - background-color: rgba(34, 34, 34, 0.125); } - .logo { padding: 1.5rem 0; } .logo figure { @@ -1379,13 +1360,18 @@ nav.range-nav { justify-content: center; } .alert-screen .alert-screen_image img { display: block; - width: 4rem; + width: 2rem; height: auto; } .alert-screen .alert-screen_text { margin-top: 1rem; text-align: center; } .alert-screen .alert-screen_text h1, .alert-screen .alert-screen_text h2, .alert-screen .alert-screen_text big, .alert-screen .alert-screen_text strong { - font-weight: 600; } + font-weight: 600; + font-size: 1.2rem; + line-height: 1.56rem; + margin-bottom: 0.25rem; } + .alert-screen .alert-screen_text p { + color: #888; } .search-form { display: flex; diff --git a/src/App/App.js b/src/App/App.js index 9e17df2061230518ab46a963ee039aa9a12c4c9b..87f81febe99e228ed78c725d90c899160d7cd77a 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/App.sass b/src/App/App.sass index d842327f8acb82f166c6c6c0f5d9b6bab3111344..ff220653a038b1e4cd43a28cdc6d114ea2655008 100644 --- a/src/App/App.sass +++ b/src/App/App.sass @@ -19,7 +19,6 @@ @import '../assets/sass/layouts/wrapper' -@import '../assets/sass/components/debug-nav' @import '../assets/sass/components/logo' @import '../assets/sass/components/token' @import '../assets/sass/components/account' diff --git a/src/App/ProtectedRoute/ProtectedRoute.js b/src/App/ProtectedRoute/ProtectedRoute.js deleted file mode 100644 index 3079dc9e899c1b0a4202dadda4e25e7e952e7cba..0000000000000000000000000000000000000000 --- 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 8b4b3f9f60fbd783fbcae3bc3b6ae28d1dc53bd2..e7fd591ba0ffdfba92797a1237f28a04a95b0c23 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 0000000000000000000000000000000000000000..1be2222e0888cd36951b649544f6a82e50ea46e6 --- /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 19ef606923df8205ccbc9271c2bf97b4544726df..a7390a7c77adb5e897ce443e13da28d7ee31b472 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/Loading/Loading.js b/src/Overlay/Loading/Loading.js similarity index 53% rename from src/Loading/Loading.js rename to src/Overlay/Loading/Loading.js index 57e1b1f5a8022ede1d92da26e2bef0add1e429d6..2004d6209a4975b333baccf8a27b243fba56a10c 100644 --- a/src/Loading/Loading.js +++ b/src/Overlay/Loading/Loading.js @@ -3,28 +3,19 @@ // // 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'; +import React, { PureComponent } from 'react'; -@inject('parityStore') -@observer -class Loading extends Component { - render () { - const { parityStore: { isApiConnected } } = this.props; - - if (isApiConnected) { - return ; - } +import loading from '../../assets/img/icons/loading.svg'; +class Loading extends PureComponent { + render () { return (
- + 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 0000000000000000000000000000000000000000..eecc2ef4a1e7ed93d2534e9b8f516b7052533967 --- /dev/null +++ b/src/Overlay/NoInternet/NoInternet.js @@ -0,0 +1,31 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React, { PureComponent } from 'react'; +import alert from '../../assets/img/icons/loading.svg'; + +class NoInternet extends PureComponent { + render () { + return ( +
+
+
+
+
+ no-internet +
+
+

Poor connection

+

Please check that your network.

+
+
+
+
+
+ ); + } +} + +export default NoInternet; diff --git a/src/Overlay/NoInternet/index.js b/src/Overlay/NoInternet/index.js new file mode 100644 index 0000000000000000000000000000000000000000..184bf82a0d4892a3586ae0f62aa37d23d7f8606b --- /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 0000000000000000000000000000000000000000..972be82af708bead0bc22acfc6e55013560c9275 --- /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/Overlay/Syncing/Syncing.js b/src/Overlay/Syncing/Syncing.js new file mode 100644 index 0000000000000000000000000000000000000000..b71fa4836aac467bd6dc24a03def363eefc2ddbf --- /dev/null +++ b/src/Overlay/Syncing/Syncing.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 syncing from '../../assets/img/icons/loading.svg'; + +@inject('healthStore') +@observer +class Syncing extends Component { + render () { + const { + healthStore: { + health: { payload } + } + } = this.props; + + return ( +
+
+
+
+
+ syncing +
+
+

Syncing…

+

+ {payload && payload.percentage + ? ` (${payload.percentage}%)` + : ''} +

+
+
+
+
+
+ ); + } +} + +export default Syncing; diff --git a/src/Overlay/Syncing/index.js b/src/Overlay/Syncing/index.js new file mode 100644 index 0000000000000000000000000000000000000000..1dbe5d74fc6470e4cd36bc90317879d0f8051579 --- /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 0000000000000000000000000000000000000000..ef5ea4415be41b2476987a5067cd967172ca33cb --- /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 9d1c2f399183f65c07c537df2d5890bc75211bb1..eef3a41876ee442d297caa70cc1389e3e1523584 100644 --- a/src/Receive/Receive.js +++ b/src/Receive/Receive.js @@ -17,6 +17,9 @@ import light from '../hoc'; class Receive extends PureComponent { render () { const { accountsInfo, defaultAccount } = this.props; + + if (!defaultAccount) return
Loading...
; + return (
- {accountsInfo && defaultAccount && accountsInfo[defaultAccount] + {accountsInfo && + defaultAccount && + accountsInfo[defaultAccount] ? accountsInfo[defaultAccount].name : 'Loading...'}
-
- {defaultAccount} -
+
{defaultAccount}

Your address is:

-
- {defaultAccount} -
+
{defaultAccount}
- +
diff --git a/src/Send/Signer/Signer.js b/src/Send/Signer/Signer.js index e354c7a55615681ff4a9ee6de5a660d483cc5791..5a2a500cd0025b3b779696a4e5cb6f4ec6298fab 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 - {' '} +
diff --git a/src/Tokens/TokensList/TokenBalance/TokenBalance.js b/src/Tokens/TokensList/TokenBalance/TokenBalance.js index a12ed43f9f8671f88ce3222a4d0f7a1a13558d3c..2ea1ba333eed15282946fe0b7ef7fa6de6134be1 100644 --- a/src/Tokens/TokensList/TokenBalance/TokenBalance.js +++ b/src/Tokens/TokensList/TokenBalance/TokenBalance.js @@ -17,7 +17,7 @@ import light from '../../../hoc'; balance: ({ token: { address, decimals } }) => defaultAccount$().pipe( switchMap(defaultAccount => - makeContract$(address, abi).balanceOf(defaultAccount) + makeContract$(address, abi).balanceOf$(defaultAccount) ), map(value => +value.div(10 ** decimals)) ) diff --git a/src/assets/sass/components/_alert-screen.scss b/src/assets/sass/components/_alert-screen.scss index c3aaccdff394cc25666cc63d510f0e2465100a72..4a4a4344a7696469709dea86e6b1f4dd5698ded7 100644 --- a/src/assets/sass/components/_alert-screen.scss +++ b/src/assets/sass/components/_alert-screen.scss @@ -10,7 +10,7 @@ justify-content: center; img { display: block; - width: 4rem; + width: 2rem; height: auto; } } @@ -20,6 +20,13 @@ text-align: center; h1, h2, big, strong { font-weight: 600; + font-size: ms(1); + line-height: ms(1) * 1.3; + margin-bottom: 0.25rem; + } + + p { + color: $grey; } } } diff --git a/src/assets/sass/components/_debug-nav.scss b/src/assets/sass/components/_debug-nav.scss deleted file mode 100644 index b4091bf8a15479e7259f9ce75537dd4053b2d990..0000000000000000000000000000000000000000 --- a/src/assets/sass/components/_debug-nav.scss +++ /dev/null @@ -1,20 +0,0 @@ -.debug-nav { - background-color: rgba($black,0.125); - position: fixed; - left: 1rem; - right: 1rem; - bottom: 1rem; - padding: 1rem; - - a, - a:link, - a:visited { - color: $white; - display: block; - padding: 0.5rem 1rem; - &:hover { - cursor: pointer; - background-color: rgba($black,0.125); - } - } -} diff --git a/src/stores/healthStore.js b/src/stores/healthStore.js index afae19ecef4a4588706ccb5979b54589fee64e4f..77fb338bf840610f750fbd44387a49cf12a95e40 100644 --- a/src/stores/healthStore.js +++ b/src/stores/healthStore.js @@ -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 }; diff --git a/yarn.lock b/yarn.lock index 792be438e77f680aa5ebbfacbc11afc71fa70a68..3ba7dfd2bc62fe9bf97bc45a24fc451a576285da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -46,7 +46,7 @@ esutils "^2.0.2" js-tokens "^3.0.0" -"@babel/runtime@^7.0.0-beta.46": +"@babel/runtime@^7.0.0-beta.49": version "7.0.0-beta.49" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-beta.49.tgz#03b3bf07eb982072c8e851dd2ddd5110282e61bf" dependencies: @@ -118,6 +118,24 @@ store "^2.0.12" websocket "^1.0.25" +"@parity/api@^2.1.23": + version "2.1.23" + resolved "https://registry.yarnpkg.com/@parity/api/-/api-2.1.23.tgz#c9cba0d64085cd03fafc69d1bd5b53cbabd0c280" + dependencies: + "@parity/abi" "~2.1.4" + "@parity/jsonrpc" "2.1.x" + "@parity/wordlist" "1.1.x" + bignumber.js "4.1.0" + blockies "0.0.2" + es6-error "4.0.2" + es6-promise "^4.1.1" + eventemitter3 "^2.0.2" + isomorphic-fetch "^2.2.1" + js-sha3 "0.5.5" + lodash "^4.17.4" + store "^2.0.12" + websocket "^1.0.25" + "@parity/jsonrpc@2.1.x": version "2.1.6" resolved "https://registry.yarnpkg.com/@parity/jsonrpc/-/jsonrpc-2.1.6.tgz#260bbe7dfcec18d59f0bf1668dfd6021452d6452" @@ -131,14 +149,13 @@ u2f-api "0.0.9" u2f-api-polyfill "0.4.3" -"@parity/light.js@https://github.com/parity-js/light.js#2052c910d1ff4f4e38d4cba7fb5578ac4500f0ae": +"@parity/light.js@https://github.com/parity-js/light.js#24ed8bed60917207a84d85cd5622636f8489fd7a": version "1.0.0" - resolved "https://github.com/parity-js/light.js#2052c910d1ff4f4e38d4cba7fb5578ac4500f0ae" + resolved "https://github.com/parity-js/light.js#24ed8bed60917207a84d85cd5622636f8489fd7a" dependencies: - "@babel/runtime" "^7.0.0-beta.46" - "@parity/api" "^2.1.22" + "@babel/runtime" "^7.0.0-beta.49" + "@parity/api" "^2.1.23" memoizee "^0.4.12" - rxjs "^6.1.0" "@parity/shared@^3.0.1": version "3.0.1"