feat: use new contract

#49
golemfactory · Apr 11, 2024 · 288c55f · 288c55f
1 parent 8d26e7e
commit 288c55f
Show file tree

Hide file tree

Showing 12 changed files with 196 additions and 116 deletions.
diff --git a/frontend/src/components/allowanceSummary.tsx b/frontend/src/components/allowanceSummary.tsx
@@ -3,18 +3,11 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useAllowance } from "hooks/GLM/useGLMApprove";
 import { formatEther } from "viem";
 import { CheckCircleIcon } from "@heroicons/react/20/solid";
+import { SummaryCard } from "./summaryCard/summaryCard";
 export const AllowanceSummary = ({ isVisible }: { isVisible: boolean }) => {
   const { data } = useAllowance();
   return (
-    <div
-      style={{
-        backgroundColor: "#0000005b",
-        borderRadius: "16px",
-        padding: "1rem",
-        fontSize: "1.3rem",
-        minWidth: "350px",
-      }}
-    >
+    <SummaryCard isVisible={isVisible}>
       <h3>
         <CheckCircleIcon
           className="h-8 inline"
@@ -29,6 +22,6 @@ export const AllowanceSummary = ({ isVisible }: { isVisible: boolean }) => {
         {formatEther(config.minimalAllowance)})
       </p>
       <p>Spent: x GLM </p>
-    </div>
+    </SummaryCard>
   );
 };
