Merge pull request #378 from JasonMHasperhoven/order-history-columns

(improvement) Reorder grid columns and add formatting to inactive, price average

package.json

@@ -221,7 +221,7 @@
     "resolve": "^1.10.0",
     "sanitize-html": "^1.26.0",
     "thread-loader": "^2.1.2",
-    "ufx-ui": "git+https://github.com/bitfinexcom/ufx-ui.git#v0.2.2",
+    "ufx-ui": "git+https://github.com/bitfinexcom/ufx-ui.git#v0.2.6",
     "universal-analytics": "^0.4.20",
     "uuid": "^8.3.2",
     "workbox-webpack-plugin": "^5.0.0",

src/components/OrderHistory/OrderHistory.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import _get from 'lodash/get'
-import { OrderHistory as UfxOrderHistory, ORDER_HISTORY_COLUMNS } from 'ufx-ui'
+import {
+  OrderHistory as UfxOrderHistory, ORDER_HISTORY_KEYS, PrettyValue, FullDate,
+} from 'ufx-ui'
 import { useSelector } from 'react-redux'
 import Panel from '../../ui/Panel'
 import { symbolToLabel, getPriceFromStatus, getFormatedStatus } from './OrderHistory.helpers'
@@ -19,7 +21,7 @@ const {
   PRICE_AVERAGE,
   PLACED,
   STATUS,
-} = ORDER_HISTORY_COLUMNS
+} = ORDER_HISTORY_KEYS
 
 export const ROW_MAPPING = {
   [ID]: {
@@ -34,55 +36,61 @@ export const ROW_MAPPING = {
   [ORIGINAL_AMOUNT]: {
     hidden: true,
   },
-  [PLACED]: {
-    hidden: true,
-  },
   [ICON]: {
     index: 0,
     truncate: true,
   },
-  [PRICE]: {
+  [PAIR]: {
     index: 1,
     truncate: true,
+    format: (value, _, data) => {
+      return symbolToLabel(_get(data, 'symbol'))
+    },
   },
   [AMOUNT]: {
     index: 2,
     truncate: true,
     format: (value, _, data) => {
       return _get(data, 'originalAmount')
     },
-    // eslint-disable-next-line react/prop-types
+    // eslint-disable-next-line react/prop-types, react/display-name
     renderer: ({ formattedValue }) => (formattedValue < 0
       ? <span className='hfui-red'>{formattedValue}</span>
       : <span className='hfui-green'>{formattedValue}</span>
     ),
   },
-  [TYPE]: {
+  [PRICE]: {
     index: 3,
     truncate: true,
   },
-  [STATUS]: {
+  [PRICE_AVERAGE]: {
     index: 4,
     truncate: true,
-    format: (value, _, data) => {
-      return getFormatedStatus(_get(data, 'status'))
+    // eslint-disable-next-line react/display-name
+    format: (_value, _, data) => {
+      const value = getPriceFromStatus(_get(data, 'status'))
+      return <PrettyValue value={value} sigFig={5} fadeTrailingZeros />
     },
   },
-  [PRICE_AVERAGE]: {
+  [TYPE]: {
     index: 5,
     truncate: true,
-    format: (value, _, data) => {
-      return getPriceFromStatus(_get(data, 'status'))
-    },
+    cellStyle: { width: '20%' },
   },
-  [PAIR]: {
+  [STATUS]: {
     index: 6,
     truncate: true,
     format: (value, _, data) => {
-      return symbolToLabel(_get(data, 'symbol'))
+      return getFormatedStatus(_get(data, 'status'))
+    },
+  },
+  [PLACED]: {
+    index: 7,
+    // eslint-disable-next-line react/display-name
+    format: (value, _, data) => {
+      return <FullDate ts={_get(data, 'created')} />
     },
   },
-
 }
 
 export default function OrderHistory(props) {

src/components/OrderHistory/style.scss

@@ -7,3 +7,9 @@
     font-size: 13px;
   }
 }
+
+.ufx-responsive,
+.ufx-order-history,
+.ufx-table-wrapper {
+  height: 100%;
+}