Convert ConfirmAddFund to Popup

src/components/MyWallet/AddFundPop.jsx

@@ -1,20 +1,16 @@
 import React, { useState } from "react";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate } from "react-router-dom";
 import InputCom from "../Helpers/Inputs/InputCom";
 
 import AddFundDollars from "./AddFundDollars";
 
-function AddFundPop({ _payment }) {
+function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
   const navigate = useNavigate();
   //   const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
 
   let { payment, currency } = _payment;
 
   //STATE FOR CONTROLLED INPUT
-  let [input, setInput] = useState("");
-
   let [inputError, setInputError] = useState("");
 
   // FUNCTION TO HANDLE INPUT CHANGE
@@ -23,7 +19,8 @@ function AddFundPop({ _payment }) {
   };
 
   //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = () => {
+  const handleSubmit = (e) => {
+    e.preventDefault()
     setInputError("");
     if (!input || input == "0") {
       setInputError("Please Enter Amount");
@@ -39,14 +36,22 @@ function AddFundPop({ _payment }) {
       }, 5000);
     }
 
-    const stateData = { amount: Number(input), currency: "naira" };
-    navigate("confirm-add-fund", { state: stateData });
+    if(input)   return;
+    // setTimeout(
+    //   () =>
+    //     setConfirmCredit({
+    //       show: true,
+    //       data: { amount: Number(input), currency: "naira" },
+    //     }),
+    //   1500
+    // );
 
-    setInput("");
+    // const stateData = { amount: Number(input), currency: "naira" };
+    // navigate("confirm-add-fund", { state: stateData });
+
+    // setInput("");
   };
 
-  console.log("walletItem details >>", payment, currency);
-
   return (
     <div className="h-[36rem] w-full">
       <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
@@ -84,13 +89,22 @@ function AddFundPop({ _payment }) {
                   setInputError={setInputError}
                   input={input}
                   setInput={setInput}
+                  currency={currency}
+                  onClose={onClose}
+                  setConfirmCredit={setConfirmCredit}
                 />
               </div>
             )}
 
             {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
             {currency != "US Dollars" && (
-              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
+              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+                <button
+                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  onClick={onClose}
+                >
+                  Cancel
+                </button>
                 <button
                   onClick={handleSubmit}
                   type="button"