Pass locale to date-fns (#7)

* Pass locale to date-fns

* Implement useDateFns

src/components/Blocks/BlockCard.tsx

@@ -1,10 +1,11 @@
 import { Box, Card, CardBody, Flex, Text } from '@chakra-ui/react'
-import { formatDistance } from 'date-fns'
 import { Trans } from 'react-i18next'
 import { ReducedTextAndCopy } from '~components/CopyBtn'
+import { useDateFns } from '~i18n/use-date-fns'
 
 export const BlockCard = ({ height, time, proposer }: { height: number; time: string; proposer: string }) => {
   const date = new Date(time)
+  const { formatDistance } = useDateFns()
 
   return (
     <Card>
@@ -13,7 +14,7 @@ export const BlockCard = ({ height, time, proposer }: { height: number; time: st
           <Flex gap={3}>
             <Text fontWeight='bold'># {height}</Text>
             <Text fontWeight={100} color={'lighterText'}>
-              {formatDistance(date, new Date(), { addSuffix: true })}
+              {formatDistance(date, new Date())}
             </Text>
           </Flex>
           <Box fontSize={'sm'}>

src/components/Stats/ChainInfo.tsx

@@ -1,16 +1,15 @@
 import { Flex, Heading, SkeletonText, Text } from '@chakra-ui/react'
-import { formatDistance } from 'date-fns'
 import { useTranslation } from 'react-i18next'
 import { useChainInfo } from '~queries/stats'
+import { useDateFns } from '~i18n/use-date-fns'
 
 export const ChainInfo = () => {
   const { t } = useTranslation()
-  const { data: stats, isLoading } = useChainInfo()
+  const { data: stats } = useChainInfo()
+  const { formatDistance } = useDateFns()
 
   const syncing = stats?.syncing ? t('stats.syncing') : t('stats.in_sync')
-  const genesisBlockDate = stats?.genesisTime
-    ? formatDistance(new Date(stats?.genesisTime), new Date(), { addSuffix: true })
-    : ''
+  const genesisBlockDate = stats?.genesisTime ? formatDistance(new Date(stats?.genesisTime), new Date()) : ''
 
   const statsCards = [
     {

src/i18n/use-date-fns.tsx

@@ -0,0 +1,15 @@
+import { format as dformat, formatDistance as dformatDistance } from 'date-fns'
+import { useTranslation } from 'react-i18next'
+import { datesLocale } from './locales'
+
+export const useDateFns = () => {
+  const { i18n } = useTranslation()
+  return {
+    format: (date: Date | number, format: string) => dformat(date, format, { locale: datesLocale(i18n.language) }),
+    formatDistance: (date: Date | number, baseDate: Date | number) =>
+      dformatDistance(date, baseDate, {
+        addSuffix: true,
+        locale: datesLocale(i18n.language),
+      }),
+  }
+}