GIX-1889: Fix blank modal disburse maturity (#3317)

# Motivation

There was a bug when NeuronSelectPercentage was used for maturity above
1000.

That's because now we started calculating the maturity of the
percentage. Yet, the maturity was passed as a string and then converted
to a number. If the number was larger than 1000, then the string
couldn't be converted successfully to a number.

The solution was to expect a number instead of a string.

# Changes

* Change `formttedMaturity` in NeuronSelectPercentage for
`availableMaturityE8s`. Change accordingly.
* Change where the NeuronSelectPercentage was used to pass the maturity
as e8s instead of as a string.
* Remove unnecessary util `maturityPercentageToE8s`. Now it's a simple
multiplication and division. No need to use an util for that. There is
no logic to reuse.

# Tests

* I added a test that fails in `main` but succeeds in this PR.

# Todos

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

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

@@ -4,20 +4,16 @@
   import { InputRange, KeyValuePair } from "@dfinity/gix-components";
   import { createEventDispatcher } from "svelte";
   import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
-  import { maturityPercentageToE8s } from "$lib/utils/neuron.utils";
   import { formatMaturity } from "$lib/utils/neuron.utils";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
 
-  export let formattedMaturity: string;
+  export let availableMaturityE8s: bigint;
   export let percentage: number;
   export let buttonText: string;
   export let disabled = false;
 
-  let maturityE8s: bigint;
-  $: maturityE8s = maturityPercentageToE8s({
-    percentage,
-    total: Number(formattedMaturity),
-  });
+  let selectedMaturityE8s: bigint;
+  $: selectedMaturityE8s = (availableMaturityE8s * BigInt(percentage)) / 100n;
 
   const dispatcher = createEventDispatcher();
   const selectPercentage = () => dispatcher("nnsSelectPercentage");
@@ -29,7 +25,7 @@
       >{$i18n.neuron_detail.available_maturity}</span
     >
     <span class="value" slot="value" data-tid="available-maturity"
-      >{formattedMaturity}</span
+      >{formatMaturity(availableMaturityE8s)}</span
     >
   </KeyValuePair>
 
@@ -47,7 +43,7 @@
     <h5>
       <span class="description" data-tid="amount-maturity"
         >{replacePlaceholders($i18n.neuron_detail.amount_maturity, {
-          $amount: formatMaturity(maturityE8s),
+          $amount: formatMaturity(selectedMaturityE8s),
         })}</span
       >
       <span data-tid="percentage-to-disburse"

frontend/src/lib/modals/neurons/DisburseMaturityModal.svelte

@@ -13,12 +13,9 @@
     KeyValuePair,
   } from "@dfinity/gix-components";
   import { formatToken } from "$lib/utils/token.utils";
-  import {
-    formatMaturity,
-    maturityPercentageToE8s,
-  } from "$lib/utils/neuron.utils";
+  import { formatMaturity } from "$lib/utils/neuron.utils";
 
