Merge pull request #295 from Xaxxoo/primereact

chore: Update package.json and pnpm-lock.yaml to add PrimeReact and P…
NoshonNetworks · Feb 2, 2025 · 68765c2 · 68765c2
2 parents f45fa4d + 8448bf3
commit 68765c2
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 82 deletions.
diff --git a/app/client/package.json b/app/client/package.json
@@ -17,13 +17,14 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.460.0",
     "next": "14.2.15",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.9.2",
     "react": "^18",
     "react-calendar": "^5.1.0",
     "react-date-range": "^2.0.1",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
     "react-spinners": "^0.14.1",
-    "react-toastify": "^10.0.6",
     "starknet": "^6.11.0",
     "starknetkit": "^2.3.3",
     "tailwind-merge": "^2.5.5",

diff --git a/app/client/pnpm-lock.yaml b/app/client/pnpm-lock.yaml
diff --git a/app/client/src/app/globals.css b/app/client/src/app/globals.css
@@ -1,12 +1,14 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import "primereact/resources/themes/lara-light-indigo/theme.css";
+@import "primereact/resources/primereact.min.css";
+@import "primeicons/primeicons.css";
 
 body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
-
 .container_scrollable {
   overflow-y: scroll;
 }
@@ -34,4 +36,4 @@ body {
   :root {
     --radius: 0.5rem;
   }
-}
+}
diff --git a/app/client/src/components/WalletConnectModal.tsx b/app/client/src/components/WalletConnectModal.tsx
@@ -1,13 +1,11 @@
 "use client";
-import React  from "react";
+import React, { useRef } from "react";
 import { useConnect } from "@starknet-react/core";
 import type { Connector } from "@starknet-react/core";
 import { useRouter } from "next/navigation";
