feat: launch copy

#82

frontend/src/components/homePage/action.tsx

@@ -9,12 +9,27 @@ 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";
+import { init, set } from "ramda";
+import { AnimatePresence, Variants, motion } from "framer-motion";
+console.log("Action", copy);
 export const Action = () => {
   const { user } = useUser();
   //TODO : this logic should be move outside of this component
   // probably we should extend user state provider to handle this
 
+  const variants: Variants = {
+    initial: {
+      opacity: 0,
+    },
+    animate: {
+      opacity: 1,
+    },
+    exit: {
+      opacity: 0,
+      height: "0px",
+      top: "-20px",
+    },
+  };
   const [state, setState] = useState<
     | UserState
     | "HAS_FILE_SCANNED"
@@ -33,6 +48,10 @@ export const Action = () => {
     }
   }, [user.state]);
 
+  useEffect(() => {
+    console.log("user.state", state);
+  }, [state]);
+
   const { events$: scanResults$ } = useScanResults();
   const { events$: yagnaEvents$ } = useYagnaEvents();
   const { events$: flowEvents$ } = useFlowEvents();
@@ -90,8 +109,34 @@ export const Action = () => {
     <>
       <Card className="p-2">
         <Card.Body>
-          <Card.Title className="mb-2">{copy[state].title}</Card.Title>
-          <div dangerouslySetInnerHTML={copy[state].message}></div>
+          <AnimatePresence>
+            <motion.h1
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              variants={variants}
+              key={copy[state]?.title || state}
+              transition={{ ease: "easeOut", duration: 0.5 }}
+              className="text-xl font-semibold mb-4"
+            >
+              {copy[state]?.title || state}
+            </motion.h1>
+          </AnimatePresence>
+          <AnimatePresence>
+            <motion.div
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              variants={variants}
+              key={copy[state]?.message || state}
+              transition={{ ease: "easeOut", duration: 0.5 }}
+              dangerouslySetInnerHTML={
+                copy[state]?.message || {
+                  __html: <div>{state}</div>,
+                }
+              }
+            ></motion.div>
+          </AnimatePresence>
           {state === "DEPOSIT_RELEASED" ? (
             <div className="grid grid-cols-12 mt-12 ">
               <div className="col-start-6 col-span-2">

frontend/src/components/homePage/statusSections/agreement.tsx

@@ -18,11 +18,9 @@ export const Agreement = () => {
   const [totalAmount, setTotalAmount] = useState("-");
   useEffect(() => {
     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;
           })
         )

frontend/src/hooks/yagna/useCurrentAgreement.ts

@@ -1,16 +1,17 @@
 import axios from "axios";
+import { useYagnaEvents } from "hooks/events/useYagnaEvents";
 import { useUser } from "hooks/useUser";
 import { useUserData } from "hooks/userUserData";
 import { useEffect, useState } from "react";
 import useSWR from "swr";
-
+import { Event } from "types/events";
 import * as YaTsClient from "ya-ts-client";
 export type AgreementDTO = YaTsClient.MarketApi.AgreementDTO;
 
 export const useCurrentAgreement = () => {
   const { data: userData, isLoading: isUserLoading } = useUserData();
   const [isPaused, setIsPaused] = useState<boolean>(true);
-
+  const { events$: yagnaEvents$ } = useYagnaEvents();
   const { data, mutate } = useSWR<AgreementDTO>(
     `${import.meta.env.VITE_BACKEND_HTTP_URL}/agreement`,
     async (url) => {
@@ -24,9 +25,20 @@ export const useCurrentAgreement = () => {
       refreshInterval: 1000,
     }
   );
+
   useEffect(() => {
-    setIsPaused(!userData.currentAgreement?.id);
-    mutate();
-  }, [userData.currentAgreement?.id]);
+    const sub = yagnaEvents$.subscribe((event) => {
+      if (event.kind === Event.AGREEMENT_TERMINATED) {
+        setIsPaused(true);
+      }
+      if (event.kind === Event.AGREEMENT_SIGNED) {
+        setIsPaused(false);
+        mutate();
+      }
+    });
+    return () => {
+      sub.unsubscribe();
+    };
+  }, []);
   return data;
 };