From 934d101fa15afa99a23478eaed0b1c90ee849afe Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Thu, 25 Jan 2018 17:08:37 +0100
Subject: [PATCH] Integrate transactions list design

---
 src/actions/settings.js                    | 15 ++--
 src/components/AccountPage.js              | 13 +--
 src/components/DashboardPage.js            |  6 +-
 src/components/SettingsPage/Display.js     |  2 +-
 src/components/SideBar/index.js            |  4 +-
 src/components/TransactionsList/index.js   | 97 ++++++++++++++++++++++
 src/components/TransactionsList/stories.js | 23 +++++
 src/helpers/btc.js                         | 15 ----
 src/helpers/format.js                      | 17 ++++
 src/styles/theme.js                        |  1 +
 10 files changed, 158 insertions(+), 35 deletions(-)
 create mode 100644 src/components/TransactionsList/index.js
 create mode 100644 src/components/TransactionsList/stories.js
 create mode 100644 src/helpers/format.js

diff --git a/src/actions/settings.js b/src/actions/settings.js
index ebcf3dbd..537cee84 100644
--- a/src/actions/settings.js
+++ b/src/actions/settings.js
@@ -10,8 +10,13 @@ export const saveSettings: SaveSettings = payload => ({
   payload,
 })
 
-type FetchSettings = () => { type: string }
-export const fetchSettings: FetchSettings = () => ({
-  type: 'FETCH_SETTINGS',
-  payload: db('settings'),
-})
+export const fetchSettings: Function = () => dispatch => {
+  const settings = db('settings')
+  if (Object.keys(settings).length === 0) {
+    return
+  }
+  dispatch({
+    type: 'FETCH_SETTINGS',
+    payload: settings,
+  })
+}
diff --git a/src/components/AccountPage.js b/src/components/AccountPage.js
index 64368136..9fccecba 100644
--- a/src/components/AccountPage.js
+++ b/src/components/AccountPage.js
@@ -3,15 +3,15 @@
 import React, { PureComponent, Fragment } from 'react'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
-import moment from 'moment'
 
 import type { MapStateToProps } from 'react-redux'
 import type { Account, AccountData } from 'types/common'
 
-import { format } from 'helpers/btc'
+import { formatBTC } from 'helpers/format'
 
 import { getAccountById, getAccountData } from 'reducers/accounts'
 
+import TransactionsList from 'components/TransactionsList'
 import Box, { Card } from 'components/base/Box'
 import Text from 'components/base/Text'
 import QRCode from 'components/base/QRCode'
@@ -67,7 +67,7 @@ class AccountPage extends PureComponent<Props> {
             <Box horizontal flow={3}>
               <Box grow>
                 <Card title="Balance" style={{ height: 415 }} align="center" justify="center">
-                  <Text fontSize={6}>{format(accountData.balance)}</Text>
+                  <Text fontSize={6}>{formatBTC(accountData.balance)}</Text>
                 </Card>
               </Box>
 
@@ -96,12 +96,7 @@ class AccountPage extends PureComponent<Props> {
               </Box>
             </Box>
             <Card title="Last operations">
-              {accountData.transactions.map(tx => (
-                <Box horizontal key={tx.hash}>
-                  <Box grow>{moment(tx.time * 1e3).format('LLL')}</Box>
-                  <Box>{format(tx.balance)}</Box>
-                </Box>
-              ))}
+              <TransactionsList transactions={accountData.transactions} />
             </Card>
           </Fragment>
         )}
diff --git a/src/components/DashboardPage.js b/src/components/DashboardPage.js
index f8de952d..cc3be0d4 100644
--- a/src/components/DashboardPage.js
+++ b/src/components/DashboardPage.js
@@ -10,7 +10,7 @@ import { push } from 'react-router-redux'
 import type { MapStateToProps } from 'react-redux'
 import type { Accounts, T } from 'types/common'
 
-import { format } from 'helpers/btc'
+import { formatBTC } from 'helpers/format'
 
 import { openModal } from 'reducers/modals'
 import { getTotalBalance, getAccounts } from 'reducers/accounts'
