Merge pull request #588 from MortalKastor/pixel-push

Pixel push + some more i18n

src/components/DashboardPage/index.js

@@ -95,93 +95,95 @@ class DashboardPage extends PureComponent<Props, State> {
     const displayOperations = accounts.some(displayOperationsHelper)
 
     return (
-      <Box flow={7}>
+      <Fragment>
-        <UpdateNotifier mt={-5} />
+        <UpdateNotifier />
-        {totalAccounts > 0 ? (
+        <Box flow={7}>
-          <Fragment>
+          {totalAccounts > 0 ? (
-            <Box horizontal alignItems="flex-end">
-              <Box grow>
-                <Text color="dark" ff="Museo Sans" fontSize={7}>
-                  {t(timeFrame)}
-                </Text>
-                <Text color="grey" fontSize={5} ff="Museo Sans|Light">
-                  {t('app:dashboard.summary', { count: totalAccounts })}
-                </Text>
-              </Box>
-              <Box>
-                <PillsDaysCount
-                  selectedTime={selectedTime}
-                  onChange={this.handleChangeSelectedTime}
-                />
-              </Box>
-            </Box>
             <Fragment>
-              <BalanceSummary
+              <Box horizontal alignItems="flex-end">
-                counterValue={counterValue}
+                <Box grow>
-                chartId="dashboard-chart"
+                  <Text color="dark" ff="Museo Sans" fontSize={7}>
-                chartColor={colors.wallet}
+                    {t(timeFrame)}
-                accounts={accounts}
+                  </Text>
-                selectedTime={selectedTime}
+                  <Text color="grey" fontSize={5} ff="Museo Sans|Light">
-                daysCount={daysCount}
+                    {t('app:dashboard.summary', { count: totalAccounts })}
-                renderHeader={({ totalBalance, selectedTime, sinceBalance, refBalance }) => (
-                  <BalanceInfos
-                    t={t}
-                    counterValue={counterValue}
-                    totalBalance={totalBalance}
-                    since={selectedTime}
-                    sinceBalance={sinceBalance}
-                    refBalance={refBalance}
-                  />
-                )}
-              />
-              <Box flow={4}>
-                <Box horizontal alignItems="flex-end">
-                  <Text color="dark" ff="Museo Sans" fontSize={6}>
-                    {t('app:dashboard.accounts.title', { count: accounts.length })}
                   </Text>
-                  <Box ml="auto" horizontal flow={1}>
-                    <AccountsOrder />
-                  </Box>
                 </Box>
-                <Box
+                <Box>
-                  horizontal
+                  <PillsDaysCount
-                  flexWrap="wrap"
+                    selectedTime={selectedTime}
-                  justifyContent="flex-start"
+                    onChange={this.handleChangeSelectedTime}
-                  alignItems="center"
+                  />
-                  style={{ margin: '0 -16px' }}
-                >
-                  {accounts
-                    .concat(Array(3 - (accounts.length % 3)).fill(null))
-                    .map((account, i) => (
-                      <Box key={account ? account.id : `placeholder_${i}`} flex="33%" p={16}>
-                        {account ? (
-                          <AccountCard
-                            key={account.id}
-                            counterValue={counterValue}
-                            account={account}
-                            daysCount={daysCount}
-                            onClick={this.onAccountClick}
-                          />
-                        ) : null}
-                      </Box>
-                    ))}
                 </Box>
               </Box>
-              {displayOperations && (
+              <Fragment>
-                <OperationsList
+                <BalanceSummary
-                  onAccountClick={this.onAccountClick}
+                  counterValue={counterValue}
+                  chartId="dashboard-chart"
+                  chartColor={colors.wallet}
                   accounts={accounts}
-                  title={t('app:dashboard.recentActivity')}
+                  selectedTime={selectedTime}
-                  withAccount
+                  daysCount={daysCount}
+                  renderHeader={({ totalBalance, selectedTime, sinceBalance, refBalance }) => (
+                    <BalanceInfos
+                      t={t}
+                      counterValue={counterValue}
+                      totalBalance={totalBalance}
+                      since={selectedTime}
+                      sinceBalance={sinceBalance}
+                      refBalance={refBalance}
+                    />
+                  )}
                 />
-              )}
+                <Box flow={4}>
-              <StickyBackToTop />
+                  <Box horizontal alignItems="flex-end">
+                    <Text color="dark" ff="Museo Sans" fontSize={6}>
+                      {t('app:dashboard.accounts.title', { count: accounts.length })}
+                    </Text>
+                    <Box ml="auto" horizontal flow={1}>
+                      <AccountsOrder />
+                    </Box>
+                  </Box>
+                  <Box
+                    horizontal
+                    flexWrap="wrap"
+                    justifyContent="flex-start"
+                    alignItems="center"
+                    style={{ margin: '0 -16px' }}
+                  >
+                    {accounts
+                      .concat(Array(3 - (accounts.length % 3)).fill(null))
+                      .map((account, i) => (
+                        <Box key={account ? account.id : `placeholder_${i}`} flex="33%" p={16}>
+                          {account ? (
+                            <AccountCard
+                              key={account.id}
+                              counterValue={counterValue}
+                              account={account}
+                              daysCount={daysCount}
+                              onClick={this.onAccountClick}
+                            />
+                          ) : null}
+                        </Box>
+                      ))}
+                  </Box>
+                </Box>
+                {displayOperations && (
+                  <OperationsList
+                    onAccountClick={this.onAccountClick}
+                    accounts={accounts}
+                    title={t('app:dashboard.recentActivity')}
+                    withAccount
+                  />
+                )}
+                <StickyBackToTop />
+              </Fragment>
             </Fragment>
-          </Fragment>
+          ) : (
-        ) : (
+            <EmptyState />
-          <EmptyState />
+          )}
-        )}
+        </Box>
-      </Box>
+      </Fragment>
     )
   }
 }

