made withdrawal a pop up

src/components/MyWallet/ConfirmNairaWithdraw.jsx

@@ -3,17 +3,15 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";
+import ModalCom from "../Helpers/ModalCom";
 
 import usersService from "../../services/UsersService";
 
-function ConfirmNairaWithdraw({ payment, wallet }) {
+function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
   const apiURL = new usersService();
 
   const navigate = useNavigate();
 
-  let { state } = useLocation();
-
   let [requestStatus, setRequestStatus] = useState({
     message: "",
     loading: false,
@@ -69,34 +67,16 @@ function ConfirmNairaWithdraw({ payment, wallet }) {
     }
   }, []);
   return (
-    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-      {pageLoading ? (
-        <LoadingSpinner size="8" color="sky-blue" />
-      ) : (
-        <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+    <ModalCom action={action} situation={situation}>
+      <div className="content-wrapper w-[90%] md:w-[600px]">
+        <div className="w-full">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
             <div className="px-4 md:px-8 py-4">
-              {wallet.loading ? (
-                <LoadingSpinner size="8" color="sky-blue" />
-              ) : wallet.data.length ? (
-                <h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
-                  {wallet.data.map((item) => {
-                    if (item.description == "Naira") {
-                      return `Withdraw from Naira Wallet : ${item.symbol}${(
-                        item.amount * 0.01
-                      ).toFixed(2)}`;
-                    }
-                  })}
-                </h2>
-              ) : wallet.error ? (
-                <h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
-                  Opps! An Error Occured
-                </h2>
-              ) : (
-                <h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
-                  No Wallet Information Found!
-                </h2>
-              )}
+              <h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                {`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
+                      wallet.amount * 0.01
+                    ).toFixed(2)}`}
+              </h2>
             </div>
             <hr />
             <div className="px-4 md:px-8 py-4 add-fund-info">
@@ -174,13 +154,20 @@ function ConfirmNairaWithdraw({ payment, wallet }) {
                 {requestStatus.message}
               </p>
             )}
-            <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center">
+            <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
+              <button
+                type="button"
+                onClick={action}
+                className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
+              >
+                <span className="text-gradient">Cancel</span>
+              </button>
               {requestStatus.loading ? (
                 <LoadingSpinner size="8" color="sky-blue" />
               ) : (
                 <button
                   onClick={handleSubmit}
-                  className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md"
+                  className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
                 >
                   Transfer
                 </button>
@@ -188,22 +175,8 @@ function ConfirmNairaWithdraw({ payment, wallet }) {
             </div>
           </div>
         </div>
-      )}
-
-      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-        <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
-          <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
-            Recent Activity
-          </h2>
-          {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
-          {payment.loading ? (
-            <LoadingSpinner size="16" color="sky-blue" />
-          ) : (
-            <RecentActivityTable payment={payment} />
-          )}
-        </div>
       </div>
-    </div>
+    </ModalCom>
   );
 }