Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(improvements) Funding sections #819

Merged
merged 11 commits into from
Jun 12, 2024
Merged

(improvements) Funding sections #819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b14ccb9
Merge pull request #814 from bitfinexcom/staging
prdn May 8, 2024
07072ce
Implement unified cell getters utility
alexstotsky May 14, 2024
1112761
Implement cell states and tooltips handling inside reusable cell getter
alexstotsky May 20, 2024
9c0887c
Improve cell generation handling flow
alexstotsky May 20, 2024
4182c0a
Refactor and optimize spot columns configuration getters
alexstotsky May 20, 2024
2888065
Minor cols getter improvement
alexstotsky May 20, 2024
35fdceb
Redundant timestamp formatting cleanup
alexstotsky May 21, 2024
9b7ecc5
Extend tooltip content handling flow
alexstotsky May 27, 2024
a513801
Rework and optimize funding credit history cols configs
alexstotsky May 27, 2024
c42d20a
Rework and optimize funding loans cols configs
alexstotsky May 27, 2024
5541591
Rework and optimize funding bids&offers cols configs
alexstotsky May 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 25 additions & 109 deletions src/components/FundingCreditHistory/FundingCreditHistory.columns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 (
<Cell tooltip={getTooltipContent(id, t)}>
{id}
</Cell>
)
return getCell(id, t)
},
copyText: rowIndex => filteredData[rowIndex].id,
},
Expand All @@ -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 (
<Cell tooltip={getTooltipContent(symbol, t)}>
{symbol}
</Cell>
)
return getCell(symbol, t)
},
copyText: rowIndex => filteredData[rowIndex].symbol,
},
Expand All @@ -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 (
<Cell tooltip={getTooltipContent(formattedSide, t)}>
{formatColor(formattedSide, getSideColor(side))}
</Cell>
)
return getCell(formatColor(formattedSide, getSideColor(side)), t, formattedSide)
},
copyText: rowIndex => t(`fcredit.side.${getSideMsg(filteredData[rowIndex].side)}`),
},
Expand All @@ -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 (
<Cell
className='bitfinex-text-align-right'
tooltip={getTooltipContent(fixedFloat(amount), t)}
>
{formatAmount(amount)}
</Cell>
)
return getCell(formatAmount(amount), t, fixedFloat(amount))
},
isNumericValue: true,
copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount),
Expand All @@ -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 (
<Cell tooltip={getTooltipContent(status, t)}>
{status}
</Cell>
)
return getCell(status, t)
},
copyText: rowIndex => filteredData[rowIndex].status,
},
Expand All @@ -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 (
<Cell tooltip={getTooltipContent(type, t)}>
{type}
</Cell>
)
return getCell(type, t)
},
copyText: rowIndex => filteredData[rowIndex].type,
},
Expand All @@ -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 (
<Cell
className='bitfinex-text-align-right'
tooltip={getTooltipContent(rate, t)}
>
{fixedFloat(rate)}
</Cell>
)
return getCell(fixedFloat(rate), t)
},
isNumericValue: true,
copyText: rowIndex => fixedFloat(filteredData[rowIndex].rate),
Expand All @@ -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 (
<Cell
className='bitfinex-text-align-right'
tooltip={getTooltipContent(period, t)}
>
{period}
</Cell>
)
return getCell(period, t)
},
copyText: (rowIndex) => {
const days = t('column.days')
Expand All @@ -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 (
<Cell tooltip={getTooltipContent(timestamp, t)}>
{timestamp}
</Cell>
)
return getCell(timestamp, t)
},
copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsOpening),
},
Expand All @@ -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 (
<Cell tooltip={getTooltipContent(timestamp, t)}>
{timestamp}
</Cell>
)
return getCell(timestamp, t)
},
copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsLastPayout),
},
Expand All @@ -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 (
<Cell tooltip={getTooltipContent(positionPair, t)}>
{positionPair}
</Cell>
)
return getCell(positionPair, t)
},
copyText: rowIndex => filteredData[rowIndex].positionPair,
},
Expand All @@ -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 (
<Cell tooltip={getTooltipContent(timestamp, t)}>
{timestamp}
</Cell>
)
return getCell(timestamp, t)
},
copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate),
},
Expand Down
Loading