From b0642f2de89746c0635dd4e00fab304aa1885677 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@dfinity.org>
Date: Thu, 16 Nov 2023 08:32:57 +0100
Subject: [PATCH] Replace secondsToDuration with utils move to ic-js (#3773)

# Motivation

`secondsToDuration` has been moved to `@dfinity/utils` therefore this PR
replaces the usage of the function by the one in the library. It also
remove the duplicate implementation within NNS dapp which becomes
unused.

# PRs

- [x] Function moved in https://github.com/dfinity/ic-js/pull/467
---
 .../launchpad/ProjectCardSwapInfo.svelte      |   8 +-
 .../NnsNeuronDissolveDelayItemAction.svelte   |   6 +-
 .../neurons/ConfirmDissolveDelay.svelte       |   4 +-
 .../neurons/NeuronStateRemainingTime.svelte   |  21 ++-
 .../components/neurons/NnsNeuronAge.svelte    |   4 +-
 .../neurons/NnsNeuronDetailCard.svelte        |   9 +-
 .../ProjectTimelineUserCommitment.svelte      |   6 +-
 .../lib/components/proposals/Countdown.svelte |   5 +-
 .../SnsNeuronDissolveDelayItemAction.svelte   |   8 +-
 .../SnsNeuronVestingPeriodRemaining.svelte    |   7 +-
 .../SnsNeuronVotingPowerSection.svelte        |  11 +-
 .../VestingTooltipWrapper.svelte              |   7 +-
 .../ConfirmSnsDissolveDelay.svelte            |   6 +-
 .../sns-neurons/SnsNeuronAge.svelte           |   4 +-
 frontend/src/lib/routes/Settings.svelte       |   7 +-
 frontend/src/lib/utils/date.utils.ts          |  71 ++--------
 .../ProjectTimelineUserCommitment.spec.ts     |  15 +-
 .../components/proposals/Countdown.spec.ts    |   5 +-
 .../proposals/NnsProposalCard.spec.ts         |   4 +-
 .../ConfirmSnsDissolveDelay.spec.ts           |   5 +-
 .../sns-neurons/SetSnsDissolveDelay.spec.ts   |   5 +-
 .../src/tests/lib/utils/date.utils.spec.ts    | 131 +-----------------
 22 files changed, 99 insertions(+), 250 deletions(-)

diff --git a/frontend/src/lib/components/launchpad/ProjectCardSwapInfo.svelte b/frontend/src/lib/components/launchpad/ProjectCardSwapInfo.svelte
index f751797fbee..ffefc782219 100644
--- a/frontend/src/lib/components/launchpad/ProjectCardSwapInfo.svelte
+++ b/frontend/src/lib/components/launchpad/ProjectCardSwapInfo.svelte
@@ -11,7 +11,7 @@
   } from "$lib/utils/projects.utils";
   import { TokenAmount, ICPToken } from "@dfinity/utils";
   import { i18n } from "$lib/stores/i18n";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import AmountDisplay from "$lib/components/ic/AmountDisplay.svelte";
   import { SnsSwapLifecycle } from "@dfinity/sns";
   import ProjectUserCommitmentLabel from "$lib/components/project-detail/ProjectUserCommitmentLabel.svelte";
