Merge pull request #166 from chain4travel/date-fix

fix date format depending on the selected language

src/app/components/DetailsField.tsx

@@ -1,16 +1,16 @@
+import { mdiInformationOutline, mdiOpenInNew } from '@mdi/js'
+import Icon from '@mdi/react'
+import { Box, Button, Chip, Grid, Tooltip, Typography } from '@mui/material'
 import React from 'react'
-import { Typography, Box, Grid, Tooltip, Button, Chip } from '@mui/material'
-import { mdiOpenInNew, mdiInformationOutline } from '@mdi/js'
 import { Link } from 'react-router-dom'
+import { IDetailsField, IField } from 'types/filesInComponents'
+import { roundedToLocaleString } from '../../utils/currency-utils'
+import moment, { currentDateFormat } from '../../utils/helpers/moment'
+import useWidth from '../hooks/useWidth'
 import { CamAmount } from './CamAmount'
 import CopyToClipboardButton from './CopyToClipboardButton'
-import useWidth from '../hooks/useWidth'
-import Icon from '@mdi/react'
-import moment from '../../utils/helpers/moment'
-import { roundedToLocaleString } from '../../utils/currency-utils'
-import { IDetailsField, IField } from 'types/filesInComponents'
 
-export default function DetailsField({
+function DetailsField({
     field,
     value,
     type,
@@ -198,7 +198,11 @@ export const Field = ({
                     {moment(value as number).fromNow()}
                 </Typography>
                 <Typography variant="body2" component="span" noWrap={true}>
-                    {moment(value as number).format('MMM D, YYYY, h:mm:ss A ([GMT] ZZ)')}
+                    {moment(value as number).format(
+                        currentDateFormat()[0] !== 'd'
+                            ? 'MMM D, YYYY, h:mm:ss A ([GMT] ZZ)'
+                            : 'D MMM, YYYY, h:mm:ss A ([GMT] ZZ)',
+                    )}
                 </Typography>
             </Box>
         )
@@ -261,3 +265,5 @@ const tooltips: { [key: string]: string } = {
     nonce: 'A block nonce is a value used  to indicate proof of work for a block during mining.',
     'transaction value': 'The value being transacted in camino.',
 }
+
+export default React.memo(DetailsField)

src/app/components/Statistics/BlockchainDataCharts/index.tsx

@@ -21,7 +21,7 @@ import styled from 'styled-components'
 import { Status } from 'types'
 import { ConsumptionCharts, Emissions, TextProps } from 'types/statistics'
 import '../../../../styles/scrollbarModal.css'
-import { TextBlockchainDatachart } from '../../../../utils/statistics/TextBlockchainDatachart'
+import TextBlockchainDatachart from '../../../../utils/statistics/TextBlockchainDatachart'
 import DateRange from '../DateRange/DateRange'
 import LinearMeter from './LinearMeter'
 

src/app/components/Statistics/DateRange/DateRange.tsx

@@ -7,6 +7,7 @@ import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 import styled from 'styled-components'
 import { IDataRef, IDateRange } from 'types/statistics'
+import { currentDateFormat } from 'utils/helpers/moment'
 import '../../../../styles/custompicker.css'
 import useWidth from '../../../hooks/useWidth'
 import { seeTimeAxis as typeSeeTimeAxis } from '../ChartConfig/SeeTimeAxis'
@@ -55,7 +56,6 @@ const DateRange = ({
     setFirstLoad,
 }: IDateRange) => {
     const { isWideScreenDown, isWidescreen } = useWidth()
-
     const handleClickOneDay = () => {
         setSeeTimeAxis('day')
         setStartDate(new Date(moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss')))
@@ -251,6 +251,7 @@ const DateRange = ({
                         style={{ position: 'relative', right: '6%', top: -25 }}
                     >
                         <DatePicker
+                            dateFormat={currentDateFormat()}
                             selected={initialStartDate}
                             onChange={(date: Date) => handleChangeStartDate(date)}
                             selectsStart
@@ -261,6 +262,7 @@ const DateRange = ({
                             // readOnly
                         />
                         <DatePicker
+                            dateFormat={currentDateFormat()}
                             selected={InitianEndDate}
                             onChange={(date: Date) => handleChangeEndDate(date)}
                             selectsEnd
@@ -348,6 +350,7 @@ const DateRange = ({
                     <br />
                     <FilterContainerMobile className={darkMode ? 'picker-container' : ''}>
                         <DatePicker
+                            dateFormat={currentDateFormat()}
                             selected={initialStartDate}
                             onChange={(date: Date) => setStartDate(date)}
                             selectsStart
@@ -359,6 +362,7 @@ const DateRange = ({
                             // readOnly
                         />
                         <DatePicker
+                            dateFormat={currentDateFormat()}
                             selected={InitianEndDate}
                             onChange={(date: Date) => setEndDate(date)}
                             selectsEnd
@@ -377,4 +381,4 @@ const DateRange = ({
     )
 }
 
-export default DateRange
+export default React.memo(DateRange)

src/app/pages/XChainPages/Transactions/XPTransactionsDetails.tsx

@@ -1,30 +1,39 @@
+import { mdiTransfer } from '@mdi/js'
+import { Box, Grid, Paper, Typography } from '@mui/material'
+import BackButton from 'app/components/BackButton'
+import CopyTitleCard from 'app/components/CopyTitleCard'
+import PageContainer from 'app/components/PageContainer'
+import axios from 'axios'
+import moment from 'moment'
 import * as React from 'react'
-import { Grid, Paper, Typography, Box } from '@mui/material'
 import { useLocation } from 'react-router-dom'
-import PageContainer from 'app/components/PageContainer'
-import BackButton from 'app/components/BackButton'
-import { mdiTransfer } from '@mdi/js'
-import TransactionDetailView from './XPTransactionDetailView'
+import { selectMagellanAddress } from 'store/app-config'
+import { useAppSelector } from 'store/configureStore'
+import { XPTransactionDetail } from 'types/magellan-types'
 import { XPTransaction } from 'types/transaction'
-import axios from 'axios'
+import { currentDateFormat } from 'utils/helpers/moment'
 import { convertMemo, getInputFunds, getOutputFunds } from 'utils/magellan'
-import CopyTitleCard from 'app/components/CopyTitleCard'
-import { XPTransactionDetail } from 'types/magellan-types'
 import { transactionApi } from 'utils/magellan-api-utils'
-import { useAppSelector } from 'store/configureStore'
-import { selectMagellanAddress } from 'store/app-config'
-import { getChainTypeFromUrl, getAddressFromUrl } from 'utils/route-utils'
 import { RoutesConfig } from 'utils/route-paths'
+import { getAddressFromUrl, getChainTypeFromUrl } from 'utils/route-utils'
+import TransactionDetailView from './XPTransactionDetailView'
 
 export default function XPTransactionDetails() {
     const routesConfig = RoutesConfig()
     const [result, setResult] = React.useState<XPTransaction>()
     const [details, setDetails] = React.useState<XPTransactionDetail>()
     const location = useLocation()
     const magellanAddress = useAppSelector(selectMagellanAddress)
+
     async function fetchTransactionDetail(): Promise<void> {
         const res = (await axios.get(`${magellanAddress}${transactionApi}/${getAddressFromUrl()}`))
             .data
+        const parsedDate = moment.utc(res.timestamp)
+        let form =
+            currentDateFormat()[0] === 'd'
+                ? 'ddd DD MMM YYYY HH:mm:ss [GMT]Z (z)'
+                : 'ddd MMM DD YYYY HH:mm:ss [GMT]Z (z)'
+        const formattedDate = parsedDate.format(form)
         let transaction: XPTransaction = {
             id: res.id,
             // status: 'accepted', //TODO: set dynamically when magellan delivers this information
@@ -42,7 +51,7 @@ export default function XPTransactionDetails() {
             id: res.id,
             status: 'accepted', //TODO: set dynamically when magellan delivers this information
             type: res.type,
-            timestamp: new Date(Date.parse(res.timestamp)),
+            timestamp: formattedDate,
             fee: res.txFee,
             memo: convertMemo(res.memo),
         })

src/store/cchainSlice/index.ts

@@ -1,22 +1,24 @@
 import { createSlice } from '@reduxjs/toolkit'
 
+import {
+    fetchNextTransactionDetails,
+    fetchPrevTransactionDetails,
+} from 'app/pages/CChainPages/Transactions/utils'
+import BigNumber from 'bignumber.js'
+import moment from 'moment'
+import { RootState } from 'store/configureStore'
 import { Status, Timeframe } from 'types'
 import { BlockDetail } from 'types/block'
-import { TransactionCurrency, TransactionInformations } from 'types/transaction'
+import { IItem } from 'types/statistics'
 import { ChainOverviewType, initialCchainStateType } from 'types/store'
-import { RootState } from 'store/configureStore'
+import { TransactionCurrency, TransactionInformations } from 'types/transaction'
+import { currentDateFormat } from 'utils/helpers/moment'
 import {
     fetchCBlockDetail,
     fetchTransactionDetails,
     loadNumberOfTransactions,
     loadTotalGasFess,
 } from './utils'
-import {
-    fetchNextTransactionDetails,
-    fetchPrevTransactionDetails,
-} from 'app/pages/CChainPages/Transactions/utils'
-import BigNumber from 'bignumber.js'
-import { IItem } from 'types/statistics'
 
 const initialState: initialCchainStateType = {
     transactionCount: NaN,
@@ -101,6 +103,11 @@ const cchainSlice = createSlice({
                 state.loadBlockDetial = Status.LOADING
             })
             .addCase(fetchCBlockDetail.fulfilled, (state, action) => {
+                let form =
+                    currentDateFormat()[0] === 'd'
+                        ? 'ddd DD MMM YYYY HH:mm:ss [GMT]Z'
+                        : 'ddd MMM DD YYYY HH:mm:ss [GMT]Z'
+                let parsedDate = moment(parseInt(action.payload.header.timestamp) * 1000)
                 let block: BlockDetail = {
                     hash: action.payload.hash,
                     number: parseInt(action.payload.header.number),
@@ -109,7 +116,7 @@ const cchainSlice = createSlice({
                     baseGaseFee: parseInt(action.payload.header.baseFeePerGas),
                     fees: 0,
                     gasUsed: parseInt(action.payload.header.gasUsed),
-                    time: new Date(parseInt(action.payload.header.timestamp) * 1000).toString(),
+                    time: parsedDate.format(form),
                     transactionsCount: action.payload.transactions
                         ? action.payload.transactions.length
                         : 0,

src/types/magellan-types.ts

@@ -27,7 +27,7 @@ export interface XPTransactionDetail {
     id: string
     type: string
     status: string
-    timestamp: Date
+    timestamp: string
     fee: number
     memo?: string
 }

src/utils/helpers/moment.ts

@@ -1,5 +1,30 @@
 import moment from 'moment'
 
+export function currentDateFormat() {
+    return new Intl.DateTimeFormat(navigator.language, {
+        day: 'numeric',
+        month: 'numeric',
+        year: 'numeric',
+    })
+        .formatToParts()
+        .map(part => {
+            if (part.type === 'literal') {
+                return part.value
+            }
+            switch (part.type) {
+                case 'day':
+                    return 'dd'
+                case 'month':
+                    return 'MM'
+                case 'year':
+                    return 'yyyy'
+                default:
+                    return ''
+            }
+        })
+        .join('')
+}
+
 moment.updateLocale('en', {
     relativeTime: {
         future: 'in %s',

src/utils/statistics/TextBlockchainDatachart.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
-import { typeChartData } from './ChartSelector'
 import { useTheme } from '@mui/material'
 import moment from 'moment'
+import React from 'react'
 import { IBlockChainDataChart } from 'types/statistics'
+import { currentDateFormat } from 'utils/helpers/moment'
 import { seeTimeAxis } from '../../app/components/Statistics/ChartConfig/SeeTimeAxis'
+import { typeChartData } from './ChartSelector'
 
-export const TextBlockchainDatachart = ({
+const TextBlockchainDatachart = ({
     typeStatistic,
     startDate,
     endDate,
@@ -16,7 +17,6 @@ export const TextBlockchainDatachart = ({
 }: IBlockChainDataChart) => {
     const theme = useTheme()
     const isDark = theme.palette.mode === 'dark'
-
     const getLowestDate = () => {
         if (dataStatistics.lowestDate !== null && dataStatistics.lowestDate !== undefined) {
             let dateString = validateTypeTimeFilter(dataStatistics.lowestDate)
@@ -37,7 +37,9 @@ export const TextBlockchainDatachart = ({
 
     function validateTypeTimeFilter(dateString: string): string {
         try {
-            let defaultStringDate = moment(dateString).format('dddd, MMMM DD, YYYY')
+            let format =
+                currentDateFormat()[0] === 'd' ? 'dddd, DD MMMM, YYYY' : 'dddd, MMMM DD, YYYY'
+            let defaultStringDate = moment(dateString).format(format)
             switch (timeSeeAxis) {
                 case seeTimeAxis.day:
                     return defaultStringDate
@@ -126,3 +128,5 @@ export const TextBlockchainDatachart = ({
         </>
     )
 }
+
+export default React.memo(TextBlockchainDatachart)