feature: add TransactionDaily component

app/components/transaction-daily.js

@@ -0,0 +1,51 @@
+// @flow
+import React, { Fragment } from 'react';
+import styled from 'styled-components';
+import dateFns from 'date-fns';
+import { TransactionItemComponent, type Transaction } from './transaction-item';
+import { TextComponent } from './text';
+
+const Wrapper = styled.div`
+  border-radius: 7.5px;
+  overflow: hidden;
+  background-color: ${props => props.theme.colors.cardBackgroundColor};
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  margin-bottom: 20px;
+`;
+
+const Day = styled(TextComponent)`
+  text-transform: uppercase;
+  color: ${props => props.theme.colors.transactionsDate};
+  font-size: ${props => `${props.theme.fontSize.text * 0.9}em`};
+  font-weight: ${props => props.theme.fontWeight.bold};
+  margin-bottom: 5px;
+`;
+
+const Divider = styled.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${props => props.theme.colors.inactiveItem};
+`;
+
+type Props = {
+  transactionsDate: string,
+  transactions: Transaction[],
+};
+
+export const TransactionDailyComponent = ({ transactionsDate, transactions }: Props) => (
+  <Fragment>
+    <Day value={dateFns.format(transactionsDate, 'MMM D, YYYY')} />
+    <Wrapper>
+      {transactions.map(({
+        date, type, address, amount,
+      }) => (
+        <div>
+          <TransactionItemComponent type={type} date={date} address={address} amount={amount} />
+          <Divider />
+        </div>
+      ))}
+    </Wrapper>
+  </Fragment>
+);

app/components/transaction-daily.mdx

@@ -0,0 +1,38 @@
+---
+name: Transaction Daily
+---
+
+import { Playground, PropsTable } from 'docz'
+
+import { TransactionDailyComponent } from './transaction-daily.js'
+import { DoczWrapper } from '../theme.js'
+
+# Transaction Item
+
+<PropsTable of={TransactionDailyComponent} />
+
+## Basic Usage
+
+<Playground>
+  <DoczWrapper>
+    {() => (
+      <TransactionDailyComponent
+        transactionsDate={new Date().toISOString()}
+        transactions={[
+          {
+            type: 'received',
+            address: '123456789123456789123456789123456789',
+            amount: 1.7891,
+            date: new Date().toISOString(),
+          },
+          {
+            type: 'sent',
+            address: '123456789123456789123456789123456789',
+            amount: 0.8458,
+            date: new Date().toISOString(),
+          },
+        ]}
+      />
+    )}
+  </DoczWrapper>
+</Playground>