@@ -69,14 +69,16 @@
     <!-- Sale is adopted -->
     {#if lifecycle === SnsSwapLifecycle.Adopted && durationTillStart !== undefined}
       <dt class="label">{$i18n.sns_project_detail.starts}</dt>
-      <dd class="value">{secondsToDuration(durationTillStart)}</dd>
+      <dd class="value">
+        {secondsToDuration({ seconds: durationTillStart, i18n: $i18n.time })}
+      </dd>
     {/if}
 
     <!-- Sale is open -->
     {#if lifecycle === SnsSwapLifecycle.Open && durationTillDeadline !== undefined}
       <dt class="label">{$i18n.sns_project_detail.deadline}</dt>
       <dd class="value" data-tid="project-deadline">
-        {secondsToDuration(durationTillDeadline)}
+        {secondsToDuration({ seconds: durationTillDeadline, i18n: $i18n.time })}
       </dd>
     {/if}
   </TestIdWrapper>
diff --git a/frontend/src/lib/components/neuron-detail/NnsNeuronDissolveDelayItemAction.svelte b/frontend/src/lib/components/neuron-detail/NnsNeuronDissolveDelayItemAction.svelte
index 0f222f8c704..441a0b3fcdd 100644
--- a/frontend/src/lib/components/neuron-detail/NnsNeuronDissolveDelayItemAction.svelte
+++ b/frontend/src/lib/components/neuron-detail/NnsNeuronDissolveDelayItemAction.svelte
@@ -11,7 +11,7 @@
   import CommonItemAction from "../ui/CommonItemAction.svelte";
   import IncreaseDissolveDelayButton from "./actions/IncreaseDissolveDelayButton.svelte";
   import { keyOf } from "$lib/utils/utils";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE } from "$lib/constants/neurons.constants";
   import { authStore } from "$lib/stores/auth.store";
   import { icpAccountsStore } from "$lib/stores/icp-accounts.store";
@@ -55,7 +55,9 @@
       obj: $i18n.neuron_detail,
       key: stateTextMapper[neuron.state],
     })} ${
-      remainingTimeSeconds > 0n ? secondsToDuration(remainingTimeSeconds) : "0"
+      remainingTimeSeconds > 0n
+        ? secondsToDuration({ seconds: remainingTimeSeconds, i18n: $i18n.time })
+        : "0"
     }`}</span
   >
   <svelte:fragment slot="subtitle">
diff --git a/frontend/src/lib/components/neurons/ConfirmDissolveDelay.svelte b/frontend/src/lib/components/neurons/ConfirmDissolveDelay.svelte
index 2045a5d4763..af9c03863ce 100644
--- a/frontend/src/lib/components/neurons/ConfirmDissolveDelay.svelte
+++ b/frontend/src/lib/components/neurons/ConfirmDissolveDelay.svelte
@@ -3,7 +3,7 @@
   import { createEventDispatcher } from "svelte";
   import { updateDelay } from "$lib/services/neurons.services";
   import { i18n } from "$lib/stores/i18n";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import { formatToken } from "$lib/utils/token.utils";
   import {
@@ -44,7 +44,7 @@
 
 <div class="wrapper" data-tid="confirm-dissolve-delay-container">
   <div class="main-info">
-    <h3>{secondsToDuration(delayInSeconds)}</h3>
+    <h3>{secondsToDuration({ seconds: delayInSeconds, i18n: $i18n.time })}</h3>
   </div>
   <div>
     <p class="label">{$i18n.neurons.neuron_id}</p>
diff --git a/frontend/src/lib/components/neurons/NeuronStateRemainingTime.svelte b/frontend/src/lib/components/neurons/NeuronStateRemainingTime.svelte
index 5bedbfa8224..4a49599c2bb 100644
--- a/frontend/src/lib/components/neurons/NeuronStateRemainingTime.svelte
+++ b/frontend/src/lib/components/neurons/NeuronStateRemainingTime.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { NeuronState } from "@dfinity/nns";
   import { i18n } from "$lib/stores/i18n";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import { Html, KeyValuePair } from "@dfinity/gix-components";
 
@@ -17,7 +17,10 @@
       <p class="duration label" class:default-gaps={defaultGaps}>
         <Html
           text={replacePlaceholders($i18n.neurons.inline_remaining, {
-            $duration: secondsToDuration(timeInSeconds),
+            $duration: secondsToDuration({
+              seconds: timeInSeconds,
+              i18n: $i18n.time,
+            }),
           })}
         />
       </p>
@@ -25,15 +28,18 @@
       <KeyValuePair>
         <span slot="key" class="label">{$i18n.neurons.remaining}</span>
         <span slot="value" class="value"
-          >{secondsToDuration(timeInSeconds)}</span
+          >{secondsToDuration({
+            seconds: timeInSeconds,
+            i18n: $i18n.time,
+          })}</span
         >
       </KeyValuePair>
     {/if}
   {:else if state === NeuronState.Locked}
     {#if inline}
       <p class="duration label" class:default-gaps={defaultGaps}>
-        {secondsToDuration(timeInSeconds)} – {$i18n.neurons
-          .dissolve_delay_title}
+        {secondsToDuration({ seconds: timeInSeconds, i18n: $i18n.time })} – {$i18n
+          .neurons.dissolve_delay_title}
       </p>
     {:else}
       <KeyValuePair>
@@ -41,7 +47,10 @@
           >{$i18n.neurons.dissolve_delay_title}</span
         >
         <span slot="value" class="value"
-          >{secondsToDuration(timeInSeconds)}</span
+          >{secondsToDuration({
+            seconds: timeInSeconds,
+            i18n: $i18n.time,
+          })}</span
         >
       </KeyValuePair>
     {/if}
diff --git a/frontend/src/lib/components/neurons/NnsNeuronAge.svelte b/frontend/src/lib/components/neurons/NnsNeuronAge.svelte
index 224b0bd0140..ac40ee1f26f 100644
--- a/frontend/src/lib/components/neurons/NnsNeuronAge.svelte
+++ b/frontend/src/lib/components/neurons/NnsNeuronAge.svelte
@@ -2,7 +2,7 @@
   import type { NeuronInfo } from "@dfinity/nns";
   import { i18n } from "$lib/stores/i18n";
   import { KeyValuePair } from "@dfinity/gix-components";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { neuronAge } from "$lib/utils/neuron.utils";
   import TestIdWrapper from "../common/TestIdWrapper.svelte";
 
@@ -14,7 +14,7 @@
     <KeyValuePair>
       <span class="label" slot="key">{$i18n.neurons.age}</span>
       <span class="value" slot="value" data-tid="nns-neuron-age">
-        {secondsToDuration(neuronAge(neuron))}
+        {secondsToDuration({ seconds: neuronAge(neuron), i18n: $i18n.time })}
       </span>
     </KeyValuePair>
   {/if}
diff --git a/frontend/src/lib/components/neurons/NnsNeuronDetailCard.svelte b/frontend/src/lib/components/neurons/NnsNeuronDetailCard.svelte
index 6409221c173..dcf88f78af6 100644
--- a/frontend/src/lib/components/neurons/NnsNeuronDetailCard.svelte
+++ b/frontend/src/lib/components/neurons/NnsNeuronDetailCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import AmountDisplay from "$lib/components/ic/AmountDisplay.svelte";
   import { i18n } from "$lib/stores/i18n";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import {
     formatVotingPower,
@@ -42,13 +42,16 @@
   <KeyValuePair testId="dissolve-delay">
     <span slot="key" class="label">{$i18n.neurons.dissolve_delay_title}</span>
     <span slot="value" class="value"
-      >{secondsToDuration(neuron.dissolveDelaySeconds)}</span
+      >{secondsToDuration({
+        seconds: neuron.dissolveDelaySeconds,
+        i18n: $i18n.time,
+      })}</span
     >
   </KeyValuePair>
   <KeyValuePair testId="age">
     <span class="label" slot="key">{$i18n.neurons.age}</span>
     <span class="value" slot="value" data-tid="nns-neuron-age">
-      {secondsToDuration(neuronAge(neuron))}
+      {secondsToDuration({ seconds: neuronAge(neuron), i18n: $i18n.time })}
     </span>
   </KeyValuePair>
   <KeyValuePair testId="voting-power">
diff --git a/frontend/src/lib/components/project-detail/ProjectTimelineUserCommitment.svelte b/frontend/src/lib/components/project-detail/ProjectTimelineUserCommitment.svelte
index 0236bb1ca11..315f1727d55 100644
--- a/frontend/src/lib/components/project-detail/ProjectTimelineUserCommitment.svelte
+++ b/frontend/src/lib/components/project-detail/ProjectTimelineUserCommitment.svelte
@@ -9,7 +9,7 @@
     durationTillSwapDeadline,
     durationTillSwapStart,
   } from "$lib/utils/projects.utils";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { Value, KeyValuePair } from "@dfinity/gix-components";
   import { SnsSwapLifecycle } from "@dfinity/sns";
   import { TokenAmount, nonNullish } from "@dfinity/utils";
@@ -55,7 +55,7 @@
       {$i18n.sns_project_detail.deadline}
     </span>
     <Value slot="value">
-      {secondsToDuration(durationTillDeadline)}
+      {secondsToDuration({ seconds: durationTillDeadline, i18n: $i18n.time })}
     </Value>
   </KeyValuePair>
 {/if}
@@ -65,7 +65,7 @@
       {$i18n.sns_project_detail.starts}
     </span>
     <Value slot="value">
-      {secondsToDuration(durationTillStart)}
+      {secondsToDuration({ seconds: durationTillStart, i18n: $i18n.time })}
     </Value>
   </KeyValuePair>
 {/if}
diff --git a/frontend/src/lib/components/proposals/Countdown.svelte b/frontend/src/lib/components/proposals/Countdown.svelte
index fb49a963820..99f30337487 100644
--- a/frontend/src/lib/components/proposals/Countdown.svelte
+++ b/frontend/src/lib/components/proposals/Countdown.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onDestroy, onMount } from "svelte";
-  import { nowInSeconds, secondsToDuration } from "$lib/utils/date.utils";
+  import { nowInSeconds } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { i18n } from "$lib/stores/i18n";
   import { AUTH_SESSION_DURATION } from "$lib/constants/identity.constants";
 
@@ -70,7 +71,7 @@
 
 {#if countdown !== undefined && countdown > ZERO}
   <p data-tid="countdown">
-    {secondsToDuration(countdown)}
+    {secondsToDuration({ seconds: countdown, i18n: $i18n.time })}
     {$i18n.proposal_detail.remaining}
   </p>
 {/if}
diff --git a/frontend/src/lib/components/sns-neuron-detail/SnsNeuronDissolveDelayItemAction.svelte b/frontend/src/lib/components/sns-neuron-detail/SnsNeuronDissolveDelayItemAction.svelte
index 5bc2a13e9c2..1fc643de882 100644
--- a/frontend/src/lib/components/sns-neuron-detail/SnsNeuronDissolveDelayItemAction.svelte
+++ b/frontend/src/lib/components/sns-neuron-detail/SnsNeuronDissolveDelayItemAction.svelte
@@ -4,7 +4,7 @@
   import { NeuronState } from "@dfinity/nns";
   import CommonItemAction from "../ui/CommonItemAction.svelte";
   import { keyOf } from "$lib/utils/utils";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import type { SnsNervousSystemParameters, SnsNeuron } from "@dfinity/sns";
   import {
     dissolveDelayMultiplier,
@@ -58,7 +58,11 @@
     >{`${keyOf({
       obj: $i18n.neuron_detail,
       key: stateTextMapper[state],
-    })} ${dissolvingTime > 0n ? secondsToDuration(dissolvingTime) : "0"}`}</span
+    })} ${
+      dissolvingTime > 0n
+        ? secondsToDuration({ seconds: dissolvingTime, i18n: $i18n.time })
+        : "0"
+    }`}</span
   >
   <svelte:fragment slot="subtitle">
     {#if dissolvingTime >= minimumDelayToVoteInSeconds}
diff --git a/frontend/src/lib/components/sns-neuron-detail/SnsNeuronVestingPeriodRemaining.svelte b/frontend/src/lib/components/sns-neuron-detail/SnsNeuronVestingPeriodRemaining.svelte
index c3150ff5876..b824ae72099 100644
--- a/frontend/src/lib/components/sns-neuron-detail/SnsNeuronVestingPeriodRemaining.svelte
+++ b/frontend/src/lib/components/sns-neuron-detail/SnsNeuronVestingPeriodRemaining.svelte
@@ -3,7 +3,7 @@
   import TestIdWrapper from "../common/TestIdWrapper.svelte";
   import { KeyValuePair } from "@dfinity/gix-components";
   import { i18n } from "$lib/stores/i18n";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { isVesting, vestingInSeconds } from "$lib/utils/sns-neuron.utils";
 
   export let neuron: SnsNeuron;
@@ -14,7 +14,10 @@
     <KeyValuePair testId="sns-neuron-vesting-period">
       <span class="label" slot="key">{$i18n.neurons.vestion_period}</span>
       <span class="value" slot="value">
-        {secondsToDuration(vestingInSeconds(neuron))}
+        {secondsToDuration({
+          seconds: vestingInSeconds(neuron),
+          i18n: $i18n.time,
+        })}
       </span>
     </KeyValuePair>
   {/if}
diff --git a/frontend/src/lib/components/sns-neuron-detail/SnsNeuronVotingPowerSection.svelte b/frontend/src/lib/components/sns-neuron-detail/SnsNeuronVotingPowerSection.svelte
index 6b0cb03097b..0248bf10c94 100644
--- a/frontend/src/lib/components/sns-neuron-detail/SnsNeuronVotingPowerSection.svelte
+++ b/frontend/src/lib/components/sns-neuron-detail/SnsNeuronVotingPowerSection.svelte
@@ -18,7 +18,7 @@
   import SnsNeuronStateItemAction from "./SnsNeuronStateItemAction.svelte";
   import SnsNeuronDissolveDelayItemAction from "./SnsNeuronDissolveDelayItemAction.svelte";
   import { formatToken } from "$lib/utils/token.utils";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { Html, Section } from "@dfinity/gix-components";
   import { Principal } from "@dfinity/principal";
 
@@ -70,11 +70,12 @@
         text={replacePlaceholders(
           $i18n.neuron_detail.voting_power_section_description_expanded_zero,
           {
-            $minDuration: secondsToDuration(
-              fromDefinedNullable(
+            $minDuration: secondsToDuration({
+              seconds: fromDefinedNullable(
                 parameters.neuron_minimum_dissolve_delay_to_vote_seconds
-              )
-            ),
+              ),
+              i18n: $i18n.time,
+            }),
             $dashboardLink: neuronDashboardUrl({
               neuron,
               rootCanisterId: Principal.fromText(universe.canisterId),
diff --git a/frontend/src/lib/components/sns-neuron-detail/VestingTooltipWrapper.svelte b/frontend/src/lib/components/sns-neuron-detail/VestingTooltipWrapper.svelte
index cc75ce43738..5549643b1b6 100644
--- a/frontend/src/lib/components/sns-neuron-detail/VestingTooltipWrapper.svelte
+++ b/frontend/src/lib/components/sns-neuron-detail/VestingTooltipWrapper.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Tooltip from "$lib/components/ui/Tooltip.svelte";
   import { i18n } from "$lib/stores/i18n";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import { isVesting, vestingInSeconds } from "$lib/utils/sns-neuron.utils";
   import type { SnsNeuron } from "@dfinity/sns";
@@ -17,7 +17,10 @@
       text={replacePlaceholders(
         $i18n.sns_neuron_detail.vesting_period_tooltip,
         {
-          $remainingVesting: secondsToDuration(vestingInSeconds(neuron)),
+          $remainingVesting: secondsToDuration({
+            seconds: vestingInSeconds(neuron),
+            i18n: $i18n.time,
+          }),
         }
       )}
     >
diff --git a/frontend/src/lib/components/sns-neurons/ConfirmSnsDissolveDelay.svelte b/frontend/src/lib/components/sns-neurons/ConfirmSnsDissolveDelay.svelte
index 0a5a01594b8..89d3a8887ec 100644
--- a/frontend/src/lib/components/sns-neurons/ConfirmSnsDissolveDelay.svelte
+++ b/frontend/src/lib/components/sns-neurons/ConfirmSnsDissolveDelay.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   import { i18n } from "$lib/stores/i18n";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import { formatToken } from "$lib/utils/token.utils";
   import { formatVotingPower } from "$lib/utils/neuron.utils";
@@ -47,7 +47,9 @@
 
 <div class="wrapper" data-tid="confirm-dissolve-delay-container">
   <div class="main-info">
-    <h3>{secondsToDuration(BigInt(delayInSeconds))}</h3>
+    <h3>
+      {secondsToDuration({ seconds: BigInt(delayInSeconds), i18n: $i18n.time })}
+    </h3>
   </div>
   <div>
     <p class="label">{$i18n.neurons.neuron_id}</p>
diff --git a/frontend/src/lib/components/sns-neurons/SnsNeuronAge.svelte b/frontend/src/lib/components/sns-neurons/SnsNeuronAge.svelte
index d87a565a601..1ab89cf924b 100644
--- a/frontend/src/lib/components/sns-neurons/SnsNeuronAge.svelte
+++ b/frontend/src/lib/components/sns-neurons/SnsNeuronAge.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { i18n } from "$lib/stores/i18n";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { neuronAge } from "$lib/utils/sns-neuron.utils";
   import { KeyValuePair } from "@dfinity/gix-components";
   import type { SnsNeuron } from "@dfinity/sns";
@@ -17,7 +17,7 @@
     <KeyValuePair testId="sns-neuron-age">
       <span class="label" slot="key">{$i18n.neurons.age}</span>
       <span class="value" slot="value">
-        {secondsToDuration(age)}
+        {secondsToDuration({ seconds: age, i18n: $i18n.time })}
       </span>
     </KeyValuePair>
   {/if}
diff --git a/frontend/src/lib/routes/Settings.svelte b/frontend/src/lib/routes/Settings.svelte
index 5c574c2b32c..8db98f987ca 100644
--- a/frontend/src/lib/routes/Settings.svelte
+++ b/frontend/src/lib/routes/Settings.svelte
@@ -5,7 +5,7 @@
     SkeletonText,
   } from "@dfinity/gix-components";
   import Hash from "$lib/components/ui/Hash.svelte";
-  import { secondsToDuration } from "$lib/utils/date.utils";
+  import { secondsToDuration } from "@dfinity/utils";
   import { authRemainingTimeStore, authStore } from "$lib/stores/auth.store";
   import { i18n } from "$lib/stores/i18n";
   import { debounce, nonNullish } from "@dfinity/utils";
@@ -57,7 +57,10 @@
             {#if nonNullish(remainingTimeMilliseconds)}
               {remainingTimeMilliseconds <= 0
                 ? "0"
-                : secondsToDuration(BigInt(remainingTimeMilliseconds) / 1000n)}
+                : secondsToDuration({
+                    seconds: BigInt(remainingTimeMilliseconds) / 1000n,
+                    i18n: $i18n.time,
+                  })}
             {:else}
               <div class="skeleton"><SkeletonText /></div>
             {/if}
diff --git a/frontend/src/lib/utils/date.utils.ts b/frontend/src/lib/utils/date.utils.ts
index 4dc63b45dbb..4536fb91b2b 100644
--- a/frontend/src/lib/utils/date.utils.ts
+++ b/frontend/src/lib/utils/date.utils.ts
@@ -1,13 +1,10 @@
 import {
-  DAYS_IN_NON_LEAP_YEAR,
-  HOURS_IN_DAY,
-  MINUTES_IN_HOUR,
   SECONDS_IN_DAY,
-  SECONDS_IN_MINUTE,
   SECONDS_IN_MONTH,
   SECONDS_IN_YEAR,
 } from "$lib/constants/constants";
 import { i18n } from "$lib/stores/i18n";
+import { secondsToDuration } from "@dfinity/utils";
 import { get } from "svelte/store";
 
 type LabelKey = "year" | "month" | "day" | "hour" | "minute" | "second";
@@ -20,63 +17,6 @@ const createLabel = (labelKey: LabelKey, amount: bigint): LabelInfo => ({
   amount: Number(amount),
 });
 
-// Returns how many days there are in the given number of years, adding a leap
-// day for every 4 years.
-const daysInYears = (years: bigint): bigint => {
-  // Use integer division.
-  const leapDays = years / BigInt(4);
-  return years * BigInt(DAYS_IN_NON_LEAP_YEAR) + leapDays;
-};
-
-// Returns how many full years, requiring a leap day for every 4 full years,
-// there are in the given number of days.
-const fullYearsInDays = (days: bigint): bigint => {
-  // Use integer division.
-  let years = days / BigInt(DAYS_IN_NON_LEAP_YEAR);
-  while (daysInYears(years) > days) {
-    years--;
-  }
-  return years;
-};
-
-export const secondsToDuration = (seconds: bigint): string => {
-  const i18nObj = get(i18n);
-
-  let minutes = seconds / BigInt(SECONDS_IN_MINUTE);
-
-  let hours = minutes / BigInt(MINUTES_IN_HOUR);
-  minutes -= hours * BigInt(MINUTES_IN_HOUR);
-
-  let days = hours / BigInt(HOURS_IN_DAY);
-  hours -= days * BigInt(HOURS_IN_DAY);
-
-  const years = fullYearsInDays(days);
-  days -= daysInYears(years);
-
-  const periods = [
-    createLabel("year", years),
-    createLabel("day", days),
-    createLabel("hour", hours),
-    createLabel("minute", minutes),
-    ...(seconds > BigInt(0) && seconds < BigInt(60)
-      ? [createLabel("second", seconds)]
-      : []),
-  ];
-
-  return periods
-    .filter(({ amount }) => amount > 0)
-    .slice(0, 2)
-    .map(
-      (labelInfo) =>
-        `${labelInfo.amount} ${
-          labelInfo.amount === 1
-            ? i18nObj.time[labelInfo.labelKey]
-            : i18nObj.time[`${labelInfo.labelKey}_plural`]
-        }`
-    )
-    .join(", ");
-};
-
 /**
  * Rounds days to full years (1 year = 365.25 days).
  *
@@ -89,8 +29,13 @@ export const secondsToDuration = (seconds: bigint): string => {
  *
  * @param days
  */
-export const daysToDuration = (days: number): string =>
-  secondsToDuration(BigInt(Math.ceil(days * SECONDS_IN_DAY)));
+export const daysToDuration = (days: number): string => {
+  const { time } = get(i18n);
+  return secondsToDuration({
+    seconds: BigInt(Math.ceil(days * SECONDS_IN_DAY)),
+    i18n: time,
+  });
+};
 
 /**
  * Displays years, months and days.
diff --git a/frontend/src/tests/lib/components/project-detail/ProjectTimelineUserCommitment.spec.ts b/frontend/src/tests/lib/components/project-detail/ProjectTimelineUserCommitment.spec.ts
index 0cc25c75fab..22a31f92c03 100644
--- a/frontend/src/tests/lib/components/project-detail/ProjectTimelineUserCommitment.spec.ts
+++ b/frontend/src/tests/lib/components/project-detail/ProjectTimelineUserCommitment.spec.ts
@@ -1,7 +1,6 @@
 import ProjectTimelineUserCommitment from "$lib/components/project-detail/ProjectTimelineUserCommitment.svelte";
 import { SECONDS_IN_DAY } from "$lib/constants/constants";
 import type { SnsSwapCommitment } from "$lib/types/sns";
-import { secondsToDuration } from "$lib/utils/date.utils";
 import {
   durationTillSwapDeadline,
   durationTillSwapStart,
@@ -13,7 +12,7 @@ import {
   summaryForLifecycle,
 } from "$tests/mocks/sns-projects.mock";
 import { SnsSwapLifecycle } from "@dfinity/sns";
-import { ICPToken, TokenAmount } from "@dfinity/utils";
+import { ICPToken, TokenAmount, secondsToDuration } from "@dfinity/utils";
 import { render } from "@testing-library/svelte";
 
 describe("ProjectTimelineUserCommitment", () => {
@@ -33,9 +32,9 @@ describe("ProjectTimelineUserCommitment", () => {
     });
     expect(queryByText(en.sns_project_detail.deadline)).toBeInTheDocument();
 
-    const expectedDeadline = secondsToDuration(
-      durationTillSwapDeadline(summary.swap) as bigint
-    );
+    const expectedDeadline = secondsToDuration({
+      seconds: durationTillSwapDeadline(summary.swap) as bigint,
+    });
     expect(queryByText(expectedDeadline)).toBeInTheDocument();
   });
 
@@ -57,9 +56,9 @@ describe("ProjectTimelineUserCommitment", () => {
     });
     expect(queryByText(en.sns_project_detail.starts)).toBeInTheDocument();
 
-    const expectedStartingInfo = secondsToDuration(
-      durationTillSwapStart(summary.swap)
-    );
+    const expectedStartingInfo = secondsToDuration({
+      seconds: durationTillSwapStart(summary.swap),
+    });
     expect(queryByText(expectedStartingInfo)).toBeInTheDocument();
   });
 
diff --git a/frontend/src/tests/lib/components/proposals/Countdown.spec.ts b/frontend/src/tests/lib/components/proposals/Countdown.spec.ts
index d346984b023..738fc64dc9a 100644
--- a/frontend/src/tests/lib/components/proposals/Countdown.spec.ts
+++ b/frontend/src/tests/lib/components/proposals/Countdown.spec.ts
@@ -1,7 +1,8 @@
 import Countdown from "$lib/components/proposals/Countdown.svelte";
-import { nowInSeconds, secondsToDuration } from "$lib/utils/date.utils";
+import { nowInSeconds } from "$lib/utils/date.utils";
 import en from "$tests/mocks/i18n.mock";
 import { mockProposals } from "$tests/mocks/proposals.store.mock";
+import { secondsToDuration } from "@dfinity/utils";
 import { render } from "@testing-library/svelte";
 
 describe("Countdown", () => {
@@ -30,7 +31,7 @@ describe("Countdown", () => {
     const durationTillDeadline =
       (mockProposals[0].deadlineTimestampSeconds as bigint) - BigInt(now);
 
-    const text = `${secondsToDuration(durationTillDeadline)} ${
+    const text = `${secondsToDuration({ seconds: durationTillDeadline })} ${
       en.proposal_detail.remaining
     }`;
 
diff --git a/frontend/src/tests/lib/components/proposals/NnsProposalCard.spec.ts b/frontend/src/tests/lib/components/proposals/NnsProposalCard.spec.ts
index a6f1de80483..8f2d6091ff1 100644
--- a/frontend/src/tests/lib/components/proposals/NnsProposalCard.spec.ts
+++ b/frontend/src/tests/lib/components/proposals/NnsProposalCard.spec.ts
@@ -1,7 +1,6 @@
 import NnsProposalCard from "$lib/components/proposals/NnsProposalCard.svelte";
 import { DEFAULT_PROPOSALS_FILTERS } from "$lib/constants/proposals.constants";
 import { proposalsFiltersStore } from "$lib/stores/proposals.store";
-import { secondsToDuration } from "$lib/utils/date.utils";
 import en from "$tests/mocks/i18n.mock";
 import { createMockProposalInfo } from "$tests/mocks/proposal.mock";
 import { mockProposals } from "$tests/mocks/proposals.store.mock";
@@ -13,6 +12,7 @@ import {
   type Proposal,
   type ProposalInfo,
 } from "@dfinity/nns";
+import { secondsToDuration } from "@dfinity/utils";
 import { render } from "@testing-library/svelte";
 
 describe("NnsProposalCard", () => {
@@ -128,7 +128,7 @@ describe("NnsProposalCard", () => {
       (mockProposals[0].deadlineTimestampSeconds as bigint) -
       BigInt(nowInSeconds);
 
-    const text = `${secondsToDuration(durationTillDeadline)} ${
+    const text = `${secondsToDuration({ seconds: durationTillDeadline })} ${
       en.proposal_detail.remaining
     }`;
 
diff --git a/frontend/src/tests/lib/components/sns-neurons/ConfirmSnsDissolveDelay.spec.ts b/frontend/src/tests/lib/components/sns-neurons/ConfirmSnsDissolveDelay.spec.ts
index 537ad788614..d2d7f0d20b0 100644
--- a/frontend/src/tests/lib/components/sns-neurons/ConfirmSnsDissolveDelay.spec.ts
+++ b/frontend/src/tests/lib/components/sns-neurons/ConfirmSnsDissolveDelay.spec.ts
@@ -1,7 +1,6 @@
 import ConfirmSnsDissolveDelay from "$lib/components/sns-neurons/ConfirmSnsDissolveDelay.svelte";
 import { SECONDS_IN_DAY } from "$lib/constants/constants";
 import { snsParametersStore } from "$lib/stores/sns-parameters.store";
-import { secondsToDuration } from "$lib/utils/date.utils";
 import { shortenWithMiddleEllipsis } from "$lib/utils/format.utils";
 import { formatVotingPower } from "$lib/utils/neuron.utils";
 import {
@@ -17,7 +16,7 @@ import {
   snsNervousSystemParametersMock,
 } from "$tests/mocks/sns-neurons.mock";
 import type { SnsNeuron } from "@dfinity/sns";
-import { ICPToken } from "@dfinity/utils";
+import { ICPToken, secondsToDuration } from "@dfinity/utils";
 import { render } from "@testing-library/svelte";
 
 describe("ConfirmSnsDissolveDelay", () => {
@@ -58,7 +57,7 @@ describe("ConfirmSnsDissolveDelay", () => {
     });
 
     expect(
-      getByText(secondsToDuration(BigInt(delayInSeconds)))
+      getByText(secondsToDuration({ seconds: BigInt(delayInSeconds) }))
     ).toBeInTheDocument();
   });
 
diff --git a/frontend/src/tests/lib/components/sns-neurons/SetSnsDissolveDelay.spec.ts b/frontend/src/tests/lib/components/sns-neurons/SetSnsDissolveDelay.spec.ts
index f4b9da03783..cf532c79eca 100644
--- a/frontend/src/tests/lib/components/sns-neurons/SetSnsDissolveDelay.spec.ts
+++ b/frontend/src/tests/lib/components/sns-neurons/SetSnsDissolveDelay.spec.ts
@@ -1,7 +1,6 @@
 import ConfirmSnsDissolveDelay from "$lib/components/sns-neurons/ConfirmSnsDissolveDelay.svelte";
 import { SECONDS_IN_DAY } from "$lib/constants/constants";
 import { snsParametersStore } from "$lib/stores/sns-parameters.store";
-import { secondsToDuration } from "$lib/utils/date.utils";
 import { shortenWithMiddleEllipsis } from "$lib/utils/format.utils";
 import { formatVotingPower } from "$lib/utils/neuron.utils";
 import {
@@ -17,7 +16,7 @@ import {
   snsNervousSystemParametersMock,
 } from "$tests/mocks/sns-neurons.mock";
 import type { SnsNeuron } from "@dfinity/sns";
-import { ICPToken } from "@dfinity/utils";
+import { ICPToken, secondsToDuration } from "@dfinity/utils";
 import { render } from "@testing-library/svelte";
 
 describe("ConfirmSnsDissolveDelay", () => {
@@ -58,7 +57,7 @@ describe("ConfirmSnsDissolveDelay", () => {
     });
 
     expect(
-      getByText(secondsToDuration(BigInt(delayInSeconds)))
+      getByText(secondsToDuration({ seconds: BigInt(delayInSeconds) }))
     ).toBeInTheDocument();
   });
 
diff --git a/frontend/src/tests/lib/utils/date.utils.spec.ts b/frontend/src/tests/lib/utils/date.utils.spec.ts
index 9a260174983..f3f0f425fe2 100644
--- a/frontend/src/tests/lib/utils/date.utils.spec.ts
+++ b/frontend/src/tests/lib/utils/date.utils.spec.ts
@@ -6,138 +6,11 @@ import {
   secondsToDate,
   secondsToDateTime,
   secondsToDissolveDelayDuration,
-  secondsToDuration,
   secondsToTime,
 } from "$lib/utils/date.utils";
 import en from "$tests/mocks/i18n.mock";
 import { normalizeWhitespace } from "$tests/utils/utils.test-utils";
-
-describe("secondsToDuration", () => {
-  // This function should not be smart. It should just make it easier to add
-  // numbers together to get the number of seconds we want to test.
-  const renderSeconds = ({
-    nonLeapYears = 0,
-    days = 0,
-    hours = 0,
-    minutes = 0,
-    seconds = 0,
-  }: {
-    nonLeapYears?: number;
-    days?: number;
-    hours?: number;
-    minutes?: number;
-    seconds?: number;
-  }) => {
-    days += 365 * nonLeapYears;
-    hours += 24 * days;
-    minutes += 60 * hours;
-    seconds += 60 * minutes;
-    return secondsToDuration(BigInt(seconds));
-  };
-
-  it("should give year details", () => {
-    expect(renderSeconds({ nonLeapYears: 1 })).toBe("1 year");
-    expect(renderSeconds({ nonLeapYears: 1, seconds: 59 })).toBe("1 year");
-    expect(renderSeconds({ nonLeapYears: 1, minutes: 59 })).toBe(
-      "1 year, 59 minutes"
-    );
-    expect(renderSeconds({ nonLeapYears: 1, hours: 23 })).toBe(
-      "1 year, 23 hours"
-    );
-    expect(renderSeconds({ nonLeapYears: 1, days: 1, seconds: -1 })).toBe(
-      "1 year, 23 hours"
-    );
-    expect(renderSeconds({ nonLeapYears: 1, days: 1 })).toBe("1 year, 1 day");
-    expect(renderSeconds({ nonLeapYears: 1, days: 2 })).toBe("1 year, 2 days");
-    expect(renderSeconds({ nonLeapYears: 2, seconds: -1 })).toBe(
-      "1 year, 364 days"
-    );
-    expect(renderSeconds({ nonLeapYears: 2 })).toBe("2 years");
-    expect(renderSeconds({ nonLeapYears: 2, minutes: 59 })).toBe(
-      "2 years, 59 minutes"
-    );
-    expect(renderSeconds({ nonLeapYears: 2, hours: 23 })).toBe(
-      "2 years, 23 hours"
-    );
-    expect(renderSeconds({ nonLeapYears: 2, days: 1 })).toBe("2 years, 1 day");
-    expect(renderSeconds({ nonLeapYears: 2, days: 2 })).toBe("2 years, 2 days");
-    expect(renderSeconds({ nonLeapYears: 3, seconds: -1 })).toBe(
-      "2 years, 364 days"
-    );
-    expect(renderSeconds({ nonLeapYears: 3 })).toBe("3 years");
-    // 4 actual years have a leap day so we add 1 day to 4 nonLeap years.
-    expect(renderSeconds({ nonLeapYears: 4, days: 1, seconds: -1 })).toBe(
-      "3 years, 365 days"
-    );
-    expect(renderSeconds({ nonLeapYears: 4, days: 1 })).toBe("4 years");
-    expect(renderSeconds({ nonLeapYears: 5, days: 1, seconds: -1 })).toBe(
-      "4 years, 364 days"
-    );
-    expect(renderSeconds({ nonLeapYears: 5, days: 1 })).toBe("5 years");
-    expect(renderSeconds({ nonLeapYears: 6, days: 1, seconds: -1 })).toBe(
-      "5 years, 364 days"
-    );
-    expect(renderSeconds({ nonLeapYears: 6, days: 1 })).toBe("6 years");
-    expect(renderSeconds({ nonLeapYears: 7, days: 1, seconds: -1 })).toBe(
-      "6 years, 364 days"
-    );
-    expect(renderSeconds({ nonLeapYears: 7, days: 1 })).toBe("7 years");
-    // 4 actual years have 2 leap days so we add 2 days to 8 nonLeap years.
-    expect(renderSeconds({ nonLeapYears: 8, days: 2, seconds: -1 })).toBe(
-      "7 years, 365 days"
-    );
-    expect(renderSeconds({ nonLeapYears: 8, days: 2 })).toBe("8 years");
-    expect(renderSeconds({ nonLeapYears: 9, days: 2, seconds: -1 })).toBe(
-      "8 years, 364 days"
-    );
-    expect(renderSeconds({ nonLeapYears: 9, days: 2 })).toBe("9 years");
-  });
-
-  it("should give day details", () => {
-    expect(renderSeconds({ days: 1 })).toBe("1 day");
-    expect(renderSeconds({ days: 1, seconds: 59 })).toBe("1 day");
-    expect(renderSeconds({ days: 1, minutes: 59 })).toBe("1 day, 59 minutes");
-    expect(renderSeconds({ days: 1, hours: 1 })).toBe("1 day, 1 hour");
-    expect(renderSeconds({ days: 1, hours: 2 })).toBe("1 day, 2 hours");
-    expect(renderSeconds({ days: 2, seconds: -1 })).toBe("1 day, 23 hours");
-    expect(renderSeconds({ days: 2 })).toBe("2 days");
-    expect(renderSeconds({ days: 365, seconds: -1 })).toBe(
-      "364 days, 23 hours"
-    );
-  });
-
-  it("should give hour details", () => {
-    expect(renderSeconds({ hours: 1 })).toBe("1 hour");
-    expect(renderSeconds({ hours: 1, seconds: 59 })).toBe("1 hour");
-    expect(renderSeconds({ hours: 1, minutes: 59 })).toBe("1 hour, 59 minutes");
-    expect(renderSeconds({ hours: 2, seconds: -1 })).toBe("1 hour, 59 minutes");
-    expect(renderSeconds({ hours: 2 })).toBe("2 hours");
-    expect(renderSeconds({ hours: 2, minutes: 59 })).toBe(
-      "2 hours, 59 minutes"
-    );
-    expect(renderSeconds({ hours: 24, seconds: -1 })).toBe(
-      "23 hours, 59 minutes"
-    );
-  });
-
-  it("should give minute details", () => {
-    expect(renderSeconds({ minutes: 1 })).toBe("1 minute");
-    expect(renderSeconds({ minutes: 1, seconds: 1 })).toBe("1 minute");
-    expect(renderSeconds({ minutes: 1, seconds: 59 })).toBe("1 minute");
-    expect(renderSeconds({ minutes: 2 })).toBe("2 minutes");
-    expect(renderSeconds({ minutes: 2, seconds: 59 })).toBe("2 minutes");
-    expect(renderSeconds({ minutes: 60, seconds: -1 })).toBe("59 minutes");
-  });
-
-  it("should give seconds details", () => {
-    expect(secondsToDuration(BigInt(2))).toBe("2 seconds");
-    expect(secondsToDuration(BigInt(59))).toBe("59 seconds");
-  });
-
-  it("should give a second details", () => {
-    expect(secondsToDuration(BigInt(1))).toBe("1 second");
-  });
-});
+import { secondsToDuration } from "@dfinity/utils";
 
 describe("daysToDuration", () => {
   it("should return 1 year", () => {
@@ -187,7 +60,7 @@ describe("daysToDuration", () => {
     for (let days = 1; days < 3000; days++) {
       expect({ days, duration: daysToDuration(days) }).toEqual({
         days,
-        duration: secondsToDuration(BigInt(days * SECONDS_IN_DAY)),
+        duration: secondsToDuration({ seconds: BigInt(days * SECONDS_IN_DAY) }),
       });
     }
   });