empty state for the account page, no transactions on dashboard

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<Props, *> {
+  render() {
+    const { t, account, openModal } = this.props
+
+    return (
+      <Box mt={7} alignItems="center">
+        <img
+          alt="emptyState Dashboard logo"
+          src={i('logos/emptyStateAccount.png')}
+          width="400"
+          height="89"
+        />
+        <Box mt={5} alignItems="center">
+          <Title>{t('account:emptyState.title')}</Title>
+          <Description>{t('account:emptyState.desc')}</Description>
+          <Button mt={3} padded primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
+            <Box horizontal flow={1} alignItems="center">
+              <IconReceive size={12} />
+              <Box>{t('account:emptyState.buttons.receiveFunds')}</Box>
+            </Box>
+          </Button>
+        </Box>
+      </Box>
+    )
+  }
+}
+
+export default compose(connect(null, mapDispatchToProps), translate())(EmptyStateAccount)

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<Props, State> {
         <Box horizontal mb={5}>
           <AccountHeader account={account} />
           <Box horizontal alignItems="center" justifyContent="flex-end" grow flow={2}>
-            <Button small primary onClick={() => openModal(MODAL_SEND, { account })}>
+            {account.operations.length > 0 && (
-              <Box horizontal flow={1} alignItems="center">
+              <Fragment>
-                <IconSend size={12} />
+                <Button small primary onClick={() => openModal(MODAL_SEND, { account })}>
-                <Box>{t('send:title')}</Box>
+                  <Box horizontal flow={1} alignItems="center">
-              </Box>
+                    <IconSend size={12} />
-            </Button>
+                    <Box>{t('send:title')}</Box>
-            <Button small primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
+                  </Box>
-              <Box horizontal flow={1} alignItems="center">
+                </Button>
-                <IconReceive size={12} />
+
-                <Box>{t('receive:title')}</Box>
+                <Button small primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
-              </Box>
+                  <Box horizontal flow={1} alignItems="center">
-            </Button>
+                    <IconReceive size={12} />
+                    <Box>{t('receive:title')}</Box>
+                  </Box>
+                </Button>
+              </Fragment>
+            )}
             <ButtonSettings onClick={() => openModal(MODAL_SETTINGS_ACCOUNT, { account })}>
               <Box align="center">
-                <IconControls size={16} />
+                <IconAccountSettings size={16} />
               </Box>
             </ButtonSettings>
           </Box>
         </Box>
-        <Box mb={7}>
+        {account.operations.length > 0 ? (
-          <BalanceSummary
+          <Fragment>
-            accounts={[account]}
+            <Box mb={7}>
-            chartColor={account.currency.color}
+              <BalanceSummary
-            chartId={`account-chart-${account.id}`}
+                accounts={[account]}
-            counterValue={counterValue}
+                chartColor={account.currency.color}
-            daysCount={daysCount}
+                chartId={`account-chart-${account.id}`}
-            selectedTime={selectedTime}
+                counterValue={counterValue}
-            renderHeader={({ totalBalance, sinceBalance, refBalance }) => (
+                daysCount={daysCount}
-              <Box flow={4} mb={2}>
+                selectedTime={selectedTime}
-                <Box horizontal>
+                renderHeader={({ totalBalance, sinceBalance, refBalance }) => (
-                  <BalanceTotal totalBalance={account.balance} unit={account.unit}>
+                  <Box flow={4} mb={2}>
-                    <FormattedVal
+                    <Box horizontal>
-                      animateTicker
+                      <BalanceTotal totalBalance={account.balance} unit={account.unit}>
-                      alwaysShowSign={false}
+                        <FormattedVal
-                      color="warmGrey"
+                          animateTicker
-                      unit={counterValue.units[0]}
+                          alwaysShowSign={false}
-                      fontSize={6}
+                          color="warmGrey"
-                      showCode
+                          unit={counterValue.units[0]}
-                      val={totalBalance}
+                          fontSize={6}
-                    />
+                          showCode
-                  </BalanceTotal>
+                          val={totalBalance}
-                  <Box>
+                        />
-                    <PillsDaysCount
+                      </BalanceTotal>
-                      selectedTime={selectedTime}
+                      <Box>
-                      onChange={this.handleChangeSelectedTime}
+                        <PillsDaysCount
-                    />
+                          selectedTime={selectedTime}
+                          onChange={this.handleChangeSelectedTime}
+                        />
+                      </Box>
+                    </Box>
+                    <Box horizontal justifyContent="center" flow={7}>
+                      <BalanceSincePercent
+                        t={t}
+                        alignItems="center"
+                        totalBalance={totalBalance}
+                        sinceBalance={sinceBalance}
+                        refBalance={refBalance}
+                        since={selectedTime}
+                      />
+                      <BalanceSinceDiff
+                        t={t}
+                        counterValue={counterValue}
+                        alignItems="center"
+                        totalBalance={totalBalance}
+                        sinceBalance={sinceBalance}
+                        refBalance={refBalance}
+                        since={selectedTime}
+                      />
+                    </Box>
                   </Box>
-                </Box>
+                )}
-                <Box horizontal justifyContent="center" flow={7}>
+              />
-                  <BalanceSincePercent
+            </Box>
-                    t={t}
+            <OperationsList account={account} title={t('account:lastOperations')} />
-                    alignItems="center"
+          </Fragment>
-                    totalBalance={totalBalance}
+        ) : (
-                    sinceBalance={sinceBalance}
+          <EmptyStateAccount account={account} />
-                    refBalance={refBalance}
+        )}
-                    since={selectedTime}
-                  />
-                  <BalanceSinceDiff
-                    t={t}
-                    counterValue={counterValue}
-                    alignItems="center"
-                    totalBalance={totalBalance}
-                    sinceBalance={sinceBalance}
-                    refBalance={refBalance}
-                    since={selectedTime}
-                  />
-                </Box>
-              </Box>
-            )}
-          />
-        </Box>
-        <OperationsList account={account} title={t('account:lastOperations')} />
       </Box>
     )
   }

