feat: handle deposit creation event

#62

frontend/src/components/atoms/etherscanLink.tsx

@@ -0,0 +1,15 @@
+import { Link } from "react-daisyui";
+import { shortTransaction } from "utils/shortTransaction";
+
+export const EtherScanLink = ({ hash }: { hash: `0x${string}` }) => {
+  return (
+    <Link
+      href={`https://holesky.etherscan.io/tx/${hash}`}
+      target="_blank"
+      rel="noreferrer"
+      className="text-primary"
+    >
+      {shortTransaction(hash)}
+    </Link>
+  );
+};

frontend/src/components/homePage/events/event.tsx

@@ -3,6 +3,11 @@ import { Event, EventType, Payload } from "types/events";
 import { Card } from "react-daisyui";
 
 import { motion } from "framer-motion";
+import { EtherScanLink } from "components/atoms/etherscanLink";
+import { GLMAmountStat } from "components/atoms/GLMAmount";
+import { formatBalance } from "utils/formatBalance";
+import { parseEther } from "viem";
+import dayjs from "dayjs";
 const variants = {
   visible: { opacity: 1, transition: { duration: 1 } },
   hidden: { opacity: 0, transition: { duration: 1 } },
@@ -42,6 +47,44 @@ const AllocationReleasedEvent = (event: {
   );
 };
 
+const DepositCreatedEvent = (event: {
+  kind: Event.DEPOSIT_CREATED;
+  payload: Payload[Event.DEPOSIT_CREATED];
+}) => {
+  return (
+    <Card bordered={true}>
+      <Card.Body>
+        <Card.Title>Deposit Created</Card.Title>
+        <div>
+          <div className="flex gap-2">
+            <div className="stat-title"> TX Hash: </div>
+
+            <EtherScanLink hash={event.payload.txHash}></EtherScanLink>
+          </div>
+          <div className="flex gap-2">
+            <div className="stat-title"> Amount: </div>
+            <GLMAmountStat
+              amount={formatBalance(
+                parseEther(event.payload.amount.toString())
+              )}
+            ></GLMAmountStat>{" "}
+          </div>
+          <div className="flex gap-2">
+            <div className="stat-title"> Fee: </div>
+            <GLMAmountStat
+              amount={formatBalance(parseEther(event.payload.fee.toString()))}
+            ></GLMAmountStat>{" "}
+          </div>
+          <div className="flex gap-2">
+            <div className="stat-title"> Valid to: </div>
+            {dayjs(event.payload.validityTimestamp).format("YYYY-MM-DD HH:mm")}
+          </div>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+};
+
 export const EventCard = (event: EventType) => {
   return (
     <motion.div variants={variants} initial="hidden" animate="visible">
@@ -51,6 +94,8 @@ export const EventCard = (event: EventType) => {
             return <AllocationCreatedEvent {...event} />;
           case Event.ALLOCATION_RELEASED:
             return <AllocationReleasedEvent {...event} />;
+          case Event.DEPOSIT_CREATED:
+            return <DepositCreatedEvent {...event} />;
         }
       })()}
     </motion.div>

frontend/src/components/homePage/events/events.tsx

@@ -3,7 +3,8 @@ import { EventType } from "types/events";
 import { useAllocationEvents } from "hooks/events/useAllocationEvents";
 import { EventCard } from "./event";
 import { uniqBy } from "ramda";
-import { use } from "i18next";
+import { useDepositEvents } from "hooks/events/useDepositEvents";
+import { merge } from "rxjs";
 
 export const Events = () => {
   const [events, setEvents] = useState<
@@ -13,10 +14,10 @@ export const Events = () => {
     })[]
   >([]);
   const { events$: allocationEvents$ } = useAllocationEvents();
+  const { events$: depositEvents$ } = useDepositEvents();
 
   useEffect(() => {
-    const sub = allocationEvents$.subscribe((event) => {
-      console;
+    const sub = merge(allocationEvents$, depositEvents$).subscribe((event) => {
       setEvents((prevEvents) => {
         return uniqBy(
           (e) => {

frontend/src/components/homePage/modals/deposit/createDeposit.tsx

@@ -10,38 +10,29 @@ const log = debug("CreateDeposit");
 
 export const CreateDeposit = () => {
   const {
-    data,
     createDeposit,
     setFee,
-    error: errorPrepareDeposit,
     setAmount,
     isPending,
+    isSuccess,
+    isError,
+    isLoading,
     validToTimestamp,
     setValidToTimestamp,
     depositId,
     nonce,
     errorContext,
   } = useCreateDeposit();
 
-  const {
-    isSuccess: isSuccessTransaction,
-    isError: isErrorTransaction,
-    isLoading: isLoadingTransaction,
-    isPending: isPendingTransaction,
-  } = useWaitForTransactionReceipt({
-    hash: data,
-  });
-
   const { saveDeposit } = useSaveDeposit();
   const { address } = useAccount();
+
   if (!address) {
     throw new Error("Address not found");
   }
 
-  const [isProcessing, setIsProcessing] = useState(false);
-
   useEffect(() => {
-    if (isSuccessTransaction) {
+    if (isSuccess) {
       setTimeout(() => {
         log("saving deposit", depositId);
         log("nonce", nonce);
@@ -54,14 +45,14 @@ export const CreateDeposit = () => {
         });
       }, 1000);
     }
-  }, [isSuccessTransaction, isErrorTransaction, nonce, depositId]);
+  }, [isSuccess, isError, nonce, depositId]);
 
   return (
     <UpsertDepositPresentational
       amount={0}
       setAmount={setAmount}
       callContract={createDeposit}
-      isPending={isPending || isLoadingTransaction}
+      isPending={isLoading}
       fee={0}
       setFee={setFee}
       title="Create Deposit"

frontend/src/hooks/depositContract/useDeposit.ts

@@ -1,24 +1,24 @@
-import { useReadContract, useSimulateContract, useWriteContract } from "wagmi";
+import {
+  useReadContract,
+  useSimulateContract,
+  useWaitForTransactionReceipt,
+  useWriteContract,
+} from "wagmi";
 
 import { abi } from "./abi";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { config } from "config";
 import { useChainId } from "hooks/useChainId";
 import { useUser } from "hooks/useUser";
 import { formatEther, parseEther } from "viem";
 import { useRequestorWalletAddress } from "hooks/useRequestorWalletAddress";
 import { useHandleRpcError } from "hooks/useHandleRpcError";
 import dayjs from "dayjs";
+import { useEvents } from "hooks/events/useEvents";
+import { Event } from "types/events";
 export function useCreateDeposit() {
-  const {
-    data,
-    isError,
-    isSuccess,
-    isPending,
-    isIdle,
-    writeContractAsync,
-    error,
-  } = useWriteContract();
+  const { data, isIdle, writeContractAsync, error } = useWriteContract();
+
   const chainId = useChainId();
   const [fee, setFee] = useState(0);
   const [amount, setAmount] = useState(0);
@@ -28,6 +28,29 @@ export function useCreateDeposit() {
   const nonce = useRef(Math.floor(Math.random() * 1000000));
   const { data: requestorData } = useRequestorWalletAddress();
   const { showNotification, errorContext } = useHandleRpcError();
+
+  const { isSuccess, isError, isLoading, isPending } =
+    useWaitForTransactionReceipt({
+      hash: data,
+    });
+
+  const { emit } = useEvents({
+    eventKind: Event.DEPOSIT_CREATED,
+    key: "depositCreatedEvents",
+  });
+
+  useEffect(() => {
+    if (isSuccess && data) {
+      console.log("emit", data);
+      emit({
+        txHash: data,
+        amount: amount,
+        fee: fee,
+        validityTimestamp: validToTimestamp,
+      });
+    }
+  }, [isSuccess, data]);
+
   const { data: contractSimulationData, error: simulationError } =
     useSimulateContract({
       address: config.depositContractAddress[chainId],
@@ -70,11 +93,13 @@ export function useCreateDeposit() {
       };
     },
     data,
-    isError,
-    isSuccess,
+
     error,
     setFee,
     isPending,
+    isSuccess,
+    isError,
+    isLoading,
     isIdle,
     setValidToTimestamp,
     validToTimestamp,

frontend/src/hooks/events/useCreateAllocationEvents.tsx

@@ -1,7 +1,7 @@
-import { useSyncExternalEvents } from "./useSyncExternalEvent";
 import { Event } from "types/events";
+import { useEvents } from "./useEvents";
 export const useCreateAllocationEvents = () => {
-  return useSyncExternalEvents({
+  return useEvents({
     eventKind: Event.ALLOCATION_CREATED,
     key: "allocationCreatedEvents",
   });

frontend/src/hooks/events/useDepositCreatedEvents.tsx

@@ -0,0 +1,8 @@
+import { Event } from "types/events";
+import { useEvents } from "./useEvents";
+export const useDepositCreatedEvents = () => {
+  return useEvents({
+    eventKind: Event.DEPOSIT_CREATED,
+    key: "depositCreatedEvents",
+  });
+};

frontend/src/hooks/events/useDepositEvents.tsx

@@ -0,0 +1,12 @@
+import { merge } from "rxjs";
+import { useDepositReleasedEvents } from "./useDepositReleasedEvents";
+import { useDepositCreatedEvents } from "./useDepositCreatedEvents";
+
+export const useDepositEvents = () => {
+  const { events$: depositCreatedEvents$ } = useDepositCreatedEvents();
+  const { events$: depositReleasedEvents$ } = useDepositReleasedEvents();
+
+  return {
+    events$: merge(depositReleasedEvents$, depositCreatedEvents$),
+  };
+};

frontend/src/hooks/events/useDepositReleasedEvents.ts

@@ -0,0 +1,8 @@
+import { Event } from "types/events";
+import { useEvents } from "./useEvents";
+export const useDepositReleasedEvents = () => {
+  return useEvents({
+    eventKind: Event.DEPOSIT_CREATED,
+    key: "allocationCreatedEvents",
+  });
+};