Merge pull request #55 from meriadec/master

Integrate transactions list design

src/actions/settings.js

@@ -10,8 +10,13 @@ export const saveSettings: SaveSettings = payload => ({
   payload,
 })
 
-type FetchSettings = () => { type: string }
+export const fetchSettings: Function = () => dispatch => {
-export const fetchSettings: FetchSettings = () => ({
+  const settings = db('settings')
-  type: 'FETCH_SETTINGS',
+  if (Object.keys(settings).length === 0) {
-  payload: db('settings'),
+    return
-})
+  }
+  dispatch({
+    type: 'FETCH_SETTINGS',
+    payload: settings,
+  })
+}

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 => (
+              <TransactionsList transactions={accountData.transactions} />
-                <Box horizontal key={tx.hash}>
-                  <Box grow>{moment(tx.time * 1e3).format('LLL')}</Box>
-                  <Box>{format(tx.balance)}</Box>
-                </Box>
-              ))}
             </Card>
           </Fragment>
         )}

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>
                   ),
               )}

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}
             />

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>
               ))}

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>
+)

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} />)

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,

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,
+  )
+}

src/styles/theme.js

@@ -12,6 +12,7 @@ export default {
     blue: '#6193ff',
     cream: '#f9f9f9',
     grey: '#a8b6c2',
+    green: '#a6d495',
     grenade: '#ea2e49',
     lead: '#999999',
     mouse: '#e2e2e2',