NNS1-3450: New Exports NNS Neurons Snapshot Component

frontend/src/lib/components/header/ExportNeuronsButton.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+  import { i18n } from "$lib/stores/i18n";
+  import { IconDown } from "@dfinity/gix-components";
+  import { createEventDispatcher } from "svelte";
+  import { neuronsStore } from "$lib/stores/neurons.store";
+  import {
+    formatMaturity,
+    getStateInfo,
+    neuronAvailableMaturity,
+    neuronStake,
+    neuronStakedMaturity,
+  } from "$lib/utils/neuron.utils";
+  import {
+    ICPToken,
+    isNullish,
+    secondsToDuration,
+    TokenAmountV2,
+  } from "@dfinity/utils";
+  import { formatTokenV2 } from "$lib/utils/token.utils";
+  import { NeuronState, type NeuronInfo } from "@dfinity/nns";
+  import {
+    CsvGenerationError,
+    FileSystemAccessError,
+    generateCsvFileToSave,
+  } from "$lib/utils/export-to-csv.utils";
+  import { toastsError } from "$lib/stores/toasts.store";
+  import {
+    formatDateCompact,
+    getFutureDateFromDelayInSeconds,
+    nanoSecondsToDateTime,
+    nowInBigIntNanoSeconds,
+    secondsToDate,
+  } from "$lib/utils/date.utils";
+  import { authStore } from "$lib/stores/auth.store";
+
+  const dispatcher = createEventDispatcher<{
+    nnsExportNeuronsCsvTriggered: void;
+  }>();
+
+  let isDisabled = true;
+  let neurons: NeuronInfo[] = [];
+  $: neurons = $neuronsStore?.neurons ?? [];
+  $: nnsAccountPrincipal = $authStore.identity?.getPrincipal().toText();
+  $: isDisabled = neurons.length === 0 || isNullish(nnsAccountPrincipal);
+
+  const nnsNeuronToHumanReadableFormat = (neuron: NeuronInfo) => {
+    const controllerId = neuron.fullNeuron?.controller?.toString();
+    const neuronId = neuron.neuronId.toString();
+    const neuronAccountId = neuron.fullNeuron?.accountIdentifier.toString();
+    const stake = TokenAmountV2.fromUlps({
+      amount: neuronStake(neuron),
+      token: ICPToken,
+    });
+    const project = stake.token.name;
+    const symbol = stake.token.symbol;
+    const availableMaturity = neuronAvailableMaturity(neuron);
+    const stakedMaturity = neuronStakedMaturity(neuron);
+    const dissolveDelaySeconds = neuron.dissolveDelaySeconds;
+    const dissolveDate =
+      neuron.state === NeuronState.Dissolving
+        ? getFutureDateFromDelayInSeconds(neuron.dissolveDelaySeconds)
+        : null;
+    const creationDate = secondsToDate(Number(neuron.createdTimestampSeconds));
+
+    return {
+      controllerId,
+      project,
+      symbol,
+      neuronId,
+      neuronAccountId,
+      stake: formatTokenV2({
+        value: stake,
+        detailed: true,
+      }),
+      availableMaturity: formatMaturity(availableMaturity),
+      stakedMaturity: formatMaturity(stakedMaturity),
+      dissolveDelaySeconds: secondsToDuration({
+        seconds: dissolveDelaySeconds,
+        i18n: $i18n.time,
+      }),
+      dissolveDate: dissolveDate ?? $i18n.core.not_applicable,
+      creationDate,
+      state: $i18n.neuron_state[getStateInfo(neuron.state).textKey],
+    };
+  };
+
+  const exportNeurons = async () => {
+    if (!nnsAccountPrincipal) return;
+
+    try {
+      const humanFriendlyContent = neurons.map(nnsNeuronToHumanReadableFormat);
+      const fileName = `neurons_export_${formatDateCompact(new Date())}`;
+      const metadataDate = nanoSecondsToDateTime(nowInBigIntNanoSeconds());
+
+      await generateCsvFileToSave({
+        data: humanFriendlyContent,
+        metadata: [
+          {
+            label: $i18n.export_csv_neurons.account_id_label,
+            value: nnsAccountPrincipal.toString(),
+          },
+          {
+            label: $i18n.export_csv_neurons.date_label,
+            value: metadataDate,
+          },
+        ],
+        headers: [
+          {
+            id: "neuronId",
+            label: $i18n.export_csv_neurons.neuron_id,
+          },
+          {
+            id: "project",
+            label: $i18n.export_csv_neurons.project,
+          },
+          {
+            id: "symbol",
+            label: $i18n.export_csv_neurons.symbol,
+          },
+          {
+            id: "neuronAccountId",
+            label: $i18n.export_csv_neurons.neuron_account_id,
+          },
+          {
+            id: "controllerId",
+            label: $i18n.export_csv_neurons.controller_id,
+          },
+          {
+            id: "stake",
+            label: $i18n.export_csv_neurons.stake,
+          },
+          {
+            id: "availableMaturity",
+            label: $i18n.export_csv_neurons.available_maturity,
+          },
+          {
+            id: "stakedMaturity",
+            label: $i18n.export_csv_neurons.staked_maturity,
+          },
+          {
+            id: "dissolveDelaySeconds",
+            label: $i18n.export_csv_neurons.dissolve_delay,
+          },
+          {
+            id: "dissolveDate",
+            label: $i18n.export_csv_neurons.dissolve_date,
+          },
+          {
+            id: "creationDate",
+            label: $i18n.export_csv_neurons.creation_date,
+          },
+          {
+            id: "state",
+            label: $i18n.export_csv_neurons.state,
+          },
+        ],
+        fileName,
+      });
+    } catch (error) {
+      console.error("Error exporting neurons:", error);
+
+      if (error instanceof FileSystemAccessError) {
+        toastsError({
+          labelKey: "export_error.file_system_access",
+        });
+      } else if (error instanceof CsvGenerationError) {
+        toastsError({
+          labelKey: "export_error.csv_generation",
+        });
+      } else {
+        toastsError({
+          labelKey: "export_error.neurons",
+        });
+      }
+    } finally {
+      dispatcher("nnsExportNeuronsCsvTriggered");
+    }
+  };
+</script>
+
+<button
+  data-tid="export-neurons-button-component"
+  on:click={exportNeurons}
+  class="text"
+  disabled={isDisabled}
+  aria-label={$i18n.header.export_neurons}
+>
+  <IconDown />
+  {$i18n.header.export_neurons}
+</button>
+
+<style lang="scss">
+  @use "../../themes/mixins/account-menu";
+
+  button {
+    @include account-menu.button;
+    padding: 0;
+  }
+</style>

