+ {t('representative_uptime.current_status', 'Current Status')}
+
+
+ {t('representative_uptime.2w_uptime', '2W Uptime')}
+
+
+ {uptime_pct}%
-
-
- 2M Uptime
-
-
- {last60Pct ? `${last60Pct}%` : '-'}
-
+
+
+
+ {t('representative_uptime.2m_uptime', '2M Uptime')}
-
-
- 3M Uptime
-
-
- {last90Pct ? `${last90Pct}%` : '-'}
-
+
+ {last_60_pct ? `${last_60_pct}%` : '-'}
-
-
+
+
+ {t('representative_uptime.3m_uptime', '3M Uptime')}
+
+
+ {last_90_pct ? `${last_90_pct}%` : '-'}
+
- )
- }
+
+
+
+ )
}
RepresentativeUptime.propTypes = {
diff --git a/src/views/components/representatives-bandwidth-by-weight/representatives-bandwidth-by-weight.js b/src/views/components/representatives-bandwidth-by-weight/representatives-bandwidth-by-weight.js
index be04e8e2..5798027c 100644
--- a/src/views/components/representatives-bandwidth-by-weight/representatives-bandwidth-by-weight.js
+++ b/src/views/components/representatives-bandwidth-by-weight/representatives-bandwidth-by-weight.js
@@ -1,23 +1,25 @@
import React from 'react'
import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
import MetricCard from '@components/metric-card'
-export default class RepresentativesBandwidthByWeight extends React.Component {
- render() {
- const { metrics } = this.props
- return (
-
- )
- }
+export default function RepresentativesBandwidthByWeight({ metrics }) {
+ const { t } = useTranslation()
+ return (
+
+ )
}
RepresentativesBandwidthByWeight.propTypes = {
diff --git a/src/views/components/representatives-cemented-by-weight/representatives-cemented-by-weight.js b/src/views/components/representatives-cemented-by-weight/representatives-cemented-by-weight.js
index c19f8e65..c1e48394 100644
--- a/src/views/components/representatives-cemented-by-weight/representatives-cemented-by-weight.js
+++ b/src/views/components/representatives-cemented-by-weight/representatives-cemented-by-weight.js
@@ -1,23 +1,28 @@
import React from 'react'
import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
import MetricCard from '@components/metric-card'
-export default class RepresentativesCementedByWeight extends React.Component {
- render() {
- const { metrics } = this.props
- return (
-
- )
- }
+export default function RepresentativesCementedByWeight({ metrics }) {
+ const { t } = useTranslation()
+ return (
+
+ )
}
RepresentativesCementedByWeight.propTypes = {
diff --git a/src/views/components/representatives-checked-by-weight/representatives-checked-by-weight.js b/src/views/components/representatives-checked-by-weight/representatives-checked-by-weight.js
index a56a318a..fd9f0e7f 100644
--- a/src/views/components/representatives-checked-by-weight/representatives-checked-by-weight.js
+++ b/src/views/components/representatives-checked-by-weight/representatives-checked-by-weight.js
@@ -1,23 +1,28 @@
import React from 'react'
import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
import MetricCard from '@components/metric-card'
-export default class RepresentativesCheckedByWeight extends React.Component {
- render() {
- const { metrics } = this.props
- return (
-
- )
- }
+export default function RepresentativesCheckedByWeight({ metrics }) {
+ const { t } = useTranslation()
+ return (
+
+ )
}
RepresentativesCheckedByWeight.propTypes = {
diff --git a/src/views/components/representatives-cluster-charts/representatives-cluster-charts.js b/src/views/components/representatives-cluster-charts/representatives-cluster-charts.js
index 294ea1fe..c40214f6 100644
--- a/src/views/components/representatives-cluster-charts/representatives-cluster-charts.js
+++ b/src/views/components/representatives-cluster-charts/representatives-cluster-charts.js
@@ -10,6 +10,7 @@ import {
TooltipComponent,
SingleAxisComponent
} from 'echarts/components'
+import { useTranslation } from 'react-i18next'
import { CanvasRenderer } from 'echarts/renderers'
@@ -21,204 +22,204 @@ echarts.use([
CanvasRenderer
])
-export default class RepresentativesClusterCharts extends React.Component {
- render() {
- const { accounts, totalWeight } = this.props
+export default function RepresentativesClusterCharts({
+ accounts,
+ totalWeight
+}) {
+ const { t } = useTranslation()
+ const confirmations_data = []
+ const blocks_data = []
+ const peers_data = []
+ const bandwidth_data = []
+ const unchecked_data = []
+ accounts.forEach((a) => {
+ if (a.telemetry.cemented_behind > 1000) return
+ const weight = BigNumber(a.account_meta.weight)
+ .dividedBy(totalWeight)
+ .multipliedBy(100)
+ .toFixed()
+ const label = a.alias || a.account
+ confirmations_data.push([a.telemetry.cemented_behind, weight, label])
+ blocks_data.push([a.telemetry.block_behind, weight, label])
+ peers_data.push([a.telemetry.peer_count, weight, label])
+ unchecked_data.push([a.telemetry.unchecked_count, weight, label])
- const confirmationsData = []
- const blocksData = []
- const peersData = []
- const bandwidthData = []
- const uncheckedData = []
- accounts.forEach((a) => {
- if (a.telemetry.cemented_behind > 1000) return
- const weight = BigNumber(a.account_meta.weight)
- .dividedBy(totalWeight)
- .multipliedBy(100)
- .toFixed()
- const label = a.alias || a.account
- confirmationsData.push([a.telemetry.cemented_behind, weight, label])
- blocksData.push([a.telemetry.block_behind, weight, label])
- peersData.push([a.telemetry.peer_count, weight, label])
- uncheckedData.push([a.telemetry.unchecked_count, weight, label])
+ // exclude 0 (unlimited)
+ if (a.telemetry.bandwidth_cap)
+ bandwidth_data.push([
+ a.telemetry.bandwidth_cap / (1024 * 1024),
+ weight,
+ label
+ ])
+ })
- // exclude 0 (unlimited)
- if (a.telemetry.bandwidth_cap)
- bandwidthData.push([
- a.telemetry.bandwidth_cap / (1024 * 1024),
- weight,
- label
- ])
- })
-
- const seriesCommon = {
- type: 'scatter',
- coordinateSystem: 'singleAxis',
- symbolSize: (dataItem) => Math.min(Math.max(dataItem[1] * 6, 6), 35),
- labelLine: {
- show: true,
- length2: 2,
- lineStyle: {
- color: '#bbb'
- }
- },
- label: {
- show: true,
- formatter: (param) => param.data[2],
- minMargin: 10
- },
- tooltip: {
- className: 'echarts-tooltip',
- formatter: (params) => params.data[2]
+ const series_common = {
+ type: 'scatter',
+ coordinateSystem: 'singleAxis',
+ symbolSize: (data_item) => Math.min(Math.max(data_item[1] * 6, 6), 35),
+ labelLine: {
+ show: true,
+ length2: 2,
+ lineStyle: {
+ color: '#bbb'
}
+ },
+ label: {
+ show: true,
+ formatter: (param) => param.data[2],
+ minMargin: 10
+ },
+ tooltip: {
+ className: 'echarts-tooltip',
+ formatter: (params) => params.data[2]
}
+ }
- const titleCommon = {
- left: 'center',
- textStyle: {
- fontWeight: 'normal',
- fontFamily: 'IBM Plex Mono'
- }
+ const title_common = {
+ left: 'center',
+ textStyle: {
+ fontWeight: 'normal',
+ fontFamily: 'IBM Plex Mono'
}
+ }
- const option = {
- tooltip: {
- className: 'echarts-tooltip',
- position: 'top'
+ const option = {
+ tooltip: {
+ className: 'echarts-tooltip',
+ position: 'top'
+ },
+ title: [
+ {
+ text: t('representatives_cluster.conf_diff', 'Confirmations Behind'),
+ top: 20,
+ ...title_common
},
- title: [
- {
- text: 'Confirmations Behind',
- top: 20,
- ...titleCommon
- },
- {
- text: 'Blocks Behind',
- top: 140,
- ...titleCommon
- },
- {
- text: 'Unchecked Count',
- top: 260,
- ...titleCommon
- },
- {
- text: 'Bandwidth Limit',
- top: 380,
- ...titleCommon
- },
- {
- text: 'Peer Count',
- top: 500,
- ...titleCommon
+ {
+ text: t('representatives_cluster.blocks_diff', 'Blocks Behind'),
+ top: 140,
+ ...title_common
+ },
+ {
+ text: t('representatives_cluster.unchecked', 'Unchecked Count'),
+ top: 260,
+ ...title_common
+ },
+ {
+ text: t('common.bandwidth_limit', 'Bandwidth Limit'),
+ top: 380,
+ ...title_common
+ },
+ {
+ text: t('common.peers', 'Peers'),
+ top: 500,
+ ...title_common
+ }
+ ],
+ singleAxis: [
+ {
+ type: 'value',
+ height: '100px',
+ top: 0
+ },
+ {
+ type: 'value',
+ top: '120px',
+ height: '100px'
+ },
+ {
+ scale: true,
+ type: 'value',
+ top: '240px',
+ height: '100px'
+ },
+ {
+ type: 'value',
+ top: '360px',
+ height: '100px',
+ axisLabel: {
+ formatter: (value) => `${value} mb/s`
}
- ],
- singleAxis: [
- {
- type: 'value',
- height: '100px',
- top: 0
- },
- {
- type: 'value',
- top: '120px',
- height: '100px'
- },
- {
- scale: true,
- type: 'value',
- top: '240px',
- height: '100px'
- },
- {
- type: 'value',
- top: '360px',
- height: '100px',
- axisLabel: {
- formatter: (value) => `${value} mb/s`
- }
+ },
+ {
+ scale: true,
+ type: 'value',
+ top: '480px',
+ height: '100px'
+ }
+ ],
+ series: [
+ {
+ singleAxisIndex: 0,
+ labelLayout: {
+ y: 80,
+ align: 'left',
+ hideOverlap: true,
+ width: 20,
+ overflow: 'truncate'
},
- {
- scale: true,
- type: 'value',
- top: '480px',
- height: '100px'
- }
- ],
- series: [
- {
- singleAxisIndex: 0,
- labelLayout: {
- y: 80,
- align: 'left',
- hideOverlap: true,
- width: 20,
- overflow: 'truncate'
- },
- data: confirmationsData,
- ...seriesCommon
+ data: confirmations_data,
+ ...series_common
+ },
+ {
+ singleAxisIndex: 1,
+ labelLayout: {
+ y: 200,
+ align: 'left',
+ hideOverlap: true,
+ width: 20,
+ overflow: 'truncate'
},
- {
- singleAxisIndex: 1,
- labelLayout: {
- y: 200,
- align: 'left',
- hideOverlap: true,
- width: 20,
- overflow: 'truncate'
- },
- data: blocksData,
- ...seriesCommon
+ data: blocks_data,
+ ...series_common
+ },
+ {
+ singleAxisIndex: 2,
+ labelLayout: {
+ y: 320,
+ align: 'left',
+ hideOverlap: true,
+ width: 20,
+ overflow: 'truncate'
},
- {
- singleAxisIndex: 2,
- labelLayout: {
- y: 320,
- align: 'left',
- hideOverlap: true,
- width: 20,
- overflow: 'truncate'
- },
- data: uncheckedData,
- ...seriesCommon
+ data: unchecked_data,
+ ...series_common
+ },
+ {
+ singleAxisIndex: 3,
+ labelLayout: {
+ y: 440,
+ align: 'left',
+ hideOverlap: true,
+ width: 20,
+ overflow: 'truncate'
},
- {
- singleAxisIndex: 3,
- labelLayout: {
- y: 440,
- align: 'left',
- hideOverlap: true,
- width: 20,
- overflow: 'truncate'
- },
- data: bandwidthData,
- ...seriesCommon
+ data: bandwidth_data,
+ ...series_common
+ },
+ {
+ singleAxisIndex: 4,
+ labelLayout: {
+ y: 560,
+ align: 'left',
+ hideOverlap: true,
+ width: 20,
+ overflow: 'truncate'
},
- {
- singleAxisIndex: 4,
- labelLayout: {
- y: 560,
- align: 'left',
- hideOverlap: true,
- width: 20,
- overflow: 'truncate'
- },
- data: peersData,
- ...seriesCommon
- }
- ]
- }
-
- return (
- <>
-
-
- )
+ data: peers_data,
+ ...series_common
+ }
+ ]
}
+
+ return (
+ <>
+
+
+ )
}
RepresentativesClusterCharts.propTypes = {
diff --git a/src/views/components/representatives-country-by-weight/representatives-country-by-weight.js b/src/views/components/representatives-country-by-weight/representatives-country-by-weight.js
index 90fc25f5..c4d0ee57 100644
--- a/src/views/components/representatives-country-by-weight/representatives-country-by-weight.js
+++ b/src/views/components/representatives-country-by-weight/representatives-country-by-weight.js
@@ -1,22 +1,21 @@
import React from 'react'
import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
import MetricCard from '@components/metric-card'
-export default class RepresentativesCountryByWeight extends React.Component {
- render() {
- const { metrics } = this.props
- return (
-
- )
- }
+export default function RepresentativesCountryByWeight({ metrics }) {
+ const { t } = useTranslation()
+ return (
+
+ )
}
RepresentativesCountryByWeight.propTypes = {
diff --git a/src/views/components/representatives-filters/representatives-filters.js b/src/views/components/representatives-filters/representatives-filters.js
index 567c01df..0b81ca99 100644
--- a/src/views/components/representatives-filters/representatives-filters.js
+++ b/src/views/components/representatives-filters/representatives-filters.js
@@ -1,27 +1,27 @@
import React from 'react'
import PropTypes from 'prop-types'
import ClearIcon from '@material-ui/icons/Clear'
+import { useTranslation } from 'react-i18next'
import './representatives-filters.styl'
-export default class RepresentativesFilters extends React.Component {
- handleClick = () => {
+export default function RepresentativesFilters({ filter, field }) {
+ const { t } = useTranslation()
+ const handleClick = () => {
// clear filters
- this.props.filter()
+ filter()
}
- render() {
- if (!this.props.field) {
- return null
- }
-
- return (
-
- )
+ if (!field) {
+ return null
}
+
+ return (
+
+
+
{t('common.clear_filters', 'Clear Filters')}
+
+ )
}
RepresentativesFilters.propTypes = {
diff --git a/src/views/components/representatives-offline/representatives-offline.js b/src/views/components/representatives-offline/representatives-offline.js
index 0db8e78d..da87acca 100644
--- a/src/views/components/representatives-offline/representatives-offline.js
+++ b/src/views/components/representatives-offline/representatives-offline.js
@@ -1,6 +1,5 @@
import React from 'react'
import ImmutablePropTypes from 'react-immutable-proptypes'
-import PropTypes from 'prop-types'
import BigNumber from 'bignumber.js'
import { Link } from 'react-router-dom'
import Table from '@material-ui/core/Table'
@@ -9,64 +8,66 @@ import TableCell from '@material-ui/core/TableCell'
import TableContainer from '@material-ui/core/TableContainer'
import TableHead from '@material-ui/core/TableHead'
import TableRow from '@material-ui/core/TableRow'
+import { useTranslation } from 'react-i18next'
import { timeago } from '@core/utils'
import './representatives-offline.styl'
-export default class RepresentativesOffline extends React.Component {
- render() {
- const { accounts } = this.props
+export default function RepresentativesOffline({ accounts }) {
+ const { t } = useTranslation()
- const rows = accounts
- .filter((a) => !a.is_online)
- .map((p) => {
- return {
- account: p.account,
- alias: p.alias,
- is_online: p.is_online,
- weight: p.account_meta.weight || 0,
- last_online: p.last_online,
- diff: (p.last_online || 0) - (p.last_offline || 0)
- }
- })
+ const rows = accounts
+ .filter((a) => !a.is_online)
+ .map((p) => {
+ return {
+ account: p.account,
+ alias: p.alias,
+ is_online: p.is_online,
+ weight: p.account_meta.weight || 0,
+ last_online: p.last_online,
+ diff: (p.last_online || 0) - (p.last_offline || 0)
+ }
+ })
- const sorted = rows.sort((a, b) => b.weight - a.weight)
+ const sorted = rows.sort((a, b) => b.weight - a.weight)
- return (
-
-
-
-
- Offline Account
- Last Online
- Weight
+ return (
+
+
+
+
+
+ {t('representatives_offline.account', 'Offline Account')}
+
+
+ {t('representatives_offline.last_online', 'Last Online')}
+
+ {t('common.weight', 'Weight')}
+
+
+
+ {sorted.map((row) => (
+
+
+
+
+ {timeago.format(row.last_online * 1000, 'nano_short')}
+
+
+ {BigNumber(row.weight).shiftedBy(-30).toFormat(0)}
+
-
-
- {sorted.map((row) => (
-
-
-
-
- {timeago.format(row.last_online * 1000, 'nano_short')}
-
-
- {BigNumber(row.weight).shiftedBy(-30).toFormat(0)}
-
-
- ))}
-
-
-
- )
- }
+ ))}
+
+
+
+ )
}
RepresentativesOffline.propTypes = {
- accounts: ImmutablePropTypes.map,
- totalWeight: PropTypes.number
+ accounts: ImmutablePropTypes.map
}
diff --git a/src/views/components/representatives-provider-by-weight/representatives-provider-by-weight.js b/src/views/components/representatives-provider-by-weight/representatives-provider-by-weight.js
index fafb3430..74557723 100644
--- a/src/views/components/representatives-provider-by-weight/representatives-provider-by-weight.js
+++ b/src/views/components/representatives-provider-by-weight/representatives-provider-by-weight.js
@@ -1,22 +1,21 @@
import React from 'react'
import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
import MetricCard from '@components/metric-card'
-export default class RepresentativesProviderByWeight extends React.Component {
- render() {
- const { metrics } = this.props
- return (
-
- )
- }
+export default function RepresentativesProviderByWeight({ metrics }) {
+ const { t } = useTranslation()
+ return (
+
+ )
}
RepresentativesProviderByWeight.propTypes = {
diff --git a/src/views/components/representatives-quorum-charts/representatives-quorum-charts.js b/src/views/components/representatives-quorum-charts/representatives-quorum-charts.js
index 722cbd84..563da20d 100644
--- a/src/views/components/representatives-quorum-charts/representatives-quorum-charts.js
+++ b/src/views/components/representatives-quorum-charts/representatives-quorum-charts.js
@@ -1,230 +1,230 @@
-import React from 'react'
+import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import BigNumber from 'bignumber.js'
import ReactEChartsCore from 'echarts-for-react/lib/core'
import * as echarts from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent } from 'echarts/components'
+import { useTranslation } from 'react-i18next'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([TitleComponent, TooltipComponent, LineChart, CanvasRenderer])
-export default class RepresentativesQuorumCharts extends React.Component {
- componentDidMount() {
- this.props.load()
- }
+export default function RepresentativesQuorumCharts({ data, peerData, load }) {
+ const { t } = useTranslation()
- render() {
- const { data, peerData } = this.props
- const commonOptions = {
- tooltip: {
- className: 'echarts-tooltip',
- trigger: 'axis',
- formatter: (p) => {
- const values = p.map(
- (s) =>
- `${s.marker} ${s.data[2]} - ${BigNumber(s.data[1]).toFormat(0)}M`
- )
+ useEffect(() => {
+ load()
+ }, [load])
- values.unshift(p[0].axisValueLabel)
+ const commonOptions = {
+ tooltip: {
+ className: 'echarts-tooltip',
+ trigger: 'axis',
+ formatter: (p) => {
+ const values = p.map(
+ (s) =>
+ `${s.marker} ${s.data[2]} - ${BigNumber(s.data[1]).toFormat(0)}M`
+ )
- return values.join('
')
- }
- },
- xAxis: {
- type: 'time'
- },
- yAxis: {
- type: 'value',
- scale: true,
- axisLabel: {
- formatter: (value) => `${value}M`
- }
+ values.unshift(p[0].axisValueLabel)
+
+ return values.join('
')
+ }
+ },
+ xAxis: {
+ type: 'time'
+ },
+ yAxis: {
+ type: 'value',
+ scale: true,
+ axisLabel: {
+ formatter: (value) => `${value}M`
}
}
+ }
- const commonTitle = {
- top: 10,
- left: 'center',
- textStyle: {
- fontWeight: 'normal',
- fontFamily: 'IBM Plex Mono'
- }
+ const commonTitle = {
+ top: 10,
+ left: 'center',
+ textStyle: {
+ fontWeight: 'normal',
+ fontFamily: 'IBM Plex Mono'
}
+ }
- const onlineOption = {
- color: ['#5470c6', 'red', '#5470c6'],
- title: {
- text: 'Online Weight',
- ...commonTitle
+ const onlineOption = {
+ color: ['#5470c6', 'red', '#5470c6'],
+ title: {
+ text: t('representatives_quorum_chart.title', 'Online Weight'),
+ ...commonTitle
+ },
+ series: [
+ {
+ type: 'line',
+ showSymbol: false,
+ data: data.online_stake_total.max,
+ areaStyle: {},
+ lineStyle: {
+ opacity: 0
+ }
},
- series: [
- {
- type: 'line',
- showSymbol: false,
- data: data.online_stake_total.max,
- areaStyle: {},
- lineStyle: {
- opacity: 0
- }
- },
- {
- type: 'line',
- showSymbol: false,
- data: data.online_stake_total.median,
- lineStyle: {
- color: 'red'
- }
- },
- {
- type: 'line',
- showSymbol: false,
- data: data.online_stake_total.min,
- areaStyle: {
- color: 'white',
- opacity: 1
- },
- lineStyle: {
- opacity: 0
- }
+ {
+ type: 'line',
+ showSymbol: false,
+ data: data.online_stake_total.median,
+ lineStyle: {
+ color: 'red'
}
- ],
- ...commonOptions
- }
-
- const trendedOption = {
- color: ['#5470c6', 'red', '#5470c6'],
- title: {
- text: 'Trended Weight',
- ...commonTitle
},
- series: [
- {
- type: 'line',
- showSymbol: false,
- data: data.trended_stake_total.max,
- areaStyle: {},
- lineStyle: {
- opacity: 0
- }
- },
- {
- type: 'line',
- showSymbol: false,
- data: data.trended_stake_total.median,
- lineStyle: {
- color: 'red'
- }
+ {
+ type: 'line',
+ showSymbol: false,
+ data: data.online_stake_total.min,
+ areaStyle: {
+ color: 'white',
+ opacity: 1
},
- {
- type: 'line',
- showSymbol: false,
- data: data.trended_stake_total.min,
- areaStyle: {
- color: 'white',
- opacity: 1
- },
- lineStyle: {
- opacity: 0
- }
+ lineStyle: {
+ opacity: 0
}
- ],
- ...commonOptions
- }
+ }
+ ],
+ ...commonOptions
+ }
- const peersOption = {
- ...commonOptions,
- title: {
- text: 'Peers Weight',
- ...commonTitle
+ const trendedOption = {
+ color: ['#5470c6', 'red', '#5470c6'],
+ title: {
+ text: t('representatives_quorum_chart.trended_weight', 'Trended Weight'),
+ ...commonTitle
+ },
+ series: [
+ {
+ type: 'line',
+ showSymbol: false,
+ data: data.trended_stake_total.max,
+ areaStyle: {},
+ lineStyle: {
+ opacity: 0
+ }
},
- series: peerData.map((data) => ({
+ {
type: 'line',
showSymbol: false,
- data
- })),
- tooltip: {
- className: 'echarts-tooltip',
- trigger: 'axis',
- formatter: (p) => {
- const values = p.map(
- (s) =>
- `${s.marker} ${BigNumber(s.data[1]).toFormat(0)}M - ${
- new URL(s.data[2]).hostname
- }`
- )
- values.unshift(p[0].axisValueLabel)
- return values.join('
')
+ data: data.trended_stake_total.median,
+ lineStyle: {
+ color: 'red'
+ }
+ },
+ {
+ type: 'line',
+ showSymbol: false,
+ data: data.trended_stake_total.min,
+ areaStyle: {
+ color: 'white',
+ opacity: 1
+ },
+ lineStyle: {
+ opacity: 0
}
}
+ ],
+ ...commonOptions
+ }
+
+ const peersOption = {
+ ...commonOptions,
+ title: {
+ text: t('representatives_quorum_chart.peers_weight', 'Peers Weight'),
+ ...commonTitle
+ },
+ series: peerData.map((data) => ({
+ type: 'line',
+ showSymbol: false,
+ data
+ })),
+ tooltip: {
+ className: 'echarts-tooltip',
+ trigger: 'axis',
+ formatter: (p) => {
+ const values = p.map(
+ (s) =>
+ `${s.marker} ${BigNumber(s.data[1]).toFormat(0)}M - ${
+ new URL(s.data[2]).hostname
+ }`
+ )
+ values.unshift(p[0].axisValueLabel)
+ return values.join('
')
+ }
}
+ }
- const quorumOption = {
- color: ['#5470c6', 'red', '#5470c6'],
- title: {
- text: 'Quorum Delta',
- ...commonTitle
+ const quorumOption = {
+ color: ['#5470c6', 'red', '#5470c6'],
+ title: {
+ text: t('common.quorum_delta', 'Quorum Delta'),
+ ...commonTitle
+ },
+ series: [
+ {
+ type: 'line',
+ showSymbol: false,
+ data: data.quorum_delta.max,
+ areaStyle: {},
+ lineStyle: {
+ opacity: 0
+ }
},
- series: [
- {
- type: 'line',
- showSymbol: false,
- data: data.quorum_delta.max,
- areaStyle: {},
- lineStyle: {
- opacity: 0
- }
- },
- {
- type: 'line',
- showSymbol: false,
- data: data.quorum_delta.median,
- lineStyle: {
- color: 'red'
- }
+ {
+ type: 'line',
+ showSymbol: false,
+ data: data.quorum_delta.median,
+ lineStyle: {
+ color: 'red'
+ }
+ },
+ {
+ type: 'line',
+ showSymbol: false,
+ data: data.quorum_delta.min,
+ areaStyle: {
+ color: 'white',
+ opacity: 1
},
- {
- type: 'line',
- showSymbol: false,
- data: data.quorum_delta.min,
- areaStyle: {
- color: 'white',
- opacity: 1
- },
- lineStyle: {
- opacity: 0
- }
+ lineStyle: {
+ opacity: 0
}
- ],
- ...commonOptions
- }
-
- return (
- <>
-
-
-
-
-
- )
+ }
+ ],
+ ...commonOptions
}
+
+ return (
+ <>
+
+
+
+
+
+ )
}
RepresentativesQuorumCharts.propTypes = {
diff --git a/src/views/components/representatives-search/representatives-search.js b/src/views/components/representatives-search/representatives-search.js
index b8ea9876..3e70ecf2 100644
--- a/src/views/components/representatives-search/representatives-search.js
+++ b/src/views/components/representatives-search/representatives-search.js
@@ -1,54 +1,52 @@
import React from 'react'
import PropTypes from 'prop-types'
import ClearIcon from '@material-ui/icons/Clear'
+import { useTranslation } from 'react-i18next'
import { debounce } from '@core/utils'
import './representatives-search.styl'
-export default class RepresentativesSearch extends React.Component {
- constructor(props) {
- super(props)
+export default function RepresentativesSearch({ value, search }) {
+ const { t } = useTranslation()
+ const [search_value, set_search_value] = React.useState(value)
- this.state = {
- value: this.props.value || ''
- }
-
- this.search = debounce((value) => {
- this.props.search(value)
+ const debounce_search = React.useRef(
+ debounce((value) => {
+ search(value)
}, 300)
- }
+ )
- handleClick = () => {
- const value = ''
- this.setState({ value })
- this.props.search(value)
+ const handleClick = () => {
+ set_search_value('')
+ search('')
}
- handleChange = (event) => {
+ const handleChange = (event) => {
const { value } = event.target
- this.setState({ value })
- this.search(value)
+ set_search_value(value)
+ debounce_search.current(value)
}
- render = () => {
- return (
-
-
- {this.state.value && (
-
-
+ return (
+
+
- )
- }
+ value={search_value}
+ onChange={handleChange}
+ />
+ {search_value && (
+
+
+ )}
+
+ )
}
RepresentativesSearch.propTypes = {
diff --git a/src/views/components/representatives-version-by-weight/representatives-version-by-weight.js b/src/views/components/representatives-version-by-weight/representatives-version-by-weight.js
index 4a3f0954..858a2276 100644
--- a/src/views/components/representatives-version-by-weight/representatives-version-by-weight.js
+++ b/src/views/components/representatives-version-by-weight/representatives-version-by-weight.js
@@ -1,22 +1,21 @@
import React from 'react'
import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
import MetricCard from '@components/metric-card'
-export default class RepresentativesVersionByWeight extends React.Component {
- render() {
- const { metrics } = this.props
- return (
-
- )
- }
+export default function RepresentativesVersionByWeight({ metrics }) {
+ const { t } = useTranslation()
+ return (
+
+ )
}
RepresentativesVersionByWeight.propTypes = {
diff --git a/src/views/components/representatives-weight-chart/representatives-weight-chart.js b/src/views/components/representatives-weight-chart/representatives-weight-chart.js
index 4e676ddb..b1703fed 100644
--- a/src/views/components/representatives-weight-chart/representatives-weight-chart.js
+++ b/src/views/components/representatives-weight-chart/representatives-weight-chart.js
@@ -6,6 +6,7 @@ import BigNumber from 'bignumber.js'
import * as echarts from 'echarts/core'
import { PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent } from 'echarts/components'
+import { useTranslation } from 'react-i18next'
import { CanvasRenderer } from 'echarts/renderers'
@@ -14,68 +15,70 @@ echarts.use([TitleComponent, TooltipComponent, PieChart, CanvasRenderer])
const truncate = (str, n) =>
str.length > n ? `${str.substr(0, n - 1)}...` : str
-export default class RepresentativesWeightChart extends React.Component {
- render() {
- const { accounts, totalWeight, quorumTotal } = this.props
+export default function RepresentativesWeightChart({
+ accounts,
+ totalWeight,
+ quorumTotal
+}) {
+ const { t } = useTranslation()
+ const denominator = quorumTotal || totalWeight
- const denominator = quorumTotal || totalWeight
+ const weightData = []
+ accounts.forEach((a) => {
+ const bn = BigNumber(a.account_meta.weight)
+ const weight = bn.shiftedBy(-30).toFixed(0)
+ const pct = bn.dividedBy(denominator).multipliedBy(100).toFixed(1)
- const weightData = []
- accounts.forEach((a) => {
- const bn = BigNumber(a.account_meta.weight)
- const weight = bn.shiftedBy(-30).toFixed(0)
- const pct = bn.dividedBy(denominator).multipliedBy(100).toFixed(1)
+ const label = a.alias || a.account
+ weightData.push([weight, label, pct])
+ })
- const label = a.alias || a.account
- weightData.push([weight, label, pct])
- })
-
- const option = {
- tooltip: {
- className: 'echarts-tooltip',
- trigger: 'item',
- formatter: (p) =>
- `${p.data[1]}
${BigNumber(p.data[0]).toFormat(0)} (${
- p.data[2]
- } %)`
- },
- title: {
- top: 10,
- left: 'center',
- text: 'Weight Distribution by Rep',
- textStyle: {
- fontWeight: 'normal',
- fontFamily: 'IBM Plex Mono'
- }
- },
- series: [
- {
- type: 'pie',
- radius: '50%',
- avoidLabelOverlap: false,
- data: weightData.sort((a, b) => b[0] - a[0]),
- label: {
- bleedMargin: 30,
- formatter: (p) => `${truncate(p.data[1], 20)}: ${p.data[2]} %`
- },
- labelLayout: {
- height: 50,
- hideOverlap: true
- }
+ const option = {
+ tooltip: {
+ className: 'echarts-tooltip',
+ trigger: 'item',
+ formatter: (p) =>
+ `${p.data[1]}
${BigNumber(p.data[0]).toFormat(0)} (${p.data[2]} %)`
+ },
+ title: {
+ top: 10,
+ left: 'center',
+ text: t(
+ 'representatives_weight_chart.title',
+ 'Weight Distribution by Representative'
+ ),
+ textStyle: {
+ fontWeight: 'normal',
+ fontFamily: 'IBM Plex Mono'
+ }
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: '50%',
+ avoidLabelOverlap: false,
+ data: weightData.sort((a, b) => b[0] - a[0]),
+ label: {
+ bleedMargin: 30,
+ formatter: (p) => `${truncate(p.data[1], 20)}: ${p.data[2]} %`
+ },
+ labelLayout: {
+ height: 50,
+ hideOverlap: true
}
- ]
- }
-
- return (
- <>
-
-
- )
+ }
+ ]
}
+
+ return (
+ <>
+
+
+ )
}
RepresentativesWeightChart.propTypes = {
diff --git a/src/views/components/representatives-weight/representatives-weight.js b/src/views/components/representatives-weight/representatives-weight.js
index 0c9b4b89..53e6d30f 100644
--- a/src/views/components/representatives-weight/representatives-weight.js
+++ b/src/views/components/representatives-weight/representatives-weight.js
@@ -1,59 +1,62 @@
import React from 'react'
import BigNumber from 'bignumber.js'
import ImmutablePropTypes from 'react-immutable-proptypes'
+import { useTranslation } from 'react-i18next'
import './representatives-weight.styl'
-export default class RepresentativesWeight extends React.Component {
- render() {
- const { network } = this.props
- const onlineWeight = BigNumber(
- network.getIn(['weight', 'onlineWeight', 'median'], 0)
- )
- const trendedWeight = BigNumber(
- network.getIn(['weight', 'trendedWeight', 'median'], 0)
- )
- const quorumTotal = BigNumber.max(onlineWeight, trendedWeight)
- const quorumWeightDelta = quorumTotal.multipliedBy(0.67)
+export default function RepresentativesWeight({ network }) {
+ const { t } = useTranslation()
+ const online_weight = BigNumber(
+ network.getIn(['weight', 'onlineWeight', 'median'], 0)
+ )
+ const trended_weight = BigNumber(
+ network.getIn(['weight', 'trendedWeight', 'median'], 0)
+ )
+ const quorum_total = BigNumber.max(online_weight, trended_weight)
+ const quorum_weight_delta = quorum_total.multipliedBy(0.67)
- const onlineSelected = onlineWeight.isGreaterThan(trendedWeight)
+ const online_selected = online_weight.isGreaterThan(trended_weight)
- const onlineNano = onlineWeight.shiftedBy(-36)
- const trendedNano = trendedWeight.shiftedBy(-36)
- const quorumNano = quorumWeightDelta.shiftedBy(-36)
- return (
-
-
-
-
Trended
-
- {trendedNano.isNaN() ? '-' : `${trendedNano.toFormat(1)}M`}
-
+ const online_nano = online_weight.shiftedBy(-36)
+ const trended_nano = trended_weight.shiftedBy(-36)
+ const quorum_nano = quorum_weight_delta.shiftedBy(-36)
+ return (
+
+
+
+
+ {t('representatives_weight.trended', 'Trended')}
-
-
Online
-
- {onlineNano.isNaN() ? '-' : `${onlineNano.toFormat(1)}M`}
-
+
+ {trended_nano.isNaN() ? '-' : `${trended_nano.toFormat(1)}M`}
-
-
- Quorum Delta
-
-
- {quorumNano.isNaN() ? '-' : `${quorumNano.toFormat(1)}M`}
-
+
+
+
+ {t('common.online', 'Online')}
+
+
+ {online_nano.isNaN() ? '-' : `${online_nano.toFormat(1)}M`}
+
+
+
+
+ {t('common.quorum_delta', 'Quorum Delta')}
+
+
+ {quorum_nano.isNaN() ? '-' : `${quorum_nano.toFormat(1)}M`}
- )
- }
+
+ )
}
RepresentativesWeight.propTypes = {
diff --git a/src/views/components/representatives/representatives.js b/src/views/components/representatives/representatives.js
index 51df86b5..a198e1d6 100644
--- a/src/views/components/representatives/representatives.js
+++ b/src/views/components/representatives/representatives.js
@@ -6,6 +6,7 @@ import LinearProgress from '@material-ui/core/LinearProgress'
import { DataGrid, GridOverlay } from '@material-ui/data-grid'
import BigNumber from 'bignumber.js'
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'
+import { useTranslation } from 'react-i18next'
import Uptime from '@components/uptime'
import { timeago } from '@core/utils'
@@ -23,11 +24,12 @@ function LoadingOverlay() {
}
function bytesToSize(bytes) {
+ const { t } = useTranslation()
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
if (bytes === 0)
return {
value: 0,
- label: 'Unlimited'
+ label: t('common.unlimited', 'Unlimited')
}
const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10)
@@ -46,230 +48,224 @@ function bytesToSize(bytes) {
}
}
-export default class Representatives extends React.Component {
- render() {
- const {
- accounts,
- totalWeight,
- isLoading,
- quorumTotal,
- table_height = 600
- } = this.props
+export default function Representatives({
+ accounts,
+ totalWeight,
+ quorumTotal,
+ isLoading,
+ table_height = 600
+}) {
+ const { t } = useTranslation()
+ const denominator = quorumTotal || totalWeight
- const denominator = quorumTotal || totalWeight
-
- const columns = [
- {
- field: 'status',
- headerName: 'On',
- width: 20,
- renderCell: (p) =>
,
- valueGetter: (p) => p.row.is_online
- },
- {
- field: 'alias',
- headerName: 'Alias',
- width: 130
- },
- {
- field: 'account',
- headerName: 'Account',
- renderCell: (p) => (
-
{p.row.account}
- ),
- width: 160
- },
- {
- field: 'weight',
- headerName: 'Weight',
- width: 140,
- valueFormatter: (p) =>
- p.row.account_meta.weight
- ? `${BigNumber(p.row.account_meta.weight)
- .shiftedBy(-30)
- .toFormat(0)}`
- : null,
- valueGetter: (p) => p.row.account_meta.weight
- },
- {
- field: 'weight_pct',
- headerName: '%',
- width: 80,
- valueFormatter: (p) =>
- p.row.account_meta.weight
- ? `${BigNumber(p.row.account_meta.weight)
- .dividedBy(denominator)
- .multipliedBy(100)
- .toFixed(2)}%`
- : null,
- valueGetter: (p) =>
- p.row.account_meta.weight
- ? BigNumber(p.row.account_meta.weight)
- .dividedBy(denominator)
- .multipliedBy(100)
- : null
- },
- {
- field: 'confs_behind',
- headerName: 'Confs Behind',
- width: 145,
- valueFormatter: (p) =>
- p.row.telemetry.cemented_behind
- ? BigNumber(p.row.telemetry.cemented_behind).toFormat()
- : null,
- valueGetter: (p) => p.row.telemetry.cemented_behind
- },
- {
- field: 'uptime',
- headerName: 'Uptime',
- width: 150,
- renderCell: (p) =>
,
- valueGetter: (p) => (p.row.last_online || 0) - (p.row.last_offline || 0)
- },
- {
- field: 'version',
- headerName: 'Version',
- width: 110,
- valueGetter: (p) => p.row.version
- },
- {
- field: 'bandwidth_cap',
- headerName: 'BW Limit',
- width: 120,
- valueFormatter: (p) => {
- if (p.row.telemetry.bandwidth_cap === 0) return 'Unlimited'
- return p.row.telemetry.bandwidth_cap
- ? bytesToSize(p.row.telemetry.bandwidth_cap).label
- : null
- },
- valueGetter: (p) => {
- if (p.row.telemetry.bandwidth_cap === 0) return Infinity
- return p.row.telemetry.bandwidth_cap
- ? bytesToSize(p.row.telemetry.bandwidth_cap).value
- : null
- }
- },
- {
- field: 'peer_count',
- headerName: 'Peers',
- width: 100,
- valueGetter: (p) => p.row.telemetry.peer_count
- },
- {
- field: 'port',
- headerName: 'Port',
- valueGetter: (p) => p.row.telemetry.port
- },
- {
- field: 'blocks_behind',
- headerName: 'Blocks Behind',
- width: 145,
- valueFormatter: (p) =>
- p.row.telemetry.block_behind
- ? BigNumber(p.row.telemetry.block_behind).toFormat()
- : null,
- valueGetter: (p) => p.row.telemetry.block_behind
- },
- {
- field: 'cemented_count',
- headerName: 'Confs.',
- width: 140,
- valueFormatter: (p) =>
- p.row.telemetry.cemented_count
- ? BigNumber(p.row.telemetry.cemented_count).toFormat()
- : null,
- valueGetter: (p) => p.row.telemetry.cemented_count
- },
- {
- field: 'block_count',
- headerName: 'Blocks',
- width: 140,
- valueFormatter: (p) =>
- p.row.telemetry.block_count
- ? BigNumber(p.row.telemetry.block_count).toFormat()
- : null,
- valueGetter: (p) => p.row.telemetry.block_count
+ const columns = [
+ {
+ field: 'status',
+ headerName: 'On',
+ width: 20,
+ renderCell: (p) =>
,
+ valueGetter: (p) => p.row.is_online
+ },
+ {
+ field: 'alias',
+ headerName: t('representatives.alias', 'Alias'),
+ width: 130
+ },
+ {
+ field: 'account',
+ headerName: t('common.account', { count: 1, defaultValue: 'Account' }),
+ renderCell: (p) =>
{p.row.account},
+ width: 160
+ },
+ {
+ field: 'weight',
+ headerName: t('common.weight', 'Weight'),
+ width: 140,
+ valueFormatter: (p) =>
+ p.row.account_meta.weight
+ ? `${BigNumber(p.row.account_meta.weight).shiftedBy(-30).toFormat(0)}`
+ : null,
+ valueGetter: (p) => p.row.account_meta.weight
+ },
+ {
+ field: 'weight_pct',
+ headerName: '%',
+ width: 80,
+ valueFormatter: (p) =>
+ p.row.account_meta.weight
+ ? `${BigNumber(p.row.account_meta.weight)
+ .dividedBy(denominator)
+ .multipliedBy(100)
+ .toFixed(2)}%`
+ : null,
+ valueGetter: (p) =>
+ p.row.account_meta.weight
+ ? BigNumber(p.row.account_meta.weight)
+ .dividedBy(denominator)
+ .multipliedBy(100)
+ : null
+ },
+ {
+ field: 'confs_behind',
+ headerName: t('representatives.confs_behind', 'Confs Behind'),
+ width: 145,
+ valueFormatter: (p) =>
+ p.row.telemetry.cemented_behind
+ ? BigNumber(p.row.telemetry.cemented_behind).toFormat()
+ : null,
+ valueGetter: (p) => p.row.telemetry.cemented_behind
+ },
+ {
+ field: 'uptime',
+ headerName: t('representatives.uptime', 'Uptime'),
+ width: 150,
+ renderCell: (p) =>
,
+ valueGetter: (p) => (p.row.last_online || 0) - (p.row.last_offline || 0)
+ },
+ {
+ field: 'version',
+ headerName: t('common.version', 'Version'),
+ width: 110,
+ valueGetter: (p) => p.row.version
+ },
+ {
+ field: 'bandwidth_cap',
+ headerName: t('representatives.bandwidth_cap', 'BW Limit'),
+ width: 120,
+ valueFormatter: (p) => {
+ if (p.row.telemetry.bandwidth_cap === 0)
+ return t('common.unlimited', 'Unlimited')
+ return p.row.telemetry.bandwidth_cap
+ ? bytesToSize(p.row.telemetry.bandwidth_cap).label
+ : null
},
- {
- field: 'unchecked_count',
- headerName: 'Unchecked',
- width: 140,
- valueFormatter: (p) =>
- p.row.telemetry.unchecked_count
- ? BigNumber(p.row.telemetry.unchecked_count).toFormat()
- : null,
- valueGetter: (p) => p.row.telemetry.unchecked_count
- },
- {
- field: 'cpu_cores',
- headerName: 'CPU Cores',
- width: 130,
- valueGetter: (p) => p.row.representative_meta.cpu_cores
- },
- {
- field: 'cpu_model',
- hide: true,
- headerName: 'CPU Model',
- valueGetter: (p) => p.row.representative_meta.cpu_model
- },
- {
- field: 'watt_hour',
- width: 120,
- headerName: 'TDP (wH)'
- },
- {
- field: 'protocol_version',
- headerName: 'Protocol',
- width: 110,
- valueGetter: (p) => p.row.telemetry.protocol_version
- },
- {
- field: 'last_seen',
- width: 130,
- headerName: 'Last Seen',
- renderCell: (p) =>
- p.row.is_online ? (
-
- ) : (
- timeago.format(p.row.last_seen * 1000, 'nano_short')
- ),
- valueGetter: (p) => Math.floor(Date.now() / 1000) - p.row.last_seen
- },
- {
- field: 'asname',
- headerName: 'Host ASN',
- width: 130,
- valueGetter: (p) => p.row.network.asname
- },
- {
- field: 'country',
- headerName: 'Country',
- width: 130,
- valueGetter: (p) => p.row.network.country
- },
- {
- field: 'address',
- headerName: 'Address',
- valueGetter: (p) => p.row.telemetry.address
+ valueGetter: (p) => {
+ if (p.row.telemetry.bandwidth_cap === 0) return Infinity
+ return p.row.telemetry.bandwidth_cap
+ ? bytesToSize(p.row.telemetry.bandwidth_cap).value
+ : null
}
- ]
- return (
-
- row.account}
- rows={accounts.toJS()}
- sortModel={[{ field: 'weight', sort: 'desc' }]}
- />
-
- )
- }
+ },
+ {
+ field: 'peer_count',
+ headerName: t('common.peers', 'Peers'),
+ width: 100,
+ valueGetter: (p) => p.row.telemetry.peer_count
+ },
+ {
+ field: 'port',
+ headerName: t('common.port', 'Port'),
+ valueGetter: (p) => p.row.telemetry.port
+ },
+ {
+ field: 'blocks_behind',
+ headerName: t('representatives.blocks_behind', 'Blocks Behind'),
+ width: 145,
+ valueFormatter: (p) =>
+ p.row.telemetry.block_behind
+ ? BigNumber(p.row.telemetry.block_behind).toFormat()
+ : null,
+ valueGetter: (p) => p.row.telemetry.block_behind
+ },
+ {
+ field: 'cemented_count',
+ headerName: t('representatives.cemented_count', 'Confs.'),
+ width: 140,
+ valueFormatter: (p) =>
+ p.row.telemetry.cemented_count
+ ? BigNumber(p.row.telemetry.cemented_count).toFormat()
+ : null,
+ valueGetter: (p) => p.row.telemetry.cemented_count
+ },
+ {
+ field: 'block_count',
+ headerName: t('common.blocks', 'Blocks'),
+ width: 140,
+ valueFormatter: (p) =>
+ p.row.telemetry.block_count
+ ? BigNumber(p.row.telemetry.block_count).toFormat()
+ : null,
+ valueGetter: (p) => p.row.telemetry.block_count
+ },
+ {
+ field: 'unchecked_count',
+ headerName: t('common.unchecked_count', 'Unchecked'),
+ width: 140,
+ valueFormatter: (p) =>
+ p.row.telemetry.unchecked_count
+ ? BigNumber(p.row.telemetry.unchecked_count).toFormat()
+ : null,
+ valueGetter: (p) => p.row.telemetry.unchecked_count
+ },
+ {
+ field: 'cpu_cores',
+ headerName: t('representatives.cpu_cores', 'CPU Cores'),
+ width: 130,
+ valueGetter: (p) => p.row.representative_meta.cpu_cores
+ },
+ {
+ field: 'cpu_model',
+ hide: true,
+ headerName: t('representatives.cpu_model', 'CPU Model'),
+ valueGetter: (p) => p.row.representative_meta.cpu_model
+ },
+ {
+ field: 'watt_hour',
+ width: 120,
+ headerName: t('representatives.tdp', 'TDP (wH)')
+ },
+ {
+ field: 'protocol_version',
+ headerName: t('representatives.protocol_version', 'Protocol'),
+ width: 110,
+ valueGetter: (p) => p.row.telemetry.protocol_version
+ },
+ {
+ field: 'last_seen',
+ width: 130,
+ headerName: t('representatives.last_seen', 'Last Seen'),
+ renderCell: (p) =>
+ p.row.is_online ? (
+
+ ) : (
+ timeago.format(p.row.last_seen * 1000, 'nano_short')
+ ),
+ valueGetter: (p) => Math.floor(Date.now() / 1000) - p.row.last_seen
+ },
+ {
+ field: 'asname',
+ headerName: t('representatives.host_asn', 'Host ASN'),
+ width: 130,
+ valueGetter: (p) => p.row.network.asname
+ },
+ {
+ field: 'country',
+ headerName: t('common.country', 'Country'),
+ width: 130,
+ valueGetter: (p) => p.row.network.country
+ },
+ {
+ field: 'address',
+ headerName: t('common.address', 'Address'),
+ valueGetter: (p) => p.row.telemetry.address
+ }
+ ]
+ return (
+
+ row.account}
+ rows={accounts.toJS()}
+ sortModel={[{ field: 'weight', sort: 'desc' }]}
+ />
+
+ )
}
Representatives.propTypes = {
diff --git a/src/views/components/search-bar/search-bar.js b/src/views/components/search-bar/search-bar.js
index 80c3ba91..bcfe843b 100644
--- a/src/views/components/search-bar/search-bar.js
+++ b/src/views/components/search-bar/search-bar.js
@@ -1,6 +1,7 @@
import React from 'react'
import ClearIcon from '@material-ui/icons/Clear'
import SearchIcon from '@material-ui/icons/Search'
+import { useTranslation } from 'react-i18next'
import history from '@core/history'
@@ -9,49 +10,44 @@ import './search-bar.styl'
const ACCOUNT_REGEX = /((nano|xrb)_)?[13][13-9a-km-uw-z]{59}/
const BLOCK_REGEX = /[0-9A-F]{64}/
-export default class SearchBar extends React.Component {
- constructor(props) {
- super(props)
+export default function SearchBar() {
+ const { t } = useTranslation()
+ const [value, set_value] = React.useState('')
+ const [invalid, set_invalid] = React.useState(false)
- this.state = {
- value: '',
- invalid: false
- }
- }
-
- handleClick = () => {
- const value = ''
- this.setState({ value })
+ const handleClick = () => {
+ set_value('')
}
- handleChange = (event) => {
+ const handleChange = (event) => {
const { value } = event.target
- this.setState({ value })
+ set_value(value)
if (ACCOUNT_REGEX.test(value) || BLOCK_REGEX.test(value)) {
history.push(`/${value}`)
} else {
- this.setState({ invalid: true })
+ set_invalid(true)
}
}
- render() {
- const isFilled = Boolean(this.state.value)
- return (
-
-
-
- {this.state.value && (
-
-
+ const isFilled = Boolean(value)
+ return (
+
+
+
- )
- }
+ value={value}
+ onChange={handleChange}
+ />
+ {value && (
+
+
+ )}
+
+ )
}
diff --git a/src/views/components/uptime/uptime.js b/src/views/components/uptime/uptime.js
index a774b6a1..2b7af79d 100644
--- a/src/views/components/uptime/uptime.js
+++ b/src/views/components/uptime/uptime.js
@@ -1,54 +1,54 @@
import React from 'react'
import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
import './uptime.styl'
const online = '#3bd671'
const offline = '#ee6666'
-export default class Uptime extends React.Component {
- render() {
- const { data, length, expanded } = this.props
-
- const ticks = []
- const sliced = length ? data.slice(0, length) : data
- const height = expanded ? 18 : 14
- const width = expanded ? 4 : 3
- const spacing = expanded ? 4 : 2
- sliced.forEach((d, key) =>
- ticks.push(
-
- )
+export default function Uptime({ data, length, expanded }) {
+ const { t } = useTranslation()
+ const ticks = []
+ const sliced = length ? data.slice(0, length) : data
+ const height = expanded ? 18 : 14
+ const width = expanded ? 4 : 3
+ const spacing = expanded ? 4 : 2
+ sliced.forEach((d, key) =>
+ ticks.push(
+
)
+ )
- return (
-
-
- {ticks}
-
- {Boolean(expanded) && (
-
-
Now
-
- {Math.round((sliced[sliced.length - 1].interval * 2) / 24)} days
- ago
-
+ return (
+
+
+ {ticks}
+
+ {Boolean(expanded) && (
+
+
{t('uptime.now', 'Now')}
+
+ {`${Math.round((sliced[sliced.length - 1].interval * 2) / 24)} ${t(
+ 'uptime.days_ago',
+ 'days ago'
+ )}`}
- )}
-
- )
- }
+
+ )}
+
+ )
}
Uptime.propTypes = {
diff --git a/src/views/pages/account/account.js b/src/views/pages/account/account.js
index ed860f57..c0777ec6 100644
--- a/src/views/pages/account/account.js
+++ b/src/views/pages/account/account.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import ImmutablePropTypes from 'react-immutable-proptypes'
import Tabs from '@material-ui/core/Tabs'
@@ -9,6 +9,7 @@ import FilterNoneIcon from '@material-ui/icons/FilterNone'
import IconButton from '@material-ui/core/IconButton'
import copy from 'copy-text-to-clipboard'
import Tooltip from '@material-ui/core/Tooltip'
+import { useTranslation } from 'react-i18next'
import RepresentativeTelemetryChart from '@components/representative-telemetry-chart'
import RepresentativeDelegators from '@components/representative-delegators'
@@ -27,9 +28,7 @@ import Menu from '@components/menu'
import './account.styl'
-function TabPanel(props) {
- const { children, value, index, ...other } = props
-
+function TabPanel({ children, value, index, ...other }) {
return (
{value === index && children}
@@ -43,227 +42,239 @@ TabPanel.propTypes = {
index: PropTypes.number
}
-export default class AccountPage extends React.Component {
- constructor(props) {
- super(props)
-
- this.state = {
- value: 0
- }
- }
+export default function AccountPage({
+ match,
+ getAccount,
+ account,
+ showNotification
+}) {
+ const { t } = useTranslation()
+ const [value, setValue] = React.useState(0)
- handleChange = (event, value) => {
- this.setState({ value })
+ const handleChange = (event, newValue) => {
+ setValue(newValue)
}
- handleClick = () => {
- const { address } = this.props.match.params
+ const handleClick = () => {
+ const { address } = match.params
copy(`nano_${address}`)
- this.props.showNotification({
- message: 'Account address copied',
+ showNotification({
+ message: t('account_page.copy_notification', 'Account address copied'),
severity: 'success'
})
}
- componentDidMount() {
- const { address } = this.props.match.params
- this.props.getAccount(`nano_${address}`)
- }
-
- componentDidUpdate(prevProps) {
- const { address } = this.props.match.params
- const prevAddress = prevProps.match.params.address
- if (address !== prevAddress) {
- this.props.getAccount(`nano_${address}`)
- }
- }
-
- render() {
- const { account } = this.props
+ useEffect(() => {
+ const { address } = match.params
+ getAccount(`nano_${address}`)
+ }, [match.params.address])
- const isLoading = account.get('is_loading')
- const isOpened = account.getIn(['account_meta', 'block_count'])
+ const isLoading = account.get('is_loading')
+ const isOpened = account.getIn(['account_meta', 'block_count'])
- return (
- <>
-
-
-
-
{account.alias}
+ return (
+ <>
+
+
+
+
{account.alias}
+
+
+
+
+ {t('account_page.address', 'Account Address')}
+
+
+ {account.account ||
+ {!isLoading && (
+
+
+
+
+ )}
-
-
-
Account Address
-
- {account.account ||
}
+
+ {!isLoading ? (
+
+
- {!isLoading && (
-
-
-
-
- )}
+ ) : (
+
+ )}
+
+
+ {isLoading && (
+
+ )}
+ {Boolean(account.representative) && (
+
+
+
-
- {!isLoading ? (
-
-
+
+
+
+
+
+
+
+
- ) : (
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ {!isLoading && !isOpened ? (
+
+
+ {t(
+ 'account_page.unopened_title',
+ "This account hasn't been opened yet"
)}
-
+
+
+ {t(
+ 'account_page.unopened_description',
+ "While the account address is valid, no blocks have been observed. If NANO has been sent to this account, it still needs to publish a corresponding block to receive the funds and establish an opening balance. An account's balance can only be updated by the account holder as they are the only ones who can publish blocks to their chain."
+ )}
+
+
+ {t(
+ 'account_page.unopened_note',
+ 'If an opening block has already been published, it may take a few moments to spread through the network and be observed by the nano.community nodes.'
+ )}
+
- {isLoading && (
-
- )}
- {Boolean(account.representative) && (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {Boolean(!account.representative) && (
+
+
-
- )}
- {!isLoading && !isOpened ? (
-
-
This account hasn't been opened yet
-
- While the account address is valid, no blocks have been
- observed. If NANO has been sent to this account, it still needs
- to publish a corresponding block to receive the funds and
- establish an opening balance. An accounts balance can only be
- updated by the account holder as they are the only ones who can
- publish blocks to their chain.
-
-
- If an opening block has already been published, it may take a
- few moments to spread through the network and be observed by the
- nano.community nodes.
-
-
- ) : (
- !isLoading && (
- <>
- {Boolean(!account.representative) && (
-
- )}
-
-
- {/*
*/}
-
-
-
- )
- )}
-
- {!isLoading && (
-
-
+ {/*
*/}
+
+
+
+ )
)}
-
- )
- }
+
+ {!isLoading && (
+
+
+ )}
+
+ )
}
AccountPage.propTypes = {
diff --git a/src/views/pages/block/block.js b/src/views/pages/block/block.js
index b6c17b19..90119e0b 100644
--- a/src/views/pages/block/block.js
+++ b/src/views/pages/block/block.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import ImmutablePropTypes from 'react-immutable-proptypes'
import LinearProgress from '@material-ui/core/LinearProgress'
@@ -7,6 +7,7 @@ import FilterNoneIcon from '@material-ui/icons/FilterNone'
import IconButton from '@material-ui/core/IconButton'
import copy from 'copy-text-to-clipboard'
import Tooltip from '@material-ui/core/Tooltip'
+import { useTranslation } from 'react-i18next'
import Seo from '@components/seo'
import BlockInfo from '@components/block-info'
@@ -34,13 +35,15 @@ const getBlockType = (block) => {
}
function BlockOperation({ type, block }) {
- const sourceAccount =
+ const { t } = useTranslation()
+
+ const source_account =
block.getIn(['blockInfo', 'source_account']) ||
block.getIn(['blockInfo', 'contents', 'source'])
- const destinationAccount =
+ const destination_account =
block.getIn(['blockInfo', 'contents', 'link_as_account']) ||
block.getIn(['blockInfo', 'contents', 'destination'])
- const votingWeight =
+ const voting_weight =
block.getIn(['blockInfo', 'contents', 'balance']) ||
block.getIn(['blockInfo', 'balance'])
@@ -48,14 +51,18 @@ function BlockOperation({ type, block }) {
case 'send':
return (
-
Receiving Account
+
+ {t('block_page.receiving_account', 'Receiving Account')}
+
-
-
Amount
+
+ {t('block_page.amount', 'Amount')}
+
@@ -66,13 +73,17 @@ function BlockOperation({ type, block }) {
case 'receive':
return (
-
Sending Account
+
+ {t('block_page.sending_account', 'Sending Account')}
+
-
-
Amount
+
+ {t('block_page.amount', 'Amount')}
+
@@ -83,17 +94,24 @@ function BlockOperation({ type, block }) {
case 'change':
return (
-
Delegated Representative
+
+ {t(
+ 'block_page.delegated_representative',
+ 'Delegated Representative'
+ )}
+
-
Voting Weight
+
+ {t('block_page.voting_weight', 'Voting Weight')}
+
-
)
@@ -105,10 +123,14 @@ function BlockOperation({ type, block }) {
) {
return (
-
Description
+
+ {t('block_page.description', 'Description')}
+
- Epoch v1 — Upgraded account-chains from legacy blocks (open,
- receive, send, change) to state blocks.
+ {t(
+ 'block_page.epoch_v1',
+ 'Epoch v1 — Upgraded account-chains from legacy blocks (open, receive, send, change) to state blocks.'
+ )}
)
@@ -118,10 +140,14 @@ function BlockOperation({ type, block }) {
) {
return (
-
Description
+
+ {t('block_page.description', 'Description')}
+
- Epoch v2 - Upgraded account-chains to use higher Proof-of-Work
- difficulty.
+ {t(
+ 'block_page.epoch_v2',
+ 'Epoch v2 - Upgraded account-chains to use higher Proof-of-Work difficulty.'
+ )}
)
@@ -133,13 +159,17 @@ function BlockOperation({ type, block }) {
case 'open':
return (
-
Sending Account
+
+ {t('block_page.sending_account', 'Sending Account')}
+
-
-
Amount
+
+ {t('block_page.amount', 'Amount')}
+
@@ -154,78 +184,77 @@ BlockOperation.propTypes = {
type: PropTypes.string
}
-export default class BlockPage extends React.Component {
- componentDidMount() {
- const { hash } = this.props.match.params
- this.props.getBlock(hash)
- }
+export default function BlockPage({
+ block,
+ getBlock,
+ showNotification,
+ match
+}) {
+ const { t } = useTranslation()
+ const { hash } = match.params
- componentDidUpdate(prevProps) {
- const { hash } = this.props.match.params
- const prevHash = prevProps.match.params.hash
- if (hash !== prevHash) {
- this.props.getBlock(hash)
- }
- }
+ useEffect(() => {
+ getBlock(hash)
+ }, [hash])
- handleClick = () => {
- const { hash } = this.props.match.params
+ const handleClick = () => {
copy(hash)
- this.props.showNotification({
- message: 'Block hash copied',
+ showNotification({
+ message: t('block_page.copy_notification', 'Block hash copied'),
severity: 'success'
})
}
- render() {
- const { block } = this.props
- const { hash } = this.props.match.params
-
- const isLoading = block.get('isLoading')
- const type = getBlockType(block)
-
- return (
- <>
-
-
-
-
Block Hash
-
{hash}
- {!isLoading && (
-
-
-
-
- )}
-
- {isLoading && (
-
- )}
- {!isLoading && (
- <>
-
-
-
+ const is_loading = block.get('isLoading')
+ const type = getBlockType(block)
+
+ return (
+ <>
+
+
+
+
+ {t('block_page.section_label', 'Block Hash')}
+
+
{hash}
+ {!is_loading && (
+
+
+
+
)}
- {!isLoading && (
-
-
+ {is_loading && (
+
)}
-
- )
- }
+ {!is_loading && (
+ <>
+
+
+
+ )}
+
+ {!is_loading && (
+
+
+ )}
+
+ )
}
BlockPage.propTypes = {
diff --git a/src/views/pages/doc/doc.js b/src/views/pages/doc/doc.js
index 478050b4..2b5a824f 100644
--- a/src/views/pages/doc/doc.js
+++ b/src/views/pages/doc/doc.js
@@ -1,6 +1,7 @@
/* global REPO */
-import React from 'react'
+import React, { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
import { renderToString } from 'react-dom/server'
import PropTypes from 'prop-types'
import * as timeago from 'timeago.js'
@@ -22,6 +23,7 @@ import python from 'highlight.js/lib/languages/python'
import bash from 'highlight.js/lib/languages/bash'
import powershell from 'highlight.js/lib/languages/powershell'
import diff from 'highlight.js/lib/languages/diff'
+import { useTranslation } from 'react-i18next'
import 'highlight.js/styles/github.css'
@@ -68,170 +70,162 @@ md.renderer.rules.heading_open = (tokens, idx) => {
return `<${tag} class="doc__header" id=${escapedText}>`
}
-export default class DocPage extends React.Component {
- get path() {
- const path = this.props.location.pathname
- return path.endsWith('/') ? path.slice(0, -1) : path
- }
+export default function DocPage({ getDoc, showNotification, doc, location }) {
+ const { t } = useTranslation()
+ const path = location.pathname.endsWith('/')
+ ? location.pathname.slice(0, -1)
+ : location.pathname
- componentDidMount() {
- this.props.getDoc(this.path)
- }
+ const { locale } = useParams()
+
+ useEffect(() => {
+ getDoc({ id: path, locale })
+ }, [getDoc, path, locale])
- handleClick = (e) => {
- const elem = e.path.find((p) => p.className === 'doc__header-link')
- const anchor = elem.dataset.anchor
- const url = `${BASE_URL}${this.path}#${anchor}`
+ const handleClick = (e) => {
+ const event_path = e.composedPath()
+ const element = event_path.find((p) => p.className === 'doc__header-link')
+ const anchor = element ? element.dataset.anchor : ''
+ const url = `${BASE_URL}${path}#${anchor}`
copy(url)
- this.props.showNotification({
- message: 'Section link copied',
+ showNotification({
+ message: t('doc.section_link_copied', 'Section link copied'),
severity: 'success'
})
}
- componentDidUpdate(prevProps) {
- if (this.props.location.hash) {
- const elem = document.getElementById(
- this.props.location.hash.substring(1)
- )
+ useEffect(() => {
+ if (location.hash) {
+ const elem = document.getElementById(location.hash.substring(1))
if (elem) elem.scrollIntoView()
}
- if (
- this.props.location.pathname === prevProps.location.pathname &&
- this.props.location.hash !== prevProps.location.hash
- ) {
- return
- }
-
const headers = document.querySelectorAll('.doc__header-link')
- for (const header of headers) {
- header.addEventListener('click', this.handleClick)
- }
-
- const location = JSON.stringify(this.props.location)
- const prevLocation = JSON.stringify(prevProps.location)
- if (location !== prevLocation) {
- this.props.getDoc(this.path)
- }
- }
-
- render() {
- const { doc } = this.props
-
- const author = doc.getIn(['commit', 'commit', 'author', 'name'])
- const lastUpdated = doc.getIn(['commit', 'commit', 'author', 'date'])
- const commitHref = doc.getIn(['commit', 'html_url'])
-
- const authors = []
- doc.get('authors').forEach((author, index) => {
- authors.push(
-
-
- )
+ headers.forEach((header) => {
+ header.addEventListener('click', handleClick)
})
- if (doc.isPending) {
- return (
-
-
-
-
-
- )
- }
+ return () =>
+ headers.forEach((header) => {
+ header.removeEventListener('click', handleClick)
+ })
+ }, [location, handleClick])
+
+ const author = doc.getIn(['commit', 'commit', 'author', 'name'])
+ const lastUpdated = doc.getIn(['commit', 'commit', 'author', 'date'])
+ const commitHref = doc.getIn(['commit', 'html_url'])
+
+ const authors = []
+ doc.get('authors', []).forEach((author, index) => {
+ authors.push(
+
+
+ )
+ })
- if (doc.isLoaded && !doc.content) {
- return (
-
-
-
404
-
Document (or Account) not found
-
-
+ if (doc.isPending) {
+ return (
+
+
+
- )
- }
-
- const frontmatter = fm(doc.content)
- const { title, description, tags } = frontmatter.attributes
- const html = md
- .render(frontmatter.body)
- .replace(
- /
#([a-z0-9]{6})<\/code>/gi,
- '#$1'
- )
+
+
+ )
+ }
+ if (doc.isLoaded && !doc.content) {
return (
-
t.trim()) : []}
- path={this.path}
- />
-
-
+
+
{t('doc.not_found_404', '404')}
+
+ {t('doc.document_not_found', 'Document (or Account) not found')}
+
-
-
- {Boolean(authors.length) && (
-
- {authors}
-
- )}
- {Boolean(authors.length) && (
-
- {authors.length} Contributor{authors.length !== 1 ? 's' : ''}.{' '}
-
- Help out
-
-
- )}
- {Boolean(author) && (
-
- )}
-
-
- Edit Page
-
-
+
#([a-z0-9]{6})<\/code>/gi,
+ '#$1'
+ )
+
+ return (
+
+
t.trim()) : []}
+ path={path}
+ />
+
+
+
+
+ {Boolean(authors.length) && (
+
+ {authors}
+
+ )}
+ {Boolean(authors.length) && (
+
+ )}
+ {Boolean(author) && (
+
+ )}
+
+
+ {t('doc.edit_page', 'Edit Page')}
+
+
+
+
-
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
- )
- }
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
- this.setState({ value })
+ const handleChange = (event, value) => {
+ setValue(value)
}
- render() {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- )
- }
+
+
+
+
+ )
}
diff --git a/src/views/pages/roadmap/index.js b/src/views/pages/roadmap/index.js
index a8a9608d..cb4017ca 100644
--- a/src/views/pages/roadmap/index.js
+++ b/src/views/pages/roadmap/index.js
@@ -10,7 +10,7 @@ import RoadmapPage from './roadmap'
const mapStateToProps = createSelector(getGithubDiscussions, (state) => ({
discussions: state.get('discussions'),
- isPending: state.get('isPending')
+ is_pending: state.get('isPending')
}))
const mapDispatchToProps = {
diff --git a/src/views/pages/roadmap/roadmap.js b/src/views/pages/roadmap/roadmap.js
index eefff119..b09c9c64 100644
--- a/src/views/pages/roadmap/roadmap.js
+++ b/src/views/pages/roadmap/roadmap.js
@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { List } from 'immutable'
+import { useTranslation } from 'react-i18next'
import Seo from '@components/seo'
import Menu from '@components/menu'
@@ -27,66 +28,68 @@ MenuCard.propTypes = {
url: PropTypes.string
}
-export default class RoadmapPage extends React.Component {
- componentDidMount() {
- this.props.load()
- }
-
- render() {
- const { discussions, isPending } = this.props
+export default function RoadmapPage({ load, discussions, is_pending }) {
+ const { t } = useTranslation()
+ useEffect(() => {
+ load()
+ }, [])
- let skeletons = new List()
- if (isPending) {
- skeletons = skeletons.push(new GithubDiscussion())
- skeletons = skeletons.push(new GithubDiscussion())
+ let skeletons = new List()
+ if (is_pending) {
+ for (let i = 0; i < 3; i++) {
skeletons = skeletons.push(new GithubDiscussion())
- } else if (!discussions.size) {
- return null
}
+ } else if (!discussions.size) {
+ return null
+ }
- const items = (discussions.size ? discussions : skeletons).map(
- (item, key) =>
- )
+ const items = (discussions.size ? discussions : skeletons).map(
+ (item, key) =>
+ )
- return (
- <>
-
-
-
-
-
-
Planning
- Community objectives
-
+ return (
+ <>
+
+
+
+
+
+
{t('roadmap.header.title', 'Planning')}
+
+ {t('roadmap.header.subtitle', 'Community objectives')}
+
-
{items}
-
-
-
+
{items}
-
- )
- }
+
+
+
+
+ )
}
RoadmapPage.propTypes = {
load: PropTypes.func,
discussions: ImmutablePropTypes.list,
- isPending: PropTypes.bool
+ is_pending: PropTypes.bool
}
diff --git a/src/views/root.js b/src/views/root.js
index 01aba06e..ac1e05ee 100644
--- a/src/views/root.js
+++ b/src/views/root.js
@@ -15,18 +15,12 @@ import createStore from '@core/store'
import history from '@core/history'
import App from '@components/app'
-// Import Language Provider
-// import LanguageProvider from 'containers/LanguageProvider';
-
// Load the favicon and the .htaccess file
// import '!file-loader?name=[name].[ext]!./images/favicon.ico';
// import 'file-loader?name=.htaccess!./.htaccess'; // eslint-disable-line import/extensions
// import configureStore from './configureStore';
-// Import i18n messages
-// import { translationMessages } from './i18n';
-
// Observe loading of Open Sans (to remove open sans, remove the
tag in
// the index.html file and this observer)
// const openSansObserver = new FontFaceObserver('Open Sans', {});
diff --git a/src/views/routes.js b/src/views/routes.js
index dc19b36d..f5290528 100644
--- a/src/views/routes.js
+++ b/src/views/routes.js
@@ -12,6 +12,7 @@ import NotFoundPage from '@pages/not-found'
import RepresentativesPage from '@pages/representatives'
import TelemetryPage from '@pages/telemetry'
import LabelPage from '@pages/label'
+import { SUPPORTED_LOCALES } from '@core/constants'
const Routes = () => (
@@ -31,6 +32,10 @@ const Routes = () => (
component={AccountPage}
/>
)
diff --git a/webpack/webpack.dev.babel.mjs b/webpack/webpack.dev.babel.mjs
index 737b25dc..cf883f04 100644
--- a/webpack/webpack.dev.babel.mjs
+++ b/webpack/webpack.dev.babel.mjs
@@ -6,6 +6,7 @@ import path from 'path'
import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import CircularDependencyPlugin from 'circular-dependency-plugin'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
import base from './webpack.base.babel.mjs'
@@ -44,6 +45,12 @@ export default base({
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/, // exclude node_modules
failOnError: false // show a warning when there is a circular dependency
+ }),
+ new CopyWebpackPlugin({
+ patterns: [
+ { from: 'locales', to: 'locales' },
+ { from: 'resources', to: 'resources' }
+ ]
})
],
diff --git a/yarn.lock b/yarn.lock
index 4be8228a..4c5c70b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2451,6 +2451,15 @@ __metadata:
languageName: node
linkType: hard
+"@babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9":
+ version: 7.23.9
+ resolution: "@babel/runtime@npm:7.23.9"
+ dependencies:
+ regenerator-runtime: ^0.14.0
+ checksum: 6bbebe8d27c0c2dd275d1ac197fc1a6c00e18dab68cc7aaff0adc3195b45862bae9c4cc58975629004b0213955b2ed91e99eccb3d9b39cabea246c657323d667
+ languageName: node
+ linkType: hard
+
"@babel/template@npm:^7.22.15, @babel/template@npm:^7.23.9":
version: 7.23.9
resolution: "@babel/template@npm:7.23.9"
@@ -3267,6 +3276,13 @@ __metadata:
languageName: node
linkType: hard
+"@sindresorhus/merge-streams@npm:^2.1.0":
+ version: 2.2.1
+ resolution: "@sindresorhus/merge-streams@npm:2.2.1"
+ checksum: edb3d7b8fd9cdf4976c32483f073bb903f8ee94a2f1e93b47cc7d9205ac77cf64fce751ea45b1b39036a8de19d980cb942fff596c0d200232f3e1d4835c8ca4b
+ languageName: node
+ linkType: hard
+
"@smithy/abort-controller@npm:^2.1.1":
version: 2.1.1
resolution: "@smithy/abort-controller@npm:2.1.1"
@@ -4694,7 +4710,7 @@ __metadata:
languageName: node
linkType: hard
-"ajv-keywords@npm:^5.0.0":
+"ajv-keywords@npm:^5.0.0, ajv-keywords@npm:^5.1.0":
version: 5.1.0
resolution: "ajv-keywords@npm:5.1.0"
dependencies:
@@ -4717,7 +4733,7 @@ __metadata:
languageName: node
linkType: hard
-"ajv@npm:^8.0.0, ajv@npm:^8.8.0":
+"ajv@npm:^8.0.0, ajv@npm:^8.8.0, ajv@npm:^8.9.0":
version: 8.12.0
resolution: "ajv@npm:8.12.0"
dependencies:
@@ -5414,7 +5430,7 @@ __metadata:
languageName: node
linkType: hard
-"braces@npm:^3.0.1, braces@npm:~3.0.2":
+"braces@npm:^3.0.1, braces@npm:^3.0.2, braces@npm:~3.0.2":
version: 3.0.2
resolution: "braces@npm:3.0.2"
dependencies:
@@ -6419,6 +6435,22 @@ __metadata:
languageName: node
linkType: hard
+"copy-webpack-plugin@npm:^12.0.2":
+ version: 12.0.2
+ resolution: "copy-webpack-plugin@npm:12.0.2"
+ dependencies:
+ fast-glob: ^3.3.2
+ glob-parent: ^6.0.1
+ globby: ^14.0.0
+ normalize-path: ^3.0.0
+ schema-utils: ^4.2.0
+ serialize-javascript: ^6.0.2
+ peerDependencies:
+ webpack: ^5.1.0
+ checksum: 98127735336c6db5924688486d3a1854a41835963d0c0b81695b2e3d58c6675164be7d23dee7090b84a56d3c9923175d3d0863ac1942bcc3317d2efc1962b927
+ languageName: node
+ linkType: hard
+
"core-js-compat@npm:^3.31.0":
version: 3.31.1
resolution: "core-js-compat@npm:3.31.1"
@@ -6473,6 +6505,15 @@ __metadata:
languageName: node
linkType: hard
+"cross-fetch@npm:4.0.0":
+ version: 4.0.0
+ resolution: "cross-fetch@npm:4.0.0"
+ dependencies:
+ node-fetch: ^2.6.12
+ checksum: ecca4f37ffa0e8283e7a8a590926b66713a7ef7892757aa36c2d20ffa27b0ac5c60dcf453119c809abe5923fc0bae3702a4d896bfb406ef1077b0d0018213e24
+ languageName: node
+ linkType: hard
+
"cross-spawn@npm:^5.0.1":
version: 5.1.0
resolution: "cross-spawn@npm:5.1.0"
@@ -8211,6 +8252,15 @@ __metadata:
languageName: node
linkType: hard
+"express-rate-limit@npm:7":
+ version: 7.1.5
+ resolution: "express-rate-limit@npm:7.1.5"
+ peerDependencies:
+ express: 4 || 5 || ^5.0.0-beta.1
+ checksum: bdf6ddf4f8c8659d31de6ec1f088b473b2cb4180eb09ae234a279c88744832276e5c1482d530875110c90e314b51a7720bcfb2b3139c1b9e6bf652ba4b59f192
+ languageName: node
+ linkType: hard
+
"express-robots-txt@npm:^1.0.0":
version: 1.0.0
resolution: "express-robots-txt@npm:1.0.0"
@@ -8220,6 +8270,17 @@ __metadata:
languageName: node
linkType: hard
+"express-slow-down@npm:^2.0.1":
+ version: 2.0.1
+ resolution: "express-slow-down@npm:2.0.1"
+ dependencies:
+ express-rate-limit: 7
+ peerDependencies:
+ express: ">= 4"
+ checksum: bb59970b6321ef45affb5d1ba0331d065f8430ccae7e36fd67d3a8696634fe20a878420cd5659e210255cea0b6b1b502eca02f8d7a195695fa00c36cd258799e
+ languageName: node
+ linkType: hard
+
"express-unless@npm:^2.1.3":
version: 2.1.3
resolution: "express-unless@npm:2.1.3"
@@ -8365,6 +8426,19 @@ __metadata:
languageName: node
linkType: hard
+"fast-glob@npm:^3.3.2":
+ version: 3.3.2
+ resolution: "fast-glob@npm:3.3.2"
+ dependencies:
+ "@nodelib/fs.stat": ^2.0.2
+ "@nodelib/fs.walk": ^1.2.3
+ glob-parent: ^5.1.2
+ merge2: ^1.3.0
+ micromatch: ^4.0.4
+ checksum: 900e4979f4dbc3313840078419245621259f349950411ca2fa445a2f9a1a6d98c3b5e7e0660c5ccd563aa61abe133a21765c6c0dec8e57da1ba71d8000b05ec1
+ languageName: node
+ linkType: hard
+
"fast-json-stable-stringify@npm:^2.0.0":
version: 2.1.0
resolution: "fast-json-stable-stringify@npm:2.1.0"
@@ -9073,7 +9147,7 @@ __metadata:
languageName: node
linkType: hard
-"glob-parent@npm:^5.1.0, glob-parent@npm:~5.1.2":
+"glob-parent@npm:^5.1.0, glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
version: 5.1.2
resolution: "glob-parent@npm:5.1.2"
dependencies:
@@ -9082,7 +9156,7 @@ __metadata:
languageName: node
linkType: hard
-"glob-parent@npm:^6.0.2":
+"glob-parent@npm:^6.0.1, glob-parent@npm:^6.0.2":
version: 6.0.2
resolution: "glob-parent@npm:6.0.2"
dependencies:
@@ -9202,6 +9276,20 @@ __metadata:
languageName: node
linkType: hard
+"globby@npm:^14.0.0":
+ version: 14.0.1
+ resolution: "globby@npm:14.0.1"
+ dependencies:
+ "@sindresorhus/merge-streams": ^2.1.0
+ fast-glob: ^3.3.2
+ ignore: ^5.2.4
+ path-type: ^5.0.0
+ slash: ^5.1.0
+ unicorn-magic: ^0.1.0
+ checksum: 33568444289afb1135ad62d52d5e8412900cec620e3b6ece533afa46d004066f14b97052b643833d7cf4ee03e7fac571430130cde44c333df91a45d313105170
+ languageName: node
+ linkType: hard
+
"gopd@npm:^1.0.1":
version: 1.0.1
resolution: "gopd@npm:1.0.1"
@@ -9646,6 +9734,15 @@ __metadata:
languageName: node
linkType: hard
+"html-parse-stringify@npm:^3.0.1":
+ version: 3.0.1
+ resolution: "html-parse-stringify@npm:3.0.1"
+ dependencies:
+ void-elements: 3.1.0
+ checksum: 334fdebd4b5c355dba8e95284cead6f62bf865a2359da2759b039db58c805646350016d2017875718bc3c4b9bf81a0d11be5ee0cf4774a3a5a7b97cde21cfd67
+ languageName: node
+ linkType: hard
+
"html-webpack-plugin@npm:^5.5.3":
version: 5.5.3
resolution: "html-webpack-plugin@npm:5.5.3"
@@ -9866,6 +9963,24 @@ __metadata:
languageName: node
linkType: hard
+"i18next-http-backend@npm:^2.4.3":
+ version: 2.4.3
+ resolution: "i18next-http-backend@npm:2.4.3"
+ dependencies:
+ cross-fetch: 4.0.0
+ checksum: 8abd3966475828d677f5f5351eee93ba6412a2d3e4e663966af0762ea98a605d4b8dce6966650d28acf5411e39fd44cc8aae87ed94b39b627791eeba22a1e73e
+ languageName: node
+ linkType: hard
+
+"i18next@npm:^23.8.2":
+ version: 23.8.2
+ resolution: "i18next@npm:23.8.2"
+ dependencies:
+ "@babel/runtime": ^7.23.2
+ checksum: c20e68c6c216bfcedc16d8d8b1ee545423e26e84ace36b699f936ec8cf1b4df8ee2ae093e7a3e444a9cb5931ca76698ae1a80d31691aa4153bcc804394e0019e
+ languageName: node
+ linkType: hard
+
"iconv-lite@npm:0.4.24":
version: 0.4.24
resolution: "iconv-lite@npm:0.4.24"
@@ -12479,6 +12594,16 @@ __metadata:
languageName: node
linkType: hard
+"micromatch@npm:^4.0.4":
+ version: 4.0.5
+ resolution: "micromatch@npm:4.0.5"
+ dependencies:
+ braces: ^3.0.2
+ picomatch: ^2.3.1
+ checksum: 02a17b671c06e8fefeeb6ef996119c1e597c942e632a21ef589154f23898c9c6a9858526246abb14f8bca6e77734aa9dcf65476fca47cedfb80d9577d52843fc
+ languageName: node
+ linkType: hard
+
"mime-db@npm:1.47.0, mime-db@npm:>= 1.43.0 < 2, mime-db@npm:^1.28.0":
version: 1.47.0
resolution: "mime-db@npm:1.47.0"
@@ -13139,7 +13264,7 @@ __metadata:
languageName: node
linkType: hard
-"node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.8":
+"node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.12, node-fetch@npm:^2.6.8":
version: 2.7.0
resolution: "node-fetch@npm:2.7.0"
dependencies:
@@ -14027,6 +14152,13 @@ __metadata:
languageName: node
linkType: hard
+"path-type@npm:^5.0.0":
+ version: 5.0.0
+ resolution: "path-type@npm:5.0.0"
+ checksum: 15ec24050e8932c2c98d085b72cfa0d6b4eeb4cbde151a0a05726d8afae85784fc5544f733d8dfc68536587d5143d29c0bd793623fad03d7e61cc00067291cd5
+ languageName: node
+ linkType: hard
+
"pend@npm:~1.2.0":
version: 1.2.0
resolution: "pend@npm:1.2.0"
@@ -14055,7 +14187,7 @@ __metadata:
languageName: node
linkType: hard
-"picomatch@npm:^2.0.4":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.3.1":
version: 2.3.1
resolution: "picomatch@npm:2.3.1"
checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf
@@ -14641,6 +14773,24 @@ __metadata:
languageName: node
linkType: hard
+"react-i18next@npm:^14.0.5":
+ version: 14.0.5
+ resolution: "react-i18next@npm:14.0.5"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ html-parse-stringify: ^3.0.1
+ peerDependencies:
+ i18next: ">= 23.2.3"
+ react: ">= 16.8.0"
+ peerDependenciesMeta:
+ react-dom:
+ optional: true
+ react-native:
+ optional: true
+ checksum: 54fe5ffd887d633852ea7e82e98b6ef057facf45dec512469dd0e43ae64d9450d2bafe7c85c87fd650cf6dad1bf81727a89fba23af0508b7a806153d459fc5cc
+ languageName: node
+ linkType: hard
+
"react-immutable-proptypes@npm:^2.2.0":
version: 2.2.0
resolution: "react-immutable-proptypes@npm:2.2.0"
@@ -15013,6 +15163,13 @@ __metadata:
languageName: node
linkType: hard
+"regenerator-runtime@npm:^0.14.0":
+ version: 0.14.1
+ resolution: "regenerator-runtime@npm:0.14.1"
+ checksum: 9f57c93277b5585d3c83b0cf76be47b473ae8c6d9142a46ce8b0291a04bb2cf902059f0f8445dcabb3fb7378e5fe4bb4ea1e008876343d42e46d3b484534ce38
+ languageName: node
+ linkType: hard
+
"regenerator-transform@npm:^0.15.2":
version: 0.15.2
resolution: "regenerator-transform@npm:0.15.2"
@@ -15391,6 +15548,7 @@ __metadata:
concurrently: ^8.2.0
connected-react-router: ^6.9.3
copy-text-to-clipboard: ^3.2.0
+ copy-webpack-plugin: ^12.0.2
cors: ^2.8.5
cross-env: ^7.0.3
css-loader: 6.8.1
@@ -15413,6 +15571,7 @@ __metadata:
express-favicon: ^2.0.4
express-jwt: ^8.4.1
express-robots-txt: ^1.0.0
+ express-slow-down: ^2.0.1
fetch-cheerio-object: ^1.3.0
file-loader: ^6.2.0
front-matter: ^4.0.2
@@ -15421,6 +15580,8 @@ __metadata:
html-inline-script-webpack-plugin: ^2.0.3
html-loader: ^2.1.2
html-webpack-plugin: ^5.5.3
+ i18next: ^23.8.2
+ i18next-http-backend: ^2.4.3
image-webpack-loader: ^7.0.1
ipfs-deploy: ^12.0.1
jsonwebtoken: ^9.0.1
@@ -15446,6 +15607,7 @@ __metadata:
react: ^17.0.2
react-dom: ^17.0.2
react-helmet: ^6.1.0
+ react-i18next: ^14.0.5
react-immutable-proptypes: ^2.2.0
react-redux: ^7.2.9
react-router: ^5.3.4
@@ -15581,6 +15743,18 @@ __metadata:
languageName: node
linkType: hard
+"schema-utils@npm:^4.2.0":
+ version: 4.2.0
+ resolution: "schema-utils@npm:4.2.0"
+ dependencies:
+ "@types/json-schema": ^7.0.9
+ ajv: ^8.9.0
+ ajv-formats: ^2.1.1
+ ajv-keywords: ^5.1.0
+ checksum: 26a0463d47683258106e6652e9aeb0823bf0b85843039e068b57da1892f7ae6b6b1094d48e9ed5ba5cbe9f7166469d880858b9d91abe8bd249421eb813850cde
+ languageName: node
+ linkType: hard
+
"seamless-immutable@npm:^7.1.3":
version: 7.1.4
resolution: "seamless-immutable@npm:7.1.4"
@@ -15771,6 +15945,15 @@ __metadata:
languageName: node
linkType: hard
+"serialize-javascript@npm:^6.0.2":
+ version: 6.0.2
+ resolution: "serialize-javascript@npm:6.0.2"
+ dependencies:
+ randombytes: ^2.1.0
+ checksum: c4839c6206c1d143c0f80763997a361310305751171dd95e4b57efee69b8f6edd8960a0b7fbfc45042aadff98b206d55428aee0dc276efe54f100899c7fa8ab7
+ languageName: node
+ linkType: hard
+
"serve-index@npm:^1.9.1":
version: 1.9.1
resolution: "serve-index@npm:1.9.1"
@@ -15939,6 +16122,13 @@ __metadata:
languageName: node
linkType: hard
+"slash@npm:^5.1.0":
+ version: 5.1.0
+ resolution: "slash@npm:5.1.0"
+ checksum: 70434b34c50eb21b741d37d455110258c42d2cf18c01e6518aeb7299f3c6e626330c889c0c552b5ca2ef54a8f5a74213ab48895f0640717cacefeef6830a1ba4
+ languageName: node
+ linkType: hard
+
"smart-buffer@npm:^4.2.0":
version: 4.2.0
resolution: "smart-buffer@npm:4.2.0"
@@ -17250,6 +17440,13 @@ __metadata:
languageName: node
linkType: hard
+"unicorn-magic@npm:^0.1.0":
+ version: 0.1.0
+ resolution: "unicorn-magic@npm:0.1.0"
+ checksum: 48c5882ca3378f380318c0b4eb1d73b7e3c5b728859b060276e0a490051d4180966beeb48962d850fd0c6816543bcdfc28629dcd030bb62a286a2ae2acb5acb6
+ languageName: node
+ linkType: hard
+
"uniq@npm:^1.0.1":
version: 1.0.1
resolution: "uniq@npm:1.0.1"
@@ -17529,6 +17726,13 @@ __metadata:
languageName: node
linkType: hard
+"void-elements@npm:3.1.0":
+ version: 3.1.0
+ resolution: "void-elements@npm:3.1.0"
+ checksum: 0390f818107fa8fce55bb0a5c3f661056001c1d5a2a48c28d582d4d847347c2ab5b7f8272314cac58acf62345126b6b09bea623a185935f6b1c3bbce0dfd7f7f
+ languageName: node
+ linkType: hard
+
"watchpack@npm:^2.4.0":
version: 2.4.0
resolution: "watchpack@npm:2.4.0"