diff --git a/src/components/AccountPage.js b/src/components/AccountPage.js index 9d8f84b2..31fb102b 100644 --- a/src/components/AccountPage.js +++ b/src/components/AccountPage.js @@ -104,7 +104,7 @@ class AccountPage extends PureComponent { - + diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js index 0c09381d..05278af2 100644 --- a/src/components/DashboardPage/index.js +++ b/src/components/DashboardPage/index.js @@ -7,7 +7,9 @@ import { connect } from 'react-redux' import { push } from 'react-router-redux' import chunk from 'lodash/chunk' +import get from 'lodash/get' import random from 'lodash/random' +import sortBy from 'lodash/sortBy' import takeRight from 'lodash/takeRight' import type { MapStateToProps } from 'react-redux' @@ -21,6 +23,7 @@ import { AreaChart } from 'components/base/Chart' import Box, { Card } from 'components/base/Box' import Pills from 'components/base/Pills' import Text from 'components/base/Text' +import TransactionsList from 'components/TransactionsList' import AccountCard from './AccountCard' import BalanceInfos from './BalanceInfos' @@ -58,6 +61,28 @@ const generateFakeData = v => ({ value: random(10, 100), }) +const getAllTransactions = accounts => { + const allTransactions = accounts.reduce((result, account) => { + const transactions = get(account, 'data.transactions', []) + + result = [ + ...result, + ...transactions.map(t => ({ + ...t, + account: { + id: account.id, + name: account.name, + type: account.type, + }, + })), + ] + + return result + }, []) + + return sortBy(allTransactions, t => t.received_at).reverse() +} + class DashboardPage extends PureComponent { state = { selectedTime: 'day', @@ -200,6 +225,9 @@ class DashboardPage extends PureComponent { ))} + + + )} diff --git a/src/components/TransactionsList/index.js b/src/components/TransactionsList/index.js index 4cf502e4..413e40cd 100644 --- a/src/components/TransactionsList/index.js +++ b/src/components/TransactionsList/index.js @@ -5,25 +5,40 @@ import styled from 'styled-components' import moment from 'moment' import get from 'lodash/get' -import Defer from 'components/base/Defer' +import type { Transaction as TransactionType } from 'types/common' + import Box from 'components/base/Box' +import Defer from 'components/base/Defer' +import FormattedVal from 'components/base/FormattedVal' import Text from 'components/base/Text' -import { formatBTC } from 'helpers/format' +import IconCurrencyBitcoin from 'icons/currencies/Bitcoin' -import type { Transaction as TransactionType } from 'types/common' - -const DATE_COL_SIZE = 250 +const DATE_COL_SIZE = 80 +const ACCOUNT_COL_SIZE = 150 const AMOUNT_COL_SIZE = 150 const Cap = styled(Text).attrs({ - fontSize: 0, - color: 'mouse', + fontSize: 2, + color: 'warmGrey', + ff: 'Museo Sans|Bold', })` text-transform: uppercase; - letter-spacing: 1px; ` +const Day = styled(Text).attrs({ + color: 'dark', + fontSize: 3, + ff: 'Open Sans', +})` + letter-spacing: 0.3px; + text-transform: uppercase; +` + +const Hour = styled(Day).attrs({ + color: 'warmGrey', +})`` + const HeaderCol = ({ size, children, ...props }: { size?: number, children: any }) => ( {children} @@ -37,15 +52,17 @@ HeaderCol.defaultProps = { const TransactionRaw = styled(Box).attrs({ horizontal: true, align: 'center', - py: 2, })` - &:nth-child(odd) { - background: ${p => p.theme.colors.cream}; + border-bottom: 1px solid ${p => p.theme.colors.argile}; + height: 68px; + + &:last-child { + border-bottom: 0; } ` const Cell = styled(Box).attrs({ - px: 2, + px: 4, horizontal: true, align: 'center', })` @@ -58,11 +75,20 @@ const Transaction = ({ tx }: { tx: TransactionType }) => { - {time.format('DD/MM/YYYY')} - {time.format('HH:mm')} + {time.format('DD MMM')} + {time.format('HH:mm')} - {tx.balance > 0 ? 'From' : 'To'} + {tx.account && ( + + + + + + {tx.account.name} + + + )} { display: 'block', }} > - {tx.balance > 0 ? get(tx, 'inputs.0.address') : get(tx, 'outputs.0.address')} + + {tx.balance > 0 ? 'From' : 'To'} + + + {tx.balance > 0 ? get(tx, 'inputs.0.address') : get(tx, 'outputs.0.address')} + - 0 ? 'green' : void 0}>{formatBTC(tx.balance)} + ) @@ -84,19 +115,31 @@ const Transaction = ({ tx }: { tx: TransactionType }) => { type Props = { transactions: Array, + withAccounts?: boolean, } -export default ({ transactions }: Props) => ( - - +const TransactionsList = ({ transactions, withAccounts }: Props) => ( + + {'Date'} + {withAccounts && {'Account'}} {'Address'} {'Amount'} - {transactions.map(t => )} + + {transactions.map(t => ( + + ))} + ) + +TransactionsList.defaultProps = { + withAccounts: false, +} + +export default TransactionsList diff --git a/src/components/base/Box/index.js b/src/components/base/Box/index.js index cbde0e91..9a997d5f 100644 --- a/src/components/base/Box/index.js +++ b/src/components/base/Box/index.js @@ -60,8 +60,8 @@ const RawCard = styled(Box).attrs({ bg: 'white', p: 3, boxShadow: 0, borderRadiu export const Card = ({ title, ...props }: { title?: string }) => { if (title) { return ( - - + + {title} diff --git a/src/types/common.js b/src/types/common.js index e2db2bc2..24f2ae81 100644 --- a/src/types/common.js +++ b/src/types/common.js @@ -11,6 +11,7 @@ export type Devices = Array // -------------------- Transactions export type Transaction = { + account?: Object, balance: number, hash: string, received_at: string,