Added name to Add new fund

src/components/MyWallet/AddFundDollars.jsx

@@ -5,6 +5,7 @@ import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 import { Form, Formik } from "formik";
+import { useSelector } from "react-redux";
 import * as Yup from "yup";
 
 const validationSchema = Yup.object().shape({
@@ -59,9 +60,9 @@ function AddFundDollars(props) {
 
   let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
   const [loader, setLoader] = useState(false);
-
+  const { userDetails } = useSelector((state) => state?.userDetails);
+  let { firstname, lastname } = userDetails;
   let [prevCardDetails, setPrevCardDetails] = useState({}); // STATE TO HOLD PREVIOUS CARD SELECTED
-
   let [payListCards, setPayListCards] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS
   // const [payListCard, setPayListCard] = useState({ data: "" }); //USER PAYLIST
 
@@ -139,8 +140,6 @@ function AddFundDollars(props) {
       });
   }, []);
 
-  console.log("Annoying card>>", prevCardDetails["payment-card"]);
-
   return (
     <>
       <div className="w-full">
@@ -296,6 +295,16 @@ function AddFundDollars(props) {
                           <div className="fields w-full">
                             {/* inputs starts here */}
                             {/* Name */}
+                            <div className="flex items-center field w-full my-6 gap-3">
+                              <label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
+                                Name{" "}
+                                <span className="text-red-700 text-sm tracking-wide">
+                                  *
+                                </span>
+                                :
+                              </label>
+                              <p className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
+                            </div>
                             <div className="field w-full my-6">
                               <InputCom
                                 fieldClass="px-6"

src/components/MyWallet/ConfirmAddFund.jsx

@@ -92,14 +92,14 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   //   if (!data) {
   //     navigate("/my-wallet/add-fund", { replace: true });
   //   } else {
-    //     setPageLoading(false);
+  //     setPageLoading(false);
-    //   }
+  //   }
   // }, []);
-  
+
   let __confirmCard = JSON.parse(confirmCredit?.data.card);
   const ThePaymentText = ({ value }) => (
     <div className="my-2 flex items-center gap-5">
-      <div className="card-details">
+      <div className="card-details flex items-center gap-3">
         <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
           {value.description} Card
         </h1>
@@ -110,11 +110,8 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     </div>
   );
 
-
-  console.log("data on confirm", __confirmCard.card_uid);
-
   return (
-    <div className="content-wrapper w-full h-[36rem]">
+    <div className="content-wrapper w-full h-[32rem]">
       <div className="w-full mb-10">
         <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
           {/* <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
@@ -131,7 +128,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                         ? "Amount (Naira):"
                         : "Amount (Dollars):"}
                     </h1>
-                    <span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                       {`${walletItem?.symbol} ${
                         Number(confirmCredit?.data?.amount).toLocaleString() ||
                         ""
@@ -139,13 +136,14 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                     </span>
                   </div>
                   <div className="flex items-center gap-4">
+                    {/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"> */}
                     <label
                       htmlFor="payment"
-                      className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
+                      className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
                     >
                       {confirmCredit?.data?.currency && "Payment Method:"}
                     </label>
-                    <span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
+                    <span className="text-[#181c32] dark:text-white ">
                       {__confirmCard && (
                         <ThePaymentText value={__confirmCard} />
                       )}
@@ -172,7 +170,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             {confirmCredit?.data?.currency && "Payment Method"}
           </h1> */}
           {/* <hr /> */}
-          <div className="min-h-[330px]"></div>
+          <div className="min-h-[220px]"></div>
           <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
             <button
               className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"