Gaëtan Renaudeau
7 years ago
committed by
GitHub
GitHub
31 changed files with 932 additions and 504 deletions
@ -0,0 +1,56 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React from 'react' |
||||
|
import styled from 'styled-components' |
||||
|
import { getCryptoCurrencyIcon } from '@ledgerhq/live-common/lib/react' |
||||
|
|
||||
|
import type { Currency } from '@ledgerhq/live-common/lib/types' |
||||
|
|
||||
|
import { rgba } from 'styles/helpers' |
||||
|
|
||||
|
import Box from 'components/base/Box' |
||||
|
|
||||
|
const CryptoIconWrapper = styled(Box).attrs({ |
||||
|
align: 'center', |
||||
|
justify: 'center', |
||||
|
bg: p => rgba(p.cryptoColor, 0.1), |
||||
|
color: p => p.cryptoColor, |
||||
|
})` |
||||
|
border-radius: 50%; |
||||
|
width: ${p => p.size || 40}px; |
||||
|
height: ${p => p.size || 40}px; |
||||
|
` |
||||
|
|
||||
|
export function CurrencyCircleIcon({ |
||||
|
currency, |
||||
|
size, |
||||
|
...props |
||||
|
}: { |
||||
|
currency: Currency, |
||||
|
size: number, |
||||
|
}) { |
||||
|
const Icon = getCryptoCurrencyIcon(currency) |
||||
|
return ( |
||||
|
<CryptoIconWrapper size={size} cryptoColor={currency.color} {...props}> |
||||
|
{Icon && <Icon size={size / 2} />} |
||||
|
</CryptoIconWrapper> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
function CurrencyBadge({ currency, ...props }: { currency: Currency }) { |
||||
|
return ( |
||||
|
<Box horizontal flow={3} {...props}> |
||||
|
<CurrencyCircleIcon size={40} currency={currency} /> |
||||
|
<Box> |
||||
|
<Box ff="Museo Sans|ExtraBold" color="dark" fontSize={2} style={{ letterSpacing: 2 }}> |
||||
|
{currency.ticker} |
||||
|
</Box> |
||||
|
<Box ff="Open Sans" color="dark" fontSize={5}> |
||||
|
{currency.name} |
||||
|
</Box> |
||||
|
</Box> |
||||
|
</Box> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default CurrencyBadge |
||||
@ -0,0 +1,67 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React from 'react' |
||||
|
import styled from 'styled-components' |
||||
|
import { translate } from 'react-i18next' |
||||
|
|
||||
|
import type { T } from 'types/common' |
||||
|
|
||||
|
import Box from 'components/base/Box' |
||||
|
import IconAngleLeft from 'icons/AngleLeft' |
||||
|
|
||||
|
const Container = styled(Box).attrs({ |
||||
|
alignItems: 'center', |
||||
|
color: 'dark', |
||||
|
ff: 'Museo Sans|Regular', |
||||
|
fontSize: 6, |
||||
|
justifyContent: 'center', |
||||
|
p: 5, |
||||
|
relative: true, |
||||
|
})`` |
||||
|
|
||||
|
const Back = styled(Box).attrs({ |
||||
|
horizontal: true, |
||||
|
align: 'center', |
||||
|
color: 'grey', |
||||
|
ff: 'Open Sans', |
||||
|
fontSize: 3, |
||||
|
p: 4, |
||||
|
})` |
||||
|
cursor: pointer; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
|
||||
|
&:hover { |
||||
|
color: ${p => p.theme.colors.graphite}; |
||||
|
} |
||||
|
|
||||
|
&:active { |
||||
|
color: ${p => p.theme.colors.dark}; |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
function ModalTitle({ |
||||
|
t, |
||||
|
onBack, |
||||
|
children, |
||||
|
...props |
||||
|
}: { |
||||
|
t: T, |
||||
|
onBack: any => void, |
||||
|
children: any, |
||||
|
}) { |
||||
|
return ( |
||||
|
<Container {...props}> |
||||
|
{onBack && ( |
||||
|
<Back onClick={onBack}> |
||||
|
<IconAngleLeft size={16} /> |
||||
|
{t('common:back')} |
||||
|
</Back> |
||||
|
)} |
||||
|
{children} |
||||
|
</Container> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default translate()(ModalTitle) |
||||
@ -0,0 +1,30 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React from 'react' |
||||
|
import styled, { keyframes } from 'styled-components' |
||||
|
|
||||
|
import Box from 'components/base/Box' |
||||
|
import IconLoader from 'icons/Loader' |
||||
|
|
||||
|
const rotate = keyframes` |
||||
|
0% { |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
100% { |
||||
|
transform: rotate(360deg); |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
const Container = styled(Box)` |
||||
|
width: ${p => p.size}px; |
||||
|
height: ${p => p.size}px; |
||||
|
animation: ${rotate} 1.5s linear infinite; |
||||
|
` |
||||
|
|
||||
|
export default function Spinner({ size, ...props }: { size: number }) { |
||||
|
return ( |
||||
|
<Container size={size} {...props}> |
||||
|
<IconLoader size={size} /> |
||||
|
</Container> |
||||
|
) |
||||
|
} |
||||
@ -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,297 +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} |
|
||||
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) |
|
||||
@ -0,0 +1,167 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { PureComponent } from 'react' |
||||
|
import styled from 'styled-components' |
||||
|
import type { Account } from '@ledgerhq/live-common/lib/types' |
||||
|
|
||||
|
import { darken } from 'styles/helpers' |
||||
|
|
||||
|
import Box from 'components/base/Box' |
||||
|
import Radio from 'components/base/Radio' |
||||
|
import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon' |
||||
|
import FormattedVal from 'components/base/FormattedVal' |
||||
|
import Input from 'components/base/Input' |
||||
|
import IconEdit from 'icons/Edit' |
||||
|
import IconCheck from 'icons/Check' |
||||
|
|
||||
|
type Props = { |
||||
|
account: Account, |
||||
|
isChecked: boolean, |
||||
|
isDisabled: boolean, |
||||
|
onClick: Account => void, |
||||
|
onAccountUpdate: Account => void, |
||||
|
} |
||||
|
|
||||
|
type State = { |
||||
|
isEditing: boolean, |
||||
|
accountNameCopy: string, |
||||
|
} |
||||
|
|
||||
|
export default class AccountRow extends PureComponent<Props, State> { |
||||
|
state = { |
||||
|
isEditing: false, |
||||
|
accountNameCopy: '', |
||||
|
} |
||||
|
|
||||
|
componentDidUpdate(prevProps: Props, prevState: State) { |
||||
|
const startedEditing = !prevState.isEditing && this.state.isEditing |
||||
|
if (startedEditing) { |
||||
|
this._input && this._input.handleSelectEverything() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
handleEditClick = (e: SyntheticEvent<any>) => { |
||||
|
this.handlePreventSubmit(e) |
||||
|
const { account } = this.props |
||||
|
this.setState({ isEditing: true, accountNameCopy: account.name }) |
||||
|
} |
||||
|
|
||||
|
handleSubmitName = (e: SyntheticEvent<any>) => { |
||||
|
this.handlePreventSubmit(e) |
||||
|
const { account, onAccountUpdate, isChecked, onClick } = this.props |
||||
|
const { accountNameCopy } = this.state |
||||
|
const updatedAccount = { ...account, name: accountNameCopy } |
||||
|
this.setState({ isEditing: false, accountNameCopy: '' }) |
||||
|
onAccountUpdate(updatedAccount) |
||||
|
if (!isChecked) { |
||||
|
onClick(updatedAccount) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
handlePreventSubmit = (e: SyntheticEvent<any>) => { |
||||
|
// prevent account row to be submitted
|
||||
|
e.preventDefault() |
||||
|
e.stopPropagation() |
||||
|
} |
||||
|
|
||||
|
handleChangeName = (accountNameCopy: string) => this.setState({ accountNameCopy }) |
||||
|
|
||||
|
handleReset = () => this.setState({ isEditing: false, accountNameCopy: '' }) |
||||
|
|
||||
|
_input = null |
||||
|
|
||||
|
render() { |
||||
|
const { account, isChecked, onClick, isDisabled } = this.props |
||||
|
const { isEditing, accountNameCopy } = this.state |
||||
|
|
||||
|
return ( |
||||
|
<AccountRowContainer onClick={() => onClick(account)} isDisabled={isDisabled}> |
||||
|
<CryptoCurrencyIcon currency={account.currency} size={16} color={account.currency.color} /> |
||||
|
<Box shrink grow ff="Open Sans|SemiBold" color="dark" fontSize={4}> |
||||
|
{isEditing ? ( |
||||
|
<Input |
||||
|
containerProps={{ style: { width: 260 } }} |
||||
|
value={accountNameCopy} |
||||
|
onChange={this.handleChangeName} |
||||
|
onClick={this.handlePreventSubmit} |
||||
|
onEnter={this.handleSubmitName} |
||||
|
onEsc={this.handleReset} |
||||
|
renderRight={ |
||||
|
<InputRight onClick={this.handleSubmitName}> |
||||
|
<IconCheck size={16} /> |
||||
|
</InputRight> |
||||
|
} |
||||
|
ref={input => (this._input = input)} |
||||
|
/> |
||||
|
) : ( |
||||
|
<div style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>{account.name}</div> |
||||
|
)} |
||||
|
</Box> |
||||
|
{!isEditing && ( |
||||
|
<Edit onClick={this.handleEditClick}> |
||||
|
<IconEdit size={13} /> |
||||
|
<span>{'edit name'}</span> |
||||
|
</Edit> |
||||
|
)} |
||||
|
<FormattedVal |
||||
|
val={account.balance} |
||||
|
unit={account.unit} |
||||
|
showCode |
||||
|
fontSize={4} |
||||
|
color="grey" |
||||
|
/> |
||||
|
<Radio isChecked={isChecked || isDisabled} /> |
||||
|
</AccountRowContainer> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const AccountRowContainer = styled(Box).attrs({ |
||||
|
horizontal: true, |
||||
|
align: 'center', |
||||
|
bg: 'lightGrey', |
||||
|
px: 3, |
||||
|
flow: 3, |
||||
|
})` |
||||
|
height: 48px; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
opacity: ${p => (p.isDisabled ? 0.5 : 1)}; |
||||
|
pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')}; |
||||
|
|
||||
|
&:hover { |
||||
|
cursor: pointer; |
||||
|
background-color: ${p => darken(p.theme.colors.lightGrey, 0.015)}; |
||||
|
} |
||||
|
|
||||
|
&:active { |
||||
|
background-color: ${p => darken(p.theme.colors.lightGrey, 0.03)}; |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
const Edit = styled(Box).attrs({ |
||||
|
color: 'wallet', |
||||
|
fontSize: 3, |
||||
|
horizontal: true, |
||||
|
align: 'center', |
||||
|
flow: 1, |
||||
|
py: 1, |
||||
|
})` |
||||
|
display: none; |
||||
|
${AccountRowContainer}:hover & { |
||||
|
display: flex; |
||||
|
} |
||||
|
&:hover { |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
const InputRight = styled(Box).attrs({ |
||||
|
bg: 'wallet', |
||||
|
color: 'white', |
||||
|
align: 'center', |
||||
|
justify: 'center', |
||||
|
shrink: 0, |
||||
|
})` |
||||
|
width: 40px; |
||||
|
` |
||||
@ -0,0 +1,224 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { PureComponent } from 'react' |
||||
|
import { compose } from 'redux' |
||||
|
import { connect } from 'react-redux' |
||||
|
import { translate } from 'react-i18next' |
||||
|
|
||||
|
import type { Currency, Account } from '@ledgerhq/live-common/lib/types' |
||||
|
|
||||
|
import type { T, Device } from 'types/common' |
||||
|
|
||||
|
import { getCurrentDevice } from 'reducers/devices' |
||||
|
import { getAccounts } from 'reducers/accounts' |
||||
|
import { addAccount } from 'actions/accounts' |
||||
|
import { closeModal } from 'reducers/modals' |
||||
|
|
||||
|
import Modal, { ModalContent, ModalTitle, ModalFooter, ModalBody } from 'components/base/Modal' |
||||
|
import Box from 'components/base/Box' |
||||
|
import Breadcrumb from 'components/Breadcrumb' |
||||
|
|
||||
|
import StepChooseCurrency, { StepChooseCurrencyFooter } from './steps/01-step-choose-currency' |
||||
|
import StepConnectDevice, { StepConnectDeviceFooter } from './steps/02-step-connect-device' |
||||
|
import StepImport, { StepImportFooter } from './steps/03-step-import' |
||||
|
import StepFinish from './steps/04-step-finish' |
||||
|
|
||||
|
const createSteps = ({ t }: { t: T }) => [ |
||||
|
{ |
||||
|
id: 'chooseCurrency', |
||||
|
label: t('importAccounts:breadcrumb.informations'), |
||||
|
component: StepChooseCurrency, |
||||
|
footer: StepChooseCurrencyFooter, |
||||
|
onBack: null, |
||||
|
hideFooter: false, |
||||
|
}, |
||||
|
{ |
||||
|
id: 'connectDevice', |
||||
|
label: t('importAccounts:breadcrumb.connectDevice'), |
||||
|
component: StepConnectDevice, |
||||
|
footer: StepConnectDeviceFooter, |
||||
|
onBack: ({ transitionTo }: StepProps) => transitionTo('chooseCurrency'), |
||||
|
hideFooter: false, |
||||
|
}, |
||||
|
{ |
||||
|
id: 'import', |
||||
|
label: t('importAccounts:breadcrumb.import'), |
||||
|
component: StepImport, |
||||
|
footer: StepImportFooter, |
||||
|
onBack: ({ transitionTo }: StepProps) => transitionTo('chooseCurrency'), |
||||
|
hideFooter: false, |
||||
|
}, |
||||
|
{ |
||||
|
id: 'finish', |
||||
|
label: t('importAccounts:breadcrumb.finish'), |
||||
|
component: StepFinish, |
||||
|
footer: null, |
||||
|
onBack: null, |
||||
|
hideFooter: true, |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
type Props = { |
||||
|
t: T, |
||||
|
currentDevice: ?Device, |
||||
|
existingAccounts: Account[], |
||||
|
closeModal: string => void, |
||||
|
addAccount: Account => void, |
||||
|
} |
||||
|
|
||||
|
type StepId = 'chooseCurrency' | 'connectDevice' | 'import' | 'finish' |
||||
|
|
||||
|
type ScanStatus = 'idle' | 'scanning' | 'error' | 'finished' |
||||
|
|
||||
|
type State = { |
||||
|
stepId: StepId, |
||||
|
isAppOpened: boolean, |
||||
|
currency: ?Currency, |
||||
|
|
||||
|
// scan process
|
||||
|
scannedAccounts: Account[], |
||||
|
checkedAccountsIds: string[], |
||||
|
scanStatus: ScanStatus, |
||||
|
err: ?Error, |
||||
|
} |
||||
|
|
||||
|
export type StepProps = { |
||||
|
t: T, |
||||
|
currency: ?Currency, |
||||
|
currentDevice: ?Device, |
||||
|
isAppOpened: boolean, |
||||
|
transitionTo: StepId => void, |
||||
|
setState: any => void, |
||||
|
onClickImport: void => Promise<void>, |
||||
|
onCloseModal: void => void, |
||||
|
|
||||
|
// scan process
|
||||
|
scannedAccounts: Account[], |
||||
|
existingAccounts: Account[], |
||||
|
checkedAccountsIds: string[], |
||||
|
scanStatus: ScanStatus, |
||||
|
err: ?Error, |
||||
|
} |
||||
|
|
||||
|
const mapStateToProps = state => ({ |
||||
|
currentDevice: getCurrentDevice(state), |
||||
|
existingAccounts: getAccounts(state), |
||||
|
}) |
||||
|
|
||||
|
const mapDispatchToProps = { |
||||
|
addAccount, |
||||
|
closeModal, |
||||
|
} |
||||
|
|
||||
|
const INITIAL_STATE = { |
||||
|
stepId: 'chooseCurrency', |
||||
|
isAppOpened: false, |
||||
|
currency: null, |
||||
|
scannedAccounts: [], |
||||
|
checkedAccountsIds: [], |
||||
|
err: null, |
||||
|
scanStatus: 'idle', |
||||
|
} |
||||
|
|
||||
|
class ImportAccounts extends PureComponent<Props, State> { |
||||
|
state = INITIAL_STATE |
||||
|
STEPS = createSteps({ |
||||
|
t: this.props.t, |
||||
|
}) |
||||
|
|
||||
|
transitionTo = stepId => { |
||||
|
let nextState = { stepId } |
||||
|
if (stepId === 'chooseCurrency') { |
||||
|
nextState = { ...INITIAL_STATE } |
||||
|
} |
||||
|
this.setState(nextState) |
||||
|
} |
||||
|
|
||||
|
handleClickImport = async () => { |
||||
|
const { addAccount } = this.props |
||||
|
const { scannedAccounts, checkedAccountsIds } = this.state |
||||
|
const accountsIdsMap = checkedAccountsIds.reduce((acc, cur) => { |
||||
|
acc[cur] = true |
||||
|
return acc |
||||
|
}, {}) |
||||
|
const accountsToImport = scannedAccounts.filter(account => accountsIdsMap[account.id] === true) |
||||
|
for (let i = 0; i < accountsToImport.length; i++) { |
||||
|
await idleCallback() |
||||
|
addAccount(accountsToImport[i]) |
||||
|
} |
||||
|
this.transitionTo('finish') |
||||
|
} |
||||
|
|
||||
|
handleCloseModal = () => { |
||||
|
const { closeModal } = this.props |
||||
|
closeModal('importAccounts') |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
const { t, currentDevice, existingAccounts } = this.props |
||||
|
const { |
||||
|
stepId, |
||||
|
currency, |
||||
|
isAppOpened, |
||||
|
scannedAccounts, |
||||
|
checkedAccountsIds, |
||||
|
scanStatus, |
||||
|
err, |
||||
|
} = this.state |
||||
|
|
||||
|
const stepIndex = this.STEPS.findIndex(s => s.id === stepId) |
||||
|
const step = this.STEPS[stepIndex] |
||||
|
|
||||
|
if (!step) { |
||||
|
throw new Error(`ImportAccountsModal: step ${stepId} doesn't exists`) |
||||
|
} |
||||
|
|
||||
|
const { component: StepComponent, footer: StepFooter, hideFooter, onBack } = step |
||||
|
|
||||
|
const stepProps: StepProps = { |
||||
|
t, |
||||
|
currency, |
||||
|
currentDevice, |
||||
|
existingAccounts, |
||||
|
scannedAccounts, |
||||
|
checkedAccountsIds, |
||||
|
scanStatus, |
||||
|
err, |
||||
|
isAppOpened, |
||||
|
onClickImport: this.handleClickImport, |
||||
|
onCloseModal: this.handleCloseModal, |
||||
|
transitionTo: this.transitionTo, |
||||
|
setState: (...args) => this.setState(...args), |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<Modal |
||||
|
name="importAccounts" |
||||
|
preventBackdropClick |
||||
|
onHide={() => this.setState({ ...INITIAL_STATE })} |
||||
|
render={({ onClose }) => ( |
||||
|
<ModalBody onClose={onClose}> |
||||
|
<ModalTitle onBack={onBack ? () => onBack(stepProps) : void 0}> |
||||
|
{t('importAccounts:title')} |
||||
|
</ModalTitle> |
||||
|
<ModalContent> |
||||
|
<Breadcrumb mb={6} currentStep={stepIndex} items={this.STEPS} /> |
||||
|
<StepComponent {...stepProps} /> |
||||
|
</ModalContent> |
||||
|
{!hideFooter && ( |
||||
|
<ModalFooter horizontal align="center" justify="flex-end" style={{ height: 80 }}> |
||||
|
{StepFooter ? <StepFooter {...stepProps} /> : <Box>footer</Box>} |
||||
|
</ModalFooter> |
||||
|
)} |
||||
|
</ModalBody> |
||||
|
)} |
||||
|
/> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default compose(connect(mapStateToProps, mapDispatchToProps), translate())(ImportAccounts) |
||||
|
|
||||
|
function idleCallback() { |
||||
|
return new Promise(resolve => window.requestIdleCallback(resolve)) |
||||
|
} |
||||
@ -0,0 +1,26 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { Fragment } from 'react' |
||||
|
|
||||
|
import SelectCurrency from 'components/SelectCurrency' |
||||
|
import Button from 'components/base/Button' |
||||
|
import CurrencyBadge from 'components/base/CurrencyBadge' |
||||
|
|
||||
|
import type { StepProps } from '../index' |
||||
|
|
||||
|
function StepChooseCurrency({ currency, setState }: StepProps) { |
||||
|
return <SelectCurrency onChange={currency => setState({ currency })} value={currency} /> |
||||
|
} |
||||
|
|
||||
|
export function StepChooseCurrencyFooter({ transitionTo, currency, t }: StepProps) { |
||||
|
return ( |
||||
|
<Fragment> |
||||
|
{currency && <CurrencyBadge mr="auto" currency={currency} />} |
||||
|
<Button primary disabled={!currency} onClick={() => transitionTo('connectDevice')}> |
||||
|
{t('common:next')} |
||||
|
</Button> |
||||
|
</Fragment> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default StepChooseCurrency |
||||
@ -0,0 +1,53 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { Fragment } from 'react' |
||||
|
import { Trans } from 'react-i18next' |
||||
|
|
||||
|
import Button from 'components/base/Button' |
||||
|
import Box from 'components/base/Box' |
||||
|
import ConnectDevice from 'components/modals/StepConnectDevice' |
||||
|
import { CurrencyCircleIcon } from 'components/base/CurrencyBadge' |
||||
|
|
||||
|
import type { StepProps } from '../index' |
||||
|
|
||||
|
function StepConnectDevice({ t, currency, currentDevice, setState }: StepProps) { |
||||
|
if (!currency) { |
||||
|
throw new Error('No currency given') |
||||
|
} |
||||
|
return ( |
||||
|
<Fragment> |
||||
|
<Box align="center" mb={6}> |
||||
|
<CurrencyCircleIcon mb={3} size={40} currency={currency} /> |
||||
|
<Box ff="Open Sans" fontSize={4} color="dark" textAlign="center" style={{ width: 370 }}> |
||||
|
<Trans i18nKey="importAccounts:connectDevice.desc" parent="div"> |
||||
|
{`You're about to import your `} |
||||
|
<strong style={{ fontWeight: 'bold' }}>{`${currency.name} (${ |
||||
|
currency.ticker |
||||
|
})`}</strong>
|
||||
|
{` account(s) from your Ledger device. Please follow the steps below:`} |
||||
|
</Trans> |
||||
|
</Box> |
||||
|
</Box> |
||||
|
<ConnectDevice |
||||
|
t={t} |
||||
|
deviceSelected={currentDevice} |
||||
|
currency={currency} |
||||
|
onStatusChange={s => { |
||||
|
if (s === 'connected') { |
||||
|
setState({ isAppOpened: true }) |
||||
|
} |
||||
|
}} |
||||
|
/> |
||||
|
</Fragment> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export function StepConnectDeviceFooter({ t, transitionTo, isAppOpened }: StepProps) { |
||||
|
return ( |
||||
|
<Button primary disabled={!isAppOpened} onClick={() => transitionTo('import')}> |
||||
|
{t('common:next')} |
||||
|
</Button> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default StepConnectDevice |
||||
@ -0,0 +1,168 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { PureComponent } from 'react' |
||||
|
import type { Account } from '@ledgerhq/live-common/lib/types' |
||||
|
|
||||
|
import { getBridgeForCurrency } from 'bridge' |
||||
|
|
||||
|
import Box from 'components/base/Box' |
||||
|
import Button from 'components/base/Button' |
||||
|
import Spinner from 'components/base/Spinner' |
||||
|
import IconExchange from 'icons/Exchange' |
||||
|
|
||||
|
import AccountRow from '../AccountRow' |
||||
|
|
||||
|
import type { StepProps } from '../index' |
||||
|
|
||||
|
class StepImport extends PureComponent<StepProps> { |
||||
|
componentDidMount() { |
||||
|
this.startScanAccountsDevice() |
||||
|
} |
||||
|
|
||||
|
componentWillUnmount() { |
||||
|
if (this.scanSubscription) { |
||||
|
this.scanSubscription.unsubscribe() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
scanSubscription = null |
||||
|
|
||||
|
startScanAccountsDevice() { |
||||
|
const { currency, currentDevice, setState } = this.props |
||||
|
try { |
||||
|
if (!currency) { |
||||
|
throw new Error('No currency to scan') |
||||
|
} |
||||
|
|
||||
|
if (!currentDevice) { |
||||
|
throw new Error('No device') |
||||
|
} |
||||
|
|
||||
|
const bridge = getBridgeForCurrency(currency) |
||||
|
|
||||
|
// TODO: use the real device
|
||||
|
const devicePath = currentDevice.path |
||||
|
|
||||
|
setState({ scanStatus: 'scanning' }) |
||||
|
|
||||
|
this.scanSubscription = bridge.scanAccountsOnDevice(currency, devicePath, { |
||||
|
next: account => { |
||||
|
const { scannedAccounts } = this.props |
||||
|
const hasAlreadyBeenScanned = !!scannedAccounts.find(a => account.id === a.id) |
||||
|
if (!hasAlreadyBeenScanned) { |
||||
|
setState({ scannedAccounts: [...scannedAccounts, account] }) |
||||
|
} |
||||
|
}, |
||||
|
complete: () => setState({ scanStatus: 'finished' }), |
||||
|
error: err => setState({ scanStatus: 'error', err }), |
||||
|
}) |
||||
|
} catch (err) { |
||||
|
setState({ scanStatus: 'error', err }) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
handleRetry = () => { |
||||
|
if (this.scanSubscription) { |
||||
|
this.scanSubscription.unsubscribe() |
||||
|
this.scanSubscription = null |
||||
|
} |
||||
|
this.handleResetState() |
||||
|
this.startScanAccountsDevice() |
||||
|
} |
||||
|
|
||||
|
handleResetState = () => { |
||||
|
const { setState } = this.props |
||||
|
setState({ |
||||
|
scanStatus: 'idle', |
||||
|
err: null, |
||||
|
scannedAccounts: [], |
||||
|
checkedAccountsIds: [], |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
handleToggleAccount = (account: Account) => { |
||||
|
const { checkedAccountsIds, setState } = this.props |
||||
|
const isChecked = checkedAccountsIds.find(id => id === account.id) !== undefined |
||||
|
if (isChecked) { |
||||
|
setState({ checkedAccountsIds: checkedAccountsIds.filter(id => id !== account.id) }) |
||||
|
} else { |
||||
|
setState({ checkedAccountsIds: [...checkedAccountsIds, account.id] }) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
handleAccountUpdate = (updatedAccount: Account) => { |
||||
|
const { scannedAccounts, setState } = this.props |
||||
|
setState({ |
||||
|
scannedAccounts: scannedAccounts.map(account => { |
||||
|
if (account.id !== updatedAccount.id) { |
||||
|
return account |
||||
|
} |
||||
|
return updatedAccount |
||||
|
}), |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
const { scanStatus, err, scannedAccounts, checkedAccountsIds, existingAccounts } = this.props |
||||
|
|
||||
|
return ( |
||||
|
<Box> |
||||
|
{err && <Box shrink>{err.message}</Box>} |
||||
|
|
||||
|
<Box flow={2}> |
||||
|
{scannedAccounts.map(account => { |
||||
|
const isChecked = checkedAccountsIds.find(id => id === account.id) !== undefined |
||||
|
const existingAccount = existingAccounts.find(a => a.id === account.id) |
||||
|
const isDisabled = existingAccount !== undefined |
||||
|
return ( |
||||
|
<AccountRow |
||||
|
key={account.id} |
||||
|
account={existingAccount || account} |
||||
|
isChecked={isChecked} |
||||
|
isDisabled={isDisabled} |
||||
|
onClick={this.handleToggleAccount} |
||||
|
onAccountUpdate={this.handleAccountUpdate} |
||||
|
/> |
||||
|
) |
||||
|
})} |
||||
|
{scanStatus === 'scanning' && ( |
||||
|
<Box |
||||
|
horizontal |
||||
|
bg="lightGrey" |
||||
|
borderRadius={3} |
||||
|
px={3} |
||||
|
align="center" |
||||
|
justify="center" |
||||
|
style={{ height: 48 }} |
||||
|
> |
||||
|
<Spinner color="grey" size={24} /> |
||||
|
</Box> |
||||
|
)} |
||||
|
</Box> |
||||
|
|
||||
|
<Box horizontal mt={2}> |
||||
|
{['error', 'finished'].includes(scanStatus) && ( |
||||
|
<Button ml="auto" small outline onClick={this.handleRetry}> |
||||
|
<Box horizontal flow={2} align="center"> |
||||
|
<IconExchange size={13} /> |
||||
|
<span>{'retry'}</span> |
||||
|
</Box> |
||||
|
</Button> |
||||
|
)} |
||||
|
</Box> |
||||
|
</Box> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default StepImport |
||||
|
|
||||
|
export const StepImportFooter = ({ scanStatus, onClickImport, checkedAccountsIds }: StepProps) => ( |
||||
|
<Button |
||||
|
primary |
||||
|
disabled={scanStatus !== 'finished' || checkedAccountsIds.length === 0} |
||||
|
onClick={() => onClickImport()} |
||||
|
> |
||||
|
{'Import accounts'} |
||||
|
</Button> |
||||
|
) |
||||
@ -0,0 +1,25 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React from 'react' |
||||
|
|
||||
|
import Box from 'components/base/Box' |
||||
|
import Button from 'components/base/Button' |
||||
|
import IconCheckCircle from 'icons/CheckCircle' |
||||
|
|
||||
|
import type { StepProps } from '../index' |
||||
|
|
||||
|
function StepFinish({ onCloseModal }: StepProps) { |
||||
|
return ( |
||||
|
<Box align="center" py={6}> |
||||
|
<Box color="positiveGreen" mb={4}> |
||||
|
<IconCheckCircle size={40} /> |
||||
|
</Box> |
||||
|
<Box mb={4}>{'Great success!'}</Box> |
||||
|
<Button primary onClick={onCloseModal}> |
||||
|
{'Close'} |
||||
|
</Button> |
||||
|
</Box> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default StepFinish |
||||
@ -0,0 +1,6 @@ |
|||||
|
title: Import accounts |
||||
|
breadcrumb: |
||||
|
informations: Informations |
||||
|
connectDevice: Connect device |
||||
|
import: Import |
||||
|
finish: End |
||||
Loading…
Reference in new issue