Merge pull request #205 from meriadec/master

Various updates

.circleci/config.yml

@@ -23,7 +23,7 @@ jobs:
           command: yarn lint
       - run:
           name: Flow
-          command: yarn flow
+          command: yarn flow --quiet
       - run:
           name: Build
           command: yarn dist:dir

.storybook/config.js

@@ -3,11 +3,13 @@ import { configure, addDecorator } from '@storybook/react'
 import { withKnobs } from '@storybook/addon-knobs'
 import { setOptions } from '@storybook/addon-options'
 import { ThemeProvider } from 'styled-components'
+import { I18nextProvider } from 'react-i18next'
 
 import 'globals'
 
 import 'styles/global'
 import theme from 'styles/theme'
+import i18n from 'renderer/i18n/storybook'
 
 const req = require.context('../src', true, /.stories.js$/)
 function loadStories() {
@@ -15,9 +17,11 @@ function loadStories() {
 }
 
 addDecorator(story => (
-  <ThemeProvider theme={theme}>
-    <div style={{ padding: 20 }}>{story()}</div>
-  </ThemeProvider>
+  <I18nextProvider i18n={i18n} initialLanguage="en">
+    <ThemeProvider theme={theme}>
+      <div style={{ padding: 20 }}>{story()}</div>
+    </ThemeProvider>
+  </I18nextProvider>
 ))
 
 addDecorator(withKnobs)

.storybook/webpack.config.js

@@ -0,0 +1,13 @@
+const path = require('path')
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.yml$/,
+        loaders: ['json-loader', 'yaml-loader'],
+        include: path.resolve(__dirname, '../static/i18n'),
+      },
+    ],
+  },
+}

jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  globals: {
+    __DEV__: false,
+  },
+}

package.json

@@ -138,6 +138,7 @@
     "react-hot-loader": "^4.0.0",
     "react-test-renderer": "^16.2.0",
     "webpack": "^3.11.0",
-    "webpack-bundle-analyzer": "^2.11.1"
+    "webpack-bundle-analyzer": "^2.11.1",
+    "yaml-loader": "^0.5.0"
   }
 }

src/components/App.js

@@ -9,7 +9,7 @@ import { I18nextProvider } from 'react-i18next'
 
 import theme from 'styles/theme'
 
-import i18n from 'renderer/i18n'
+import i18n from 'renderer/i18n/electron'
 
 import Default from 'components/layout/Default'
 import Dev from 'components/layout/Dev'

src/components/DashboardPage/index.js

