diff --git a/package.json b/package.json index af7cc81ad..67c502b79 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bfx-report-ui", - "version": "2.43.0", + "version": "2.43.1", "description": "Report page to overview the user actions in Bitfinex and download related csv files", "repository": { "type": "git", diff --git a/src/components/ChangeLogs/ChangeLogs.columns.js b/src/components/ChangeLogs/ChangeLogs.columns.js index ceb3b619c..ce4a7ade4 100644 --- a/src/components/ChangeLogs/ChangeLogs.columns.js +++ b/src/components/ChangeLogs/ChangeLogs.columns.js @@ -1,8 +1,9 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - -import JSONFormat from 'ui/JSONFormat' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { + getCell, + getCellState, + getColumnWidth, + getJsonFormattedCell, +} from 'utils/columns' export const getColumns = ({ t, @@ -18,15 +19,9 @@ export const getColumns = ({ nameStr: `${t('column.date')} (${timeOffset})`, width: getColumnWidth('mtsCreate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsCreate) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsCreate), }, @@ -35,15 +30,9 @@ export const getColumns = ({ name: 'column.description', width: getColumnWidth('log', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { log } = filteredData[rowIndex] - return ( - - {log} - - ) + return getCell(log, t) }, copyText: rowIndex => filteredData[rowIndex].log, }, @@ -52,15 +41,9 @@ export const getColumns = ({ name: 'column.ip', width: getColumnWidth('ip', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { ip } = filteredData[rowIndex] - return ( - - {ip} - - ) + return getCell(ip, t) }, copyText: rowIndex => filteredData[rowIndex].ip, }, @@ -69,18 +52,9 @@ export const getColumns = ({ name: 'column.meta', width: getColumnWidth('userAgent', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { userAgent } = filteredData[rowIndex] - - return ( - - - {userAgent} - - - ) + return getJsonFormattedCell(userAgent) }, copyText: rowIndex => filteredData[rowIndex].userAgent, }, diff --git a/src/components/ConcentrationRisk/ConcentrationRisk.columns.js b/src/components/ConcentrationRisk/ConcentrationRisk.columns.js index 37876214a..91b928e2b 100644 --- a/src/components/ConcentrationRisk/ConcentrationRisk.columns.js +++ b/src/components/ConcentrationRisk/ConcentrationRisk.columns.js @@ -1,10 +1,8 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { fixedFloat } from 'ui/utils' -import { getCellState } from 'utils/columns' +import { getCell, getCellState } from 'utils/columns' export const getColumns = ({ + t, data, isNoData, isLoading, @@ -15,15 +13,9 @@ export const getColumns = ({ className: 'align-left', width: 100, renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { currency } = data[rowIndex] - return ( - - {currency} - - ) + return getCell(currency, t) }, copyText: rowIndex => data[rowIndex].currency, }, @@ -32,19 +24,9 @@ export const getColumns = ({ name: 'column.balanceUsd', width: 150, renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { balanceUsd } = data[rowIndex] - const fixedBalanceUsd = fixedFloat(balanceUsd) - return ( - - {fixedBalanceUsd} - - ) + return getCell(fixedFloat(balanceUsd), t) }, copyText: rowIndex => fixedFloat(data[rowIndex].balanceUsd), }, @@ -53,19 +35,9 @@ export const getColumns = ({ name: 'column.percent', width: 150, renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { percent } = data[rowIndex] - const fixedPercent = fixedFloat(percent) - return ( - - {fixedPercent} - - ) + return getCell(fixedFloat(percent), t) }, copyText: rowIndex => fixedFloat(data[rowIndex].percent), }, diff --git a/src/components/ConcentrationRisk/ConcentrationRisk.js b/src/components/ConcentrationRisk/ConcentrationRisk.js index 4a029f181..b0bd77a9c 100644 --- a/src/components/ConcentrationRisk/ConcentrationRisk.js +++ b/src/components/ConcentrationRisk/ConcentrationRisk.js @@ -138,7 +138,9 @@ class ConcentrationRisk extends PureComponent { const filteredData = entries.filter(entry => entry.balanceUsd) const { tableData, chartData } = this.parseData(filteredData) - const tableColumns = getColumns({ data: tableData, isNoData, isLoading }) + const tableColumns = getColumns({ + data: tableData, isNoData, isLoading, t, + }) let showContent if (isNoData) { diff --git a/src/components/Logins/Logins.columns.js b/src/components/Logins/Logins.columns.js index 41863c7f5..911e93576 100644 --- a/src/components/Logins/Logins.columns.js +++ b/src/components/Logins/Logins.columns.js @@ -1,8 +1,9 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - -import JSONFormat from 'ui/JSONFormat' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { + getCell, + getCellState, + getColumnWidth, + getJsonFormattedCell, +} from 'utils/columns' export const getColumns = ({ t, @@ -19,15 +20,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 +32,9 @@ export const getColumns = ({ nameStr: `${t('column.date')} (${timeOffset})`, width: getColumnWidth('time', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].time) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].time), }, @@ -55,15 +44,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('ip', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { ip } = filteredData[rowIndex] - return ( - - {ip} - - ) + return getCell(ip, t) }, copyText: rowIndex => filteredData[rowIndex].ip, }, @@ -73,15 +56,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('browser', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { browser } = filteredData[rowIndex] - return ( - - {browser} - - ) + return getCell(browser, t) }, copyText: rowIndex => filteredData[rowIndex].browser, }, @@ -91,15 +68,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('version', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { version } = filteredData[rowIndex] - return ( - - {version} - - ) + return getCell(version, t) }, copyText: rowIndex => filteredData[rowIndex].version, }, @@ -109,15 +80,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('mobile', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { mobile } = filteredData[rowIndex] - return ( - - {mobile} - - ) + return getCell(mobile, t) }, copyText: rowIndex => filteredData[rowIndex].mobile, }, @@ -127,18 +92,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('extra', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { extra } = filteredData[rowIndex] - const formattedExtra = JSON.stringify(extra, undefined, 2) - return ( - - - {formattedExtra} - - - ) + return getJsonFormattedCell(extra) }, copyText: rowIndex => JSON.stringify(filteredData[rowIndex].extra, undefined, 2), }, diff --git a/src/components/Movements/Movements.columns.js b/src/components/Movements/Movements.columns.js index 5380c860b..caee3fd20 100644 --- a/src/components/Movements/Movements.columns.js +++ b/src/components/Movements/Movements.columns.js @@ -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 = ({ @@ -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 ( - - <> - onDetailsClick(e, { id })} - > - {t('column.show')} - - - - ) + const cellAction = (e) => onDetailsClick(e, { id }) + return getActionCell(t('column.show'), cellAction, t, t('column.moreDetails')) }, copyText: rowIndex => filteredData[rowIndex].id, }] : []), @@ -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 ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -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 ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdated), }, @@ -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 ( - - {preparedCurrency} - - ) + return getCell(preparedCurrency, t) }, copyText: rowIndex => filteredData[rowIndex].currency, }, @@ -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 ( - - {status} - - ) + return getCell(status, t) }, copyText: rowIndex => filteredData[rowIndex].status, }, @@ -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 ( - - {formatAmount(amount)} - - ) + return getCell(formatAmount(amount), t, `${fixedFloat(amount)} ${currency}`) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), @@ -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 ( - - {formatAmount(amountUsd)} - - ) + return getCell(formatAmount(amountUsd), t, `${fixedFloat(amountUsd)} ${t('column.usd')}`) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amountUsd), @@ -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 ( - - <> - {formatAmount(fees)} - {' '} - - {currency} - - - - ) + return getFeeCell(fees, currency, t, `${fixedFloat(fees)} ${currency}`) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].fees), @@ -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 ( @@ -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 ( - - {transactionId} - - ) + return getCell(transactionId, t) }, copyText: rowIndex => filteredData[rowIndex].transactionId, }, @@ -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 ( - - {note} - - ) + return getCell(note, t) }, copyText: rowIndex => filteredData[rowIndex].note, }, diff --git a/src/components/OrderTrades/OrderTrades.js b/src/components/OrderTrades/OrderTrades.js index 1ce05371e..ebac986f0 100644 --- a/src/components/OrderTrades/OrderTrades.js +++ b/src/components/OrderTrades/OrderTrades.js @@ -13,7 +13,7 @@ import { getMappedSymbolsFromUrl } from 'state/symbols/utils' import { SectionHeader, SectionHeaderTitle } from 'ui/SectionHeader' import OrderTradesNoData from './OrderTrades.NoData' -import getColumns from '../Trades/Trades.columns' +import { getColumns } from '../Trades/Trades.columns' const { MENU_ORDER_TRADES } = queryConstants diff --git a/src/components/Orders/Orders.columns.js b/src/components/Orders/Orders.columns.js index 5c7bcb604..62c508cec 100644 --- a/src/components/Orders/Orders.columns.js +++ b/src/components/Orders/Orders.columns.js @@ -1,9 +1,11 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - -import JSONFormat from 'ui/JSONFormat' +import { + getCell, + getCellState, + getActionCell, + getColumnWidth, + getJsonFormattedCell, +} from 'utils/columns' import { formatAmount, fixedFloat } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' export const getColumns = ({ t, @@ -21,21 +23,10 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('id', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id, pair, amountExecuted } = filteredData[rowIndex] - /* eslint-disable jsx-a11y/anchor-is-valid */ - return ( - - <> - {amountExecuted - ? onIdClick(e, { id, pair })}>{id} - : id} - - - ) - /* eslint-enable jsx-a11y/anchor-is-valid */ + const cellAction = (e) => onIdClick(e, { id, pair }) + return amountExecuted ? getActionCell(id, cellAction, t) : getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -45,15 +36,9 @@ 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 ( - - {pair} - - ) + return getCell(pair, t) }, copyText: rowIndex => filteredData[rowIndex].pair, }, @@ -63,15 +48,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, }, @@ -80,19 +59,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(fixedFloat(amountOrig), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amountOrig), @@ -102,18 +71,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), @@ -123,19 +83,9 @@ export const getColumns = ({ 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 } = filteredData[rowIndex] - const fixedPrice = fixedFloat(price) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(price), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].price), @@ -145,19 +95,9 @@ export const getColumns = ({ name: 'column.avgprice', width: getColumnWidth('priceAvg', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { priceAvg } = filteredData[rowIndex] - const fixedPrice = fixedFloat(priceAvg) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(priceAvg), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].priceAvg), @@ -168,15 +108,9 @@ export const getColumns = ({ nameStr: `${t('column.created')} (${timeOffset})`, width: getColumnWidth('mtsCreate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsCreate) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsCreate), }, @@ -186,15 +120,9 @@ export const getColumns = ({ nameStr: `${t('column.updated')} (${timeOffset})`, width: getColumnWidth('mtsUpdate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), }, @@ -204,15 +132,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, }, @@ -221,19 +143,9 @@ export const getColumns = ({ name: 'column.pricetrail', width: getColumnWidth('priceTrailing', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { priceTrailing } = filteredData[rowIndex] - const fixedPrice = fixedFloat(priceTrailing) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(priceTrailing), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].priceTrailing), @@ -244,15 +156,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('typePrev', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { typePrev } = filteredData[rowIndex] - return ( - - {typePrev} - - ) + return getCell(typePrev, t) }, copyText: rowIndex => filteredData[rowIndex].typePrev, }, @@ -262,19 +168,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('meta', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { meta } = filteredData[rowIndex] - const formattedMeta = JSON.stringify(meta, undefined, 2) - - return ( - - - {formattedMeta} - - - ) + return getJsonFormattedCell(meta) }, copyText: rowIndex => JSON.stringify(filteredData[rowIndex].meta) || '', }, diff --git a/src/components/Positions/Positions.columns.js b/src/components/Positions/Positions.columns.js index fae2f3a84..fb774fcd4 100644 --- a/src/components/Positions/Positions.columns.js +++ b/src/components/Positions/Positions.columns.js @@ -1,12 +1,14 @@ -import React from 'react' import _endsWith from 'lodash/endsWith' -import { Cell } from '@blueprintjs/table' - import queryConstants from 'state/query/constants' -import JSONFormat from 'ui/JSONFormat' import { formatAmount, fixedFloat } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { + getCell, + getCellState, + getActionCell, + getColumnWidth, + getJsonFormattedCell, +} from 'utils/columns' const { MENU_POSITIONS_ACTIVE, MENU_POSITIONS_AUDIT } = queryConstants @@ -42,19 +44,9 @@ export default function getColumns(props) { name: 'column.liq-price', width: getColumnWidth('liquidationPrice', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { liquidationPrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(liquidationPrice) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(liquidationPrice), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].liquidationPrice), @@ -64,18 +56,9 @@ export default function getColumns(props) { name: 'column.pl', width: getColumnWidth('pl', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pl } = filteredData[rowIndex] - return ( - - {formatAmount(pl)} - - ) + return getCell(formatAmount(pl), t, fixedFloat(pl)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].pl), @@ -85,18 +68,9 @@ export default function getColumns(props) { name: 'column.plperc', width: getColumnWidth('plPerc', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { plPerc } = filteredData[rowIndex] - return ( - - {formatAmount(plPerc)} - - ) + return getCell(formatAmount(plPerc), t, fixedFloat(plPerc)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].plPerc), @@ -111,19 +85,9 @@ export default function getColumns(props) { name: 'column.collateral', width: getColumnWidth('collateral', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { collateral } = filteredData[rowIndex] - const fixedCollateral = fixedFloat(collateral) - return ( - - {fixedCollateral} - - ) + return getCell(fixedFloat(collateral), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].collateral), @@ -134,19 +98,9 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('meta', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { meta = '' } = filteredData[rowIndex] - const formattedMeta = JSON.stringify(meta, undefined, 2) - - return ( - - - {formattedMeta} - - - ) + return getJsonFormattedCell(meta) }, copyText: rowIndex => JSON.stringify(filteredData[rowIndex].meta) || '', }, @@ -160,19 +114,9 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('id', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] - /* eslint-disable jsx-a11y/anchor-is-valid */ - return ( - - <> - {id} - - - ) - /* eslint-enable jsx-a11y/anchor-is-valid */ + return getActionCell(id, onIdClick, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -182,15 +126,9 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('pair', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pair } = filteredData[rowIndex] - return ( - - {pair} - - ) + return getCell(pair, t) }, copyText: rowIndex => filteredData[rowIndex].pair, }, @@ -199,18 +137,9 @@ export default function getColumns(props) { name: 'column.amount', width: getColumnWidth('amount', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amount } = filteredData[rowIndex] - return ( - - {formatAmount(amount)} - - ) + return getCell(formatAmount(amount), t, fixedFloat(amount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), @@ -220,19 +149,9 @@ export default function getColumns(props) { name: 'column.base-price', width: getColumnWidth('basePrice', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { basePrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(basePrice) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(basePrice), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].basePrice), @@ -243,19 +162,9 @@ export default function getColumns(props) { name: 'column.fundingCost', width: getColumnWidth('marginFunding', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { marginFunding } = filteredData[rowIndex] - const fixedSwap = fixedFloat(marginFunding) - return ( - - {fixedSwap} - - ) + return getCell(fixedFloat(marginFunding), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].marginFunding), @@ -266,15 +175,9 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('marginFundingType', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const swapType = showType(filteredData[rowIndex]) - return ( - - {swapType} - - ) + return getCell(swapType, t) }, copyText: rowIndex => showType(filteredData[rowIndex]), }, @@ -284,15 +187,9 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('status', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { status } = filteredData[rowIndex] - return ( - - {status} - - ) + return getCell(status, t) }, copyText: rowIndex => filteredData[rowIndex].status, }, @@ -302,15 +199,9 @@ export default function getColumns(props) { nameStr: `${t('column.updated')} (${timeOffset})`, width: getColumnWidth('mtsUpdate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), }, diff --git a/src/components/Snapshots/PositionsSnapshot/index.js b/src/components/Snapshots/PositionsSnapshot/index.js index dd5cc5ffe..c6bbe0ef4 100644 --- a/src/components/Snapshots/PositionsSnapshot/index.js +++ b/src/components/Snapshots/PositionsSnapshot/index.js @@ -1,3 +1 @@ -import PositionsSnapshot from './PositionsSnapshot.container' - -export default PositionsSnapshot +export { default } from './PositionsSnapshot.container' diff --git a/src/components/Snapshots/TickersSnapshot/index.js b/src/components/Snapshots/TickersSnapshot/index.js index 8b49fed15..c73fe57a8 100644 --- a/src/components/Snapshots/TickersSnapshot/index.js +++ b/src/components/Snapshots/TickersSnapshot/index.js @@ -1,3 +1 @@ -import TickersSnapshot from './TickersSnapshot' - -export default TickersSnapshot +export { default } from './TickersSnapshot' diff --git a/src/components/Snapshots/WalletsSnapshot/Wallets.columns.js b/src/components/Snapshots/WalletsSnapshot/Wallets.columns.js deleted file mode 100644 index 2d6dc432f..000000000 --- a/src/components/Snapshots/WalletsSnapshot/Wallets.columns.js +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - -import { fixedFloat } from 'ui/utils' -import { getTooltipContent } from 'utils/columns' - -export default function getColumns(props) { - const { filteredData, t } = props - - return [ - { - id: 'currency', - name: 'column.currency', - className: 'align-left', - width: 100, - renderer: (rowIndex) => { - const { currency } = filteredData[rowIndex] - return ( - - {currency} - - ) - }, - copyText: rowIndex => filteredData[rowIndex].currency, - }, - { - id: 'balance', - name: 'column.balance', - width: 200, - renderer: (rowIndex) => { - const { balance } = filteredData[rowIndex] - const fixedBalance = fixedFloat(balance) - return ( - - {fixedBalance} - - ) - }, - copyText: rowIndex => filteredData[rowIndex].balance, - }, - { - id: 'balanceUsd', - name: 'column.balanceUsd', - width: 200, - renderer: (rowIndex) => { - const { balanceUsd } = filteredData[rowIndex] - const fixedBalanceUsd = fixedFloat(balanceUsd) - return ( - - {fixedBalanceUsd} - - ) - }, - copyText: (rowIndex) => { - const { balanceUsd } = filteredData[rowIndex] - return `${fixedFloat(balanceUsd)} ${t('column.usd')}` - }, - }, - ] -} diff --git a/src/components/Snapshots/WalletsSnapshot/index.js b/src/components/Snapshots/WalletsSnapshot/index.js index 857b75711..ae45d3458 100644 --- a/src/components/Snapshots/WalletsSnapshot/index.js +++ b/src/components/Snapshots/WalletsSnapshot/index.js @@ -1,3 +1 @@ -import WalletsSnapshot from './WalletsSnapshot' - -export default WalletsSnapshot +export { default } from './WalletsSnapshot' diff --git a/src/components/Snapshots/index.js b/src/components/Snapshots/index.js index 71b91114b..69f465d95 100644 --- a/src/components/Snapshots/index.js +++ b/src/components/Snapshots/index.js @@ -1,3 +1 @@ -import Snapshots from './Snapshots.container' - -export default Snapshots +export { default } from './Snapshots.container' diff --git a/src/components/Trades/Trades.columns.js b/src/components/Trades/Trades.columns.js index bdc3ae58f..3c5b124f5 100644 --- a/src/components/Trades/Trades.columns.js +++ b/src/components/Trades/Trades.columns.js @@ -1,9 +1,11 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - +import { + getCell, + getFeeCell, + getCellState, + getColumnWidth, +} from 'utils/columns' import { formatAmount, fixedFloat } from 'ui/utils' import { demapPairs, demapSymbols } from 'state/symbols/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' const getFeePercent = (entry) => { const { @@ -30,181 +32,108 @@ const getFeePercent = (entry) => { return '-' } -export default function getColumns(props) { - const { - t, - isNoData, - isLoading, - timeOffset, - getFullTime, - filteredData, - columnsWidth, - } = props - - return [ - { - id: 'id', - name: 'column.id', - className: 'align-left', - width: getColumnWidth('id', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } - const { id } = filteredData[rowIndex] - return ( - - {id} - - ) - }, - copyText: rowIndex => filteredData[rowIndex].id, +export const getColumns = ({ + t, + isNoData, + isLoading, + timeOffset, + getFullTime, + filteredData, + columnsWidth, +}) => [ + { + id: 'id', + name: 'column.id', + className: 'align-left', + width: getColumnWidth('id', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { id } = filteredData[rowIndex] + return getCell(id, t) }, - { - id: 'orderID', - name: 'column.orderid', - className: 'align-left', - width: getColumnWidth('orderID', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } - const { orderID } = filteredData[rowIndex] - return ( - - {orderID} - - ) - }, - copyText: rowIndex => filteredData[rowIndex].orderID, + copyText: rowIndex => filteredData[rowIndex].id, + }, + { + id: 'orderID', + name: 'column.orderid', + className: 'align-left', + width: getColumnWidth('orderID', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { orderID } = filteredData[rowIndex] + return getCell(orderID, t) }, - { - id: 'pair', - name: 'column.pair', - className: 'align-left', - width: getColumnWidth('pair', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } - const { pair } = filteredData[rowIndex] - return ( - - {pair} - - ) - }, - copyText: rowIndex => filteredData[rowIndex].pair, + copyText: rowIndex => filteredData[rowIndex].orderID, + }, + { + id: 'pair', + name: 'column.pair', + className: 'align-left', + width: getColumnWidth('pair', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { pair } = filteredData[rowIndex] + return getCell(pair, t) }, - { - id: 'execAmount', - name: 'column.amount', - width: getColumnWidth('execAmount', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } - const { execAmount } = filteredData[rowIndex] - return ( - - {formatAmount(execAmount)} - - ) - }, - isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].execAmount), + copyText: rowIndex => filteredData[rowIndex].pair, + }, + { + id: 'execAmount', + name: 'column.amount', + width: getColumnWidth('execAmount', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { execAmount } = filteredData[rowIndex] + return getCell(formatAmount(execAmount), t, fixedFloat(execAmount)) }, - { - id: 'execPrice', - name: 'column.price', - width: getColumnWidth('execPrice', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } - const { execPrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(execPrice) - return ( - - {fixedPrice} - - ) - }, - isNumericValue: true, - copyText: rowIndex => filteredData[rowIndex].execPrice, + isNumericValue: true, + copyText: rowIndex => fixedFloat(filteredData[rowIndex].execAmount), + }, + { + id: 'execPrice', + name: 'column.price', + width: getColumnWidth('execPrice', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { execPrice } = filteredData[rowIndex] + return getCell(fixedFloat(execPrice), t) }, - { - id: 'fee', - name: 'column.fee', - width: getColumnWidth('fee', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } - const { fee, feeCurrency } = filteredData[rowIndex] - const fixedFee = fixedFloat(fee) - const tooltip = getTooltipContent(`${fixedFee} ${feeCurrency}`, t) - return ( - - <> - {formatAmount(fee)} - {' '} - - {feeCurrency} - - - - ) - }, - isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].fee), + isNumericValue: true, + copyText: rowIndex => filteredData[rowIndex].execPrice, + }, + { + id: 'fee', + name: 'column.fee', + width: getColumnWidth('fee', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { fee, feeCurrency } = filteredData[rowIndex] + return getFeeCell(fee, feeCurrency, t, `${fixedFloat(fee)} ${feeCurrency}`) }, - { - id: 'feePercent', - name: 'column.feePercent', - width: getColumnWidth('feePercent', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } - const feePercent = getFeePercent(filteredData[rowIndex]) - return ( - - {feePercent} - - ) - }, - copyText: rowIndex => getFeePercent(filteredData[rowIndex]), + isNumericValue: true, + copyText: rowIndex => fixedFloat(filteredData[rowIndex].fee), + }, + { + id: 'feePercent', + name: 'column.feePercent', + width: getColumnWidth('feePercent', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const feePercent = getFeePercent(filteredData[rowIndex]) + return getCell(feePercent, t) }, - { - id: 'mtsCreate', - className: 'align-left', - nameStr: `${t('column.date')} (${timeOffset})`, - width: getColumnWidth('mtsCreate', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } - const timestamp = getFullTime(filteredData[rowIndex].mtsCreate) - return ( - - {timestamp} - - ) - }, - copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsCreate), + copyText: rowIndex => getFeePercent(filteredData[rowIndex]), + }, + { + id: 'mtsCreate', + className: 'align-left', + nameStr: `${t('column.date')} (${timeOffset})`, + width: getColumnWidth('mtsCreate', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const timestamp = getFullTime(filteredData[rowIndex].mtsCreate) + return getCell(timestamp, t) }, - ] -} + copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsCreate), + }, +] diff --git a/src/components/Trades/Trades.js b/src/components/Trades/Trades.js index f2e70931e..9e339bff0 100644 --- a/src/components/Trades/Trades.js +++ b/src/components/Trades/Trades.js @@ -15,7 +15,7 @@ import { clearAllPairs, } from 'state/utils' -import getColumns from './Trades.columns' +import { getColumns } from './Trades.columns' import { propTypes, defaultProps } from './Trades.props' const TYPE = queryConstants.MENU_TRADES diff --git a/src/components/Wallets/Wallets.columns.js b/src/components/Wallets/Wallets.columns.js index c153b8875..0ed7b73ad 100644 --- a/src/components/Wallets/Wallets.columns.js +++ b/src/components/Wallets/Wallets.columns.js @@ -1,84 +1,53 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - -import { insertIf, fixedFloat } from 'ui/utils' import { + getCell, + getCellState, COLUMN_WIDTHS, - getCellLoader, - getCellNoData, - getTooltipContent, } from 'utils/columns' import config from 'config' +import { insertIf, fixedFloat } from 'ui/utils' -export default function getColumns(props) { - const { - t, - isNoData, - isLoading, - filteredData, - } = props - - return [ - { - id: 'currency', - name: 'column.currency', - className: 'align-left', - width: 100, - renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData(t('column.noResults')) - const { currency } = filteredData[rowIndex] - return ( - - {currency} - - ) - }, - copyText: rowIndex => filteredData[rowIndex].currency, +export const getColumns = ({ + t, + isNoData, + isLoading, + filteredData, +}) => [ + { + id: 'currency', + name: 'column.currency', + className: 'align-left', + width: 100, + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData, t('column.noResults')) + const { currency } = filteredData[rowIndex] + return getCell(currency, t) }, + copyText: rowIndex => filteredData[rowIndex].currency, + }, + { + id: 'balance', + name: 'column.balance', + width: COLUMN_WIDTHS.amount, + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { balance } = filteredData[rowIndex] + return getCell(fixedFloat(balance), t) + }, + isNumericValue: true, + copyText: rowIndex => fixedFloat(filteredData[rowIndex].balance), + }, + ...insertIf(config.showFrameworkMode, ( { - id: 'balance', - name: 'column.balance', - width: COLUMN_WIDTHS.amount, + id: 'balanceUsd', + name: 'column.balanceUsd', + width: COLUMN_WIDTHS.balanceUsd, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() - const { balance } = filteredData[rowIndex] - const fixedBalance = fixedFloat(balance) - return ( - - {fixedBalance} - - ) + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { balanceUsd } = filteredData[rowIndex] + return getCell(fixedFloat(balanceUsd), t) }, isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].balance), - }, - ...insertIf(config.showFrameworkMode, ( - { - id: 'balanceUsd', - name: 'column.balanceUsd', - width: COLUMN_WIDTHS.balanceUsd, - renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() - const { balanceUsd } = filteredData[rowIndex] - const fixedBalanceUsd = fixedFloat(balanceUsd) - return ( - - {fixedBalanceUsd} - - ) - }, - isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].balanceUsd), - } - )), - ] -} + copyText: rowIndex => fixedFloat(filteredData[rowIndex].balanceUsd), + } + )), +] diff --git a/src/components/Wallets/Wallets.data.js b/src/components/Wallets/Wallets.data.js index 199a35bad..93105b622 100644 --- a/src/components/Wallets/Wallets.data.js +++ b/src/components/Wallets/Wallets.data.js @@ -5,7 +5,7 @@ import { isEmpty } from '@bitfinex/lib-js-util-base' import DataTable from 'ui/DataTable' -import getColumns from './Wallets.columns' +import { getColumns } from './Wallets.columns' import { WALLETS_ENTRIES_PROPS } from './Wallets.props' import constants from './var' diff --git a/src/components/WeightedAverages/WeightedAverages.columns.js b/src/components/WeightedAverages/WeightedAverages.columns.js index f83bb61d6..fe0aa6ab1 100644 --- a/src/components/WeightedAverages/WeightedAverages.columns.js +++ b/src/components/WeightedAverages/WeightedAverages.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, @@ -18,15 +15,9 @@ 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 ( - - {pair} - - ) + return getCell(pair, t) }, copyText: rowIndex => filteredData[rowIndex].pair, }, @@ -35,19 +26,9 @@ export const getColumns = ({ name: 'column.buyingWeightedPrice', width: getColumnWidth('buyingWeightedPrice', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { buyingWeightedPrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(buyingWeightedPrice) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(buyingWeightedPrice), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].buyingWeightedPrice), @@ -57,19 +38,9 @@ export const getColumns = ({ name: 'column.buyingAmount', width: getColumnWidth('buyingAmount', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { buyingAmount } = filteredData[rowIndex] - const tooltip = fixedFloat(buyingAmount) - return ( - - {formatAmount(buyingAmount)} - - ) + return getCell(formatAmount(buyingAmount), t, fixedFloat(buyingAmount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].buyingAmount), @@ -79,19 +50,9 @@ export const getColumns = ({ name: 'column.cost', width: getColumnWidth('cost', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { cost } = filteredData[rowIndex] - const tooltip = fixedFloat(cost) - return ( - - {formatAmount(cost)} - - ) + return getCell(formatAmount(cost), t, fixedFloat(cost)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].cost), @@ -101,19 +62,9 @@ export const getColumns = ({ name: 'column.sellingWeightedPrice', width: getColumnWidth('sellingWeightedPrice', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { sellingWeightedPrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(sellingWeightedPrice) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(sellingWeightedPrice), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].sellingWeightedPrice), @@ -123,19 +74,9 @@ export const getColumns = ({ name: 'column.sellingAmount', width: getColumnWidth('sellingAmount', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { sellingAmount } = filteredData[rowIndex] - const tooltip = fixedFloat(sellingAmount) - return ( - - {formatAmount(sellingAmount)} - - ) + return getCell(formatAmount(sellingAmount), t, fixedFloat(sellingAmount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].sellingAmount), @@ -145,19 +86,9 @@ export const getColumns = ({ name: 'column.sale', width: getColumnWidth('sale', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { sale } = filteredData[rowIndex] - const tooltip = fixedFloat(sale) - return ( - - {formatAmount(sale)} - - ) + return getCell(formatAmount(sale), t, fixedFloat(sale)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].sale), @@ -167,19 +98,9 @@ export const getColumns = ({ name: 'column.cumulativeAmount', width: getColumnWidth('cumulativeAmount', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { cumulativeAmount } = filteredData[rowIndex] - const tooltip = fixedFloat(cumulativeAmount) - return ( - - {formatAmount(cumulativeAmount)} - - ) + return getCell(formatAmount(cumulativeAmount), t, fixedFloat(cumulativeAmount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].cumulativeAmount), @@ -189,15 +110,9 @@ export const getColumns = ({ name: 'column.firstTrade', width: getColumnWidth('firstTradeMts', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].firstTradeMts) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].firstTradeMts), }, @@ -206,15 +121,9 @@ export const getColumns = ({ name: 'column.lastTrade', width: getColumnWidth('lastTradeMts', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].lastTradeMts) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].lastTradeMts), }, diff --git a/src/ui/CandlesTimeframe/CandlesTimeframe.js b/src/ui/CandlesTimeframe/CandlesTimeframe.js index b54016a1f..79f41735c 100644 --- a/src/ui/CandlesTimeframe/CandlesTimeframe.js +++ b/src/ui/CandlesTimeframe/CandlesTimeframe.js @@ -1,27 +1,26 @@ -import React from 'react' +import React, { memo } from 'react' +import PropTypes from 'prop-types' import _map from 'lodash/map' import Select from 'ui/Select' -import { propTypes, defaultProps } from './CandlesTimeframe.props' import TIMEFRAMES from './var' -const CandlesTimeframe = (props) => { - const { value, onChange } = props - const items = _map(TIMEFRAMES, timeframe => timeframe) +const items = _map(TIMEFRAMES, timeframe => timeframe) - return ( - +) -CandlesTimeframe.propTypes = propTypes -CandlesTimeframe.defaultProps = defaultProps +CandlesTimeframe.propTypes = { + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, +} -export default CandlesTimeframe +export default memo(CandlesTimeframe) diff --git a/src/ui/CandlesTimeframe/CandlesTimeframe.props.js b/src/ui/CandlesTimeframe/CandlesTimeframe.props.js deleted file mode 100644 index 51c44c5f8..000000000 --- a/src/ui/CandlesTimeframe/CandlesTimeframe.props.js +++ /dev/null @@ -1,11 +0,0 @@ -import PropTypes from 'prop-types' - -export const propTypes = { - value: PropTypes.string.isRequired, - className: PropTypes.string, - onChange: PropTypes.func.isRequired, -} - -export const defaultProps = { - className: '', -} diff --git a/src/ui/CandlesTimeframe/index.js b/src/ui/CandlesTimeframe/index.js index 787ee5175..d211d0382 100644 --- a/src/ui/CandlesTimeframe/index.js +++ b/src/ui/CandlesTimeframe/index.js @@ -1,3 +1 @@ -import CandlesTimeframe from './CandlesTimeframe' - -export default CandlesTimeframe +export { default } from './CandlesTimeframe' diff --git a/src/ui/LedgersCategorySelect/LedgersCategorySelect.js b/src/ui/LedgersCategorySelect/LedgersCategorySelect.js index 10b5f5ca9..69cecc4b4 100644 --- a/src/ui/LedgersCategorySelect/LedgersCategorySelect.js +++ b/src/ui/LedgersCategorySelect/LedgersCategorySelect.js @@ -1,11 +1,10 @@ -import React from 'react' +import React, { memo, useMemo } from 'react' import PropTypes from 'prop-types' -import { withTranslation } from 'react-i18next' -import _memoize from 'lodash/memoize' +import { useTranslation } from 'react-i18next' import Select from 'ui/Select' -const getLedgersCategories = _memoize((t) => ([ +const getLedgersCategories = (t) => [ { value: '', label: t('selector.all') }, { value: 5, label: t('ledgers.categories.exchange') }, { value: 22, label: t('ledgers.categories.position_modified') }, @@ -40,22 +39,18 @@ const getLedgersCategories = _memoize((t) => ([ { value: 905, label: t('ledgers.categories.currency_conversion') }, { value: 907, label: t('ledgers.categories.monthly_profit_payment') }, { value: 911, label: t('ledgers.categories.losses') }, -])) +] -const LedgersCategorySelect = (props) => { - const { - className, - onChange, - t, - value, - } = props +const LedgersCategorySelect = ({ className, onChange, value }) => { + const { t } = useTranslation() + const items = useMemo(() => getLedgersCategories(t), [t]) return ( ) } @@ -34,8 +31,6 @@ const TimeFrameSelector = (props) => { TimeFrameSelector.propTypes = { value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, - t: PropTypes.func.isRequired, } -TimeFrameSelector.defaultProps = {} -export default withTranslation('translations')(TimeFrameSelector) +export default memo(TimeFrameSelector) diff --git a/src/ui/TimeFrameSelector/index.js b/src/ui/TimeFrameSelector/index.js index 293b3ddc4..723dbf14c 100644 --- a/src/ui/TimeFrameSelector/index.js +++ b/src/ui/TimeFrameSelector/index.js @@ -1,3 +1 @@ -import TimeFrameSelector from './TimeFrameSelector' - -export default TimeFrameSelector +export { default } from './TimeFrameSelector' diff --git a/src/utils/columns.js b/src/utils/columns.js index 0b69a0396..d841e623b 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -241,9 +241,9 @@ export const getCellNoData = (title = '--') => ( ) -export const getCellState = (isLoading, isNoData) => { +export const getCellState = (isLoading, isNoData, noDataTitle) => { if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isNoData) return getCellNoData(noDataTitle) return null } @@ -281,6 +281,37 @@ export const getLinkCell = (link) => ( ) +export const getFeeCell = (fee, feeCurrency, t, tooltip) => { + const tooltipContent = getTooltipContent(tooltip || fee, t) + return ( + + <> + {formatAmount(fee)} + {' '} + + {feeCurrency} + + + + ) +} + +export const getActionCell = (content, action, t, tooltip) => { + const tooltipContent = getTooltipContent(tooltip || content, t) + return ( + + <> + + {content} + + + + ) +} export const getRowsConfig = (isLoading, isNoData, numRows = 0) => { if (isLoading) return 5 @@ -307,14 +338,9 @@ export const getFrameworkPositionsColumns = ({ className: 'align-left', width: 100, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData(t('column.noResults')) + if (isLoading || isNoData) return getCellState(isLoading, isNoData, t('column.noResults')) const { id } = filteredData[rowIndex] - return ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -324,14 +350,9 @@ export const getFrameworkPositionsColumns = ({ className: 'align-left', width: COLUMN_WIDTHS.pair, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pair } = filteredData[rowIndex] - return ( - - {pair} - - ) + return getCell(pair, t) }, copyText: rowIndex => filteredData[rowIndex].pair, }, @@ -340,17 +361,9 @@ export const getFrameworkPositionsColumns = ({ name: 'column.amount', width: COLUMN_WIDTHS.amount, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amount } = filteredData[rowIndex] - return ( - - {formatAmount(amount)} - - ) + return getCell(formatAmount(amount), t, fixedFloat(amount)) }, copyText: rowIndex => filteredData[rowIndex].amount, }, @@ -359,18 +372,9 @@ export const getFrameworkPositionsColumns = ({ name: 'column.base-price', width: COLUMN_WIDTHS.basePrice, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { basePrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(basePrice) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(basePrice), t) }, copyText: rowIndex => filteredData[rowIndex].basePrice, }, @@ -379,18 +383,9 @@ export const getFrameworkPositionsColumns = ({ name: 'column.actual-price', width: COLUMN_WIDTHS.actualPrice, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { actualPrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(actualPrice) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(actualPrice), t) }, copyText: rowIndex => filteredData[rowIndex].actualPrice, }, @@ -399,18 +394,9 @@ export const getFrameworkPositionsColumns = ({ name: 'column.liq-price', width: COLUMN_WIDTHS.priceLiq, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { liquidationPrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(liquidationPrice) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(liquidationPrice), t) }, copyText: rowIndex => filteredData[rowIndex].liquidationPrice, }, @@ -419,17 +405,9 @@ export const getFrameworkPositionsColumns = ({ name: 'column.pl', width: 100, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pl } = filteredData[rowIndex] - return ( - - {formatAmount(pl)} - - ) + return getCell(formatAmount(pl), t, fixedFloat(pl)) }, copyText: rowIndex => filteredData[rowIndex].pl, }, @@ -438,17 +416,9 @@ export const getFrameworkPositionsColumns = ({ name: 'column.plUsd', width: 100, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { plUsd } = filteredData[rowIndex] - return ( - - {formatAmount(plUsd)} - - ) + return getCell(formatAmount(plUsd), t, fixedFloat(plUsd)) }, copyText: rowIndex => filteredData[rowIndex].plUsd, }, @@ -457,17 +427,9 @@ export const getFrameworkPositionsColumns = ({ name: 'column.plperc', width: 100, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { plPerc } = filteredData[rowIndex] - return ( - - {formatAmount(plPerc)} - - ) + return getCell(formatAmount(plPerc), t, fixedFloat(plPerc)) }, copyText: rowIndex => filteredData[rowIndex].plPerc, }, @@ -476,18 +438,9 @@ export const getFrameworkPositionsColumns = ({ name: 'column.fundingCost', width: COLUMN_WIDTHS.swap, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { marginFunding } = filteredData[rowIndex] - const fixedSwap = fixedFloat(marginFunding) - return ( - - {fixedSwap} - - ) + return getCell(fixedFloat(marginFunding), t) }, copyText: rowIndex => filteredData[rowIndex].marginFunding, }, @@ -497,14 +450,9 @@ export const getFrameworkPositionsColumns = ({ className: 'align-left', width: 120, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const swapType = showType(filteredData[rowIndex].marginFundingType) - return ( - - {swapType} - - ) + return getCell(swapType, t) }, copyText: rowIndex => showType(filteredData[rowIndex].marginFundingType), }, @@ -514,14 +462,9 @@ export const getFrameworkPositionsColumns = ({ className: 'align-left', width: 100, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { status } = filteredData[rowIndex] - return ( - - {status} - - ) + return getCell(status, t) }, copyText: rowIndex => filteredData[rowIndex].status, }, @@ -531,14 +474,9 @@ export const getFrameworkPositionsColumns = ({ nameStr: `${t('column.updated')} (${timeOffset})`, width: COLUMN_WIDTHS.mtsUpdate, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + 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), }, @@ -557,14 +495,9 @@ export const getPositionsTickersColumns = ({ className: 'align-left', width: COLUMN_WIDTHS.pair, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData(t('column.noResults')) + if (isLoading || isNoData) return getCellState(isLoading, isNoData, t('column.noResults')) const { pair } = filteredData[rowIndex] - return ( - - {pair} - - ) + return getCell(pair, t) }, copyText: rowIndex => filteredData[rowIndex].pair, }, @@ -573,17 +506,9 @@ export const getPositionsTickersColumns = ({ name: 'column.amount', width: COLUMN_WIDTHS.amount, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + 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 => filteredData[rowIndex].amount, @@ -602,15 +527,10 @@ export const getWalletsTickersColumns = ({ className: 'align-left', width: 80, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData(t('column.noResults')) + if (isLoading || isNoData) return getCellState(isLoading, isNoData, t('column.noResults')) const { walletType } = filteredData[rowIndex] const walletTypeText = t(`wallets.header.${walletType}`) - return ( - - {walletTypeText} - - ) + return getCell(walletTypeText, t) }, copyText: (rowIndex) => { const { walletType } = filteredData[rowIndex] @@ -623,14 +543,9 @@ export const getWalletsTickersColumns = ({ className: 'align-left', width: 100, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pair } = filteredData[rowIndex] - return ( - - {pair} - - ) + return getCell(pair, t) }, copyText: rowIndex => filteredData[rowIndex].pair, }, @@ -639,17 +554,9 @@ export const getWalletsTickersColumns = ({ name: 'column.amount', width: 120, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + 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 => filteredData[rowIndex].amount, @@ -725,4 +632,10 @@ export default { getTooltipContent, getCalculatedColumnWidths, formatSourceType, + getCell, + getFeeCell, + getLinkCell, + getCellState, + getActionCell, + getJsonFormattedCell, }