feat: add blockscout link after proccessing transaction

app/connected/page.tsx

@@ -1,4 +1,4 @@
-'use client'; //TODO move down suspense into components
+"use client"; //TODO move down suspense into components
 
 import Image from "next/image";
 import DropDown from "@/components/dropdown";
@@ -10,7 +10,7 @@ import { Suspense } from "react";
 export default function Page() {
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <main className="flex h-screen flex-col items-center justify-center">
+      <main className="flex h-full lg:h-screen flex-col items-center justify-center">
         <div className="w-full lg:w-[775px] bg-[#133629CC] h-full lg:h-auto backdrop-blur-sm p-4 lg:rounded-2xl flex gap-y-6 flex-col justify-start items-center">
           <div className="w-full gap-x-4 flex justify-between">
             <NavigationTab value="deposit" />
@@ -30,8 +30,7 @@ export default function Page() {
               Learn more about the Gnosis Beacon Chain
             </Link>
             <div className="w-2/4 lg:w-1/4 flex justify-center items-center">
-              {" "}
-              <DropDown />{" "}
+              <DropDown />
             </div>
           </div>
           <div className="w-full flex lg:hidden justify-center">

components/dashboard.tsx

@@ -21,7 +21,7 @@ export default function Dashboard() {
   const { balance, isWrongNetwork } = useDeposit();
   const [address, setAddress] = useState("");
   const [networkMessage, setNetworkMessage] = useState("");
-  const [network, setNetwork] = useState("");
+  const [network, setNetwork] = useState("Not supported");
 
   useEffect(() => {
     if (account.address) {
@@ -32,6 +32,8 @@ export default function Dashboard() {
   useEffect(() => {
     if (isWrongNetwork) {
       setNetworkMessage("Wrong Network. Please connect to Gnosis Chain");
+    } else {
+      setNetworkMessage("");
     }
   }, [isWrongNetwork]);
 
@@ -64,11 +66,11 @@ export default function Dashboard() {
   };
 
   return (
-    <div className="w-full h-[590px] lg:h-[375px] bg-[#F0EBDE] flex flex-col text-black rounded-2xl items-center justify-between px-4 py-6">
+    <div className="w-full relative h-[590px] lg:h-[375px] bg-[#F0EBDE] flex flex-col text-black rounded-2xl items-center justify-between px-4 py-6">
+      <p className="text-red-400 text-sm font-bold rounded-md absolute z-20 top-1">{networkMessage}</p>
       <p className="font-bold text-xl lg:text-2xl">{searchParams.get("state") == "validator" ? "Check Validators Status" : "Gnosis Beacon Chain Deposit"}</p>
       <div className="w-full flex mt-4">
         <div className="w-full lg:w-2/6 flex flex-col text-base">
-          <p className="text-red-400 text-sm rounded-md">{networkMessage}</p>
           <div className="w-min bg-[#133629] hidden lg:flex items-center rounded-full mt-4 mb-2 lg:mb-7 text-white p-2 hover:cursor-pointer hover:bg-[#2a4a3e]" onClick={handleCopyAddress}>
             {truncateAddress(address)} {isCopied ? <CheckIcon className="ml-2 h-5 w-5" /> : <DocumentDuplicateIcon className="ml-2 h-5 w-5" />}
           </div>

components/deposit.tsx

@@ -7,11 +7,14 @@ import { useCallback, useEffect, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { FileRejection } from "react-dropzone";
 import Loader from "./loader";
+import Link from "next/link";
+import { Address } from "viem";
 
 export default function Deposit() {
-  const { setDepositData, depositData, deposit, depositSuccess } = useDeposit();
+  const { setDepositData, depositData, deposit, depositSuccess, depositHash } = useDeposit();
   const [errorMessage, setErrorMessage] = useState("");
   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) {
@@ -57,6 +60,12 @@ export default function Deposit() {
     }
   }, [depositSuccess]);
 
+  useEffect(() => {
+    if (depositHash) {
+      setTx(depositHash);
+    }
+  }, [depositHash]);
+
   return (
     <div className="w-full bg-[#FFFFFFB2] h-[280px] p-6 flex flex-col justify-center items-center rounded-2xl">
       {loading ? (
@@ -94,7 +103,11 @@ export default function Deposit() {
       ) : step === "summary" ? (
         <div className="w-full flex flex-col items-center">
           <div className="flex items-center">
-            <CheckIcon className="h-5 w-5" /> Your transaction is completed !
+            <CheckIcon className="h-5 w-5" /> Your transaction is completed ! View it
+            <Link href={"https://gnosis.blockscout.com/tx/" + tx} target="_blank" className="text-[#DD7143] underline ml-1">
+              here
+            </Link>
+            .
           </div>
           <button className="text-[#DD7143] flex items-center px-4 py-1 rounded-full mt-4 text-base font-semibold" onClick={() => setStep("deposit")}>
             Back <ArrowUturnLeftIcon className="h-4 w-4 ml-2" />

components/navigation-tab.tsx

@@ -10,7 +10,7 @@ type ActionKey = "deposit" | "withdrawal" | "validator";
 
 const texts: Record<ActionKey, string> = {
   deposit: "Deposit",
-  withdrawal: "Withdrawal Claim",
+  withdrawal: "Autoclaim Rewards",
   validator: "Validator Status",
 };
 

components/withdrawal.tsx

@@ -3,13 +3,16 @@ import useClaimBalance from "@/hooks/use-claim-balance";
 import { ArrowUturnLeftIcon, CheckIcon } from "@heroicons/react/20/solid";
 import { useCallback, useEffect, useState } from "react";
 import Loader from "./loader";
+import { Address } from "viem";
+import Link from "next/link";
 
 export default function Withdrawal() {
-  const { claim, claimBalance, claimSuccess } = useClaimBalance();
-  const { register, updateConfig, unregister, isRegister, autoclaimSuccess } = useAutoclaim();
+  const { claim, claimBalance, claimSuccess, claimHash } = useClaimBalance();
+  const { register, updateConfig, unregister, isRegister, autoclaimSuccess, autoclaimHash } = useAutoclaim();
   const [timeValue, setTimeValue] = useState(1);
   const [amountValue, setAmountValue] = useState(1);
   const [step, setStep] = useState("claim");
+  const [tx, setTx] = useState<Address>("0x0");
   const [loading, setLoading] = useState(false);
 
   const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -53,6 +56,14 @@ export default function Withdrawal() {
     }
   }, [claimSuccess, autoclaimSuccess]);
 
+  useEffect(() => {
+    if (claimHash) {
+      setTx(claimHash);
+    } else if (autoclaimHash) {
+      setTx(autoclaimHash);
+    }
+  }, [claimHash, autoclaimHash]);
+
   return (
     <div className="w-full bg-[#FFFFFFB2] h-[280px] p-4 flex flex-col justify-center items-center rounded-2xl">
       {loading ? (
@@ -62,6 +73,7 @@ export default function Withdrawal() {
         </div>
       ) : step === "claim" ? (
         <>
+          <div className="w-full text-sm flex justify-center">Set up automated claim with your preferred frequency and threshold.</div>
           <div className="flex h-full flex-col justify-center gap-y-4">
             <div className="flex flex-col">
               <label htmlFor="default-input" className="block mb-2 text-xs font-bold text-gray-700">
@@ -116,7 +128,11 @@ export default function Withdrawal() {
       ) : step === "summary" ? (
         <div className="w-full flex flex-col items-center">
           <div className="flex items-center">
-            <CheckIcon className="h-5 w-5" /> Your transaction is completed !
+            <CheckIcon className="h-5 w-5" /> Your transaction is completed ! View it
+            <Link href={"https://gnosis.blockscout.com/tx/" + tx} target="_blank" className="text-[#DD7143] underline ml-1">
+              here
+            </Link>
+            .
           </div>
           <button className="text-[#DD7143] flex items-center px-4 py-1 rounded-full mt-4 text-base font-semibold" onClick={() => setStep("claim")}>
             Back <ArrowUturnLeftIcon className="h-4 w-4 ml-2" />

hooks/use-autoclaim.ts

@@ -12,9 +12,9 @@ function useAutoclaim() {
   const chainId = account?.chainId || 100;
   const contractConfig = CONTRACTS[chainId];
   const client = getPublicClient(config, { chainId: chainId as 100 | 10200 });
-  const { data: hash, writeContract } = useWriteContract();
+  const { data: autoclaimHash, writeContract } = useWriteContract();
   const { isSuccess: autoclaimSuccess } = useWaitForTransactionReceipt({
-    hash,
+    hash: autoclaimHash,
   });
 
   useEffect(() => {
@@ -69,7 +69,7 @@ function useAutoclaim() {
     }
   }, [account]);
 
-  return { register, updateConfig, unregister, isRegister, autoclaimSuccess };
+  return { register, updateConfig, unregister, isRegister, autoclaimSuccess, autoclaimHash };
 }
 
 export default useAutoclaim;

hooks/use-claim-balance.ts

@@ -14,9 +14,9 @@ function useClaimBalance() {
     functionName: "withdrawableAmount",
     args: [account.address || "0x0"],
   });
-  const { data: hash, writeContract } = useWriteContract();
+  const { data: claimHash, writeContract } = useWriteContract();
   const { isSuccess: claimSuccess } = useWaitForTransactionReceipt({
-    hash,
+    hash: claimHash,
   });
 
   const claim = useCallback(async () => {
@@ -25,7 +25,7 @@ function useClaimBalance() {
     }
   }, [account]);
 
-  return { claim, claimBalance, claimSuccess };
+  return { claim, claimBalance, claimSuccess, claimHash };
 }
 
 export default useClaimBalance;

hooks/use-deposit.ts

@@ -37,9 +37,9 @@ function useDeposit() {
     args: [account.address || "0x0"],
   });
   const isWrongNetwork = contractConfig === undefined;
-  const { data: hash, writeContract } = useWriteContract();
+  const { data: depositHash, writeContract } = useWriteContract();
   const { isSuccess: depositSuccess } = useWaitForTransactionReceipt({
-    hash,
+    hash: depositHash,
   });
 
   const validate = useCallback(
@@ -182,7 +182,7 @@ function useDeposit() {
     }
   }, [account, deposits, isBatch]);
 
-  return { deposit, depositSuccess, depositData: { deposits, filename, hasDuplicates, isBatch }, setDepositData, balance, isWrongNetwork };
+  return { deposit, depositSuccess, depositHash, depositData: { deposits, filename, hasDuplicates, isBatch }, setDepositData, balance, isWrongNetwork };
 }
 
 export default useDeposit;