@@ -93,7 +93,7 @@ class DashboardPage extends PureComponent<Props, State> {
                 title: 'Total balance',
                 render: () => (
                   <Box>
-                    <Text fontSize={4}>{format(totalBalance)}</Text>
+                    <Text fontSize={4}>{formatBTC(totalBalance)}</Text>
                   </Box>
                 ),
               },
@@ -136,7 +136,7 @@ class DashboardPage extends PureComponent<Props, State> {
                       onClick={() => push(`/account/${key}`)}
                     >
                       <div>{accounts[key].name}</div>
-                      <div>{accounts[key].data && format(accounts[key].data.balance)}</div>
+                      <div>{accounts[key].data && formatBTC(accounts[key].data.balance)}</div>
                     </Card>
                   ),
               )}
diff --git a/src/components/SettingsPage/Display.js b/src/components/SettingsPage/Display.js
index 6176aab0..cd116bca 100644
--- a/src/components/SettingsPage/Display.js
+++ b/src/components/SettingsPage/Display.js
@@ -81,7 +81,7 @@ class TabProfile extends PureComponent<Props, State> {
             <Label>{t('settings.display.language')}</Label>
             <Select
               onChange={item => this.handleChangeInput('language')(item.key)}
-              renderSelected={item => item.name}
+              renderSelected={item => item && item.name}
               value={currentLanguage}
               items={languages}
             />
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
index fd41b9b1..d9c721b1 100644
--- a/src/components/SideBar/index.js
+++ b/src/components/SideBar/index.js
@@ -12,7 +12,7 @@ import type { Accounts, T } from 'types/common'
 import { openModal } from 'reducers/modals'
 import { getAccounts } from 'reducers/accounts'
 
-import { format } from 'helpers/btc'
+import { formatBTC } from 'helpers/format'
 import { rgba } from 'styles/helpers'
 
 import Box, { GrowScroll } from 'components/base/Box'
@@ -88,7 +88,7 @@ class SideBar extends PureComponent<Props> {
             <CapsSubtitle>{t('sidebar.accounts')}</CapsSubtitle>
             <div>
               {Object.entries(accounts).map(([id, account]: [string, any]) => (
-                <Item linkTo={`/account/${id}`} desc={format(account.data.balance)} key={id}>
+                <Item linkTo={`/account/${id}`} desc={formatBTC(account.data.balance)} key={id}>
                   {account.name}
                 </Item>
               ))}
diff --git a/src/components/TransactionsList/index.js b/src/components/TransactionsList/index.js
new file mode 100644
index 00000000..5e25cc6b
--- /dev/null
+++ b/src/components/TransactionsList/index.js
@@ -0,0 +1,97 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+import moment from 'moment'
+import get from 'lodash/get'
+
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+
+import { formatBTC } from 'helpers/format'
+
+import type { Transaction as TransactionType } from 'types/common'
+
+const DATE_COL_SIZE = 250
+const AMOUNT_COL_SIZE = 150
+
+const Cap = styled(Text).attrs({
+  fontSize: 0,
+  color: 'mouse',
+})`
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`
+
+const Body = styled(Box)``
+
+const HeaderCol = ({ size, children, ...props }: { size?: number, children: any }) => (
+  <Cell size={size} {...props}>
+    <Cap>{children}</Cap>
+  </Cell>
+)
+
+HeaderCol.defaultProps = {
+  size: undefined,
+}
+
+const TransactionRaw = styled(Box).attrs({
+  horizontal: true,
+  align: 'center',
+  py: 2,
+})`
+  &:nth-child(odd) {
+    background: ${p => p.theme.colors.cream};
+  }
+`
+
+const Cell = styled(Box).attrs({
+  px: 2,
+  horizontal: true,
+  align: 'center',
+})`
+  width: ${p => (p.size ? `${p.size}px` : '')};
+`
+
+const Transaction = ({ tx }: { tx: TransactionType }) => {
+  const time = moment(tx.time * 1e3)
+  return (
+    <TransactionRaw>
+      <Cell size={DATE_COL_SIZE} justify="space-between">
+        <Box>
+          <Text>{time.format('DD/MM/YYYY')}</Text>
+          <Cap>{time.format('HH:mm')}</Cap>
+        </Box>
+        <Cap>{tx.balance > 0 ? 'From' : 'To'}</Cap>
+      </Cell>
+      <Cell
+        grow
+        shrink
+        style={{
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          display: 'block',
+        }}
+      >
+        {tx.balance > 0 ? get(tx, 'inputs.0.prev_out.addr') : get(tx, 'out.0.addr')}
+      </Cell>
+      <Cell size={AMOUNT_COL_SIZE} justify="flex-end">
+        <Text color={tx.balance > 0 ? 'green' : void 0}>{formatBTC(tx.balance)}</Text>
+      </Cell>
+    </TransactionRaw>
+  )
+}
+
+export default ({ transactions }: { transactions: Array<TransactionType> }) => (
+  <Box flow={2}>
+    <Box horizontal>
+      <HeaderCol size={DATE_COL_SIZE}>{'Date'}</HeaderCol>
+      <HeaderCol grow>{'Address'}</HeaderCol>
+      <HeaderCol size={AMOUNT_COL_SIZE} justify="flex-end">
+        {'Amount'}
+      </HeaderCol>
+    </Box>
+    <Body>{transactions.map(t => <Transaction key={t.hash} tx={t} />)}</Body>
+  </Box>
+)
diff --git a/src/components/TransactionsList/stories.js b/src/components/TransactionsList/stories.js
new file mode 100644
index 00000000..9463f508
--- /dev/null
+++ b/src/components/TransactionsList/stories.js
@@ -0,0 +1,23 @@
+// @flow
+
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import TransactionsList from 'components/TransactionsList'
+
+const stories = storiesOf('TransactionsList', module)
+
+const transactions = [
+  {
+    hash: '5c6ea1716520c7d6e038d36a3223faced3c4b8f7ffb69d9fb5bd527d562fdb62',
+    balance: 130000000,
+    time: 1516809771,
+  },
+  {
+    hash: '27416a48caab90fab053b507b8b6b9d48fba75421d3bfdbae4b85f64024bc9c4',
+    balance: 65000000,
+    time: 1516704444,
+  },
+]
+
+stories.add('basic', () => <TransactionsList transactions={transactions} />)
diff --git a/src/helpers/btc.js b/src/helpers/btc.js
index cdfd1762..1ea31955 100644
--- a/src/helpers/btc.js
+++ b/src/helpers/btc.js
@@ -2,24 +2,9 @@
 
 // import axios from 'axios'
 import bitcoin from 'bitcoinjs-lib'
-import { formatCurrencyUnit } from '@ledgerhq/common/lib/data/currency'
 
 const blockexplorer = require('blockchain.info/blockexplorer').usingNetwork(3)
 
-export function format(v: string | number, options: Object = { alwaysShowSign: true }) {
-  return formatCurrencyUnit(
-    {
-      name: 'bitcoin',
-      code: 'BTC',
-      symbol: 'b',
-      magnitude: 8,
-    },
-    Number(v),
-    options.alwaysShowSign,
-    true,
-  )
-}
-
 export const networks = [
   {
     ...bitcoin.networks.bitcoin,
diff --git a/src/helpers/format.js b/src/helpers/format.js
new file mode 100644
index 00000000..7d907edb
--- /dev/null
+++ b/src/helpers/format.js
@@ -0,0 +1,17 @@
+// @flow
+
+import { formatCurrencyUnit } from '@ledgerhq/common/lib/data/currency'
+
+export function formatBTC(v: string | number, options: Object = { alwaysShowSign: true }) {
+  return formatCurrencyUnit(
+    {
+      name: 'bitcoin',
+      code: 'BTC',
+      symbol: 'b',
+      magnitude: 8,
+    },
+    Number(v),
+    options.alwaysShowSign,
+    true,
+  )
+}
diff --git a/src/styles/theme.js b/src/styles/theme.js
index 0e50215e..a802b704 100644
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -12,6 +12,7 @@ export default {
     blue: '#6193ff',
     cream: '#f9f9f9',
     grey: '#a8b6c2',
+    green: '#a6d495',
     grenade: '#ea2e49',
     lead: '#999999',
     mouse: '#e2e2e2',