fix: timing on bridge bugged in first minute (#383)

Author: rodrigobranas

jest.config.ts

@@ -1,3 +1,5 @@
 export default {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
   projects: ['<rootDir>/packages/*'],
 };

packages/app-commons/package.json

@@ -7,7 +7,8 @@
   "types": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./src/chains/fuel": "./src/chains/fuel.ts"
+    "./src/chains/fuel": "./src/chains/fuel.ts",
+    "./src/utils/dayjs": "./src/utils/dayjs.ts"
   },
   "scripts": {
     "ts:check": "tsc --noEmit"
@@ -18,7 +19,8 @@
     "fuels": "0.86.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwind-variants": "0.1.20"
+    "tailwind-variants": "0.1.20",
+    "dayjs": "1.11.10"
   },
   "devDependencies": {
     "@fuels/ui": "workspace:*",
@@ -29,6 +31,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwind-variants": "0.1.20",
-    "typescript": "5.4.5"
+    "typescript": "5.4.5",
+    "dayjs": "1.11.10"
   }
 }

packages/app-commons/src/utils/dayjs.ts

@@ -0,0 +1,29 @@
+import dayjs from 'dayjs';
+import englishLocale from 'dayjs/locale/en.js';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+export function createDayjs() {
+  dayjs.extend(relativeTime, {});
+  const localeObject = {
+    ...englishLocale,
+    name: 'fuel',
+    relativeTime: {
+      future: 'in %s',
+      past: '%s ago',
+      s: 'less than a minute',
+      m: 'a minute',
+      mm: '%d minutes',
+      h: 'an hour',
+      hh: '%d hours',
+      d: 'a day',
+      dd: '%d days',
+      M: 'a month',
+      MM: '%d months',
+      y: 'a year',
+      yy: '%d years',
+    },
+  };
+
+  dayjs.locale('fuel', localeObject);
+  return dayjs;
+}

packages/app-explorer/next.config.mjs

@@ -1,4 +1,5 @@
 import { redirects } from './src/redirects.mjs';
+import path from "path";
 
 /** @type {import('next').NextConfig} */
 const config = {
@@ -90,7 +91,7 @@ const config = {
     );
     // Modify the file loader rule to ignore *.svg, since we have it handled now.
     fileLoaderRule.exclude = /\.svg$/i;
-
+	config.resolve.alias.dayjs = path.resolve('./node_modules/dayjs');
     return config;
   },
 };

packages/app-portal/src/systems/Chains/fuel/utils/date.ts

@@ -1,10 +1,10 @@
-import dayjs from 'dayjs';
+import { createDayjs } from 'app-commons/src/utils/dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
-dayjs.extend(relativeTime, {
-  rounding: (num) => Math.ceil(num),
-});
-
 export const distanceToNow = (fromDate: Date) => {
+  const dayjs = createDayjs();
+  dayjs.extend(relativeTime, {
+    rounding: (num) => Math.ceil(num),
+  });
   return dayjs(fromDate).toNow(true);
 };

packages/e2e-tests/playwright-html/hard/index.html

@@ -0,0 +1,19 @@
+import { distanceToNow } from '../app-portal/src/systems/Chains/fuel/utils/date';
+
+describe('date', () => {
+  it('Should generate distance from now in less than a minute', () => {
+    const actualDate = new Date('2024-06-19T15:00:01');
+    const futureDate = new Date('2024-06-19T15:00:11');
+    jest.useFakeTimers().setSystemTime(actualDate);
+    expect(distanceToNow(futureDate)).toBe('less than a minute');
+    jest.restoreAllMocks();
+  });
+
+  it('Should generate distance from now in a minute', () => {
+    const actualDate = new Date('2024-06-19T15:00:01');
+    const futureDate = new Date('2024-06-19T15:01:11');
+    jest.useFakeTimers().setSystemTime(actualDate);
+    expect(distanceToNow(futureDate)).toBe('a minute');
+    jest.restoreAllMocks();
+  });
+});