Browse Source

Rename ImportModal to AddAccountsModal

master
meriadec 7 years ago
parent
commit
15a7cf607e
No known key found for this signature in database GPG Key ID: 1D2FC2305E2CB399
  1. 4
      src/components/DashboardPage/EmptyState.js
  2. 6
      src/components/MainSideBar/index.js
  3. 0
      src/components/modals/AddAccounts/AccountRow.js
  4. 33
      src/components/modals/AddAccounts/index.js
  5. 0
      src/components/modals/AddAccounts/steps/01-step-choose-currency.js
  6. 2
      src/components/modals/AddAccounts/steps/02-step-connect-device.js
  7. 28
      src/components/modals/AddAccounts/steps/03-step-import.js
  8. 0
      src/components/modals/AddAccounts/steps/04-step-finish.js
  9. 2
      src/components/modals/index.js
  10. 2
      src/config/constants.js
  11. 2
      static/i18n/en/app.yml
  12. 2
      static/i18n/fr/app.yml

4
src/components/DashboardPage/EmptyState.js

@ -8,6 +8,8 @@ import { compose } from 'redux'
import { translate } from 'react-i18next'
import { push } from 'react-router-redux'
import { MODAL_ADD_ACCOUNTS } from 'config/constants'
import { openModal } from 'reducers/modals'
import type { T } from 'types/common'
@ -50,7 +52,7 @@ class EmptyState extends PureComponent<Props, *> {
padded
primary
style={{ width: 120 }}
onClick={() => openModal('importAccounts')}
onClick={() => openModal(MODAL_ADD_ACCOUNTS)}
>
{t('app:emptyState.dashboard.buttons.addAccount')}
</Button>

6
src/components/MainSideBar/index.js

@ -13,7 +13,7 @@ import type { Account } from '@ledgerhq/live-common/lib/types'
import type { T } from 'types/common'
import type { UpdateStatus } from 'reducers/update'
import { MODAL_RECEIVE, MODAL_SEND } from 'config/constants'
import { MODAL_RECEIVE, MODAL_SEND, MODAL_ADD_ACCOUNTS } from 'config/constants'
import { accountsSelector } from 'reducers/accounts'
import { openModal } from 'reducers/modals'
@ -70,7 +70,7 @@ class MainSideBar extends PureComponent<Props> {
handleOpenReceiveModal = () => this.props.openModal(MODAL_RECEIVE)
handleClickManager = () => this.push('/manager')
handleClickExchange = () => this.push('/exchange')
handleOpenImportModal = () => this.props.openModal('importAccounts')
handleOpenImportModal = () => this.props.openModal(MODAL_ADD_ACCOUNTS)
render() {
const { t, accounts, location, updateStatus } = this.props
@ -78,7 +78,7 @@ class MainSideBar extends PureComponent<Props> {
const addAccountButton = (
<AddAccountButton
tooltipText={t('app:importAccounts.title')}
tooltipText={t('app:addAccounts.title')}
onClick={this.handleOpenImportModal}
/>
)

0
src/components/modals/ImportAccounts/AccountRow.js → src/components/modals/AddAccounts/AccountRow.js

33
src/components/modals/ImportAccounts/index.js → src/components/modals/AddAccounts/index.js

@ -10,6 +10,7 @@ import SyncSkipUnderPriority from 'components/SyncSkipUnderPriority'
import type { Currency, Account } from '@ledgerhq/live-common/lib/types'
import { MODAL_ADD_ACCOUNTS } from 'config/constants'
import type { T, Device } from 'types/common'
import { getCurrentDevice } from 'reducers/devices'
@ -29,7 +30,7 @@ import StepFinish from './steps/04-step-finish'
const createSteps = ({ t }: { t: T }) => [
{
id: 'chooseCurrency',
label: t('app:importAccounts.breadcrumb.informations'),
label: t('app:addAccounts.breadcrumb.informations'),
component: StepChooseCurrency,
footer: StepChooseCurrencyFooter,
onBack: null,
@ -37,7 +38,7 @@ const createSteps = ({ t }: { t: T }) => [
},
{
id: 'connectDevice',
label: t('app:importAccounts.breadcrumb.connectDevice'),
label: t('app:addAccounts.breadcrumb.connectDevice'),
component: StepConnectDevice,
footer: StepConnectDeviceFooter,
onBack: ({ transitionTo }: StepProps) => transitionTo('chooseCurrency'),
@ -45,7 +46,7 @@ const createSteps = ({ t }: { t: T }) => [
},
{
id: 'import',
label: t('app:importAccounts.breadcrumb.import'),
label: t('app:addAccounts.breadcrumb.import'),
component: StepImport,
footer: StepImportFooter,
onBack: ({ transitionTo }: StepProps) => transitionTo('chooseCurrency'),
@ -53,7 +54,7 @@ const createSteps = ({ t }: { t: T }) => [
},
{
id: 'finish',
label: t('app:importAccounts.breadcrumb.finish'),
label: t('app:addAccounts.breadcrumb.finish'),
component: StepFinish,
footer: null,
onBack: null,
@ -91,7 +92,7 @@ export type StepProps = {
isAppOpened: boolean,
transitionTo: StepId => void,
setState: any => void,
onClickImport: void => Promise<void>,
onClickAdd: void => Promise<void>,
onCloseModal: void => void,
// scan process
@ -122,7 +123,7 @@ const INITIAL_STATE = {
scanStatus: 'idle',
}
class ImportAccounts extends PureComponent<Props, State> {
class AddAccounts extends PureComponent<Props, State> {
state = INITIAL_STATE
STEPS = createSteps({
t: this.props.t,
@ -136,24 +137,24 @@ class ImportAccounts extends PureComponent<Props, State> {
this.setState(nextState)
}
handleClickImport = async () => {
handleClickAdd = 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++) {
const accountsToAdd = scannedAccounts.filter(account => accountsIdsMap[account.id] === true)
for (let i = 0; i < accountsToAdd.length; i++) {
await idleCallback()
addAccount(accountsToImport[i])
addAccount(accountsToAdd[i])
}
this.transitionTo('finish')
}
handleCloseModal = () => {
const { closeModal } = this.props
closeModal('importAccounts')
closeModal(MODAL_ADD_ACCOUNTS)
}
render() {
@ -172,7 +173,7 @@ class ImportAccounts extends PureComponent<Props, State> {
const step = this.STEPS[stepIndex]
if (!step) {
throw new Error(`ImportAccountsModal: step ${stepId} doesn't exists`)
throw new Error(`AddAccountsModal: step ${stepId} doesn't exists`)
}
const { component: StepComponent, footer: StepFooter, hideFooter, onBack } = step
@ -187,7 +188,7 @@ class ImportAccounts extends PureComponent<Props, State> {
scanStatus,
err,
isAppOpened,
onClickImport: this.handleClickImport,
onClickAdd: this.handleClickAdd,
onCloseModal: this.handleCloseModal,
transitionTo: this.transitionTo,
setState: (...args) => this.setState(...args),
@ -195,14 +196,14 @@ class ImportAccounts extends PureComponent<Props, State> {
return (
<Modal
name="importAccounts"
name={MODAL_ADD_ACCOUNTS}
refocusWhenChange={stepId}
onHide={() => this.setState({ ...INITIAL_STATE })}
render={({ onClose }) => (
<ModalBody onClose={onClose}>
<SyncSkipUnderPriority priority={100} />
<ModalTitle onBack={onBack ? () => onBack(stepProps) : void 0}>
{t('app:importAccounts.title')}
{t('app:addAccounts.title')}
</ModalTitle>
<ModalContent>
<Breadcrumb mb={6} currentStep={stepIndex} items={this.STEPS} />
@ -226,7 +227,7 @@ export default compose(
mapDispatchToProps,
),
translate(),
)(ImportAccounts)
)(AddAccounts)
function idleCallback() {
return new Promise(resolve => window.requestIdleCallback(resolve))

0
src/components/modals/ImportAccounts/steps/01-step-choose-currency.js → src/components/modals/AddAccounts/steps/01-step-choose-currency.js

2
src/components/modals/ImportAccounts/steps/02-step-connect-device.js → src/components/modals/AddAccounts/steps/02-step-connect-device.js

@ -19,7 +19,7 @@ function StepConnectDevice({ t, currency, currentDevice, setState }: StepProps)
<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">
<Trans i18nKey="app:addAccounts.connectDevice.desc" parent="div">
{`You're about to import your `}
<strong style={{ fontWeight: 'bold' }}>{`${currency.name} (${
currency.ticker

28
src/components/modals/ImportAccounts/steps/03-step-import.js → src/components/modals/AddAccounts/steps/03-step-import.js

@ -160,7 +160,7 @@ class StepImport extends PureComponent<StepProps> {
fontSize={2}
style={{ textTransform: 'uppercase' }}
>
{t('app:importAccounts.accountToImportSubtitle', {
{t('app:addAccounts.accountToImportSubtitle', {
count: importableAccounts.length,
})}
</Box>
@ -170,8 +170,8 @@ class StepImport extends PureComponent<StepProps> {
fontSize={3}
>
{isAllSelected
? t('app:importAccounts.unselectAll')
: t('app:importAccounts.selectAll')}
? t('app:addAccounts.unselectAll')
: t('app:addAccounts.selectAll')}
</FakeLink>
</Box>
)}
@ -211,7 +211,7 @@ class StepImport extends PureComponent<StepProps> {
fontSize={2}
style={{ textTransform: 'uppercase' }}
>
{t('app:importAccounts.createNewAccount')}
{t('app:addAccounts.createNewAccount')}
</Box>
</Box>
<AccountRow
@ -231,7 +231,7 @@ class StepImport extends PureComponent<StepProps> {
<Button small outline onClick={this.handleRetry}>
<Box horizontal flow={2} align="center">
<IconExchange size={13} />
<span>{t('app:importAccounts.retrySync')}</span>
<span>{t('app:addAccounts.retrySync')}</span>
</Box>
</Button>
)}
@ -256,7 +256,7 @@ export const LoadingRow = styled(Box).attrs({
export const StepImportFooter = ({
scanStatus,
onClickImport,
onClickAdd,
checkedAccountsIds,
scannedAccounts,
t,
@ -266,30 +266,30 @@ export const StepImportFooter = ({
return account && account.operations.length === 0
})
const willImportAccounts = checkedAccountsIds.some(id => {
const willAddAccounts = checkedAccountsIds.some(id => {
const account = scannedAccounts.find(a => a.id === id)
return account && account.operations.length > 0
})
const importedAccountsCount = checkedAccountsIds.filter(id => {
const addedAccountsCount = checkedAccountsIds.filter(id => {
const account = scannedAccounts.find(acc => acc.id === id)
return account && account.operations.length > 0
}).length
const ctaWording =
willCreateAccount && willImportAccounts
? `${t('app:importAccounts.cta.create')} / ${t('app:importAccounts.cta.import', {
count: importedAccountsCount,
willCreateAccount && willAddAccounts
? `${t('app:addAccounts.cta.create')} / ${t('app:addAccounts.cta.import', {
count: addedAccountsCount,
})}`
: willCreateAccount
? t('app:importAccounts.cta.create')
: t('app:importAccounts.cta.import', { count: importedAccountsCount })
? t('app:addAccounts.cta.create')
: t('app:addAccounts.cta.import', { count: addedAccountsCount })
return (
<Button
primary
disabled={scanStatus !== 'finished' || checkedAccountsIds.length === 0}
onClick={() => onClickImport()}
onClick={() => onClickAdd()}
>
{ctaWording}
</Button>

0
src/components/modals/ImportAccounts/steps/04-step-finish.js → src/components/modals/AddAccounts/steps/04-step-finish.js

2
src/components/modals/index.js

@ -1,5 +1,5 @@
export Debug from './Debug'
export ImportAccounts from './ImportAccounts'
export AddAccounts from './AddAccounts'
export OperationDetails from './OperationDetails'
export Receive from './Receive'
export Send from './Send'

2
src/config/constants.js

@ -19,7 +19,7 @@ export const CHECK_UPDATE_DELAY = 5e3
export const DEVICE_DISCONNECT_DEBOUNCE = intFromEnv('LEDGER_DEVICE_DISCONNECT_DEBOUNCE', 500)
export const MODAL_ADD_ACCOUNT = 'MODAL_ADD_ACCOUNT'
export const MODAL_ADD_ACCOUNTS = 'MODAL_ADD_ACCOUNTS'
export const MODAL_OPERATION_DETAILS = 'MODAL_OPERATION_DETAILS'
export const MODAL_RECEIVE = 'MODAL_RECEIVE'
export const MODAL_SEND = 'MODAL_SEND'

2
static/i18n/en/app.yml

@ -116,7 +116,7 @@ exchange:
genuinecheck:
modal:
title: Genuine check, bro
importAccounts:
addAccounts:
title: Add accounts
breadcrumb:
informations: Informations

2
static/i18n/fr/app.yml

@ -117,7 +117,7 @@ exchange:
genuinecheck:
modal:
title: Genuine check, bro
importAccounts:
addAccounts:
title: Add accounts
breadcrumb:
informations: Informations

Loading…
Cancel
Save