feat: handle deposit extension event

#62

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

@@ -77,7 +77,45 @@ const DepositCreatedEvent = (event: {
           </div>
           <div className="flex gap-2">
             <div className="stat-title"> Valid to: </div>
-            {dayjs(event.payload.validityTimestamp).format("YYYY-MM-DD HH:mm")}
+            {dayjs(event.payload.validityTimestamp * 1000).format("YYYY-MM-DD")}
+          </div>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+};
+
+const DepositExtendedEvent = (event: {
+  kind: Event.DEPOSIT_EXTENDED;
+  payload: Payload[Event.DEPOSIT_EXTENDED];
+}) => {
+  return (
+    <Card bordered={true}>
+      <Card.Body>
+        <Card.Title>Deposit Extended</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"> Extra Amount: </div>
+            <GLMAmountStat
+              amount={formatBalance(
+                parseEther(event.payload.amount.toString())
+              )}
+            ></GLMAmountStat>{" "}
+          </div>
+          <div className="flex gap-2">
+            <div className="stat-title"> Extra Fee: </div>
+            <GLMAmountStat
+              amount={formatBalance(parseEther(event.payload.fee.toString()))}
+            ></GLMAmountStat>{" "}
+          </div>
+          <div className="flex gap-2">
+            <div className="stat-title"> New Valid to: </div>
+            {dayjs(event.payload.validityTimestamp * 1000).format("YYYY-MM-DD")}
           </div>
         </div>
       </Card.Body>
@@ -96,6 +134,8 @@ export const EventCard = (event: EventType) => {
             return <AllocationReleasedEvent {...event} />;
           case Event.DEPOSIT_CREATED:
             return <DepositCreatedEvent {...event} />;
+          case Event.DEPOSIT_EXTENDED:
+            return <DepositExtendedEvent {...event} />;
         }
       })()}
     </motion.div>

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

@@ -1,14 +1,16 @@
-import dayjs from "dayjs";
 import { useCreateDeposit } from "hooks/depositContract/useDeposit";
 import { useSaveDeposit } from "hooks/useSaveDeposit";
 
-import { useEffect, useState } from "react";
-import { useAccount, useWaitForTransactionReceipt } from "wagmi";
+import { useEffect } from "react";
+import { useAccount } from "wagmi";
 import { UpsertDepositPresentational } from "./upsertDepositPresentational";
 import debug from "debug";
+import { useLayout } from "components/providers/layoutProvider";
 const log = debug("CreateDeposit");
 
 export const CreateDeposit = () => {
+  const { hideModal } = useLayout();
+
   const {
     createDeposit,
     setFee,
@@ -43,6 +45,8 @@ export const CreateDeposit = () => {
           id: depositId,
           funder: address,
         });
+
+        hideModal();
       }, 1000);
     }
   }, [isSuccess, isError, nonce, depositId]);

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

@@ -8,8 +8,11 @@ import { useUser } from "hooks/useUser";
 import { useEffect } from "react";
 import { useWaitForTransactionReceipt } from "wagmi";
 import { UpsertDepositPresentational } from "./upsertDepositPresentational";
+import { useLayout } from "components/providers/layoutProvider";
 
 export const ExtendDeposit = () => {
+  const { hideModal } = useLayout();
+
   const {
     additionalAmount,
     data,
@@ -44,17 +47,10 @@ export const ExtendDeposit = () => {
     }
     if (isSuccessTransaction && additionalAmount > 0) {
       topUp(additionalAmount);
+      hideModal();
     }
   }, [isSuccessTransaction]);
 
-  useEffect(() => {
-    console.log("newValidToTimeStamp", newValidToTimeStamp);
-    console.log(
-      "dd",
-      dayjs(Number(newValidToTimeStamp) * 1000).format("YYYY-MM-DD")
-    );
-  }, [newValidToTimeStamp]);
-
   return (
     <UpsertDepositPresentational
       amount={additionalAmount}

frontend/src/hooks/depositContract/useDeposit.ts

@@ -10,12 +10,15 @@ 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 { formatEther, parseEther, toHex } 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";
+import { useDepositCreatedEvents } from "hooks/events/useDepositCreatedEvents";
+import { useDepositExtendedEvents } from "hooks/events/useDepositExtendedEvents";
+import { use } from "i18next";
 
 export function useCreateDeposit() {
   const {
@@ -45,14 +48,10 @@ export function useCreateDeposit() {
     hash: data,
   });
 
-  const { emit } = useEvents({
-    eventKind: Event.DEPOSIT_CREATED,
-    key: "depositCreatedEvents",
-  });
+  const { emit } = useDepositCreatedEvents();
 
   useEffect(() => {
     if (isSuccess && data) {
-      console.log("emit", data);
       emit({
         txHash: data,
         amount: amount,
@@ -152,10 +151,31 @@ export function useUserCurrentDeposit() {
 }
 
 export function useExtendDeposit() {
+  const { emit } = useDepositExtendedEvents();
   const { showNotification, errorContext } = useHandleRpcError();
 
   const { data, isError, isSuccess, writeContractAsync, isPending } =
     useWriteContract();
+
+  const {
+    isSuccess: isSuccessTransaction,
+    isError: isErrorTransaction,
+    isLoading: isLoadingTransaction,
+  } = useWaitForTransactionReceipt({
+    hash: data,
+  });
+
+  useEffect(() => {
+    if (isSuccessTransaction && data) {
+      emit({
+        txHash: data,
+        amount: additionalAmount,
+        fee: additionalFee,
+        validityTimestamp: validToTimestamp,
+      });
+    }
+  }, [isSuccessTransaction]);
+
   const chainId = useChainId();
   const [validToTimestamp, setNewValidToTimestamp] = useState(
     dayjs().add(1, "day").unix()
@@ -183,7 +203,7 @@ export function useExtendDeposit() {
     },
     data,
     isError,
-    isSuccess,
+    isSuccess: isSuccessTransaction,
     isPending,
     newValidToTimeStamp: validToTimestamp,
     setNewValidToTimestamp,

frontend/src/hooks/events/useDepositEvents.tsx

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

frontend/src/hooks/events/useDepositExtendedEvents.ts

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

frontend/src/types/events.ts

@@ -12,6 +12,7 @@ export enum Event {
   ALLOCATION_RELEASED = "ALLOCATION_RELEASED",
   PAYMENT_FOR_GAS = "PAYMENT_FOR_GAS",
   DEPOSIT_RELEASED = "DEPOSIT_RELEASED",
+  DEPOSIT_EXTENDED = "DEPOSIT_EXTENDED",
 }
 
 export type Payload = {
@@ -21,6 +22,17 @@ export type Payload = {
     fee: number;
     validityTimestamp: number;
   };
+
+  [Event.DEPOSIT_RELEASED]: {
+    agreementId: string;
+  };
+
+  [Event.DEPOSIT_EXTENDED]: {
+    txHash: `0x${string}`;
+    amount: number;
+    fee: number;
+    validityTimestamp: number;
+  };
   [Event.ALLOCATION_CREATED]: {
     allocationId: string;
     amount: number;
@@ -53,9 +65,6 @@ export type Payload = {
   [Event.PAYMENT_FOR_GAS]: {
     agreementId: string;
   };
-  [Event.DEPOSIT_RELEASED]: {
-    agreementId: string;
-  };
 };
 
 export type EventType = EventWithPayload<Payload>;