feat: secondsToDissolveDelayDuration (#1629)

# Motivation

Replace static sns min. dissolve delay with dynamic prop.

## Note:
Slider wasn't updated because its destiny is not clear yet.


# Changes

- util `secondsToDissolveDelayDuration`

# Tests

- `secondsToDissolveDelayDuration`

# Screenshots
![127 0 0 1_5173_neuron__u=s24we-diaaa-aaaaa-aaaka-cai
neuron=9d49faba9fd2d31a5705db307bcef7ae0ef1ba2b0f8723adf50aeb4051e1ca14(iPhone
12
Pro)](https://user-images.githubusercontent.com/98811342/206435667-1a1e236a-f118-4b8f-900f-d7ab9776bf80.png)

![127 0 0 1_5173_neuron__u=s24we-diaaa-aaaaa-aaaka-cai
neuron=9d49faba9fd2d31a5705db307bcef7ae0ef1ba2b0f8723adf50aeb4051e1ca14(iPhone
12 Pro)
(2)](https://user-images.githubusercontent.com/98811342/206435708-fc271363-d41f-484f-87b6-cf91688b3a73.png)

![127 0 0 1_5173_neuron__u=s24we-diaaa-aaaaa-aaaka-cai
neuron=9d49faba9fd2d31a5705db307bcef7ae0ef1ba2b0f8723adf50aeb4051e1ca14(iPhone
12 Pro)
(3)](https://user-images.githubusercontent.com/98811342/206435730-81569713-fe27-440e-aae0-ba35519e8a14.png)

frontend/src/lib/components/sns-neurons/SetSnsDissolveDelay.svelte

@@ -22,6 +22,7 @@
   import NeuronStateRemainingTime from "$lib/components/neurons/NeuronStateRemainingTime.svelte";
   import { snsParametersStore } from "$lib/stores/sns-parameters.store";
   import type { Principal } from "@dfinity/principal";
+  import { secondsToDissolveDelayDuration } from "$lib/utils/date.utils";
 
   export let rootCanisterId: Principal;
   export let neuron: SnsNeuron;
@@ -72,6 +73,16 @@
     });
   }
 
+  let minDissolveDelayDescription = "";
+  $: minDissolveDelayDescription =
+    minDissolveDelaySeconds === undefined
+      ? ""
+      : replacePlaceholders($i18n.sns_neurons.dissolve_delay_description, {
+          $duration: secondsToDissolveDelayDuration(
+            BigInt(minDissolveDelaySeconds)
+          ),
+        });
+
   let disableUpdate: boolean;
   $: disableUpdate =
     delayInSeconds < (minDissolveDelaySeconds ?? 0) ||
@@ -124,7 +135,7 @@
 
   <div>
     <p class="label">{$i18n.neurons.dissolve_delay_title}</p>
-    <p class="description">{$i18n.neurons.dissolve_delay_description}</p>
+    <p class="description">{minDissolveDelayDescription}</p>
 
     <div class="select-delay-container">
       {#if maxDissolveDelaySeconds !== undefined}

frontend/src/lib/constants/constants.ts

@@ -17,6 +17,7 @@ export const SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
 // Taking into account 1/4 of leap year
 export const SECONDS_IN_YEAR = ((4 * 365 + 1) * SECONDS_IN_DAY) / 4;
 export const SECONDS_IN_HALF_YEAR = SECONDS_IN_YEAR / 2;
+export const SECONDS_IN_MONTH = SECONDS_IN_YEAR / 12;
 export const SECONDS_IN_FOUR_YEARS = SECONDS_IN_YEAR * 4;
 export const SECONDS_IN_EIGHT_YEARS = SECONDS_IN_YEAR * 8;
 

frontend/src/lib/i18n/en.json

@@ -601,11 +601,14 @@
     "stake_sns_neuron": "Stake $tokenSymbol Neuron",
     "sns_neuron_destination": "Subaccount of",
     "stake_sns_neuron_success": "$tokenSymbol Neuron created successfully.",
-    "token_stake": "$amount $token Stake"
+    "token_stake": "$amount $token Stake",
+    "dissolve_delay_description": "Voting power is given when neurons are locked for at least $duration"
   },
   "time": {
     "year": "year",
     "year_plural": "years",
+    "month": "month",
+    "month_plural": "months",
     "day": "day",
     "day_plural": "days",
     "hour": "hour",

frontend/src/lib/types/i18n.d.ts

@@ -629,11 +629,14 @@ interface I18nSns_neurons {
   sns_neuron_destination: string;
   stake_sns_neuron_success: string;
   token_stake: string;
+  dissolve_delay_description: string;
 }
 
 interface I18nTime {
   year: string;
   year_plural: string;
+  month: string;
+  month_plural: string;
   day: string;
   day_plural: string;
   hour: string;

frontend/src/lib/utils/date.utils.ts

@@ -2,12 +2,13 @@ import {
   SECONDS_IN_DAY,
   SECONDS_IN_HOUR,
   SECONDS_IN_MINUTE,
+  SECONDS_IN_MONTH,
   SECONDS_IN_YEAR,
 } from "$lib/constants/constants";
 import { i18n } from "$lib/stores/i18n";
 import { get } from "svelte/store";
 
-type LabelKey = "year" | "day" | "hour" | "minute" | "second";
+type LabelKey = "year" | "month" | "day" | "hour" | "minute" | "second";
 type LabelInfo = {
   labelKey: LabelKey;
   amount: number;
@@ -48,6 +49,42 @@ export const secondsToDuration = (seconds: bigint): string => {
     .join(", ");
 };
 
+/**
+ * Displays years, months and days.
+ *
+ * Uses constants for `year` and `month`:
+ * - a year = 365.25 * 24 * 60 * 60
+ * - a month = 1 year / 12
+ * - rounds up days
+ *
+ * @param seconds
+ */
+export const secondsToDissolveDelayDuration = (seconds: bigint): string => {
+  const i18nObj = get(i18n);
+  const years = seconds / BigInt(SECONDS_IN_YEAR);
+  const months = (seconds % BigInt(SECONDS_IN_YEAR)) / BigInt(SECONDS_IN_MONTH);
+  const days = BigInt(
+    Math.ceil((Number(seconds) % SECONDS_IN_MONTH) / SECONDS_IN_DAY)
+  );
+  const periods = [
+    createLabel("year", years),
+    createLabel("month", months),
+    createLabel("day", days),
+  ];
+
+  return periods
+    .filter(({ amount }) => amount > 0)
+    .map(
+      (labelInfo) =>
+        `${labelInfo.amount} ${
+          labelInfo.amount == 1
+            ? i18nObj.time[labelInfo.labelKey]
+            : i18nObj.time[`${labelInfo.labelKey}_plural`]
+        }`
+    )
+    .join(", ");
+};
+
 export const secondsToDateTime = (seconds: bigint): string =>
   `${secondsToDate(Number(seconds))} ${secondsToTime(Number(seconds))}`;
 

frontend/src/tests/lib/utils/date.utils.spec.ts

@@ -1,6 +1,8 @@
+import { SECONDS_IN_DAY, SECONDS_IN_MONTH } from "$lib/constants/constants";
 import {
   secondsToDate,
   secondsToDateTime,
+  secondsToDissolveDelayDuration,
   secondsToDuration,
   secondsToTime,
 } from "$lib/utils/date.utils";
@@ -36,6 +38,56 @@ describe("secondsToDuration", () => {
   });
 });
 
+describe("secondsToDissolveDelayDuration", () => {
+  it("should display a day", () => {
+    expect(secondsToDissolveDelayDuration(BigInt(SECONDS_IN_DAY))).toContain(
+      en.time.day
+    );
+    expect(secondsToDissolveDelayDuration(BigInt(SECONDS_IN_DAY))).toContain(
+      "1"
+    );
+  });
+
+  it("should display 1 month", () => {
+    expect(secondsToDissolveDelayDuration(BigInt(SECONDS_IN_MONTH))).toContain(
+      en.time.month
+    );
+    expect(secondsToDissolveDelayDuration(BigInt(SECONDS_IN_MONTH))).toContain(
+      "1"
+    );
+    expect(
+      secondsToDissolveDelayDuration(BigInt(SECONDS_IN_MONTH))
+    ).not.toContain(en.time.month_plural);
+  });
+
+  it("should display 2 months", () => {
+    expect(
+      secondsToDissolveDelayDuration(BigInt(SECONDS_IN_MONTH * 2))
+    ).toContain(en.time.month_plural);
+    expect(
+      secondsToDissolveDelayDuration(BigInt(SECONDS_IN_MONTH * 2))
+    ).toContain("2");
+  });
+
+  it("should display 1 year", () => {
+    expect(
+      secondsToDissolveDelayDuration(BigInt(SECONDS_IN_MONTH * 12))
+    ).toContain(en.time.year);
+    expect(
+      secondsToDissolveDelayDuration(BigInt(SECONDS_IN_MONTH * 12))
+    ).toContain("1");
+    expect(
+      secondsToDissolveDelayDuration(BigInt(SECONDS_IN_MONTH * 12))
+    ).not.toContain(en.time.year_plural);
+  });
+
+  it("should display 2 years, 9 months, 11 days", () => {
+    expect(secondsToDissolveDelayDuration(BigInt(87654321))).toContain("2");
+    expect(secondsToDissolveDelayDuration(BigInt(87654321))).toContain("9");
+    expect(secondsToDissolveDelayDuration(BigInt(87654321))).toContain("11");
+  });
+});
+
 describe("secondsToDate", () => {
   it("starts in 1970", () => {
     expect(secondsToDate(0)).toBe("Jan 1, 1970");