diff --git a/src/components/AccountPage/EmptyStateAccount.js b/src/components/AccountPage/EmptyStateAccount.js new file mode 100644 index 00000000..e7986f9d --- /dev/null +++ b/src/components/AccountPage/EmptyStateAccount.js @@ -0,0 +1,58 @@ +// @flow + +import React, { PureComponent } from 'react' +import { i } from 'helpers/staticPath' +import styled from 'styled-components' +import { connect } from 'react-redux' +import { compose } from 'redux' +import { translate } from 'react-i18next' + +import { openModal } from 'reducers/modals' +import type { T } from 'types/common' +import type { Account } from '@ledgerhq/live-common/lib/types' + +import { MODAL_RECEIVE } from 'config/constants' + +import Box from 'components/base/Box' +import Button from 'components/base/Button' +import { Title, Description } from 'components/DashboardPage/EmptyState' +import IconReceive from 'icons/Receive' + +const mapDispatchToProps = { + openModal, +} + +type Props = { + t: T, + account: Account, + openModal: Function, +} + +class EmptyStateAccount extends PureComponent { + render() { + const { t, account, openModal } = this.props + + return ( + + emptyState Dashboard logo + + {t('account:emptyState.title')} + {t('account:emptyState.desc')} + + + + ) + } +} + +export default compose(connect(null, mapDispatchToProps), translate())(EmptyStateAccount) diff --git a/src/components/AccountPage/index.js b/src/components/AccountPage/index.js index f972c9f7..7bd5c134 100644 --- a/src/components/AccountPage/index.js +++ b/src/components/AccountPage/index.js @@ -1,6 +1,6 @@ // @flow -import React, { PureComponent } from 'react' +import React, { PureComponent, Fragment } from 'react' import { compose } from 'redux' import { connect } from 'react-redux' import { translate } from 'react-i18next' @@ -18,7 +18,7 @@ import { getAccountById } from 'reducers/accounts' import { counterValueCurrencySelector, localeSelector } from 'reducers/settings' import { openModal } from 'reducers/modals' -import IconControls from 'icons/Controls' +import IconAccountSettings from 'icons/AccountSettings' import IconReceive from 'icons/Receive' import IconSend from 'icons/Send' @@ -35,6 +35,7 @@ import PillsDaysCount from 'components/PillsDaysCount' import OperationsList from 'components/OperationsList' import AccountHeader from './AccountHeader' +import EmptyStateAccount from './EmptyStateAccount' const ButtonSettings = styled(Button).attrs({ small: true, @@ -99,78 +100,89 @@ class AccountPage extends PureComponent { - - + {account.operations.length > 0 && ( + + + + + + )} openModal(MODAL_SETTINGS_ACCOUNT, { account })}> - + - - ( - - - - - - - + {account.operations.length > 0 ? ( + + + ( + + + + + + + + + + + + + - - - - - - - )} - /> - - + )} + /> + + + + ) : ( + + )} ) } diff --git a/src/components/DashboardPage/EmptyState.js b/src/components/DashboardPage/EmptyState.js index cb1f2562..48bf8fc8 100644 --- a/src/components/DashboardPage/EmptyState.js +++ b/src/components/DashboardPage/EmptyState.js @@ -64,13 +64,13 @@ class EmptyState extends PureComponent { } } -const Title = styled(Box).attrs({ +export const Title = styled(Box).attrs({ ff: 'Museo Sans|Regular', fontSize: 6, color: p => p.theme.colors.dark, })`` -const Description = styled(Box).attrs({ +export const Description = styled(Box).attrs({ ff: 'Open Sans|Regular', fontSize: 4, color: p => p.theme.colors.graphite, diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js index 3027da19..80343277 100644 --- a/src/components/DashboardPage/index.js +++ b/src/components/DashboardPage/index.js @@ -108,6 +108,11 @@ class DashboardPage extends PureComponent { const timeFrame = this.handleGreeting() const totalAccounts = accounts.length + const displayOperationsHelper = (account: Account) => { + return account.operations.length > 0 + } + const displayOperations = accounts.some(displayOperationsHelper) + return ( {totalAccounts > 0 ? ( @@ -186,13 +191,15 @@ class DashboardPage extends PureComponent { ))} - push(`/account/${account.id}`)} - accounts={accounts} - title={t('dashboard:recentActivity')} - withAccount - /> + {displayOperations && ( + push(`/account/${account.id}`)} + accounts={accounts} + title={t('dashboard:recentActivity')} + withAccount + /> + )} ) : ( diff --git a/src/icons/AccountSettings.js b/src/icons/AccountSettings.js new file mode 100644 index 00000000..3bb3053e --- /dev/null +++ b/src/icons/AccountSettings.js @@ -0,0 +1,16 @@ +// @flow + +import React from 'react' + +const path = ( + +) + +export default ({ size, ...p }: { size: number }) => ( + + {path} + +) diff --git a/static/i18n/en/account.yml b/static/i18n/en/account.yml index 66126329..be9e4d8a 100644 --- a/static/i18n/en/account.yml +++ b/static/i18n/en/account.yml @@ -1,6 +1,11 @@ balance: Balance receive: Receive lastOperations: Last operations +emptyState: + title: This is a title, use it with caution + desc: Please create a new account or recover an old account from your Ledger device. + buttons: + receiveFunds: Receive Funds settings: title: Edit Account accountName: diff --git a/static/images/logos/emptyStateAccount.png b/static/images/logos/emptyStateAccount.png new file mode 100644 index 00000000..094ab051 Binary files /dev/null and b/static/images/logos/emptyStateAccount.png differ