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
Split 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",
"shortid": "^2.2.8",
"source-map-support": "^0.5.3",
"styled-components": "^3.0.2",
"styled-components": "^3.1.1",
"styled-system": "^1.1.1"
},
"devDependencies": {
@ -120,7 +120,7 @@
"lint-staged": "^6.1.0",
"node-loader": "^0.6.0",
"prettier": "^1.10.2",
"react-hot-loader": "^4.0.0-beta.17",
"react-hot-loader": "^4.0.0-beta.18",
"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 grow>
<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>
</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 { accountsSelected, accountsName } = this.state
@ -76,40 +78,42 @@ class ImportAccounts extends PureComponent<Props, State> {
return (
<Box>
<Box>Import Accounts</Box>
<Box>
{accounts.map(account => {
const selected = accountsSelected.includes(account.id)
const accountName = accountsName[account.id]
return (
<Box key={account.id} horizontal flow={10}>
<Box>
<Checkbox
checked={selected}
onChange={this.handleSelectAccount(account.id, selected)}
/>
</Box>
<Box>
<form onSubmit={this.handleImportAccounts}>
<Box flow={3}>
{accounts.map(account => {
const selected = accountsSelected.includes(account.id)
const accountName = accountsName[account.id]
return (
<Box key={account.id} horizontal flow={10}>
<Box>
<Input
type="text"
disabled={!selected}
placeholder={accountName.placeholder}
value={accountName.value || ''}
onChange={this.handleChangeInput(account.id)}
<Checkbox
checked={selected}
onChange={this.handleSelectAccount(account.id, selected)}
/>
</Box>
<Box>Balance: {formatBTC(account.balance)}</Box>
<Box>Transactions: {account.transactions.length}</Box>
<Box grow>
<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>
<Button primary disabled={!canImportAccounts} onClick={this.handleImportAccounts}>
Import accounts
</Button>
</Box>
)
})}
<Box horizontal justify="flex-end">
<Button primary disabled={!canImportAccounts} type="submit">
Import
</Button>
</Box>
</Box>
</form>
</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 Text from 'components/base/Text'
import Button from 'components/base/Button'
import Input from 'components/base/Input'
import Label from 'components/base/Label'
import Modal, { ModalBody } from 'components/base/Modal'
import Select from 'components/base/Select'
import CreateAccount from './CreateAccount'
import ImportAccounts from './ImportAccounts'
const Steps = {
createAccount: (props: Object) => (
chooseWallet: (props: Object) => (
<form onSubmit={props.onSubmit}>
<Box flow={3}>
<Box flow={1}>
@ -42,10 +42,6 @@ const Steps = {
]}
/>
</Box>
<Box flow={1}>
<Label>Account name</Label>
<Input onChange={props.onChangeInput('accountName')} value={props.value.accountName} />
</Box>
<Box horizontal justify="flex-end">
<Button primary type="submit">
Add account
@ -55,75 +51,45 @@ const Steps = {
</form>
),
connectDevice: (props: Object) => (
<div>
<div>Connect your Ledger: {props.connected ? 'ok' : 'ko'}</div>
<div>Start {props.wallet.toUpperCase()} App on your Ledger: ko</div>
</div>
<Box>
<Box>Connect your Ledger: {props.connected ? 'ok' : 'ko'}</Box>
<Box>Start {props.wallet.toUpperCase()} App on your Ledger: ko</Box>
</Box>
),
inProgress: (props: Object) => (
<div>
<Box>
In progress.
{props.progress !== null && (
<div>
<Box>
Account: {props.progress.account} / Transactions: {props.progress.transactions}
</div>
</Box>
)}
</div>
</Box>
),
listAccounts: (props: Object) => {
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 newAccount = accounts.find(account => account.transactions.length === 0)
const canCreateAccount = props.canCreateAccount && emptyAccounts.length === 1
const newAccount = emptyAccounts[0]
return (
<Box>
<Box flow={10}>
<ImportAccounts {...props} accounts={existingAccounts} />
{canCreateAccount ? (
<CreateAccount {...props} account={newAccount} />
) : (
<Box>{`You can't create new account`}</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 = {
accountName: string,
wallet: string,
}
type Step = 'createAccount' | 'connectDevice' | 'inProgress' | 'listAccounts'
type Step = 'chooseWallet' | 'connectDevice' | 'inProgress' | 'listAccounts'
type Props = {
accounts: Accounts,
@ -152,12 +118,11 @@ const mapDispatchToProps = {
const defaultState = {
inputValue: {
accountName: '',
wallet: '',
},
accounts: {},
progress: null,
step: 'createAccount',
step: 'chooseWallet',
}
class AddAccountModal extends PureComponent<Props, State> {
@ -207,7 +172,7 @@ class AddAccountModal extends PureComponent<Props, State> {
const props = (predicate, props) => (predicate ? props : {})
return {
...props(step === 'createAccount', {
...props(step === 'chooseWallet', {
value: inputValue,
onSubmit: this.handleSubmit,
onChangeInput: this.handleChangeInput,
@ -248,33 +213,9 @@ class AddAccountModal extends PureComponent<Props, State> {
}
}
handleAddAccount = 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
handleAddAccount = account => this.addAccount(account)
accountsSelected.forEach(({ id, name, ...account }) =>
addAccount({
id,
name,
type: inputValue.wallet,
data: account,
}),
)
}
handleImportAccounts = accounts => accounts.forEach(account => this.addAccount(account))
handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) =>
this.setState(prev => ({
@ -289,7 +230,7 @@ class AddAccountModal extends PureComponent<Props, State> {
const { inputValue } = this.state
if (inputValue.accountName.trim() === '' || inputValue.wallet.trim() === '') {
if (inputValue.wallet.trim() === '') {
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
render() {
@ -315,7 +268,7 @@ class AddAccountModal extends PureComponent<Props, State> {
return (
<Modal
name="add-account"
preventBackdropClick={step !== 'createAccount'}
preventBackdropClick={step !== 'chooseWallet'}
onClose={this.handleClose}
render={({ onClose }) => (
<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"
schema-utils "^0.3.0"
styled-components@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.0.2.tgz#dbcd66ee84d444ee4332a7f74027e8a675191593"
styled-components@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.1.tgz#7896819070b2663c6519f428017d6ca7e2a3c7cd"
dependencies:
buffer "^5.0.3"
css-to-react-native "^2.0.3"
@ -8582,6 +8582,7 @@ styled-components@^3.0.2:
is-plain-object "^2.0.1"
prop-types "^15.5.4"
stylis "^3.4.0"
stylis-rule-sheet "^0.0.7"
supports-color "^3.2.3"
styled-system@^1.1.1:
@ -8590,6 +8591,10 @@ styled-system@^1.1.1:
dependencies:
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:
version "3.4.8"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.8.tgz#94380babbcd4c75726215794ca985b38ec96d1a3"

Write Preview
Loading…
Cancel
Save