working on user signin

package.json

@@ -13,6 +13,7 @@
     "@heroicons/react": "^2.0.18",
     "@reduxjs/toolkit": "^1.9.5",
     "@types/crypto-js": "^4.1.1",
+    "@types/js-cookie": "^3.0.3",
     "@types/node": "20.5.1",
     "@types/react": "18.2.20",
     "@types/react-copy-to-clipboard": "^5.0.4",
@@ -27,6 +28,7 @@
     "eslint-config-next": "13.4.19",
     "ethers": "5.7.1",
     "heroicons": "^2.0.18",
+    "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
     "next": "13.4.19",
     "npm-watch": "^0.11.0",

public/manifest.json

@@ -10,7 +10,7 @@
     "48": "/icons/favicon-48.png",
     "128": "/icons/favicon-128.png"
   },
-  "permissions": [],
+  "permissions": ["tabs", "bookmarks", "unlimitedStorage", "nativeMessaging"],
   "content_scripts": [
     {
       "matches": ["https://*/*", "http://*/*"],

src/components/Auth/Login.tsx

@@ -15,31 +15,32 @@ import {ToastContainer,toast} from "react-toastify"
 import { ArrowDownCircleIcon } from "@heroicons/react/20/solid";
 
 function Login() {
-  const [inputValue, setInputValue] = useState("");
+  const [inputValue, setInputValue] = useState<string|null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const {login,isLoggedIn} = useLogin()
   const navigate = useNavigate();
 
   useEffect(() => {
 
-  },[isLoggedIn])
+  },[inputValue])
 
   const handleLogin = () => {
-    if (inputValue === "") {
+    if (inputValue === null || inputValue==="") {
         toast.error("please fill the password")
+    } else {
+      console.log("password is", inputValue);
+      const isLogged = login(inputValue);
+      if (isLogged) {
+        console.log("isLogged", isLogged);
+        navigate("/home");
+        return;
+      }
+      if (!isLogged) {
+        toast.error("invalid password");
+        return;
+      }
     }
-    toast.success("ishanlelogin");
-    console.log("password is", inputValue)
-    const isLogged=login(inputValue)
-    if (isLogged) {
-      console.log("isLogged", isLogged);
-      navigate('/home')
-      return
-    }
-    if (!isLogged) {
-      toast.error("invalid password")
-      return
-    }
+
   }
   if(isLoading){
     return (
@@ -71,7 +72,7 @@ function Login() {
               className="outline-none bg-transparent py-2 px-4 placeholder:text-xl border-b-2 border-[#373583]"
               placeholder="password"
               onChange={(e) => setInputValue(e.target.value)}
-              value={inputValue}
+
             />
             <button
               className="bg-[#373583] p-2 rounded-lg  flex-1 self-stretch text-white text-center text-xl"

src/components/wallet/import-exisiting/index.tsx

@@ -22,7 +22,7 @@ export default function ImportExisting() {
 
 
 
-  const [password, setPassword] = useState("");
+  const [password, setPassword] = useState<string|null>(null);
   const [secretPhrase, setSecretPhrase] = useState("");
   const [isSubmit, setIsSubmit] = useState(false);
 
@@ -47,16 +47,21 @@ export default function ImportExisting() {
 
 
   const handleSubmit = async () => {
-    setIsLoading(true);
-    const isAuth = await signup(secretPhrase.toString(),password.toString());
-    if (isAuth ) {
+    if (password !== null) {
+      setIsLoading(true);
+      const isAuth = await signup(secretPhrase, password);
+      if (isAuth) {
+        setIsLoading(false);
+        console.log("isAuth", isAuth);
+        navigate("/home");
+        return;
+      }
+      toast.error("something went wrong in the validation");
       setIsLoading(false);
-      console.log("isAuth",isAuth)
-      navigate("/home")
       return
     }
-    toast.error("something went wrong in the validation")
-    setIsLoading(false)
+    toast.error("something is wrong")
+
   }
 
     useEffect(() => {

src/components/wallet/import-exisiting/password.tsx

@@ -4,37 +4,41 @@ import { useState } from "react";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { ChangeEvent } from "react";
+import ForgotPassword from "@/components/Auth/ForgotPassword";
 
 interface PasswordProps {
   setPassword: (pass: string) => void;
   setIsSubmit: (sub: boolean) => void;
 }
 
-
-
-export const Password: React.FC<PasswordProps> = ({ setPassword, setIsSubmit }) => {
+export const Password: React.FC<PasswordProps> = ({
+  setPassword,
+  setIsSubmit,
+}) => {
   const navigate = useNavigate();
 
-  const [pass, setPass] = useState("");
-  const [confirmPass, setConfirmPass] = useState("");
+  const [pass, setPass] = useState<string|null>(null);
+  const [confirmPass, setConfirmPass] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-
-
   const onSubmit = () => {
     if (isSubmitting) return;
     if (pass !== confirmPass) {
       toast.error("The passwords do not match");
       return;
     }
-    if (pass.length < 6) {
-      toast.error("The password must be greater than 5 characters");
-      return;
+    // if (pass.length < 6) {
+    //   toast.error("The password must be greater than 5 characters");
+    //   return;
+    // }
+    if (pass !== null) {
+       setIsSubmitting(true);
+       setPassword(pass);
+       console.log(pass);
+      setIsSubmit(true);
+      return
     }
-    setIsSubmitting(true); 
-    setPassword(pass.toString());
-    console.log(pass);
-    setIsSubmit(true);
+   return
   };
 
   return (

src/components/wallet/import-exisiting/secret-recovery-phrase.tsx

@@ -4,11 +4,11 @@ import { useNavigate } from "react-router-dom"; // Import useHistory from React
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
-import * as bip39 from "bip39"
+import * as bip39 from "bip39";
 import { ethers } from "ethers";
 import next from "next";
 interface SecretRecoveryPhaseProps {
-  setSecretPhrase: (phrase:string)=>void;
+  setSecretPhrase: (phrase: string) => void;
   onNext: () => void;
 }
 
@@ -58,67 +58,32 @@ export const SecretRecoveryPhase: React.FC<SecretRecoveryPhaseProps> = ({
     return inputValues.every((value) => value.trim() !== "");
   };
 
-  // const handleNext =  async() => {
-  //   if (!isAllField()) {
-  //     toast.error("please fill all the fields");
-  //     return false;
-  //   }
-  //   console.log('mnemonic',inputValues.join(" "))
-  //   let isWalletExits = await ethers.utils.isValidMnemonic(
-  //     inputValues.join(" ")
-  //   );
-  //   console.log("isWalletExits", isWalletExits);
-  //   // if (!isWalletExits) {
-  //   //   toast.error("provided mnemonic(seed phrase) is incorrect");
-  //   //   return;
-  //   // }
-
-  //   // if (!bip39.validateMnemonic(inputValues.join(" "))) {
-  //   //   toast.error("provided mnemonic(seed phrase) is incorrect");
-  //   //   return
-  //   // }
-  //   if (isWalletExits) {
-  //     toast.success("exits");
-  //     secretPhrase = inputValues.join(" ");
-  //     console.log(secretPhrase);
-  //     onNext();
-  //   } else {
-  //     toast.error("provided mnemonic(seed phrase) is incorrect");
-  //   }
-
-
-  //   // if (isWalletExits==='true') {
-  //   //   onNext();
-  //   // }
-
-  // };
-
   const handleNext = async () => {
     try {
       if (!isAllField()) {
         toast.error("please fill all the fields");
-        return ;
+        return;
       }
       console.log(inputValues.join(" "));
-      let isWalletExits = await ethers.utils.isValidMnemonic(inputValues.join(" "));
+      let isWalletExits = await ethers.utils.isValidMnemonic(
+        inputValues.join(" ")
+      );
       if (!isWalletExits) {
-        toast.error("invalid mnemonic")
-        return
+        toast.error("invalid mnemonic");
+        return;
       }
       setSecretPhrase(inputValues.join(" ").toString());
       onNext();
     } catch (error) {
       toast.error("something went wrong");
     }
-  }
+  };
 
   const handleClear = () => {
     const clearedValues = Array(inputValues.length).fill("");
     setInputValues(clearedValues);
   };
 
-
-
   return (
     <div className="flex flex-col justify-center items-center">
       <ToastContainer />