fix: dayjs locale format seconds is not working and is polluting the …

…global dayjs locale (#1689)

Co-authored-by: tomiir <rocchitomas@gmail.com>
Co-authored-by: Gancho Radkov <43912948+ganchoradkov@users.noreply.github.com>
Co-authored-by: Gancho Radkov <ganchoradkov@gmail.com>
Co-authored-by: Ilja <3154053+xzilja@users.noreply.github.com>
Co-authored-by: enesozturk <enesozturk.d@gmail.com>

.eslintrc.json

@@ -20,7 +20,7 @@
     "dist",
     ".next",
     ".turbo",
-    "exbamples",
+    "examples",
     "coverage",
     ".changeset",
     "playwright-report"

.github/workflows/pr_checks.yml

@@ -101,5 +101,8 @@ jobs:
   ui-test:
     uses: ./.github/workflows/ui_tests.yml
     secrets: inherit
+    permissions:
+      contents: write
+      pull-requests: write
     with:
       branch: ${{ github.ref }}

packages/common/src/utils/DateUtil.ts

@@ -1,15 +1,18 @@
 import dayjs from 'dayjs'
-import updateLocale from 'dayjs/plugin/updateLocale.js'
+import englishLocale from 'dayjs/locale/en'
 import relativeTime from 'dayjs/plugin/relativeTime.js'
+import updateLocale from 'dayjs/plugin/updateLocale.js'
 
 dayjs.extend(relativeTime)
 dayjs.extend(updateLocale)
 
-dayjs.updateLocale('en', {
+const localeObject = {
+  ...englishLocale,
+  name: 'en-web3-modal',
   relativeTime: {
     future: 'in %s',
     past: '%s ago',
-    s: '%s sec',
+    s: '%d sec',
     m: '1 min',
     mm: '%d min',
     h: '1 hr',
@@ -21,15 +24,17 @@ dayjs.updateLocale('en', {
     y: '1 yr',
     yy: '%d yr'
   }
-})
+}
+
+dayjs.locale('en-web3-modal', localeObject)
 
 export const DateUtil = {
   getYear(date: string = new Date().toISOString()) {
     return dayjs(date).year()
   },
 
   getRelativeDateFromNow(date: string | number) {
-    return dayjs(date).fromNow(true)
+    return dayjs(date).locale('en-web3-modal').fromNow(true)
   },
 
   formatDate(date: string | number, format = 'DD MMM') {

packages/common/tests/DateUtil.test.ts

@@ -3,6 +3,8 @@ import { DateUtil } from '../src/utils/DateUtil.js'
 
 const fakeDateTime = new Date(2023, 1, 1, 12)
 const fakeDateTimeOneHourAgo = new Date(2023, 1, 1, 11)
+const fakeDateTimeOneTwoMinsAgo = new Date(2023, 1, 1, 12, 2)
+const fakeDateTimeOneSecondAgo = new Date(2023, 1, 1, 12, 0, 30)
 
 // -- Tests --------------------------------------------------------------------
 describe('DateUtil', () => {
@@ -26,6 +28,18 @@ describe('DateUtil', () => {
     expect(DateUtil.getRelativeDateFromNow(fakeDateTimeOneHourAgo.getTime())).toEqual('1 hr')
   })
 
+  it('should return relative time for minutes ago', () => {
+    vi.setSystemTime(fakeDateTime)
+
+    expect(DateUtil.getRelativeDateFromNow(fakeDateTimeOneTwoMinsAgo.getTime())).toEqual('2 min')
+  })
+
+  it('should return relative time for seconds ago', () => {
+    vi.setSystemTime(fakeDateTime)
+
+    expect(DateUtil.getRelativeDateFromNow(fakeDateTimeOneSecondAgo.getTime())).toEqual('30 sec')
+  })
+
   it('should format date correctly', () => {
     expect(DateUtil.formatDate(fakeDateTime.toDateString())).toEqual('01 Feb')
   })