Merge pull request #43 from gnosischain/dev

fix: add warning message when user is not able to batch deposit
gnosischain · May 31, 2024 · 684a15d · 684a15d
2 parents 68da8a1 + d47bb53
commit 684a15d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 29 deletions.
diff --git a/components/dashboard.tsx b/components/dashboard.tsx
@@ -78,7 +78,7 @@ export default function Dashboard() {
           <div className="flex flex-col gap-y-4 justify-between items-start mt-4 lg:mt-0">
             <div>
               Balance:
-              <p className="font-bold text-xl lg:text-3xl">{Number(formatEther(balance || BigInt(0))).toFixed(3)} GNO</p>
+              <p className="font-bold text-xl lg:text-2xl">{Number(formatEther(balance || BigInt(0))).toFixed(3)} GNO</p>
             </div>
             <div>
               Network:

diff --git a/components/deposit.tsx b/components/deposit.tsx
@@ -16,36 +16,39 @@ export default function Deposit() {
   const [loading, setLoading] = useState(false);
   const [tx, setTx] = useState<Address>("0x0");
   const [step, setStep] = useState("deposit");
-  const onDrop = useCallback(async (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
-    if (rejectedFiles.length > 0) {
-      setErrorMessage("Please upload a valid JSON file.");
-    } else if (acceptedFiles.length > 0) {
-      const reader = new FileReader();
-      reader.onload = async (event) => {
-        const result = event.target?.result as string;
-        if (result) {
-          try {
-            setLoading(true);
-            await setDepositData(result, acceptedFiles[0].name);
-            setStep("validation");
-            setLoading(false);
-            setErrorMessage("");
-          } catch (error: unknown) {
-            console.log(error);
-            setLoading(false);
-            if (error instanceof Error) {
+  const onDrop = useCallback(
+    async (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+      if (rejectedFiles.length > 0) {
+        setErrorMessage("Please upload a valid JSON file.");
+      } else if (acceptedFiles.length > 0) {
+        const reader = new FileReader();
+        reader.onload = async (event) => {
+          const result = event.target?.result as string;
+          if (result) {
+            try {
+              setLoading(true);
+              await setDepositData(result, acceptedFiles[0].name);
+              setStep("validation");
+              setLoading(false);
+              setErrorMessage("");
+            } catch (error: unknown) {
               console.log(error);
-              setErrorMessage(error.message);
-            } else {
-              setErrorMessage("An unexpected error occurred.");
+              setLoading(false);
+              if (error instanceof Error) {
+                console.log(error);
+                setErrorMessage(error.message);
+              } else {
+                setErrorMessage("An unexpected error occurred.");
+              }
             }
           }
-        }
-      };
-      reader.readAsText(acceptedFiles[0]);
-    }
-  }, [setDepositData]);
-
+        };
+        reader.readAsText(acceptedFiles[0]);
+      }
+    },
+    [setDepositData]
+  );
+
   const { getRootProps, getInputProps } = useDropzone({ onDrop, accept: { "application/json": [] }, maxFiles: 1 });
 
   const onDeposit = useCallback(async () => {
@@ -96,6 +99,11 @@ export default function Deposit() {
           <div className="flex items-center">
             <CheckIcon className="h-5 w-5" /> Total amount required: {depositData.deposits.length} GNO
           </div>
+          {depositData.isBatch ? (
+            ""
+          ) : (
+            <p className="text-orange-400 text-xs text-center">Your deposit file contains BLS credentials (starting with 0x00), you&apos;ll be asked to sign a transaction for each of them. Alternatively you can generate the keys again, make sure to specify an eth1 address for the withdrawal credentials.</p>
+          )}
           <button className="bg-[#DD7143] px-4 py-1 rounded-full text-white mt-4 text-lg font-semibold" onClick={onDeposit}>
             Deposit
           </button>

diff --git a/hooks/use-deposit.ts b/hooks/use-deposit.ts
@@ -90,6 +90,9 @@ function useDeposit() {
         // batch processing necessary for both single deposit and batch deposit for same withdrawal_credentials
         _isBatch = newDeposits.every((d) => d.withdrawal_credentials === wc);
 
+        // check if withdrawal credential start with 0x00
+        _isBatch = !wc.startsWith("00");
+
         if (_isBatch && newDeposits.length > 128) {
           throw Error("Number of validators exceeds the maximum batch size of 128. Please upload a file with 128 or fewer validators.");
         }
@@ -163,7 +166,7 @@ function useDeposit() {
           console.log(err);
         }
       } else {
-        //too much complexity by handling multiple withdrawal credential in one batch?
+        // too much complexity by handling multiple withdrawal credential in one batch?
         console.log("sending deposit transaction");
         await Promise.all(
           deposits.map(async (deposit) => {