From 40758e138b29b77ec1a3a75e9593da1990d98d2d Mon Sep 17 00:00:00 2001
From: Corantin <corantin.noll@gmail.com>
Date: Sat, 30 Nov 2024 13:47:49 -0500
Subject: [PATCH 1/2] Use bigint for allocation computations to avoid number
 conversion error

---
 apps/web/components/PoolGovernance.tsx |  6 +-
 apps/web/components/ProposalCard.tsx   | 35 +++++----
 apps/web/components/Proposals.tsx      | 98 ++++++++++++++------------
 apps/web/utils/numbers.ts              | 32 ++++-----
 4 files changed, 89 insertions(+), 82 deletions(-)

diff --git a/apps/web/components/PoolGovernance.tsx b/apps/web/components/PoolGovernance.tsx
index a7f31cab2..17fe7218d 100644
--- a/apps/web/components/PoolGovernance.tsx
+++ b/apps/web/components/PoolGovernance.tsx
@@ -17,14 +17,14 @@ import {
 } from "@/components/";
 
 export type PoolGovernanceProps = {
-  memberPoolWeight: number;
+  memberPoolWeight: number | undefined;
   tokenDecimals: number;
   strategy: Pick<CVStrategy, "id" | "sybilScorer" | "poolId"> & {
     registryCommunity: { garden: Pick<TokenGarden, "symbol"> };
     config: Pick<CVStrategyConfig, "pointSystem" | "allowlist">;
   };
   communityAddress: Address;
-  memberTokensInCommunity: number;
+  memberTokensInCommunity: bigint;
   isMemberCommunity: boolean;
   memberActivatedStrategy: boolean;
 };
@@ -89,7 +89,7 @@ export const PoolGovernance: React.FC<PoolGovernanceProps> = ({
                 <div className="flex items-start gap-6">
                   <p className="subtitle2">Your voting weight:</p>
                   <p className="subtitle2 text-primary-content">
-                    {memberPoolWeight.toFixed(2)} %
+                    {memberPoolWeight?.toFixed(2)} %
                   </p>
                 </div>
               )}
diff --git a/apps/web/components/ProposalCard.tsx b/apps/web/components/ProposalCard.tsx
index e46806558..5c62c0495 100644
--- a/apps/web/components/ProposalCard.tsx
+++ b/apps/web/components/ProposalCard.tsx
@@ -26,7 +26,10 @@ import {
 } from "@/hooks/useConvictionRead";
 import { useMetadataIpfsFetch } from "@/hooks/useIpfsFetch";
 import { PoolTypes, ProposalStatus } from "@/types";
