From f88d8ed21a3bec51f3550b28a9b3cac1f04c2715 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 26 Jun 2024 13:44:56 +0300 Subject: [PATCH 01/77] Improve logins cell states handling --- src/components/Logins/Logins.columns.js | 28 +++++++------------------ 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/src/components/Logins/Logins.columns.js b/src/components/Logins/Logins.columns.js index 41863c7f5..928977dfd 100644 --- a/src/components/Logins/Logins.columns.js +++ b/src/components/Logins/Logins.columns.js @@ -19,9 +19,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('id', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] return ( @@ -37,9 +35,7 @@ export const getColumns = ({ nameStr: `${t('column.date')} (${timeOffset})`, width: getColumnWidth('time', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].time) return ( @@ -55,9 +51,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('ip', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { ip } = filteredData[rowIndex] return ( @@ -73,9 +67,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('browser', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { browser } = filteredData[rowIndex] return ( @@ -91,9 +83,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('version', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { version } = filteredData[rowIndex] return ( @@ -109,9 +99,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('mobile', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { mobile } = filteredData[rowIndex] return ( @@ -127,9 +115,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('extra', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { extra } = filteredData[rowIndex] const formattedExtra = JSON.stringify(extra, undefined, 2) return ( From 7b6172a0db161b5b8e3be97a9545b6cab615ecf9 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 26 Jun 2024 13:49:09 +0300 Subject: [PATCH 02/77] Rework and optimize regular cell getters --- src/components/Logins/Logins.columns.js | 38 +++++-------------------- 1 file changed, 7 insertions(+), 31 deletions(-) diff --git a/src/components/Logins/Logins.columns.js b/src/components/Logins/Logins.columns.js index 928977dfd..9d77e9a64 100644 --- a/src/components/Logins/Logins.columns.js +++ b/src/components/Logins/Logins.columns.js @@ -2,7 +2,7 @@ import React from 'react' import { Cell } from '@blueprintjs/table' import JSONFormat from 'ui/JSONFormat' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { getCell, getCellState, getColumnWidth } from 'utils/columns' export const getColumns = ({ t, @@ -21,11 +21,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] - return ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -37,11 +33,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].time) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].time), }, @@ -53,11 +45,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { ip } = filteredData[rowIndex] - return ( - - {ip} - - ) + return getCell(ip, t) }, copyText: rowIndex => filteredData[rowIndex].ip, }, @@ -69,11 +57,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { browser } = filteredData[rowIndex] - return ( - - {browser} - - ) + return getCell(browser, t) }, copyText: rowIndex => filteredData[rowIndex].browser, }, @@ -85,11 +69,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { version } = filteredData[rowIndex] - return ( - - {version} - - ) + return getCell(version, t) }, copyText: rowIndex => filteredData[rowIndex].version, }, @@ -101,11 +81,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { mobile } = filteredData[rowIndex] - return ( - - {mobile} - - ) + return getCell(mobile, t) }, copyText: rowIndex => filteredData[rowIndex].mobile, }, From 40a6c5f685320c80872f0a66a203a4ac2f4ee60e Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 26 Jun 2024 13:51:46 +0300 Subject: [PATCH 03/77] Improve metadata cell rendering and cleanup --- src/components/Logins/Logins.columns.js | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/components/Logins/Logins.columns.js b/src/components/Logins/Logins.columns.js index 9d77e9a64..911e93576 100644 --- a/src/components/Logins/Logins.columns.js +++ b/src/components/Logins/Logins.columns.js @@ -1,8 +1,9 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - -import JSONFormat from 'ui/JSONFormat' -import { getCell, getCellState, getColumnWidth } from 'utils/columns' +import { + getCell, + getCellState, + getColumnWidth, + getJsonFormattedCell, +} from 'utils/columns' export const getColumns = ({ t, @@ -93,14 +94,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { extra } = filteredData[rowIndex] - const formattedExtra = JSON.stringify(extra, undefined, 2) - return ( - - - {formattedExtra} - - - ) + return getJsonFormattedCell(extra) }, copyText: rowIndex => JSON.stringify(filteredData[rowIndex].extra, undefined, 2), }, From eb0f0b6410f5afa31f096f0d9bdecc0c972281d4 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 26 Jun 2024 13:54:22 +0300 Subject: [PATCH 04/77] Enhance change logs cell states handling --- src/components/ChangeLogs/ChangeLogs.columns.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/components/ChangeLogs/ChangeLogs.columns.js b/src/components/ChangeLogs/ChangeLogs.columns.js index ceb3b619c..5f8171d38 100644 --- a/src/components/ChangeLogs/ChangeLogs.columns.js +++ b/src/components/ChangeLogs/ChangeLogs.columns.js @@ -18,9 +18,7 @@ export const getColumns = ({ nameStr: `${t('column.date')} (${timeOffset})`, width: getColumnWidth('mtsCreate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsCreate) return ( @@ -35,9 +33,7 @@ export const getColumns = ({ name: 'column.description', width: getColumnWidth('log', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { log } = filteredData[rowIndex] return ( @@ -52,9 +48,7 @@ export const getColumns = ({ name: 'column.ip', width: getColumnWidth('ip', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { ip } = filteredData[rowIndex] return ( @@ -69,9 +63,7 @@ export const getColumns = ({ name: 'column.meta', width: getColumnWidth('userAgent', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { userAgent } = filteredData[rowIndex] return ( From 0b941741a71df0260e34d355b4aff0bdfef2828b Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 26 Jun 2024 14:02:27 +0300 Subject: [PATCH 05/77] Rework and optimize change logs cells config getters --- .../ChangeLogs/ChangeLogs.columns.js | 38 +++++-------------- 1 file changed, 10 insertions(+), 28 deletions(-) diff --git a/src/components/ChangeLogs/ChangeLogs.columns.js b/src/components/ChangeLogs/ChangeLogs.columns.js index 5f8171d38..ce4a7ade4 100644 --- a/src/components/ChangeLogs/ChangeLogs.columns.js +++ b/src/components/ChangeLogs/ChangeLogs.columns.js @@ -1,8 +1,9 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - -import JSONFormat from 'ui/JSONFormat' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { + getCell, + getCellState, + getColumnWidth, + getJsonFormattedCell, +} from 'utils/columns' export const getColumns = ({ t, @@ -20,11 +21,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsCreate) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsCreate), }, @@ -35,11 +32,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { log } = filteredData[rowIndex] - return ( - - {log} - - ) + return getCell(log, t) }, copyText: rowIndex => filteredData[rowIndex].log, }, @@ -50,11 +43,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { ip } = filteredData[rowIndex] - return ( - - {ip} - - ) + return getCell(ip, t) }, copyText: rowIndex => filteredData[rowIndex].ip, }, @@ -65,14 +54,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { userAgent } = filteredData[rowIndex] - - return ( - - - {userAgent} - - - ) + return getJsonFormattedCell(userAgent) }, copyText: rowIndex => filteredData[rowIndex].userAgent, }, From 248614e7e75c938f9bff4e963ea29580e9e97875 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 31 Jul 2024 13:12:56 +0300 Subject: [PATCH 06/77] Rework transaltion helper providing --- src/ui/TimeFrameSelector/TimeFrameSelector.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/ui/TimeFrameSelector/TimeFrameSelector.js b/src/ui/TimeFrameSelector/TimeFrameSelector.js index ab5486b4e..2faf81fe8 100644 --- a/src/ui/TimeFrameSelector/TimeFrameSelector.js +++ b/src/ui/TimeFrameSelector/TimeFrameSelector.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import { withTranslation } from 'react-i18next' +import { useTranslation } from 'react-i18next' import Select from 'ui/Select' @@ -11,7 +11,8 @@ const { } = constants const TimeFrameSelector = (props) => { - const { onChange, t, value } = props + const { onChange, value } = props + const { t } = useTranslation() const items = [ { value: DAY, label: t('timeframe.day') }, @@ -34,8 +35,6 @@ const TimeFrameSelector = (props) => { TimeFrameSelector.propTypes = { value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, - t: PropTypes.func.isRequired, } -TimeFrameSelector.defaultProps = {} -export default withTranslation('translations')(TimeFrameSelector) +export default TimeFrameSelector From b1430dc37974e6b89d59b514d33b6d20d0fa18eb Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 31 Jul 2024 13:13:12 +0300 Subject: [PATCH 07/77] Optimize export --- src/ui/TimeFrameSelector/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/ui/TimeFrameSelector/index.js b/src/ui/TimeFrameSelector/index.js index 293b3ddc4..723dbf14c 100644 --- a/src/ui/TimeFrameSelector/index.js +++ b/src/ui/TimeFrameSelector/index.js @@ -1,3 +1 @@ -import TimeFrameSelector from './TimeFrameSelector' - -export default TimeFrameSelector +export { default } from './TimeFrameSelector' From 4fef130ab2af6f840b5b43bc84fa2032ae04a150 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 31 Jul 2024 13:16:07 +0300 Subject: [PATCH 08/77] Implement timeframe items getter --- src/ui/TimeFrameSelector/TimeFrameSelector.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/ui/TimeFrameSelector/TimeFrameSelector.js b/src/ui/TimeFrameSelector/TimeFrameSelector.js index 2faf81fe8..3e658fad2 100644 --- a/src/ui/TimeFrameSelector/TimeFrameSelector.js +++ b/src/ui/TimeFrameSelector/TimeFrameSelector.js @@ -10,16 +10,18 @@ const { DAY, WEEK, MONTH, YEAR, } = constants +const getItems = (t) => [ + { value: DAY, label: t('timeframe.day') }, + { value: WEEK, label: t('timeframe.week') }, + { value: MONTH, label: t('timeframe.month') }, + { value: YEAR, label: t('timeframe.year') }, +] + const TimeFrameSelector = (props) => { const { onChange, value } = props const { t } = useTranslation() - const items = [ - { value: DAY, label: t('timeframe.day') }, - { value: WEEK, label: t('timeframe.week') }, - { value: MONTH, label: t('timeframe.month') }, - { value: YEAR, label: t('timeframe.year') }, - ] + const items = getItems(t) return ( ) } From 9d3cb0a0a42b1c8614f0ccd6ea2f14ce2eb7ee4f Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 31 Jul 2024 13:24:23 +0300 Subject: [PATCH 10/77] Improve items getting flow and props decomposition --- src/ui/TimeFrameSelector/TimeFrameSelector.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/ui/TimeFrameSelector/TimeFrameSelector.js b/src/ui/TimeFrameSelector/TimeFrameSelector.js index 229085741..d69dda928 100644 --- a/src/ui/TimeFrameSelector/TimeFrameSelector.js +++ b/src/ui/TimeFrameSelector/TimeFrameSelector.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useMemo } from 'react' import PropTypes from 'prop-types' import { useTranslation } from 'react-i18next' @@ -13,11 +13,9 @@ const getItems = (t) => [ { value: constants.YEAR, label: t('timeframe.year') }, ] -const TimeFrameSelector = (props) => { - const { onChange, value } = props +const TimeFrameSelector = ({ onChange, value }) => { const { t } = useTranslation() - - const items = getItems(t) + const items = useMemo(() => getItems(t), [t]) return ( { LedgersCategorySelect.propTypes = { className: PropTypes.string, onChange: PropTypes.func.isRequired, - t: PropTypes.func.isRequired, value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), } @@ -73,4 +72,4 @@ LedgersCategorySelect.defaultProps = { value: '', } -export default withTranslation('translations')(LedgersCategorySelect) +export default LedgersCategorySelect From fefe679f912c5fdf1a04546e74a06f38ba45eb62 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 5 Aug 2024 14:03:03 +0300 Subject: [PATCH 29/77] Optimize export --- src/ui/LedgersCategorySelect/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/ui/LedgersCategorySelect/index.js b/src/ui/LedgersCategorySelect/index.js index 3bd3f8fb9..72eb11a1d 100644 --- a/src/ui/LedgersCategorySelect/index.js +++ b/src/ui/LedgersCategorySelect/index.js @@ -1,3 +1 @@ -import LedgersCategoriesSelect from './LedgersCategorySelect' - -export default LedgersCategoriesSelect +export { default } from './LedgersCategorySelect' From a2b8aedde69d72c25aea44ccd9b4c7637d92e413 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 5 Aug 2024 14:06:31 +0300 Subject: [PATCH 30/77] Improve props decompozition, lint fixes --- src/ui/LedgersCategorySelect/LedgersCategorySelect.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/ui/LedgersCategorySelect/LedgersCategorySelect.js b/src/ui/LedgersCategorySelect/LedgersCategorySelect.js index 18cb48f99..6f9a313ed 100644 --- a/src/ui/LedgersCategorySelect/LedgersCategorySelect.js +++ b/src/ui/LedgersCategorySelect/LedgersCategorySelect.js @@ -49,13 +49,14 @@ const LedgersCategorySelect = (props) => { value, } = props const { t } = useTranslation() + const items = getLedgersCategories(t) return ( Date: Thu, 8 Aug 2024 14:11:41 +0300 Subject: [PATCH 33/77] Optimize movenents cell states handling --- src/components/Movements/Movements.columns.js | 44 +++++-------------- 1 file changed, 11 insertions(+), 33 deletions(-) diff --git a/src/components/Movements/Movements.columns.js b/src/components/Movements/Movements.columns.js index 5380c860b..dbfc79cfa 100644 --- a/src/components/Movements/Movements.columns.js +++ b/src/components/Movements/Movements.columns.js @@ -24,9 +24,7 @@ const getColumns = ({ className: 'align-left', width: getColumnWidth('moreDetails', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] return ( @@ -49,9 +47,7 @@ const getColumns = ({ className: 'align-left', width: getColumnWidth('id', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] return ( @@ -67,9 +63,7 @@ const getColumns = ({ nameStr: `${t('column.date')} (${timeOffset})`, width: getColumnWidth('mtsUpdated', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdated) return ( @@ -85,9 +79,7 @@ const getColumns = ({ className: 'align-left', width: getColumnWidth('currency', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { currency, currencyName } = filteredData[rowIndex] const preparedCurrency = prepareCurrency(currency, currencyName, tetherNames) return ( @@ -104,9 +96,7 @@ const getColumns = ({ className: 'align-left', width: getColumnWidth('status', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { status } = filteredData[rowIndex] return ( @@ -121,9 +111,7 @@ const getColumns = ({ name: 'column.amount', width: getColumnWidth('amount', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amount, currency } = filteredData[rowIndex] const tooltip = `${fixedFloat(amount)} ${currency}` return ( @@ -144,9 +132,7 @@ const getColumns = ({ name: 'column.amountUsd', width: getColumnWidth('amountUsd', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amountUsd } = filteredData[rowIndex] const tooltip = `${fixedFloat(amountUsd)} ${t('column.usd')}` return ( @@ -167,9 +153,7 @@ const getColumns = ({ name: 'column.fees', width: getColumnWidth('fees', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { fees, currency } = filteredData[rowIndex] const tooltip = `${fixedFloat(fees)} ${currency}` return ( @@ -196,9 +180,7 @@ const getColumns = ({ className: 'align-left', width: getColumnWidth('destinationAddress', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { currency, destinationAddress } = filteredData[rowIndex] return ( @@ -218,9 +200,7 @@ const getColumns = ({ className: 'align-left', width: getColumnWidth('transactionId', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { transactionId } = filteredData[rowIndex] return ( @@ -236,9 +216,7 @@ const getColumns = ({ className: 'align-left', width: getColumnWidth('note', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { note } = filteredData[rowIndex] return ( From 7f379cb38bb0c28cd594701e9d72dab082cbf842 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Thu, 8 Aug 2024 14:23:55 +0300 Subject: [PATCH 34/77] Unify standart cells renderers --- src/components/Movements/Movements.columns.js | 56 +++---------------- 1 file changed, 9 insertions(+), 47 deletions(-) diff --git a/src/components/Movements/Movements.columns.js b/src/components/Movements/Movements.columns.js index dbfc79cfa..49d81596a 100644 --- a/src/components/Movements/Movements.columns.js +++ b/src/components/Movements/Movements.columns.js @@ -4,7 +4,7 @@ import { Cell } from '@blueprintjs/table' import config from 'config' import Explorer from 'ui/Explorer' import { prepareCurrency } from 'state/symbols/utils' -import { getCellState, getColumnWidth } from 'utils/columns' +import { getCell, getCellState, getColumnWidth } from 'utils/columns' import { formatAmount, fixedFloat, insertIf } from 'ui/utils' const getColumns = ({ @@ -49,11 +49,7 @@ const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] - return ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -65,11 +61,7 @@ const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdated) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdated), }, @@ -82,11 +74,7 @@ const getColumns = ({ if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { currency, currencyName } = filteredData[rowIndex] const preparedCurrency = prepareCurrency(currency, currencyName, tetherNames) - return ( - - {preparedCurrency} - - ) + return getCell(preparedCurrency, t) }, copyText: rowIndex => filteredData[rowIndex].currency, }, @@ -98,11 +86,7 @@ const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { status } = filteredData[rowIndex] - return ( - - {status} - - ) + return getCell(status, t) }, copyText: rowIndex => filteredData[rowIndex].status, }, @@ -114,14 +98,7 @@ const getColumns = ({ if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amount, currency } = filteredData[rowIndex] const tooltip = `${fixedFloat(amount)} ${currency}` - return ( - - {formatAmount(amount)} - - ) + return getCell(formatAmount(amount), t, tooltip) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), @@ -135,14 +112,7 @@ const getColumns = ({ if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amountUsd } = filteredData[rowIndex] const tooltip = `${fixedFloat(amountUsd)} ${t('column.usd')}` - return ( - - {formatAmount(amountUsd)} - - ) + return getCell(formatAmount(amountUsd), t, tooltip) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amountUsd), @@ -202,11 +172,7 @@ const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { transactionId } = filteredData[rowIndex] - return ( - - {transactionId} - - ) + return getCell(transactionId, t) }, copyText: rowIndex => filteredData[rowIndex].transactionId, }, @@ -218,11 +184,7 @@ const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { note } = filteredData[rowIndex] - return ( - - {note} - - ) + return getCell(note, t) }, copyText: rowIndex => filteredData[rowIndex].note, }, From 438ff502946551d96390111ac3cb5ef93bc82ead Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Thu, 8 Aug 2024 14:37:27 +0300 Subject: [PATCH 35/77] Implement unifued getFeeCell helper for better reusability --- src/utils/columns.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/utils/columns.js b/src/utils/columns.js index 5e3a52ae1..310b36737 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -281,6 +281,17 @@ export const getLinkCell = (link) => ( ) +export const getFeeCell = (fee, feeCurrency, tooltip) => ( + + <> + {formatAmount(fee)} + {' '} + + {feeCurrency} + + + +) export const getRowsConfig = (isLoading, isNoData, numRows = 0) => { if (isLoading) return 5 From 0606cefe0c3c69a1b37af95ca0d0a02cbac2bbf9 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Thu, 8 Aug 2024 14:38:49 +0300 Subject: [PATCH 36/77] Improve movements fees column configuration --- src/components/Movements/Movements.columns.js | 23 +++++++------------ 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/src/components/Movements/Movements.columns.js b/src/components/Movements/Movements.columns.js index 49d81596a..0a2607988 100644 --- a/src/components/Movements/Movements.columns.js +++ b/src/components/Movements/Movements.columns.js @@ -3,10 +3,16 @@ import { Cell } from '@blueprintjs/table' import config from 'config' import Explorer from 'ui/Explorer' +import { + getCell, + getFeeCell, + getCellState, + getColumnWidth, +} from 'utils/columns' import { prepareCurrency } from 'state/symbols/utils' -import { getCell, getCellState, getColumnWidth } from 'utils/columns' import { formatAmount, fixedFloat, insertIf } from 'ui/utils' + const getColumns = ({ t, isNoData, @@ -126,20 +132,7 @@ const getColumns = ({ if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { fees, currency } = filteredData[rowIndex] const tooltip = `${fixedFloat(fees)} ${currency}` - return ( - - <> - {formatAmount(fees)} - {' '} - - {currency} - - - - ) + return getFeeCell(fees, currency, tooltip) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].fees), From 8fe302bc46ed5430bb6f5ae0ddf4603cc87a99af Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Thu, 8 Aug 2024 14:39:06 +0300 Subject: [PATCH 37/77] Lint fix --- src/components/Movements/Movements.columns.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Movements/Movements.columns.js b/src/components/Movements/Movements.columns.js index 0a2607988..cf621e862 100644 --- a/src/components/Movements/Movements.columns.js +++ b/src/components/Movements/Movements.columns.js @@ -12,7 +12,6 @@ import { import { prepareCurrency } from 'state/symbols/utils' import { formatAmount, fixedFloat, insertIf } from 'ui/utils' - const getColumns = ({ t, isNoData, From 0d274d3683d21281ba64ad199e503c0311657a10 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Thu, 8 Aug 2024 14:41:44 +0300 Subject: [PATCH 38/77] Actualize column utils export --- src/utils/columns.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/utils/columns.js b/src/utils/columns.js index 310b36737..96f2b7ad4 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -736,4 +736,9 @@ export default { getTooltipContent, getCalculatedColumnWidths, formatSourceType, + getCell, + getFeeCell, + getLinkCell, + getCellState, + getJsonFormattedCell, } From b45dd69a3a8893b8092141d3826344ec97c82f43 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 9 Aug 2024 13:45:05 +0300 Subject: [PATCH 39/77] Improve tooltip handling for unified fees cell formatter --- src/utils/columns.js | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index 96f2b7ad4..819e2d3a3 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -281,17 +281,20 @@ export const getLinkCell = (link) => ( ) -export const getFeeCell = (fee, feeCurrency, tooltip) => ( - - <> - {formatAmount(fee)} - {' '} - - {feeCurrency} - - - -) +export const getFeeCell = (fee, feeCurrency, t, tooltip) => { + const tooltipContent = getTooltipContent(tooltip || fee, t) + return ( + + <> + {formatAmount(fee)} + {' '} + + {feeCurrency} + + + + ) +} export const getRowsConfig = (isLoading, isNoData, numRows = 0) => { if (isLoading) return 5 From ec1c724c95f6d4b5927bb69f0cd6fe9f2abb4d57 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 9 Aug 2024 13:45:56 +0300 Subject: [PATCH 40/77] Actualized getter params providing --- src/components/Movements/Movements.columns.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Movements/Movements.columns.js b/src/components/Movements/Movements.columns.js index cf621e862..c947818fe 100644 --- a/src/components/Movements/Movements.columns.js +++ b/src/components/Movements/Movements.columns.js @@ -131,7 +131,7 @@ const getColumns = ({ if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { fees, currency } = filteredData[rowIndex] const tooltip = `${fixedFloat(fees)} ${currency}` - return getFeeCell(fees, currency, tooltip) + return getFeeCell(fees, currency, t, tooltip) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].fees), From 374c1118939bd324e77b4e5df2b93a13167c9e8c Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 9 Aug 2024 14:01:18 +0300 Subject: [PATCH 41/77] Optimize trades cell states handling --- src/components/Trades/Trades.columns.js | 32 +++++++------------------ 1 file changed, 8 insertions(+), 24 deletions(-) diff --git a/src/components/Trades/Trades.columns.js b/src/components/Trades/Trades.columns.js index bdc3ae58f..661d84e4a 100644 --- a/src/components/Trades/Trades.columns.js +++ b/src/components/Trades/Trades.columns.js @@ -48,9 +48,7 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('id', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] return ( @@ -66,9 +64,7 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('orderID', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { orderID } = filteredData[rowIndex] return ( @@ -84,9 +80,7 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('pair', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pair } = filteredData[rowIndex] return ( @@ -101,9 +95,7 @@ export default function getColumns(props) { name: 'column.amount', width: getColumnWidth('execAmount', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { execAmount } = filteredData[rowIndex] return ( { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { execPrice } = filteredData[rowIndex] const fixedPrice = fixedFloat(execPrice) return ( @@ -144,9 +134,7 @@ export default function getColumns(props) { name: 'column.fee', width: getColumnWidth('fee', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { fee, feeCurrency } = filteredData[rowIndex] const fixedFee = fixedFloat(fee) const tooltip = getTooltipContent(`${fixedFee} ${feeCurrency}`, t) @@ -173,9 +161,7 @@ export default function getColumns(props) { name: 'column.feePercent', width: getColumnWidth('feePercent', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const feePercent = getFeePercent(filteredData[rowIndex]) return ( { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsCreate) return ( From 200c7dd98f289beb0f507fb3524d54e03ccba520 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 9 Aug 2024 14:03:57 +0300 Subject: [PATCH 42/77] Actualize trades getter import --- src/components/Trades/Trades.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Trades/Trades.js b/src/components/Trades/Trades.js index f2e70931e..9e339bff0 100644 --- a/src/components/Trades/Trades.js +++ b/src/components/Trades/Trades.js @@ -15,7 +15,7 @@ import { clearAllPairs, } from 'state/utils' -import getColumns from './Trades.columns' +import { getColumns } from './Trades.columns' import { propTypes, defaultProps } from './Trades.props' const TYPE = queryConstants.MENU_TRADES From bb89598d46f6e25889796199f8984ecb3d1c88a1 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 9 Aug 2024 14:04:26 +0300 Subject: [PATCH 43/77] Improve col getter structure --- src/components/Trades/Trades.columns.js | 304 ++++++++++++------------ 1 file changed, 150 insertions(+), 154 deletions(-) diff --git a/src/components/Trades/Trades.columns.js b/src/components/Trades/Trades.columns.js index 661d84e4a..36a0181b3 100644 --- a/src/components/Trades/Trades.columns.js +++ b/src/components/Trades/Trades.columns.js @@ -30,165 +30,161 @@ const getFeePercent = (entry) => { return '-' } -export default function getColumns(props) { - const { - t, - isNoData, - isLoading, - timeOffset, - getFullTime, - filteredData, - columnsWidth, - } = props - - return [ - { - id: 'id', - name: 'column.id', - className: 'align-left', - width: getColumnWidth('id', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { id } = filteredData[rowIndex] - return ( - - {id} - - ) - }, - copyText: rowIndex => filteredData[rowIndex].id, +export const getColumns = ({ + t, + isNoData, + isLoading, + timeOffset, + getFullTime, + filteredData, + columnsWidth, +}) => [ + { + id: 'id', + name: 'column.id', + className: 'align-left', + width: getColumnWidth('id', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { id } = filteredData[rowIndex] + return ( + + {id} + + ) }, - { - id: 'orderID', - name: 'column.orderid', - className: 'align-left', - width: getColumnWidth('orderID', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { orderID } = filteredData[rowIndex] - return ( - - {orderID} - - ) - }, - copyText: rowIndex => filteredData[rowIndex].orderID, + copyText: rowIndex => filteredData[rowIndex].id, + }, + { + id: 'orderID', + name: 'column.orderid', + className: 'align-left', + width: getColumnWidth('orderID', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { orderID } = filteredData[rowIndex] + return ( + + {orderID} + + ) }, - { - id: 'pair', - name: 'column.pair', - className: 'align-left', - width: getColumnWidth('pair', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { pair } = filteredData[rowIndex] - return ( - - {pair} - - ) - }, - copyText: rowIndex => filteredData[rowIndex].pair, + copyText: rowIndex => filteredData[rowIndex].orderID, + }, + { + id: 'pair', + name: 'column.pair', + className: 'align-left', + width: getColumnWidth('pair', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { pair } = filteredData[rowIndex] + return ( + + {pair} + + ) }, - { - id: 'execAmount', - name: 'column.amount', - width: getColumnWidth('execAmount', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { execAmount } = filteredData[rowIndex] - return ( - - {formatAmount(execAmount)} - - ) - }, - isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].execAmount), + copyText: rowIndex => filteredData[rowIndex].pair, + }, + { + id: 'execAmount', + name: 'column.amount', + width: getColumnWidth('execAmount', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { execAmount } = filteredData[rowIndex] + return ( + + {formatAmount(execAmount)} + + ) }, - { - id: 'execPrice', - name: 'column.price', - width: getColumnWidth('execPrice', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { execPrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(execPrice) - return ( - - {fixedPrice} - - ) - }, - isNumericValue: true, - copyText: rowIndex => filteredData[rowIndex].execPrice, + isNumericValue: true, + copyText: rowIndex => fixedFloat(filteredData[rowIndex].execAmount), + }, + { + id: 'execPrice', + name: 'column.price', + width: getColumnWidth('execPrice', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { execPrice } = filteredData[rowIndex] + const fixedPrice = fixedFloat(execPrice) + return ( + + {fixedPrice} + + ) }, - { - id: 'fee', - name: 'column.fee', - width: getColumnWidth('fee', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { fee, feeCurrency } = filteredData[rowIndex] - const fixedFee = fixedFloat(fee) - const tooltip = getTooltipContent(`${fixedFee} ${feeCurrency}`, t) - return ( - - <> - {formatAmount(fee)} - {' '} - - {feeCurrency} - - - - ) - }, - isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].fee), + isNumericValue: true, + copyText: rowIndex => filteredData[rowIndex].execPrice, + }, + { + id: 'fee', + name: 'column.fee', + width: getColumnWidth('fee', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { fee, feeCurrency } = filteredData[rowIndex] + const fixedFee = fixedFloat(fee) + const tooltip = getTooltipContent(`${fixedFee} ${feeCurrency}`, t) + return ( + + <> + {formatAmount(fee)} + {' '} + + {feeCurrency} + + + + ) }, - { - id: 'feePercent', - name: 'column.feePercent', - width: getColumnWidth('feePercent', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const feePercent = getFeePercent(filteredData[rowIndex]) - return ( - - {feePercent} - - ) - }, - copyText: rowIndex => getFeePercent(filteredData[rowIndex]), + isNumericValue: true, + copyText: rowIndex => fixedFloat(filteredData[rowIndex].fee), + }, + { + id: 'feePercent', + name: 'column.feePercent', + width: getColumnWidth('feePercent', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const feePercent = getFeePercent(filteredData[rowIndex]) + return ( + + {feePercent} + + ) }, - { - id: 'mtsCreate', - className: 'align-left', - nameStr: `${t('column.date')} (${timeOffset})`, - width: getColumnWidth('mtsCreate', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const timestamp = getFullTime(filteredData[rowIndex].mtsCreate) - return ( - - {timestamp} - - ) - }, - copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsCreate), + copyText: rowIndex => getFeePercent(filteredData[rowIndex]), + }, + { + id: 'mtsCreate', + className: 'align-left', + nameStr: `${t('column.date')} (${timeOffset})`, + width: getColumnWidth('mtsCreate', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const timestamp = getFullTime(filteredData[rowIndex].mtsCreate) + return ( + + {timestamp} + + ) }, - ] -} + copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsCreate), + }, +] From ecd4e15bf886cebcc4533c2c322964e4f65d4073 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 9 Aug 2024 14:14:44 +0300 Subject: [PATCH 44/77] Rework and optimize trades cells config getters --- src/components/Trades/Trades.columns.js | 73 ++++--------------------- 1 file changed, 11 insertions(+), 62 deletions(-) diff --git a/src/components/Trades/Trades.columns.js b/src/components/Trades/Trades.columns.js index 36a0181b3..6faf347d2 100644 --- a/src/components/Trades/Trades.columns.js +++ b/src/components/Trades/Trades.columns.js @@ -3,7 +3,9 @@ import { Cell } from '@blueprintjs/table' import { formatAmount, fixedFloat } from 'ui/utils' import { demapPairs, demapSymbols } from 'state/symbols/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { + getCell, getCellState, getColumnWidth, getTooltipContent, getFeeCell, +} from 'utils/columns' const getFeePercent = (entry) => { const { @@ -47,11 +49,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] - return ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -63,11 +61,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { orderID } = filteredData[rowIndex] - return ( - - {orderID} - - ) + return getCell(orderID, t) }, copyText: rowIndex => filteredData[rowIndex].orderID, }, @@ -79,11 +73,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pair } = filteredData[rowIndex] - return ( - - {pair} - - ) + return getCell(pair, t) }, copyText: rowIndex => filteredData[rowIndex].pair, }, @@ -94,14 +84,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { execAmount } = filteredData[rowIndex] - return ( - - {formatAmount(execAmount)} - - ) + return getCell(formatAmount(execAmount), t, fixedFloat(execAmount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].execAmount), @@ -113,15 +96,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { execPrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(execPrice) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(execPrice), t) }, isNumericValue: true, copyText: rowIndex => filteredData[rowIndex].execPrice, @@ -133,22 +108,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { fee, feeCurrency } = filteredData[rowIndex] - const fixedFee = fixedFloat(fee) - const tooltip = getTooltipContent(`${fixedFee} ${feeCurrency}`, t) - return ( - - <> - {formatAmount(fee)} - {' '} - - {feeCurrency} - - - - ) + return getFeeCell(fee, feeCurrency, t, `${fixedFloat(fee)} ${feeCurrency}`) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].fee), @@ -160,14 +120,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const feePercent = getFeePercent(filteredData[rowIndex]) - return ( - - {feePercent} - - ) + return getCell(feePercent, t) }, copyText: rowIndex => getFeePercent(filteredData[rowIndex]), }, @@ -179,11 +132,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsCreate) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsCreate), }, From f86a9c02a86c210b20aa55f2e8095882f2cd80d6 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 9 Aug 2024 14:15:47 +0300 Subject: [PATCH 45/77] Lint fix & cleanup --- src/components/Trades/Trades.columns.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Trades/Trades.columns.js b/src/components/Trades/Trades.columns.js index 6faf347d2..3c5b124f5 100644 --- a/src/components/Trades/Trades.columns.js +++ b/src/components/Trades/Trades.columns.js @@ -1,11 +1,11 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - -import { formatAmount, fixedFloat } from 'ui/utils' -import { demapPairs, demapSymbols } from 'state/symbols/utils' import { - getCell, getCellState, getColumnWidth, getTooltipContent, getFeeCell, + getCell, + getFeeCell, + getCellState, + getColumnWidth, } from 'utils/columns' +import { formatAmount, fixedFloat } from 'ui/utils' +import { demapPairs, demapSymbols } from 'state/symbols/utils' const getFeePercent = (entry) => { const { From f04dd91d28d533dc24d75a524a28c2240e4f1024 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 9 Aug 2024 14:21:10 +0300 Subject: [PATCH 46/77] Optimize fees tooltip content providing --- src/components/Movements/Movements.columns.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Movements/Movements.columns.js b/src/components/Movements/Movements.columns.js index c947818fe..49720a23d 100644 --- a/src/components/Movements/Movements.columns.js +++ b/src/components/Movements/Movements.columns.js @@ -130,8 +130,7 @@ const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { fees, currency } = filteredData[rowIndex] - const tooltip = `${fixedFloat(fees)} ${currency}` - return getFeeCell(fees, currency, t, tooltip) + return getFeeCell(fees, currency, t, `${fixedFloat(fees)} ${currency}`) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].fees), From 9a53effe6037f3e233b014e6a8814d3d67c32170 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 9 Aug 2024 14:26:35 +0300 Subject: [PATCH 47/77] Minor tweaks --- src/components/Movements/Movements.columns.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Movements/Movements.columns.js b/src/components/Movements/Movements.columns.js index 49720a23d..dd2ace4ff 100644 --- a/src/components/Movements/Movements.columns.js +++ b/src/components/Movements/Movements.columns.js @@ -102,8 +102,7 @@ const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amount, currency } = filteredData[rowIndex] - const tooltip = `${fixedFloat(amount)} ${currency}` - return getCell(formatAmount(amount), t, tooltip) + return getCell(formatAmount(amount), t, `${fixedFloat(amount)} ${currency}`) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), @@ -116,8 +115,7 @@ const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amountUsd } = filteredData[rowIndex] - const tooltip = `${fixedFloat(amountUsd)} ${t('column.usd')}` - return getCell(formatAmount(amountUsd), t, tooltip) + return getCell(formatAmount(amountUsd), t, `${fixedFloat(amountUsd)} ${t('column.usd')}`) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amountUsd), From 8c59e6b49e0c3208fbf5d66d7be81e942f968578 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 12 Aug 2024 12:29:45 +0300 Subject: [PATCH 48/77] Improve orders cells state handling --- src/components/Movements/Movements.columns.js | 4 +- src/components/Orders/Orders.columns.js | 48 +++++-------------- 2 files changed, 15 insertions(+), 37 deletions(-) diff --git a/src/components/Movements/Movements.columns.js b/src/components/Movements/Movements.columns.js index dd2ace4ff..ac0f3d8f5 100644 --- a/src/components/Movements/Movements.columns.js +++ b/src/components/Movements/Movements.columns.js @@ -29,7 +29,9 @@ const getColumns = ({ className: 'align-left', width: getColumnWidth('moreDetails', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) + if (isLoading || isNoData) { + return getCellState(isLoading, isNoData) + } const { id } = filteredData[rowIndex] return ( diff --git a/src/components/Orders/Orders.columns.js b/src/components/Orders/Orders.columns.js index 5c7bcb604..9f5d30491 100644 --- a/src/components/Orders/Orders.columns.js +++ b/src/components/Orders/Orders.columns.js @@ -45,9 +45,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('pair', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pair } = filteredData[rowIndex] return ( @@ -63,9 +61,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('type', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { type } = filteredData[rowIndex] return ( @@ -80,9 +76,7 @@ export const getColumns = ({ name: 'column.amount', width: getColumnWidth('amountOrig', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amountOrig } = filteredData[rowIndex] const fixedAmount = fixedFloat(amountOrig) return ( @@ -102,9 +96,7 @@ export const getColumns = ({ name: 'column.amount-exe', width: getColumnWidth('amountExecuted', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amountExecuted } = filteredData[rowIndex] return ( { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { price } = filteredData[rowIndex] const fixedPrice = fixedFloat(price) return ( @@ -145,9 +135,7 @@ export const getColumns = ({ name: 'column.avgprice', width: getColumnWidth('priceAvg', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { priceAvg } = filteredData[rowIndex] const fixedPrice = fixedFloat(priceAvg) return ( @@ -168,9 +156,7 @@ export const getColumns = ({ nameStr: `${t('column.created')} (${timeOffset})`, width: getColumnWidth('mtsCreate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsCreate) return ( @@ -186,9 +172,7 @@ export const getColumns = ({ nameStr: `${t('column.updated')} (${timeOffset})`, width: getColumnWidth('mtsUpdate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) return ( @@ -204,9 +188,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('status', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { status } = filteredData[rowIndex] return ( @@ -221,9 +203,7 @@ export const getColumns = ({ name: 'column.pricetrail', width: getColumnWidth('priceTrailing', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { priceTrailing } = filteredData[rowIndex] const fixedPrice = fixedFloat(priceTrailing) return ( @@ -244,9 +224,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('typePrev', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { typePrev } = filteredData[rowIndex] return ( @@ -262,9 +240,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('meta', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { meta } = filteredData[rowIndex] const formattedMeta = JSON.stringify(meta, undefined, 2) From 2f7ec92498001a0003d70b636920827b325c7425 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 12 Aug 2024 12:42:17 +0300 Subject: [PATCH 49/77] Rework and optimize regular orders cells confgigs --- src/components/Orders/Orders.columns.js | 92 +++++-------------------- 1 file changed, 17 insertions(+), 75 deletions(-) diff --git a/src/components/Orders/Orders.columns.js b/src/components/Orders/Orders.columns.js index 9f5d30491..34f99e428 100644 --- a/src/components/Orders/Orders.columns.js +++ b/src/components/Orders/Orders.columns.js @@ -3,7 +3,12 @@ import { Cell } from '@blueprintjs/table' import JSONFormat from 'ui/JSONFormat' import { formatAmount, fixedFloat } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { + getCell, + getCellState, + getColumnWidth, + getTooltipContent, +} from 'utils/columns' export const getColumns = ({ t, @@ -47,11 +52,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pair } = filteredData[rowIndex] - return ( - - {pair} - - ) + return getCell(pair, t) }, copyText: rowIndex => filteredData[rowIndex].pair, }, @@ -63,11 +64,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { type } = filteredData[rowIndex] - return ( - - {type} - - ) + return getCell(type, t) }, copyText: rowIndex => filteredData[rowIndex].type, }, @@ -78,15 +75,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amountOrig } = filteredData[rowIndex] - const fixedAmount = fixedFloat(amountOrig) - return ( - - {fixedAmount} - - ) + return getCell(fixedFloat(amountOrig), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amountOrig), @@ -98,14 +87,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amountExecuted } = filteredData[rowIndex] - return ( - - {formatAmount(amountExecuted)} - - ) + return getCell(formatAmount(amountExecuted), t, fixedFloat(amountExecuted)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amountExecuted), @@ -117,15 +99,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { price } = filteredData[rowIndex] - const fixedPrice = fixedFloat(price) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(price), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].price), @@ -137,15 +111,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { priceAvg } = filteredData[rowIndex] - const fixedPrice = fixedFloat(priceAvg) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(priceAvg), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].priceAvg), @@ -158,11 +124,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsCreate) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsCreate), }, @@ -174,11 +136,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), }, @@ -190,11 +148,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { status } = filteredData[rowIndex] - return ( - - {status} - - ) + return getCell(status, t) }, copyText: rowIndex => filteredData[rowIndex].status, }, @@ -205,15 +159,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { priceTrailing } = filteredData[rowIndex] - const fixedPrice = fixedFloat(priceTrailing) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(priceTrailing), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].priceTrailing), @@ -226,11 +172,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { typePrev } = filteredData[rowIndex] - return ( - - {typePrev} - - ) + return getCell(typePrev, t) }, copyText: rowIndex => filteredData[rowIndex].typePrev, }, From 4e191e17f9d4e2ee6973f19cd514182c1686f5c1 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 12 Aug 2024 12:45:11 +0300 Subject: [PATCH 50/77] Improve orders meta cell generation flow --- src/components/Orders/Orders.columns.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/Orders/Orders.columns.js b/src/components/Orders/Orders.columns.js index 34f99e428..efee60177 100644 --- a/src/components/Orders/Orders.columns.js +++ b/src/components/Orders/Orders.columns.js @@ -8,6 +8,7 @@ import { getCellState, getColumnWidth, getTooltipContent, + getJsonFormattedCell, } from 'utils/columns' export const getColumns = ({ @@ -184,15 +185,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { meta } = filteredData[rowIndex] - const formattedMeta = JSON.stringify(meta, undefined, 2) - - return ( - - - {formattedMeta} - - - ) + return getJsonFormattedCell(meta) }, copyText: rowIndex => JSON.stringify(filteredData[rowIndex].meta) || '', }, From b8c401de120813456c1c18e09fbc67c106ddd829 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 12 Aug 2024 12:46:32 +0300 Subject: [PATCH 51/77] Lint fix and cleanup --- src/components/Orders/Orders.columns.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Orders/Orders.columns.js b/src/components/Orders/Orders.columns.js index efee60177..ead7cf159 100644 --- a/src/components/Orders/Orders.columns.js +++ b/src/components/Orders/Orders.columns.js @@ -1,8 +1,6 @@ import React from 'react' import { Cell } from '@blueprintjs/table' -import JSONFormat from 'ui/JSONFormat' -import { formatAmount, fixedFloat } from 'ui/utils' import { getCell, getCellState, @@ -10,6 +8,7 @@ import { getTooltipContent, getJsonFormattedCell, } from 'utils/columns' +import { formatAmount, fixedFloat } from 'ui/utils' export const getColumns = ({ t, From 0c77e740661e14f6d99cf034d06bbc6b64ca0219 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 12 Aug 2024 13:04:26 +0300 Subject: [PATCH 52/77] Actualize column getters import --- src/components/OrderTrades/OrderTrades.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OrderTrades/OrderTrades.js b/src/components/OrderTrades/OrderTrades.js index 1ce05371e..ebac986f0 100644 --- a/src/components/OrderTrades/OrderTrades.js +++ b/src/components/OrderTrades/OrderTrades.js @@ -13,7 +13,7 @@ import { getMappedSymbolsFromUrl } from 'state/symbols/utils' import { SectionHeader, SectionHeaderTitle } from 'ui/SectionHeader' import OrderTradesNoData from './OrderTrades.NoData' -import getColumns from '../Trades/Trades.columns' +import { getColumns } from '../Trades/Trades.columns' const { MENU_ORDER_TRADES } = queryConstants From 1544fb5367214ce55bbe6cb5b15595e863ca9ffe Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 12 Aug 2024 14:28:24 +0300 Subject: [PATCH 53/77] Imprpove positions sections cell states handling --- src/components/Positions/Positions.columns.js | 48 +++++-------------- 1 file changed, 12 insertions(+), 36 deletions(-) diff --git a/src/components/Positions/Positions.columns.js b/src/components/Positions/Positions.columns.js index fae2f3a84..a44f19de0 100644 --- a/src/components/Positions/Positions.columns.js +++ b/src/components/Positions/Positions.columns.js @@ -42,9 +42,7 @@ export default function getColumns(props) { name: 'column.liq-price', width: getColumnWidth('liquidationPrice', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { liquidationPrice } = filteredData[rowIndex] const fixedPrice = fixedFloat(liquidationPrice) return ( @@ -64,9 +62,7 @@ export default function getColumns(props) { name: 'column.pl', width: getColumnWidth('pl', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pl } = filteredData[rowIndex] return ( { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { plPerc } = filteredData[rowIndex] return ( { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { collateral } = filteredData[rowIndex] const fixedCollateral = fixedFloat(collateral) return ( @@ -134,9 +126,7 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('meta', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { meta = '' } = filteredData[rowIndex] const formattedMeta = JSON.stringify(meta, undefined, 2) @@ -182,9 +172,7 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('pair', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pair } = filteredData[rowIndex] return ( @@ -199,9 +187,7 @@ export default function getColumns(props) { name: 'column.amount', width: getColumnWidth('amount', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amount } = filteredData[rowIndex] return ( { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { basePrice } = filteredData[rowIndex] const fixedPrice = fixedFloat(basePrice) return ( @@ -243,9 +227,7 @@ export default function getColumns(props) { name: 'column.fundingCost', width: getColumnWidth('marginFunding', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { marginFunding } = filteredData[rowIndex] const fixedSwap = fixedFloat(marginFunding) return ( @@ -266,9 +248,7 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('marginFundingType', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const swapType = showType(filteredData[rowIndex]) return ( @@ -284,9 +264,7 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('status', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { status } = filteredData[rowIndex] return ( @@ -302,9 +280,7 @@ export default function getColumns(props) { nameStr: `${t('column.updated')} (${timeOffset})`, width: getColumnWidth('mtsUpdate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) return ( From 63df722d14f0903cce176aeb9a121ac3a69d1a9f Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 12 Aug 2024 14:42:02 +0300 Subject: [PATCH 54/77] Improve positions active cells configs --- src/components/Positions/Positions.columns.js | 32 ++++--------------- 1 file changed, 6 insertions(+), 26 deletions(-) diff --git a/src/components/Positions/Positions.columns.js b/src/components/Positions/Positions.columns.js index a44f19de0..df424be06 100644 --- a/src/components/Positions/Positions.columns.js +++ b/src/components/Positions/Positions.columns.js @@ -6,7 +6,9 @@ import { Cell } from '@blueprintjs/table' import queryConstants from 'state/query/constants' import JSONFormat from 'ui/JSONFormat' import { formatAmount, fixedFloat } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { + getCell, getCellState, getColumnWidth, getTooltipContent, +} from 'utils/columns' const { MENU_POSITIONS_ACTIVE, MENU_POSITIONS_AUDIT } = queryConstants @@ -44,15 +46,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { liquidationPrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(liquidationPrice) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(liquidationPrice), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].liquidationPrice), @@ -64,14 +58,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pl } = filteredData[rowIndex] - return ( - - {formatAmount(pl)} - - ) + return getCell(formatAmount(pl), t, fixedFloat(pl)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].pl), @@ -83,14 +70,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { plPerc } = filteredData[rowIndex] - return ( - - {formatAmount(plPerc)} - - ) + return getCell(formatAmount(plPerc), t, fixedFloat(plPerc)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].plPerc), From f62eda2862c8bceacaf450ac0cbb06c6c2bcad34 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 12 Aug 2024 14:44:50 +0300 Subject: [PATCH 55/77] Optimize collateral meta col getters --- src/components/Positions/Positions.columns.js | 26 +++++-------------- 1 file changed, 7 insertions(+), 19 deletions(-) diff --git a/src/components/Positions/Positions.columns.js b/src/components/Positions/Positions.columns.js index df424be06..ec04f0d6a 100644 --- a/src/components/Positions/Positions.columns.js +++ b/src/components/Positions/Positions.columns.js @@ -7,7 +7,11 @@ import queryConstants from 'state/query/constants' import JSONFormat from 'ui/JSONFormat' import { formatAmount, fixedFloat } from 'ui/utils' import { - getCell, getCellState, getColumnWidth, getTooltipContent, + getCell, + getCellState, + getColumnWidth, + getTooltipContent, + getJsonFormattedCell, } from 'utils/columns' const { MENU_POSITIONS_ACTIVE, MENU_POSITIONS_AUDIT } = queryConstants @@ -87,15 +91,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { collateral } = filteredData[rowIndex] - const fixedCollateral = fixedFloat(collateral) - return ( - - {fixedCollateral} - - ) + return getCell(fixedFloat(collateral), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].collateral), @@ -108,15 +104,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { meta = '' } = filteredData[rowIndex] - const formattedMeta = JSON.stringify(meta, undefined, 2) - - return ( - - - {formattedMeta} - - - ) + return getJsonFormattedCell(meta) }, copyText: rowIndex => JSON.stringify(filteredData[rowIndex].meta) || '', }, From 074b9ab8656d943b95a042a593dc0dfef4db6529 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 12 Aug 2024 14:51:18 +0300 Subject: [PATCH 56/77] Rework and optimize positions cells gneneration flow --- src/components/Positions/Positions.columns.js | 54 +++---------------- 1 file changed, 7 insertions(+), 47 deletions(-) diff --git a/src/components/Positions/Positions.columns.js b/src/components/Positions/Positions.columns.js index ec04f0d6a..990b4c4d7 100644 --- a/src/components/Positions/Positions.columns.js +++ b/src/components/Positions/Positions.columns.js @@ -4,7 +4,6 @@ import _endsWith from 'lodash/endsWith' import { Cell } from '@blueprintjs/table' import queryConstants from 'state/query/constants' -import JSONFormat from 'ui/JSONFormat' import { formatAmount, fixedFloat } from 'ui/utils' import { getCell, @@ -142,11 +141,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pair } = filteredData[rowIndex] - return ( - - {pair} - - ) + return getCell(pair, t) }, copyText: rowIndex => filteredData[rowIndex].pair, }, @@ -157,14 +152,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amount } = filteredData[rowIndex] - return ( - - {formatAmount(amount)} - - ) + return getCell(formatAmount(amount), t, fixedFloat(amount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), @@ -176,15 +164,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { basePrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(basePrice) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(basePrice), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].basePrice), @@ -197,15 +177,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { marginFunding } = filteredData[rowIndex] - const fixedSwap = fixedFloat(marginFunding) - return ( - - {fixedSwap} - - ) + return getCell(fixedFloat(marginFunding), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].marginFunding), @@ -218,11 +190,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const swapType = showType(filteredData[rowIndex]) - return ( - - {swapType} - - ) + return getCell(swapType, t) }, copyText: rowIndex => showType(filteredData[rowIndex]), }, @@ -234,11 +202,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { status } = filteredData[rowIndex] - return ( - - {status} - - ) + return getCell(status, t) }, copyText: rowIndex => filteredData[rowIndex].status, }, @@ -250,11 +214,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), }, From c95e25469ca22199f167b50aba063283d7b7f5a1 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 13 Aug 2024 13:14:30 +0300 Subject: [PATCH 57/77] Implemented unified getActionCell utility --- src/utils/columns.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/utils/columns.js b/src/utils/columns.js index 819e2d3a3..ba50714a0 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -296,6 +296,22 @@ export const getFeeCell = (fee, feeCurrency, t, tooltip) => { ) } +export const getActionCell = (content, action, t, tooltip) => { + const tooltipContent = getTooltipContent(tooltip || content, t) + return ( + + <> + + {t('column.show')} + + + + ) +} + export const getRowsConfig = (isLoading, isNoData, numRows = 0) => { if (isLoading) return 5 if (isNoData) return 1 @@ -743,5 +759,6 @@ export default { getFeeCell, getLinkCell, getCellState, + getActionCell, getJsonFormattedCell, } From 7a5d6fabb482be1ad211815287f83b6821901f4f Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 13 Aug 2024 13:16:23 +0300 Subject: [PATCH 58/77] Optimize movements more info col getter --- src/components/Movements/Movements.columns.js | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/src/components/Movements/Movements.columns.js b/src/components/Movements/Movements.columns.js index ac0f3d8f5..ba48f932e 100644 --- a/src/components/Movements/Movements.columns.js +++ b/src/components/Movements/Movements.columns.js @@ -7,6 +7,7 @@ import { getCell, getFeeCell, getCellState, + getActionCell, getColumnWidth, } from 'utils/columns' import { prepareCurrency } from 'state/symbols/utils' @@ -29,22 +30,10 @@ const getColumns = ({ className: 'align-left', width: getColumnWidth('moreDetails', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] - return ( - - <> - onDetailsClick(e, { id })} - > - {t('column.show')} - - - - ) + const cellAction = e => onDetailsClick(e, { id }) + return getActionCell(t('column.show'), cellAction, t, t('column.moreDetails')) }, copyText: rowIndex => filteredData[rowIndex].id, }] : []), From ae243a1522e009bcaab3b7bfea9ee72d00429bb7 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 13 Aug 2024 13:23:14 +0300 Subject: [PATCH 59/77] Fix action cell content providing --- src/utils/columns.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index ba50714a0..4e5b43cfe 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -305,7 +305,7 @@ export const getActionCell = (content, action, t, tooltip) => { href='#' onClick={action} > - {t('column.show')} + {content} From 3d8f39ee51823c720597a3e7419b04d0aa88ba7a Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 13 Aug 2024 13:28:11 +0300 Subject: [PATCH 60/77] Add action cell value providing --- src/utils/columns.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils/columns.js b/src/utils/columns.js index 4e5b43cfe..226728481 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -303,6 +303,7 @@ export const getActionCell = (content, action, t, tooltip) => { <> {content} From f3164fb519fc04136d1960cb14a1b6835f1dd507 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 13 Aug 2024 13:29:45 +0300 Subject: [PATCH 61/77] Enhance pos id generation flow, cleanup --- src/components/Positions/Positions.columns.js | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/src/components/Positions/Positions.columns.js b/src/components/Positions/Positions.columns.js index 990b4c4d7..fb774fcd4 100644 --- a/src/components/Positions/Positions.columns.js +++ b/src/components/Positions/Positions.columns.js @@ -1,15 +1,12 @@ -import React from 'react' import _endsWith from 'lodash/endsWith' -import { Cell } from '@blueprintjs/table' - import queryConstants from 'state/query/constants' import { formatAmount, fixedFloat } from 'ui/utils' import { getCell, getCellState, + getActionCell, getColumnWidth, - getTooltipContent, getJsonFormattedCell, } from 'utils/columns' @@ -117,19 +114,9 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('id', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] - /* eslint-disable jsx-a11y/anchor-is-valid */ - return ( - - <> - {id} - - - ) - /* eslint-enable jsx-a11y/anchor-is-valid */ + return getActionCell(id, onIdClick, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, From f007dc12be9b1d86a4014fe0bdab442727654247 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 13 Aug 2024 13:40:56 +0300 Subject: [PATCH 62/77] Rework and optimize orders id column getter --- src/components/Orders/Orders.columns.js | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/src/components/Orders/Orders.columns.js b/src/components/Orders/Orders.columns.js index ead7cf159..07874a0e5 100644 --- a/src/components/Orders/Orders.columns.js +++ b/src/components/Orders/Orders.columns.js @@ -4,6 +4,7 @@ import { Cell } from '@blueprintjs/table' import { getCell, getCellState, + getActionCell, getColumnWidth, getTooltipContent, getJsonFormattedCell, @@ -26,21 +27,10 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('id', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id, pair, amountExecuted } = filteredData[rowIndex] - /* eslint-disable jsx-a11y/anchor-is-valid */ - return ( - - <> - {amountExecuted - ? onIdClick(e, { id, pair })}>{id} - : id} - - - ) - /* eslint-enable jsx-a11y/anchor-is-valid */ + const cellAction = e => onIdClick(e, { id, pair }) + return amountExecuted ? getActionCell(id, cellAction, t) : getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, From 15f3209586cc8c41f7d844f583912ba5e3f4b6f6 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 13 Aug 2024 13:41:47 +0300 Subject: [PATCH 63/77] Cleanup --- src/components/Orders/Orders.columns.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/Orders/Orders.columns.js b/src/components/Orders/Orders.columns.js index 07874a0e5..3078a9d3a 100644 --- a/src/components/Orders/Orders.columns.js +++ b/src/components/Orders/Orders.columns.js @@ -1,12 +1,8 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { getCell, getCellState, getActionCell, getColumnWidth, - getTooltipContent, getJsonFormattedCell, } from 'utils/columns' import { formatAmount, fixedFloat } from 'ui/utils' From 2b07f8f7736cef89c0c1e3a1d76bb82be1d17e55 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Thu, 15 Aug 2024 14:42:28 +0300 Subject: [PATCH 64/77] Lint fix --- src/components/Movements/Movements.columns.js | 2 +- src/components/Orders/Orders.columns.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Movements/Movements.columns.js b/src/components/Movements/Movements.columns.js index ba48f932e..caee3fd20 100644 --- a/src/components/Movements/Movements.columns.js +++ b/src/components/Movements/Movements.columns.js @@ -32,7 +32,7 @@ const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] - const cellAction = e => onDetailsClick(e, { id }) + const cellAction = (e) => onDetailsClick(e, { id }) return getActionCell(t('column.show'), cellAction, t, t('column.moreDetails')) }, copyText: rowIndex => filteredData[rowIndex].id, diff --git a/src/components/Orders/Orders.columns.js b/src/components/Orders/Orders.columns.js index 3078a9d3a..62c508cec 100644 --- a/src/components/Orders/Orders.columns.js +++ b/src/components/Orders/Orders.columns.js @@ -25,7 +25,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id, pair, amountExecuted } = filteredData[rowIndex] - const cellAction = e => onIdClick(e, { id, pair }) + const cellAction = (e) => onIdClick(e, { id, pair }) return amountExecuted ? getActionCell(id, cellAction, t) : getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, From 4a8777806fa78717abeab70a1e1d586d8207e4d8 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 14 Aug 2024 12:26:10 +0300 Subject: [PATCH 65/77] Actualize prop-types and improve linting --- src/ui/CandlesTimeframe/CandlesTimeframe.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/ui/CandlesTimeframe/CandlesTimeframe.js b/src/ui/CandlesTimeframe/CandlesTimeframe.js index b54016a1f..acf808f00 100644 --- a/src/ui/CandlesTimeframe/CandlesTimeframe.js +++ b/src/ui/CandlesTimeframe/CandlesTimeframe.js @@ -1,9 +1,9 @@ import React from 'react' +import PropTypes from 'prop-types' import _map from 'lodash/map' import Select from 'ui/Select' -import { propTypes, defaultProps } from './CandlesTimeframe.props' import TIMEFRAMES from './var' const CandlesTimeframe = (props) => { @@ -21,7 +21,9 @@ const CandlesTimeframe = (props) => { ) } -CandlesTimeframe.propTypes = propTypes -CandlesTimeframe.defaultProps = defaultProps +CandlesTimeframe.propTypes = { + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, +} export default CandlesTimeframe From e369950f3075e2048b82ad3f49384ab32ab14b38 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 14 Aug 2024 12:27:26 +0300 Subject: [PATCH 66/77] Optimize export --- src/ui/CandlesTimeframe/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/ui/CandlesTimeframe/index.js b/src/ui/CandlesTimeframe/index.js index 787ee5175..d211d0382 100644 --- a/src/ui/CandlesTimeframe/index.js +++ b/src/ui/CandlesTimeframe/index.js @@ -1,3 +1 @@ -import CandlesTimeframe from './CandlesTimeframe' - -export default CandlesTimeframe +export { default } from './CandlesTimeframe' From 861e7cb3bef8da9b57ce210da4e0e7d7362d8213 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 14 Aug 2024 12:27:54 +0300 Subject: [PATCH 67/77] Redundant code cleanup --- src/ui/CandlesTimeframe/CandlesTimeframe.props.js | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 src/ui/CandlesTimeframe/CandlesTimeframe.props.js diff --git a/src/ui/CandlesTimeframe/CandlesTimeframe.props.js b/src/ui/CandlesTimeframe/CandlesTimeframe.props.js deleted file mode 100644 index 51c44c5f8..000000000 --- a/src/ui/CandlesTimeframe/CandlesTimeframe.props.js +++ /dev/null @@ -1,11 +0,0 @@ -import PropTypes from 'prop-types' - -export const propTypes = { - value: PropTypes.string.isRequired, - className: PropTypes.string, - onChange: PropTypes.func.isRequired, -} - -export const defaultProps = { - className: '', -} From 9921c2537414b3fc8501223bed2bb1905921a289 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 14 Aug 2024 12:33:24 +0300 Subject: [PATCH 68/77] Improve props decomposition and lint fixes --- src/ui/CandlesTimeframe/CandlesTimeframe.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/ui/CandlesTimeframe/CandlesTimeframe.js b/src/ui/CandlesTimeframe/CandlesTimeframe.js index acf808f00..61994f102 100644 --- a/src/ui/CandlesTimeframe/CandlesTimeframe.js +++ b/src/ui/CandlesTimeframe/CandlesTimeframe.js @@ -6,17 +6,16 @@ import Select from 'ui/Select' import TIMEFRAMES from './var' -const CandlesTimeframe = (props) => { - const { value, onChange } = props +const CandlesTimeframe = ({ value, onChange }) => { const items = _map(TIMEFRAMES, timeframe => timeframe) return ( - ) -} +const CandlesTimeframe = ({ value, onChange }) => ( +