src/components/DashboardPage/EmptyState.js

@@ -64,13 +64,13 @@ class EmptyState extends PureComponent<Props, *> {
   }
 }
 
-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,

src/components/DashboardPage/index.js

@@ -108,6 +108,11 @@ class DashboardPage extends PureComponent<Props, State> {
     const timeFrame = this.handleGreeting()
     const totalAccounts = accounts.length
 
+    const displayOperationsHelper = (account: Account) => {
+      return account.operations.length > 0
+    }
+    const displayOperations = accounts.some(displayOperationsHelper)
+
     return (
       <Box flow={7}>
         {totalAccounts > 0 ? (
@@ -186,13 +191,15 @@ class DashboardPage extends PureComponent<Props, State> {
                   ))}
                 </Box>
               </Box>
-              <OperationsList
+              {displayOperations && (
-                canShowMore
+                <OperationsList
-                onAccountClick={account => push(`/account/${account.id}`)}
+                  canShowMore
-                accounts={accounts}
+                  onAccountClick={account => push(`/account/${account.id}`)}
-                title={t('dashboard:recentActivity')}
+                  accounts={accounts}
-                withAccount
+                  title={t('dashboard:recentActivity')}
-              />
+                  withAccount
+                />
+              )}
             </Fragment>
           </Fragment>
         ) : (

src/icons/AccountSettings.js

@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+  <path
+    fill="currentColor"
+    d="M12.541 4.432l1.51-1.51a.697.697 0 0 1 1.1.152c.94 1.67.744 3.259-.575 4.577-1.153 1.154-2.565 1.502-4.127 1.02a.232.232 0 0 0-.233.057L3.71 15.234a2.09 2.09 0 1 1-2.955-2.956L7.26 5.772c.06-.06.083-.15.057-.232-.483-1.562-.134-2.974 1.02-4.128C9.655.094 11.244-.1 12.914.838a.697.697 0 0 1 .15 1.1l-1.509 1.51.165.82.82.164zM1.74 14.25a.697.697 0 0 0 .985 0l6.506-6.506a1.625 1.625 0 0 1 1.63-.404c1.068.33 1.942.115 2.73-.673.63-.63.862-1.277.702-2.015l-.854.854a1.161 1.161 0 0 1-1.049.318l-1.095-.22a1.161 1.161 0 0 1-.91-.91l-.22-1.094a1.168 1.168 0 0 1 .318-1.05l.855-.854c-.738-.16-1.386.073-2.016.702-.787.788-1.003 1.662-.673 2.73a1.625 1.625 0 0 1-.403 1.63L1.74 13.264a.697.697 0 0 0 0 .986z"
+  />
+)
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    {path}
+  </svg>
+)

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: