feat: add expiration date to sns proposal detail (#3959)

# Motivation

After applying new proposal design the expiration field was added only
to the sns detail page. This pr adds missing field to the sns detail
page.

# Changes

- provide missing field to the `VotesResults` component

# Tests

- `SnsProposalVotingSection` should render expiration date

# Todos

- [x] Add entry to changelog (if necessary).

CHANGELOG-Nns-Dapp-unreleased.md

@@ -15,6 +15,7 @@ proposal is successful, the changes it released will be moved from this file to
 #### Added
 
 * Iterator over AccountsDbs.
+* Display expiration date for sns proposals.
 * Card with BTC deposit address and QR code in ckBTC wallet.
 
 #### Changed

frontend/src/lib/components/proposal-detail/VotesResults.svelte

@@ -16,7 +16,7 @@
   export let yes: number;
   export let no: number;
   export let total: number;
-  export let deadlineTimestampSeconds: bigint | undefined = undefined;
+  export let deadlineTimestampSeconds: bigint | undefined;
 
   let yesProportion: number;
   $: yesProportion = total ? yes / total : 0;

frontend/src/lib/components/sns-proposals/SnsProposalVotingSection.svelte

@@ -5,10 +5,14 @@
   import VotesResults from "$lib/components/proposal-detail/VotesResults.svelte";
   import { fromDefinedNullable } from "@dfinity/utils";
   import { E8S_PER_ICP } from "$lib/constants/icp.constants";
-  import { snsRewardStatus } from "$lib/utils/sns-proposals.utils";
+  import {
+    type SnsProposalDataMap,
+    snsRewardStatus,
+  } from "$lib/utils/sns-proposals.utils";
   import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
 
   export let proposal: SnsProposalData;
+  export let proposalDataMap: SnsProposalDataMap;
   export let reloadProposal: () => Promise<void>;
 
   let settled = false;
@@ -24,10 +28,13 @@
   $: no = Number(tally.no) / E8S_PER_ICP;
   let total = 0;
   $: total = Number(tally.total) / E8S_PER_ICP;
+  let deadlineTimestampSeconds: bigint | undefined;
+  $: deadlineTimestampSeconds =
+    proposalDataMap.current_deadline_timestamp_seconds;
 </script>
 
 <TestIdWrapper testId="sns-proposal-voting-section-component">
-  <VotesResults {yes} {no} {total} />
+  <VotesResults {yes} {no} {total} {deadlineTimestampSeconds} />
 
   {#if !settled}
     <SnsVotingCard {proposal} {reloadProposal} />

frontend/src/lib/pages/SnsProposalDetail.svelte

@@ -231,7 +231,11 @@
             <SnsProposalSystemInfoSection {proposalDataMap} />
           </div>
           <div slot="end">
-            <SnsProposalVotingSection {proposal} {reloadProposal} />
+            <SnsProposalVotingSection
+              {proposal}
+              {reloadProposal}
+              {proposalDataMap}
+            />
           </div>
         </SplitBlock>
       </div>

frontend/src/tests/lib/components/sns-proposals/SnsProposalVotingSection.spec.ts

@@ -1,7 +1,10 @@
 import SnsProposalVotingSection from "$lib/components/sns-proposals/SnsProposalVotingSection.svelte";
+import { mapProposalInfo } from "$lib/utils/sns-proposals.utils";
+import { nervousSystemFunctionMock } from "$tests/mocks/sns-functions.mock";
 import { mockSnsProposal } from "$tests/mocks/sns-proposals.mock";
-import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
 import { SnsProposalVotingSectionPo } from "$tests/page-objects/SnsProposalVotingSection.page-object";
+import type { VotesResultPo } from "$tests/page-objects/VotesResults.page-object";
+import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
 import type { SnsProposalData } from "@dfinity/sns";
 import { fromDefinedNullable } from "@dfinity/utils";
 import { render } from "@testing-library/svelte";
@@ -17,9 +20,17 @@ describe("SnsProposalVotingSection", () => {
         total: 3_000_000_000n,
       },
     ],
+    wait_for_quiet_state: [
+      {
+        current_deadline_timestamp_seconds: 10000n,
+      },
+    ],
   };
-
-  it("should render vote results", async () => {
+  const proposalDataMap = mapProposalInfo({
+    proposalData: proposal,
+    nsFunctions: [{ ...nervousSystemFunctionMock }],
+  });
+  const renderComponent = async (): Promise<VotesResultPo> => {
     const { container } = render(SnsProposalVotingSection, {
       props: {
         reloadProposal: () => {
@@ -28,15 +39,36 @@ describe("SnsProposalVotingSection", () => {
         proposal: {
           ...proposal,
         },
+        proposalDataMap,
       },
     });
-
     const containerPo = new JestPageObjectElement(container);
     const po = SnsProposalVotingSectionPo.under(containerPo);
     const votesResultsPo = await po.getVotingsResultsPo();
+    return votesResultsPo;
+  };
+
+  beforeEach(() => {
+    vi.useFakeTimers().setSystemTime(0);
+  });
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  it("should render vote results", async () => {
+    const po = await renderComponent();
+
+    expect(await po.isPresent()).toBeTruthy();
+    expect(await po.getAdoptVotingPower()).toEqual(10);
+    expect(await po.getRejectVotingPower()).toEqual(20);
+  });
+
+  it("should render expiration date", async () => {
+    const po = await renderComponent();
 
-    expect(await votesResultsPo.isPresent()).toBeTruthy();
-    expect(await votesResultsPo.getAdoptVotingPower()).toEqual(10);
-    expect(await votesResultsPo.getRejectVotingPower()).toEqual(20);
+    expect(await po.getExpirationDateText()).toEqual(
+      "Expiration date 2 hours, 46 minutes remaining"
+    );
   });
 });