made withdrawal a pop up

src/components/MyWallet/WalletAction.jsx

@@ -1,18 +1,25 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Link } from 'react-router-dom';
+import NairaWithdraw from './Popup/NairaWithdraw';
+import ConfirmNairaWithdraw from './ConfirmNairaWithdraw';
 
 function WalletAction({walletItem, payment, openPopUp}) {
+    const [showNairaWithdraw, setShowNairaWithdraw] = useState(false) // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
+
+    const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({show: false, state: {}}) // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
+    
+
   return (
     <div className="counters w-full flex justify-between gap-2">
         <div className='w-1/2 flex justify-center items-center'>
-        <Link
-            to="withdraw-naira"
+        <button
+            onClick={()=>{setShowNairaWithdraw(true)}}
             className={`${
             walletItem.code != "NAIRA" && "invisible"
             } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
         >
             Spend
-        </Link>
+        </button>
         </div>
         <div className='w-1/2 flex justify-center items-center'>
         <button
@@ -42,6 +49,15 @@ function WalletAction({walletItem, payment, openPopUp}) {
             <span className="">Add Credit</span>
         </button>
         </div>
+        
+        {showNairaWithdraw &&
+            <NairaWithdraw wallet={walletItem} action={()=>{setShowNairaWithdraw(prev => !prev)}} situation={showNairaWithdraw} setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw} />
+        }
+
+        {showConfirmNairaWithdraw.show &&
+            <ConfirmNairaWithdraw wallet={walletItem} state={showConfirmNairaWithdraw.state} action={()=>{setShowConfirmNairaWithdraw(prev => ({...prev, show: !prev.show}))}} situation={showConfirmNairaWithdraw.show} />
+        }
+
     </div>
   )
 }