lukechilds
/
ledger-live-desktop
mirror of https://github.com/lukechilds/ledger-live-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Change flow for create new account

master
Loëck Vézien 7 years ago
parent
455ce114a6
commit
1537bd9eb8
No known key found for this signature in database GPG Key ID: CBCDCE384E853AC4
6 changed files with 153 additions and 122 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      package.json
  2. 2
      src/components/AccountPage.js
  3. 69
      src/components/modals/AddAccount/CreateAccount.js
  4. 66
      src/components/modals/AddAccount/ImportAccounts.js
  5. 123
      src/components/modals/AddAccount/index.js
  6. 11
      yarn.lock

4
package.json
View File

@ -82,7 +82,7 @@
"redux-thunk": "^2.2.0", "redux-thunk": "^2.2.0",
"shortid": "^2.2.8", "shortid": "^2.2.8",
"source-map-support": "^0.5.3", "source-map-support": "^0.5.3",
"styled-components": "^3.0.2", "styled-components": "^3.1.1",
"styled-system": "^1.1.1" "styled-system": "^1.1.1"
}, },
"devDependencies": { "devDependencies": {
@ -120,7 +120,7 @@
"lint-staged": "^6.1.0", "lint-staged": "^6.1.0",
"node-loader": "^0.6.0", "node-loader": "^0.6.0",
"prettier": "^1.10.2", "prettier": "^1.10.2",
"react-hot-loader": "^4.0.0-beta.17", "react-hot-loader": "^4.0.0-beta.18",
"webpack": "^3.10.0" "webpack": "^3.10.0"
} }
} }

2
src/components/AccountPage.js
View File

