From 02acd3f0876e987c76d8c7e68636a152c955487c Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 10 Jun 2024 13:14:27 +0300 Subject: [PATCH 01/28] Improve pub trades states handling --- .../PublicTrades/PublicTrades.columns.js | 24 +++++-------------- 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/src/components/PublicTrades/PublicTrades.columns.js b/src/components/PublicTrades/PublicTrades.columns.js index ceb9f0aa2..03b9ab168 100644 --- a/src/components/PublicTrades/PublicTrades.columns.js +++ b/src/components/PublicTrades/PublicTrades.columns.js @@ -24,9 +24,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 ( @@ -42,9 +40,7 @@ export default function getColumns(props) { nameStr: `${t('column.time')} (${timeOffset})`, width: getColumnWidth('mts', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mts) return ( @@ -60,9 +56,7 @@ export default function getColumns(props) { 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, amount } = filteredData[rowIndex] const classes = amountStyle(amount) return ( @@ -82,9 +76,7 @@ export default function getColumns(props) { name: 'column.price', width: getColumnWidth('price', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { price, amount } = filteredData[rowIndex] const color = (amount > 0) ? 'green' @@ -106,9 +98,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] const fixedAmount = fixedFloat(amount) return ( @@ -129,9 +119,7 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('pair', columnsWidth), renderer: () => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const formattedCurrentPair = formatPair(targetPair) return ( From 669cb18e6bbdf3f1f38c0d8f881d81f2c5212595 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 10 Jun 2024 13:30:58 +0300 Subject: [PATCH 02/28] Implement unified type formatter util --- src/ui/utils.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/ui/utils.js b/src/ui/utils.js index 02ffa45ef..cf6d2a7f5 100644 --- a/src/ui/utils.js +++ b/src/ui/utils.js @@ -10,6 +10,18 @@ export const amountStyle = (amount) => { }) } +export const formatType = (type, amount) => { + const classes = amountStyle(amount) + return ( + /* Fragment fixes blueprint's parentCellHeight warnings */ + <> + + {type} + + + ) +} + export const insertIf = (condition, ...elements) => (condition ? elements : []) export const filterSelectorItem = (query, item) => item.toLowerCase().indexOf(query.toLowerCase()) >= 0 From 6223ae8bd5612716d75bf59c502edbd2efd2e622 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 10 Jun 2024 13:32:01 +0300 Subject: [PATCH 03/28] Optimize type foramtting in pub trades --- .../PublicTrades/PublicTrades.columns.js | 26 ++++++------------- 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/src/components/PublicTrades/PublicTrades.columns.js b/src/components/PublicTrades/PublicTrades.columns.js index 03b9ab168..ce9491267 100644 --- a/src/components/PublicTrades/PublicTrades.columns.js +++ b/src/components/PublicTrades/PublicTrades.columns.js @@ -2,8 +2,10 @@ import React from 'react' import { Cell } from '@blueprintjs/table' import { formatPair } from 'state/symbols/utils' -import { formatAmount, fixedFloat, amountStyle } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { formatAmount, fixedFloat, formatType } from 'ui/utils' +import { + getCell, getCellState, getColumnWidth, getTooltipContent, +} from 'utils/columns' export default function getColumns(props) { const { @@ -26,11 +28,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] - return ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -42,11 +40,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mts) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mts), }, @@ -58,14 +52,10 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { type, amount } = filteredData[rowIndex] - const classes = amountStyle(amount) + const formattedType = formatType(type, amount) return ( - <> - - {type} - - + {formattedType} ) }, From 12b2c882adca646ce36004b0cfaf560cf5f4c05b Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 10 Jun 2024 13:33:34 +0300 Subject: [PATCH 04/28] Cleanup --- src/components/PublicTrades/PublicTrades.columns.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/PublicTrades/PublicTrades.columns.js b/src/components/PublicTrades/PublicTrades.columns.js index ce9491267..1f8d0be6a 100644 --- a/src/components/PublicTrades/PublicTrades.columns.js +++ b/src/components/PublicTrades/PublicTrades.columns.js @@ -52,12 +52,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { type, amount } = filteredData[rowIndex] - const formattedType = formatType(type, amount) - return ( - - {formattedType} - - ) + return getCell(formatType(type, amount), t, type) }, copyText: rowIndex => filteredData[rowIndex].type, }, From db6f9f8a25be12d0a71cc983e88c59c4cf337cc6 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 10 Jun 2024 13:39:40 +0300 Subject: [PATCH 05/28] Rework and optimize public trades cols configs --- .../PublicTrades/PublicTrades.columns.js | 31 +++---------------- 1 file changed, 4 insertions(+), 27 deletions(-) diff --git a/src/components/PublicTrades/PublicTrades.columns.js b/src/components/PublicTrades/PublicTrades.columns.js index 1f8d0be6a..7f9225b72 100644 --- a/src/components/PublicTrades/PublicTrades.columns.js +++ b/src/components/PublicTrades/PublicTrades.columns.js @@ -62,18 +62,8 @@ export default function getColumns(props) { width: getColumnWidth('price', columnsWidth), renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { price, amount } = filteredData[rowIndex] - const color = (amount > 0) - ? 'green' - : 'red' - return ( - - {formatAmount(price, { color })} - - ) + const { price } = filteredData[rowIndex] + return getCell(formatAmount(price), t, fixedFloat(price)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].price), @@ -85,15 +75,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amount } = filteredData[rowIndex] - const fixedAmount = fixedFloat(amount) - return ( - - {formatAmount(amount)} - - ) + return getCell(formatAmount(amount), t, fixedFloat(amount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), @@ -105,12 +87,7 @@ export default function getColumns(props) { width: getColumnWidth('pair', columnsWidth), renderer: () => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const formattedCurrentPair = formatPair(targetPair) - return ( - - {formattedCurrentPair} - - ) + return getCell(formatPair(targetPair), t) }, copyText: () => formatPair(targetPair), }, From aba2ea91928f5d5135a9c9125fb807047c9da30f Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 10 Jun 2024 13:40:29 +0300 Subject: [PATCH 06/28] Cleanup --- src/components/PublicTrades/PublicTrades.columns.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/PublicTrades/PublicTrades.columns.js b/src/components/PublicTrades/PublicTrades.columns.js index 7f9225b72..f915ee525 100644 --- a/src/components/PublicTrades/PublicTrades.columns.js +++ b/src/components/PublicTrades/PublicTrades.columns.js @@ -1,11 +1,6 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { formatPair } from 'state/symbols/utils' import { formatAmount, fixedFloat, formatType } from 'ui/utils' -import { - getCell, getCellState, getColumnWidth, getTooltipContent, -} from 'utils/columns' +import { getCell, getCellState, getColumnWidth } from 'utils/columns' export default function getColumns(props) { const { From 01a1fdccbc99466a058b2f6eafa4f45c36652d02 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 10 Jun 2024 13:42:27 +0300 Subject: [PATCH 07/28] Optimize cols getters --- .../PublicTrades/PublicTrades.columns.js | 156 +++++++++--------- 1 file changed, 76 insertions(+), 80 deletions(-) diff --git a/src/components/PublicTrades/PublicTrades.columns.js b/src/components/PublicTrades/PublicTrades.columns.js index f915ee525..7bd6d0016 100644 --- a/src/components/PublicTrades/PublicTrades.columns.js +++ b/src/components/PublicTrades/PublicTrades.columns.js @@ -2,89 +2,85 @@ import { formatPair } from 'state/symbols/utils' import { formatAmount, fixedFloat, formatType } from 'ui/utils' import { getCell, getCellState, getColumnWidth } from 'utils/columns' -export default function getColumns(props) { - const { - t, - isNoData, - isLoading, - targetPair, - 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 getCell(id, t) - }, - copyText: rowIndex => filteredData[rowIndex].id, +export const getColumns = ({ + t, + isNoData, + isLoading, + targetPair, + 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 getCell(id, t) }, - { - id: 'mts', - className: 'align-left', - nameStr: `${t('column.time')} (${timeOffset})`, - width: getColumnWidth('mts', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const timestamp = getFullTime(filteredData[rowIndex].mts) - return getCell(timestamp, t) - }, - copyText: rowIndex => getFullTime(filteredData[rowIndex].mts), + copyText: rowIndex => filteredData[rowIndex].id, + }, + { + id: 'mts', + className: 'align-left', + nameStr: `${t('column.time')} (${timeOffset})`, + width: getColumnWidth('mts', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const timestamp = getFullTime(filteredData[rowIndex].mts) + return getCell(timestamp, t) }, - { - id: 'type', - name: 'column.type', - className: 'align-left', - width: getColumnWidth('type', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { type, amount } = filteredData[rowIndex] - return getCell(formatType(type, amount), t, type) - }, - copyText: rowIndex => filteredData[rowIndex].type, + copyText: rowIndex => getFullTime(filteredData[rowIndex].mts), + }, + { + id: 'type', + name: 'column.type', + className: 'align-left', + width: getColumnWidth('type', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { type, amount } = filteredData[rowIndex] + return getCell(formatType(type, amount), t, type) }, - { - id: 'price', - name: 'column.price', - width: getColumnWidth('price', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { price } = filteredData[rowIndex] - return getCell(formatAmount(price), t, fixedFloat(price)) - }, - isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].price), + copyText: rowIndex => filteredData[rowIndex].type, + }, + { + id: 'price', + name: 'column.price', + width: getColumnWidth('price', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { price } = filteredData[rowIndex] + return getCell(formatAmount(price), t, fixedFloat(price)) }, - { - id: 'amount', - name: 'column.amount', - width: getColumnWidth('amount', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { amount } = filteredData[rowIndex] - return getCell(formatAmount(amount), t, fixedFloat(amount)) - }, - isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), + isNumericValue: true, + copyText: rowIndex => fixedFloat(filteredData[rowIndex].price), + }, + { + id: 'amount', + name: 'column.amount', + width: getColumnWidth('amount', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { amount } = filteredData[rowIndex] + return getCell(formatAmount(amount), t, fixedFloat(amount)) }, - { - id: 'pair', - name: 'column.pair', - className: 'align-left', - width: getColumnWidth('pair', columnsWidth), - renderer: () => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - return getCell(formatPair(targetPair), t) - }, - copyText: () => formatPair(targetPair), + isNumericValue: true, + copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), + }, + { + id: 'pair', + name: 'column.pair', + className: 'align-left', + width: getColumnWidth('pair', columnsWidth), + renderer: () => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + return getCell(formatPair(targetPair), t) }, - ] -} + copyText: () => formatPair(targetPair), + }, +] From 4f39ea433044794d0825de4da5be43d557b5922c Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 10 Jun 2024 13:42:48 +0300 Subject: [PATCH 08/28] Actualize getter import --- src/components/PublicTrades/PublicTrades.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PublicTrades/PublicTrades.js b/src/components/PublicTrades/PublicTrades.js index f036b4e85..c8a383a02 100644 --- a/src/components/PublicTrades/PublicTrades.js +++ b/src/components/PublicTrades/PublicTrades.js @@ -20,7 +20,7 @@ import SyncPrefButton from 'ui/SyncPrefButton' import queryConstants from 'state/query/constants' import { checkInit, checkFetch, setPair } from 'state/utils' -import getColumns from './PublicTrades.columns' +import { getColumns } from './PublicTrades.columns' import { propTypes, defaultProps } from './PublicTrades.props' const TYPE = queryConstants.MENU_PUBLIC_TRADES From 65061bfabecdf477aa51f131b318ca6c3f31f83e Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 10 Jun 2024 14:52:13 +0300 Subject: [PATCH 09/28] Lint fix --- src/ui/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/utils.js b/src/ui/utils.js index cf6d2a7f5..313df0d05 100644 --- a/src/ui/utils.js +++ b/src/ui/utils.js @@ -13,7 +13,7 @@ export const amountStyle = (amount) => { export const formatType = (type, amount) => { const classes = amountStyle(amount) return ( - /* Fragment fixes blueprint's parentCellHeight warnings */ + // Fragment fixes blueprint's parentCellHeight warnings <> {type} From 308e1b6b304ec56c4a8141e4b926b4de17cb5fe5 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 11 Jun 2024 12:51:03 +0300 Subject: [PATCH 10/28] Improve pub funding states handling --- .../PublicFunding/PublicFunding.columns.js | 24 +++++-------------- 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/src/components/PublicFunding/PublicFunding.columns.js b/src/components/PublicFunding/PublicFunding.columns.js index 5172d8cf3..0d71c40d4 100644 --- a/src/components/PublicFunding/PublicFunding.columns.js +++ b/src/components/PublicFunding/PublicFunding.columns.js @@ -23,9 +23,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 ( @@ -41,9 +39,7 @@ export default function getColumns(props) { nameStr: `${t('column.time')} (${timeOffset})`, width: getColumnWidth('mts', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mts) return ( @@ -58,9 +54,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] const fixedAmount = fixedFloat(amount) return ( @@ -80,9 +74,7 @@ export default function getColumns(props) { name: 'column.rateperc', width: getColumnWidth('rate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { rate } = filteredData[rowIndex] return ( { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const period = `${filteredData[rowIndex].period} ${t('column.days')}` return ( { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) return ( {targetSymbol} From 63df8ab0548a5997a11bf6e19248b68a23014358 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 11 Jun 2024 12:58:13 +0300 Subject: [PATCH 11/28] Rework and optimize cell generation flow --- .../PublicFunding/PublicFunding.columns.js | 50 ++++--------------- 1 file changed, 9 insertions(+), 41 deletions(-) diff --git a/src/components/PublicFunding/PublicFunding.columns.js b/src/components/PublicFunding/PublicFunding.columns.js index 0d71c40d4..2873f7189 100644 --- a/src/components/PublicFunding/PublicFunding.columns.js +++ b/src/components/PublicFunding/PublicFunding.columns.js @@ -2,7 +2,9 @@ import React from 'react' import { Cell } from '@blueprintjs/table' import { fixedFloat, formatAmount } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { + getCell, getCellState, getColumnWidth, getTooltipContent, +} from 'utils/columns' export default function getColumns(props) { const { @@ -25,11 +27,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] - return ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -41,11 +39,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mts) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mts), }, @@ -56,15 +50,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amount } = filteredData[rowIndex] - const fixedAmount = fixedFloat(amount) - return ( - - {formatAmount(amount)} - - ) + return getCell(formatAmount(amount), t, fixedFloat(amount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), @@ -76,14 +62,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { rate } = filteredData[rowIndex] - return ( - - {formatAmount(rate, { color: 'red' })} - - ) + return getCell(formatAmount(rate, { color: 'red' }), t, fixedFloat(rate)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].rate), @@ -96,14 +75,7 @@ export default function getColumns(props) { renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const period = `${filteredData[rowIndex].period} ${t('column.days')}` - return ( - - {period} - - ) + return getCell(period, t) }, copyText: (rowIndex) => { const days = t('column.days') @@ -117,11 +89,7 @@ export default function getColumns(props) { width: getColumnWidth('currency', columnsWidth), renderer: () => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) - return ( - - {targetSymbol} - - ) + return getCell(targetSymbol, t) }, copyText: () => targetSymbol, }, From 3a1584646e5f368a05998d2565a0674eb50f4895 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 11 Jun 2024 13:01:19 +0300 Subject: [PATCH 12/28] Improve getCols helper structure and cleanup --- .../PublicFunding/PublicFunding.columns.js | 169 +++++++++--------- 1 file changed, 80 insertions(+), 89 deletions(-) diff --git a/src/components/PublicFunding/PublicFunding.columns.js b/src/components/PublicFunding/PublicFunding.columns.js index 2873f7189..ef1ca4a15 100644 --- a/src/components/PublicFunding/PublicFunding.columns.js +++ b/src/components/PublicFunding/PublicFunding.columns.js @@ -1,97 +1,88 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { fixedFloat, formatAmount } from 'ui/utils' -import { - getCell, getCellState, getColumnWidth, getTooltipContent, -} from 'utils/columns' - -export default function getColumns(props) { - const { - t, - isNoData, - isLoading, - timeOffset, - getFullTime, - filteredData, - targetSymbol, - columnsWidth, - } = props +import { getCell, getCellState, getColumnWidth } from 'utils/columns' - 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 getCell(id, t) - }, - copyText: rowIndex => filteredData[rowIndex].id, +export const getColumns = ({ + t, + isNoData, + isLoading, + timeOffset, + getFullTime, + filteredData, + targetSymbol, + 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 getCell(id, t) + }, + copyText: rowIndex => filteredData[rowIndex].id, + }, + { + id: 'mts', + className: 'align-left', + nameStr: `${t('column.time')} (${timeOffset})`, + width: getColumnWidth('mts', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const timestamp = getFullTime(filteredData[rowIndex].mts) + return getCell(timestamp, t) }, - { - id: 'mts', - className: 'align-left', - nameStr: `${t('column.time')} (${timeOffset})`, - width: getColumnWidth('mts', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const timestamp = getFullTime(filteredData[rowIndex].mts) - return getCell(timestamp, t) - }, - copyText: rowIndex => getFullTime(filteredData[rowIndex].mts), + copyText: rowIndex => getFullTime(filteredData[rowIndex].mts), + }, + { + id: 'amount', + name: 'column.amount', + width: getColumnWidth('amount', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { amount } = filteredData[rowIndex] + return getCell(formatAmount(amount), t, fixedFloat(amount)) }, - { - id: 'amount', - name: 'column.amount', - width: getColumnWidth('amount', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { amount } = filteredData[rowIndex] - return getCell(formatAmount(amount), t, fixedFloat(amount)) - }, - isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), + isNumericValue: true, + copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), + }, + { + id: 'rate', + name: 'column.rateperc', + width: getColumnWidth('rate', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { rate } = filteredData[rowIndex] + return getCell(formatAmount(rate, { color: 'red' }), t, fixedFloat(rate)) }, - { - id: 'rate', - name: 'column.rateperc', - width: getColumnWidth('rate', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { rate } = filteredData[rowIndex] - return getCell(formatAmount(rate, { color: 'red' }), t, fixedFloat(rate)) - }, - isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].rate), + isNumericValue: true, + copyText: rowIndex => fixedFloat(filteredData[rowIndex].rate), + }, + { + id: 'period', + name: 'column.period', + className: 'align-left', + width: getColumnWidth('period', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const period = `${filteredData[rowIndex].period} ${t('column.days')}` + return getCell(period, t) }, - { - id: 'period', - name: 'column.period', - className: 'align-left', - width: getColumnWidth('period', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const period = `${filteredData[rowIndex].period} ${t('column.days')}` - return getCell(period, t) - }, - copyText: (rowIndex) => { - const days = t('column.days') - return `${filteredData[rowIndex].period} ${days}` - }, + copyText: (rowIndex) => { + const days = t('column.days') + return `${filteredData[rowIndex].period} ${days}` }, - { - id: 'currency', - name: 'column.currency', - className: 'align-left', - width: getColumnWidth('currency', columnsWidth), - renderer: () => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - return getCell(targetSymbol, t) - }, - copyText: () => targetSymbol, + }, + { + id: 'currency', + name: 'column.currency', + className: 'align-left', + width: getColumnWidth('currency', columnsWidth), + renderer: () => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + return getCell(targetSymbol, t) }, - ] -} + copyText: () => targetSymbol, + }, +] From e7257cf8c11b3220467989ecfcb21f8ce434817c Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 11 Jun 2024 13:01:36 +0300 Subject: [PATCH 13/28] Actualize import --- src/components/PublicFunding/PublicFunding.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PublicFunding/PublicFunding.js b/src/components/PublicFunding/PublicFunding.js index 054b5e623..e3af7fa1e 100644 --- a/src/components/PublicFunding/PublicFunding.js +++ b/src/components/PublicFunding/PublicFunding.js @@ -21,7 +21,7 @@ import queryConstants from 'state/query/constants' import { getPath } from 'state/query/utils' import { checkInit, checkFetch } from 'state/utils' -import getColumns from './PublicFunding.columns' +import { getColumns } from './PublicFunding.columns' import { propTypes, defaultProps } from './PublicFunding.props' const TYPE = queryConstants.MENU_PUBLIC_FUNDING From b3ece6ec92e409b62fb01818180ce74e7dc4bd41 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 11 Jun 2024 13:26:39 +0300 Subject: [PATCH 14/28] Enhance derivative cols states handling --- .../Derivatives/Derivatives.columns.js | 36 +++++-------------- 1 file changed, 9 insertions(+), 27 deletions(-) diff --git a/src/components/Derivatives/Derivatives.columns.js b/src/components/Derivatives/Derivatives.columns.js index 040d65e2d..4dc8ac02d 100644 --- a/src/components/Derivatives/Derivatives.columns.js +++ b/src/components/Derivatives/Derivatives.columns.js @@ -19,9 +19,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 ( @@ -36,9 +34,7 @@ export const getColumns = ({ name: 'column.priceDeriv', width: getColumnWidth('price', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { price } = filteredData[rowIndex] const fixedPrice = fixedFloat(price) return ( @@ -58,9 +54,7 @@ export const getColumns = ({ name: 'column.priceSpot', width: getColumnWidth('priceSpot', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { priceSpot } = filteredData[rowIndex] const fixedPrice = fixedFloat(priceSpot) return ( @@ -80,9 +74,7 @@ export const getColumns = ({ name: 'column.fundBalance', width: getColumnWidth('fundBal', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { fundBal } = filteredData[rowIndex] const fixedBalance = fixedFloat(fundBal) return ( @@ -102,9 +94,7 @@ export const getColumns = ({ name: 'column.fundingAccrued', width: getColumnWidth('fundingAccrued', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { fundingAccrued } = filteredData[rowIndex] const fixedFunding = fixedFloat(fundingAccrued) return ( @@ -124,9 +114,7 @@ export const getColumns = ({ name: 'column.fundingStep', width: getColumnWidth('fundingStep', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { fundingStep } = filteredData[rowIndex] return ( { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].timestamp) return ( @@ -162,9 +148,7 @@ export const getColumns = ({ name: 'column.clampMin', width: getColumnWidth('clampMin', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { clampMin } = filteredData[rowIndex] return ( { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { clampMax } = filteredData[rowIndex] return ( Date: Tue, 11 Jun 2024 13:33:48 +0300 Subject: [PATCH 15/28] Rework and optimize derivatives cols configs --- .../Derivatives/Derivatives.columns.js | 83 +++---------------- 1 file changed, 12 insertions(+), 71 deletions(-) diff --git a/src/components/Derivatives/Derivatives.columns.js b/src/components/Derivatives/Derivatives.columns.js index 4dc8ac02d..671658fcd 100644 --- a/src/components/Derivatives/Derivatives.columns.js +++ b/src/components/Derivatives/Derivatives.columns.js @@ -2,7 +2,9 @@ import React from 'react' import { Cell } from '@blueprintjs/table' 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, @@ -21,11 +23,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, }, @@ -36,15 +34,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), @@ -56,15 +46,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { priceSpot } = filteredData[rowIndex] - const fixedPrice = fixedFloat(priceSpot) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(priceSpot), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].priceSpot), @@ -76,15 +58,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { fundBal } = filteredData[rowIndex] - const fixedBalance = fixedFloat(fundBal) - return ( - - {fixedBalance} - - ) + return getCell(fixedFloat(fundBal), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].fundBal), @@ -96,15 +70,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { fundingAccrued } = filteredData[rowIndex] - const fixedFunding = fixedFloat(fundingAccrued) - return ( - - {formatAmount(fundingAccrued)} - - ) + return getCell(formatAmount(fundingAccrued), t, fixedFloat(fundingAccrued)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].fundingAccrued), @@ -116,14 +82,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { fundingStep } = filteredData[rowIndex] - return ( - - {fundingStep} - - ) + return getCell(fundingStep, t) }, copyText: rowIndex => filteredData[rowIndex].fundingStep, }, @@ -135,11 +94,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].timestamp) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].timestamp), }, @@ -150,14 +105,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { clampMin } = filteredData[rowIndex] - return ( - - {clampMin} - - ) + return getCell(clampMin, t) }, copyText: rowIndex => filteredData[rowIndex].clampMin, }, @@ -168,14 +116,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { clampMax } = filteredData[rowIndex] - return ( - - {clampMax} - - ) + return getCell(clampMax, t) }, copyText: rowIndex => filteredData[rowIndex].clampMax, }, From af757a9e57b458d9e89a3ea9570daff911bd293a Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 11 Jun 2024 13:34:32 +0300 Subject: [PATCH 16/28] Cleanup --- src/components/Derivatives/Derivatives.columns.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/Derivatives/Derivatives.columns.js b/src/components/Derivatives/Derivatives.columns.js index 671658fcd..f46a2c0fd 100644 --- a/src/components/Derivatives/Derivatives.columns.js +++ b/src/components/Derivatives/Derivatives.columns.js @@ -1,10 +1,5 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { formatAmount, fixedFloat } from 'ui/utils' -import { - getCell, getCellState, getColumnWidth, getTooltipContent, -} from 'utils/columns' +import { getCell, getCellState, getColumnWidth } from 'utils/columns' export const getColumns = ({ t, From 5b8ed09abd9398ed8aead6f5b0c88bb2c7f1c7e7 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 17 Jun 2024 14:08:19 +0300 Subject: [PATCH 17/28] Improve invoices cell states handling --- src/components/Invoices/Invoices.columns.js | 56 ++++++--------------- 1 file changed, 14 insertions(+), 42 deletions(-) diff --git a/src/components/Invoices/Invoices.columns.js b/src/components/Invoices/Invoices.columns.js index 31ed6276a..b45b43ce0 100644 --- a/src/components/Invoices/Invoices.columns.js +++ b/src/components/Invoices/Invoices.columns.js @@ -20,9 +20,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 = ({ 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 ( @@ -60,9 +56,7 @@ export 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 } = filteredData[rowIndex] return ( @@ -78,9 +72,7 @@ export const getColumns = ({ 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 ( @@ -95,9 +87,7 @@ export const getColumns = ({ name: 'column.payCurrencies', width: getColumnWidth('payCurrencies', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { payCurrencies } = filteredData[rowIndex] const formattedPayCurrenciesInfo = JSON.stringify(payCurrencies, undefined, 2) return ( @@ -116,9 +106,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 ( @@ -134,9 +122,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('customerInfo', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { customerInfo } = filteredData[rowIndex] const formattedCustomerInfo = JSON.stringify(customerInfo, undefined, 2) return ( @@ -155,9 +141,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('invoices', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { invoices } = filteredData[rowIndex] const formattedInvoicesInfo = JSON.stringify(invoices, undefined, 2) return ( @@ -176,9 +160,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('payment', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { payment } = filteredData[rowIndex] const formattedPayment = JSON.stringify(payment, undefined, 2) return ( @@ -197,9 +179,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('duration', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { duration } = filteredData[rowIndex] return ( @@ -215,9 +195,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('merchantName', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { merchantName } = filteredData[rowIndex] return ( @@ -233,9 +211,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('redirectUrl', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { redirectUrl } = filteredData[rowIndex] return ( @@ -259,9 +235,7 @@ export const getColumns = ({ nameStr: `${t('column.date')} (${timeOffset})`, width: getColumnWidth('mts', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mts) return ( @@ -277,9 +251,7 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('webhook', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { webhook } = filteredData[rowIndex] return ( From d6b219758816ad075b883d4fb291bd69cf2dd233 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 17 Jun 2024 14:33:16 +0300 Subject: [PATCH 18/28] Rework and enhance invoices regular cells rendering --- src/components/Invoices/Invoices.columns.js | 56 ++++----------------- 1 file changed, 11 insertions(+), 45 deletions(-) diff --git a/src/components/Invoices/Invoices.columns.js b/src/components/Invoices/Invoices.columns.js index b45b43ce0..4fad55595 100644 --- a/src/components/Invoices/Invoices.columns.js +++ b/src/components/Invoices/Invoices.columns.js @@ -3,7 +3,9 @@ import { Cell } from '@blueprintjs/table' import JSONFormat from 'ui/JSONFormat' import { fixedFloat, formatAmount } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { + getCell, getCellState, getColumnWidth, getTooltipContent, +} from 'utils/columns' export const getColumns = ({ t, @@ -22,11 +24,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,15 +35,7 @@ export const getColumns = ({ renderer: (rowIndex) => { 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, `${fixedFloat(amount)} ${currency}`) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), @@ -58,11 +48,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { currency } = filteredData[rowIndex] - return ( - - {currency} - - ) + return getCell(currency, t) }, copyText: rowIndex => filteredData[rowIndex].currency, }, @@ -74,11 +60,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, }, @@ -108,11 +90,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, }, @@ -181,11 +159,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { duration } = filteredData[rowIndex] - return ( - - {duration} - - ) + return getCell(duration, t) }, copyText: rowIndex => filteredData[rowIndex].duration, }, @@ -197,11 +171,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { merchantName } = filteredData[rowIndex] - return ( - - {merchantName} - - ) + return getCell(merchantName, t) }, copyText: rowIndex => filteredData[rowIndex].merchantName, }, @@ -237,11 +207,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mts) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mts), }, From 33103edcdaf3b7312288b782f3d87d83603030ad Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 17 Jun 2024 14:33:58 +0300 Subject: [PATCH 19/28] Cleanup --- src/components/Invoices/Invoices.columns.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Invoices/Invoices.columns.js b/src/components/Invoices/Invoices.columns.js index 4fad55595..f4e9eae11 100644 --- a/src/components/Invoices/Invoices.columns.js +++ b/src/components/Invoices/Invoices.columns.js @@ -3,9 +3,7 @@ import { Cell } from '@blueprintjs/table' import JSONFormat from 'ui/JSONFormat' import { fixedFloat, formatAmount } from 'ui/utils' -import { - getCell, getCellState, getColumnWidth, getTooltipContent, -} from 'utils/columns' +import { getCell, getCellState, getColumnWidth } from 'utils/columns' export const getColumns = ({ t, From 9fbd1f7838f913f468b973b0e656a1113b6c3cf6 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 18 Jun 2024 13:24:12 +0300 Subject: [PATCH 20/28] Improve json formatter styling --- src/ui/JSONFormat/_JSONFormat.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/JSONFormat/_JSONFormat.scss b/src/ui/JSONFormat/_JSONFormat.scss index 92fa01aa6..a5912e5f6 100644 --- a/src/ui/JSONFormat/_JSONFormat.scss +++ b/src/ui/JSONFormat/_JSONFormat.scss @@ -1,5 +1,5 @@ .json-format { - width: #{"max(500px, 40vw);"}; + width: max(fit-content, 500px); overflow: hidden; white-space: pre-wrap; word-break: break-all; From 860e6fc952fe5e2c6934b01d5c1aaca469ae60f3 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 18 Jun 2024 13:35:05 +0300 Subject: [PATCH 21/28] Lint fix --- src/ui/JSONFormat/_JSONFormat.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/JSONFormat/_JSONFormat.scss b/src/ui/JSONFormat/_JSONFormat.scss index a5912e5f6..44ea261c0 100644 --- a/src/ui/JSONFormat/_JSONFormat.scss +++ b/src/ui/JSONFormat/_JSONFormat.scss @@ -1,5 +1,5 @@ .json-format { - width: max(fit-content, 500px); + width: min(100%, 500px); overflow: hidden; white-space: pre-wrap; word-break: break-all; From 055c75dc6f68dc65d409964f8d2d1cda87d2bdc8 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 18 Jun 2024 13:38:55 +0300 Subject: [PATCH 22/28] Adjust popup sizing --- src/ui/JSONFormat/_JSONFormat.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/JSONFormat/_JSONFormat.scss b/src/ui/JSONFormat/_JSONFormat.scss index 44ea261c0..0b16ca493 100644 --- a/src/ui/JSONFormat/_JSONFormat.scss +++ b/src/ui/JSONFormat/_JSONFormat.scss @@ -1,5 +1,5 @@ .json-format { - width: min(100%, 500px); + max-width: 500px; overflow: hidden; white-space: pre-wrap; word-break: break-all; From 29c7dc1a122d03d7b9286a873dc311e0708c686b Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 18 Jun 2024 14:03:56 +0300 Subject: [PATCH 23/28] Implement unified getJsonFormattedCell getter --- src/utils/columns.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/utils/columns.js b/src/utils/columns.js index b6bd1fcdb..d946cf067 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -10,6 +10,7 @@ import _forEach from 'lodash/forEach' import { Cell } from '@blueprintjs/table' import { get, pick, isEqual } from '@bitfinex/lib-js-util-base' +import JSONFormat from 'ui/JSONFormat' import { formatAmount, fixedFloat } from 'ui/utils' import LoadingPlaceholder from 'ui/LoadingPlaceholder' @@ -244,6 +245,17 @@ export const getCell = (content, t, tooltip) => { ) } +export const getJsonFormattedCell = (value) => { + const formattedValue = JSON.stringify(value, undefined, 2) + return ( + + + {formattedValue } + + + ) +} + export const getRowsConfig = (isLoading, isNoData, numRows = 0) => { if (isLoading) return 5 if (isNoData) return 1 From 618112b85f42f230d0f817a89a8772067903f897 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 18 Jun 2024 14:05:55 +0300 Subject: [PATCH 24/28] Rework and optimize json formatted cell configs --- src/components/Invoices/Invoices.columns.js | 41 ++++----------------- 1 file changed, 7 insertions(+), 34 deletions(-) diff --git a/src/components/Invoices/Invoices.columns.js b/src/components/Invoices/Invoices.columns.js index f4e9eae11..e999ed95d 100644 --- a/src/components/Invoices/Invoices.columns.js +++ b/src/components/Invoices/Invoices.columns.js @@ -1,9 +1,10 @@ import React from 'react' import { Cell } from '@blueprintjs/table' -import JSONFormat from 'ui/JSONFormat' import { fixedFloat, formatAmount } from 'ui/utils' -import { getCell, getCellState, getColumnWidth } from 'utils/columns' +import { + getCell, getJsonFormattedCell, getCellState, getColumnWidth, +} from 'utils/columns' export const getColumns = ({ t, @@ -69,14 +70,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { payCurrencies } = filteredData[rowIndex] - const formattedPayCurrenciesInfo = JSON.stringify(payCurrencies, undefined, 2) - return ( - - - {formattedPayCurrenciesInfo} - - - ) + return getJsonFormattedCell(payCurrencies) }, copyText: rowIndex => JSON.stringify(filteredData[rowIndex].payCurrencies, undefined, 2), }, @@ -100,14 +94,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { customerInfo } = filteredData[rowIndex] - const formattedCustomerInfo = JSON.stringify(customerInfo, undefined, 2) - return ( - - - {formattedCustomerInfo} - - - ) + return getJsonFormattedCell(customerInfo) }, copyText: rowIndex => JSON.stringify(filteredData[rowIndex].customerInfo, undefined, 2), }, @@ -119,14 +106,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { invoices } = filteredData[rowIndex] - const formattedInvoicesInfo = JSON.stringify(invoices, undefined, 2) - return ( - - - {formattedInvoicesInfo} - - - ) + return getJsonFormattedCell(invoices) }, copyText: rowIndex => JSON.stringify(filteredData[rowIndex].invoices, undefined, 2), }, @@ -138,14 +118,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { payment } = filteredData[rowIndex] - const formattedPayment = JSON.stringify(payment, undefined, 2) - return ( - - - {formattedPayment} - - - ) + return getJsonFormattedCell(payment) }, copyText: rowIndex => JSON.stringify(filteredData[rowIndex].payment, undefined, 2), }, From f9e5ef620f1728ff38ce41ecbcc9d787e02c3c32 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 18 Jun 2024 14:06:54 +0300 Subject: [PATCH 25/28] Lint fix --- src/components/Invoices/Invoices.columns.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Invoices/Invoices.columns.js b/src/components/Invoices/Invoices.columns.js index e999ed95d..79e43e322 100644 --- a/src/components/Invoices/Invoices.columns.js +++ b/src/components/Invoices/Invoices.columns.js @@ -1,10 +1,13 @@ import React from 'react' import { Cell } from '@blueprintjs/table' -import { fixedFloat, formatAmount } from 'ui/utils' import { - getCell, getJsonFormattedCell, getCellState, getColumnWidth, + getCell, + getCellState, + getColumnWidth, + getJsonFormattedCell, } from 'utils/columns' +import { fixedFloat, formatAmount } from 'ui/utils' export const getColumns = ({ t, From debcb0a8ea655091efee9f17a1ba678676c7a074 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 18 Jun 2024 14:17:43 +0300 Subject: [PATCH 26/28] Implement unified getLinkCell getter --- src/utils/columns.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/utils/columns.js b/src/utils/columns.js index d946cf067..ac451707a 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -256,6 +256,21 @@ export const getJsonFormattedCell = (value) => { ) } +export const getLinkCell = (link) => ( + + <> + + {link} + + + +) + + export const getRowsConfig = (isLoading, isNoData, numRows = 0) => { if (isLoading) return 5 if (isNoData) return 1 From 6863f1e0b80c6f2fc5c7b123cb564984ce4073ce Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 18 Jun 2024 14:19:48 +0300 Subject: [PATCH 27/28] Rework and optimize linked cell configs --- src/components/Invoices/Invoices.columns.js | 29 +++------------------ 1 file changed, 3 insertions(+), 26 deletions(-) diff --git a/src/components/Invoices/Invoices.columns.js b/src/components/Invoices/Invoices.columns.js index 79e43e322..e609efb09 100644 --- a/src/components/Invoices/Invoices.columns.js +++ b/src/components/Invoices/Invoices.columns.js @@ -3,6 +3,7 @@ import { Cell } from '@blueprintjs/table' import { getCell, + getLinkCell, getCellState, getColumnWidth, getJsonFormattedCell, @@ -157,19 +158,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { redirectUrl } = filteredData[rowIndex] - return ( - - <> - - {redirectUrl} - - - - ) + return getLinkCell(redirectUrl) }, copyText: rowIndex => filteredData[rowIndex].redirectUrl, }, @@ -193,19 +182,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { webhook } = filteredData[rowIndex] - return ( - - <> - - {webhook} - - - - ) + return getLinkCell(webhook) }, copyText: rowIndex => filteredData[rowIndex].webhook, }, From 7274a6f4e34b60f95f9fade011cdfcef3590956f Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 18 Jun 2024 14:20:50 +0300 Subject: [PATCH 28/28] Cleanup --- src/components/Invoices/Invoices.columns.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Invoices/Invoices.columns.js b/src/components/Invoices/Invoices.columns.js index e609efb09..1c0d0c1a8 100644 --- a/src/components/Invoices/Invoices.columns.js +++ b/src/components/Invoices/Invoices.columns.js @@ -1,6 +1,3 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { getCell, getLinkCell,