-  export let formattedMaturity: string;
+  export let availableMaturityE8s: bigint;
   export let tokenSymbol: string;
 
   const steps: WizardSteps = [
@@ -44,19 +41,18 @@
 
   const goToConfirm = () => modal.next();
 
-  let maturityToDisburse = 0n;
-  $: maturityToDisburse = maturityPercentageToE8s({
-    total: Number(formattedMaturity),
-    percentage: percentageToDisburse,
-  });
+  let maturityToDisburseE8s: bigint;
+  $: maturityToDisburseE8s =
+    (availableMaturityE8s * BigInt(percentageToDisburse)) / 100n;
+
   // +/- 5%
   let predictedMinimumTokens: string;
   $: predictedMinimumTokens = formatToken({
-    value: BigInt(Number(maturityToDisburse) * 0.95),
+    value: BigInt(Math.round(Number(maturityToDisburseE8s) * 0.95)),
   });
   let predictedMaximumTokens: string;
   $: predictedMaximumTokens = formatToken({
-    value: BigInt(Number(maturityToDisburse) * 1.05),
+    value: BigInt(Math.round(Number(maturityToDisburseE8s) * 1.05)),
   });
 </script>
 
@@ -73,7 +69,7 @@
 
   {#if currentStep?.name === "SelectPercentage"}
     <NeuronSelectPercentage
-      {formattedMaturity}
+      {availableMaturityE8s}
       buttonText={$i18n.neuron_detail.disburse}
       on:nnsSelectPercentage={goToConfirm}
       on:nnsCancel={close}
@@ -126,7 +122,7 @@
             >{$i18n.neuron_detail.disburse_maturity_confirmation_amount}</span
           >
           <span data-tid="confirm-amount" class="value" slot="value"
-            >{formatMaturity(maturityToDisburse)}
+            >{formatMaturity(maturityToDisburseE8s)}
           </span>
         </KeyValuePair>
         <KeyValuePair>

frontend/src/lib/modals/neurons/NnsStakeMaturityModal.svelte

@@ -40,7 +40,7 @@
 </script>
 
 <StakeMaturityModal
-  formattedMaturity={maturity}
+  availableMaturityE8s={neuron.fullNeuron?.maturityE8sEquivalent ?? 0n}
   on:nnsStakeMaturity={stakeNeuronMaturity}
   on:nnsClose
 />

frontend/src/lib/modals/neurons/SpawnNeuronModal.svelte

@@ -13,7 +13,6 @@
   import { spawnNeuron } from "$lib/services/neurons.services";
   import { toastsShow } from "$lib/stores/toasts.store";
   import {
-    formattedMaturity,
     isEnoughMaturityToSpawn,
     isNeuronControlledByHardwareWallet,
   } from "$lib/utils/neuron.utils";
@@ -98,7 +97,7 @@
   >
   {#if currentStep?.name === "SelectPercentage"}
     <NeuronSelectPercentage
-      formattedMaturity={formattedMaturity(neuron)}
+      availableMaturityE8s={neuron.fullNeuron?.maturityE8sEquivalent ?? 0n}
       buttonText={$i18n.neuron_detail.spawn}
       on:nnsSelectPercentage={spawnNeuronFromMaturity}
       on:nnsCancel={close}

frontend/src/lib/modals/neurons/StakeMaturityModal.svelte

@@ -12,7 +12,7 @@
     type WizardStep,
   } from "@dfinity/gix-components";
 
-  export let formattedMaturity: string;
+  export let availableMaturityE8s: bigint;
 
   const steps: WizardSteps = [
     {
@@ -45,7 +45,7 @@
 
   {#if currentStep?.name === "SelectPercentage"}
     <NeuronSelectPercentage
-      {formattedMaturity}
+      {availableMaturityE8s}
       buttonText={$i18n.neuron_detail.stake}
       on:nnsSelectPercentage={goToConfirm}
       on:nnsCancel={close}

frontend/src/lib/modals/sns/neurons/SnsDisburseMaturityModal.svelte

@@ -57,7 +57,7 @@
 </script>
 
 <DisburseMaturityModal
-  formattedMaturity={maturity}
+  availableMaturityE8s={neuron.maturity_e8s_equivalent}
   tokenSymbol={token?.symbol ?? ""}
   on:nnsDisburseMaturity={disburseMaturity}
   on:nnsClose

frontend/src/lib/modals/sns/neurons/SnsStakeMaturityModal.svelte

@@ -45,7 +45,7 @@
 </script>
 
 <StakeMaturityModal
-  formattedMaturity={maturity}
+  availableMaturityE8s={neuron.maturity_e8s_equivalent}
   on:nnsStakeMaturity={stakeNeuronMaturity}
   on:nnsClose
 />

frontend/src/lib/utils/neuron.utils.ts

@@ -56,7 +56,7 @@ import { nowInSeconds } from "./date.utils";
 import { formatNumber } from "./format.utils";
 import { getVotingBallot, getVotingPower } from "./proposals.utils";
 import { toNnsVote } from "./sns-proposals.utils";
-import { formatToken, numberToE8s } from "./token.utils";
+import { formatToken } from "./token.utils";
 import { isDefined } from "./utils";
 
 export type StateInfo = {
@@ -954,16 +954,3 @@ export const maturityLastDistribution = ({
 
 export const neuronDashboardUrl = ({ neuronId }: NeuronInfo): string =>
   `https://dashboard.internetcomputer.org/neuron/${neuronId.toString()}`;
-
-export const maturityPercentageToE8s = ({
-  total,
-  percentage,
-}: {
-  total: number;
-  percentage: number;
-}): bigint =>
-  numberToE8s(
-    // Use toFixed to avoid Token validation error "Number X has more than 8 decimals"
-    // due to `numberToE8s` validation of floating-point approximation issues of IEEE 754 (e.g. 0.1 + 0.2 = 0.30000000000000004)
-    Number(((percentage / 100) * total).toFixed(8))
-  );

frontend/src/tests/lib/modals/sns/SnsDisburseMaturityModal.spec.ts

@@ -37,6 +37,7 @@ describe("SnsDisburseMaturityModal", () => {
   };
 
   beforeEach(() => {
+    jest.clearAllMocks();
     authStore.setForTesting(mockIdentity);
   });
 
@@ -80,8 +81,8 @@ describe("SnsDisburseMaturityModal", () => {
     expect(await po.getConfirmDestination()).toBe("Main");
   });
 
-  it("should call disburse maturity api and reloadNeuron", async () => {
-    const po = await renderSnsDisburseMaturityModal();
+  const disburse = async (neuron: SnsNeuron) => {
+    const po = await renderSnsDisburseMaturityModal(neuron);
     await po.setPercentage(50);
     await po.clickNextButton();
 
@@ -93,11 +94,23 @@ describe("SnsDisburseMaturityModal", () => {
 
     expect(disburseMaturity).toBeCalledTimes(1);
     expect(disburseMaturity).toBeCalledWith({
-      neuronId: mockSnsNeuron.id,
+      neuronId: neuron.id,
       rootCanisterId: mockPrincipal,
       percentageToDisburse: 50,
       identity: mockIdentity,
     });
     await waitFor(() => expect(reloadNeuron).toBeCalledTimes(1));
+  };
+
+  it("should call disburse maturity api and reloadNeuron", async () => {
+    await disburse(mockSnsNeuron);
+  });
+
+  it("should disburse maturity when maturity is larger than 1,000", async () => {
+    const neuron1100maturity = createMockSnsNeuron({
+      id: [1],
+      maturity: 110_000_000_000n,
+    });
+    await disburse(neuron1100maturity);
   });
 });

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

@@ -55,7 +55,6 @@ import {
   mapMergeableNeurons,
   mapNeuronIds,
   maturityLastDistribution,
-  maturityPercentageToE8s,
   minNeuronSplittable,
   neuronAge,
   neuronCanBeSplit,
@@ -2422,24 +2421,4 @@ describe("neuron-utils", () => {
       ).toBe(false);
     });
   });
-
-  describe("maturityPercentageToE8s", () => {
-    it("calculates percents ", () => {
-      expect(
-        maturityPercentageToE8s({
-          total: 100,
-          percentage: 50,
-        })
-      ).toEqual(5_000_000_000n);
-    });
-
-    it("handles more than 8 decimals results", () => {
-      expect(
-        maturityPercentageToE8s({
-          total: 1.00001,
-          percentage: 1,
-        })
-      ).toEqual(1_000_010n);
-    });
-  });
 });