From 99575bac82ccb9d47da8242b0f5d222e58194027 Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Tue, 5 Jun 2018 08:34:43 +0100 Subject: [PATCH 1/6] setup a loading screen, usable in other contexts as well --- .../AccountConfirm/AccountConfirm.js | 2 +- .../AccountWritePhrase/AccountWritePhrase.js | 6 +- src/App/App.css | 27 ++++++++- src/App/App.sass | 1 + src/Loading/Loading.js | 24 ++++---- src/assets/img/icons/back.svg | 12 ++-- src/assets/img/icons/close.svg | 14 ++--- src/assets/img/icons/gear.svg | 10 +--- src/assets/img/icons/loading.svg | 56 +++++++++++++++++++ src/assets/img/icons/tiny-reload.svg | 20 ------- src/assets/sass/components/_alert-screen.scss | 25 +++++++++ src/assets/sass/layouts/_wrapper.scss | 5 -- src/assets/sass/modules/_variables.scss | 1 - src/assets/sass/shared/_button.scss | 7 +++ 14 files changed, 141 insertions(+), 69 deletions(-) create mode 100644 src/assets/img/icons/loading.svg delete mode 100644 src/assets/img/icons/tiny-reload.svg create mode 100644 src/assets/sass/components/_alert-screen.scss diff --git a/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js b/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js index cb5f350f..61981dbe 100644 --- a/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js +++ b/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js @@ -27,7 +27,7 @@ class AccountConfirm extends Component { diff --git a/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js b/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js index bffd03e5..fd038485 100644 --- a/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js +++ b/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js @@ -76,7 +76,11 @@ class AccountWritePhrase extends Component { // If we are importing an existing account, the button sets the phrase return ( - ); diff --git a/src/App/App.css b/src/App/App.css index b37fda16..f0eda9bc 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -831,6 +831,11 @@ a, a:link, a:visited { .button:active { background-color: #1209ed; color: #f9f9f9; } + .button:disabled { + opacity: 0.5; + border-color: #ddd; + background-color: #ddd; + color: #888; } .button.-tiny { font-size: 0.69444rem; text-transform: none; @@ -1037,9 +1042,6 @@ nav.range-nav { border-radius: 0.25rem; overflow: hidden; box-shadow: 0 0.125rem 0.75rem rgba(34, 34, 34, 0.175), 0 0.125rem 0.125rem rgba(34, 34, 34, 0.1); } - .wrapper .content .window .window_content.-modal { - border-top: 0; - border-bottom: 0; } .debug-nav { background-color: rgba(34, 34, 34, 0.125); @@ -1317,3 +1319,22 @@ nav.range-nav { padding-top: 0.5rem; display: flex; justify-content: center; } + +.alert-screen { + height: 22rem; + display: flex; + align-items: center; + justify-content: center; } + .alert-screen .alert-screen_image { + display: flex; + align-items: center; + justify-content: center; } + .alert-screen .alert-screen_image img { + display: block; + width: 4rem; + 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; } diff --git a/src/App/App.sass b/src/App/App.sass index fce8707a..04f4387f 100644 --- a/src/App/App.sass +++ b/src/App/App.sass @@ -28,4 +28,5 @@ @import '../assets/sass/components/footer-nav' @import '../assets/sass/components/progress-indicator' @import '../assets/sass/components/form-nav' +@import '../assets/sass/components/alert-screen' diff --git a/src/Loading/Loading.js b/src/Loading/Loading.js index cd9f0062..eb4fb84d 100644 --- a/src/Loading/Loading.js +++ b/src/Loading/Loading.js @@ -4,6 +4,7 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; +import loading from '../assets/img/icons/loading.svg' import { inject, observer } from 'mobx-react'; import { Link, Redirect } from 'react-router-dom'; @@ -20,21 +21,16 @@ class Loading extends Component { } return ( -
-

- This is the Loading page.
-

- - +
); } diff --git a/src/assets/img/icons/back.svg b/src/assets/img/icons/back.svg index 03e2499d..9e2e7544 100644 --- a/src/assets/img/icons/back.svg +++ b/src/assets/img/icons/back.svg @@ -1,13 +1,9 @@ - - Untitled 6 - Created with Sketch. - - - - + + + - \ No newline at end of file + diff --git a/src/assets/img/icons/close.svg b/src/assets/img/icons/close.svg index 4f8c9eb6..32c56127 100644 --- a/src/assets/img/icons/close.svg +++ b/src/assets/img/icons/close.svg @@ -1,13 +1,9 @@ - - Untitled 6 - Created with Sketch. - - - - - + + + + - \ No newline at end of file + diff --git a/src/assets/img/icons/gear.svg b/src/assets/img/icons/gear.svg index 6800361f..4ad96ca7 100644 --- a/src/assets/img/icons/gear.svg +++ b/src/assets/img/icons/gear.svg @@ -1,10 +1,6 @@ - - Untitled 10 - Created with Sketch. - - - + + - \ No newline at end of file + diff --git a/src/assets/img/icons/loading.svg b/src/assets/img/icons/loading.svg new file mode 100644 index 00000000..e82c1b27 --- /dev/null +++ b/src/assets/img/icons/loading.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/icons/tiny-reload.svg b/src/assets/img/icons/tiny-reload.svg deleted file mode 100644 index d4cf5a7f..00000000 --- a/src/assets/img/icons/tiny-reload.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - Untitled 14 - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/sass/components/_alert-screen.scss b/src/assets/sass/components/_alert-screen.scss new file mode 100644 index 00000000..c3aaccdf --- /dev/null +++ b/src/assets/sass/components/_alert-screen.scss @@ -0,0 +1,25 @@ +.alert-screen { + height: 22rem; + display: flex; + align-items: center; + justify-content: center; + + .alert-screen_image { + display: flex; + align-items: center; + justify-content: center; + img { + display: block; + width: 4rem; + height: auto; + } + } + + .alert-screen_text { + margin-top: 1rem; + text-align: center; + h1, h2, big, strong { + font-weight: 600; + } + } +} diff --git a/src/assets/sass/layouts/_wrapper.scss b/src/assets/sass/layouts/_wrapper.scss index 42261950..ed2f1365 100644 --- a/src/assets/sass/layouts/_wrapper.scss +++ b/src/assets/sass/layouts/_wrapper.scss @@ -32,11 +32,6 @@ box-shadow: 0 0.125rem 0.75rem rgba($black,0.175), 0 0.125rem 0.125rem rgba($black,0.100); .window_content { - - &.-modal { - border-top: 0; - border-bottom: 0; - } } } } diff --git a/src/assets/sass/modules/_variables.scss b/src/assets/sass/modules/_variables.scss index ada25468..237c433c 100644 --- a/src/assets/sass/modules/_variables.scss +++ b/src/assets/sass/modules/_variables.scss @@ -11,7 +11,6 @@ $black: #222; $grey: #888; $purple: #330044; - $blue: #160DF6; $green: #3ec28f; $yellow: #DFCA29; diff --git a/src/assets/sass/shared/_button.scss b/src/assets/sass/shared/_button.scss index 2d4cfaa9..fcb8e8c7 100644 --- a/src/assets/sass/shared/_button.scss +++ b/src/assets/sass/shared/_button.scss @@ -19,6 +19,13 @@ color: $white; } + &:disabled { + opacity: 0.5; + border-color: $faint; + background-color: $faint; + color: $grey; + } + &.-tiny { font-size: ms(-2); text-transform: none; -- GitLab From 53b6c628c5905e727f02d22152fa3b67d783b410 Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Tue, 5 Jun 2018 12:10:54 +0100 Subject: [PATCH 2/6] some design for the signer page --- src/App/App.css | 38 +++-- src/Send/Send.js | 4 +- src/Send/Signer/Signer.js | 130 +++++++++++------- .../TokensList/TokenBalance/TokenBalance.js | 2 +- src/assets/sass/components/_account.scss | 1 - src/assets/sass/components/_footer-nav.scss | 2 + src/assets/sass/components/_form-nav.scss | 4 + src/assets/sass/components/_token.scss | 9 +- src/assets/sass/layouts/_wrapper.scss | 1 + src/assets/sass/shared/_button.scss | 2 +- src/assets/sass/shared/_form.scss | 14 +- 11 files changed, 146 insertions(+), 61 deletions(-) diff --git a/src/App/App.css b/src/App/App.css index f0eda9bc..e563c106 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -868,7 +868,7 @@ a, a:link, a:visited { opacity: 0.9; } .button.-utility:active { opacity: 1.0; } - .button.-footer { + .button.-cancel { font-size: 0.69444rem; border-width: 0; background-color: #ddd; @@ -876,9 +876,9 @@ a, a:link, a:visited { padding: 0.25rem 0.75rem; opacity: 0.8; border-radius: 1rem; } - .button.-footer:hover { + .button.-cancel:hover { opacity: 0.9; } - .button.-footer:active { + .button.-cancel:active { opacity: 1.0; } .form_field { @@ -893,6 +893,16 @@ a, a:link, a:visited { opacity: 0.75; padding: 0.5rem 0.5rem 0; display: block; } + .form_field .form_field_value { + font-size: 1rem; + font-weight: 400; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + line-height: 1.3rem; + opacity: 0.75; + margin: 0.25rem 0.5rem 0; + padding-bottom: 0.5rem; + overflow: hidden; + word-wrap: break-word; } .form_field input[type="text"], .form_field input[type="number"], .form_field input[type="tel"], .form_field input[type="email"], .form_field input[type="password"], .form_field textarea { border: 0; background: transparent; @@ -900,7 +910,7 @@ a, a:link, a:visited { font-weight: 400; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.3rem; - width: 100%; + width: calc(100% - 1rem); opacity: 0.75; padding: 0.5rem; margin-top: -0.25rem; } @@ -1042,6 +1052,8 @@ nav.range-nav { border-radius: 0.25rem; overflow: hidden; box-shadow: 0 0.125rem 0.75rem rgba(34, 34, 34, 0.175), 0 0.125rem 0.125rem rgba(34, 34, 34, 0.1); } + .wrapper .content .window .window_content { + min-height: 7.5rem; } .debug-nav { background-color: rgba(34, 34, 34, 0.125); @@ -1081,9 +1093,11 @@ nav.range-nav { overflow: hidden; } .token { - display: flex; } + display: flex; + align-items: center; + align-content: center; + justify-content: center; } .token .token_icon { - margin: -0.5rem 0 -0.5rem -0.425rem; width: 2.3rem; height: 2.3rem; display: flex; @@ -1093,17 +1107,22 @@ nav.range-nav { align-items: center; align-content: center; } .token .token_icon img { + display: block; + margin: 0; height: 1.3rem; width: auto; } .token .token_name { padding-left: 0.325rem; + height: 1.3rem; flex-grow: 1; color: #222; font-weight: 500; } .token .token_balance { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - color: #888; } + color: #888; + height: 1.3rem; } .token .token_symbol { + height: 1.3rem; font-size: 0.69444rem; } .token .token_symbol:before { content: ' '; } @@ -1121,7 +1140,6 @@ nav.range-nav { align-content: center; } .account .account_avatar canvas { display: block; - width: 2.3rem !important; height: 2.3rem !important; width: auto !important; } .account .account_information { @@ -1249,6 +1267,8 @@ nav.range-nav { .footer-nav { display: flex; + height: 3.5rem; + overflow: hidden; justify-content: space-between; } .footer-nav .footer-nav_status { padding: 1rem; @@ -1319,6 +1339,8 @@ nav.range-nav { padding-top: 0.5rem; display: flex; justify-content: center; } + .form-nav.-binary { + justify-content: space-between; } .alert-screen { height: 22rem; diff --git a/src/Send/Send.js b/src/Send/Send.js index 06e7a816..d4e4549c 100644 --- a/src/Send/Send.js +++ b/src/Send/Send.js @@ -52,11 +52,11 @@ class Send extends PureComponent { diff --git a/src/Send/Signer/Signer.js b/src/Send/Signer/Signer.js index 2dad86d9..34ad2d75 100644 --- a/src/Send/Signer/Signer.js +++ b/src/Send/Signer/Signer.js @@ -4,12 +4,22 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; +import { Link } from 'react-router-dom'; +import { map } from 'rxjs/operators'; import { fromWei } from '@parity/api/lib/util/wei'; import { inject, observer } from 'mobx-react'; -import { post$ } from '@parity/light.js'; +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$ +}) class Signer extends Component { state = { password: '', @@ -62,55 +72,83 @@ class Signer extends Component { }; render () { - const { location: { state: tx } } = this.props; + const { balance, location: { state: tx } } = this.props; const { password, status } = this.state; return ( -
-

