Draft: vp from network economics

frontend/src/lib/components/neuron-detail/ConfirmFollowingBanner.svelte

@@ -4,21 +4,26 @@
   import Banner from "$lib/components/ui/Banner.svelte";
   import BannerIcon from "$lib/components/ui/BannerIcon.svelte";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
-  import { START_REDUCING_VOTING_POWER_AFTER_SECONDS } from "$lib/constants/neurons.constants";
   import { secondsToDissolveDelayDuration } from "$lib/utils/date.utils";
+  import { startReducingVotingPowerAfterSecondsStore } from "$lib/derived/network-economics.derived";
+  import { nonNullish } from "@dfinity/utils";
 
   let title: string;
   $: title = $i18n.losing_rewards_banner.confirm_title;
-
-  const text = replacePlaceholders($i18n.losing_rewards.description, {
-    $period: secondsToDissolveDelayDuration(
-      BigInt(START_REDUCING_VOTING_POWER_AFTER_SECONDS)
-    ),
-  });
 </script>
 
-<Banner testId="confirm-following-banner-component" {title} {text}>
-  <BannerIcon slot="icon" status="error">
-    <IconErrorOutline />
-  </BannerIcon>
-</Banner>
+{#if nonNullish($startReducingVotingPowerAfterSecondsStore)}
+  <Banner
+    testId="confirm-following-banner-component"
+    {title}
+    text={replacePlaceholders($i18n.losing_rewards.description, {
+      $period: secondsToDissolveDelayDuration(
+        $startReducingVotingPowerAfterSecondsStore
+      ),
+    })}
+  >
+    <BannerIcon slot="icon" status="error">
+      <IconErrorOutline />
+    </BannerIcon>
+  </Banner>
+{/if}

frontend/src/lib/components/neuron-detail/NnsNeuronPageHeading.svelte

@@ -19,6 +19,7 @@
   } from "$lib/utils/neuron.utils";
   import type { NeuronInfo } from "@dfinity/nns";
   import { ICPToken, TokenAmountV2 } from "@dfinity/utils";
+  import { startReducingVotingPowerAfterSecondsStore } from "$lib/derived/network-economics.derived";
 
   export let neuron: NeuronInfo;
 
@@ -39,6 +40,8 @@
     identity: $authStore.identity,
     accounts: $icpAccountsStore,
     i18n: $i18n,
+    startReducingVotingPowerAfterSeconds:
+      $startReducingVotingPowerAfterSecondsStore,
   });
 </script>
 

frontend/src/lib/components/neuron-detail/NnsNeuronRewardStatusAction.svelte

@@ -2,7 +2,6 @@
   import ConfirmFollowingActionButton from "$lib/components/neuron-detail/actions/ConfirmFollowingActionButton.svelte";
   import FollowNeuronsButton from "$lib/components/neuron-detail/actions/FollowNeuronsButton.svelte";
   import CommonItemAction from "$lib/components/ui/CommonItemAction.svelte";
-  import { START_REDUCING_VOTING_POWER_AFTER_SECONDS } from "$lib/constants/neurons.constants";
   import { i18n } from "$lib/stores/i18n";
   import { secondsToDissolveDelayDuration } from "$lib/utils/date.utils";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
@@ -18,19 +17,37 @@
     IconWarning,
   } from "@dfinity/gix-components";
   import { type NeuronInfo } from "@dfinity/nns";
-  import { secondsToDuration } from "@dfinity/utils";
+  import { nonNullish, secondsToDuration } from "@dfinity/utils";
+  import {
+    clearFollowingAfterSecondsStore,
+    startReducingVotingPowerAfterSecondsStore,
+  } from "$lib/derived/network-economics.derived";
 
   export let neuron: NeuronInfo;
 
   let isFollowingReset = false;
-  $: isFollowingReset = isNeuronFollowingReset(neuron);
+  $: isFollowingReset = isNeuronFollowingReset({
+    neuron,
+    startReducingVotingPowerAfterSeconds:
+      $startReducingVotingPowerAfterSecondsStore,
+    clearFollowingAfterSeconds: $clearFollowingAfterSecondsStore,
+  });
 
   let isLosingRewards = false;
