Skip to content

Commit

Permalink
Merge pull request #844 from alexstotsky/improve-my-history-cells-ren…
Browse files Browse the repository at this point in the history 
…dering

(improvements) My history sections
  • Loading branch information
@ezewer
ezewer authored Aug 19, 2024
2 parents a2833c7 + 2b07f8f commit 8fe0e9b
Show file tree
Hide file tree
Showing 7 changed files with 238 additions and 565 deletions.
138 changes: 29 additions & 109 deletions src/components/Movements/Movements.columns.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,14 @@ import { Cell } from '@blueprintjs/table'

import config from 'config'
import Explorer from 'ui/Explorer'
import {
getCell,
getFeeCell,
getCellState,
getActionCell,
getColumnWidth,
} from 'utils/columns'
import { prepareCurrency } from 'state/symbols/utils'
import { getCellState, getColumnWidth } from 'utils/columns'
import { formatAmount, fixedFloat, insertIf } from 'ui/utils'

const getColumns = ({
Expand All @@ -24,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 (
<Cell tooltip={t('column.moreDetails')}>
<>
<a
href='#'
onClick={e => onDetailsClick(e, { id })}
>
{t('column.show')}
</a>
</>
</Cell>
)
const cellAction = (e) => onDetailsClick(e, { id })
return getActionCell(t('column.show'), cellAction, t, t('column.moreDetails'))
},
copyText: rowIndex => filteredData[rowIndex].id,
}] : []),
Expand All @@ -49,15 +43,9 @@ 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={id}>
{id}
</Cell>
)
return getCell(id, t)
},
copyText: rowIndex => filteredData[rowIndex].id,
},
Expand All @@ -67,15 +55,9 @@ 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 (
<Cell tooltip={timestamp}>
{timestamp}
</Cell>
)
return getCell(timestamp, t)
},
copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdated),
},
Expand All @@ -85,16 +67,10 @@ 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 (
<Cell tooltip={preparedCurrency}>
{preparedCurrency}
</Cell>
)
return getCell(preparedCurrency, t)
},
copyText: rowIndex => filteredData[rowIndex].currency,
},
Expand All @@ -104,15 +80,9 @@ 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={status}>
{status}
</Cell>
)
return getCell(status, t)
},
copyText: rowIndex => filteredData[rowIndex].status,
},
Expand All @@ -121,19 +91,9 @@ 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 (
<Cell
className='bitfinex-text-align-right'
tooltip={tooltip}
>
{formatAmount(amount)}
</Cell>
)
return getCell(formatAmount(amount), t, `${fixedFloat(amount)} ${currency}`)
},
isNumericValue: true,
copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount),
Expand All @@ -144,19 +104,9 @@ 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 (
<Cell
className='bitfinex-text-align-right'
tooltip={tooltip}
>
{formatAmount(amountUsd)}
</Cell>
)
return getCell(formatAmount(amountUsd), t, `${fixedFloat(amountUsd)} ${t('column.usd')}`)
},
isNumericValue: true,
copyText: rowIndex => fixedFloat(filteredData[rowIndex].amountUsd),
Expand All @@ -167,25 +117,9 @@ 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 (
<Cell
className='bitfinex-text-align-right'
tooltip={tooltip}
>
<>
{formatAmount(fees)}
{' '}
<span className='bitfinex-show-soft'>
{currency}
</span>
</>
</Cell>
)
return getFeeCell(fees, currency, t, `${fixedFloat(fees)} ${currency}`)
},
isNumericValue: true,
copyText: rowIndex => fixedFloat(filteredData[rowIndex].fees),
Expand All @@ -196,9 +130,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 (
<Cell tooltip={destinationAddress}>
Expand All @@ -218,15 +150,9 @@ 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 (
<Cell tooltip={transactionId}>
{transactionId}
</Cell>
)
return getCell(transactionId, t)
},
copyText: rowIndex => filteredData[rowIndex].transactionId,
},
Expand All @@ -236,15 +162,9 @@ 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 (
<Cell tooltip={note}>
{note}
</Cell>
)
return getCell(note, t)
},
copyText: rowIndex => filteredData[rowIndex].note,
},
Expand Down
2 changes: 1 addition & 1 deletion src/components/OrderTrades/OrderTrades.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Loading

0 comments on commit 8fe0e9b

Please sign in to comment.