@ -39,7 +39,7 @@ class AccountPage extends PureComponent<Props> {
<Box horizontal flow={3}> <Box horizontal flow={3}>
<Box grow> <Box grow>
<Card title="Balance" style={{ height: 435 }} align="center" justify="center"> <Card title="Balance" style={{ height: 435 }} align="center" justify="center">
<Text fontSize={6}>{formatBTC(accountData.balance)}</Text> <Text fontSize={5}>{formatBTC(accountData.balance)}</Text>
</Card> </Card>
</Box> </Box>

69
src/components/modals/AddAccount/CreateAccount.js
View File

@ -0,0 +1,69 @@
// @flow
import React, { PureComponent } from 'react'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
import Input from 'components/base/Input'
import Label from 'components/base/Label'
type Props = {
account: Object,
onAddAccount: Function,
}
type State = {
accountName: string,
}
class CreateAccount extends PureComponent<Props, State> {
state = {
accountName: '',
}
handleCreateAccount = (e: SyntheticEvent<HTMLFormElement>) => {
e.preventDefault()
const { accountName } = this.state
const { onAddAccount, account } = this.props
if (accountName.trim() === '') {
return
}
onAddAccount({
...account,
name: accountName,
})
}
handleChangeInput = (value: string) =>
this.setState({
accountName: value,
})
render() {
const { accountName } = this.state
return (
<Box>
<Box>Create Account</Box>
<form onSubmit={this.handleCreateAccount}>
<Box flow={3}>
<Box flow={1}>
<Label>Account name</Label>
<Input value={accountName} onChange={this.handleChangeInput} />
</Box>
<Box horizontal justify="flex-end">
<Button primary type="submit">
Create
</Button>
</Box>
</Box>
</form>
</Box>
)
}
}
export default CreateAccount

66
src/components/modals/AddAccount/ImportAccounts.js
View File

@ -55,7 +55,9 @@ class ImportAccounts extends PureComponent<Props, State> {
}, },
})) }))
handleImportAccounts = () => { handleImportAccounts = (e: SyntheticEvent<HTMLFormElement>) => {
e.preventDefault()
const { accounts, onImportAccounts } = this.props const { accounts, onImportAccounts } = this.props
const { accountsSelected, accountsName } = this.state const { accountsSelected, accountsName } = this.state
@ -76,40 +78,42 @@ class ImportAccounts extends PureComponent<Props, State> {
return ( return (
<Box> <Box>
<Box>Import Accounts</Box> <Box>Import Accounts</Box>
<Box> <form onSubmit={this.handleImportAccounts}>
{accounts.map(account => { <Box flow={3}>
const selected = accountsSelected.includes(account.id) {accounts.map(account => {
const accountName = accountsName[account.id] const selected = accountsSelected.includes(account.id)
return ( const accountName = accountsName[account.id]
<Box key={account.id} horizontal flow={10}> return (
<Box> <Box key={account.id} horizontal flow={10}>
<Checkbox
checked={selected}
onChange={this.handleSelectAccount(account.id, selected)}
/>
</Box>
<Box>
<Box> <Box>
<Input <Checkbox
type="text" checked={selected}
disabled={!selected} onChange={this.handleSelectAccount(account.id, selected)}
placeholder={accountName.placeholder}
value={accountName.value || ''}
onChange={this.handleChangeInput(account.id)}
/> />
</Box> </Box>
<Box>Balance: {formatBTC(account.balance)}</Box> <Box grow>
<Box>Transactions: {account.transactions.length}</Box> <Box>
<Input
type="text"
disabled={!selected}
placeholder={accountName.placeholder}
value={accountName.value || ''}
onChange={this.handleChangeInput(account.id)}
/>
</Box>
<Box>Balance: {formatBTC(account.balance)}</Box>
<Box>Transactions: {account.transactions.length}</Box>
</Box>
</Box> </Box>
</Box> )
) })}
})} <Box horizontal justify="flex-end">
</Box> <Button primary disabled={!canImportAccounts} type="submit">
<Box> Import
<Button primary disabled={!canImportAccounts} onClick={this.handleImportAccounts}> </Button>
Import accounts </Box>
</Button> </Box>
</Box> </form>
</Box> </Box>
) )
} }

123
src/components/modals/AddAccount/index.js
View File

@ -17,15 +17,15 @@ import { addAccount } from 'actions/accounts'
import Box from 'components/base/Box' import Box from 'components/base/Box'
import Text from 'components/base/Text' import Text from 'components/base/Text'
import Button from 'components/base/Button' import Button from 'components/base/Button'
import Input from 'components/base/Input'
import Label from 'components/base/Label' import Label from 'components/base/Label'
import Modal, { ModalBody } from 'components/base/Modal' import Modal, { ModalBody } from 'components/base/Modal'
import Select from 'components/base/Select' import Select from 'components/base/Select'
import CreateAccount from './CreateAccount'
import ImportAccounts from './ImportAccounts' import ImportAccounts from './ImportAccounts'
const Steps = { const Steps = {
createAccount: (props: Object) => ( chooseWallet: (props: Object) => (
<form onSubmit={props.onSubmit}> <form onSubmit={props.onSubmit}>
<Box flow={3}> <Box flow={3}>
<Box flow={1}> <Box flow={1}>
@ -42,10 +42,6 @@ const Steps = {
]} ]}
/> />
</Box> </Box>
<Box flow={1}>
<Label>Account name</Label>
<Input onChange={props.onChangeInput('accountName')} value={props.value.accountName} />
</Box>
<Box horizontal justify="flex-end"> <Box horizontal justify="flex-end">
<Button primary type="submit"> <Button primary type="submit">
Add account Add account
@ -55,75 +51,45 @@ const Steps = {
</form> </form>
), ),
connectDevice: (props: Object) => ( connectDevice: (props: Object) => (
<div> <Box>
<div>Connect your Ledger: {props.connected ? 'ok' : 'ko'}</div> <Box>Connect your Ledger: {props.connected ? 'ok' : 'ko'}</Box>
<div>Start {props.wallet.toUpperCase()} App on your Ledger: ko</div> <Box>Start {props.wallet.toUpperCase()} App on your Ledger: ko</Box>
</div> </Box>
), ),
inProgress: (props: Object) => ( inProgress: (props: Object) => (
<div> <Box>
In progress. In progress.
{props.progress !== null && ( {props.progress !== null && (
<div> <Box>
Account: {props.progress.account} / Transactions: {props.progress.transactions} Account: {props.progress.account} / Transactions: {props.progress.transactions}
</div> </Box>
)} )}
</div> </Box>
), ),
listAccounts: (props: Object) => { listAccounts: (props: Object) => {
const accounts = Object.entries(props.accounts).map(([, account]: [string, any]) => account) const accounts = Object.entries(props.accounts).map(([, account]: [string, any]) => account)
const emptyAccounts = accounts.filter(account => account.transactions.length === 0)
const existingAccounts = accounts.filter(account => account.transactions.length > 0) const existingAccounts = accounts.filter(account => account.transactions.length > 0)
// const newAccount = accounts.find(account => account.transactions.length === 0) const canCreateAccount = props.canCreateAccount && emptyAccounts.length === 1
const newAccount = emptyAccounts[0]
return ( return (
<Box> <Box flow={10}>
<ImportAccounts {...props} accounts={existingAccounts} /> <ImportAccounts {...props} accounts={existingAccounts} />
{canCreateAccount ? (
<CreateAccount {...props} account={newAccount} />
) : (
<Box>{`You can't create new account`}</Box>
)}
</Box> </Box>
) )
}, },
// listAccounts: (props: Object) => {
// const accounts = []
//
// let newAccount = null
//
// Object.entries(props.accounts).forEach(([, account]: [string, any]) => {
// const hasTransactions = account.transactions.length > 0
//
// if (hasTransactions) {
// accounts.push(account)
// } else {
// newAccount = account
// }
// })
//
// return (
// <div>
// {accounts.map(account => (
// <div key={account.id} style={{ marginBottom: 10 }}>
// <div>Balance: {formatBTC(account.balance)}</div>
// <div>Transactions: {account.transactions.length}</div>
// <div>
// <Button onClick={props.onAddAccount(account)}>Import</Button>
// </div>
// </div>
// ))}
// {props.canCreateAccount && newAccount !== null ? (
// <div>
// <Button onClick={props.onAddAccount(newAccount)}>Create new account</Button>
// </div>
// ) : (
// <div>You cannot create new account</div>
// )}
// </div>
// )
// },
} }
type InputValue = { type InputValue = {
accountName: string,
wallet: string, wallet: string,
} }
type Step = 'createAccount' | 'connectDevice' | 'inProgress' | 'listAccounts' type Step = 'chooseWallet' | 'connectDevice' | 'inProgress' | 'listAccounts'
type Props = { type Props = {
accounts: Accounts, accounts: Accounts,
@ -152,12 +118,11 @@ const mapDispatchToProps = {
const defaultState = { const defaultState = {
inputValue: { inputValue: {
accountName: '',
wallet: '', wallet: '',
}, },
accounts: {}, accounts: {},
progress: null, progress: null,
step: 'createAccount', step: 'chooseWallet',
} }
class AddAccountModal extends PureComponent<Props, State> { class AddAccountModal extends PureComponent<Props, State> {
@ -207,7 +172,7 @@ class AddAccountModal extends PureComponent<Props, State> {
const props = (predicate, props) => (predicate ? props : {}) const props = (predicate, props) => (predicate ? props : {})
return { return {
...props(step === 'createAccount', { ...props(step === 'chooseWallet', {
value: inputValue, value: inputValue,
onSubmit: this.handleSubmit, onSubmit: this.handleSubmit,
onChangeInput: this.handleChangeInput, onChangeInput: this.handleChangeInput,
@ -248,33 +213,9 @@ class AddAccountModal extends PureComponent<Props, State> {
} }
} }
handleAddAccount = account => () => { handleAddAccount = account => this.addAccount(account)
const { inputValue } = this.state
const { addAccount } = this.props
const { id, ...data } = account
addAccount({
id,
name: inputValue.accountName,
type: inputValue.wallet,
data,
})
}
handleImportAccounts = accountsSelected => {
const { inputValue } = this.state
const { addAccount } = this.props
accountsSelected.forEach(({ id, name, ...account }) => handleImportAccounts = accounts => accounts.forEach(account => this.addAccount(account))
addAccount({
id,
name,
type: inputValue.wallet,
data: account,
}),
)
}
handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) => handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) =>
this.setState(prev => ({ this.setState(prev => ({
@ -289,7 +230,7 @@ class AddAccountModal extends PureComponent<Props, State> {
const { inputValue } = this.state const { inputValue } = this.state
if (inputValue.accountName.trim() === '' || inputValue.wallet.trim() === '') { if (inputValue.wallet.trim() === '') {
return return
} }
@ -305,6 +246,18 @@ class AddAccountModal extends PureComponent<Props, State> {
}) })
} }
addAccount = ({ id, name, ...data }) => {
const { inputValue } = this.state
const { addAccount } = this.props
addAccount({
id,
name,
type: inputValue.wallet,
data,
})
}
_timeout = undefined _timeout = undefined
render() { render() {
@ -315,7 +268,7 @@ class AddAccountModal extends PureComponent<Props, State> {
return ( return (
<Modal <Modal
name="add-account" name="add-account"
preventBackdropClick={step !== 'createAccount'} preventBackdropClick={step !== 'chooseWallet'}
onClose={this.handleClose} onClose={this.handleClose}
render={({ onClose }) => ( render={({ onClose }) => (
<ModalBody onClose={onClose} flow={3}> <ModalBody onClose={onClose} flow={3}>

11
yarn.lock
View File

@ -8571,9 +8571,9 @@ style-loader@^0.19.0, style-loader@^0.19.1:
loader-utils "^1.0.2" loader-utils "^1.0.2"
schema-utils "^0.3.0" schema-utils "^0.3.0"
styled-components@^3.0.2: styled-components@^3.1.1:
version "3.0.2" version "3.1.1"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.0.2.tgz#dbcd66ee84d444ee4332a7f74027e8a675191593" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.1.tgz#7896819070b2663c6519f428017d6ca7e2a3c7cd"
dependencies: dependencies:
buffer "^5.0.3" buffer "^5.0.3"
css-to-react-native "^2.0.3" css-to-react-native "^2.0.3"
@ -8582,6 +8582,7 @@ styled-components@^3.0.2:
is-plain-object "^2.0.1" is-plain-object "^2.0.1"
prop-types "^15.5.4" prop-types "^15.5.4"
stylis "^3.4.0" stylis "^3.4.0"
stylis-rule-sheet "^0.0.7"
supports-color "^3.2.3" supports-color "^3.2.3"
styled-system@^1.1.1: styled-system@^1.1.1:
@ -8590,6 +8591,10 @@ styled-system@^1.1.1:
dependencies: dependencies:
prop-types "^15.6.0" prop-types "^15.6.0"
stylis-rule-sheet@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz#5c51dc879141a61821c2094ba91d2cbcf2469c6c"
stylis@^3.4.0: stylis@^3.4.0:
version "3.4.8" version "3.4.8"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.8.tgz#94380babbcd4c75726215794ca985b38ec96d1a3" resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.8.tgz#94380babbcd4c75726215794ca985b38ec96d1a3"

Write Preview
Loading…
Cancel
Save