meriadec
7 years ago
3 changed files with 0 additions and 376 deletions
@ -1,27 +0,0 @@ |
|||||
// @flow
|
|
||||
|
|
||||
import React from 'react' |
|
||||
|
|
||||
import type { CryptoCurrency } from '@ledgerhq/live-common/lib/types' |
|
||||
import type { T } from 'types/common' |
|
||||
|
|
||||
import Box from 'components/base/Box' |
|
||||
import Label from 'components/base/Label' |
|
||||
import SelectCurrency from 'components/SelectCurrency' |
|
||||
|
|
||||
type Props = { |
|
||||
onChangeCurrency: Function, |
|
||||
currency?: ?CryptoCurrency, |
|
||||
t: T, |
|
||||
} |
|
||||
|
|
||||
export default (props: Props) => ( |
|
||||
<Box flow={1}> |
|
||||
<Label>{props.t('common:currency')}</Label> |
|
||||
<SelectCurrency |
|
||||
placeholder={props.t('common:chooseWalletPlaceholder')} |
|
||||
onChange={props.onChangeCurrency} |
|
||||
value={props.currency} |
|
||||
/> |
|
||||
</Box> |
|
||||
) |
|
||||
@ -1,51 +0,0 @@ |
|||||
// @flow
|
|
||||
|
|
||||
import React from 'react' |
|
||||
|
|
||||
import type { Account } from '@ledgerhq/live-common/lib/types' |
|
||||
|
|
||||
import Box from 'components/base/Box' |
|
||||
import CheckBox from 'components/base/CheckBox' |
|
||||
import FormattedVal from 'components/base/FormattedVal' |
|
||||
|
|
||||
type Props = { |
|
||||
scannedAccounts: Account[], |
|
||||
selectedAccounts: Account[], |
|
||||
existingAccounts: Account[], |
|
||||
onToggleAccount?: Account => void, |
|
||||
} |
|
||||
|
|
||||
function StepImport(props: Props) { |
|
||||
const { scannedAccounts, selectedAccounts, existingAccounts, onToggleAccount } = props |
|
||||
return ( |
|
||||
<Box flow={4}> |
|
||||
<strong>(design is not yet integrated!)</strong> |
|
||||
{scannedAccounts.map(account => { |
|
||||
const isSelected = selectedAccounts.find(a => a.id === account.id) |
|
||||
const isExisting = existingAccounts.find(a => a.id === account.id && a.archived === false) |
|
||||
return ( |
|
||||
<Box |
|
||||
horizontal |
|
||||
key={account.id} |
|
||||
onClick={onToggleAccount && !isExisting ? () => onToggleAccount(account) : undefined} |
|
||||
> |
|
||||
<CheckBox isChecked={!!isSelected} onChange={onToggleAccount} /> |
|
||||
<Box grow fontSize={6} style={{ paddingLeft: 10 }}> |
|
||||
{account.name} |
|
||||
</Box> |
|
||||
<FormattedVal |
|
||||
alwaysShowSign={false} |
|
||||
color="warmGrey" |
|
||||
fontSize={6} |
|
||||
showCode |
|
||||
unit={account.currency.units[0]} |
|
||||
val={account.balance} |
|
||||
/> |
|
||||
</Box> |
|
||||
) |
|
||||
})} |
|
||||
</Box> |
|
||||
) |
|
||||
} |
|
||||
|
|
||||
export default StepImport |
|
||||
@ -1,298 +0,0 @@ |
|||||
// @flow
|
|
||||
|
|
||||
import React, { PureComponent } from 'react' |
|
||||
import { connect } from 'react-redux' |
|
||||
import { compose } from 'redux' |
|
||||
import { translate } from 'react-i18next' |
|
||||
import { createStructuredSelector } from 'reselect' |
|
||||
|
|
||||
import type { Account, CryptoCurrency } from '@ledgerhq/live-common/lib/types' |
|
||||
|
|
||||
import type { Device, T } from 'types/common' |
|
||||
|
|
||||
import { MODAL_ADD_ACCOUNT } from 'config/constants' |
|
||||
|
|
||||
import { closeModal } from 'reducers/modals' |
|
||||
import { |
|
||||
canCreateAccount, |
|
||||
getAccounts, |
|
||||
getVisibleAccounts, |
|
||||
getArchivedAccounts, |
|
||||
} from 'reducers/accounts' |
|
||||
|
|
||||
import { addAccount, updateAccount } from 'actions/accounts' |
|
||||
|
|
||||
import Box from 'components/base/Box' |
|
||||
import Breadcrumb from 'components/Breadcrumb' |
|
||||
import Button from 'components/base/Button' |
|
||||
import Modal, { ModalContent, ModalTitle, ModalFooter, ModalBody } from 'components/base/Modal' |
|
||||
import StepConnectDevice from 'components/modals/StepConnectDevice' |
|
||||
import { getBridgeForCurrency } from 'bridge' |
|
||||
|
|
||||
import StepCurrency from './01-step-currency' |
|
||||
import StepImport from './03-step-import' |
|
||||
|
|
||||
const GET_STEPS = t => [ |
|
||||
{ label: t('addAccount:steps.currency.title'), Comp: StepCurrency }, |
|
||||
{ label: t('addAccount:steps.connectDevice.title'), Comp: StepConnectDevice }, |
|
||||
{ label: t('addAccount:steps.importProgress.title'), Comp: StepImport }, |
|
||||
{ label: t('addAccount:steps.importAccounts.title'), Comp: StepImport }, |
|
||||
] |
|
||||
|
|
||||
const mapStateToProps = createStructuredSelector({ |
|
||||
existingAccounts: getAccounts, |
|
||||
visibleAccounts: getVisibleAccounts, |
|
||||
archivedAccounts: getArchivedAccounts, |
|
||||
canCreateAccount, |
|
||||
}) |
|
||||
|
|
||||
const mapDispatchToProps = { |
|
||||
addAccount, |
|
||||
closeModal, |
|
||||
updateAccount, |
|
||||
} |
|
||||
|
|
||||
type Props = { |
|
||||
existingAccounts: Account[], |
|
||||
addAccount: Function, |
|
||||
visibleAccounts: Account[], |
|
||||
archivedAccounts: Account[], |
|
||||
canCreateAccount: boolean, |
|
||||
closeModal: Function, |
|
||||
t: T, |
|
||||
updateAccount: Function, |
|
||||
} |
|
||||
|
|
||||
type State = { |
|
||||
stepIndex: number, |
|
||||
|
|
||||
currency: ?CryptoCurrency, |
|
||||
deviceSelected: ?Device, |
|
||||
|
|
||||
selectedAccounts: Account[], |
|
||||
scannedAccounts: Account[], |
|
||||
|
|
||||
// TODO: what's that.
|
|
||||
fetchingCounterValues: boolean, |
|
||||
appStatus: ?string, |
|
||||
} |
|
||||
|
|
||||
const INITIAL_STATE = { |
|
||||
stepIndex: 0, |
|
||||
currency: null, |
|
||||
deviceSelected: null, |
|
||||
|
|
||||
selectedAccounts: [], |
|
||||
scannedAccounts: [], |
|
||||
|
|
||||
fetchingCounterValues: false, |
|
||||
appStatus: null, |
|
||||
} |
|
||||
|
|
||||
class AddAccountModal extends PureComponent<Props, State> { |
|
||||
state = INITIAL_STATE |
|
||||
|
|
||||
componentWillUnmount() { |
|
||||
this.handleReset() |
|
||||
} |
|
||||
|
|
||||
scanSubscription: * |
|
||||
|
|
||||
startScanAccountsDevice() { |
|
||||
const { visibleAccounts } = this.props |
|
||||
const { deviceSelected, currency } = this.state |
|
||||
|
|
||||
if (!deviceSelected || !currency) { |
|
||||
return |
|
||||
} |
|
||||
const bridge = getBridgeForCurrency(currency) |
|
||||
this.scanSubscription = bridge.scanAccountsOnDevice(currency, deviceSelected.path, { |
|
||||
next: account => { |
|
||||
if (!visibleAccounts.some(a => a.id === account.id)) { |
|
||||
this.setState(state => ({ |
|
||||
scannedAccounts: [...state.scannedAccounts, account], |
|
||||
})) |
|
||||
} |
|
||||
}, |
|
||||
complete: () => { |
|
||||
// we should be able to interrupt the scan too if you want to select early etc..
|
|
||||
// like imagine there are way too more accounts to scan, so you are not stuck here.
|
|
||||
this.setState({ stepIndex: 3 }) |
|
||||
}, |
|
||||
error: error => { |
|
||||
// TODO what to do ?
|
|
||||
console.error(error) |
|
||||
}, |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
canNext = () => { |
|
||||
const { stepIndex } = this.state |
|
||||
|
|
||||
if (stepIndex === 0) { |
|
||||
const { currency } = this.state |
|
||||
return currency !== null |
|
||||
} |
|
||||
|
|
||||
if (stepIndex === 1) { |
|
||||
const { deviceSelected, appStatus } = this.state |
|
||||
return deviceSelected !== null && appStatus === 'success' |
|
||||
} |
|
||||
|
|
||||
if (stepIndex === 3) { |
|
||||
const { selectedAccounts } = this.state |
|
||||
return selectedAccounts.length > 0 |
|
||||
} |
|
||||
|
|
||||
return false |
|
||||
} |
|
||||
|
|
||||
_steps = GET_STEPS(this.props.t) |
|
||||
|
|
||||
handleChangeDevice = d => this.setState({ deviceSelected: d }) |
|
||||
|
|
||||
handleToggleAccount = account => { |
|
||||
const { selectedAccounts } = this.state |
|
||||
const isSelected = selectedAccounts.find(a => a === account) |
|
||||
this.setState({ |
|
||||
selectedAccounts: isSelected |
|
||||
? selectedAccounts.filter(a => a !== account) |
|
||||
: [...selectedAccounts, account], |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
handleChangeCurrency = (currency: CryptoCurrency) => this.setState({ currency }) |
|
||||
|
|
||||
handleChangeStatus = (deviceStatus, appStatus) => this.setState({ appStatus }) |
|
||||
|
|
||||
handleImportAccount = () => { |
|
||||
const { addAccount } = this.props |
|
||||
const { selectedAccounts } = this.state |
|
||||
selectedAccounts.forEach(a => addAccount({ ...a, archived: false })) |
|
||||
this.setState({ selectedAccounts: [] }) |
|
||||
closeModal(MODAL_ADD_ACCOUNT) |
|
||||
} |
|
||||
|
|
||||
handleNextStep = () => { |
|
||||
const { stepIndex } = this.state |
|
||||
if (stepIndex >= this._steps.length - 1) { |
|
||||
return |
|
||||
} |
|
||||
this.setState({ stepIndex: stepIndex + 1 }) |
|
||||
} |
|
||||
|
|
||||
handleReset = () => { |
|
||||
this.setState(INITIAL_STATE) |
|
||||
if (this.scanSubscription) this.scanSubscription.unsubscribe() |
|
||||
} |
|
||||
|
|
||||
renderStep() { |
|
||||
const { t, existingAccounts } = this.props |
|
||||
const { stepIndex, scannedAccounts, currency, deviceSelected, selectedAccounts } = this.state |
|
||||
const step = this._steps[stepIndex] |
|
||||
if (!step) { |
|
||||
return null |
|
||||
} |
|
||||
const { Comp } = step |
|
||||
|
|
||||
const props = (predicate, props) => (predicate ? props : {}) |
|
||||
|
|
||||
const stepProps = { |
|
||||
t, |
|
||||
currency, |
|
||||
// STEP CURRENCY
|
|
||||
...props(stepIndex === 0, { |
|
||||
onChangeCurrency: this.handleChangeCurrency, |
|
||||
}), |
|
||||
// STEP CONNECT DEVICE
|
|
||||
...props(stepIndex === 1, { |
|
||||
deviceSelected, |
|
||||
onStatusChange: this.handleChangeStatus, |
|
||||
onChangeDevice: this.handleChangeDevice, |
|
||||
}), |
|
||||
// STEP ACCOUNT IMPORT PROGRESS
|
|
||||
...props(stepIndex === 2, { |
|
||||
selectedAccounts, |
|
||||
scannedAccounts, |
|
||||
existingAccounts, |
|
||||
}), |
|
||||
// STEP FINISH AND SELECT ACCOUNTS
|
|
||||
...props(stepIndex === 3, { |
|
||||
onToggleAccount: this.handleToggleAccount, |
|
||||
selectedAccounts, |
|
||||
scannedAccounts, |
|
||||
existingAccounts, |
|
||||
}), |
|
||||
} |
|
||||
|
|
||||
return <Comp {...stepProps} /> |
|
||||
} |
|
||||
|
|
||||
renderButton() { |
|
||||
const { t } = this.props |
|
||||
const { fetchingCounterValues, stepIndex, selectedAccounts } = this.state |
|
||||
|
|
||||
let onClick |
|
||||
|
|
||||
switch (stepIndex) { |
|
||||
case 1: |
|
||||
onClick = () => { |
|
||||
this.handleNextStep() |
|
||||
this.startScanAccountsDevice() |
|
||||
} |
|
||||
break |
|
||||
|
|
||||
case 3: |
|
||||
onClick = this.handleImportAccount |
|
||||
break |
|
||||
|
|
||||
default: |
|
||||
onClick = this.handleNextStep |
|
||||
} |
|
||||
|
|
||||
const props = { |
|
||||
primary: true, |
|
||||
disabled: fetchingCounterValues || !this.canNext(), |
|
||||
onClick, |
|
||||
children: fetchingCounterValues |
|
||||
? 'Fetching counterValues...' |
|
||||
: stepIndex === 3 |
|
||||
? t('addAccount:steps.importAccounts.cta', { |
|
||||
count: selectedAccounts.length, |
|
||||
}) |
|
||||
: t('common:next'), |
|
||||
} |
|
||||
|
|
||||
return <Button {...props} /> |
|
||||
} |
|
||||
|
|
||||
render() { |
|
||||
const { t } = this.props |
|
||||
const { stepIndex } = this.state |
|
||||
|
|
||||
return ( |
|
||||
<Modal |
|
||||
name={MODAL_ADD_ACCOUNT} |
|
||||
onHide={this.handleReset} |
|
||||
preventBackdropClick |
|
||||
render={({ onClose }) => ( |
|
||||
<ModalBody onClose={onClose}> |
|
||||
<ModalTitle>{t('addAccount:title')}</ModalTitle> |
|
||||
<ModalContent> |
|
||||
<Breadcrumb mb={6} currentStep={stepIndex} items={this._steps} /> |
|
||||
{this.renderStep()} |
|
||||
</ModalContent> |
|
||||
{stepIndex !== 2 && ( |
|
||||
<ModalFooter> |
|
||||
<Box horizontal alignItems="center" justifyContent="flex-end"> |
|
||||
{this.renderButton()} |
|
||||
</Box> |
|
||||
</ModalFooter> |
|
||||
)} |
|
||||
</ModalBody> |
|
||||
)} |
|
||||
/> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
export default compose(connect(mapStateToProps, mapDispatchToProps), translate())(AddAccountModal) |
|
||||
Loading…
Reference in new issue