diff --git a/frontend/src/components/createDepositForm.tsx b/frontend/src/components/createDepositForm.tsx
@@ -60,7 +60,6 @@ export const CreateDepositForm = ({ isVisible }: { isVisible: boolean }) => {
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
-          exit={{ opacity: 0, scale: 0.4 }}
           transition={{ duration: 0.5, delay: 0.5 }}
         >
           <Card

diff --git a/frontend/src/components/deposit.tsx b/frontend/src/components/deposit.tsx
@@ -4,6 +4,7 @@ import { AllowanceSummary } from "./allowanceSummary";
 import { ApproveForm } from "./approveForm";
 import { CreateDepositForm } from "./createDepositForm";
 import { DepositSummary } from "./depositSummary";
+import { useAccount } from "wagmi";
 
 const variants = {
   onTop: {
@@ -18,6 +19,7 @@ const variants = {
 export const Deposit = () => {
   const { user } = useUser();
   console.log("Deposit rendered", user.hasDeposit());
+  const { address } = useAccount();
   return (
     <motion.div
       style={{
@@ -27,10 +29,13 @@ export const Deposit = () => {
       variants={variants}
       transition={{ duration: 0.5 }}
     >
-      <CreateDepositForm
-        isVisible={user.hasDepositDataLoaded() && !user.hasDeposit()}
-      />
-      <DepositSummary isVisible={user.hasDeposit()} />
+      {user.hasDepositDataLoaded() && address && (
+        <CreateDepositForm
+          isVisible={user.hasDepositDataLoaded() && !user.hasDeposit()}
+        />
+      )}
+
+      {user.hasDeposit() && <DepositSummary />}
     </motion.div>
   );
 };
diff --git a/frontend/src/components/depositSummary.tsx b/frontend/src/components/depositSummary.tsx
@@ -1,75 +1,67 @@
-import { config } from "config";
 import { AnimatePresence, motion } from "framer-motion";
-import { useAllowance } from "hooks/GLM/useGLMApprove";
 import { formatEther } from "viem";
 import { CheckCircleIcon } from "@heroicons/react/20/solid";
 import { useUserCurrentDeposit } from "hooks/depositContract/useDeposit";
 import { Button, Input } from "react-daisyui";
-export const DepositSummary = ({ isVisible }: { isVisible: boolean }) => {
+export const DepositSummary = () => {
   const { data } = useUserCurrentDeposit();
   console.log("data", data);
-  if (!data?.amount) {
-    throw new Error("No deposit found");
-  }
   return (
-    <AnimatePresence>
-      {isVisible && (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.5 }}
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.5 }}
+      style={{
+        position: "absolute",
+        backgroundColor: "#0000005b",
+        borderRadius: "16px",
+        padding: "1rem",
+        fontSize: "1.3rem",
+        minWidth: "350px",
+      }}
+    >
+      <h3>
+        <CheckCircleIcon
+          className="h-8 inline"
           style={{
-            position: "absolute",
-            backgroundColor: "#0000005b",
-            borderRadius: "16px",
-            padding: "1rem",
-            fontSize: "1.3rem",
-            minWidth: "350px",
+            color: "#00ff003c",
+          }}
+        />{" "}
+        <span
+          style={{
+            color: "#0C14D4f3",
           }}
         >
-          <h3>
-            <CheckCircleIcon
-              className="h-8 inline"
-              style={{
-                color: "#00ff003c",
-              }}
-            />{" "}
-            <span
-              style={{
-                color: "#0C14D4f3",
-              }}
-            >
-              Deposit Summary
-            </span>
-          </h3>
-          <br></br>
-          <div className="text-sm flex flex-col justify-between">
-            <div>
-              <span>Amount: </span>
-              <span>{formatEther(data.amount)}</span>
-            </div>
-            <div className="mt-4">
-              <Button
-                size="sm"
-                color="primary"
-                className="mr-2 px-6"
-                onClick={() => {
-                  console.log("Approve");
-                }}
-              >
-                top up
-              </Button>
-              <Input
-                size="sm"
-                placeholder="Enter amount"
-                className="w-40"
-                type="number"
-              ></Input>
-            </div>
-          </div>
-        </motion.div>
-      )}
-    </AnimatePresence>
+          Deposit Summary
+        </span>
+      </h3>
+      <br></br>
+      <div className="text-sm flex flex-col justify-between">
+        <div>
+          <span>Amount: </span>
+          //@ts-ignore
+          <span>{formatEther(data?.amount || 0n)}</span>
+        </div>
+        <div className="mt-4">
+          <Button
+            size="sm"
+            color="primary"
+            className="mr-2 px-6"
+            onClick={() => {
+              console.log("Approve");
+            }}
+          >
+            top up
+          </Button>
+          <Input
+            size="sm"
+            placeholder="Enter amount"
+            className="w-40"
+            type="number"
+          ></Input>
+        </div>
+      </div>
+    </motion.div>
   );
 };
diff --git a/frontend/src/components/providers/userProvider.tsx b/frontend/src/components/providers/userProvider.tsx
@@ -119,30 +119,35 @@ export const UserProvider = ({ children }: PropsWithChildren<{}>) => {
   //TODO : check if user is registered
   const [isRegistered, setIsRegistered] = useState(false);
 
+  const [user, dispatch] = useReducer(
+    userActionReducer,
+    isConnected
+      ? isRegistered
+        ? { state: UserState.REGISTERED }
+        : { state: UserState.CONNECTED }
+      : { state: UserState.DISCONNECTED }
+  );
+
   useEffect(() => {
-    const currentDeposit = userData?.deposits.find(
+    const currentDeposit = (userData?.deposits || []).find(
       (deposit) => deposit.isCurrent
     );
     if (!isUserLoading && userData?._id) {
+      console.log("userData", userData);
       setIsRegistered(true);
     }
     if (currentDeposit) {
       console.log("currentDeposit", currentDeposit);
       dispatch({ kind: UserAction.HAS_DEPOSIT, payload: { currentDeposit } });
     } else {
-      dispatch({ kind: UserAction.HAS_NO_DEPOSIT });
+      if (userData?.deposits) {
+        console.log("aaa");
+        dispatch({ kind: UserAction.HAS_NO_DEPOSIT });
+      }
     }
   }, [isUserLoading, userData]);
 
   const { isFetched, isLoading: isLoadingAllowance, data } = useAllowance();
-  const [user, dispatch] = useReducer(
-    userActionReducer,
-    isConnected
-      ? isRegistered
-        ? { state: UserState.REGISTERED }
-        : { state: UserState.CONNECTED }
-      : { state: UserState.DISCONNECTED }
-  );
 
   useEffect(() => {
     if (isConnected) {

diff --git a/frontend/src/components/register.tsx b/frontend/src/components/register.tsx
@@ -4,6 +4,7 @@ import { AllowanceSummary } from "./allowanceSummary";
 import { ApproveForm } from "./approveForm";
 import { RegisterSummary } from "./registerSummary";
 import { RegisterButton } from "./RegisterButton";
+import { useAccount } from "wagmi";
 
 const variants = {
   onTop: {
@@ -17,6 +18,8 @@ const variants = {
 
 export const Register = () => {
   const { user } = useUser();
+  const { address } = useAccount();
+  console.log("user", user.state);
   return (
     <motion.div
       style={{
@@ -26,8 +29,14 @@ export const Register = () => {
       variants={variants}
       transition={{ duration: 0.5 }}
     >
-      <RegisterButton isVisible={!user.isRegistered() && user.isConnected()} />
-      <RegisterSummary isVisible={user.isRegistered()} />
+      {user.isConnected() && address && (
+        <RegisterButton
+          isVisible={!user.isRegistered() && user.isConnected()}
+        />
+      )}
+      {user.isRegistered() && (
+        <RegisterSummary isVisible={user.isRegistered()} />
+      )}
     </motion.div>
   );
 };
diff --git a/frontend/src/components/summaryCard/summary.module.css b/frontend/src/components/summaryCard/summary.module.css
diff --git a/frontend/src/components/summaryCard/summaryCard.module.css b/frontend/src/components/summaryCard/summaryCard.module.css
@@ -0,0 +1,7 @@
+.summaryCard {
+  background-color: #0000005b;
+  border-radius: 16px;
+  padding: 1rem;
+  font-size: 1.3rem;
+  min-width: 350px;
+}
diff --git a/frontend/src/components/summaryCard/summaryCard.tsx b/frontend/src/components/summaryCard/summaryCard.tsx
@@ -0,0 +1,14 @@
+import { AnimatePresence } from "framer-motion";
+import styles from "./summaryCard.module.css";
+import { PropsWithChildren } from "react";
+
+export const SummaryCard = ({
+  isVisible,
+  children,
+}: PropsWithChildren<{ isVisible: boolean }>) => {
+  return (
+    <AnimatePresence>
+      {isVisible && <div className={styles.summaryCard}>{children}</div>}
+    </AnimatePresence>
+  );
+};
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
@@ -22,7 +22,7 @@ export const config: Config<[typeof holesky]> = {
   supportedChains: [holesky] as const,
   projectId: "20bd2ed396d80502980b6d2a3fb425f4",
   depositContractAddress: {
-    [holesky.id]: "0xb9919c8D8D384d93C195503064A3b303Ea8Fdbaa",
+    [holesky.id]: "0xA3D86ebF4FAC94114526f4D09C3fA093898347a6",
   },
   GLMContractAddress: {
     [holesky.id]: "0x8888888815bf4db87e57b609a50f938311eed068",