perf(juicebox-hooks): replace old useContractReadValue with wagmi.useReadContract; replace BigNumber with BigInt; replace ethers.parseTransaction with viem.decodeFunctionData

Author: twodam

components/JuiceboxCard/JBSplitEntry.stories.tsx

@@ -4,7 +4,6 @@ import * as wagmi from "wagmi";
 
 import JBSplitEntry from "./JBSplitEntry";
 import { ZERO_ADDRESS } from "@/constants/Contract";
-import { BigNumber } from "ethers";
 import { JBSplit } from "@/models/JuiceboxTypes";
 
 const meta: Meta<typeof JBSplitEntry> = {
@@ -17,19 +16,19 @@ type Story = StoryObj<typeof JBSplitEntry>;
 
 const DEFAULT_SPLIT: JBSplit = {
   allocator: ZERO_ADDRESS,
-  projectId: BigNumber.from(0),
+  projectId: BigInt(0),
   beneficiary: ZERO_ADDRESS,
-  percent: BigNumber.from(0),
+  percent: BigInt(0),
   preferAddToBalance: false,
   preferClaimed: false,
-  lockedUntil: BigNumber.from(0),
+  lockedUntil: BigInt(0),
 };
 
 export const Project: Story = {
   args: {
     mod: {
       ...DEFAULT_SPLIT,
-      projectId: BigNumber.from(1),
+      projectId: BigInt(1),
       beneficiary: "0xAF28bcB48C40dBC86f52D459A6562F658fc94B1e",
     },
   },

components/JuiceboxCard/JBSplitEntry.tsx

@@ -15,25 +15,29 @@ export default function JBSplitEntry({
 }) {
   const { allocator, projectId, beneficiary } = mod;
 
-  const { data: ensName } = useEnsName({ address: beneficiary as `0x${string}`, chainId: 1 });
+  const { data: ensName } = useEnsName({
+    address: beneficiary as `0x${string}`,
+    chainId: 1,
+  });
 
   let splitMode = "address";
   if (allocator !== "0x0000000000000000000000000000000000000000") {
     splitMode = "allocator";
-  } else if (projectId.toNumber() !== 0) {
+  } else if (projectId !== BigInt(0)) {
     splitMode = "project";
   }
 
   const mainStyle = "text-base font-semibold";
 
-  
   if (splitMode === "project") {
     return (
       <div className="mx-1 inline-block">
         <ProjectLink
-          projectId={projectId.toNumber()}
+          projectId={Number(projectId)}
           style={`${mainStyle} text-amber-600`}
-          subText={`Beneficiary of project payment tokens: ${ensName || shortenAddress(beneficiary)}`}
+          subText={`Beneficiary of project payment tokens: ${
+            ensName || shortenAddress(beneficiary)
+          }`}
           minified
         />
       </div>
@@ -55,15 +59,21 @@ export default function JBSplitEntry({
 
   return (
     <div className="mx-1 inline-block">
-      <FormattedAddress address={beneficiary} style={`${mainStyle} text-blue-800`} minified link copyable={false} />
+      <FormattedAddress
+        address={beneficiary}
+        style={`${mainStyle} text-blue-800`}
+        minified
+        link
+        copyable={false}
+      />
     </div>
   );
 }
 
 export function diff2TableEntry(
   index: number,
   status: Status,
-  tableData: SectionTableData[],
+  tableData: SectionTableData[]
 ) {
   return (v: SplitDiffEntry) => {
     tableData[index].entries.push({

components/ProposalEdit/ReserveActionForm.tsx

@@ -33,22 +33,30 @@ export default function ReserveActionForm({
   }>({ name: genFieldName("splits") });
 
   const { data: spaceInfo } = useSpaceInfo({ space });
-  const projectId = spaceInfo?.data?.juiceboxProjectId;
-  const { value: _fc, loading: fcIsLoading } =
+  const projectId = parseInt(spaceInfo?.data?.juiceboxProjectId || "0");
+  const { data: _fc, isLoading: fcIsLoading } =
     useCurrentFundingCycle(projectId);
   const [fc, metadata] = _fc || [];
-  const { value: ticketMods, loading: ticketModsIsLoading } = useCurrentSplits(
+  const { data: ticketMods, isLoading: ticketModsIsLoading } = useCurrentSplits(
     projectId,
     fc?.configuration,
-    JBConstants.SplitGroup.RESERVED_TOKEN,
+    BigInt(JBConstants.SplitGroup.RESERVED_TOKEN)
   );
   // TODO: reserve rate, percent / total_percentage JBConstants
 
   useEffect(() => {
     if (fields.length === 0) {
       // if no splits in proposal (not editing) then load from JB project
       const arr = ticketMods ? [...ticketMods] : [];
-      arr.sort((a, b) => b.percent.sub(a.percent).toNumber());
+      arr.sort((a, b) => {
+        if (a.percent > b.percent) {
+          return -1;
+        } else if (a.percent < b.percent) {
+          return 1;
+        } else {
+          return 0;
+        }
+      });
       arr.forEach((ticket) => {
         const split: JBSplitStruct = {
           preferClaimed: ticket.preferClaimed,
@@ -194,7 +202,7 @@ export default function ReserveActionForm({
               </div>
             </Disclosure.Panel>
           </Disclosure>
-        ),
+        )
       )}
     </div>
   );

components/Transaction/QueueReconfiguration.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useRef } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-import { BigNumber, utils } from "ethers";
+import { utils } from "ethers";
 import { useReconfig } from "@/utils/hooks/NanceHooks";
 import {
   calcDiffTableData,
@@ -34,7 +34,7 @@ export default function QueueReconfigurationModal({
   // Get configuration of current fundingCycle
   const projectId = juiceboxProjectId;
   const owner = transactorAddress ? utils.getAddress(transactorAddress) : "";
-  const { value: controller, loading: controllerIsLoading } =
+  const { data: controllerAddress, isLoading: controllerIsLoading } =
     useControllerOfProject(projectId);
   const { value: currentConfig, loading: configIsLoading } =
     useReconfigurationOfProject(projectId);
@@ -46,21 +46,20 @@ export default function QueueReconfigurationModal({
     encodeReconfiguration,
     "",
     currentConfig.fundingCycle.fee,
-    BigNumber.from(Math.floor(Date.now() / 1000))
+    BigInt(Math.floor(Date.now() / 1000))
   );
 
   // Splits with changes
   const payoutsDiff = comparePayouts(
     currentConfig,
     newConfig,
-    currentConfig.payoutMods || [],
-    newConfig?.payoutMods || []
+    [...currentConfig.payoutMods] || [],
+    [...(newConfig?.payoutMods || [])]
   );
 
-  const reservesDiff = compareReserves(
-    currentConfig.ticketMods || [],
-    newConfig?.ticketMods || []
-  );
+  const reservesDiff = compareReserves([...currentConfig.ticketMods] || [], [
+    ...(newConfig?.ticketMods || []),
+  ]);
 
   const loading = controllerIsLoading || configIsLoading || reconfigIsLoading;
 
@@ -72,11 +71,13 @@ export default function QueueReconfigurationModal({
   );
 
   const reconfigTx: GenericTransactionData = {
-    to: controller?.address || "",
+    to: controllerAddress || "",
     value: "0",
     data: encodeReconfiguration,
   };
 
+  console.debug("tableData", { currentConfig, newConfig, tableData });
+
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog