- {_times(numRows, rowIndex => (
-
- {tableColumns.map((column) => {
- const {
- id, name, nameStr, renderer, description,
- } = column
- const cell = renderer(rowIndex)
- return (
-
-
- {nameStr || t(name)}
-
- {description && (
-
- {t(description)}
-
- )}
-
-
{cell.props.children}
+ return (
+
+ {_times(numRows, rowIndex => (
+
+ {_map(tableColumns, (column) => {
+ const {
+ id, name, nameStr, renderer, description,
+ } = column
+ const cell = renderer(rowIndex)
+ return (
+
+
+ {nameStr || t(name)}
+
+ {description && (
+
+ {t(description)}
+
+ )}
- )
- })}
-
- ))}
-
- )
- }
+
{cell.props.children}
+
+ )
+ })}
+
+ ))}
+
+ )
}
-const TABLE_COLUMNS_PROPS = PropTypes.shape({
- name: PropTypes.string,
- width: PropTypes.number,
- nameStr: PropTypes.string,
- id: PropTypes.string.isRequired,
- renderer: PropTypes.func.isRequired,
- copyText: PropTypes.func,
-})
-
CollapsedTable.propTypes = {
- t: PropTypes.func.isRequired,
numRows: PropTypes.number.isRequired,
- tableColumns: PropTypes.arrayOf(TABLE_COLUMNS_PROPS).isRequired,
+ tableColumns: PropTypes.arrayOf(PropTypes.shape({
+ name: PropTypes.string,
+ width: PropTypes.number,
+ nameStr: PropTypes.string,
+ id: PropTypes.string.isRequired,
+ renderer: PropTypes.func.isRequired,
+ copyText: PropTypes.func,
+ })).isRequired,
}
-export default withTranslation('translations')(CollapsedTable)
+export default memo(CollapsedTable)
diff --git a/src/ui/CollapsedTable/index.js b/src/ui/CollapsedTable/index.js
index ef258041b..9dee05ca2 100644
--- a/src/ui/CollapsedTable/index.js
+++ b/src/ui/CollapsedTable/index.js
@@ -1,3 +1 @@
-import CollapsedTable from './CollapsedTable'
-
-export default CollapsedTable
+export { default } from './CollapsedTable'
diff --git a/src/ui/DateFormatSelector/DateFormatSelector.container.js b/src/ui/DateFormatSelector/DateFormatSelector.container.js
deleted file mode 100644
index f8cbacb06..000000000
--- a/src/ui/DateFormatSelector/DateFormatSelector.container.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { connect } from 'react-redux'
-
-import { setDateFormat } from 'state/base/actions'
-import { getDateFormat } from 'state/base/selectors'
-
-import DateFormatSelector from './DateFormatSelector'
-
-const mapStateToProps = state => ({
- dateFormat: getDateFormat(state),
-})
-
-const mapDispatchToProps = {
- setDateFormat,
-}
-
-const DateFormatSelectorContainer = connect(mapStateToProps, mapDispatchToProps)(DateFormatSelector)
-
-export default DateFormatSelectorContainer
diff --git a/src/ui/DateFormatSelector/DateFormatSelector.js b/src/ui/DateFormatSelector/DateFormatSelector.js
index a49398e1b..c79c4195a 100644
--- a/src/ui/DateFormatSelector/DateFormatSelector.js
+++ b/src/ui/DateFormatSelector/DateFormatSelector.js
@@ -1,35 +1,31 @@
-import React, { PureComponent } from 'react'
+import React, { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { isEqual } from '@bitfinex/lib-js-util-base'
import Select from 'ui/Select'
import types from 'state/base/constants'
+import { setDateFormat } from 'state/base/actions'
+import { getDateFormat } from 'state/base/selectors'
-import { propTypes, defaultProps } from './DateFormatSelector.props'
-
-class DateFormatSelector extends PureComponent {
- handleClick = (format) => {
- const { dateFormat, setDateFormat } = this.props
- if (dateFormat !== format) {
- setDateFormat(format)
+const DateFormatSelector = () => {
+ const dispatch = useDispatch()
+ const dateFormat = useSelector(getDateFormat)
+ const handleClick = useCallback((format) => {
+ if (!isEqual(dateFormat, format)) {
+ dispatch(setDateFormat(format))
}
- }
-
- render() {
- const { dateFormat } = this.props
+ }, [dispatch, dateFormat, setDateFormat])
- return (
-
- )
- }
+ return (
+
+ )
}
-DateFormatSelector.propTypes = propTypes
-DateFormatSelector.defaultProps = defaultProps
-
export default DateFormatSelector
diff --git a/src/ui/DateFormatSelector/DateFormatSelector.props.js b/src/ui/DateFormatSelector/DateFormatSelector.props.js
deleted file mode 100644
index 9d09038a9..000000000
--- a/src/ui/DateFormatSelector/DateFormatSelector.props.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import PropTypes from 'prop-types'
-
-export const propTypes = {
- dateFormat: PropTypes.string.isRequired,
- setDateFormat: PropTypes.func.isRequired,
-}
-
-export const defaultProps = {
-}
diff --git a/src/ui/DateFormatSelector/index.js b/src/ui/DateFormatSelector/index.js
index 32d80ddc5..a3a3fe0b6 100644
--- a/src/ui/DateFormatSelector/index.js
+++ b/src/ui/DateFormatSelector/index.js
@@ -1,3 +1 @@
-import DateFormatSelector from './DateFormatSelector.container'
-
-export default DateFormatSelector
+export { default } from './DateFormatSelector'
diff --git a/src/ui/ExportButton/ExportButton.container.js b/src/ui/ExportButton/ExportButton.container.js
deleted file mode 100644
index 9ec2308c1..000000000
--- a/src/ui/ExportButton/ExportButton.container.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { connect } from 'react-redux'
-
-import { toggleExportDialog } from 'state/ui/actions'
-
-import ExportButton from './ExportButton'
-
-const mapDispatchToProps = {
- toggleDialog: toggleExportDialog,
-}
-
-const ExportButtonContainer = connect(null, mapDispatchToProps)(ExportButton)
-
-export default ExportButtonContainer
diff --git a/src/ui/ExportButton/ExportButton.js b/src/ui/ExportButton/ExportButton.js
deleted file mode 100644
index ce130d0d5..000000000
--- a/src/ui/ExportButton/ExportButton.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import { withTranslation } from 'react-i18next'
-import PropTypes from 'prop-types'
-import { Button } from '@blueprintjs/core'
-import { IconNames } from '@blueprintjs/icons'
-
-const ExportButton = ({ toggleDialog, t }) => (
-
-)
-
-ExportButton.propTypes = {
- toggleDialog: PropTypes.func.isRequired,
- t: PropTypes.func.isRequired,
-}
-
-ExportButton.defaultProps = {}
-
-export default withTranslation('translations')(ExportButton)
diff --git a/src/ui/ExportButton/index.js b/src/ui/ExportButton/index.js
deleted file mode 100644
index d797c39cc..000000000
--- a/src/ui/ExportButton/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import ExportButton from './ExportButton.container'
-
-export default ExportButton
diff --git a/src/ui/JSONFormat/_JSONFormat.scss b/src/ui/JSONFormat/_JSONFormat.scss
index 92fa01aa6..0b16ca493 100644
--- a/src/ui/JSONFormat/_JSONFormat.scss
+++ b/src/ui/JSONFormat/_JSONFormat.scss
@@ -1,5 +1,5 @@
.json-format {
- width: #{"max(500px, 40vw);"};
+ max-width: 500px;
overflow: hidden;
white-space: pre-wrap;
word-break: break-all;
diff --git a/src/ui/LangMenu/LangMenu.container.js b/src/ui/LangMenu/LangMenu.container.js
deleted file mode 100644
index 36957597a..000000000
--- a/src/ui/LangMenu/LangMenu.container.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { connect } from 'react-redux'
-
-import { setLang } from 'state/base/actions'
-import { getLocale } from 'state/base/selectors'
-
-import LangMenu from './LangMenu'
-
-const mapStateToProps = state => ({
- value: getLocale(state),
-})
-
-const mapDispatchToProps = {
- setLang,
-}
-
-const LangMenuContainer = connect(mapStateToProps, mapDispatchToProps)(LangMenu)
-
-export default LangMenuContainer
diff --git a/src/ui/LangMenu/LangMenu.js b/src/ui/LangMenu/LangMenu.js
index b01f6e09d..60f14e5d3 100644
--- a/src/ui/LangMenu/LangMenu.js
+++ b/src/ui/LangMenu/LangMenu.js
@@ -1,30 +1,33 @@
-import React from 'react'
+import React, { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
import _map from 'lodash/map'
import _keys from 'lodash/keys'
import Select from 'ui/Select'
+import { setLang } from 'state/base/actions'
import { LANGUAGE_NAMES } from 'locales/i18n'
-
-import { propTypes, defaultProps } from './LangMenu.props'
+import { getLocale } from 'state/base/selectors'
const items = _map(_keys(LANGUAGE_NAMES), (lang) => ({ value: lang, label: LANGUAGE_NAMES[lang] }))
-const LangMenu = (props) => {
- const { setLang, value } = props
+const LangMenu = () => {
+ const dispatch = useDispatch()
+ const currentValue = useSelector(getLocale)
+
+ const handleChange = useCallback((value) => {
+ dispatch(setLang(value))
+ }, [dispatch])
return (
)
}
-LangMenu.propTypes = propTypes
-LangMenu.defaultProps = defaultProps
-
export default LangMenu
diff --git a/src/ui/LangMenu/LangMenu.props.js b/src/ui/LangMenu/LangMenu.props.js
deleted file mode 100644
index 10cef93d3..000000000
--- a/src/ui/LangMenu/LangMenu.props.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import PropTypes from 'prop-types'
-
-export const propTypes = {
- value: PropTypes.string.isRequired,
- setLang: PropTypes.func.isRequired,
-}
-
-export const defaultProps = {}
diff --git a/src/ui/LangMenu/index.js b/src/ui/LangMenu/index.js
index 5a02526aa..52abf3d79 100644
--- a/src/ui/LangMenu/index.js
+++ b/src/ui/LangMenu/index.js
@@ -1,3 +1 @@
-import LangMenu from './LangMenu.container'
-
-export default LangMenu
+export { default } from './LangMenu'
diff --git a/src/ui/NavSwitcher/NavSwitcher.js b/src/ui/NavSwitcher/NavSwitcher.js
index 6e527c14e..dc8c5442d 100644
--- a/src/ui/NavSwitcher/NavSwitcher.js
+++ b/src/ui/NavSwitcher/NavSwitcher.js
@@ -1,11 +1,16 @@
-import React from 'react'
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
import classNames from 'classnames'
+import _map from 'lodash/map'
+import { isEqual } from '@bitfinex/lib-js-util-base'
import { tracker } from 'utils/trackers'
-import { propTypes, defaultProps } from './NavSwitcher.props'
-const NavSwitcher = (props) => {
- const { items, onChange, value: activeItem } = props
+const NavSwitcher = ({
+ items,
+ onChange,
+ value: activeItem,
+}) => {
const handleClick = (itemValue) => {
tracker.trackEvent(itemValue, 'Tab')
onChange(itemValue)
@@ -13,14 +18,18 @@ const NavSwitcher = (props) => {
return (
- {items.map((item) => {
+ {_map(items, (item) => {
const { label, value: itemValue } = item
const itemClasses = classNames('nav-switcher-item', {
- 'nav-switcher-item--active': itemValue === activeItem,
+ 'nav-switcher-item--active': isEqual(itemValue, activeItem),
})
return (
-
handleClick(itemValue)} key={itemValue}>
+ handleClick(itemValue)}
+ >
{label}
)
@@ -29,7 +38,13 @@ const NavSwitcher = (props) => {
)
}
-NavSwitcher.propTypes = propTypes
-NavSwitcher.defaultProps = defaultProps
+NavSwitcher.propTypes = {
+ items: PropTypes.arrayOf(PropTypes.shape({
+ label: PropTypes.string,
+ value: PropTypes.string,
+ })).isRequired,
+ onChange: PropTypes.func.isRequired,
+ value: PropTypes.string.isRequired,
+}
-export default NavSwitcher
+export default memo(NavSwitcher)
diff --git a/src/ui/NavSwitcher/NavSwitcher.props.js b/src/ui/NavSwitcher/NavSwitcher.props.js
deleted file mode 100644
index e2bde0ea4..000000000
--- a/src/ui/NavSwitcher/NavSwitcher.props.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import PropTypes from 'prop-types'
-
-export const propTypes = {
- items: PropTypes.array.isRequired,
- onChange: PropTypes.func.isRequired,
- value: PropTypes.string.isRequired,
-}
-
-export const defaultProps = {}
diff --git a/src/ui/NavSwitcher/index.js b/src/ui/NavSwitcher/index.js
index d0c747c03..3829155c0 100644
--- a/src/ui/NavSwitcher/index.js
+++ b/src/ui/NavSwitcher/index.js
@@ -1,3 +1 @@
-import NavSwitcher from './NavSwitcher'
-
-export default NavSwitcher
+export { default } from './NavSwitcher'
diff --git a/src/ui/ShowMilliseconds/ShowMilliseconds.container.js b/src/ui/ShowMilliseconds/ShowMilliseconds.container.js
deleted file mode 100644
index 4871c2516..000000000
--- a/src/ui/ShowMilliseconds/ShowMilliseconds.container.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { connect } from 'react-redux'
-
-import { showMilliseconds } from 'state/base/actions'
-import { getShowMilliseconds } from 'state/base/selectors'
-
-import ShowMilliseconds from './ShowMilliseconds'
-
-const mapStateToProps = state => ({
- milliseconds: getShowMilliseconds(state),
-})
-
-const mapDispatchToProps = {
- showMilliseconds,
-}
-
-const ShowMillisecondsContainer = connect(mapStateToProps, mapDispatchToProps)(ShowMilliseconds)
-
-export default ShowMillisecondsContainer
diff --git a/src/ui/ShowMilliseconds/ShowMilliseconds.js b/src/ui/ShowMilliseconds/ShowMilliseconds.js
index 9bca62ad4..18d0ff073 100644
--- a/src/ui/ShowMilliseconds/ShowMilliseconds.js
+++ b/src/ui/ShowMilliseconds/ShowMilliseconds.js
@@ -1,35 +1,27 @@
-import React, { PureComponent } from 'react'
+import React, { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
import { Checkbox } from '@blueprintjs/core'
import { tracker } from 'utils/trackers'
+import { showMilliseconds } from 'state/base/actions'
+import { getShowMilliseconds } from 'state/base/selectors'
-import { propTypes, defaultProps } from './ShowMilliseconds.props'
+const ShowMilliseconds = () => {
+ const dispatch = useDispatch()
+ const milliseconds = useSelector(getShowMilliseconds)
-class ShowMilliseconds extends PureComponent {
- handleChange = () => {
- const {
- milliseconds,
- showMilliseconds,
- } = this.props
+ const handleChange = useCallback(() => {
tracker.trackEvent('Display Milliseconds')
- showMilliseconds(!milliseconds)
- }
+ dispatch(showMilliseconds(!milliseconds))
+ }, [dispatch, tracker, milliseconds])
- render() {
- const {
- milliseconds,
- } = this.props
- return (
-
- )
- }
+ return (
+
+ )
}
-ShowMilliseconds.propTypes = propTypes
-ShowMilliseconds.defaultProps = defaultProps
-
export default ShowMilliseconds
diff --git a/src/ui/ShowMilliseconds/ShowMilliseconds.props.js b/src/ui/ShowMilliseconds/ShowMilliseconds.props.js
deleted file mode 100644
index 8a1c7a290..000000000
--- a/src/ui/ShowMilliseconds/ShowMilliseconds.props.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import PropTypes from 'prop-types'
-
-export const propTypes = {
- milliseconds: PropTypes.bool,
- showMilliseconds: PropTypes.func,
-}
-
-export const defaultProps = {
- milliseconds: false,
- showMilliseconds: () => {},
-}
diff --git a/src/ui/ShowMilliseconds/index.js b/src/ui/ShowMilliseconds/index.js
index 5c1ff1df7..8e4ad5c16 100644
--- a/src/ui/ShowMilliseconds/index.js
+++ b/src/ui/ShowMilliseconds/index.js
@@ -1,3 +1 @@
-import ShowMilliseconds from './ShowMilliseconds.container'
-
-export default ShowMilliseconds
+export { default } from './ShowMilliseconds'
diff --git a/src/ui/utils.js b/src/ui/utils.js
index 02ffa45ef..313df0d05 100644
--- a/src/ui/utils.js
+++ b/src/ui/utils.js
@@ -10,6 +10,18 @@ export const amountStyle = (amount) => {
})
}
+export const formatType = (type, amount) => {
+ const classes = amountStyle(amount)
+ return (
+ // Fragment fixes blueprint's parentCellHeight warnings
+ <>
+
+ {type}
+
+
+ )
+}
+
export const insertIf = (condition, ...elements) => (condition ? elements : [])
export const filterSelectorItem = (query, item) => item.toLowerCase().indexOf(query.toLowerCase()) >= 0
diff --git a/src/utils/columns.js b/src/utils/columns.js
index 55b990761..ac451707a 100644
--- a/src/utils/columns.js
+++ b/src/utils/columns.js
@@ -10,6 +10,7 @@ import _forEach from 'lodash/forEach'
import { Cell } from '@blueprintjs/table'
import { get, pick, isEqual } from '@bitfinex/lib-js-util-base'
+import JSONFormat from 'ui/JSONFormat'
import { formatAmount, fixedFloat } from 'ui/utils'
import LoadingPlaceholder from 'ui/LoadingPlaceholder'
@@ -235,6 +236,41 @@ export const getCellState = (isLoading, isNoData) => {
return null
}
+export const getCell = (content, t, tooltip) => {
+ const tooltipContent = getTooltipContent(tooltip || content, t)
+ return (
+
+ {content}
+ |
+ )
+}
+
+export const getJsonFormattedCell = (value) => {
+ const formattedValue = JSON.stringify(value, undefined, 2)
+ return (
+
+
+ {formattedValue }
+
+ |
+ )
+}
+
+export const getLinkCell = (link) => (
+
+ <>
+
+ {link}
+
+
+ |
+)
+
+
export const getRowsConfig = (isLoading, isNoData, numRows = 0) => {
if (isLoading) return 5
if (isNoData) return 1