src/components/UpdateNotifier/UpdateDownloaded.js

@@ -35,6 +35,7 @@ const Container = styled(Box).attrs({
   px: 3,
   bg: 'wallet',
   color: 'white',
+  mt: '-35px',
   style: p => ({
     transform: `translate3d(0, ${p.offset}%, 0)`,
   }),
@@ -62,8 +63,10 @@ class UpdateDownloaded extends PureComponent<Props> {
         return (
           <Box horizontal flow={3}>
             <UpdateIcon size={16} />
-            <NotifText>{t('app:update.newVersionReady')}</NotifText>
+            <Box grow>
-            <Box ml="auto">
+              <NotifText>{t('app:update.newVersionReady')}</NotifText>
+            </Box>
+            <Box>
               <NotifText
                 style={{ cursor: 'pointer', textDecoration: 'underline' }}
                 onClick={() => sendEvent('updater', 'quitAndInstall')}

src/components/base/Modal/index.js

@@ -37,6 +37,7 @@ type OwnProps = {
   preventBackdropClick?: boolean,
   render: Function,
   refocusWhenChange?: string,
+  width?: string,
 }
 
 type Props = OwnProps & {
@@ -108,7 +109,7 @@ const Wrapper = styled(Box).attrs({
   }),
 })`
   outline: none;
-  width: 500px;
+  width: ${p => (p.width ? p.width : '500px')};
   z-index: 2;
 `
 
@@ -180,7 +181,7 @@ export class Modal extends Component<Props> {
   }
 
   render() {
-    const { preventBackdropClick, isOpened, onHide, render, data, onClose } = this.props
+    const { preventBackdropClick, isOpened, onHide, render, data, onClose, width } = this.props
 
     return (
       <Mortal
@@ -204,6 +205,7 @@ export class Modal extends Component<Props> {
                 scale={m.scale}
                 innerRef={n => (this._wrapper = n)}
                 onClick={stopPropagation}
+                width={width}
               >
                 <Pure isAnimated={isAnimated} render={render} data={data} onClose={onClose} />
               </Wrapper>

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

@@ -28,6 +28,22 @@ class StepImport extends PureComponent<StepProps> {
 
   scanSubscription = null
 
+  translateName(account: Account) {
+    const { t } = this.props
+    let { name } = account
+
+    if (name === 'New Account') {
+      name = t('app:addAccounts.newAccount')
+    } else if (name.indexOf('legacy') !== -1) {
+      name = t('app:addAccounts.legacyAccount', { accountName: name.replace(' (legacy)', '') })
+    }
+
+    return {
+      ...account,
+      name,
+    }
+  }
+
   startScanAccountsDevice() {
     const { currency, currentDevice, setState } = this.props
     try {
@@ -49,7 +65,7 @@ class StepImport extends PureComponent<StepProps> {
           const isNewAccount = account.operations.length === 0
           if (!hasAlreadyBeenScanned) {
             setState({
-              scannedAccounts: [...scannedAccounts, account],
+              scannedAccounts: [...scannedAccounts, this.translateName(account)],
               checkedAccountsIds:
                 !hasAlreadyBeenImported && !isNewAccount
                   ? uniq([...checkedAccountsIds, account.id])
@@ -144,9 +160,9 @@ class StepImport extends PureComponent<StepProps> {
       count: importableAccounts.length,
     })
 
-    const importableAccountsEmpty = `We didnt find any ${
+    const importableAccountsEmpty = t('app:addAccounts.noAccountToImport', {
-      currency ? ` ${currency.name}}` : ''
+      currencyName: currency ? ` ${currency.name}}` : '',
-    } account to import.`
+    })
 
     return (
       <Fragment>

src/components/modals/Receive/index.js

@@ -1,7 +1,12 @@
 // @flow
 
 import React, { Fragment, PureComponent } from 'react'
+import { compose } from 'redux'
+import { connect } from 'react-redux'
 import { translate } from 'react-i18next'
+import { createStructuredSelector } from 'reselect'
+
+import { accountsSelector } from 'reducers/accounts'
 
 import type { Account } from '@ledgerhq/live-common/lib/types'
 import type { T, Device } from 'types/common'
@@ -26,6 +31,7 @@ import StepReceiveFunds from './04-step-receive-funds'
 
 type Props = {
   t: T,
+  accounts: Account[],
 }
 
 type State = {
@@ -57,6 +63,10 @@ const INITIAL_STATE = {
   stepsErrors: [],
 }
 
+const mapStateToProps = createStructuredSelector({
+  accounts: accountsSelector,
+})
+
 class ReceiveModal extends PureComponent<Props, State> {
   state = INITIAL_STATE
 
@@ -178,11 +188,19 @@ class ReceiveModal extends PureComponent<Props, State> {
 
   handleBeforeOpenModal = ({ data }) => {
     const { account } = this.state
-    if (data && data.account && !account) {
+    const { accounts } = this.props
-      this.setState({
+
-        account: data.account,
+    if (!account) {
-        stepIndex: 1,
+      if (data && data.account) {
-      })
+        this.setState({
+          account: data.account,
+          stepIndex: 1,
+        })
+      } else {
+        this.setState({
+          account: accounts[0],
+        })
+      }
     }
   }
 
@@ -348,4 +366,7 @@ class ReceiveModal extends PureComponent<Props, State> {
   }
 }
 
-export default translate()(ReceiveModal)
+export default compose(
+  connect(mapStateToProps),
+  translate(),
+)(ReceiveModal)

src/components/modals/ReleaseNotes.js

@@ -233,7 +233,7 @@ class ReleaseNotes extends PureComponent<Props, State> {
       )
     }
 
-    return <Modal name={MODAL_RELEASES_NOTES} render={renderBody} />
+    return <Modal name={MODAL_RELEASES_NOTES} render={renderBody} width="600px" />
   }
 }
 

static/i18n/en/app.yml

@@ -132,6 +132,9 @@ addAccounts:
   selectAll: Select all
   unselectAll: Unselect all
   editName: Edit name
+  newAccount: New account
+  legacyAccount: '{{accountName}} (legacy)'
+  noAccountToImport: We didnt find any {{currencyName}}} account to import.
   success: Great success!
   createNewAccount:
     title: Create new account