-  $: isLosingRewards = isNeuronLosingRewards(neuron);
+  $: isLosingRewards = isNeuronLosingRewards({
+    neuron,
+    startReducingVotingPowerAfterSeconds:
+      $startReducingVotingPowerAfterSecondsStore,
+  });
 
   let isLosingRewardsSoon = false;
   $: isLosingRewardsSoon =
-    !isLosingRewards && shouldDisplayRewardLossNotification(neuron);
+    !isLosingRewards &&
+    shouldDisplayRewardLossNotification({
+      neuron,
+      startReducingVotingPowerAfterSeconds:
+        $startReducingVotingPowerAfterSecondsStore,
+    });
 
   let icon: typeof IconError | typeof IconWarning | typeof IconCheckCircleFill;
   $: icon =
@@ -48,15 +65,26 @@
         ? $i18n.neuron_detail.reward_status_losing_soon
         : $i18n.neuron_detail.reward_status_active;
 
-  const getDescription = (neuron: NeuronInfo): string => {
+  const getDescription = ({
+    neuron,
+    startReducingVotingPowerAfterSeconds,
+  }: {
+    neuron: NeuronInfo;
+    startReducingVotingPowerAfterSeconds: bigint;
+  }): string => {
     if (isFollowingReset)
       return $i18n.neuron_detail.reward_status_inactive_reset_description;
 
     if (isLosingRewards)
       return $i18n.neuron_detail.reward_status_inactive_description;
 
     const timeUntilLoss = secondsToDuration({
-      seconds: BigInt(secondsUntilLosingRewards(neuron)),
+      seconds: BigInt(
+        secondsUntilLosingRewards({
+          neuron,
+          startReducingVotingPowerAfterSeconds,
+        })
+      ),
       i18n: $i18n.time,
     });
     return replacePlaceholders(
@@ -66,46 +94,50 @@
       }
     );
   };
-
-  const tooltipText = replacePlaceholders($i18n.losing_rewards.description, {
-    $period: secondsToDissolveDelayDuration(
-      BigInt(START_REDUCING_VOTING_POWER_AFTER_SECONDS)
-    ),
-  });
 </script>
 
