Merge pull request #10 from srdarkseer/dev

Dev

src/components/CustomToast.tsx

@@ -0,0 +1,81 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useEffect,
+} from "react";
+
+type ToastType = "info" | "success" | "error";
+
+interface Toast {
+  id: number;
+  message: string;
+  type: ToastType;
+  animateOut: boolean;
+}
+
+type ToastContextType = {
+  addToast: (message: string, type: ToastType) => void;
+};
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+interface ToastProviderProps {
+  children: ReactNode;
+}
+
+export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = (message: string, type: ToastType): void => {
+    const id = new Date().getTime();
+    setToasts([...toasts, { id, message, type, animateOut: false }]);
+    setTimeout(() => {
+      setToasts((currentToasts) =>
+        currentToasts.map((toast) =>
+          toast.id === id ? { ...toast, animateOut: true } : toast
+        )
+      );
+      setTimeout(() => {
+        setToasts((currentToasts) =>
+          currentToasts.filter((toast) => toast.id !== id)
+        );
+      }, 500); // Delay the removal to let the fade-out animation play
+    }, 3000);
+  };
+
+  return (
+    <ToastContext.Provider value={{ addToast }}>
+      {children}
+      <div className="fixed top-5 right-5 space-y-2 z-50">
+        {toasts.map((toast) => (
+          <div
+            key={toast.id}
+            className={`p-4 border-l-4 rounded-lg transition-all duration-500 ${
+              toast.animateOut ? "animate-fadeOut" : "animate-fadeIn"
+            } ${
+              toast.type === "info"
+                ? "bg-blue-600 border-blue-900 text-white"
+                : toast.type === "success"
+                ? "bg-green-600 border-darkGreen text-white"
+                : toast.type === "error"
+                ? "bg-red-600 border-destructive text-white"
+                : "bg-primary text-white"
+            }`}
+          >
+            <p>{toast.message}</p>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = (): ToastContextType => {
+  const context = useContext(ToastContext);
+  if (context === undefined) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};

src/components/ui/dialog.tsx

@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-40 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-sm sm:max-w-4xl min-h-[70vh] sm:min-h-[75vh]  translate-x-[-50%] translate-y-[-50%] gap-4 bg-white dark:bg-pine sm:px-20 sm:py-12 shadow-lg rounded-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] ",
+        "fixed left-[50%] top-[50%] z-40 grid w-full max-w-sm sm:max-w-4xl min-h-[70vh] sm:min-h-[75vh]  translate-x-[-50%] translate-y-[-50%] gap-4 bg-white dark:bg-pine sm:px-20 sm:py-12 shadow-lg rounded-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] ",
         className
       )}
       {...props}

src/layouts/MainLayout/MainLayout.tsx

@@ -9,7 +9,9 @@ function MainLayout({ children }: any) {
       </div>
 
       <main className="pt-20">
-        <Banner />
+        <div className="block sm:hidden">
+          <Banner />
+        </div>
         {children}
       </main>
     </>

src/pages/_app.tsx

@@ -1,6 +1,8 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 
+import { ToastProvider } from "@/components/CustomToast";
+
 import { MyThemeContextProvider } from "../store/myThemeContext";
 import setupWallets from "@/lib/setupWallets";
 
@@ -32,9 +34,11 @@ const web3Onboard = init({
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <MyThemeContextProvider>
-      <Web3OnboardProvider web3Onboard={web3Onboard}>
-        <Component {...pageProps} />
-      </Web3OnboardProvider>
+      <ToastProvider>
+        <Web3OnboardProvider web3Onboard={web3Onboard}>
+          <Component {...pageProps} />
+        </Web3OnboardProvider>
+      </ToastProvider>
     </MyThemeContextProvider>
   );
 }

src/views/Landing/components/PopUpModal.tsx

@@ -19,13 +19,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { useToast } from "@/components/CustomToast";
 
 import { generateData } from "@/store/api";
 
 import { ethers, providers } from "ethers";
 import { useConnectWallet } from "@web3-onboard/react";
 
 const PopUpModal = ({ isOpen }: { isOpen: boolean }) => {
+  const { addToast } = useToast();
+
   // State for managing the multi-step process
   const [currentStep, setCurrentStep] = useState("form"); // "form", "loading", "result"
   const [response, setResponse] = useState(null);
@@ -54,30 +57,54 @@ const PopUpModal = ({ isOpen }: { isOpen: boolean }) => {
     }
   }, [isOpen]);
 
+  const validateForm = () => {
+    let errors = [];
+    if (!dataType) errors.push("data type");
+    if (!numRows) errors.push("number of rows");
+    if (
+      !fileInputRef.current ||
+      !fileInputRef.current.files ||
+      fileInputRef.current.files.length === 0
+    ) {
+      errors.push("CSV file");
+    }
+
+    if (errors.length > 0) {
+      const errorMessage = `Please provide the following fields: "${errors.join(
+        ", "
+      )}"`;
+      console.log(errorMessage);
+      addToast(errorMessage, "error");
+      return false;
+    }
+    return true;
+  };
+
   const handleSubmit = async () => {
     setCurrentStep("loading");
     const formData = new FormData();
-    if (fileInputRef.current?.files?.[0]) {
-      formData.append("file", fileInputRef.current.files[0]);
-    }
     formData.append("data_type", dataType);
     formData.append("num_rows", numRows);
     formData.append("batch_size", batchSize);
+    if (fileInputRef.current?.files?.[0]) {
+      formData.append("file", fileInputRef.current.files[0]);
+    }
 
     try {
       const responseData = await generateData(formData);
-      console.log(responseData);
       setResponse(responseData);
       setCurrentStep("result");
     } catch (error) {
       console.error(error);
+      addToast("Error generating data", "error");
       setCurrentStep("form");
     }
   };
 
   const downloadCSV = () => {
     if (!response) {
       console.error("No CSV data available");
+      addToast("No CSV data available", "error");
       return;
     }
 
@@ -196,23 +223,30 @@ const PopUpModal = ({ isOpen }: { isOpen: boolean }) => {
         const tx = await contract.connect(signer).createPerson("John", 30);
         await tx.wait(); // Wait for the transaction to be mined
         console.log("Transaction successful:", tx.hash);
+        addToast("Transaction successful", "success");
         return tx; // Resolve the promise with the transaction
       } else {
         console.error("Contract or signer is not available");
+        addToast("Contract or signer is not available", "error");
         throw new Error("Contract or signer is not available");
       }
     } catch (error) {
       console.error("Error sending transaction:", error);
+      addToast("Error sending transaction", "error");
       throw error; // Reject the promise with the error
     }
   };
 
   const handleTransactionAndDataGeneration = async () => {
+    if (!validateForm()) return;
+
     try {
       await sendTransaction();
+      addToast("Transaction successful", "success");
       await handleSubmit();
     } catch (error) {
       console.error("Error during transaction or data generation:", error);
+      addToast("Error during transaction or data generation", "error");
     }
   };
 
@@ -240,7 +274,7 @@ const PopUpModal = ({ isOpen }: { isOpen: boolean }) => {
             <div className="h-full flex flex-col justify-center">
               <DialogHeader>
                 <DialogTitle>
-                  <div className="absolute top-4 left-2 sm:top-10">
+                  <div className="absolute top-4 left-4 sm:left-20 sm:top-10">
                     Create Data
                   </div>
                 </DialogTitle>

tailwind.config.ts

@@ -83,10 +83,20 @@ const config = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        fadeIn: {
+          "0%": { opacity: "0", transform: "translateY(20px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        fadeOut: {
+          "0%": { opacity: "1" },
+          "100%": { opacity: "0" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        fadeIn: "fadeIn 0.5s ease-out",
+        fadeOut: "fadeOut 0.5s ease-out",
       },
     },
   },