- Request number {this.requestId} -

-

- From: {tx.from} -

-

- To: {tx.to} -

-

- Amount: {+fromWei(tx.value)}ETH -

-

- Gas: {+tx.gas} -

- {status && status.requested - ?
- -
- {' '} - -
- - @brian, for now for errors look in console, e.g. when nothing - happens when you click on Accept - + +
+ + +
+
+
+
+
+ ethereum +
+
Ethereum
+
+ {balance} + ETH +
+
+
+
+ +
+ {tx.to} +
+
+
+ +
+ {+fromWei(tx.value)} ETH +
+
+
+
+
+

Enter your password to confirm this transaction.

+
+
+ + +
+ +
+
- :

Loading...

} -
-
-

- Status: {JSON.stringify(status)} -

- +
+
); } } diff --git a/src/Tokens/TokensList/TokenBalance/TokenBalance.js b/src/Tokens/TokensList/TokenBalance/TokenBalance.js index 2ea1ba33..a12ed43f 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/_account.scss b/src/assets/sass/components/_account.scss index 32c2c5a3..855590f1 100644 --- a/src/assets/sass/components/_account.scss +++ b/src/assets/sass/components/_account.scss @@ -13,7 +13,6 @@ canvas { display: block; - width: (ms(0) * 1.3) + 1rem !important; height: (ms(0) * 1.3) + 1rem !important; width: auto !important; } diff --git a/src/assets/sass/components/_footer-nav.scss b/src/assets/sass/components/_footer-nav.scss index 676146af..b0303d85 100644 --- a/src/assets/sass/components/_footer-nav.scss +++ b/src/assets/sass/components/_footer-nav.scss @@ -1,5 +1,7 @@ .footer-nav { display: flex; + height: 3.5rem; + overflow: hidden; justify-content: space-between; .footer-nav_status { diff --git a/src/assets/sass/components/_form-nav.scss b/src/assets/sass/components/_form-nav.scss index 361d4411..9758a30d 100644 --- a/src/assets/sass/components/_form-nav.scss +++ b/src/assets/sass/components/_form-nav.scss @@ -2,4 +2,8 @@ padding-top: 0.5rem; display: flex; justify-content: center; + + &.-binary { + justify-content: space-between; + } } diff --git a/src/assets/sass/components/_token.scss b/src/assets/sass/components/_token.scss index ddde4273..baa51158 100644 --- a/src/assets/sass/components/_token.scss +++ b/src/assets/sass/components/_token.scss @@ -1,8 +1,10 @@ .token { display: flex; + align-items: center; + align-content: center; + justify-content: center; .token_icon { - margin: -0.5rem 0 -0.5rem -0.425rem; width: (ms(0) * 1.3) + 1rem; height: (ms(0) * 1.3) + 1rem; display: flex; @@ -13,6 +15,8 @@ align-content: center; img { + display: block; + margin: 0; height: (ms(0) * 1.3); width: auto; } @@ -20,6 +24,7 @@ .token_name { padding-left: 0.325rem; + height: ms(0) * 1.3; flex-grow: 1; color: $black; font-weight: 500; @@ -28,9 +33,11 @@ .token_balance { font-family: $mono; color: $grey; + height: ms(0) * 1.3; } .token_symbol { + height: ms(0) * 1.3; font-size: ms(-2); &:before { content: ' '; diff --git a/src/assets/sass/layouts/_wrapper.scss b/src/assets/sass/layouts/_wrapper.scss index ed2f1365..470ddbe5 100644 --- a/src/assets/sass/layouts/_wrapper.scss +++ b/src/assets/sass/layouts/_wrapper.scss @@ -32,6 +32,7 @@ box-shadow: 0 0.125rem 0.75rem rgba($black,0.175), 0 0.125rem 0.125rem rgba($black,0.100); .window_content { + min-height: 7.5rem; } } } diff --git a/src/assets/sass/shared/_button.scss b/src/assets/sass/shared/_button.scss index fcb8e8c7..62ea0219 100644 --- a/src/assets/sass/shared/_button.scss +++ b/src/assets/sass/shared/_button.scss @@ -72,7 +72,7 @@ } } - &.-footer { + &.-cancel { font-size: ms(-2); border-width: 0; background-color: $faint; diff --git a/src/assets/sass/shared/_form.scss b/src/assets/sass/shared/_form.scss index 4725a58e..72284ede 100644 --- a/src/assets/sass/shared/_form.scss +++ b/src/assets/sass/shared/_form.scss @@ -13,6 +13,18 @@ display: block } + .form_field_value { + font-size: ms(0); + font-weight: 400; + font-family: $sans; + line-height: ms(0) * 1.3; + opacity: 0.75; + margin: 0.25rem 0.5rem 0; + padding-bottom: 0.5rem; + overflow: hidden; + word-wrap: break-word; + } + input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], textarea { border: 0; background: transparent; @@ -20,7 +32,7 @@ font-weight: 400; font-family: $sans; line-height: ms(0) * 1.3; - width: 100%; + width: calc(100% - 1rem;); opacity: 0.75; padding: 0.5rem; margin-top: -0.25rem; -- GitLab From ff3823ffad63bdd1a23f2c8aea6de4222481291f Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Tue, 5 Jun 2018 14:44:26 +0100 Subject: [PATCH 3/6] some design for the settings page --- src/App/App.css | 60 +++++++- src/App/App.sass | 1 + src/Loading/Loading.js | 6 +- src/Send/Signer/Signer.js | 8 +- .../NewTokenItem/NewTokenItem.js | 12 +- .../NewTokenItem/index.js | 0 src/Settings/Settings.js | 134 ++++++++++++++++-- src/Tokens/NewToken/NewToken.js | 109 -------------- src/Tokens/NewToken/index.js | 8 -- src/Tokens/Tokens.js | 10 +- src/assets/sass/components/_search-form.scss | 31 ++++ src/assets/sass/components/_token.scss | 4 + src/assets/sass/shared/_box.scss | 3 - src/assets/sass/shared/_button.scss | 32 +++++ src/assets/sass/shared/_form.scss | 10 +- 15 files changed, 263 insertions(+), 165 deletions(-) rename src/{Tokens/NewToken => Settings}/NewTokenItem/NewTokenItem.js (74%) rename src/{Tokens/NewToken => Settings}/NewTokenItem/index.js (100%) delete mode 100644 src/Tokens/NewToken/NewToken.js delete mode 100644 src/Tokens/NewToken/index.js create mode 100644 src/assets/sass/components/_search-form.scss diff --git a/src/App/App.css b/src/App/App.css index e563c106..a9c63db2 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -868,6 +868,12 @@ a, a:link, a:visited { opacity: 0.9; } .button.-utility:active { opacity: 1.0; } + .button.-utility.-good { + background-color: #3ec28f; + color: #f9f9f9; } + .button.-utility.-bad { + background-color: #C2473E; + color: #f9f9f9; } .button.-cancel { font-size: 0.69444rem; border-width: 0; @@ -880,6 +886,22 @@ a, a:link, a:visited { opacity: 0.9; } .button.-cancel:active { opacity: 1.0; } + .button.-icon { + text-indent: -9999rem; + background-size: 0.83333rem auto; + background-position: center center; + background-repeat: no-repeat; + border-radius: 0; + border: 0; + opacity: 0.5; } + .button.-icon:hover { + background-color: transparent; + opacity: 0.675; } + .button.-icon:active { + background-color: transparent; + opacity: 1; } + .button.-icon.-clear { + background-image: url("../assets/img/icons/close.svg"); } .form_field { margin: 0.5rem 0; @@ -894,9 +916,9 @@ a, a:link, a:visited { padding: 0.5rem 0.5rem 0; display: block; } .form_field .form_field_value { - font-size: 1rem; + font-size: 0.83333rem; font-weight: 400; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; line-height: 1.3rem; opacity: 0.75; margin: 0.25rem 0.5rem 0; @@ -908,7 +930,7 @@ a, a:link, a:visited { background: transparent; font-size: 1rem; font-weight: 400; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; line-height: 1.3rem; width: calc(100% - 1rem); opacity: 0.75; @@ -949,8 +971,8 @@ a, a:link, a:visited { height: 8rem; } input.form_field_amount[type='number'] { - font-size: 4.29982rem; - line-height: 4.7298rem; + font-size: 2.98598rem; + line-height: 3.28458rem; font-weight: 200; text-align: center; -webkit-appearance: none; } @@ -1126,6 +1148,8 @@ nav.range-nav { font-size: 0.69444rem; } .token .token_symbol:before { content: ' '; } + .token .token_buttons { + padding-left: 0.5rem; } .account { display: flex; } @@ -1360,3 +1384,29 @@ nav.range-nav { 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; } + +.search-form { + display: flex; + justify-content: space-between; + padding: 0; + border-radius: 0.25rem; + background-color: #fff; + border: 0px solid #fff; + overflow: hidden; + box-shadow: 0 0.125rem 0.5rem rgba(34, 34, 34, 0.125); + margin-bottom: -0.5rem; } + .search-form input[type='text'] { + border: 0; + background: transparent; + font-size: 0.83333rem; + font-weight: 400; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + line-height: 1.3rem; + width: calc(100% - 2rem); + opacity: 0.75; + padding: 0.6rem 0.5rem 0.5rem; } + .search-form input[type='text']:focus { + opacity: 1; } + .search-form button { + width: 2.349375rem; + height: 2.349375rem; } diff --git a/src/App/App.sass b/src/App/App.sass index 04f4387f..d842327f 100644 --- a/src/App/App.sass +++ b/src/App/App.sass @@ -29,4 +29,5 @@ @import '../assets/sass/components/progress-indicator' @import '../assets/sass/components/form-nav' @import '../assets/sass/components/alert-screen' +@import '../assets/sass/components/search-form' diff --git a/src/Loading/Loading.js b/src/Loading/Loading.js index eb4fb84d..57e1b1f5 100644 --- a/src/Loading/Loading.js +++ b/src/Loading/Loading.js @@ -4,11 +4,9 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; -import loading from '../assets/img/icons/loading.svg' +import loading from '../assets/img/icons/loading.svg'; import { inject, observer } from 'mobx-react'; -import { Link, Redirect } from 'react-router-dom'; - -import Health from '../Health'; +import { Redirect } from 'react-router-dom'; @inject('parityStore') @observer diff --git a/src/Send/Signer/Signer.js b/src/Send/Signer/Signer.js index 34ad2d75..f398182a 100644 --- a/src/Send/Signer/Signer.js +++ b/src/Send/Signer/Signer.js @@ -105,15 +105,15 @@ class Signer extends Component {
- +
- {tx.to} + {+fromWei(tx.value)} ETH
- +
- {+fromWei(tx.value)} ETH + {tx.to}
diff --git a/src/Tokens/NewToken/NewTokenItem/NewTokenItem.js b/src/Settings/NewTokenItem/NewTokenItem.js similarity index 74% rename from src/Tokens/NewToken/NewTokenItem/NewTokenItem.js rename to src/Settings/NewTokenItem/NewTokenItem.js index 049622ac..5f01cdfc 100644 --- a/src/Tokens/NewToken/NewTokenItem/NewTokenItem.js +++ b/src/Settings/NewTokenItem/NewTokenItem.js @@ -14,13 +14,13 @@ class NewTokenItem extends Component { handleAddToken = () => { const { history, token, tokensStore } = this.props; tokensStore.addToken(token.address, token); - history.goBack(); + this.forceUpdate(); // TODO: I assume this is not the preferred way to do this! }; handleRemoveToken = () => { const { history, token, tokensStore } = this.props; tokensStore.removeToken(token.address); - history.goBack(); + this.forceUpdate(); }; render () { @@ -40,9 +40,11 @@ class NewTokenItem extends Component { {token.symbol} - {tokens.has(token.address) - ? - : } +
+ {tokens.has(token.address) + ? + : } +
); diff --git a/src/Tokens/NewToken/NewTokenItem/index.js b/src/Settings/NewTokenItem/index.js similarity index 100% rename from src/Tokens/NewToken/NewTokenItem/index.js rename to src/Settings/NewTokenItem/index.js diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js index a92506d5..648697f5 100644 --- a/src/Settings/Settings.js +++ b/src/Settings/Settings.js @@ -3,33 +3,137 @@ // // SPDX-License-Identifier: MIT -import React, { PureComponent } from 'react'; +import React, { Component } from 'react'; +import { chainName$ } from '@parity/light.js'; +import debounce from 'lodash/debounce'; +import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; -import Health from '../Health'; +import light from '../hoc'; +import NewTokenItem from './NewTokenItem'; + +@light({ + chainName: chainName$ +}) +@inject('tokensStore') +@observer +class Settings extends Component { + state = { + db: null, + dbMap: null, + matches: this.props.tokensStore.tokensArrayWithoutEth, + search: '' + }; + + calculateMatches = debounce(() => { + const { tokensStore: { tokensArrayWithoutEth } } = this.props; + const { db, search } = this.state; + + if (search.length <= 1) { + this.setState({ matches: tokensArrayWithoutEth }); + return; + } + + const matches = db + ? db.filter( + ({ name, symbol }) => + name.toLowerCase().includes(search.toLowerCase()) || + symbol.toLowerCase().includes(search.toLowerCase()) + ) + : []; + this.setState({ matches }); + }, 500); + + componentDidMount () { + if (this.props.chainName) { + this.fetchTokensDb(); + } + } + + componentDidUpdate (prevProps) { + if (this.props.chainName && !prevProps.chainName) { + this.fetchTokensDb(); + } + } + + fetchTokensDb = async () => { + if (this.state.db) { + // Don't fetch again if it's already fetched + return; + } + + // We only fetch this huge json if the user visits this NewToken page. We + // try to avoid it as much as possible. All other tokens info (used in the + // homepage) are stored in localStorage. + let db; + try { + db = await import(`../assets/tokens/${this.props.chainName}.json`); + } catch (e) { + db = await import(`../assets/tokens/foundation.json`); + } + + // We create a address=>token mapping here + const dbMap = {}; + db.forEach(token => (dbMap[token.address] = token)); + + // Commit this into the state + this.setState({ db, dbMap }); + }; + + handleSearch = ({ target: { value } }) => { + this.setState({ search: value }); + this.calculateMatches(); + }; + + handleClear = () => { + this.setState({ search: '' }); + this.calculateMatches(); + }; -class Settings extends PureComponent { render () { + const { matches, search } = this.state; + return (
-

Settings page

-
- - +
); } diff --git a/src/Tokens/NewToken/NewToken.js b/src/Tokens/NewToken/NewToken.js deleted file mode 100644 index 6b75b580..00000000 --- a/src/Tokens/NewToken/NewToken.js +++ /dev/null @@ -1,109 +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 { chainName$ } from '@parity/light.js'; -import debounce from 'lodash/debounce'; -import { inject, observer } from 'mobx-react'; - -import light from '../../hoc'; -import NewTokenItem from './NewTokenItem'; - -@light({ - chainName: chainName$ -}) -@inject('tokensStore') -@observer -class NewToken extends Component { - state = { - db: null, - dbMap: null, - matches: this.props.tokensStore.tokensArrayWithoutEth, - search: '' - }; - - calculateMatches = debounce(() => { - const { tokensStore: { tokensArrayWithoutEth } } = this.props; - const { db, search } = this.state; - - if (search.length <= 1) { - this.setState({ matches: tokensArrayWithoutEth }); - return; - } - - const matches = db - ? db.filter( - ({ name, symbol }) => - name.toLowerCase().includes(search.toLowerCase()) || - symbol.toLowerCase().includes(search.toLowerCase()) - ) - : []; - this.setState({ matches }); - }, 500); - - componentDidMount () { - if (this.props.chainName) { - this.fetchTokensDb(); - } - } - - componentDidUpdate (prevProps) { - if (this.props.chainName && !prevProps.chainName) { - this.fetchTokensDb(); - } - } - - fetchTokensDb = async () => { - if (this.state.db) { - // Don't fetch again if it's already fetched - return; - } - - // We only fetch this huge json if the user visits this NewToken page. We - // try to avoid it as much as possible. All other tokens info (used in the - // homepage) are stored in localStorage. - let db; - try { - db = await import(`../../assets/tokens/${this.props.chainName}.json`); - } catch (e) { - db = await import(`../../assets/tokens/foundation.json`); - } - - // We create a address=>token mapping here - const dbMap = {}; - db.forEach(token => (dbMap[token.address] = token)); - - // Commit this into the state - this.setState({ db, dbMap }); - }; - - handleSearch = ({ target: { value } }) => { - this.setState({ search: value }); - this.calculateMatches(); - }; - - render () { - const { matches, search } = this.state; - - return ( -
- -
-
    - {matches.map(token => - - )} -
-
-
- ); - } -} - -export default NewToken; diff --git a/src/Tokens/NewToken/index.js b/src/Tokens/NewToken/index.js deleted file mode 100644 index 59270b25..00000000 --- a/src/Tokens/NewToken/index.js +++ /dev/null @@ -1,8 +0,0 @@ -// Copyright 2015-2018 Parity Technologies (UK) Ltd. -// This file is part of Parity. -// -// SPDX-License-Identifier: MIT - -import NewToken from './NewToken'; - -export default NewToken; diff --git a/src/Tokens/Tokens.js b/src/Tokens/Tokens.js index 5b07fb1e..06976c5e 100644 --- a/src/Tokens/Tokens.js +++ b/src/Tokens/Tokens.js @@ -5,11 +5,10 @@ import React, { PureComponent } from 'react'; import { accountsInfo$, defaultAccount$ } from '@parity/light.js'; -import { Link, Route, Switch } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import Health from '../Health'; import light from '../hoc'; -import NewToken from './NewToken'; import TokensList from './TokensList'; @light({ @@ -38,17 +37,14 @@ class Tokens extends PureComponent {
- - - - +