-<CommonItemAction
-  testId="nns-neuron-reward-status-action-component"
-  {tooltipText}
-  tooltipId="neuron-reward-status-icon"
->
-  <span
-    slot="icon"
-    class="icon"
-    class:isLosingRewards
-    class:isLosingRewardsSoon
-  >
-    <svelte:component this={icon} />
-  </span>
-  <span slot="title" data-tid="state-title">
-    {title}
-  </span>
-
-  <span
-    slot="subtitle"
-    class="description"
-    class:negative={isLosingRewards || isLosingRewardsSoon}
-    data-tid="state-description"
+{#if nonNullish($startReducingVotingPowerAfterSecondsStore) && nonNullish($clearFollowingAfterSecondsStore)}
+  <CommonItemAction
+    testId="nns-neuron-reward-status-action-component"
+    tooltipText={replacePlaceholders($i18n.losing_rewards.description, {
+      $period: secondsToDissolveDelayDuration(
+        $startReducingVotingPowerAfterSecondsStore
+      ),
+    })}
+    tooltipId="neuron-reward-status-icon"
   >
-    {getDescription(neuron)}
-  </span>
-
-  {#if isFollowingReset}
-    <FollowNeuronsButton variant="secondary" />
-  {:else}
-    <ConfirmFollowingActionButton {neuron} />
-  {/if}
-</CommonItemAction>
+    <span
+      slot="icon"
+      class="icon"
+      class:isLosingRewards
+      class:isLosingRewardsSoon
+    >
+      <svelte:component this={icon} />
+    </span>
+    <span slot="title" data-tid="state-title">
+      {title}
+    </span>
+
+    <span
+      slot="subtitle"
+      class="description"
+      class:negative={isLosingRewards || isLosingRewardsSoon}
+      data-tid="state-description"
+    >
+      {getDescription({
+        neuron,
+        startReducingVotingPowerAfterSeconds:
+          $startReducingVotingPowerAfterSecondsStore,
+      })}
+    </span>
+
+    {#if isFollowingReset}
+      <FollowNeuronsButton variant="secondary" />
+    {:else}
+      <ConfirmFollowingActionButton {neuron} />
+    {/if}
+  </CommonItemAction>
+{/if}
 
 <style lang="scss">
   .icon {

frontend/src/lib/components/neurons/LosingRewardsBanner.svelte

@@ -11,37 +11,53 @@
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import { nonNullish, secondsToDuration } from "@dfinity/utils";
   import type { NeuronInfo } from "@dfinity/nns";
-  import { START_REDUCING_VOTING_POWER_AFTER_SECONDS } from "$lib/constants/neurons.constants";
   import { secondsToDissolveDelayDuration } from "$lib/utils/date.utils";
   import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
   import LosingRewardNeuronsModal from "$lib/modals/neurons/LosingRewardNeuronsModal.svelte";
+  import { startReducingVotingPowerAfterSecondsStore } from "$lib/derived/network-economics.derived";
 
   // The neurons in the store are sorted by the time they will lose rewards.
   let mostInactiveNeuron: NeuronInfo | undefined;
   $: mostInactiveNeuron = $soonLosingRewardNeuronsStore[0];
 
-  const getTitle = (neuron: NeuronInfo) =>
-    isNeuronLosingRewards(neuron)
+  const getTitle = ({
+    neuron,
+    startReducingVotingPowerAfterSeconds,
+  }: {
+    neuron: NeuronInfo;
+    startReducingVotingPowerAfterSeconds: bigint;
+  }) =>
+    isNeuronLosingRewards({ neuron, startReducingVotingPowerAfterSeconds })
       ? $i18n.losing_rewards_banner.rewards_missing_title
       : replacePlaceholders($i18n.losing_rewards_banner.days_left_title, {
           $timeLeft: secondsToDuration({
-            seconds: BigInt(secondsUntilLosingRewards(neuron)),
+            seconds: BigInt(
+              secondsUntilLosingRewards({
+                neuron,
+                startReducingVotingPowerAfterSeconds,
+              })
+            ),
             i18n: $i18n.time,
           }),
         });
-  const text = replacePlaceholders($i18n.losing_rewards.description, {
-    // TODO(mstr): Rename to secondsToRoundedDuration
-    $period: secondsToDissolveDelayDuration(
-      BigInt(START_REDUCING_VOTING_POWER_AFTER_SECONDS)
-    ),
-  });
 
   let isModalVisible = false;
 </script>
 
 <TestIdWrapper testId="losing-rewards-banner-component">
-  {#if nonNullish(mostInactiveNeuron)}
-    <Banner title={getTitle(mostInactiveNeuron)} {text}>
+  {#if nonNullish(mostInactiveNeuron) && nonNullish($startReducingVotingPowerAfterSecondsStore)}
+    <Banner
+      title={getTitle({
+        neuron: mostInactiveNeuron,
+        startReducingVotingPowerAfterSeconds:
+          $startReducingVotingPowerAfterSecondsStore,
+      })}
+      text={replacePlaceholders($i18n.losing_rewards.description, {
+        $period: secondsToDissolveDelayDuration(
+          $startReducingVotingPowerAfterSecondsStore
+        ),
+      })}
+    >
       <BannerIcon slot="icon" status="error">
         <IconInfo />
       </BannerIcon>

frontend/src/lib/components/neurons/NnsLosingRewardsNeuronCard.svelte

@@ -13,6 +13,7 @@
   import { Card, IconRight } from "@dfinity/gix-components";
   import type { NeuronInfo } from "@dfinity/nns";
   import { nonNullish } from "@dfinity/utils";
+  import { startReducingVotingPowerAfterSecondsStore } from "$lib/derived/network-economics.derived";
 
   export let neuron: NeuronInfo;
   export let onClick: (() => void) | undefined;
@@ -26,6 +27,8 @@
     identity: $authStore.identity,
     accounts: $icpAccountsStore,
     i18n: $i18n,
+    startReducingVotingPowerAfterSeconds:
+      $startReducingVotingPowerAfterSecondsStore,
   });
 
   let followees: FolloweesNeuron[];

frontend/src/lib/components/neurons/NnsNeuronCardTitle.svelte

@@ -5,6 +5,7 @@
   import { i18n } from "$lib/stores/i18n";
   import { getNeuronTags, type NeuronTagData } from "$lib/utils/neuron.utils";
   import type { NeuronInfo } from "@dfinity/nns";
+  import { startReducingVotingPowerAfterSecondsStore } from "$lib/derived/network-economics.derived";
 
   export let neuron: NeuronInfo;
   export let tagName: "p" | "h3" = "p";
@@ -15,6 +16,8 @@
     identity: $authStore.identity,
     accounts: $icpAccountsStore,
     i18n: $i18n,
+    startReducingVotingPowerAfterSeconds:
+      $startReducingVotingPowerAfterSecondsStore,
   });
 </script>
 

frontend/src/lib/constants/neurons.constants.ts

@@ -1,7 +1,6 @@
 import {
   SECONDS_IN_7_DAYS,
   SECONDS_IN_HALF_YEAR,
-  SECONDS_IN_MONTH,
 } from "$lib/constants/constants";
 import { enumValues } from "$lib/utils/enum.utils";
 import { Topic } from "@dfinity/nns";
@@ -37,18 +36,5 @@ export const TOPICS_TO_FOLLOW_NNS = [
   ...LAST_TOPICS,
 ];
 
-// A neuron's voting power begins to decrease linearly if it remains inactive for this duration.
-// Inactivity means no manual votes cast and no updates to the list of followed neurons (followees).
-// Draft ic pr: https://github.com/dfinity/ic/blob/c2da5aca97a07bae4fcbf5d72a8c0448b40599d7/rs/nns/governance/canister/governance.did#L582)
-// TODO(mstr): replace with the actual ic link.
-export const START_REDUCING_VOTING_POWER_AFTER_SECONDS = SECONDS_IN_HALF_YEAR;
-
-// After a neuron has experienced voting power reduction for this amount of time,
-// a couple of things happen:
-// 1. Deciding voting power reaches 0.
-// 2. Its following on topics other than NeuronManagement are cleared.
-// https://github.com/dfinity/ic/blob/c2da5aca97a07bae4fcbf5d72a8c0448b40599d7/rs/nns/governance/canister/governance.did#L584
-export const CLEAR_FOLLOWING_AFTER_SECONDS = SECONDS_IN_MONTH;
-
 // To notify users that their rewards will start decreasing in 30 days.
 export const NOTIFICATION_PERIOD_BEFORE_REWARD_LOSS_STARTS_DAYS = 30;

frontend/src/lib/derived/neurons.derived.ts

@@ -1,3 +1,4 @@
+import { startReducingVotingPowerAfterSecondsStore } from "$lib/derived/network-economics.derived";
 import { neuronsStore } from "$lib/stores/neurons.store";
 import {
   hasValidStake,
@@ -6,7 +7,7 @@ import {
   sortNeuronsByVotingPowerRefreshedTimeout,
 } from "$lib/utils/neuron.utils";
 import type { NeuronInfo } from "@dfinity/nns";
-import { nonNullish } from "@dfinity/utils";
+import { isNullish, nonNullish } from "@dfinity/utils";
 import { derived, type Readable } from "svelte/store";
 
 export const definedNeuronsStore: Readable<NeuronInfo[]> = derived(
@@ -20,11 +21,19 @@ export const sortedNeuronStore: Readable<NeuronInfo[]> = derived(
 );
 
 export const soonLosingRewardNeuronsStore: Readable<NeuronInfo[]> = derived(
-  definedNeuronsStore,
-  ($definedNeuronsStore) =>
-    sortNeuronsByVotingPowerRefreshedTimeout(
-      $definedNeuronsStore.filter(shouldDisplayRewardLossNotification)
-    )
+  [definedNeuronsStore, startReducingVotingPowerAfterSecondsStore],
+  ([$definedNeuronsStore, $startReducingVotingPowerAfterSecondsStore]) =>
+    isNullish($startReducingVotingPowerAfterSecondsStore)
+      ? []
+      : sortNeuronsByVotingPowerRefreshedTimeout(
+          $definedNeuronsStore.filter((neuron) =>
+            shouldDisplayRewardLossNotification({
+              neuron,
+              startReducingVotingPowerAfterSeconds:
+                $startReducingVotingPowerAfterSecondsStore,
+            })
+          )
+        )
 );
 
 export const neuronAccountsStore: Readable<Set<string>> = derived(