From ebc4a64678e3f374f1ad155984a6d7cb1cab9439 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Thu, 8 Aug 2024 14:11:41 +0300 Subject: [PATCH 01/32] 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 02/32] 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 03/32] 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 04/32] 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 05/32] 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 06/32] 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 07/32] 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 08/32] 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 09/32] 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 10/32] 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 11/32] 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 12/32] 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 13/32] 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 14/32] 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 15/32] 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 16/32] 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 17/32] 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 18/32] 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 19/32] 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 20/32] 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 21/32] 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 22/32] 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 23/32] 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 24/32] 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 25/32] 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 26/32] 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 27/32] 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 28/32] 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 29/32] 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 30/32] 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 31/32] 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 32/32] 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,