-// import FadeLoader from "react-spinners/FadeLoader";
 import { IoMdClose } from "react-icons/io";
 import Image from "next/image";
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { Toast } from "primereact/toast";
 
 const walletIdToName = new Map([
   ["argentX", "Argent X"],
@@ -16,96 +14,124 @@ const walletIdToName = new Map([
   ["argentMobile", "Argent mobile"],
 ]);
 
-const walletIcons : {
-  "braavos": string, 
-  "argentX": string,
-  "argentWebWallet": string,
-  "argentMobile": string,
+const walletIcons: {
+  braavos: string;
+  argentX: string;
+  argentWebWallet: string;
+  argentMobile: string;
 } = {
-  "braavos": "/icons/wallets/braavos.svg",
-  "argentX": "/icons/wallets/argent-x.svg",
-  "argentWebWallet": "/icons/wallets/web.svg",
-  "argentMobile": "/icons/wallets/argent-x.svg",
-}
-
-
-
-export function WalletConnectorModal({setShowWalletsModal}:{ setShowWalletsModal?:(value:boolean)=>void }) {
+  braavos: "/icons/wallets/braavos.svg",
+  argentX: "/icons/wallets/argent-x.svg",
+  argentWebWallet: "/icons/wallets/web.svg",
+  argentMobile: "/icons/wallets/argent-x.svg",
+};
 
-  const router = useRouter()
-  const { connectors, connectAsync } = useConnect({  });
+export function WalletConnectorModal({
+  setShowWalletsModal,
+}: {
+  setShowWalletsModal?: (value: boolean) => void;
+}) {
+  const router = useRouter();
+  const { connectors, connectAsync } = useConnect();
+  const toast = useRef<Toast>(null);
 
   async function connect(connector: Connector) {
     try {
       await connectAsync({ connector });
-      localStorage.setItem("landver-connector", connector.id)
-      if(setShowWalletsModal) setShowWalletsModal(false)
+      localStorage.setItem("landver-connector", connector.id);
+      if (setShowWalletsModal) setShowWalletsModal(false);
     } catch (error: unknown) {
       // Create user-friendly error message
-      let errorMessage = "Failed to connect wallet. ";
+      let errorMessage = "Failed to connect wallet.";
       if (error instanceof Error) {
         if (error.message.includes("rejected")) {
-          errorMessage = "Connection rejected. Please try again and approve the connection request.";
+          errorMessage =
+            "Connection rejected. Please try again and approve the connection request.";
         } else if (error.message.includes("Connector not found")) {
-          errorMessage = `${walletIdToName.get(connector.id) ?? connector.name} is not installed. Please install the wallet extension first.`;
+          errorMessage = `${
+            walletIdToName.get(connector.id) ?? connector.name
+          } is not installed. Please install the wallet extension first.`;
         } else {
-          errorMessage += "Please check if your wallet is properly configured and try again.";
+          errorMessage +=
+            " Please check if your wallet is properly configured and try again.";
         }
       }
 
-
-      toast.error(errorMessage);
+      // Show error toast using PrimeReact
+      toast.current?.show({
+        severity: "error",
+        summary: "Wallet Connection Error",
+        detail: errorMessage,
+        life: 4000,
+      });
+
       console.error("Wallet connection error:", error);
     }
   }
 
   return (
     <div>
-      <ToastContainer />
-      {/* {
-        connecting && (
-          <div className="h-72 flex justify-center items-center">
-            <FadeLoader 
-              color="#6E62E5"
-              speedMultiplier={3}
-              radius={30}
-            />
+      <Toast ref={toast} />
+      <div
+        className="p-3 fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-40 flex justify-center items-center"
+        style={{ zIndex: 1000 }}
+      >
+        <div className="bg-white rounded-lg py-6 max-w-[630px] w-full relative">
+          <div
+            className="absolute top-6 right-6 cursor-pointer"
+            onClick={() => {
+              if (!!setShowWalletsModal) {
+                setShowWalletsModal(false);
+              }
+              if (!setShowWalletsModal) {
+                router.push("/dashboard");
+              }
+            }}
+          >
+            <IoMdClose size={22} />
           </div>
-        )
-      } */}
-        <div className="p-3 fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-40 flex justify-center items-center" style={{ zIndex:1000 }}>
-              <div className="bg-white rounded-lg py-6 max-w-[630px] w-full relative">
+          <p className="text-center text-xl font-semibold mb-7">
+            Connect Wallet
+          </p>
+          <div className="w-[93%] mx-auto flex flex-col gap-3">
+            {connectors.map((connector, index) => {
+              return (
                 <div
-                  className="absolute top-6 right-6 cursor-pointer"
-                  onClick={()=>{
-                    if(!!setShowWalletsModal){
-                      setShowWalletsModal(false)
-                    }
-                    if(!setShowWalletsModal){
-                      router.push("/dashboard")
-                    }
-                  }}  
+                  key={connector.id + "connectwalletmodal" + index}
+                  onClick={() => connect(connector)}
+                  className="bg-[#F2FCFA] px-4 flex justify-between items-center rounded-md h-[65px] w-full shrink-0 hover:scale-95 transition-all cursor-pointer"
                 >
-                  <IoMdClose size={22} />
-                </div>
-                <p className="text-center text-xl font-semibold mb-7">Connect Wallet</p>
-                <div className="w-[93%] mx-auto flex flex-col gap-3">
-                  {connectors.map((connector, index) => {
-
-                    return (
-                      <div key={connector.id+"connectwalletmodal"+index} onClick={() => connect(connector)} className="bg-[#F2FCFA] px-4 flex justify-between items-center rounded-md h-[65px] w-full shrink-0 hover:scale-95 transition-all cursor-pointer">
-                        <Image src={walletIcons[connector.id as "braavos"|"argentX"|"argentWebWallet"|"argentMobile"]} alt="ether" width={25} height={25} />
-                        <div>
-                          <p className="text-base text-center font-medium">{walletIdToName.get(connector.id) ?? connector.name}</p>
-                          {/* <p className="text-base text-center ">Powered by Agent</p> */}
-                        </div>
-                        <Image src={"/icons/common/arror-up-right-with-underline.svg"} alt="ether" width={21} height={21} />
-                      </div>
-                    );
-                  })}
+                  <Image
+                    src={
+                      walletIcons[
+                        connector.id as
+                          | "braavos"
+                          | "argentX"
+                          | "argentWebWallet"
+                          | "argentMobile"
+                      ]
+                    }
+                    alt="ether"
+                    width={25}
+                    height={25}
+                  />
+                  <div>
+                    <p className="text-base text-center font-medium">
+                      {walletIdToName.get(connector.id) ?? connector.name}
+                    </p>
+                  </div>
+                  <Image
+                    src={"/icons/common/arror-up-right-with-underline.svg"}
+                    alt="ether"
+                    width={21}
+                    height={21}
+                  />
                 </div>
-              </div>
+              );
+            })}
+          </div>
         </div>
+      </div>
     </div>
   );
-}
+}
diff --git a/package.json b/package.json
@@ -3,5 +3,6 @@
     "@apibara/indexer": "^0.4.1",
     "@apibara/protocol": "^0.4.9",
     "pg": "^8.13.1"
-  }
+  },
+  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
 }