@@ -190,6 +190,7 @@ class DashboardPage extends PureComponent<Props, State> {
               </Box>
             </Box>
             <TransactionsList
+              canShowMore
               title={t('dashboard:recentActivity')}
               withAccounts
               transactions={allTransactions}

src/components/TransactionsList/index.js

@@ -11,6 +11,7 @@ import { getIconByCoinType } from '@ledgerhq/currencies/react'
 
 import type { Transaction as TransactionType, T } from 'types/common'
 
+import IconAngleDown from 'icons/AngleDown'
 import Box, { Card } from 'components/base/Box'
 import Defer from 'components/base/Defer'
 import FormattedVal from 'components/base/FormattedVal'
@@ -79,6 +80,23 @@ const Cell = styled(Box).attrs({
   width: ${p => (p.size ? `${p.size}px` : '')};
 `
 
+const ShowMore = styled(Box).attrs({
+  horizontal: true,
+  flow: 1,
+  ff: 'Open Sans|SemiBold',
+  fontSize: 3,
+  justify: 'center',
+  align: 'center',
+  p: 4,
+  color: 'wallet',
+})`
+  border-top: 1px solid ${p => p.theme.colors.fog};
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
 const Transaction = ({
   t,
   onAccountClick,
@@ -175,6 +193,7 @@ type Props = {
   withAccounts?: boolean,
   minConfirmations: number,
   title?: string,
+  canShowMore: boolean,
 }
 
 class TransactionsList extends Component<Props> {
@@ -182,9 +201,14 @@ class TransactionsList extends Component<Props> {
     onAccountClick: noop,
     withAccounts: false,
     minConfirmations: 2,
+    canShowMore: false,
   }
 
   shouldComponentUpdate(nextProps: Props) {
+    if (this.props.canShowMore !== nextProps.canShowMore) {
+      return true
+    }
+
     if (this.props.minConfirmations !== nextProps.minConfirmations) {
       return true
     }
@@ -201,7 +225,15 @@ class TransactionsList extends Component<Props> {
   _hashCache = null
 
   render() {
-    const { transactions, title, withAccounts, onAccountClick, minConfirmations, t } = this.props
+    const {
+      transactions,
+      title,
+      withAccounts,
+      onAccountClick,
+      minConfirmations,
+      canShowMore,
+      t,
+    } = this.props
 
     this._hashCache = this.getHashCache(transactions)
 
@@ -232,6 +264,13 @@ class TransactionsList extends Component<Props> {
               />
             ))}
           </Box>
+
+          {canShowMore && (
+            <ShowMore>
+              <span>{t('transactionsList:showMore')}</span>
+              <IconAngleDown width={8} height={8} />
+            </ShowMore>
+          )}
         </Card>
       </Defer>
     )

src/components/TransactionsList/stories.js

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { boolean } from '@storybook/addon-knobs'
 
 import TransactionsList from 'components/TransactionsList'
 
@@ -22,4 +23,6 @@ const transactions = [
   },
 ]
 
-stories.add('basic', () => <TransactionsList transactions={transactions} />)
+stories.add('basic', () => (
+  <TransactionsList transactions={transactions} canShowMore={boolean('canShowMore')} />
+))

src/renderer/events.js

@@ -14,7 +14,7 @@ import { setUpdateStatus } from 'reducers/update'
 import { getAccounts, getAccountById } from 'reducers/accounts'
 import { isLocked } from 'reducers/application'
 
-import i18n from 'renderer/i18n'
+import i18n from 'renderer/i18n/electron'
 
 const d = {
   device: debug('lwd:device'),

src/renderer/i18n.js

@@ -1,41 +0,0 @@
-// @flow
-
-import i18n from 'i18next'
-import path from 'path'
-import Backend from 'i18next-node-fs-backend'
-
-import staticPath from 'helpers/staticPath'
-
-i18n.use(Backend).init({
-  ns: [
-    'account',
-    'accountsOrder',
-    'addAccount',
-    'common',
-    'dashboard',
-    'device',
-    'language',
-    'receive',
-    'send',
-    'settings',
-    'sidebar',
-    'time',
-    'transactionsList',
-    'update',
-  ],
-  fallbackLng: 'en',
-  debug: false,
-  backend: {
-    loadPath: path.join(staticPath, '/i18n/{{lng}}/{{ns}}.yml'),
-  },
-  react: {
-    wait: true,
-  },
-})
-
-i18n.services.pluralResolver.addRule('en', {
-  numbers: [0, 1, 'plural'],
-  plurals: n => Number(n >= 2 ? 2 : n),
-})
-
-export default i18n

src/renderer/i18n/electron.js

@@ -0,0 +1,11 @@
+// @flow
+
+import path from 'path'
+import FSBackend from 'i18next-node-fs-backend'
+
+import staticPath from 'helpers/staticPath'
+import { createWithBackend } from './instanciate'
+
+export default createWithBackend(FSBackend, {
+  loadPath: path.join(staticPath, '/i18n/{{lng}}/{{ns}}.yml'),
+})

src/renderer/i18n/instanciate.js

@@ -0,0 +1,49 @@
+import i18n from 'i18next'
+
+const commonConfig = {
+  ns: [
+    'account',
+    'accountsOrder',
+    'addAccount',
+    'common',
+    'dashboard',
+    'device',
+    'language',
+    'receive',
+    'send',
+    'settings',
+    'sidebar',
+    'time',
+    'transactionsList',
+    'update',
+  ],
+  fallbackLng: 'en',
+  debug: false,
+  react: {
+    wait: true,
+  },
+}
+
+function addPluralRule(i18n) {
+  i18n.services.pluralResolver.addRule('en', {
+    numbers: [0, 1, 'plural'],
+    plurals: n => Number(n >= 2 ? 2 : n),
+  })
+  return i18n
+}
+
+export function createWithBackend(backend, backendOpts) {
+  i18n.use(backend).init({
+    ...commonConfig,
+    backend: backendOpts,
+  })
+  return addPluralRule(i18n)
+}
+
+export function createWithResources(resources) {
+  i18n.init({
+    ...commonConfig,
+    resources,
+  })
+  return addPluralRule(i18n)
+}

src/renderer/i18n/storybook.js

@@ -0,0 +1,20 @@
+import { createWithResources } from './instanciate'
+
+const resources = {
+  account: require('../../../static/i18n/en/account.yml'),
+  accountsOrder: require('../../../static/i18n/en/accountsOrder.yml'),
+  addAccount: require('../../../static/i18n/en/addAccount.yml'),
+  common: require('../../../static/i18n/en/common.yml'),
+  dashboard: require('../../../static/i18n/en/dashboard.yml'),
+  device: require('../../../static/i18n/en/device.yml'),
+  language: require('../../../static/i18n/en/language.yml'),
+  receive: require('../../../static/i18n/en/receive.yml'),
+  send: require('../../../static/i18n/en/send.yml'),
+  settings: require('../../../static/i18n/en/settings.yml'),
+  sidebar: require('../../../static/i18n/en/sidebar.yml'),
+  time: require('../../../static/i18n/en/time.yml'),
+  transactionsList: require('../../../static/i18n/en/transactionsList.yml'),
+  update: require('../../../static/i18n/en/update.yml'),
+}
+
+export default createWithResources({ en: resources })

static/i18n/en/transactionsList.yml

@@ -4,3 +4,4 @@ address: Address
 amount: Amount
 from: From
 to: To
+showMore: Show more

yarn.lock

@@ -6128,7 +6128,7 @@ js-yaml@3.5.4:
     argparse "^1.0.2"
     esprima "^2.6.0"
 
-js-yaml@^3.10.0, js-yaml@^3.11.0, js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.0, js-yaml@^3.9.1:
+js-yaml@^3.10.0, js-yaml@^3.11.0, js-yaml@^3.4.3, js-yaml@^3.5.2, js-yaml@^3.7.0, js-yaml@^3.9.0, js-yaml@^3.9.1:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
   dependencies:
@@ -10721,6 +10721,12 @@ yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
 
+yaml-loader@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/yaml-loader/-/yaml-loader-0.5.0.tgz#86b1982d84a8e429e6647d93de9a0169e1c15827"
+  dependencies:
+    js-yaml "^3.5.2"
+
 yargs-parser@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"