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/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/utils/columns.js b/src/utils/columns.js
index 0b69a0396..5e3a52ae1 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
}