Merge pull request #658 from NastiaS/minorFixesBranch

Minor fixes branch

src/components/DashboardPage/index.js

@@ -4,15 +4,17 @@ import React, { PureComponent, Fragment } from 'react'
 import { compose } from 'redux'
 import { translate } from 'react-i18next'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 import { push } from 'react-router-redux'
 import { createStructuredSelector } from 'reselect'
-
 import type { Account, Currency } from '@ledgerhq/live-common/lib/types'
 import type { T } from 'types/common'
 
 import { colors } from 'styles/theme'
 
 import { accountsSelector } from 'reducers/accounts'
+import { openModal } from 'reducers/modals'
+import { MODAL_ADD_ACCOUNTS } from 'config/constants'
 import {
   counterValueCurrencySelector,
   localeSelector,
@@ -28,11 +30,12 @@ import UpdateNotifier from 'components/UpdateNotifier'
 import BalanceInfos from 'components/BalanceSummary/BalanceInfos'
 import BalanceSummary from 'components/BalanceSummary'
 import Box from 'components/base/Box'
+import { i } from 'helpers/staticPath'
 import PillsDaysCount from 'components/PillsDaysCount'
 import Text from 'components/base/Text'
 import OperationsList from 'components/OperationsList'
 import StickyBackToTop from 'components/StickyBackToTop'
-
+import Button from 'components/base/Button'
 import AccountCard from './AccountCard'
 import AccountsOrder from './AccountsOrder'
 import EmptyState from './EmptyState'
@@ -48,6 +51,7 @@ const mapDispatchToProps = {
   push,
   reorderAccounts,
   saveSettings,
+  openModal,
 }
 
 type Props = {
@@ -57,6 +61,7 @@ type Props = {
   counterValue: Currency,
   selectedTimeRange: TimeRange,
   saveSettings: ({ selectedTimeRange: TimeRange }) => *,
+  openModal: string => void,
 }
 
 class DashboardPage extends PureComponent<Props> {
@@ -82,11 +87,11 @@ class DashboardPage extends PureComponent<Props> {
   _cacheBalance = null
 
   render() {
-    const { accounts, t, counterValue, selectedTimeRange } = this.props
+    const { accounts, t, counterValue, selectedTimeRange, openModal } = this.props
     const daysCount = timeRangeDaysByKey[selectedTimeRange]
     const timeFrame = this.handleGreeting()
+    const imagePath = i('empty-account-tile.svg')
     const totalAccounts = accounts.length
-
     const displayOperationsHelper = (account: Account) => account.operations.length > 0
     const displayOperations = accounts.some(displayOperationsHelper)
 
@@ -155,17 +160,43 @@ class DashboardPage extends PureComponent<Props> {
                     style={{ margin: '0 -16px' }}
                   >
                     {accounts
-                      .concat(Array(3 - (accounts.length % 3)).fill(null))
+                      .concat(
+                        Array(3 - (accounts.length % 3))
+                          .fill(null)
+                          .map((_, i) => i === 0),
+                      )
                       .map((account, i) => (
-                        <Box key={account ? account.id : `placeholder_${i}`} flex="33%" p={16}>
+                        <Box
+                          key={typeof account === 'object' ? account.id : `placeholder_${i}`}
+                          flex="33%"
+                          p={16}
+                        >
                           {account ? (
-                            <AccountCard
-                              key={account.id}
-                              counterValue={counterValue}
-                              account={account}
-                              daysCount={daysCount}
-                              onClick={this.onAccountClick}
-                            />
+                            typeof account === 'object' ? (
+                              <AccountCard
+                                key={account.id}
+                                counterValue={counterValue}
+                                account={account}
+                                daysCount={daysCount}
+                                onClick={this.onAccountClick}
+                              />
+                            ) : (
+                              <Wrapper>
+                                <img alt="" src={imagePath} />
+                                <Box
+                                  ff="Open Sans"
+                                  fontSize={3}
+                                  color="graphite"
+                                  pb={2}
+                                  textAlign="center"
+                                >
+                                  {t('app:dashboard.emptyAccountTile.desc')}
+                                </Box>
+                                <Button primary onClick={() => openModal(MODAL_ADD_ACCOUNTS)}>
+                                  {t('app:dashboard.emptyAccountTile.createAccount')}
+                                </Button>
+                              </Wrapper>
+                            )
                           ) : null}
                         </Box>
                       ))}
@@ -198,3 +229,12 @@ export default compose(
   ),
   translate(),
 )(DashboardPage)
+
+const Wrapper = styled(Box).attrs({
+  p: 4,
+  flex: 1,
+  alignItems: 'center',
+})`
+  border: 1px dashed ${p => p.theme.colors.fog};
+  border-radius: 4px;
+`

static/i18n/en/app.yml

@@ -94,6 +94,9 @@ account:
       error: Invalid endpoint
 dashboard:
   title: Portfolio
+  emptyAccountTile:
+    desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    createAccount: Create Account
   accounts:
     title: Accounts ({{count}})
   greeting:

static/i18n/en/onboarding.yml

@@ -100,7 +100,7 @@ genuineCheck:
   step2:
     title: Did you save your recovery phrase by yourself?
   step3:
-    title: Check if your Ledger device is genuine
+    title: Do you have a genuine Ledger device?
   isGenuinePassed: Your device is genuine
   buttons:
     genuineCheck: Genuine check
@@ -118,7 +118,7 @@ setPassword:
   disclaimer:
     note1: Make sure to remember your password. Do not share it.
     note2: Losing your password requires resetting Ledger Live and re-adding accounts.
-    note3: Resetting Ledger Live does not affect your crypto-assets.
+    note3: Resetting Ledger Live does not affect your crypto assets.
     password: Password
     confirmPassword: Confirm password
     skipThisStep: Skip this step
@@ -127,12 +127,12 @@ analytics:
   desc: Share anonymous usage and diagnostics data to help improve Ledger products, services and security features.
   shareAnalytics:
     title: Share usage data
-    desc: Enable analytics of anonymous data to help Ledger improve its user's experience. This includes the operating system, language, firmware versions and the number of added accounts.
+    desc: Enable analytics of anonymous data to help Ledger improve the user experience. This includes the operating system, language, firmware versions and the number of added accounts.
   sentryLogs:
     title: Report bugs
     desc: Automatically send bug reports to help Ledger developers diagnose issues and improve Ledger Live performance.
 finish:
-  title: 'Ready for launch!'
-  desc: The value of crypto assets can go up or down. Balances shown in your portfolio may involve double conversions and are for indicative purposes only!
+  title: Welcome to Ledger Live
+  desc: The unified crypto portfolio, backed by the security of your Ledger device.
   openAppButton: Launch
-  followUsLabel:
+  followUsLabel: Follow us

static/images/empty-account-tile.svg

@@ -0,0 +1,2 @@
+
+<svg width="224" height="94" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="b" x="20" y="12" width="142" height="40" rx="4"/><filter x="-28.9%" y="-55%" width="157.7%" height="305%" filterUnits="objectBoundingBox" id="a"><feOffset dy="19" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="10.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowBlurOuter1"/></filter><rect id="d" x="10" y="9" width="162" height="38" rx="4"/><filter x="-25.3%" y="-57.9%" width="150.6%" height="315.8%" filterUnits="objectBoundingBox" id="c"><feOffset dy="19" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="10.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowBlurOuter1"/></filter><rect id="f" width="182" height="42" rx="4"/><filter x="-22.5%" y="-52.4%" width="145.1%" height="295.2%" filterUnits="objectBoundingBox" id="e"><feOffset dy="19" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="10.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowBlurOuter1"/></filter><path d="M5.62 0h1.7v3.058h-1.7V0zm1.7 0v3.058h-1.7V0h1.7zM5.813 12.942h1.7V16h-1.7v-3.058zm1.7 0V16h-1.7v-3.058h1.7zM2.406 0h1.7v3.058h-1.7V0zm1.7 0v3.058h-1.7V0h1.7zM2.6 12.942h1.7V16H2.6v-3.058zm1.7 0V16H2.6v-3.058h1.7zM.666 8.813V1.95h.85l6.139.002c1.807.11 3.212 1.566 3.118 3.254l-.002.279c.111 1.744-1.298 3.217-3.168 3.328H.666zm.85 0l.85-.85v4.32h5.608c.95-.025 1.676-.727 1.659-1.557v-.37c.019-.814-.707-1.518-1.637-1.543h-6.48zm7.557-3.275l.001-.378c.042-.77-.62-1.457-1.471-1.51H2.366v3.463h5.205c.899-.063 1.552-.753 1.502-1.575zM2.366 7.113l5.186.002.467-.002c1.86.05 3.355 1.5 3.314 3.262v.334c.036 1.779-1.458 3.224-3.337 3.273H.666V7.113h1.7zm0 0v.85l-.85-.85h.85z" id="g"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(21 2)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#FFF" xlink:href="#b"/></g><g transform="translate(21 2)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><use fill="#FFF" xlink:href="#d"/></g><g transform="translate(21 2)"><use fill="#000" filter="url(#e)" xlink:href="#f"/><use fill="#FFF" xlink:href="#f"/><rect fill="#999" x="39" y="13" width="120" height="5" rx="2.5"/><rect fill="#D8D8D8" x="39" y="23" width="70" height="5" rx="2.5"/><g transform="translate(17 13)"><use fill="#FCB653" fill-rule="nonzero" xlink:href="#g"/></g></g></g></svg>