diff --git a/src/components/modals/SettingsAccount.js b/src/components/modals/SettingsAccount.js index 70250910..c6468abe 100644 --- a/src/components/modals/SettingsAccount.js +++ b/src/components/modals/SettingsAccount.js @@ -1,59 +1,47 @@ // @flow import React, { PureComponent } from 'react' +import styled from 'styled-components' import { connect } from 'react-redux' +import { compose } from 'redux' import get from 'lodash/get' -import { push } from 'react-router-redux' -import type { Account, Unit } from '@ledgerhq/live-common/lib/types' +import { translate } from 'react-i18next' +import type { Account, Unit, Currency } from '@ledgerhq/live-common/lib/types' +import type { T } from 'types/common' import { MODAL_SETTINGS_ACCOUNT } from 'config/constants' -import { updateAccount, removeAccount } from 'actions/accounts' -import { setDataModal, closeModal } from 'reducers/modals' +import { updateAccount } from 'actions/accounts' +import { setDataModal } from 'reducers/modals' +import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon' import Box from 'components/base/Box' import Button from 'components/base/Button' -import Input from 'components/base/Input' +import Input, { ErrorMessageInput } from 'components/base/Input' import Select from 'components/base/Select/index' import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal' -import Label from 'components/base/Label' - -import IconEdit from 'icons/Edit' type State = { accountName: string | null, - minConfirmations: number | null, - editName: boolean, - nameHovered: boolean, - editUnit: boolean, + accountUnit: Unit | null, + accountNameError: boolean, } type Props = { - closeModal: Function, - push: Function, - removeAccount: Function, setDataModal: Function, updateAccount: Function, + t: T, } const mapDispatchToProps = { - closeModal, - push, - removeAccount, setDataModal, updateAccount, } const defaultState = { - editName: false, accountName: null, - minConfirmations: null, - nameHovered: false, - editUnit: false, -} - -function hasNoOperations(account: Account) { - return get(account, 'operations.length', 0) === 0 + accountUnit: null, + accountNameError: false, } class SettingsAccount extends PureComponent { @@ -62,9 +50,9 @@ class SettingsAccount extends PureComponent { } getAccount(data: Object) { - const { accountName, minConfirmations } = this.state - + const { accountName } = this.state const account = get(data, 'account', {}) + return { ...account, ...(accountName !== null @@ -72,168 +60,101 @@ class SettingsAccount extends PureComponent { name: accountName, } : {}), - settings: { - ...account.settings, - minConfirmations: minConfirmations || account.minConfirmations, - }, } } - handleHoveredName = (state: boolean) => () => - this.setState({ - nameHovered: state, - }) - - handleChangeMinConfirmations = account => minConfirmations => { - const { updateAccount } = this.props - this.setState({ minConfirmations }) - window.requestAnimationFrame(() => { - updateAccount({ - ...account, - minConfirmations: Number(minConfirmations), - }) - }) - } - - handleEditName = (state: boolean) => () => - this.setState({ - nameHovered: false, - editName: state, - }) - handleChangeName = (value: string) => this.setState({ accountName: value, }) - handleCancelEditName = (data: Object) => () => { - this.handleEditName(false)() - this.setState({ - accountName: get(data, 'account.name', ''), - }) - } - - handleSubmitName = (account: Account) => (e: SyntheticEvent) => { + handleSubmit = (account: Account, onClose: () => void) => ( + e: SyntheticEvent, + ) => { e.preventDefault() const { updateAccount, setDataModal } = this.props - const { accountName } = this.state + const { accountName, accountUnit } = this.state if (accountName !== '') { + account = { ...account, unit: accountUnit || account.unit } updateAccount(account) setDataModal(MODAL_SETTINGS_ACCOUNT, { account }) - - this.setState({ - editName: false, - }) + onClose() + } else { + this.setState({ accountNameError: true }) } } - handleArchiveAccount = (account: Account) => () => { - const { push, closeModal, updateAccount, removeAccount } = this.props - const shouldRemove = hasNoOperations(account) - - if (shouldRemove) { - removeAccount(account) - } else { - updateAccount({ ...account, archived: true }) + handleFocus = (name: string) => { + switch (name) { + case 'accountName': + this.setState({ accountNameError: false }) + break + default: + break } - - closeModal(MODAL_SETTINGS_ACCOUNT) - push('/') } - handleHide = () => - this.setState({ - ...defaultState, - }) - - handleChangeUnit = (value: Unit, account: Account) => { - const { updateAccount, setDataModal } = this.props - account = { ...account, unit: value } - updateAccount(account) - setDataModal(MODAL_SETTINGS_ACCOUNT, { account }) + handleChangeUnit = (value: Unit) => { + this.setState({ accountUnit: value }) } render() { - const { editName, nameHovered, editUnit } = this.state + const { accountUnit, accountNameError } = this.state + const { t } = this.props return ( { const account = this.getAccount(data) return ( - {'Account settings'} - - - - {editName ? ( -
- - - - - - - - - -
- ) : ( - account.name - )} -
- {!editName && - nameHovered && ( - - - - )} -
- - - - - {editUnit && ( - - - } + onFocus={() => this.handleFocus('accountName')} + /> + {accountNameError && ( + + {t('account:settings.accountName.error')} + + )} + + + + + {t('account:settings.unit.title')} + {t('account:settings.unit.desc')} + + +