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 dfinity/ic-js#467
dfinity · Nov 16, 2023 · b0642f2 · b0642f2
1 parent aff6669
commit b0642f2
Show file tree

Hide file tree

Showing 22 changed files with 99 additions and 250 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,31 +17,40 @@
       <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>
     {:else}
       <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>
         <span slot="key" class="label"
           >{$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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}