From 82474fc01c4af9dc48e71c1e601e92c00fd5bed7 Mon Sep 17 00:00:00 2001 From: Jason Hasperhoven Date: Mon, 3 May 2021 14:20:03 +0400 Subject: [PATCH 1/5] Reorder grid columns and add formatting to inactive, price average --- src/components/OrderHistory/OrderHistory.js | 42 ++++++++++++--------- src/components/OrderHistory/style.scss | 6 +++ 2 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/components/OrderHistory/OrderHistory.js b/src/components/OrderHistory/OrderHistory.js index ebd07d596..49e2ec086 100644 --- a/src/components/OrderHistory/OrderHistory.js +++ b/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_COLUMNS, PrettyValue, FullDate, +} from 'ufx-ui' import { useSelector } from 'react-redux' import Panel from '../../ui/Panel' import { symbolToLabel, getPriceFromStatus, getFormatedStatus } from './OrderHistory.helpers' @@ -34,16 +36,16 @@ 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, @@ -51,38 +53,44 @@ export const ROW_MAPPING = { 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 ? {formattedValue} : {formattedValue} ), }, - [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 val = getPriceFromStatus(_get(data, 'status')) + return }, }, - [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 }, }, - } export default function OrderHistory(props) { diff --git a/src/components/OrderHistory/style.scss b/src/components/OrderHistory/style.scss index 64a786221..faf4482e1 100644 --- a/src/components/OrderHistory/style.scss +++ b/src/components/OrderHistory/style.scss @@ -7,3 +7,9 @@ font-size: 13px; } } + +.ufx-responsive, +.ufx-order-history, +.ufx-table-wrapper { + height: 100%; +} \ No newline at end of file From f7df87f6d9e63e29365004b863874b3ba0c5b8f1 Mon Sep 17 00:00:00 2001 From: Jason Hasperhoven Date: Mon, 3 May 2021 14:28:21 +0400 Subject: [PATCH 2/5] Refactor data.created --- src/components/OrderHistory/OrderHistory.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/OrderHistory/OrderHistory.js b/src/components/OrderHistory/OrderHistory.js index 49e2ec086..1aa64d5d0 100644 --- a/src/components/OrderHistory/OrderHistory.js +++ b/src/components/OrderHistory/OrderHistory.js @@ -68,8 +68,8 @@ export const ROW_MAPPING = { truncate: true, // eslint-disable-next-line react/display-name format: (_value, _, data) => { - const val = getPriceFromStatus(_get(data, 'status')) - return + const value = getPriceFromStatus(_get(data, 'status')) + return }, }, [TYPE]: { @@ -88,7 +88,7 @@ export const ROW_MAPPING = { index: 7, // eslint-disable-next-line react/display-name format: (value, _, data) => { - return + return }, }, } From b0176ca07bc7a4121e5117326d81eeb70d11396a Mon Sep 17 00:00:00 2001 From: Jason Hasperhoven Date: Tue, 4 May 2021 12:26:36 +0400 Subject: [PATCH 3/5] Add newline to src/components/OrderHistory/style.scss --- src/components/OrderHistory/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OrderHistory/style.scss b/src/components/OrderHistory/style.scss index faf4482e1..d9d71aeae 100644 --- a/src/components/OrderHistory/style.scss +++ b/src/components/OrderHistory/style.scss @@ -12,4 +12,4 @@ .ufx-order-history, .ufx-table-wrapper { height: 100%; -} \ No newline at end of file +} From e74c048473a236048f471ef2e5f73b5109ea908a Mon Sep 17 00:00:00 2001 From: Jason Hasperhoven Date: Tue, 4 May 2021 18:21:15 +0400 Subject: [PATCH 4/5] Update ufx-ui to v0.2.6 --- package-lock.json | 90 +++++++++++++---------------------------------- package.json | 2 +- 2 files changed, 26 insertions(+), 66 deletions(-) diff --git a/package-lock.json b/package-lock.json index 181fe5d43..72d79f93c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8522,9 +8522,9 @@ "integrity": "sha512-PzwHEmsRP3IGY4gv/Ug+rMeaTIyTJvadCb+ujYXYeIylbHJezIyNToe8KfEgHTCEYyC+/bUghYOGg8yMGlZ6vA==" }, "dom-align": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.0.tgz", - "integrity": "sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA==" + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.1.tgz", + "integrity": "sha512-CdTD9EdA5WviP8oO3n+okOm0Xt7dSuWxRTLcJiW0memwUr3Tvz66JDDCh9cb50IZFHXvBmLoyX454uJU/EVg+g==" }, "dom-converter": { "version": "0.2.0", @@ -11776,9 +11776,9 @@ } }, "html-parse-stringify": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.0.tgz", - "integrity": "sha512-TrTKp/U0tACrpqalte/VhxepqMLii2mOfC8iuOt4+VA7Zdi6BUKKqNJvEsO17Cr3T3E7PpqLe3NdLII6bcYJgg==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", + "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==", "requires": { "void-elements": "3.1.0" } @@ -18789,9 +18789,9 @@ } }, "rc-trigger": { - "version": "5.2.5", - "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.2.5.tgz", - "integrity": "sha512-RlF5RpWqK+JeiFeQVOzwjLFzpNe2FowoXc/42azz+20wr/bYF1Q/MwprUK+3+vs/oFhLC0ht3/NlrslAo/OoWA==", + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.2.6.tgz", + "integrity": "sha512-XHsO7IBBDDIlBV++BTrmw2kCVNpNZQZCkT7d/edGWAsCxUTSYntw4gBXavicw/L0iT+rox8m5dgyZmMbmxoQJQ==", "requires": { "@babel/runtime": "^7.11.2", "classnames": "^2.2.6", @@ -18801,9 +18801,9 @@ } }, "rc-util": { - "version": "5.12.0", - "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.12.0.tgz", - "integrity": "sha512-RCUdMYmFiPHfqnErr+J/4S1uWPbiFk0/utU/NH4inSWa0Wf8dflWOLuc9Gutv9jjjn2TgdgcTQ4JKExN/2WyoA==", + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.12.1.tgz", + "integrity": "sha512-PrvX/LUPONoeIaJ35hiS5SeXP6DhwAfpoJG6X4Kc5X7NDgCgk/NfXrNfmijuSh8suHkWk1Quz93d2JdjomwOQA==", "requires": { "@babel/runtime": "^7.12.5", "react-is": "^16.12.0", @@ -18852,13 +18852,12 @@ } }, "react-beforeunload": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/react-beforeunload/-/react-beforeunload-2.5.0.tgz", - "integrity": "sha512-8+3olk6aJG8TF0yd67bAMt3VItp/haBD1X6cwB0aVU6r/eM41DpG52nDHSNQl+i0OAqgkY+xK4sJzuVnrcsSRg==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/react-beforeunload/-/react-beforeunload-2.5.1.tgz", + "integrity": "sha512-X0PROB2sOTfue/8DEMIEIbfVWHlsLYuVOQ1s9StYOkrqocWX7wVJ1SErYXNw0I6zT1vTALm6oxsI7SO2B7AoGw==", "requires": { "prop-types": "^15.7.2", - "tiny-invariant": "^1.1.0", - "use-latest": "^1.2.0" + "tiny-invariant": "^1.1.0" } }, "react-codemirror2": { @@ -19258,12 +19257,12 @@ } }, "react-i18next": { - "version": "11.8.13", - "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.13.tgz", - "integrity": "sha512-KTNuLYnEwI9y54nSEal4yBxXBnfCCfh7t/0p/UHfhlGNcIMu+V4x/y5zGKzbOEK4noQrUzZ+J47RPYH7rMs2ZQ==", + "version": "11.8.15", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.15.tgz", + "integrity": "sha512-ZbKcbYYKukgDL0MiUWKJTEsEftjSTNVZv67/V+SjPqTRwuF/aL4NbUtuEcb4WjHk0HyZ1M+2wGd07Fp0RUNHKA==", "requires": { "@babel/runtime": "^7.13.6", - "html-parse-stringify": "^3.0.0" + "html-parse-stringify": "^3.0.1" } }, "react-input-autosize": { @@ -20733,9 +20732,9 @@ "integrity": "sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg==" }, "sass": { - "version": "1.32.11", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.11.tgz", - "integrity": "sha512-O9tRcob/fegUVSIV1ihLLZcftIOh0AF1VpKgusUfLqnb2jQ0GLDwI5ivv1FYWivGv8eZ/AwntTyTzjcHu0c/qw==", + "version": "1.32.12", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.12.tgz", + "integrity": "sha512-zmXn03k3hN0KaiVTjohgkg98C3UowhL1/VSGdj4/VAAiMKGQOE80PFPxFP2Kyq0OUskPKcY5lImkhBKEHlypJA==", "requires": { "chokidar": ">=3.0.0 <4.0.0" } @@ -23012,8 +23011,8 @@ } }, "ufx-ui": { - "version": "git+https://github.com/bitfinexcom/ufx-ui.git#70981ce4e1b866ea30c104cddde9b1de96fbd06c", - "from": "git+https://github.com/bitfinexcom/ufx-ui.git#v0.2.2", + "version": "git+https://github.com/bitfinexcom/ufx-ui.git#ba9832f4aeee017c4a1f55573dbba01e8fcdd559", + "from": "git+https://github.com/bitfinexcom/ufx-ui.git#v0.2.6", "requires": { "@fortawesome/fontawesome-svg-core": "^1.2.28", "@fortawesome/free-regular-svg-icons": "^5.13.1", @@ -23047,7 +23046,6 @@ "react-i18next": "^11.7.0", "react-measure": "^2.3.0", "react-number-format": "^4.4.1", - "react-popper": "^2.2.4", "react-popper-tooltip": "^2.11.1", "react-router-dom": "^5.2.0", "react-throttle-render": "^2.0.0", @@ -23075,15 +23073,6 @@ "react-resizable": "^1.10.0" } }, - "react-popper": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", - "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", - "requires": { - "react-fast-compare": "^3.0.1", - "warning": "^4.0.2" - } - }, "react-popper-tooltip": { "version": "2.11.1", "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz", @@ -23091,22 +23080,6 @@ "requires": { "@babel/runtime": "^7.9.2", "react-popper": "^1.3.7" - }, - "dependencies": { - "react-popper": { - "version": "1.3.11", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz", - "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==", - "requires": { - "@babel/runtime": "^7.1.2", - "@hypnosphi/create-react-context": "^0.3.1", - "deep-equal": "^1.1.1", - "popper.js": "^1.14.4", - "prop-types": "^15.6.1", - "typed-styles": "^0.0.7", - "warning": "^4.0.2" - } - } } }, "rimraf": { @@ -23497,19 +23470,6 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, - "use-isomorphic-layout-effect": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz", - "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==" - }, - "use-latest": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz", - "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==", - "requires": { - "use-isomorphic-layout-effect": "^1.0.0" - } - }, "utf-8-validate": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.4.tgz", diff --git a/package.json b/package.json index 324fe4dbf..a05eba219 100644 --- a/package.json +++ b/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", From 35ecc11fa2e9935de1d9810207ac6f333e633fb6 Mon Sep 17 00:00:00 2001 From: Jason Hasperhoven Date: Tue, 4 May 2021 18:23:46 +0400 Subject: [PATCH 5/5] Use ORDER_HISTORY_KEYS --- src/components/OrderHistory/OrderHistory.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/OrderHistory/OrderHistory.js b/src/components/OrderHistory/OrderHistory.js index 1aa64d5d0..872be8f8b 100644 --- a/src/components/OrderHistory/OrderHistory.js +++ b/src/components/OrderHistory/OrderHistory.js @@ -1,7 +1,7 @@ import React from 'react' import _get from 'lodash/get' import { - OrderHistory as UfxOrderHistory, ORDER_HISTORY_COLUMNS, PrettyValue, FullDate, + OrderHistory as UfxOrderHistory, ORDER_HISTORY_KEYS, PrettyValue, FullDate, } from 'ufx-ui' import { useSelector } from 'react-redux' import Panel from '../../ui/Panel' @@ -21,7 +21,7 @@ const { PRICE_AVERAGE, PLACED, STATUS, -} = ORDER_HISTORY_COLUMNS +} = ORDER_HISTORY_KEYS export const ROW_MAPPING = { [ID]: {