feat: adjust UI to new state flow

#82
golemfactory · Jun 19, 2024 · 7115c52 · 7115c52
1 parent 989608b
commit 7115c52
Show file tree

Hide file tree

Showing 16 changed files with 175 additions and 98 deletions.
diff --git a/frontend/src/components/atoms/bip.tsx b/frontend/src/components/atoms/bip.tsx
@@ -0,0 +1,8 @@
+export const Bip = () => {
+  return (
+    <span className="absolute flex h-4 w-4 -top-1 -right-1">
+      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-success-100 opacity-75"></span>
+      <span className="relative inline-flex rounded-full h-4 w-4 bg-success-100"></span>
+    </span>
+  );
+};
diff --git a/frontend/src/components/homePage/action.tsx b/frontend/src/components/homePage/action.tsx
@@ -1,23 +1,17 @@
 import { FileUploader } from "components/molecules/Uploader";
 import { useUser } from "hooks/useUser";
-import { useCurrentAgreement } from "hooks/yagna/useCurrentAgreement";
 import { Card } from "react-daisyui";
-import { CloseSession } from "./closeSession";
-import { match } from "ts-pattern";
 import { UserState } from "types/user";
 import { copy } from "utils/copy";
 import { useScanResults } from "hooks/useScanResults";
 import { useEffect, useState } from "react";
-import { useDepositReleasedEvents } from "hooks/events/useDepositReleasedEvents";
 import { useYagnaEvents } from "hooks/events/useYagnaEvents";
 import { Event } from "types/events";
 import { useDepositPaymentEvents } from "hooks/events/usePaymentEvents";
 import { useFlowEvents } from "components/providers/flowEventsProvider";
