Merge pull request #8 from ProofSuite/trade_history

<TradeHistory /> completed

src/components/TradeHistory/README.md

@@ -0,0 +1,19 @@
+```js
+import TradeHistoryRenderer from '../../components/TradeHistoryRenderer';
+```
+
+#### Properties
+* `tradeHistory` - List of Trades
+* `loggedIn` - LoggedIn state
+* `loading` - Loading state of trade list
+* `decimals` - Number of figures to show after decimal point
+
+#### Example
+```js
+<OrderBookRenderer
+  tradeHistory={tradeHistory}
+  loggedIn={true}
+  loading={false}
+  decimals={7}
+/>
+```

src/components/TradeHistory/TradeHistory.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { reduceDecimals, toDate } from '../../utils/converters';
+import Loading from '../Loading';
+import { Colors } from '@blueprintjs/core';
+import styled from 'styled-components';
+import type { ListRow, TradeListContainerTypes, TradeListTypes } from '../../types/tradeHistory';
+
+const TradeHistory = (props: TradeListContainerTypes) => {
+  const { decimals, loading, tradeHistory } = props;
+  return loading ? <Loading /> : <HistroyList tradeHistory={tradeHistory} decimals={decimals} />;
+};
+export default TradeHistory;
+
+const HistroyList = (props: TradeListTypes) => {
+  const { decimals, tradeHistory } = props;
+  return (
+    <div className="list-container pt-dark">
+      <ul className="pt-list-unstyled heading">
+        <li className="heading">
+          <span className="index">#</span>
+          <span className="time">Time</span>
+          <span className="type">Type</span>
+          <span className="amount">Amount</span>
+          <span className="price">Price</span>
+        </li>
+      </ul>
+      <ul className="pt-list-unstyled list">
+        {tradeHistory.map((trade, index) => <Row key={index} props={{ trade, decimals: decimals, index }} />)}
+      </ul>
+    </div>
+  );
+};
+
+const Row = ({ props }: ListRow) => {
+  const { trade, decimals, index } = props;
+  return (
+    <li className="not-heading">
+      <span className="index">{index + 1}</span>
+      <span className="time">{toDate(trade.time)}</span>
+      {trade.type === 'sell' ? <Sell>{trade.type}</Sell> : <Buy>{trade.type}</Buy>}
+      <span className="amount">{reduceDecimals(trade.amount, decimals)}</span>
+      <span className="price">{reduceDecimals(trade.price, decimals)}</span>
+    </li>
+  );
+};
+
+const Sell = styled.span`
+  color: ${Colors.RED4};
+`;
+
+const Buy = styled.span`
+  color: ${Colors.GREEN5};
+`;

src/components/TradeHistory/TradeHistoryRenderer.js

@@ -0,0 +1,68 @@
+//@flow
+import React from 'react';
+import TradeHistory from './TradeHistory';
+import { Card, Tab, Tabs, Button } from '@blueprintjs/core';
+import { sortArray } from '../../utils/helpers';
+
+type Props = {
+  tradeHistory: Array<Object>,
+  loading: boolean,
+  decimals?: number,
+  loggedIn: boolean,
+};
+type State = {
+  selectedTabId: string,
+};
+
+class TradeHistoryRenderer extends React.PureComponent<Props, State> {
+  static defaultProps = {
+    decimals: 7,
+  };
+  state = {
+    selectedTabId: 'all',
+  };
+  changeTab = (tabId: string) => {
+    this.setState({
+      selectedTabId: tabId,
+    });
+  };
+
+  render() {
+    const {
+      props: { loading, tradeHistory, decimals, loggedIn },
+      state: { selectedTabId },
+      changeTab,
+    } = this;
+    return (
+      <Card className="pt-dark trade-history">
+        <h5>Trade History</h5>
+        <Tabs id="TabsExample" selectedTabId={selectedTabId} onChange={changeTab}>
+          <Tab
+            id="all"
+            title="Market"
+            panel={<TradeHistory loading={loading} tradeHistory={tradeHistory} decimals={decimals} />}
+          />
+          <Tab
+            id="mine"
+            title="Mine"
+            panel={
+              loggedIn ? (
+                <TradeHistory
+                  loading={loading}
+                  tradeHistory={sortArray(tradeHistory, 'time', 'desc')}
+                  decimals={decimals}
+                />
+              ) : (
+                <Login />
+              )
+            }
+          />
+        </Tabs>
+      </Card>
+    );
+  }
+}
+
+export default TradeHistoryRenderer;
+
+const Login = () => <Button large={true} intent="primary" text="Login" />;

src/components/TradeHistory/index.js

@@ -0,0 +1,3 @@
+import TradeHistoryRenderer from './TradeHistoryRenderer';
+
+export default TradeHistoryRenderer;

src/components/TradeHistory/stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text, withKnobs } from '@storybook/addon-knobs/react';
+import { withInfo } from '@storybook/addon-info';
+import TradeHistoryRenderer from './index';
+import README from './README.md';
+import * as tradeHistory from '../../jsons/tradeHistory.json';
+
+storiesOf('TradeHistory', module)
+  .addDecorator(withKnobs)
+  .add(
+    'Loading state',
+    withInfo({ text: README, source: false })(() => (
+      <TradeHistoryRenderer tradeHistory={tradeHistory.list} loggedIn={true} loading={true} decimals={7} />
+    ))
+  )
+  .add(
+    'Not LoggedIn',
+    withInfo({ text: README, source: false })(() => (
+      <TradeHistoryRenderer tradeHistory={tradeHistory.list} loggedIn={false} loading={false} decimals={7} />
+    ))
+  )
+  .add(
+    'LoggedIn',
+    withInfo({ text: README, source: false })(() => (
+      <TradeHistoryRenderer tradeHistory={tradeHistory.list} loading={false} loggedIn={true} decimals={7} />
+    ))
+  );

src/styles/scss/index.scss

@@ -1,8 +1,8 @@
+@import "../../../node_modules/@blueprintjs/core/lib/css/blueprint.css";
+@import "../../../node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css";
+@import "../../../node_modules/@blueprintjs/table/lib/css/table.css";
 @import "vars";
 @import "global";
 @import "orderForm";
 @import "orderBook";
-
-@import "../../../node_modules/@blueprintjs/core/lib/css/blueprint.css";
-@import "../../../node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css";
-@import "../../../node_modules/@blueprintjs/table/lib/css/table.css";
+@import "tradeHistory";

src/styles/scss/orderBook.scss

@@ -34,6 +34,7 @@
     .list {
       height: 90%;
       overflow-y: scroll;
+      margin-top: 3px;
     }
   }
   ul {
@@ -87,7 +88,7 @@
     }
   }
   ul.heading {
-    box-shadow: 0px 1px 2px 1px #2f3c46;
+    box-shadow: 0px 4px 2px -1px $shadow;
   }
   .loading-overlay {
     height: 91%;