fix: encoding and decoding with right decimals

apps/deposit-pool/src/app/signing/page.tsx

@@ -16,6 +16,7 @@ import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import type { Address } from "viem";
+import { useDepositAmounts } from "#/hooks/useDepositAmounts";
 import type { FormType } from "#/types";
 import { encodeFormData } from "#/utils/encodeFormData";
 
@@ -26,6 +27,7 @@ export default function Page() {
     useIFrameContext();
   const [account, setAccount] = useState<string>();
   const router = useRouter();
+  const depositAmountsWithDecimals = useDepositAmounts();
   const submitHook = useSubmitHook({ defaultGasLimit: BigInt(700000) });
   const cowShedSignature = useCowShedSignature({
     cowShed,
@@ -60,13 +62,24 @@ export default function Page() {
     const cowShedCall = await cowShedSignature(txs);
     if (!cowShedCall) throw new Error("Error signing hooks");
 
-    const encodedFormData = encodeFormData(values as FormType);
+    const encodedFormData = encodeFormData(
+      values as FormType,
+      depositAmountsWithDecimals,
+    );
 
     await submitHook({
       target: cowShed.getFactoryAddress(),
       callData: cowShedCall + encodedFormData,
     });
-  }, [cowShedSignature, submitHook, hookInfo, permitTxs, cowShed, values]);
+  }, [
+    cowShedSignature,
+    submitHook,
+    hookInfo,
+    permitTxs,
+    cowShed,
+    values,
+    depositAmountsWithDecimals,
+  ]);
 
   const permitCallback = useCallback(
     async (permit: {

apps/deposit-pool/src/hooks/useDepositAmounts.ts

@@ -0,0 +1,26 @@
+import { useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { parseUnits } from "viem";
+import type { FormType } from "#/types";
+import { useSelectedPool } from "./useSelectedPool";
+
+export function useDepositAmounts(): Record<string, bigint> {
+  const { control } = useFormContext<FormType>();
+  const amounts = useWatch({ control, name: "amounts" });
+  const selectedPool = useSelectedPool();
+
+  return useMemo(() => {
+    if (!selectedPool) return {};
+
+    return Object.fromEntries(
+      Object.entries(amounts).map(([key, value]) => {
+        const token = selectedPool.allTokens.find(
+          (token) => token.address.toLowerCase() === key.toLowerCase(),
+        );
+        if (!token) return [key, parseUnits(value, 18)];
+
+        return [key, parseUnits(value, token.decimals)];
+      }),
+    );
+  }, [selectedPool, amounts]);
+}

apps/deposit-pool/src/utils/decodeCalldata.ts

@@ -49,14 +49,10 @@ export const decodeCalldata = async (
 
   const referenceTokenAddress = `0x${encodedFormData.slice(248, 288)}`;
 
-  // const optionSelected = decodeSelectedOption(encodedFormData[289]);
-  const _optionSelected = "userInput";
-
   const result = {
     poolId,
     amounts,
     referenceTokenAddress,
-    // amountType: optionSelected,
   } as FormType;
 
   return result;

apps/deposit-pool/src/utils/encodeFormData.ts

@@ -1,20 +1,22 @@
+import type { BigNumberish } from "ethers";
 import type { FormType } from "#/types";
 
 function remove0x(v: string): string {
   return v.slice(2);
 }
 
-function processAmount(amount: string | number) {
-  return BigInt(Number(amount) * 10 ** 18)
-    .toString(16)
-    .padStart(64, "0");
+function processAmount(amount: BigNumberish) {
+  return amount.toString(16).padStart(64, "0");
 }
 
-export function encodeFormData(data: FormType): string {
-  const { poolId, amounts, referenceTokenAddress } = data;
+export function encodeFormData(
+  data: FormType,
+  parsedAmounts: Record<string, bigint>,
+): string {
+  const { poolId, referenceTokenAddress } = data;
 
-  const keys = Object.keys(amounts || {});
-  const values = Object.values(amounts || {});
+  const keys = Object.keys(parsedAmounts || {});
+  const values = Object.values(parsedAmounts || {});
 
   const encodedPoolId = remove0x(poolId); // size = 40
   const encodedToken1 = remove0x(keys[0]); // size = 40