From bd8d15baf6b7ed4f69d04d38658de36ba2dc70b3 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 13 Jun 2018 15:04:38 +0200 Subject: [PATCH 1/5] Add a placeholder component --- packages/light-ui/package.json | 4 +++- packages/light-ui/src/Header/Header.js | 6 +++++- .../light-ui/src/Placeholder/Placeholder.js | 21 +++++++++++++++++++ packages/light-ui/src/Placeholder/index.js | 8 +++++++ packages/light-ui/src/index.js | 3 ++- yarn.lock | 4 ++++ 6 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 packages/light-ui/src/Placeholder/Placeholder.js create mode 100644 packages/light-ui/src/Placeholder/index.js diff --git a/packages/light-ui/package.json b/packages/light-ui/package.json index f0fe1366..776bee77 100644 --- a/packages/light-ui/package.json +++ b/packages/light-ui/package.json @@ -31,7 +31,9 @@ "lint": "semistandard 'src/**/*.js' --parser babel-eslint", "start": "yarn build --watch" }, - "dependencies": {}, + "dependencies": { + "react-content-loader": "^3.1.2" + }, "devDependencies": { "@babel/cli": "^7.0.0-beta.49", "@babel/core": "^7.0.0-beta.49", diff --git a/packages/light-ui/src/Header/Header.js b/packages/light-ui/src/Header/Header.js index 256176ea..71e67248 100644 --- a/packages/light-ui/src/Header/Header.js +++ b/packages/light-ui/src/Header/Header.js @@ -6,10 +6,14 @@ import React from 'react'; import PropTypes from 'prop-types'; +import Placeholder from '../Placeholder'; + const Header = ({ left, right, title }) => (
{left}
-
{title}
+
+ {title || } +
{right}
); diff --git a/packages/light-ui/src/Placeholder/Placeholder.js b/packages/light-ui/src/Placeholder/Placeholder.js new file mode 100644 index 00000000..e260f33f --- /dev/null +++ b/packages/light-ui/src/Placeholder/Placeholder.js @@ -0,0 +1,21 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React from 'react'; +import ContentLoader from 'react-content-loader'; +import PropTypes from 'prop-types'; + +const Placeholder = ({ height, width }) => ( + + + +); + +Placeholder.propTypes = { + height: PropTypes.number.isRequired, + width: PropTypes.number.isRequired +}; + +export default Placeholder; diff --git a/packages/light-ui/src/Placeholder/index.js b/packages/light-ui/src/Placeholder/index.js new file mode 100644 index 00000000..be3c1ebc --- /dev/null +++ b/packages/light-ui/src/Placeholder/index.js @@ -0,0 +1,8 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import Placeholder from './Placeholder'; + +export default Placeholder; diff --git a/packages/light-ui/src/index.js b/packages/light-ui/src/index.js index 697a5fb8..67f640ca 100644 --- a/packages/light-ui/src/index.js +++ b/packages/light-ui/src/index.js @@ -5,5 +5,6 @@ import FormField from './FormField'; import Header from './Header'; +import Placeholder from './Placeholder'; -export { FormField, Header }; +export { FormField, Header, Placeholder }; diff --git a/yarn.lock b/yarn.lock index d24e38a4..3b118382 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9591,6 +9591,10 @@ react-blockies@^1.3.0: dependencies: prop-types "^15.5.10" +react-content-loader@^3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-3.1.2.tgz#98230b4604b4b744eaa2d3fc88917dd988df6766" + react-copy-to-clipboard@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e" -- GitLab From 188d61bc11ba2ec17136b471144bd13aeb38396b Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 13 Jun 2018 16:42:54 +0200 Subject: [PATCH 2/5] Add placeholders for tokens --- packages/light-react/src/Receive/Receive.js | 8 +- .../light-react/src/Send/Signer/Signer.js | 87 ++++++++++--------- .../src/Send/TokenBalance/TokenBalance.js | 48 ---------- .../light-react/src/Send/TxForm/TxForm.js | 19 ++-- packages/light-react/src/Tokens/Tokens.js | 8 +- .../TokensList/TokenBalance/TokenBalance.js | 30 ++----- .../src/Tokens/TokensList/TokensList.js | 9 +- packages/light-ui/src/Card/Card.js | 33 +++++++ .../src/Card}/index.js | 4 +- .../light-ui/src/Placeholder/Placeholder.js | 4 +- packages/light-ui/src/TokenCard/TokenCard.js | 53 +++++++++++ packages/light-ui/src/TokenCard/index.js | 8 ++ packages/light-ui/src/index.js | 4 +- 13 files changed, 181 insertions(+), 134 deletions(-) delete mode 100644 packages/light-react/src/Send/TokenBalance/TokenBalance.js create mode 100644 packages/light-ui/src/Card/Card.js rename packages/{light-react/src/Send/TokenBalance => light-ui/src/Card}/index.js (62%) create mode 100644 packages/light-ui/src/TokenCard/TokenCard.js create mode 100644 packages/light-ui/src/TokenCard/index.js diff --git a/packages/light-react/src/Receive/Receive.js b/packages/light-react/src/Receive/Receive.js index c8183e28..10b750a6 100644 --- a/packages/light-react/src/Receive/Receive.js +++ b/packages/light-react/src/Receive/Receive.js @@ -28,17 +28,17 @@ class Receive extends PureComponent { } title={ - accountsInfo && defaultAccount && accountsInfo[defaultAccount] ? ( + accountsInfo && + defaultAccount && + accountsInfo[defaultAccount] && (

{' '} {accountsInfo[defaultAccount].name}

- ) : ( -

Loading...

) } /> diff --git a/packages/light-react/src/Send/Signer/Signer.js b/packages/light-react/src/Send/Signer/Signer.js index 9ee50d6e..e7946fe0 100644 --- a/packages/light-react/src/Send/Signer/Signer.js +++ b/packages/light-react/src/Send/Signer/Signer.js @@ -9,7 +9,7 @@ import { fromWei } from '@parity/api/lib/util/wei'; import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; -import TokenBalance from '../TokenBalance'; +import TokenBalance from '../../Tokens/TokensList/TokenBalance'; @inject('sendStore') @observer @@ -58,50 +58,53 @@ class Signer extends Component {
-
- -
-
- -
- {+fromWei(tx.value)} {token.symbol} + +
+ +
+ {+fromWei(tx.value)} {token.symbol} +
+
+
+ +
{tx.to}
+
+
, +
+
+

Enter your password to confirm this transaction.

-
-
- -
{tx.to}
-
-
- -
-

Enter your password to confirm this transaction.

-
- + - - -
+ + + ]} + onClick={null} + token={token} + />
diff --git a/packages/light-react/src/Send/TokenBalance/TokenBalance.js b/packages/light-react/src/Send/TokenBalance/TokenBalance.js deleted file mode 100644 index f588b01b..00000000 --- a/packages/light-react/src/Send/TokenBalance/TokenBalance.js +++ /dev/null @@ -1,48 +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 abi from '@parity/shared/lib/contracts/abi/eip20'; -import { defaultAccount$, makeContract$, myBalance$ } from '@parity/light.js'; -import { fromWei } from '@parity/api/lib/util/wei'; -import light from 'light-hoc'; -import { map, switchMap } from 'rxjs/operators'; -import PropTypes from 'prop-types'; - -@light({ - balance: ({ token: { address, decimals } }) => - address === 'ETH' - ? myBalance$().pipe(map(value => fromWei(value).toFixed(6))) // Get balance for Eth - : defaultAccount$().pipe( - switchMap( - defaultAccount => - makeContract$(address, abi).balanceOf$(defaultAccount) // Call ERC20 contract for token - ), - map(value => value.div(10 ** decimals).toFixed(6)) - ) -}) -class TokenBalance extends Component { - static propTypes = { - token: PropTypes.object.isRequired - }; - - render () { - const { balance, token } = this.props; - return ( -
-
- {token.name} -
-
{token.name}
-
- {balance} - {token.symbol} -
-
- ); - } -} - -export default TokenBalance; diff --git a/packages/light-react/src/Send/TxForm/TxForm.js b/packages/light-react/src/Send/TxForm/TxForm.js index 16291c3c..dcbe332a 100644 --- a/packages/light-react/src/Send/TxForm/TxForm.js +++ b/packages/light-react/src/Send/TxForm/TxForm.js @@ -11,7 +11,7 @@ import { inject, observer } from 'mobx-react'; import light from 'light-hoc'; import { Link } from 'react-router-dom'; -import TokenBalance from '../TokenBalance'; +import TokenBalance from '../../Tokens/TokensList/TokenBalance'; const MAX_GAS_PRICE = 40; // In Gwei const MIN_GAS_PRICE = 3; // Safelow gas price from GasStation, in Gwei @@ -77,10 +77,13 @@ class Send extends Component {
-
- -
-
+
Send -
-
+ ]} + onClick={null} + token={token} + />
diff --git a/packages/light-react/src/Tokens/Tokens.js b/packages/light-react/src/Tokens/Tokens.js index 4a661c64..6a16799d 100644 --- a/packages/light-react/src/Tokens/Tokens.js +++ b/packages/light-react/src/Tokens/Tokens.js @@ -30,17 +30,17 @@ class Tokens extends PureComponent { } title={ - accountsInfo && defaultAccount && accountsInfo[defaultAccount] ? ( + accountsInfo && + defaultAccount && + accountsInfo[defaultAccount] && ( {' '} {accountsInfo[defaultAccount].name} - ) : ( - 'Loading...' ) } /> diff --git a/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js b/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js index 14b8643f..c5b8bc69 100644 --- a/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js +++ b/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js @@ -9,9 +9,10 @@ import { defaultAccount$, makeContract$, myBalance$ } from '@parity/light.js'; import { fromWei } from '@parity/api/lib/util/wei'; import { inject } from 'mobx-react'; import light from 'light-hoc'; -import { withRouter } from 'react-router-dom'; import { map, switchMap } from 'rxjs/operators'; import PropTypes from 'prop-types'; +import { TokenCard } from 'light-ui'; +import { withRouter } from 'react-router-dom'; @light({ balance: ({ token: { address, decimals } }) => @@ -32,31 +33,16 @@ class TokenBalance extends Component { }; handleClick = () => { - const { - history, - sendStore, - token: { address } - } = this.props; - sendStore.setTokenAddress(address); + const { history, sendStore, token } = this.props; + if (!token.address) { + return; + } + sendStore.setTokenAddress(token.address); history.push('/send'); }; render () { - const { balance, token } = this.props; - return ( - -
-
- {token.symbol} -
-
{token.name}
-
- {Number.isFinite(balance) ? balance.toFixed(2) : '...'}{' '} - {token.symbol} -
-
- - ); + return ; } } diff --git a/packages/light-react/src/Tokens/TokensList/TokensList.js b/packages/light-react/src/Tokens/TokensList/TokensList.js index c6f6c369..ef2799c7 100644 --- a/packages/light-react/src/Tokens/TokensList/TokensList.js +++ b/packages/light-react/src/Tokens/TokensList/TokensList.js @@ -16,12 +16,17 @@ class Tokens extends Component { tokensStore: { tokensArray } } = this.props; + // Show empty 3 tokens placeholders if tokens have not been loaded yet + const shownArray = tokensArray.length ? tokensArray : Array(3).fill({}); + return (
    - {tokensArray.map(token => ( -
  • {}
    • + {shownArray.map(token => ( +
  • + +
    • ))}
diff --git a/packages/light-ui/src/Card/Card.js b/packages/light-ui/src/Card/Card.js new file mode 100644 index 00000000..010097b9 --- /dev/null +++ b/packages/light-ui/src/Card/Card.js @@ -0,0 +1,33 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React from 'react'; +import PropTypes from 'prop-types'; + +const Card = ({ children, className, drawers, onClick }) => ( +
+ {children} + {drawers && + drawers.map(drawer => ( +
+ {drawer} +
+ ))} +
+); + +Card.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + drawers: PropTypes.arrayOf(PropTypes.node), // A card can have multiple drawers + onClick: PropTypes.func +}; + +export default Card; diff --git a/packages/light-react/src/Send/TokenBalance/index.js b/packages/light-ui/src/Card/index.js similarity index 62% rename from packages/light-react/src/Send/TokenBalance/index.js rename to packages/light-ui/src/Card/index.js index 967cc179..0f1f697a 100644 --- a/packages/light-react/src/Send/TokenBalance/index.js +++ b/packages/light-ui/src/Card/index.js @@ -3,6 +3,6 @@ // // SPDX-License-Identifier: MIT -import TokenBalance from './TokenBalance'; +import Card from './Card'; -export default TokenBalance; +export default Card; diff --git a/packages/light-ui/src/Placeholder/Placeholder.js b/packages/light-ui/src/Placeholder/Placeholder.js index e260f33f..8827031c 100644 --- a/packages/light-ui/src/Placeholder/Placeholder.js +++ b/packages/light-ui/src/Placeholder/Placeholder.js @@ -8,8 +8,8 @@ import ContentLoader from 'react-content-loader'; import PropTypes from 'prop-types'; const Placeholder = ({ height, width }) => ( - - + + ); diff --git a/packages/light-ui/src/TokenCard/TokenCard.js b/packages/light-ui/src/TokenCard/TokenCard.js new file mode 100644 index 00000000..0e7e950b --- /dev/null +++ b/packages/light-ui/src/TokenCard/TokenCard.js @@ -0,0 +1,53 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React from 'react'; +import PropTypes from 'prop-types'; + +import Card from '../Card'; +import Placeholder from '../Placeholder'; + +const TokenCard = ({ balance, decimals, token, ...otherProps }) => ( + +
+
+ {token.logo ? ( + {token.symbol} + ) : ( + + )} +
+
+ {token.name ? token.name : } +
+
+ {Number.isFinite(balance) ? ( + + {balance.toFixed(decimals)}{' '} + {token.symbol} + + ) : ( + + )} +
+
+ +); + +TokenCard.defaultProps = { + decimals: 2 +}; + +TokenCard.propTypes = { + balance: PropTypes.number, + decimals: PropTypes.number.isRequired, + token: PropTypes.shape({ + logo: PropTypes.string, + name: PropTypes.string, + symbol: PropTypes.string + }).isRequired +}; + +export default TokenCard; diff --git a/packages/light-ui/src/TokenCard/index.js b/packages/light-ui/src/TokenCard/index.js new file mode 100644 index 00000000..c096899a --- /dev/null +++ b/packages/light-ui/src/TokenCard/index.js @@ -0,0 +1,8 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import TokenCard from './TokenCard'; + +export default TokenCard; diff --git a/packages/light-ui/src/index.js b/packages/light-ui/src/index.js index 67f640ca..f1ca3345 100644 --- a/packages/light-ui/src/index.js +++ b/packages/light-ui/src/index.js @@ -3,8 +3,10 @@ // // SPDX-License-Identifier: MIT +import Card from './Card'; import FormField from './FormField'; import Header from './Header'; import Placeholder from './Placeholder'; +import TokenCard from './TokenCard'; -export { FormField, Header, Placeholder }; +export { Card, FormField, Header, Placeholder, TokenCard }; -- GitLab From d6bd469236e926102f576c90f0eb904badd94a1e Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 13 Jun 2018 17:58:20 +0200 Subject: [PATCH 3/5] Add an account card --- .../src/Accounts/AccountsList/AccountsList.js | 25 +++--- .../AccountConfirm/AccountConfirm.js | 36 ++++----- .../AccountCopyPhrase/AccountCopyPhrase.js | 29 +++---- .../CreateAccount/AccountName/AccountName.js | 76 ++++++++---------- .../AccountPassword/AccountPassword.js | 77 +++++++++---------- .../AccountPlaceholder/AccountPlaceholder.js | 28 ------- .../AccountWritePhrase/AccountWritePhrase.js | 35 ++++----- .../Accounts/CreateAccount/CreateAccount.js | 44 +++++++---- .../CreateAccountContainer.js | 29 +++++++ .../index.js | 4 +- .../CreateAccountHeader.js | 34 -------- .../src/stores/createAccountStore.js | 17 +++- packages/light-ui/package.json | 1 + .../light-ui/src/AccountCard/AccountCard.js | 42 ++++++++++ .../src/AccountCard}/index.js | 4 +- packages/light-ui/src/index.js | 3 +- 16 files changed, 240 insertions(+), 244 deletions(-) delete mode 100644 packages/light-react/src/Accounts/CreateAccount/AccountPlaceholder/AccountPlaceholder.js create mode 100644 packages/light-react/src/Accounts/CreateAccount/CreateAccountContainer/CreateAccountContainer.js rename packages/light-react/src/Accounts/CreateAccount/{CreateAccountHeader => CreateAccountContainer}/index.js (54%) delete mode 100644 packages/light-react/src/Accounts/CreateAccount/CreateAccountHeader/CreateAccountHeader.js create mode 100644 packages/light-ui/src/AccountCard/AccountCard.js rename packages/{light-react/src/Accounts/CreateAccount/AccountPlaceholder => light-ui/src/AccountCard}/index.js (57%) diff --git a/packages/light-react/src/Accounts/AccountsList/AccountsList.js b/packages/light-react/src/Accounts/AccountsList/AccountsList.js index 2216ad7d..b518fe39 100644 --- a/packages/light-react/src/Accounts/AccountsList/AccountsList.js +++ b/packages/light-react/src/Accounts/AccountsList/AccountsList.js @@ -4,9 +4,8 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; +import { AccountCard, Header } from 'light-ui'; 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'; @@ -37,7 +36,7 @@ class AccountsList extends Component { }; handleCreateAccount = () => { - this.props.createAccountStore.setIsImporting(false); + this.props.createAccountStore.setIsImport(false); this.props.history.push('/accounts/new'); }; @@ -65,17 +64,15 @@ class AccountsList extends Component { data-address={address} // Using data- to avoid creating a new item Component onClick={this.handleClick} > -
-
- -
-
-
- {accountsInfo[address].name} -
-
{address}
-
-
+ ))} diff --git a/packages/light-react/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js b/packages/light-react/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js index 2f6793cf..c1e04716 100644 --- a/packages/light-react/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js +++ b/packages/light-react/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js @@ -6,17 +6,13 @@ import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; -import CreateAccountHeader from '../CreateAccountHeader'; +import CreateAccountContainer from '../CreateAccountContainer'; @inject('createAccountStore', 'onboardingStore') @observer class AccountConfirm extends Component { handleSubmit = () => { - const { - createAccountStore: { saveAccountToParity }, - history, - onboardingStore - } = this.props; + const { createAccountStore, history, onboardingStore } = this.props; // If we were onboarding, set isFirstRun to false, so that we quit // onboarding. @@ -24,26 +20,24 @@ class AccountConfirm extends Component { onboardingStore.setIsFirstRun(false); } - saveAccountToParity().then(() => history.push('/accounts')); + createAccountStore.saveAccountToParity().then(() => { + createAccountStore.clear(); + history.push('/accounts'); + }); }; render () { return ( -
-
- -
-
-

Ready to create account?

-
- -
+ +
+

Ready to create account?

-
+ + ); } } diff --git a/packages/light-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js b/packages/light-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js index 22401a5c..615227ef 100644 --- a/packages/light-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js +++ b/packages/light-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js @@ -7,7 +7,7 @@ import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; -import CreateAccountHeader from '../CreateAccountHeader'; +import CreateAccountContainer from '../CreateAccountContainer'; @inject('createAccountStore') @observer @@ -20,24 +20,17 @@ class AccountCopyPhrase extends Component { const currentStep = pathname.slice(-1); return ( -
-
- -
-
-

Please write your secret phrase on a piece of paper:

-
-
- {phrase} -
- -
+ +
+

Please write your secret phrase on a piece of paper:

-
+
{phrase}
+ + ); } } diff --git a/packages/light-react/src/Accounts/CreateAccount/AccountName/AccountName.js b/packages/light-react/src/Accounts/CreateAccount/AccountName/AccountName.js index 0956a9aa..ff12c024 100644 --- a/packages/light-react/src/Accounts/CreateAccount/AccountName/AccountName.js +++ b/packages/light-react/src/Accounts/CreateAccount/AccountName/AccountName.js @@ -8,7 +8,7 @@ import { FormField } from 'light-ui'; import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; -import CreateAccountHeader from '../CreateAccountHeader'; +import CreateAccountContainer from '../CreateAccountContainer'; @inject('createAccountStore') @observer @@ -26,55 +26,45 @@ class AccountName extends Component { render () { const { - createAccountStore: { address, generateNewAccount, isImport, name }, + createAccountStore: { generateNewAccount, isImport, name }, location: { pathname } } = this.props; const currentStep = pathname.slice(-1); return ( -
- {address && ( -
-
- -
- {!isImport && ( -
- -
- )} -
-

Please give this account a name:

-
- - - -
-
+ + {!isImport && ( +
+
)} -
+
+

Please give this account a name:

+
+ + + ); } } diff --git a/packages/light-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js b/packages/light-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js index 67d4c80f..1ff1e31c 100644 --- a/packages/light-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js +++ b/packages/light-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js @@ -7,7 +7,7 @@ import React, { Component } from 'react'; import { FormField } from 'light-ui'; import { inject, observer } from 'mobx-react'; -import CreateAccountHeader from '../CreateAccountHeader'; +import CreateAccountContainer from '../CreateAccountContainer'; @inject('createAccountStore') @observer @@ -48,50 +48,45 @@ class AccountPassword extends Component { const { confirm, hint, password } = this.state; return ( -
-
- -
-
-
-

Secure your account with a password:

-
+ + +
+

Secure your account with a password:

+
- + - + - + - - -
-
-
+ + + ); } } diff --git a/packages/light-react/src/Accounts/CreateAccount/AccountPlaceholder/AccountPlaceholder.js b/packages/light-react/src/Accounts/CreateAccount/AccountPlaceholder/AccountPlaceholder.js deleted file mode 100644 index 1702b56d..00000000 --- a/packages/light-react/src/Accounts/CreateAccount/AccountPlaceholder/AccountPlaceholder.js +++ /dev/null @@ -1,28 +0,0 @@ -// Copyright 2015-2018 Parity Technologies (UK) Ltd. -// This file is part of Parity. -// -// SPDX-License-Identifier: MIT - -import React, { Component } from 'react'; - -class AccountPlaceholder extends Component { - render () { - return ( -
-
-
-
-
-
-
-
-
-
-
-
-
- ); - } -} - -export default AccountPlaceholder; diff --git a/packages/light-react/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js b/packages/light-react/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js index 1e5bf229..821f181a 100644 --- a/packages/light-react/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js +++ b/packages/light-react/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js @@ -7,8 +7,7 @@ import React, { Component } from 'react'; import { FormField } from 'light-ui'; import { inject, observer } from 'mobx-react'; -import AccountPlaceholder from '../AccountPlaceholder'; -import CreateAccountHeader from '../CreateAccountHeader'; +import CreateAccountContainer from '../CreateAccountContainer'; @inject('createAccountStore') @observer @@ -37,30 +36,22 @@ class AccountWritePhrase extends Component { }; render () { - const { - createAccountStore: { isImport } - } = this.props; const { value } = this.state; return ( -
-
- {isImport ? : } -
-
-

Please write your recovery phrase:

-
- - } - label='Recovery phrase' - /> - - -
+ +
+

Please write your recovery phrase:

-
+ + } + label='Recovery phrase' + /> + + + ); } diff --git a/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js b/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js index ac823f30..eedb29a7 100644 --- a/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js +++ b/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js @@ -34,22 +34,30 @@ class CreateAccount extends Component { ]; }); - handleCreateAccount = () => { - this.props.createAccountStore.setIsImporting(false); + handleToggleCreateImport = () => { + const { + createAccountStore, + history, + match: { + params: { step } + } + } = this.props; + createAccountStore.setIsImport(!createAccountStore.isImport); + + // If we were further in the account creation, go back to step 1 + if (step > 1) { + history.push('/accounts/new/1'); + } }; handleGoBack = () => this.props.history.goBack(); - handleImportAccount = () => { - this.props.createAccountStore.setIsImporting(true); - }; - render () { const { createAccountStore: { isImport }, match: { - params: { step } - } // Current step + params: { step } // Current step in account creation process + } } = this.props; // Get all the steps of our account process @@ -82,13 +90,15 @@ class CreateAccount extends Component { />
- {Steps.map((StepComponent, index) => ( - - ))} +
+ {Steps.map((StepComponent, index) => ( + + ))} +
]} + /> + ); + } +} + +export default CreateAccountHeader; diff --git a/packages/light-react/src/Accounts/CreateAccount/CreateAccountHeader/index.js b/packages/light-react/src/Accounts/CreateAccount/CreateAccountContainer/index.js similarity index 54% rename from packages/light-react/src/Accounts/CreateAccount/CreateAccountHeader/index.js rename to packages/light-react/src/Accounts/CreateAccount/CreateAccountContainer/index.js index a66f4362..40b2c7fe 100644 --- a/packages/light-react/src/Accounts/CreateAccount/CreateAccountHeader/index.js +++ b/packages/light-react/src/Accounts/CreateAccount/CreateAccountContainer/index.js @@ -3,6 +3,6 @@ // // SPDX-License-Identifier: MIT -import CreateAccountHeader from './CreateAccountHeader'; +import CreateAccountContainer from './CreateAccountContainer'; -export default CreateAccountHeader; +export default CreateAccountContainer; diff --git a/packages/light-react/src/Accounts/CreateAccount/CreateAccountHeader/CreateAccountHeader.js b/packages/light-react/src/Accounts/CreateAccount/CreateAccountHeader/CreateAccountHeader.js deleted file mode 100644 index bd17ef5f..00000000 --- a/packages/light-react/src/Accounts/CreateAccount/CreateAccountHeader/CreateAccountHeader.js +++ /dev/null @@ -1,34 +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 Blockie from 'react-blockies'; -import { inject, observer } from 'mobx-react'; - -@inject('createAccountStore') -@observer -class CreateAccountHeader extends Component { - render () { - const { createAccountStore: { address, name } } = this.props; - - return ( -
-
- -
-
-
- {name || Account} -
-
- {address} -
-
-
- ); - } -} - -export default CreateAccountHeader; diff --git a/packages/light-react/src/stores/createAccountStore.js b/packages/light-react/src/stores/createAccountStore.js index 75bb1ecb..421b6ccf 100644 --- a/packages/light-react/src/stores/createAccountStore.js +++ b/packages/light-react/src/stores/createAccountStore.js @@ -19,6 +19,17 @@ class CreateAccountStore { this.api = parityStore.api; } + /** + * Reinitialize everything + */ + clear () { + this.setAddress(null); + this.setHint(''); + this.setName(''); + this.setPassword(''); + this.setPhrase(null); + } + generateNewAccount = () => { return this.api.parity.generateSecretPhrase().then(this.setPhrase); }; @@ -41,7 +52,11 @@ class CreateAccountStore { }; @action - setIsImporting = isImport => { + setIsImport = isImport => { + // First set address and phrase back to null + this.address = null; + this.phrase = null; + this.isImport = isImport; }; diff --git a/packages/light-ui/package.json b/packages/light-ui/package.json index 776bee77..211ba233 100644 --- a/packages/light-ui/package.json +++ b/packages/light-ui/package.json @@ -32,6 +32,7 @@ "start": "yarn build --watch" }, "dependencies": { + "react-blockies": "^1.3.0", "react-content-loader": "^3.1.2" }, "devDependencies": { diff --git a/packages/light-ui/src/AccountCard/AccountCard.js b/packages/light-ui/src/AccountCard/AccountCard.js new file mode 100644 index 00000000..c330272d --- /dev/null +++ b/packages/light-ui/src/AccountCard/AccountCard.js @@ -0,0 +1,42 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React from 'react'; +import Blockies from 'react-blockies'; +import PropTypes from 'prop-types'; + +import Card from '../Card'; +import Placeholder from '../Placeholder'; + +const AccountCard = ({ address, name, ...otherProps }) => ( + +
+
+ {address ? ( + + ) : ( + + )} +
+
+ {name ? ( +
{name}
+ ) : ( + + )} +
+ {address || } +
+
+
+ +); + +AccountCard.propTypes = { + address: PropTypes.string, + name: PropTypes.string +}; + +export default AccountCard; diff --git a/packages/light-react/src/Accounts/CreateAccount/AccountPlaceholder/index.js b/packages/light-ui/src/AccountCard/index.js similarity index 57% rename from packages/light-react/src/Accounts/CreateAccount/AccountPlaceholder/index.js rename to packages/light-ui/src/AccountCard/index.js index ec2c8232..00534c5b 100644 --- a/packages/light-react/src/Accounts/CreateAccount/AccountPlaceholder/index.js +++ b/packages/light-ui/src/AccountCard/index.js @@ -3,6 +3,6 @@ // // SPDX-License-Identifier: MIT -import AccountPlaceholder from './AccountPlaceholder'; +import AccountCard from './AccountCard'; -export default AccountPlaceholder; +export default AccountCard; diff --git a/packages/light-ui/src/index.js b/packages/light-ui/src/index.js index f1ca3345..ad5abb72 100644 --- a/packages/light-ui/src/index.js +++ b/packages/light-ui/src/index.js @@ -3,10 +3,11 @@ // // SPDX-License-Identifier: MIT +import AccountCard from './AccountCard'; import Card from './Card'; import FormField from './FormField'; import Header from './Header'; import Placeholder from './Placeholder'; import TokenCard from './TokenCard'; -export { Card, FormField, Header, Placeholder, TokenCard }; +export { AccountCard, Card, FormField, Header, Placeholder, TokenCard }; -- GitLab From 8e08f51438b6aa4be6b2f56b4d5ef881ae0bc77a Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 13 Jun 2018 22:10:09 +0200 Subject: [PATCH 4/5] Correctly copyfiles (fix #42) --- packages/light-electron/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/light-electron/package.json b/packages/light-electron/package.json index d09b3d11..3baa5ae9 100644 --- a/packages/light-electron/package.json +++ b/packages/light-electron/package.json @@ -28,7 +28,7 @@ "channel": "beta" }, "scripts": { - "prebuild": "copyfiles ../light-react/build static/build && ./scripts/fixElectronBug.sh", + "prebuild": "copyfiles -u 2 \"../light-react/build/**/*\" static/ && ./scripts/fixElectronBug.sh", "build": "electron-webpack", "electron": "electron dist/main/main.js --light", "lint": "semistandard 'src/**/*.js' --parser babel-eslint", -- GitLab From 62d1dcc8b0e97d91c39f94673ed64eb976a7b43e Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Thu, 14 Jun 2018 12:23:19 +0200 Subject: [PATCH 5/5] Fix bug key prop --- packages/light-react/src/Tokens/TokensList/TokensList.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/light-react/src/Tokens/TokensList/TokensList.js b/packages/light-react/src/Tokens/TokensList/TokensList.js index ef2799c7..f9718a18 100644 --- a/packages/light-react/src/Tokens/TokensList/TokensList.js +++ b/packages/light-react/src/Tokens/TokensList/TokensList.js @@ -23,8 +23,11 @@ class Tokens extends Component {
    - {shownArray.map(token => ( -
  • + {shownArray.map(( + token, + index // With empty tokens, the token.address is not defined, so we prefix with index + ) => ( +
    • ))} -- GitLab