+import { set } from "ramda";
 export const Action = () => {
-  const currentAgreement = useCurrentAgreement();
-
   const { user } = useUser();
-
   //TODO : this logic should be move outside of this component
   // probably we should extend user state provider to handle this
 
@@ -27,68 +21,93 @@ export const Action = () => {
     | "AGREEMENT_RELEASED"
     | "DEPOSIT_RELEASED"
     | "WAITING_FOR_PROVIDER_PAYMENT"
-    | "WAITING_FOR_FEE_PAYMENT"
+    | "WAITING_FOR_OWNER_PAYMENT"
   >(user.state);
 
   useEffect(() => {
-    setState(user.state);
+    if (
+      state !== "WAITING_FOR_OWNER_PAYMENT" &&
+      state !== "WAITING_FOR_PROVIDER_PAYMENT"
+    ) {
+      setState(user.state);
+    }
   }, [user.state]);
 
   const { events$: scanResults$ } = useScanResults();
-  const { events$: depositResults$ } = useDepositPaymentEvents();
   const { events$: yagnaEvents$ } = useYagnaEvents();
   const { events$: flowEvents$ } = useFlowEvents();
+  const { events$: paymentEvents$ } = useDepositPaymentEvents();
   useEffect(() => {
-    const subscription = scanResults$.subscribe((event) => {
-      console.log(event);
+    const scanResultSub = scanResults$.subscribe((event) => {
       if (
         event.kind === Event.FILE_SCAN_OK ||
         event.kind === Event.FILE_SCAN_ERROR
       ) {
-        console.log("setting");
         setState("HAS_FILE_SCANNED");
       }
     });
 
-    const subscription2 = depositResults$.subscribe((event) => {
-      console.log(event);
-      if (event.kind === Event.DEPOSIT_FEE_PAYMENT) {
-        setState("DEPOSIT_RELEASED");
-      }
-    });
-
-    const subscription3 = yagnaEvents$.subscribe((event) => {
+    const yagnaSub = yagnaEvents$.subscribe((event) => {
       if (event.kind === Event.AGREEMENT_TERMINATED) {
         setState("AGREEMENT_RELEASED");
       }
     });
 
-    const subscription4 = flowEvents$.subscribe((event) => {
+    const flowSub = flowEvents$.subscribe((event) => {
       if (event === "releaseAllocation") {
-        setState("WAITING_FOR_FEE_PAYMENT");
+        setState("WAITING_FOR_OWNER_PAYMENT");
       }
 
       if (event === "releaseAgreement") {
         setState("WAITING_FOR_PROVIDER_PAYMENT");
       }
     });
 
+    const paymentsSub = paymentEvents$.subscribe((event) => {
+      if (event.kind === Event.DEPOSIT_PROVIDER_PAYMENT) {
+        setState((prev) => {
+          if (prev !== "DEPOSIT_RELEASED") {
+            return "AGREEMENT_RELEASED";
+          }
+          return prev;
+        });
+      }
+      if (event.kind === Event.DEPOSIT_FEE_PAYMENT) {
+        console.log("DEPOSIT_FEE_PAYMENT");
+        setState("DEPOSIT_RELEASED");
+      }
+    });
+
     return () => {
-      subscription.unsubscribe();
-      subscription2.unsubscribe();
-      subscription3.unsubscribe();
-      subscription4.unsubscribe();
+      scanResultSub.unsubscribe();
+      yagnaSub.unsubscribe();
+      flowSub.unsubscribe();
+      paymentsSub.unsubscribe();
     };
   }, []);
 
   return (
     <>
       <Card className="p-2">
         <Card.Body>
-          <Card.Title>
-            {copy[state].title} {state}
-          </Card.Title>
+          <Card.Title className="mb-2">{copy[state].title}</Card.Title>
           <div dangerouslySetInnerHTML={copy[state].message}></div>
+          {state === "DEPOSIT_RELEASED" ? (
+            <div className="grid grid-cols-12 mt-12 ">
+              <div className="col-start-6 col-span-2">
+                <button
+                  className="btn"
+                  onClick={() => {
+                    flowEvents$.complete();
+                  }}
+                >
+                  Restart session
+                </button>
+              </div>
+            </div>
+          ) : (
+            ""
+          )}
         </Card.Body>
         {}
       </Card>

diff --git a/frontend/src/components/homePage/events/event.card.tsx b/frontend/src/components/homePage/events/event.card.tsx
@@ -5,12 +5,23 @@ import { EventTitle, EventType } from "types/events";
 export const EventCardScaffold = ({
   event,
   template,
+  color,
 }: {
   event: EventType & { isExpanded: boolean; toggleExpanded: () => void };
   template: ReactElement;
+  color?: string;
 }) => {
   return (
-    <Card className="transition-all duration-1300 ease-out">
+    <Card
+      className={`transition-all duration-1300 ease-out `}
+      style={
+        color
+          ? {
+              backgroundColor: color,
+            }
+          : {}
+      }
+    >
       <Card.Body>
         <Card.Title>
           <div className="w-full flex justify-between">

diff --git a/frontend/src/components/homePage/events/event.tsx b/frontend/src/components/homePage/events/event.tsx
@@ -370,13 +370,15 @@ export const EventCard = (
               <EventCardScaffold
                 event={event}
                 template={<FileScanError {...event} />}
+                color="#F66A6A"
               />
             );
           case Event.FILE_SCAN_OK:
             return (
               <EventCardScaffold
                 event={event}
                 template={<FileScanOk {...event} />}
+                color="#5BC281"
               />
             );
           case Event.NEW_DEBIT_NOTE:

diff --git a/frontend/src/components/homePage/statusSections/agreement.tsx b/frontend/src/components/homePage/statusSections/agreement.tsx
@@ -7,7 +7,7 @@ import { useDebitNoteEvents } from "hooks/events/useYagnaEvents";
 import { formatBalance } from "utils/formatBalance";
 import { parseEther } from "viem";
 import { GLMAmountStat } from "components/atoms/GLMAmount";
-import { Loading } from "react-daisyui";
+import { Loading, Tooltip } from "react-daisyui";
 import { filter } from "rxjs";
 
 export const Agreement = () => {
@@ -17,16 +17,20 @@ export const Agreement = () => {
   const { events$ } = useDebitNoteEvents();
   const [totalAmount, setTotalAmount] = useState("-");
   useEffect(() => {
-    events$
-      .pipe(
-        filter((event: any) => {
-          return event.payload.agreementId === user.currentAgreement?.id;
-        })
-      )
-      .subscribe((event: any) => {
-        setTotalAmount(event.payload.totalAmountDue);
-      });
-  }, []);
+    if (user.currentAgreement?.id) {
+      console.log("fetching total amount");
+      events$
+        .pipe(
+          filter((event: any) => {
+            console.log(event, user.currentAgreement);
+            return event.payload.agreementId === user.currentAgreement?.id;
+          })
+        )
+        .subscribe((event: any) => {
+          setTotalAmount(event.payload.totalAmountDue);
+        });
+    }
+  }, [user]);
 
   return (
     <div
@@ -67,19 +71,20 @@ export const Agreement = () => {
         <div className="stat-actions">
           {user.currentAgreement?.id &&
           user.currentAgreement?.state === "Approved" ? (
-            <button
-              className="btn"
-              onClick={() => {
-                //@ts-ignore
-                releaseAgreement(user.currentAgreement?.id);
-              }}
+            <Tooltip
+              className="bg-primary"
+              message="Will trigger payment to the provider."
             >
-              {isReleasing ? (
-                <Loading variant="infinity" />
-              ) : (
-                "Release/Pay Provider"
-              )}
-            </button>
+              <button
+                className="btn"
+                onClick={() => {
+                  //@ts-ignore
+                  releaseAgreement(user.currentAgreement?.id);
+                }}
+              >
+                {isReleasing ? <Loading variant="infinity" /> : "Release"}
+              </button>
+            </Tooltip>
           ) : (
             <button
               className="btn"

diff --git a/frontend/src/components/homePage/statusSections/allocation.tsx b/frontend/src/components/homePage/statusSections/allocation.tsx
@@ -7,11 +7,21 @@ import { useUser } from "hooks/useUser";
 import { Loading } from "react-daisyui";
 import { formatBalance } from "utils/formatBalance";
 import { Tooltip } from "react-daisyui";
+import { useEffect, useState } from "react";
+import { Bip } from "components/atoms/bip";
 export const Allocation = () => {
   const { isCreating, createAllocation } = useCreateAllocation();
   const { currentAllocation } = useCurrentAllocation();
   const { releaseAllocation, isReleasing } = useReleaseAllocation();
   const { user } = useUser();
+  const [isCreateAllocationButtonActive, setIsCreateAllocationButtonActive] =
+    useState(false);
+
+  useEffect(() => {
+    setIsCreateAllocationButtonActive(
+      user.hasDeposit() && !user.hasAllocation()
+    );
+  }, [user.hasAllocation(), user.hasDeposit()]);
 
   return (
     <div className="stats shadow mt-2 pt-4 pb-4">
@@ -95,12 +105,13 @@ export const Allocation = () => {
             </Tooltip>
           ) : (
             <button
-              className="btn"
+              className="btn relative"
               {...(user.hasDeposit() ? {} : { disabled: true })}
               onClick={() => {
                 createAllocation();
               }}
             >
+              {isCreateAllocationButtonActive && <Bip />}
               Create{" "}
             </button>
           )}

diff --git a/frontend/src/components/homePage/statusSections/approve.tsx b/frontend/src/components/homePage/statusSections/approve.tsx
@@ -7,6 +7,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Link } from "react-daisyui";
 import { formatBalance } from "utils/formatBalance";
 import { shortTransaction } from "utils/shortTransaction";
+import { Bip } from "components/atoms/bip";
 
 export const Approve = () => {
   const { txHash } = useAllowanceTx();
@@ -20,8 +21,10 @@ export const Approve = () => {
   const [isApproveButtonActive, setIsApproveButtonActive] = useState(false);
 
   useEffect(() => {
+    console.log(user.hasEnoughAllowance());
+    console.log(user.isRegistered());
     setIsApproveButtonActive(user.isRegistered() && !user.hasEnoughAllowance());
-  }, [user.hasEnoughAllowance()]);
+  }, [user.hasEnoughAllowance(), user.isRegistered()]);
   return (
     <div
       className="stats shadow mt-2 pb-4 pt-4"
@@ -66,11 +69,11 @@ export const Approve = () => {
       <div className="stat "></div>
       <div className="stat ">
         <div className="stat-actions mt-0 ">
-          <button className="btn border-solid" onClick={openExtendApproveModal}>
-            <span className="relative flex h-3 w-3">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
-            </span>
+          <button
+            className="relative btn border-solid"
+            onClick={openExtendApproveModal}
+          >
+            {isApproveButtonActive && <Bip />}
             {user.hasEnoughAllowance()
               ? "Extend"
               : user.allowanceAmount && user.allowanceAmount > 0

diff --git a/frontend/src/components/homePage/statusSections/deposit.tsx b/frontend/src/components/homePage/statusSections/deposit.tsx
@@ -5,9 +5,10 @@ import { ExtendDeposit } from "components/homePage/modals/deposit/extendDeposit"
 import { useLayout } from "components/providers/layoutProvider";
 import { useUserCurrentDeposit } from "hooks/depositContract/useDeposit";
 import { useUser } from "hooks/useUser";
-import { useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Loading } from "react-daisyui";
 import { formatBalance } from "utils/formatBalance";
+import { Bip } from "components/atoms/bip";
 
 export const Deposit = () => {
   const { user } = useUser();
@@ -23,6 +24,11 @@ export const Deposit = () => {
     openModal();
   }, []);
 
+  const [isDepositButtonActive, setIsDepositButtonActive] = useState(false);
+
+  useEffect(() => {
+    setIsDepositButtonActive(user.isRegistered() && user.hasEnoughAllowance());
+  }, [user.hasEnoughAllowance()]);
   const deposit = useUserCurrentDeposit();
   return (
     <div
@@ -63,7 +69,8 @@ export const Deposit = () => {
               Extend
             </button>
           ) : (
-            <button className="btn" onClick={openCreateDepositModal}>
+            <button className="btn relative" onClick={openCreateDepositModal}>
+              {isDepositButtonActive && <Bip />}
               Create
             </button>
           )}

diff --git a/frontend/src/components/homePage/statusSections/register.tsx b/frontend/src/components/homePage/statusSections/register.tsx
@@ -1,7 +1,20 @@
+import { useFlowEvents } from "components/providers/flowEventsProvider";
 import { useUser } from "hooks/useUser";
+import { useEffect } from "react";
 
 export const Register = () => {
   const { user } = useUser();
+  const { events$: flowEvents$, releaseAgreement } = useFlowEvents();
+
+  useEffect(() => {
+    const subscription = flowEvents$.subscribe((event) => {
+      console.log("flow event", event);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
   return (
     <div className="stats shadow pt-4 pb-4">
       <div className="stat ">