Use an external luxon package to relative time (#869)

Closes #864
Closes #196

Some time ago we discussed the use of an external library to show
relative time. So let's use
[luxon](https://moment.github.io/luxon/api-docs/index.html#datetimetorelative)
to solve the problem described in
#864.

> If a deposit was made at 12:00 and it's now 12:59 the counter shows
the deposit was made 59 minutes ago. But if it's 13:01, the counter
shows that the deposit was made 2 hours ago.

This problem does not exist with the external library.

https://deploy-preview-869--acre-dapp-testnet.netlify.app/dashboard
![Screenshot 2024-11-15 at 15 33
42](https://github.com/user-attachments/assets/3eea77d5-1a8f-4180-b7d6-dfdd73886d38)


https://bitcoin.test.acre.fi/dashboard

![Screenshot 2024-11-15 at 15 33
49](https://github.com/user-attachments/assets/2d69044c-b24e-4a86-9548-e6160bad2047)

dapp/package.json

@@ -38,6 +38,7 @@
     "ethers": "^6.10.0",
     "formik": "^2.4.5",
     "framer-motion": "^10.16.5",
+    "luxon": "^3.5.0",
     "mustache": "^4.2.0",
     "react": "^18.2.0",
     "react-confetti-explosion": "^2.1.2",
@@ -51,6 +52,7 @@
   "devDependencies": {
     "@sentry/vite-plugin": "^2.22.5",
     "@thesis-co/eslint-config": "github:thesis/eslint-config#7b9bc8c",
+    "@types/luxon": "^3.4.2",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.12.0",

dapp/src/utils/time.ts

@@ -3,12 +3,10 @@ import {
   ONE_DAY_IN_SECONDS,
   ONE_HOUR_IN_SECONDS,
   ONE_MINUTE_IN_SECONDS,
-  ONE_MONTH_IN_SECONDS,
   ONE_SEC_IN_MILLISECONDS,
-  ONE_WEEK_IN_SECONDS,
-  ONE_YEAR_IN_SECONDS,
 } from "#/constants"
 import { TimeUnits } from "#/types"
+import { DateTime } from "luxon"
 
 export const dateToUnixTimestamp = (date: Date = new Date()) =>
   Math.floor(date.getTime() / ONE_SEC_IN_MILLISECONDS)
@@ -31,38 +29,14 @@ export const unixTimestampToTimeUnits = (targetUnix: number): TimeUnits => {
   }
 }
 
-// unit, max diff, divisor
-const unitsToDivisor: [Intl.RelativeTimeFormatUnit, number, number][] = [
-  ["second", ONE_MINUTE_IN_SECONDS, 1],
-  ["minute", ONE_HOUR_IN_SECONDS, ONE_MINUTE_IN_SECONDS],
-  ["hour", ONE_DAY_IN_SECONDS, ONE_HOUR_IN_SECONDS],
-  ["day", ONE_WEEK_IN_SECONDS, ONE_DAY_IN_SECONDS],
-  ["week", ONE_MONTH_IN_SECONDS, ONE_WEEK_IN_SECONDS],
-  ["month", ONE_YEAR_IN_SECONDS, ONE_MONTH_IN_SECONDS],
-  ["year", Infinity, ONE_YEAR_IN_SECONDS],
-]
-const rtf = new Intl.RelativeTimeFormat(DATE_FORMAT_LOCALE_TAG)
+export const timestampToRelativeTime = (timestamp: number) =>
+  DateTime.fromMillis(timestamp).toRelative()
 
-/**
- * The problem of displaying relative time has already been solved in Threshold Network
- * Let's use this logic to be able to display relative time such as: 2 mins ago, 3 hours ago...
- *
- * Source:
- * https://github.com/threshold-network/token-dashboard/blob/main/src/utils/date.ts#L48-L61
- */
-export const getRelativeTime = (dateOrUnixTimestamp: Date | number): string => {
-  const time =
-    typeof dateOrUnixTimestamp === "number"
-      ? dateOrUnixTimestamp
-      : dateToUnixTimestamp(dateOrUnixTimestamp)
-
-  const diff = Math.round(time - dateToUnixTimestamp())
-
-  const [unit, , divisor] =
-    unitsToDivisor.find(([, maxDiff]) => maxDiff > Math.abs(diff)) ??
-    unitsToDivisor[0]
-
-  return rtf.format(Math.floor(diff / divisor), unit)
+export const blockTimestampToRelativeTime = (
+  unixTimestamp: number,
+): string | null => {
+  const time = unixTimestamp * ONE_SEC_IN_MILLISECONDS
+  return timestampToRelativeTime(time)
 }
 
 // The function displays the date in the format: 21 Nov 2024, 16:02
@@ -81,7 +55,7 @@ export const displayBlockTimestamp = (blockTimestamp: number) => {
 
   if (executedMoreThanDayAgo) return formatBlockTimestamp(blockTimestamp)
 
-  return getRelativeTime(blockTimestamp)
+  return blockTimestampToRelativeTime(blockTimestamp)
 }
 
 export const getExpirationDate = (duration: number, startDate?: Date) => {