diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js index ee334406..71e48124 100644 --- a/src/components/SideBar/Item.js +++ b/src/components/SideBar/Item.js @@ -34,7 +34,7 @@ const Container = styled(Tabbable).attrs({ horizontal: true, pl: 3, })` - cursor: pointer; + cursor: ${p => (p.isActive ? 'default' : 'pointer')}; color: ${p => p.theme.colors.dark}; background: ${p => (p.isActive ? p.theme.colors.lightGrey : '')}; height: ${p => (p.big ? 50 : 36)}px; diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js index 17f7e8ea..359b57a0 100644 --- a/src/components/SideBar/index.js +++ b/src/components/SideBar/index.js @@ -1,6 +1,6 @@ // @flow -import React, { PureComponent } from 'react' +import React, { PureComponent, Fragment } from 'react' import { compose } from 'redux' import { translate } from 'react-i18next' import styled from 'styled-components' @@ -8,7 +8,7 @@ import { connect } from 'react-redux' import { getCryptoCurrencyIcon } from '@ledgerhq/live-common/lib/react' import type { Account } from '@ledgerhq/live-common/lib/types' -import { MODAL_SEND, MODAL_RECEIVE, MODAL_ADD_ACCOUNT } from 'config/constants' +import { MODAL_SEND, MODAL_RECEIVE } from 'config/constants' import type { T } from 'types/common' @@ -56,7 +56,6 @@ const PlusBtn = styled(Tabbable).attrs({ type Props = { t: T, - accounts: Account[], openModal: Function, updateStatus: UpdateStatus, } @@ -72,7 +71,7 @@ const mapDispatchToProps: Object = { class SideBar extends PureComponent { render() { - const { t, accounts, openModal, updateStatus } = this.props + const { t, openModal, updateStatus } = this.props return ( @@ -101,35 +100,13 @@ class SideBar extends PureComponent { {t('sidebar:accounts')} t('addAccount:title')}> - openModal(MODAL_ADD_ACCOUNT)}> + openModal('importAccounts')}> - {accounts.map(account => { - const Icon = getCryptoCurrencyIcon(account.currency) - return ( - - } - iconActiveColor={account.currency.color} - icon={Icon ? : null} - key={account.id} - linkTo={`/account/${account.id}`} - > - {account.name} - - ) - })} + @@ -138,9 +115,36 @@ class SideBar extends PureComponent { } } -export default compose( - connect(mapStateToProps, mapDispatchToProps, null, { - pure: false, - }), - translate(), -)(SideBar) +const AccountsList = connect(state => ({ + accounts: getVisibleAccounts(state), +}))(({ accounts }: { accounts: Account[] }) => ( + + {accounts.map(account => { + const Icon = getCryptoCurrencyIcon(account.currency) + return ( + + } + iconActiveColor={account.currency.color} + icon={Icon ? : null} + key={account.id} + linkTo={`/account/${account.id}`} + > + {account.name} + + ) + })} + +)) + +export default compose(connect(null, mapDispatchToProps, null, { pure: false }), translate())( + SideBar, +) diff --git a/src/components/modals/ImportAccounts/index.js b/src/components/modals/ImportAccounts/index.js new file mode 100644 index 00000000..e6adf70b --- /dev/null +++ b/src/components/modals/ImportAccounts/index.js @@ -0,0 +1,145 @@ +// @flow + +import React, { PureComponent } from 'react' +import { compose } from 'redux' +import { connect } from 'react-redux' +import { translate } from 'react-i18next' +import type { Currency } from '@ledgerhq/live-common/lib/types' + +import type { T, Device } from 'types/common' + +import { getCurrentDevice } from 'reducers/devices' + +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 StepInProgress from './steps/03-step-in-progress' +import StepFinish from './steps/04-step-finish' + +const createSteps = ({ t }: { t: T }) => [ + { + id: 'chooseCurrency', + label: t('importAccounts:breadcrumb.informations'), + component: StepChooseCurrency, + footer: StepChooseCurrencyFooter, + hideFooter: false, + }, + { + id: 'connectDevice', + label: t('importAccounts:breadcrumb.connectDevice'), + component: StepConnectDevice, + footer: StepConnectDeviceFooter, + hideFooter: false, + }, + { + id: 'import', + label: t('importAccounts:breadcrumb.import'), + component: StepInProgress, + footer: null, + hideFooter: true, + }, + { + id: 'finish', + label: t('importAccounts:breadcrumb.finish'), + component: StepFinish, + hideFooter: false, + footer: StepChooseCurrencyFooter, + }, +] + +type Props = { + t: T, + currentDevice: ?Device, +} + +type StepId = 'chooseCurrency' | 'connectDevice' | 'import' | 'finish' + +export type StepProps = { + t: T, + currency: ?Currency, + currentDevice: ?Device, + isAppOpened: boolean, + transitionTo: StepId => void, + setState: any => void, +} + +type State = { + stepId: StepId, + isAppOpened: boolean, + currency: ?Currency, + scannedAccounts: [], +} + +const mapStateToProps = state => ({ + currentDevice: getCurrentDevice(state), +}) + +const INITIAL_STATE = { + stepId: 'chooseCurrency', + isAppOpened: false, + currency: null, + scannedAccounts: [], +} + +class ImportAccounts extends PureComponent { + state = INITIAL_STATE + STEPS = createSteps({ + t: this.props.t, + }) + + transitionTo = stepId => { + this.setState({ stepId }) + } + + render() { + const { t, currentDevice } = this.props + const { stepId, currency, isAppOpened } = 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 } = step + + const stepProps: StepProps = { + t, + currency, + currentDevice, + isAppOpened, + transitionTo: this.transitionTo, + setState: (...args) => this.setState(...args), + } + + return ( + this.setState({ ...INITIAL_STATE })} + render={({ onClose }) => ( + + {t('importAccounts:title')} + + + + + {!hideFooter && ( + + + {StepFooter ? : footer} + + + )} + + )} + /> + ) + } +} + +export default compose(connect(mapStateToProps), translate())(ImportAccounts) diff --git a/src/components/modals/ImportAccounts/steps/01-step-choose-currency.js b/src/components/modals/ImportAccounts/steps/01-step-choose-currency.js new file mode 100644 index 00000000..90179ba8 --- /dev/null +++ b/src/components/modals/ImportAccounts/steps/01-step-choose-currency.js @@ -0,0 +1,22 @@ +// @flow + +import React from 'react' + +import SelectCurrency from 'components/SelectCurrency' +import Button from 'components/base/Button' + +import type { StepProps } from '../index' + +function StepChooseCurrency({ currency, setState }: StepProps) { + return setState({ currency })} value={currency} /> +} + +export function StepChooseCurrencyFooter({ transitionTo, currency, t }: StepProps) { + return ( + + ) +} + +export default StepChooseCurrency diff --git a/src/components/modals/ImportAccounts/steps/02-step-connect-device.js b/src/components/modals/ImportAccounts/steps/02-step-connect-device.js new file mode 100644 index 00000000..c807ce56 --- /dev/null +++ b/src/components/modals/ImportAccounts/steps/02-step-connect-device.js @@ -0,0 +1,33 @@ +// @flow + +import React from 'react' + +import Button from 'components/base/Button' +import ConnectDevice from 'components/modals/StepConnectDevice' + +import type { StepProps } from '../index' + +function StepConnectDevice({ t, currency, currentDevice, setState }: StepProps) { + return ( + { + if (s === 'connected') { + setState({ isAppOpened: true }) + } + }} + /> + ) +} + +export function StepConnectDeviceFooter({ t, transitionTo, isAppOpened }: StepProps) { + return ( + + ) +} + +export default StepConnectDevice diff --git a/src/components/modals/ImportAccounts/steps/03-step-in-progress.js b/src/components/modals/ImportAccounts/steps/03-step-in-progress.js new file mode 100644 index 00000000..30dc5b9f --- /dev/null +++ b/src/components/modals/ImportAccounts/steps/03-step-in-progress.js @@ -0,0 +1,11 @@ +// @flow + +import React from 'react' + +import Box from 'components/base/Box' + +function StepInProgress() { + return {'StepInProgress'} +} + +export default StepInProgress diff --git a/src/components/modals/ImportAccounts/steps/04-step-finish.js b/src/components/modals/ImportAccounts/steps/04-step-finish.js new file mode 100644 index 00000000..1fbd9719 --- /dev/null +++ b/src/components/modals/ImportAccounts/steps/04-step-finish.js @@ -0,0 +1,11 @@ +// @flow + +import React from 'react' + +import Box from 'components/base/Box' + +function StepFinish() { + return {'StepFinish'} +} + +export default StepFinish diff --git a/src/components/modals/StepConnectDevice.js b/src/components/modals/StepConnectDevice.js index b36d6740..99a61b00 100644 --- a/src/components/modals/StepConnectDevice.js +++ b/src/components/modals/StepConnectDevice.js @@ -13,7 +13,7 @@ type Props = { account?: ?Account, currency?: ?CryptoCurrency, deviceSelected?: ?Device, - onChangeDevice: Device => void, + onChangeDevice?: Device => void, onStatusChange: string => void, } diff --git a/src/components/modals/index.js b/src/components/modals/index.js index 5f286eef..c44a197b 100644 --- a/src/components/modals/index.js +++ b/src/components/modals/index.js @@ -1,5 +1,5 @@ export Debug from './Debug' -export AddAccount from './AddAccount' +export ImportAccounts from './ImportAccounts' export OperationDetails from './OperationDetails' export Receive from './Receive' export Send from './Send' diff --git a/src/icons/Home.js b/src/icons/Home.js index 72768838..4850aa6a 100644 --- a/src/icons/Home.js +++ b/src/icons/Home.js @@ -3,7 +3,7 @@ import React from 'react' const path = ( - + ) export default ({ size, ...p }: { size: number }) => ( diff --git a/static/i18n/en/importAccounts.yml b/static/i18n/en/importAccounts.yml new file mode 100644 index 00000000..4d122a82 --- /dev/null +++ b/static/i18n/en/importAccounts.yml @@ -0,0 +1,6 @@ +title: Import accounts +breadcrumb: + informations: Informations + connectDevice: Connect device + import: Import accounts + finish: Confirm