Add option to see orders of all coins in the order panel [WIP]

orko-ui/.gitignore

@@ -21,3 +21,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 /target/
+
+.idea

orko-ui/package.json

@@ -26,6 +26,7 @@
     "reconnecting-websocket": "^4.1.10",
     "redux": "^4.0.1",
     "redux-batched-actions": "^0.4.1",
+    "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "seamless-immutable": "^7.1.4",
@@ -54,7 +55,8 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "fomantic-ui": "^2.7.5",
     "gulp": "^4.0.2",
-    "fomantic-ui": "^2.7.5"
+    "prettier": "1.17.1"
   }
 }

orko-ui/semantic.json

@@ -19,5 +19,5 @@
   "autoInstall": false,
   "rtl": false,
   "components": ["reset", "site", "button", "container", "divider", "flag", "header", "icon", "image", "input", "label", "list", "loader", "placeholder", "rail", "reveal", "segment", "step", "breadcrumb", "form", "grid", "menu", "message", "table", "ad", "card", "comment", "feed", "item", "statistic", "accordion", "checkbox", "dimmer", "dropdown", "embed", "modal", "nag", "popup", "progress", "rating", "search", "shape", "sidebar", "sticky", "tab", "transition", "api", "form", "state", "visibility"],
-  "version": "2.7.2"
+  "version": "2.7.5"
 }

orko-ui/src/App.js

@@ -36,14 +36,15 @@ import * as socket from "./store/socket/connect"
 import ErrorContainer from "./containers/ErrorContainer"
 import AuthContainer from "./containers/AuthContainer"
 import FrameworkContainer from "./FrameworkContainer"
+import { composeWithDevTools } from "redux-devtools-extension"
 
 import * as authActions from "./store/auth/actions"
 
 const history = createHistory()
 
 const store = createStore(
   enableBatching(createRootReducer(history)),
-  compose(
+  composeWithDevTools(
     applyMiddleware(routerMiddleware(history), thunk.withExtraArgument(socket))
   )
 )

orko-ui/src/components/OpenOrders.js

@@ -22,6 +22,7 @@ import Href from "../components/primitives/Href"
 import * as dateUtils from "../util/dateUtils"
 import Price from "../components/primitives/Price"
 import Amount from "../components/primitives/Amount"
+import { Link } from "react-router-dom"
 
 const textStyle = {
   textAlign: "left"
@@ -83,6 +84,46 @@ const runningAtColumn = {
   width: 32
 }
 
+const exchangeColumn = {
+  id: "exchange",
+  Header: "Exchange",
+  accessor: "exchange",
+  Cell: ({ original }) => (
+    <Link
+      data-orko={original.coin.key + "/exchange"}
+      to={"/coin/" + original.coin.key}
+      title="Open coin"
+    >
+      {original.exchangeMeta
+        ? original.exchangeMeta.name
+        : original.coin.exchange}
+    </Link>
+  ),
+  headerStyle: textStyle,
+  style: textStyle,
+  resizable: true,
+  minWidth: 40
+}
+
+const nameColumn = {
+  id: "name",
+  Header: "Name",
+  accessor: "shortName",
+  Cell: ({ original }) => (
+    <Link
+      data-orko={original.coin.key + "/name"}
+      to={"/coin/" + original.coin.key}
+      title="Open coin"
+    >
+      {original.coin.shortName}
+    </Link>
+  ),
+  headerStyle: textStyle,
+  style: textStyle,
+  resizable: true,
+  minWidth: 50
+}
+
 const createdDateColumn = {
   id: "createdDate",
   accessor: "timestamp",
@@ -228,6 +269,8 @@ const OpenOrders = props => (
       cancelColumn(props.onCancelExchange, props.onCancelServer),
       orderTypeColumn,
       runningAtColumn,
+      exchangeColumn,
+      nameColumn,
       createdDateColumn,
       limitPriceColumn(props.coin),
       stopPriceColumn(props.coin),

orko-ui/src/containers/OpenOrdersContainer.js

@@ -23,7 +23,10 @@ import WithCoin from "./WithCoin"
 import WhileLoading from "../components/WhileLoading"
 import * as exchangeActions from "../store/exchanges/actions"
 import * as jobActions from "../store/job/actions"
-import { getOrdersForSelectedCoin } from "../selectors/coins"
+import {
+  getOrdersForAllCoin,
+  getOrdersForSelectedCoin
+} from "../selectors/coins"
 
 class OpenOrdersContainer extends React.Component {
   onCancelExchange = (id, coin) => {
@@ -59,7 +62,9 @@ class OpenOrdersContainer extends React.Component {
 
 function mapStateToProps(state, props) {
   return {
-    orders: getOrdersForSelectedCoin(state)
+    orders: props.showAll
+      ? getOrdersForAllCoin(state)
+      : getOrdersForSelectedCoin(state)
   }
 }
 

orko-ui/src/containers/OrdersContainer.js

@@ -22,26 +22,54 @@ import OpenOrdersContainer from "./OpenOrdersContainer"
 import UserTradeHistoryContainer from "./UserTradeHistoryContainer"
 import GetPageVisibility from "../components/GetPageVisibility"
 import RenderIf from "../components/RenderIf"
+import { getValueFromLS, saveValueToLS } from "../util/localStorage"
+
+const ORDER_STORAGE_KEY = "OrdersContainer.order_show_all"
 
 class OrdersContainer extends React.Component {
   constructor(props) {
     super(props)
-    this.state = { selected: "open" }
+    var showAll = getValueFromLS(ORDER_STORAGE_KEY) !== "false"
+    if (showAll === null) showAll = false
+    this.state = {
+      selected: "open",
+      showAll
+    }
   }
 
   buttons = () => (
     <span>
+      <Tab
+        selected={this.state.showAll}
+        onClick={() => {
+          this.setState(
+            prev => ({ showAll: !prev.showAll }),
+            () => saveValueToLS(ORDER_STORAGE_KEY, this.state.showAll)
+          )
+        }}
+        title="Show orders for all coins or selected coins"
+      >
+        Show All
+      </Tab>
       <Tab
         selected={this.state.selected === "open"}
         onClick={() => this.setState({ selected: "open" })}
-        title="Show open orders for the selected coin"
+        title={
+          this.state.showAll
+            ? "Show open orders for all coin"
+            : "Show open orders for the selected coin"
+        }
       >
         Open
       </Tab>
       <Tab
         selected={this.state.selected === "history"}
         onClick={() => this.setState({ selected: "history" })}
-        title="Show order history for the selected coin"
+        title={
+          this.state.showAll
+            ? "Show order history for all coin"
+            : "Show order history for the selected coin"
+        }
       >
         History
       </Tab>
@@ -60,9 +88,9 @@ class OrdersContainer extends React.Component {
               buttons={this.buttons}
             >
               {this.state.selected === "open" ? (
-                <OpenOrdersContainer />
+                <OpenOrdersContainer showAll={this.state.showAll} />
               ) : (
-                <UserTradeHistoryContainer />
+                <UserTradeHistoryContainer showAll={this.state.showAll} />
               )}
             </Section>
           </RenderIf>