Use custom locale for formatting distance between dates

.changelog/527.feature.md

@@ -0,0 +1 @@
+Use custom locale for formatting distance between dates

src/app/components/Blocks/index.tsx

@@ -1,11 +1,11 @@
 import { useTranslation } from 'react-i18next'
-import formatDistanceStrict from 'date-fns/formatDistanceStrict'
 import { RuntimeBlock } from '../../../oasis-indexer/api'
 import { VerticalProgressBar } from '../../components/ProgressBar'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { paraTimesConfig } from '../../../config'
 import { TablePaginationProps } from '../Table/TablePagination'
 import { BlockHashLink, BlockLink } from './BlockLink'
+import { formatDistanceStrict } from '../../utils/dateFormatter'
 
 export type TableRuntimeBlock = RuntimeBlock & {
   markAsNew?: boolean
@@ -59,9 +59,7 @@ export const Blocks = (props: BlocksProps) => {
         },
         {
           align: TableCellAlign.Right,
-          content: formatDistanceStrict(new Date(block.timestamp), new Date(), {
-            addSuffix: true,
-          }),
+          content: formatDistanceStrict(new Date(block.timestamp), new Date()),
           key: 'timestamp',
         },
         {

src/app/components/Transactions/index.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react'
 import { styled } from '@mui/material/styles'
 import { useTranslation } from 'react-i18next'
-import formatDistanceStrict from 'date-fns/formatDistanceStrict'
 import Box from '@mui/material/Box'
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import LockIcon from '@mui/icons-material/Lock'
@@ -19,6 +18,7 @@ import { trimLongString } from '../../utils/trimLongString'
 import Typography from '@mui/material/Typography'
 import { doesAnyOfTheseLayersSupportEncryptedTransactions } from '../../../types/layers'
 import { TransactionEncryptionStatus } from '../TransactionEncryptionStatus'
+import { formatDistanceStrict } from '../../utils/dateFormatter'
 
 const StyledCircle = styled(Box)(({ theme }) => ({
   position: 'absolute',
@@ -116,9 +116,7 @@ export const Transactions: FC<TransactionsProps> = ({
         : []),
       {
         align: TableCellAlign.Right,
-        content: formatDistanceStrict(new Date(transaction.timestamp), new Date(), {
-          addSuffix: true,
-        }),
+        content: formatDistanceStrict(new Date(transaction.timestamp), new Date()),
         key: 'timestamp',
       },
       {

src/app/utils/dateFormatter.ts

@@ -1,3 +1,36 @@
+import formatDistanceStrictDateFns from 'date-fns/formatDistanceStrict'
+import locale from 'date-fns/locale/en-US'
+
 const dateFormat = new Intl.DateTimeFormat()
 
 export const intlDateFormat = (date: Date | number) => dateFormat.format(date)
+
+const formatDistanceLocale = {
+  lessThanXSeconds: '{{count}}s',
+  xSeconds: '{{count}}s',
+  halfAMinute: 's',
+  lessThanXMinutes: '{{count}}m',
+  xMinutes: '{{count}}m',
+  aboutXHours: '{{count}}h',
+  xHours: '{{count}}h',
+  xDays: '{{count}}d',
+  aboutXWeeks: '{{count}}w',
+  xWeeks: '{{count}}w',
+  aboutXMonths: '{{count}}m',
+  xMonths: '{{count}}m',
+  aboutXYears: '{{count}}y',
+  xYears: '{{count}}y',
+  overXYears: '{{count}}y',
+  almostXYears: '{{count}}y',
+}
+
+export const formatDistance = (token: keyof typeof formatDistanceLocale, count: string) =>
+  formatDistanceLocale[token].replace('{{count}}', count)
+
+export const formatDistanceStrict = (date: Date, baseDate: Date) =>
+  formatDistanceStrictDateFns(date, baseDate, {
+    locale: {
+      ...locale,
+      formatDistance,
+    },
+  })