frontend/src/lib/i18n/en.json

@@ -33,7 +33,8 @@
     "send_with_token": "Send $token",
     "collapse_all": "Collapse All",
     "or": "or",
-    "add": "Add"
+    "add": "Add",
+    "not_applicable": "N/A"
   },
   "error": {
     "auth_sync": "There was an unexpected issue while syncing the status of your authentication. Try to refresh your browser.",
@@ -150,7 +151,29 @@
     "logout": "Logout",
     "account_menu": "Open menu to access logout button",
     "main_icp_account_id": "Main ICP Account ID",
-    "account_id_tooltip": "You can send ICP both to your principal ID and account ID, however some exchanges or wallets may not support transactions using a principal ID."
+    "account_id_tooltip": "You can send ICP both to your principal ID and account ID, however some exchanges or wallets may not support transactions using a principal ID.",
+    "export_neurons": "Export Neurons Info"
+  },
+  "export_csv_neurons": {
+    "account_id_label": "NNS Account Principal ID",
+    "date_label": "Export Date Time",
+    "controller_id": "Controller Principal ID",
+    "neuron_id": "Neuron ID",
+    "project": "Project",
+    "symbol": "Symbol",
+    "neuron_account_id": "Neuron Account ID",
+    "stake": "Stake",
+    "available_maturity": "Available Maturity",
+    "staked_maturity": "Staked Maturity",
+    "dissolve_delay": "Dissolve Delay",
+    "dissolve_date": "Dissolve Date",
+    "creation_date": "Creation Date",
+    "state": "State"
+  },
+  "export_error": {
+    "csv_generation": "Failed to generate CSV file",
+    "file_system_access": "Unable to save file. Please check your permissions.",
+    "neurons": "There was an error exporting the neurons. Please try again."
   },
   "auth": {
     "login": "Sign in with Internet Identity",

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

@@ -37,6 +37,7 @@ interface I18nCore {
   collapse_all: string;
   or: string;
   add: string;
+  not_applicable: string;
 }
 
 interface I18nError {
@@ -158,6 +159,30 @@ interface I18nHeader {
   account_menu: string;
   main_icp_account_id: string;
   account_id_tooltip: string;
+  export_neurons: string;
+}
+
+interface I18nExport_csv_neurons {
+  account_id_label: string;
+  date_label: string;
+  controller_id: string;
+  neuron_id: string;
+  project: string;
+  symbol: string;
+  neuron_account_id: string;
+  stake: string;
+  available_maturity: string;
+  staked_maturity: string;
+  dissolve_delay: string;
+  dissolve_date: string;
+  creation_date: string;
+  state: string;
+}
+
+interface I18nExport_error {
+  csv_generation: string;
+  file_system_access: string;
+  neurons: string;
 }
 
 interface I18nAuth {
@@ -1400,6 +1425,8 @@ interface I18n {
   warning: I18nWarning;
   navigation: I18nNavigation;
   header: I18nHeader;
+  export_csv_neurons: I18nExport_csv_neurons;
+  export_error: I18nExport_error;
   auth: I18nAuth;
   accounts: I18nAccounts;
   neuron_types: I18nNeuron_types;