-import { calculatePercentage } from "@/utils/numbers";
+import {
+  calculatePercentage,
+  calculatePercentageBigInt,
+} from "@/utils/numbers";
 import { prettyTimestamp } from "@/utils/text";
 
 export type ProposalCardProps = {
@@ -45,13 +48,13 @@ export type ProposalCardProps = {
   stakedFilter: ProposalInputItem;
   poolToken?: FetchTokenResult;
   isAllocationView: boolean;
-  memberActivatedPoints: number;
+  memberActivatedPoints: bigint;
   memberPoolWeight: number;
   executeDisabled: boolean;
   tokenDecimals: number;
   alloInfo: Allo;
   tokenData: Parameters<typeof useConvictionRead>[0]["tokenData"];
-  inputHandler: (proposalId: string, value: number) => void;
+  inputHandler: (proposalId: string, value: bigint) => void;
 };
 
 export function ProposalCard({
@@ -92,12 +95,13 @@ export function ProposalCard({
     strategyConfig,
     tokenData,
   });
-
   const inputValue =
-    inputData ? calculatePercentage(inputData.value, memberActivatedPoints) : 0;
+    inputData ?
+      calculatePercentageBigInt(inputData.value, memberActivatedPoints)
+    : 0;
 
   const poolWeightAllocatedInProposal = (
-    (inputValue * memberPoolWeight) /
+    (inputValue * Number(memberPoolWeight)) /
     100
   ).toFixed(2);
 
@@ -215,13 +219,16 @@ export function ProposalCard({
                       <input
                         type="range"
                         min={0}
-                        max={memberActivatedPoints}
-                        value={inputData?.value}
+                        max={Number(memberActivatedPoints)}
+                        value={inputData ? Number(inputData.value) : undefined}
                         className={`range range-md cursor-pointer bg-neutral-soft [--range-shdw:var(--color-green-500)] ${isProposalEnded ? "grayscale !cursor-not-allowed" : ""}`}
-                        step={memberActivatedPoints / 100}
-                        onChange={(e) =>
-                          inputHandler(proposalData.id, Number(e.target.value))
-                        }
+                        step={Number(memberActivatedPoints / 100n)}
+                        onChange={(e) => {
+                          inputHandler(
+                            proposalData.id,
+                            BigInt(Math.floor(Number(e.target.value))),
+                          );
+                        }}
                         disabled={isProposalEnded}
                       />
                     </div>
@@ -235,11 +242,11 @@ export function ProposalCard({
                     </div>
                   </div>
 
-                  {isProposalEnded && inputData?.value != 0 && (
+                  {isProposalEnded && inputData?.value != 0n && (
                     <Button
                       className="mb-2 !p-2 !px-3"
                       btnStyle="outline"
-                      onClick={() => inputHandler(proposalData.id, 0)}
+                      onClick={() => inputHandler(proposalData.id, 0n)}
                       tooltip="Clear allocation"
                     >
                       &times;
diff --git a/apps/web/components/Proposals.tsx b/apps/web/components/Proposals.tsx
index ea7d52273..95bbedc27 100644
--- a/apps/web/components/Proposals.tsx
+++ b/apps/web/components/Proposals.tsx
@@ -42,13 +42,13 @@ import { useSubgraphQuery } from "@/hooks/useSubgraphQuery";
 import { alloABI, registryCommunityABI } from "@/src/generated";
 import { ProposalStatus } from "@/types";
 import { useErrorDetails } from "@/utils/getErrorName";
-import { calculatePercentage } from "@/utils/numbers";
+import { bigIntMin, calculatePercentageBigInt } from "@/utils/numbers";
 
 // Types
 export type ProposalInputItem = {
   proposalId: string;
   proposalNumber: number;
-  value: number;
+  value: bigint;
 };
 
 // export type Strategy = getStrategyByPoolQuery["cvstrategies"][number];
@@ -63,7 +63,7 @@ export type ProposalTypeVoter = CVProposal & {
 type Stats = {
   id: number;
   name: string;
-  stat: number | string;
+  stat: number | undefined;
   className: string;
   info: string;
 };
@@ -98,11 +98,10 @@ export function Proposals({
 }: ProposalsProps) {
   // State
   const [allocationView, setAllocationView] = useState(false);
-  const [inputAllocatedTokens, setInputAllocatedTokens] = useState<number>(0);
+  const [inputAllocatedTokens, setInputAllocatedTokens] = useState<bigint>(0n);
   const [inputs, setInputs] = useState<{ [key: string]: ProposalInputItem }>(
     {},
   );
-  const [memberActivatedPoints, setMemberActivatedPoints] = useState<number>(0);
   const [stakedFilters, setStakedFilters] = useState<{
     [key: string]: ProposalInputItem;
   }>({});
@@ -117,6 +116,7 @@ export function Proposals({
 
   const tokenDecimals = strategy.registryCommunity.garden.decimals;
   const searchParams = useCollectQueryParams();
+
   // Queries
   const { data: memberData, error } = useSubgraphQuery<isMemberQuery>({
     query: isMemberDocument,
@@ -157,6 +157,10 @@ export function Proposals({
     },
   );
 
+  const memberActivatedPoints: bigint = BigInt(
+    memberStrategyData?.memberStrategy?.activatedPoints ?? 0,
+  );
+
   // Contract reads
   const { data: memberPower, refetch: refetchMemberPower } = useContractRead({
     address: communityAddress,
@@ -191,9 +195,10 @@ export function Proposals({
   const isMemberCommunity =
     !!memberData?.member?.memberCommunity?.[0]?.isRegistered;
   const memberActivatedStrategy =
-    Number(memberStrategyData?.memberStrategy?.activatedPoints) > 0;
-  const memberTokensInCommunity =
-    memberData?.member?.memberCommunity?.[0]?.stakedTokens ?? 0;
+    memberStrategyData?.memberStrategy?.activatedPoints > 0n;
+  const memberTokensInCommunity = BigInt(
+    memberData?.member?.memberCommunity?.[0]?.stakedTokens ?? 0,
+  );
 
   const proposals = strategy.proposals;
 
@@ -206,14 +211,16 @@ export function Proposals({
 
   useEffect(() => {
     const stakesFiltered =
-      memberData?.member?.stakes?.filter(
-        (stake) =>
-          stake.proposal.strategy.id.toLowerCase() ===
-          strategy.id.toLowerCase(),
-      ) ?? [];
+      memberData?.member?.stakes
+        ?.filter(
+          (stake) =>
+            stake.proposal.strategy.id.toLowerCase() ===
+            strategy.id.toLowerCase(),
+        )
+        .map((x) => ({ ...x, amount: BigInt(x.amount) })) ?? [];
 
     const totalStaked = stakesFiltered.reduce(
-      (acc, curr) => acc + BigInt(curr.amount),
+      (acc, curr) => acc + curr.amount,
       0n,
     );
 
@@ -221,21 +228,15 @@ export function Proposals({
     stakesFiltered.forEach((item) => {
       memberStakes[item.proposal.id] = {
         proposalId: item.proposal.id,
-        value: Number(item.amount),
+        value: item.amount,
         proposalNumber: item.proposal.proposalNumber,
       };
     });
 
-    setInputAllocatedTokens(Number(totalStaked));
+    setInputAllocatedTokens(totalStaked);
     setStakedFilters(memberStakes);
   }, [memberData?.member?.stakes, strategy.id]);
 
-  useEffect(() => {
-    setMemberActivatedPoints(
-      Number(memberStrategyData?.memberStrategy?.activatedPoints ?? 0n),
-    );
-  }, [memberStrategyData?.memberStrategy?.activatedPoints]);
-
   useEffect(() => {
     if (memberActivatedStrategy === false) {
       setAllocationView(false);
@@ -276,7 +277,7 @@ export function Proposals({
     proposals.forEach(({ id, proposalNumber }) => {
       newInputs[id] = {
         proposalId: id,
-        value: stakedFilters[id]?.value ?? 0,
+        value: stakedFilters[id]?.value ?? 0n,
         proposalNumber,
       };
     });
@@ -287,12 +288,12 @@ export function Proposals({
     inputData: { [key: string]: ProposalInputItem },
     currentData: { [key: string]: ProposalInputItem },
   ) => {
+    // log maximum stakable tokens
     return Object.values(inputData).reduce<
       { proposalId: bigint; deltaSupport: bigint }[]
     >((acc, input) => {
       const current = currentData[input.proposalId];
-      const diff =
-        BigInt(Math.floor(input.value)) - BigInt(current?.value ?? 0);
+      const diff = BigInt(input.value) - BigInt(current?.value ?? 0);
       if (diff !== 0n) {
         acc.push({
           proposalId: BigInt(input.proposalNumber),
@@ -306,7 +307,7 @@ export function Proposals({
   const calculateTotalTokens = (exceptProposalId?: string) => {
     if (!inputs) {
       console.error("Inputs not yet computed");
-      return 0;
+      return 0n;
     }
     return Object.values(inputs).reduce((acc, curr) => {
       if (
@@ -315,20 +316,21 @@ export function Proposals({
       ) {
         return acc;
       } else {
-        return acc + Number(curr.value);
+        return acc + curr.value;
       }
-    }, 0);
+    }, 0n);
   };
 
-  const inputHandler = (proposalId: string, value: number) => {
+  const inputHandler = (proposalId: string, value: bigint) => {
     const currentPoints = calculateTotalTokens(proposalId);
+
     const maxAllowableValue = memberActivatedPoints - currentPoints;
-    value = Math.min(value, maxAllowableValue);
+    const minValue = (value = bigIntMin(value, maxAllowableValue));
 
     const input = inputs[proposalId];
-    input.value = value;
+    input.value = minValue;
     setInputs((prev) => ({ ...prev, [proposalId]: input }));
-    setInputAllocatedTokens(currentPoints + value);
+    setInputAllocatedTokens(currentPoints + minValue);
   };
 
   const toastId = useRef<Id | null>(null);
@@ -371,7 +373,6 @@ export function Proposals({
       inputs,
       stakedFilters,
     );
-    console.debug("Proposal Deltas", proposalsDifferencesArr);
     const abiTypes = parseAbiParameters(
       "(uint256 proposalId, int256 deltaSupport)[]",
     );
@@ -387,22 +388,29 @@ export function Proposals({
   useErrorDetails(errorAllocate, "errorAllocate");
 
   // Computed values
-  const memberSupportedProposalsPct = calculatePercentage(
+  const memberSupportedProposalsPct = calculatePercentageBigInt(
     inputAllocatedTokens,
     memberActivatedPoints,
   );
-  const memberPoolWeight = calculatePercentage(
-    Number(memberPower),
-    strategy.totalEffectiveActivePoints,
-  );
 
-  const calcPoolWeightUsed = (number: number) => {
-    if (memberPoolWeight == 0) return 0;
-    return ((number / 100) * memberPoolWeight).toFixed(2);
-  };
+  const memberPoolWeight =
+    memberPower != null && +strategy.totalEffectiveActivePoints > 0 ?
+      calculatePercentageBigInt(
+        memberPower,
+        BigInt(strategy.totalEffectiveActivePoints),
+      )
+    : undefined;
+
+  const calcPoolWeightUsed =
+    memberPoolWeight ?
+      (number: number) => {
+        if (memberPoolWeight == 0) return 0;
+        return ((number / 100) * memberPoolWeight).toFixed(2);
+      }
+    : undefined;
 
   const poolWeightClassName = `${
-    calcPoolWeightUsed(memberSupportedProposalsPct) === memberPoolWeight ?
+    calcPoolWeightUsed?.(memberSupportedProposalsPct) === memberPoolWeight ?
       "bg-secondary-soft text-secondary-content"
     : "bg-primary-soft text-primary-content"
   }`;
@@ -475,7 +483,7 @@ export function Proposals({
           {allocationView && <UserAllocationStats stats={stats} />}
         </div>
         <div className="flex flex-col gap-6">
-          {proposals && inputs ?
+          {proposals && inputs && memberPoolWeight != null ?
             <>
               {proposals
                 .filter(
@@ -492,7 +500,7 @@ export function Proposals({
                       stakedFilter={stakedFilters[proposalData.id]}
                       isAllocationView={allocationView}
                       memberActivatedPoints={memberActivatedPoints}
-                      memberPoolWeight={memberPoolWeight}
+                      memberPoolWeight={memberPoolWeight ?? 0}
                       executeDisabled={
                         proposalData.proposalStatus == 4 ||
                         !isConnected ||
diff --git a/apps/web/utils/numbers.ts b/apps/web/utils/numbers.ts
index b21544448..e5a4626e3 100644
--- a/apps/web/utils/numbers.ts
+++ b/apps/web/utils/numbers.ts
@@ -69,7 +69,7 @@ export function parseToken(value: dn.Dnum | string, compact?: boolean) {
   return dn.format(value, { compact: compact, digits: 2 });
 }
 
-function formatTokenAmount(
+export function formatTokenAmount(
   value: string | number | bigint | undefined,
   decimals: number,
   digits?: number,
@@ -85,7 +85,7 @@ function formatTokenAmount(
   return dn.format(num, { digits: digits });
 }
 
-function calculateFees(
+export function calculateFees(
   stakeAmount: string,
   fee: string,
   tokenDecimals: number,
@@ -99,7 +99,7 @@ function calculateFees(
   return dn.format(num);
 }
 
-function gte(
+export function gte(
   value1: bigint | undefined,
   value2: bigint | undefined,
   decimals: number | string,
@@ -113,10 +113,10 @@ function gte(
   return dn.greaterThan(v1, v2) || dn.equal(v1, v2);
 }
 
-function calculatePercentageBigInt(
+export function calculatePercentageBigInt(
   value1: bigint,
   value2: bigint,
-  tokenDecimals: number,
+  tokenDecimals: number = 0,
 ): number {
   if (!value1 || !value2) {
     // console.log("divideWithDecimals: value1 or value2 is undefined");
@@ -135,7 +135,7 @@ function calculatePercentageBigInt(
     ).toFixed(2),
   );
 }
-function calculatePercentage(value1: number, value2: number): number {
+export function calculatePercentage(value1: number, value2: number): number {
   if (!value1 || !value2) {
     // console.log("divideWithDecimals: value1 or value2 is undefined");
     return 0;
@@ -152,7 +152,7 @@ function calculatePercentage(value1: number, value2: number): number {
   return parseFloat(divided.toFixed(2));
 }
 
-function calculatePercentageDecimals(
+export function calculatePercentageDecimals(
   value1: number | bigint,
   value2: number | bigint,
   decimals: number,
@@ -187,7 +187,7 @@ function calculatePercentageDecimals(
   return Number(formattedPercentage);
 }
 
-function calculateDecay(blockTime: number, convictionGrowth: number) {
+export function calculateDecay(blockTime: number, convictionGrowth: number) {
   const halfLifeInSeconds = convictionGrowth * 24 * 60 * 60;
 
   const result =
@@ -196,21 +196,13 @@ function calculateDecay(blockTime: number, convictionGrowth: number) {
   return Math.floor(result);
 }
 
-function calculateMaxRatioNum(
+export function calculateMaxRatioNum(
   spendingLimit: number,
   minimumConviction: number,
 ) {
   return spendingLimit / (1 - Math.sqrt(minimumConviction));
 }
 
-export {
-  calculateFees,
-  formatTokenAmount,
-  gte,
-  dn,
-  calculatePercentageDecimals,
-  calculatePercentageBigInt,
-  calculatePercentage,
-  calculateDecay,
-  calculateMaxRatioNum,
-};
+export function bigIntMin(a: bigint, b: bigint) {
+  return a < b ? a : b;
+}

From a99c5a93aa1d117e07048ee95a95eb7255efae68 Mon Sep 17 00:00:00 2001
From: Corantin <corantin.noll@gmail.com>
Date: Sun, 1 Dec 2024 19:10:52 -0500
Subject: [PATCH 2/2] Fix typing

---
 .../gardens/[chain]/[garden]/[community]/page.tsx     | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx
index cf30ca987..cbdab57ad 100644
--- a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx
+++ b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx
@@ -7,7 +7,7 @@ import {
   RectangleGroupIcon,
   UserGroupIcon,
 } from "@heroicons/react/24/outline";
-import { Dnum } from "dnum";
+import { Dnum, multiply } from "dnum";
 import Image from "next/image";
 import Link from "next/link";
 import { Address } from "viem";
@@ -41,7 +41,6 @@ import { useSubgraphQuery } from "@/hooks/useSubgraphQuery";
 import { PoolTypes } from "@/types";
 import { fetchIpfs } from "@/utils/ipfsUtils";
 import {
-  dn,
   parseToken,
   SCALE_PRECISION,
   SCALE_PRECISION_DECIMALS,
@@ -214,17 +213,17 @@ export default function Page({
       const membership = [
         BigInt(registerStakeAmount),
         Number(tokenGarden!.decimals),
-      ] as dn.Dnum;
+      ] as Dnum;
       const feePercentage = [
         BigInt(communityFee),
         SCALE_PRECISION_DECIMALS, // adding 2 decimals because 1% == 10.000 == 1e4
-      ] as dn.Dnum;
+      ] as Dnum;
 
-      return dn.multiply(membership, feePercentage);
+      return multiply(membership, feePercentage);
     } catch (err) {
       console.error(err);
     }
-    return [0n, 0] as dn.Dnum;
+    return [0n, 0] as Dnum;
   };
 
   const registrationAmount = [