From 68810af384644890c1112acca1bd07f187908ae1 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Tue, 12 Jun 2018 17:25:03 +0200 Subject: [PATCH 01/10] Use lerna run instead of npm-run-all --- package.json | 13 +++---------- packages/light-electron/package.json | 2 +- yarn.lock | 2 +- 3 files changed, 5 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 9645dd60..c0cb3eda 100644 --- a/package.json +++ b/package.json @@ -37,25 +37,18 @@ "yarn": "^1.4.2" }, "scripts": { - "build": "npm-run-all -l build-hoc build-react build-electron", - "build-electron": "cd packages/light-electron && npm run build", + "build": "lerna run build", "build-hoc": "cd packages/light-hoc && npm run build", - "build-react": "cd packages/light-react && npm run build", "preelectron": "npm run build", "electron": "cd packages/light-electron && npm run electron --", - "lint": "npm-run-all -l lint-*", - "lint-electron": "cd packages/light-electron && npm run lint", - "lint-hoc": "cd packages/light-hoc && npm run lint", - "lint-react": "cd packages/light-react && npm run lint", + "lint": "lerna run lint", "prepackage": "npm run build", "package": "cd packages/light-electron && npm run package", "release": "cd packages/light-electron && npm run release --", "start": "npm-run-all -l -s build-hoc -p start-*", "start-electron": "cd packages/light-electron && npm start", "start-react": "cd packages/light-react && npm start", - "test": "npm-run-all -l test-*", - "test-electron": "cd packages/light-electron && npm test", - "test-react": "cd packages/light-react && npm test" + "test": "lerna run test" }, "devDependencies": { "lerna": "^2.11.0", diff --git a/packages/light-electron/package.json b/packages/light-electron/package.json index 237d35bd..512d2bb4 100644 --- a/packages/light-electron/package.json +++ b/packages/light-electron/package.json @@ -44,7 +44,7 @@ "command-exists": "^1.2.6", "commander": "^2.15.1", "electron-dl": "^1.11.0", - "light-hoc": "^0.1.0", + "light-react": "^0.1.0", "pino": "^4.16.1", "pino-multi-stream": "^3.1.2", "promise-any": "^0.2.0", diff --git a/yarn.lock b/yarn.lock index ffb171ba..2fdee6eb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10536,7 +10536,7 @@ sockjs@0.3.19: faye-websocket "^0.10.0" uuid "^3.0.1" -"solc@github:ngotchac/solc-js": +solc@ngotchac/solc-js: version "0.4.4" resolved "https://codeload.github.com/ngotchac/solc-js/tar.gz/04eb38cc3003fba8cb3656653a7941ed36408818" dependencies: -- GitLab From cd4abc6716df85c355dbe6c0511879e26f0277f9 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 13 Jun 2018 10:56:13 +0200 Subject: [PATCH 02/10] Add light-ui package --- package.json | 6 +- packages/light-react/package.json | 1 + packages/light-ui/README.md | 3 + packages/light-ui/babel.config.js | 11 ++++ packages/light-ui/package.json | 50 +++++++++++++++ packages/light-ui/src/Header/Header.js | 16 +++++ packages/light-ui/src/Header/index.js | 8 +++ packages/light-ui/src/index.js | 8 +++ packages/light-ui/src/theme/colors.js | 17 +++++ packages/light-ui/src/theme/index.js | 6 ++ yarn.lock | 87 ++++++++++++++++++++++++-- 11 files changed, 207 insertions(+), 6 deletions(-) create mode 100644 packages/light-ui/README.md create mode 100644 packages/light-ui/babel.config.js create mode 100644 packages/light-ui/package.json create mode 100644 packages/light-ui/src/Header/Header.js create mode 100644 packages/light-ui/src/Header/index.js create mode 100644 packages/light-ui/src/index.js create mode 100644 packages/light-ui/src/theme/colors.js create mode 100644 packages/light-ui/src/theme/index.js diff --git a/package.json b/package.json index c0cb3eda..cb3091df 100644 --- a/package.json +++ b/package.json @@ -39,16 +39,18 @@ "scripts": { "build": "lerna run build", "build-hoc": "cd packages/light-hoc && npm run build", + "build-ui": "cd packages/light-hoc && npm run build --", "preelectron": "npm run build", "electron": "cd packages/light-electron && npm run electron --", - "lint": "lerna run lint", + "lint": "lerna run lint --parallel", "prepackage": "npm run build", "package": "cd packages/light-electron && npm run package", "release": "cd packages/light-electron && npm run release --", "start": "npm-run-all -l -s build-hoc -p start-*", "start-electron": "cd packages/light-electron && npm start", "start-react": "cd packages/light-react && npm start", - "test": "lerna run test" + "start-ui": "cd packages/light-ui && npm start", + "test": "lerna run test --parallel" }, "devDependencies": { "lerna": "^2.11.0", diff --git a/packages/light-react/package.json b/packages/light-react/package.json index 3a8a8b61..a8322949 100644 --- a/packages/light-react/package.json +++ b/packages/light-react/package.json @@ -40,6 +40,7 @@ "@parity/shared": "^3.0.1", "is-electron": "^2.1.0", "light-hoc": "^0.1.0", + "light-ui": "^0.1.0", "lodash": "^4.17.10", "mobx": "^4.2.0", "mobx-react": "^5.1.2", diff --git a/packages/light-ui/README.md b/packages/light-ui/README.md new file mode 100644 index 00000000..e27fb364 --- /dev/null +++ b/packages/light-ui/README.md @@ -0,0 +1,3 @@ +# light-ui + +UI components used in the light wallet. diff --git a/packages/light-ui/babel.config.js b/packages/light-ui/babel.config.js new file mode 100644 index 00000000..4c40e97b --- /dev/null +++ b/packages/light-ui/babel.config.js @@ -0,0 +1,11 @@ +module.exports = { + plugins: [ + '@babel/plugin-proposal-class-properties', + ['emotion', { sourceMap: true, autoLabel: true }] + ], + presets: [ + '@babel/preset-env', + '@babel/preset-react', + ['@babel/preset-stage-0', { decoratorsLegacy: true }] + ] +}; diff --git a/packages/light-ui/package.json b/packages/light-ui/package.json new file mode 100644 index 00000000..c21d798f --- /dev/null +++ b/packages/light-ui/package.json @@ -0,0 +1,50 @@ +{ + "name": "light-ui", + "description": "The Parity Light Wallet", + "version": "0.1.0", + "private": true, + "author": "Parity Team ", + "maintainers": [ + "Jaco Greeff", + "Amaury Martiny" + ], + "contributors": [], + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/parity-js/light.git" + }, + "bugs": { + "url": "https://github.com/parity-js/light/issues" + }, + "keywords": [ + "Ethereum", + "Light", + "Light Client", + "Parity" + ], + "homepage": "https://github.com/parity-js/light", + "main": "lib/index.js", + "scripts": { + "prebuild": "rimraf lib", + "build": "babel src --out-dir lib", + "lint": "semistandard 'src/**/*.js' --parser babel-eslint", + "start": "yarn build --watch" + }, + "dependencies": {}, + "devDependencies": { + "@babel/cli": "^7.0.0-beta.49", + "@babel/core": "^7.0.0-beta.49", + "@babel/preset-env": "^7.0.0-beta.49", + "@babel/preset-react": "^7.0.0-beta.49", + "@babel/preset-stage-0": "^7.0.0-beta.49", + "babel-eslint": "^8.2.3", + "babel-plugin-emotion": "^9.2.0", + "react": "^16.4.0", + "rimraf": "^2.6.2", + "semistandard": "^12.0.1" + }, + "peerDependencies": { + "react": "^16.4.0" + } +} diff --git a/packages/light-ui/src/Header/Header.js b/packages/light-ui/src/Header/Header.js new file mode 100644 index 00000000..68f9425d --- /dev/null +++ b/packages/light-ui/src/Header/Header.js @@ -0,0 +1,16 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React from 'react'; + +const Header = ({ left, right, title }) => ( +
+
{left}
+
{title}
+
{right}
+
+); + +export default Header; diff --git a/packages/light-ui/src/Header/index.js b/packages/light-ui/src/Header/index.js new file mode 100644 index 00000000..1b5afdbf --- /dev/null +++ b/packages/light-ui/src/Header/index.js @@ -0,0 +1,8 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import Header from './Header'; + +export default Header; diff --git a/packages/light-ui/src/index.js b/packages/light-ui/src/index.js new file mode 100644 index 00000000..58c6dbeb --- /dev/null +++ b/packages/light-ui/src/index.js @@ -0,0 +1,8 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import Header from './Header'; + +export { Header }; diff --git a/packages/light-ui/src/theme/colors.js b/packages/light-ui/src/theme/colors.js new file mode 100644 index 00000000..a3e7bf79 --- /dev/null +++ b/packages/light-ui/src/theme/colors.js @@ -0,0 +1,17 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +export const eggshell = '#ffffff'; +export const white = '#f9f9f9'; +export const chrome = '#F5F6F6'; +export const faint = '#dddddd'; +export const black = '#222222'; +export const grey = '#888888'; + +export const purple = '#330044'; +export const blue = '#160DF6'; +export const green = '#3ec28f'; +export const yellow = '#DFCA29'; +export const red = '#C2473E'; diff --git a/packages/light-ui/src/theme/index.js b/packages/light-ui/src/theme/index.js new file mode 100644 index 00000000..cd94a861 --- /dev/null +++ b/packages/light-ui/src/theme/index.js @@ -0,0 +1,6 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +export * from './colors'; diff --git a/yarn.lock b/yarn.lock index 2fdee6eb..7d96ce2c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -167,6 +167,13 @@ "@babel/types" "7.0.0-beta.35" lodash "^4.2.0" +"@babel/helper-module-imports@7.0.0-beta.40": + version "7.0.0-beta.40" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.40.tgz#251cbb6404599282e8f7356a5b32c9381bef5d2d" + dependencies: + "@babel/types" "7.0.0-beta.40" + lodash "^4.2.0" + "@babel/helper-module-imports@7.0.0-beta.49": version "7.0.0-beta.49" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.49.tgz#41d7d59891016c493432a46f7464446552890c75" @@ -910,6 +917,14 @@ lodash "^4.2.0" to-fast-properties "^2.0.0" +"@babel/types@7.0.0-beta.40": + version "7.0.0-beta.40" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.40.tgz#25c3d7aae14126abe05fcb098c65a66b6d6b8c14" + dependencies: + esutils "^2.0.2" + lodash "^4.2.0" + to-fast-properties "^2.0.0" + "@babel/types@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757" @@ -926,6 +941,22 @@ lodash "^4.17.5" to-fast-properties "^2.0.0" +"@emotion/babel-utils@^0.5.3": + version "0.5.3" + resolved "https://registry.yarnpkg.com/@emotion/babel-utils/-/babel-utils-0.5.3.tgz#6be6dd7a480fdbdfb6cbba7f4f6d9361744b8d6e" + +"@emotion/hash@^0.6.2": + version "0.6.3" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.3.tgz#0e7a5604626fc6c6d4ac4061a2f5ac80d50262a4" + +"@emotion/memoize@^0.6.1": + version "0.6.2" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.2.tgz#138e00b332d519b4e307bded6159e5ba48aba3ae" + +"@emotion/stylis@^0.6.5": + version "0.6.8" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.6.8.tgz#6ad4e8d32b19b440efa4481bbbcb98a8c12765bb" + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -1859,6 +1890,23 @@ babel-plugin-dynamic-import-node@1.1.0: babel-template "^6.26.0" babel-types "^6.26.0" +babel-plugin-emotion@^9.2.0: + version "9.2.0" + resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.0.tgz#43543dd02c7b5cd89d464aeedef864edb754b852" + dependencies: + "@babel/helper-module-imports" "7.0.0-beta.40" + "@emotion/babel-utils" "^0.5.3" + "@emotion/hash" "^0.6.2" + "@emotion/memoize" "^0.6.1" + "@emotion/stylis" "^0.6.5" + babel-plugin-macros "^2.0.0" + babel-plugin-syntax-jsx "^6.18.0" + convert-source-map "^1.5.0" + find-root "^1.1.0" + mkdirp "^0.5.1" + source-map "^0.5.7" + touch "^1.0.0" + babel-plugin-istanbul@^4.0.0: version "4.1.6" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45" @@ -1872,6 +1920,12 @@ babel-plugin-jest-hoist@^20.0.3: version "20.0.3" resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-20.0.3.tgz#afedc853bd3f8dc3548ea671fbe69d03cc2c1767" +babel-plugin-macros@^2.0.0: + version "2.2.2" + resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.2.2.tgz#049c93f4b934453688a6ec38bba529c55bf0fa1f" + dependencies: + cosmiconfig "^4.0.0" + babel-plugin-syntax-async-functions@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95" @@ -1912,7 +1966,7 @@ babel-plugin-syntax-flow@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d" -babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: +babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -3553,6 +3607,15 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1: parse-json "^2.2.0" require-from-string "^1.1.0" +cosmiconfig@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc" + dependencies: + is-directory "^0.3.1" + js-yaml "^3.9.0" + parse-json "^4.0.0" + require-from-string "^2.0.1" + create-ecdh@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff" @@ -5337,7 +5400,7 @@ find-cache-dir@^1.0.0: make-dir "^1.0.0" pkg-dir "^2.0.0" -find-root@^1.0.0: +find-root@^1.0.0, find-root@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" @@ -7071,7 +7134,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" -js-yaml@^3.11.0, js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1: +js-yaml@^3.11.0, js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.0, js-yaml@^3.9.1: version "3.12.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1" dependencies: @@ -8248,6 +8311,12 @@ nopt@^4.0.1: abbrev "1" osenv "^0.1.4" +nopt@~1.0.10: + version "1.0.10" + resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee" + dependencies: + abbrev "1" + normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f" @@ -9615,7 +9684,7 @@ react-scripts@1.1.4: optionalDependencies: fsevents "^1.1.3" -react@^16.3.2: +react@^16.3.2, react@^16.4.0: version "16.4.0" resolved "https://registry.yarnpkg.com/react/-/react-16.4.0.tgz#402c2db83335336fba1962c08b98c6272617d585" dependencies: @@ -10045,6 +10114,10 @@ require-from-string@^1.1.0: version "1.2.1" resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418" +require-from-string@^2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909" + require-main-filename@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1" @@ -11242,6 +11315,12 @@ toposort@^1.0.0: version "1.0.7" resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029" +touch@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de" + dependencies: + nopt "~1.0.10" + tough-cookie@^2.3.2: version "2.4.2" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.2.tgz#aa9133154518b494efab98a58247bfc38818c00c" -- GitLab From e9a5684f92d11d82d6c54e395c9d1c3caceaa1e1 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 13 Jun 2018 10:56:53 +0200 Subject: [PATCH 03/10] Add Header component everywhere --- .../src/Accounts/AccountsList/AccountsList.js | 14 +++---- .../Accounts/CreateAccount/CreateAccount.js | 25 ++++++------- packages/light-react/src/Receive/Receive.js | 14 +++---- packages/light-react/src/Send/Sent/Sent.js | 37 +++++-------------- .../light-react/src/Send/Signer/Signer.js | 19 +++++----- .../light-react/src/Send/TxForm/TxForm.js | 17 ++++----- packages/light-react/src/Settings/Settings.js | 14 +++---- packages/light-react/src/Tokens/Tokens.js | 14 +++---- 8 files changed, 64 insertions(+), 90 deletions(-) diff --git a/packages/light-react/src/Accounts/AccountsList/AccountsList.js b/packages/light-react/src/Accounts/AccountsList/AccountsList.js index 1cb732e8..9f22fbf3 100644 --- a/packages/light-react/src/Accounts/AccountsList/AccountsList.js +++ b/packages/light-react/src/Accounts/AccountsList/AccountsList.js @@ -6,6 +6,7 @@ import React, { Component } from 'react'; import { accountsInfo$ } from '@parity/light.js'; import Blockies from 'react-blockies'; +import { Header } from 'light-ui'; import { inject, observer } from 'mobx-react'; import light from 'light-hoc'; @@ -44,17 +45,14 @@ class AccountsList extends Component { return (
- + } + />
diff --git a/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js b/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js index 2bc9fd81..ac823f30 100644 --- a/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js +++ b/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js @@ -4,9 +4,10 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; -import { Route } from 'react-router-dom'; +import { Header } from 'light-ui'; import { inject, observer } from 'mobx-react'; import memoize from 'lodash/memoize'; +import { Route } from 'react-router-dom'; import AccountConfirm from './AccountConfirm'; import AccountCopyPhrase from './AccountCopyPhrase'; @@ -35,14 +36,12 @@ class CreateAccount extends Component { handleCreateAccount = () => { this.props.createAccountStore.setIsImporting(false); - this.props.history.push('/accounts/new'); }; handleGoBack = () => this.props.history.goBack(); handleImportAccount = () => { this.props.createAccountStore.setIsImporting(true); - this.props.history.push('/accounts/new'); }; render () { @@ -58,16 +57,16 @@ class CreateAccount extends Component { return (
- + } + />
{Steps.map((StepComponent, index) => ( diff --git a/packages/light-react/src/Receive/Receive.js b/packages/light-react/src/Receive/Receive.js index c7a5e22a..e6c44160 100644 --- a/packages/light-react/src/Receive/Receive.js +++ b/packages/light-react/src/Receive/Receive.js @@ -6,6 +6,7 @@ import React, { PureComponent } from 'react'; import { accountsInfo$, defaultAccount$ } from '@parity/light.js'; import Blockie from 'react-blockies'; +import { Header } from 'light-ui'; import light from 'light-hoc'; import { Link } from 'react-router-dom'; @@ -21,21 +22,20 @@ class Receive extends PureComponent { return (
- + } + />
diff --git a/packages/light-react/src/Send/Sent/Sent.js b/packages/light-react/src/Send/Sent/Sent.js index d3cc163f..b3ad1f3a 100644 --- a/packages/light-react/src/Send/Sent/Sent.js +++ b/packages/light-react/src/Send/Sent/Sent.js @@ -22,35 +22,16 @@ const MIN_CONFIRMATIONS = 6; @observer class Sent extends Component { render () { - const { - sendStore: { confirmations, token } - } = this.props; - return ( -
- -
-
-
-
- loading -
-
-

{this.renderTitle()}

-

{this.renderDescription()}

-
+
+
+
+
+ loading +
+
+

{this.renderTitle()}

+

{this.renderDescription()}

diff --git a/packages/light-react/src/Send/Signer/Signer.js b/packages/light-react/src/Send/Signer/Signer.js index f22dfe2b..910fca54 100644 --- a/packages/light-react/src/Send/Signer/Signer.js +++ b/packages/light-react/src/Send/Signer/Signer.js @@ -4,6 +4,7 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; +import { Header } from 'light-ui'; import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; @@ -45,17 +46,15 @@ class Signer extends Component { return (
- + } + title={

Send {token.name}

} + /> +
diff --git a/packages/light-react/src/Send/TxForm/TxForm.js b/packages/light-react/src/Send/TxForm/TxForm.js index 84ba02a3..768602d3 100644 --- a/packages/light-react/src/Send/TxForm/TxForm.js +++ b/packages/light-react/src/Send/TxForm/TxForm.js @@ -5,7 +5,8 @@ import React, { Component } from 'react'; import { defaultAccount$ } from '@parity/light.js'; -import { fromWei, toWei } from '@parity/api/lib/util/wei'; // TODO @parity/api's wei util should have Gwei as an unit +import { fromWei, toWei } from '@parity/api/lib/util/wei'; +import { Header } from 'light-ui'; import { inject, observer } from 'mobx-react'; import light from 'light-hoc'; import { Link } from 'react-router-dom'; @@ -65,17 +66,15 @@ class Send extends Component { return (
- + } + title={

Send {token.name}

} + /> +
diff --git a/packages/light-react/src/Settings/Settings.js b/packages/light-react/src/Settings/Settings.js index 42057fde..da4f8d0a 100644 --- a/packages/light-react/src/Settings/Settings.js +++ b/packages/light-react/src/Settings/Settings.js @@ -6,6 +6,7 @@ import React, { Component } from 'react'; import { chainName$ } from '@parity/light.js'; import debounce from 'lodash/debounce'; +import { Header } from 'light-ui'; import { inject, observer } from 'mobx-react'; import light from 'light-hoc'; import { Link } from 'react-router-dom'; @@ -97,17 +98,14 @@ class Settings extends Component { return (
- + } + title={

Edit token whitelist

} + />
diff --git a/packages/light-react/src/Tokens/Tokens.js b/packages/light-react/src/Tokens/Tokens.js index 2f069ea2..921e2b29 100644 --- a/packages/light-react/src/Tokens/Tokens.js +++ b/packages/light-react/src/Tokens/Tokens.js @@ -6,6 +6,7 @@ import React, { PureComponent } from 'react'; import { accountsInfo$, defaultAccount$ } from '@parity/light.js'; import light from 'light-hoc'; +import { Header } from 'light-ui'; import { Link } from 'react-router-dom'; import Health from '../Health'; @@ -21,21 +22,20 @@ class Tokens extends PureComponent { return (
- + } + /> -- GitLab From 3f3e2d5cf5f9d1c1164fb5674ad1dce0cabba361 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 13 Jun 2018 11:01:56 +0200 Subject: [PATCH 04/10] Put sass in index.js --- packages/light-react/src/App/App.js | 1 - packages/light-react/src/App/App.sass | 32 ------------------- .../assets/sass/components/_footer-nav.scss | 6 ++-- .../assets/sass/components/_header-nav.scss | 20 +++++++----- .../src/assets/sass/shared/_button.scss | 4 +-- packages/light-react/src/index.js | 1 + packages/light-react/src/index.sass | 32 +++++++++++++++++++ 7 files changed, 50 insertions(+), 46 deletions(-) delete mode 100644 packages/light-react/src/App/App.sass create mode 100644 packages/light-react/src/index.sass diff --git a/packages/light-react/src/App/App.js b/packages/light-react/src/App/App.js index c1043dcd..3a779ef4 100644 --- a/packages/light-react/src/App/App.js +++ b/packages/light-react/src/App/App.js @@ -21,7 +21,6 @@ import Send from '../Send'; import Settings from '../Settings'; import { STATUS } from '../stores/healthStore'; import Tokens from '../Tokens'; -import './App.css'; // Use MemoryRouter for production viewing in file:// protocol // https://github.com/facebook/create-react-app/issues/3591 diff --git a/packages/light-react/src/App/App.sass b/packages/light-react/src/App/App.sass deleted file mode 100644 index ff220653..00000000 --- a/packages/light-react/src/App/App.sass +++ /dev/null @@ -1,32 +0,0 @@ -/* Copyright 2015-2018 Parity Technologies (UK) Ltd. */ -/* This file is part of Parity. */ - -/* SPDX-License-Identifier: MIT */ - -@import '../assets/sass/modules/grid' -@import '../assets/sass/modules/modular-scale' -@import '../assets/sass/modules/variables' -@import '../assets/sass/modules/reset' - -+reset - -@import '../assets/sass/shared/basics' -@import '../assets/sass/shared/box' -@import '../assets/sass/shared/button' -@import '../assets/sass/shared/form' -@import '../assets/sass/shared/list' -@import '../assets/sass/shared/text' - -@import '../assets/sass/layouts/wrapper' - -@import '../assets/sass/components/logo' -@import '../assets/sass/components/token' -@import '../assets/sass/components/account' -@import '../assets/sass/components/status' -@import '../assets/sass/components/header-nav' -@import '../assets/sass/components/footer-nav' -@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/packages/light-react/src/assets/sass/components/_footer-nav.scss b/packages/light-react/src/assets/sass/components/_footer-nav.scss index b0303d85..1f973208 100644 --- a/packages/light-react/src/assets/sass/components/_footer-nav.scss +++ b/packages/light-react/src/assets/sass/components/_footer-nav.scss @@ -36,7 +36,7 @@ padding: 0.25rem 0.5rem 0.175rem; border-radius: 0.25rem; &:hover { - background: rgba($faint,0.5); + background: rgba($faint, 0.5); color: $black; } @@ -53,11 +53,11 @@ } &.-receive { - background-image: url('../assets/img/icons/receive.svg'); + background-image: url('./assets/img/icons/receive.svg'); } &.-settings { - background-image: url('../assets/img/icons/gear.svg'); + background-image: url('./assets/img/icons/gear.svg'); } } } diff --git a/packages/light-react/src/assets/sass/components/_header-nav.scss b/packages/light-react/src/assets/sass/components/_header-nav.scss index f9a013ad..aea21943 100644 --- a/packages/light-react/src/assets/sass/components/_header-nav.scss +++ b/packages/light-react/src/assets/sass/components/_header-nav.scss @@ -6,7 +6,8 @@ overflow: hidden; height: 3.5rem; - .header-nav_left, .header-nav_right { + .header-nav_left, + .header-nav_right { display: flex; flex-direction: column; justify-content: center; @@ -23,7 +24,10 @@ padding: 1rem 0.5rem; text-align: center; - a, a:link, a:visited, h1 { + a, + a:link, + a:visited, + h1 { margin: -0.175rem 0 -0.175rem; padding: 0.25rem 0.5rem 0.175rem; display: inline-block; @@ -45,7 +49,7 @@ padding: 0.25rem 0.5rem 0.175rem; border-radius: 0.25rem; &:hover { - background: rgba($faint,0.5); + background: rgba($faint, 0.5); color: $black; } @@ -62,23 +66,23 @@ } &.-receive { - background-image: url('../assets/img/icons/receive.svg'); + background-image: url('./assets/img/icons/receive.svg'); } &.-settings { - background-image: url('../assets/img/icons/gear.svg'); + background-image: url('./assets/img/icons/gear.svg'); } &.-back { - background-image: url('../assets/img/icons/back.svg'); + background-image: url('./assets/img/icons/back.svg'); } &.-close { - background-image: url('../assets/img/icons/close.svg'); + background-image: url('./assets/img/icons/close.svg'); } &.-new { - background-image: url('../assets/img/icons/plus.svg'); + background-image: url('./assets/img/icons/plus.svg'); } } } diff --git a/packages/light-react/src/assets/sass/shared/_button.scss b/packages/light-react/src/assets/sass/shared/_button.scss index db41ba9d..f03bf5cf 100644 --- a/packages/light-react/src/assets/sass/shared/_button.scss +++ b/packages/light-react/src/assets/sass/shared/_button.scss @@ -50,7 +50,7 @@ } &.-reload { - background-image: url('../assets/img/icons/reload.svg'); + background-image: url('./assets/img/icons/reload.svg'); } } @@ -118,7 +118,7 @@ } &.-clear { - background-image: url('../assets/img/icons/close.svg'); + background-image: url('./assets/img/icons/close.svg'); } &:disabled { diff --git a/packages/light-react/src/index.js b/packages/light-react/src/index.js index aa6193ff..2a93d79f 100644 --- a/packages/light-react/src/index.js +++ b/packages/light-react/src/index.js @@ -9,6 +9,7 @@ import ReactDOM from 'react-dom'; import App from './App'; import rootStore from './stores'; +import './index.css'; ReactDOM.render( diff --git a/packages/light-react/src/index.sass b/packages/light-react/src/index.sass new file mode 100644 index 00000000..b99eba67 --- /dev/null +++ b/packages/light-react/src/index.sass @@ -0,0 +1,32 @@ +/* Copyright 2015-2018 Parity Technologies (UK) Ltd. */ +/* This file is part of Parity. */ + +/* SPDX-License-Identifier: MIT */ + +@import './assets/sass/modules/grid' +@import './assets/sass/modules/modular-scale' +@import './assets/sass/modules/variables' +@import './assets/sass/modules/reset' + ++reset + +@import './assets/sass/shared/basics' +@import './assets/sass/shared/box' +@import './assets/sass/shared/button' +@import './assets/sass/shared/form' +@import './assets/sass/shared/list' +@import './assets/sass/shared/text' + +@import './assets/sass/layouts/wrapper' + +@import './assets/sass/components/logo' +@import './assets/sass/components/token' +@import './assets/sass/components/account' +@import './assets/sass/components/status' +@import './assets/sass/components/header-nav' +@import './assets/sass/components/footer-nav' +@import './assets/sass/components/progress-indicator' +@import './assets/sass/components/form-nav' +@import './assets/sass/components/alert-screen' +@import './assets/sass/components/search-form' + -- GitLab From 7dc80a8e676b6b6d6372dcc95d917d79c0cf63dd Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 13 Jun 2018 11:56:38 +0200 Subject: [PATCH 05/10] Add FormField ui component --- .../src/Accounts/AccountsList/AccountsList.js | 3 +- .../CreateAccount/AccountName/AccountName.js | 18 +-- .../AccountPassword/AccountPassword.js | 47 ++++---- .../AccountWritePhrase/AccountWritePhrase.js | 32 +++-- packages/light-react/src/Overlay/Overlay.js | 2 +- .../light-react/src/Send/Signer/Signer.js | 27 +++-- .../light-react/src/Send/TxForm/TxForm.js | 111 ++++++++++-------- packages/light-ui/package.json | 2 + packages/light-ui/src/FormField/FormField.js | 22 ++++ packages/light-ui/src/FormField/index.js | 8 ++ packages/light-ui/src/Header/Header.js | 15 ++- packages/light-ui/src/index.js | 3 +- 12 files changed, 175 insertions(+), 115 deletions(-) create mode 100644 packages/light-ui/src/FormField/FormField.js create mode 100644 packages/light-ui/src/FormField/index.js diff --git a/packages/light-react/src/Accounts/AccountsList/AccountsList.js b/packages/light-react/src/Accounts/AccountsList/AccountsList.js index 9f22fbf3..de94f402 100644 --- a/packages/light-react/src/Accounts/AccountsList/AccountsList.js +++ b/packages/light-react/src/Accounts/AccountsList/AccountsList.js @@ -32,7 +32,8 @@ class AccountsList extends Component { // component. api.parity .setNewDappsDefaultAddress(address) - .then(() => history.push('/tokens')); + .then(() => history.push('/tokens')) + .catch(() => {}); // TODO do what? }; handleCreateAccount = () => { diff --git a/packages/light-react/src/Accounts/CreateAccount/AccountName/AccountName.js b/packages/light-react/src/Accounts/CreateAccount/AccountName/AccountName.js index fe20e3ba..0956a9aa 100644 --- a/packages/light-react/src/Accounts/CreateAccount/AccountName/AccountName.js +++ b/packages/light-react/src/Accounts/CreateAccount/AccountName/AccountName.js @@ -4,6 +4,7 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; +import { FormField } from 'light-ui'; import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; @@ -50,15 +51,14 @@ class AccountName extends Component {

Please give this account a name:

-
- - -
+ +
-
- - -
+ -
- - -
+ -
- - -
+