From 9b7ecc5c49e2e03cac6b2496678ef00276669b0e Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 27 May 2024 12:43:10 +0300 Subject: [PATCH 1/4] Extend tooltip content handling flow --- src/utils/columns.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index 780f5c91a..b6bd1fcdb 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -235,8 +235,8 @@ export const getCellState = (isLoading, isNoData) => { return null } -export const getCell = (content, t) => { - const tooltipContent = getTooltipContent(content, t) +export const getCell = (content, t, tooltip) => { + const tooltipContent = getTooltipContent(tooltip || content, t) return ( {content} From a513801dde54cbba0a5ef9186e8a6f277aacb08a Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 27 May 2024 12:57:53 +0300 Subject: [PATCH 2/4] Rework and optimize funding credit history cols configs --- .../FundingCreditHistory.columns.js | 134 ++++-------------- 1 file changed, 25 insertions(+), 109 deletions(-) diff --git a/src/components/FundingCreditHistory/FundingCreditHistory.columns.js b/src/components/FundingCreditHistory/FundingCreditHistory.columns.js index 163e2a607..06b3c299a 100644 --- a/src/components/FundingCreditHistory/FundingCreditHistory.columns.js +++ b/src/components/FundingCreditHistory/FundingCreditHistory.columns.js @@ -1,9 +1,6 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { getSideMsg, getSideColor } from 'state/utils' import { formatAmount, formatColor, fixedFloat } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { getCell, getCellState, getColumnWidth } from 'utils/columns' export const getColumns = ({ t, @@ -20,15 +17,9 @@ 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 ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -38,15 +29,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('symbol', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { symbol } = filteredData[rowIndex] - return ( - - {symbol} - - ) + return getCell(symbol, t) }, copyText: rowIndex => filteredData[rowIndex].symbol, }, @@ -56,16 +41,10 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('side', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { side } = filteredData[rowIndex] const formattedSide = t(`fcredit.side.${getSideMsg(side)}`) - return ( - - {formatColor(formattedSide, getSideColor(side))} - - ) + return getCell(formatColor(formattedSide, getSideColor(side)), t, formattedSide) }, copyText: rowIndex => t(`fcredit.side.${getSideMsg(filteredData[rowIndex].side)}`), }, @@ -74,18 +53,9 @@ 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 } = filteredData[rowIndex] - return ( - - {formatAmount(amount)} - - ) + return getCell(formatAmount(amount), t, fixedFloat(amount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), @@ -96,15 +66,9 @@ 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 ( - - {status} - - ) + return getCell(status, t) }, copyText: rowIndex => filteredData[rowIndex].status, }, @@ -114,15 +78,9 @@ 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 ( - - {type} - - ) + return getCell(type, t) }, copyText: rowIndex => filteredData[rowIndex].type, }, @@ -131,18 +89,9 @@ export const getColumns = ({ 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 ( - - {fixedFloat(rate)} - - ) + return getCell(fixedFloat(rate), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].rate), @@ -153,18 +102,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('period', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + 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') @@ -177,15 +117,9 @@ export const getColumns = ({ nameStr: `${t('column.opened')} (${timeOffset})`, width: getColumnWidth('mtsOpening', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsOpening) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsOpening), }, @@ -195,15 +129,9 @@ export const getColumns = ({ nameStr: `${t('column.lastpayout')} (${timeOffset})`, width: getColumnWidth('mtsLastPayout', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsLastPayout) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsLastPayout), }, @@ -213,15 +141,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('positionPair', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { positionPair } = filteredData[rowIndex] - return ( - - {positionPair} - - ) + return getCell(positionPair, t) }, copyText: rowIndex => filteredData[rowIndex].positionPair, }, @@ -231,15 +153,9 @@ export const getColumns = ({ nameStr: `${t('column.date')} (${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 ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), }, From c42d20a4eb89dbce3e24193e3f455273be7a8b57 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 27 May 2024 13:54:32 +0300 Subject: [PATCH 3/4] Rework and optimize funding loans cols configs --- .../FundingLoanHistory.columns.js | 121 ++++-------------- 1 file changed, 22 insertions(+), 99 deletions(-) diff --git a/src/components/FundingLoanHistory/FundingLoanHistory.columns.js b/src/components/FundingLoanHistory/FundingLoanHistory.columns.js index a7ac073a0..38f752918 100644 --- a/src/components/FundingLoanHistory/FundingLoanHistory.columns.js +++ b/src/components/FundingLoanHistory/FundingLoanHistory.columns.js @@ -1,9 +1,6 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { getSideMsg, getSideColor } from 'state/utils' import { formatAmount, formatColor, fixedFloat } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { getCell, getCellState, getColumnWidth } from 'utils/columns' export const getColumns = ({ t, @@ -20,15 +17,9 @@ 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 ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -38,15 +29,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('symbol', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { symbol } = filteredData[rowIndex] - return ( - - {symbol} - - ) + return getCell(symbol, t) }, copyText: rowIndex => filteredData[rowIndex].symbol, }, @@ -56,16 +41,10 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('side', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { side } = filteredData[rowIndex] const formattedSide = t(`floan.side.${getSideMsg(side)}`) - return ( - - {formatColor(formattedSide, getSideColor(side))} - - ) + return getCell(formatColor(formattedSide, getSideColor(side)), t, formattedSide) }, copyText: rowIndex => t(`floan.side.${getSideMsg(filteredData[rowIndex].side)}`), }, @@ -74,18 +53,9 @@ 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 } = filteredData[rowIndex] - return ( - - {formatAmount(amount)} - - ) + return getCell(formatAmount(amount), t, fixedFloat(amount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), @@ -96,15 +66,9 @@ 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 ( - - {status} - - ) + return getCell(status, t) }, copyText: rowIndex => filteredData[rowIndex].status, }, @@ -114,15 +78,9 @@ 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 ( - - {type} - - ) + return getCell(type, t) }, copyText: rowIndex => filteredData[rowIndex].type, }, @@ -131,19 +89,9 @@ export const getColumns = ({ 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] - const fixedRate = fixedFloat(rate) - return ( - - {fixedRate} - - ) + return getCell(fixedFloat(rate), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].rate), @@ -154,18 +102,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('period', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const period = `${filteredData[rowIndex].period} ${t('column.days')}` - return ( - - {period} - - ) + return getCell(period, t) }, copyText: rowIndex => `${filteredData[rowIndex].period} ${t('column.days')}`, }, @@ -179,11 +118,7 @@ export const getColumns = ({ return getCellState(isLoading, isNoData) } const timestamp = getFullTime(filteredData[rowIndex].mtsOpening) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsOpening), }, @@ -193,15 +128,9 @@ export const getColumns = ({ nameStr: `${t('column.closed')} (${timeOffset})`, width: getColumnWidth('mtsLastPayout', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsLastPayout) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsLastPayout), }, @@ -211,15 +140,9 @@ export const getColumns = ({ nameStr: `${t('column.date')} (${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 ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), }, From 55415910af83b1cf651e083e775a87ba818f7e2d Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 27 May 2024 14:11:50 +0300 Subject: [PATCH 4/4] Rework and optimize funding bids&offers cols configs --- .../FundingOfferHistory.columns.js | 109 +++--------------- 1 file changed, 19 insertions(+), 90 deletions(-) diff --git a/src/components/FundingOfferHistory/FundingOfferHistory.columns.js b/src/components/FundingOfferHistory/FundingOfferHistory.columns.js index 11ba1fa12..32d13d1f8 100644 --- a/src/components/FundingOfferHistory/FundingOfferHistory.columns.js +++ b/src/components/FundingOfferHistory/FundingOfferHistory.columns.js @@ -1,8 +1,5 @@ -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 } from 'utils/columns' export const getColumns = ({ t, @@ -19,15 +16,9 @@ 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 ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -37,15 +28,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('symbol', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { symbol } = filteredData[rowIndex] - return ( - - {symbol} - - ) + return getCell(symbol, t) }, copyText: rowIndex => filteredData[rowIndex].symbol, }, @@ -54,19 +39,9 @@ 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 ( - - {fixedAmount} - - ) + return getCell(formatAmount(amountOrig), t, fixedFloat(amountOrig)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amountOrig), @@ -76,18 +51,9 @@ 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 ( - - {formatAmount(amountExecuted)} - - ) + return getCell(formatAmount(amountExecuted), t, fixedFloat(amountExecuted)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amountExecuted), @@ -98,15 +64,9 @@ 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 ( - - {type} - - ) + return getCell(type, t) }, copyText: rowIndex => filteredData[rowIndex].type, }, @@ -116,15 +76,9 @@ 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 ( - - {status} - - ) + return getCell(status, t) }, copyText: rowIndex => filteredData[rowIndex].status, }, @@ -133,19 +87,9 @@ export const getColumns = ({ 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] - const fixedRate = fixedFloat(rate) - return ( - - {fixedRate} - - ) + return getCell(fixedFloat(rate), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].rate), @@ -156,18 +100,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('period', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + 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') @@ -180,15 +115,9 @@ export const getColumns = ({ nameStr: `${t('column.date')} (${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 ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), },