layout fix

.env

@@ -42,8 +42,18 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 
-REACT_APP_FACEBOOK_CLIENT_ID=390204307987009
-REACT_APP_FACEBOOK_CLIENT_SECRET=19f778e312f2ab96d147bacb612910c2
+#Real Account
+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+
+#developenet Account
+REACT_APP_FACEBOOK_CLIENT_ID=677857427521030
+REACT_APP_FACEBOOK_CLIENT_SECRET=4801375f22072d8a75f64483fdd89829
+
+#my Account
+REACT_APP_FACEBOOK_CLIENT_ID3=1598725580610908
+
+
 REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
 REACT_APP_FACEBOOK_REDIRECT_URL="http://localhost:9082/login/auth/flogin"
 

.env.production

@@ -40,6 +40,11 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/
 
+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
+REACT_APP_FACEBOOK_REDIRECT_URL="https://users.wrenchboard.com/login/auth/flogin"
+
 DISABLE_ESLINT_PLUGIN=true
 
 REACT_APP_MAX_FILE_SIZE=1000000

package.json

@@ -17,6 +17,7 @@
     "flutterwave-react-v3": "^1.3.0",
     "formik": "^2.2.9",
     "react": "^18.2.0",
+    "react-apple-login": "^1.1.6",
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
     "react-dom": "^18.2.0",

src/assets/images/currency/naira.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="naira"><path fill="#fff" d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm7,20a1,1,0,0,1,0,2H29v3A1.94,1.94,0,0,1,27.45,32a2,2,0,0,1-2.26-1.08L20,17.05l0,14a1,1,0,0,1-2,0V27H16a1,1,0,0,1,0-2h2V22H16a1,1,0,0,1,0-2h2V17a1.94,1.94,0,0,1,1.55-1.92,2,2,0,0,1,2.26,1.08L27,30,27,16a1,1,0,0,1,2,0v4h2a1,1,0,0,1,0,2H29v3Z" class="color3b3c3d svgShape"></path><path fill="#e3e3e3" d="M24,48A24,24,0,1,1,48,24,24,24,0,0,1,24,48ZM24,2A22,22,0,1,0,46,24,22,22,0,0,0,24,2Z" class="color3b3c3d svgShape"></path></svg>

src/assets/images/currency/usd.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" id="Coin"><path d="M8.452 281.052a7.487 7.487 0 0 0-7.483 7.482 7.485 7.485 0 0 0 7.483 7.48 7.484 7.484 0 0 0 7.48-7.48 7.486 7.486 0 0 0-7.48-7.482zm0 1.232a6.253 6.253 0 0 1 6.248 6.25 6.25 6.25 0 0 1-6.248 6.248c-3.449 0-6.25-2.8-6.25-6.248a6.254 6.254 0 0 1 6.25-6.25zm0 .53a5.717 5.717 0 0 0-5.721 5.72 5.715 5.715 0 0 0 5.72 5.719 5.713 5.713 0 0 0 5.72-5.719 5.715 5.715 0 0 0-5.72-5.72zm-.004 2.011a.265.265 0 0 1 .267.268v.596H9.74a.265.265 0 1 1 0 .529H8.715v2.05h.17c.856 0 1.551.697 1.551 1.555s-.696 1.555-1.549 1.555h-.172v.596a.265.265 0 1 1-.529 0v-.596H7.161a.265.265 0 1 1 0-.53h1.025v-2.05h-.172a1.552 1.552 0 0 1-1.547-1.555c0-.858.694-1.554 1.547-1.554h.172v-.596a.265.265 0 0 1 .262-.268zm-.434 1.393a1.01 1.01 0 0 0-1.018 1.025 1.01 1.01 0 0 0 1.018 1.026h.172v-2.051zm.701 2.58v2.05h.172c.57 0 1.02-.448 1.02-1.025s-.449-1.025-1.022-1.025z" color="#e3e3e3" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(0 -280.067)" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal" fill="#fff" class="color000000 svgShape"></path></svg>

src/components/AuthPages/AuthRedirect/FbookRedirect.jsx

@@ -20,10 +20,6 @@ function FbookRedirect() {
         return
       }
       console.log(codeResponse);
-
-      setTimeout(()=>{ // remove LATER
-        navigate('/login', {state: {error: true}})
-      },2000)
       
       /*
       POST /token HTTP/1.1

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

@@ -1,148 +1,152 @@
-import { useState, useMemo, memo } from "react";
-import { handlePagingFunc, PaginatedList } from "../../Pagination";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import { memo, useMemo, useState } from "react";
 import SuggestTask from "../../FamilyPopup/SuggestTask";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
 
-const FamilyWaitlist = memo(({ familyData, className, accountDetails, loader }) => {
-  const [popUp, setPopUp] = useState({ show: false, data: {} });
-  const [continueTaskPopup, setContinueTaskPopup] = useState({
-    show: false,
-    data: {},
-  });
-  const filteredFamilyData = useMemo(
-    () =>
-      familyData?.result_list?.filter(
-        (data) => data?.family_uid === accountDetails?.family_uid
-      ),
-    [familyData, accountDetails]
-  );
+const FamilyWaitlist = memo(
+  ({ familyData, className, accountDetails, loader }) => {
+    const [popUp, setPopUp] = useState({ show: false, data: {} });
+    const [continueTaskPopup, setContinueTaskPopup] = useState({
+      show: false,
+      data: {},
+    });
+    const filteredFamilyData = useMemo(
+      () =>
+        familyData?.result_list?.filter(
+          (data) => data?.family_uid === accountDetails?.family_uid
+        ),
+      [familyData, accountDetails]
+    );
 
-  const [currentPage, setCurrentPage] = useState(0);
-  const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const indexOfFirstItem = currentPage;
-  const indexOfLastItem = currentPage + itemsPerPage;
-  const currentTask = useMemo(
-    () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem),
-    [filteredFamilyData, indexOfFirstItem, indexOfLastItem]
-  );
+    const [currentPage, setCurrentPage] = useState(0);
+    const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const indexOfFirstItem = currentPage;
+    const indexOfLastItem = currentPage + itemsPerPage;
+    const currentTask = useMemo(
+      () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem),
+      [filteredFamilyData, indexOfFirstItem, indexOfLastItem]
+    );
 
-  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
+    const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
 
-  const openPopUp = (value) => {
-    setPopUp({ show: true, data: { ...value } });
-  };
+    const openPopUp = (value) => {
+      setPopUp({ show: true, data: { ...value } });
+    };
 
-  const closePopUp = () => {
-    setPopUp({ show: false, data: {} });
-  };
+    const closePopUp = () => {
+      setPopUp({ show: false, data: {} });
+    };
 
-  const openContinueTaskPopup = (value) => {
-    setContinueTaskPopup({ show: true, data: { ...value } });
-  };
+    const openContinueTaskPopup = (value) => {
+      setContinueTaskPopup({ show: true, data: { ...value } });
+    };
 
-  const closeContinueTaskPopup = () => {
-    setContinueTaskPopup({ show: false, data: {} });
-  };
+    const closeContinueTaskPopup = () => {
+      setContinueTaskPopup({ show: false, data: {} });
+    };
 
-  return (
-    <div
-      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
-        className || ""
-      }`}
-    >
-      {loader ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" />
-        </div>
-      ) : (
-        <>
-          {filteredFamilyData && (
-            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
-              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-                <tbody>
-                  {currentTask.map((value) => {
-                    const addedDate = value?.added.split(" ")[0];
-                    const selectedImage = require(`../../../assets/images/family/${
-                      value?.banner || "default.jpg"
-                    }`);
-                    return (
-                      <tr
-                        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
-                        key={value.uid}
-                      >
-                        <td className="py-4">
-                          <div className="w-full flex justify-between items-center">
-                            <div className="account-name flex space-x-4 items-center">
-                              <div className="icon w-14 h-14 flex justify-center items-center">
-                                <img
-                                  src={selectedImage}
-                                  alt="task_img"
-                                  className="w-full object-cover"
-                                />
+    return (
+      <div
+        className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
+          className || ""
+        }`}
+      >
+        {loader ? (
+          <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
+            <LoadingSpinner size={16} color="sky-blue" />
+          </div>
+        ) : (
+          <>
+            {filteredFamilyData && (
+              <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
+                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                  <tbody>
+                    {currentTask.map((value) => {
+                      const addedDate = value?.added.split(" ")[0];
+                      const selectedImage = require(`../../../assets/images/family/${
+                        value?.banner || "default.jpg"
+                      }`);
+                      return (
+                        <tr
+                          className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+                          key={value.uid}
+                        >
+                          <td className="py-4">
+                            <div className="w-full flex justify-between items-center">
+                              <div className="account-name flex space-x-4 items-center">
+                                <div className="icon w-14 h-14 flex justify-center items-center">
+                                  <img
+                                    src={selectedImage}
+                                    alt="task_img"
+                                    className="w-full object-cover"
+                                  />
+                                </div>
+                                <div className="">
+                                  <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+                                    {value.title}
+                                  </p>
+                                  <p className="text-sm text-thin-light-gray font-medium">
+                                    {value.description}
+                                  </p>
+                                </div>
                               </div>
-                              <div className="">
-                                <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
-                                  {value.title}
+                              <div className="px-2 flex flex-col items-center justify-center">
+                                <p className="text-sm font-bold text-dark-gray dark:text-white">
+                                  {addedDate}
                                 </p>
-                                <p className="text-sm text-thin-light-gray font-medium">
-                                  {value.description}
+                                <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
+                                  {value.status_text}
                                 </p>
                               </div>
                             </div>
-                            <div className="px-2 flex flex-col items-center justify-center">
-                              <p className="text-sm font-bold text-dark-gray dark:text-white">
-                                {addedDate}
-                              </p>
-                              <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
-                                {value.status_text}
-                              </p>
-                            </div>
-                          </div>
-                        </td>
-                        <td className="text-right py-4 px-2">
-                          <button
-                            onClick={() => openPopUp(value)}
-                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                          >
-                            View
-                          </button>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-              <PaginatedList
-                onClick={handlePagination}
-                prev={currentPage === 0}
-                next={currentPage + itemsPerPage >= filteredFamilyData?.length}
-                data={filteredFamilyData}
-                start={indexOfFirstItem}
-                stop={indexOfLastItem}
-              />
-            </div>
-          )}
-        </>
-      )}
-      {popUp.show && (
-        <SuggestTask
-          details={popUp.data}
-          onClose={closePopUp}
-          continuePopupData={openContinueTaskPopup}
-          situation={popUp.show}
-        />
-      )}
+                          </td>
+                          <td className="text-right py-4 px-2">
+                            <button
+                              onClick={() => openPopUp(value)}
+                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            >
+                              View
+                            </button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+                <PaginatedList
+                  onClick={handlePagination}
+                  prev={currentPage === 0}
+                  next={
+                    currentPage + itemsPerPage >= filteredFamilyData?.length
+                  }
+                  data={filteredFamilyData}
+                  start={indexOfFirstItem}
+                  stop={indexOfLastItem}
+                />
+              </div>
+            )}
+          </>
+        )}
+        {popUp.show && (
+          <SuggestTask
+            details={popUp.data}
+            onClose={closePopUp}
+            continuePopupData={openContinueTaskPopup}
+            situation={popUp.show}
+          />
+        )}
 
-      {continueTaskPopup.show && (
-        <AssignTaskPopout
-          details={continueTaskPopup.data}
-          action={closeContinueTaskPopup}
-          situation={continueTaskPopup.show}
-        />
-      )}
-    </div>
-  );
-});
+        {continueTaskPopup.show && (
+          <AssignTaskPopout
+            details={continueTaskPopup.data}
+            action={closeContinueTaskPopup}
+            situation={continueTaskPopup.show}
+          />
+        )}
+      </div>
+    );
+  }
+);
 
 export default FamilyWaitlist;

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -63,7 +63,7 @@ export default function InputCom({
               </span>
             )}
             {/* displays error is any */}
-            {error && <span className="text-[12px] text-red-500">{error}</span>} 
+            {error && <span className="text-[12px] text-red-500 italic">{error}</span>} 
           </label>
         )}
         {forgotPassword && (
@@ -97,7 +97,7 @@ export default function InputCom({
           dir={direction}
         />
         {iconName && (
-          <div className="absolute right-6 bottom-[10px] z-10 flex gap-2">
+          <div className="absolute right-6 bottom-3 z-10 flex gap-2">
             {iconName.split(" ").map((item, index) => (
               <Icons key={index} name={item} />
             ))}
@@ -105,7 +105,7 @@ export default function InputCom({
         )}
         {passIcon && (
           <div
-            className="absolute right-6 bottom-[10px] z-10"
+            className="absolute right-6 bottom-3 z-10"
             onClick={onClick}
           >
             <Icons name={passIcon} />

src/components/MyWallet/AddFundDollars.jsx

@@ -2,45 +2,46 @@ import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import usersService from "../../services/UsersService";
 import InputCom from "../Helpers/Inputs/InputCom";
-import { handlePagingFunc } from "../Pagination/HandlePagination";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 import { Form, Formik } from "formik";
+import { useSelector } from "react-redux";
 import * as Yup from "yup";
+import Icons from "../Helpers/Icons";
 
 const validationSchema = Yup.object().shape({
   name: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(50, "Maximum 50 characters")
-    .required("Name is required"),
+    .min(3, "3 chars min.")
+    .max(50, "50 chars max.")
+    .required("required"),
   cardNum: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("Card Number is required"),
+    .min(3, "3 chars min.")
+    .max(25, "25 chars max.")
+    .required("required"),
   code: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("Postal Code is required"),
+    .min(3, "3 chars min.")
+    .max(25, "25 chars max.")
+    .required("required"),
   state: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("State is required"),
+    .min(3, "3 chars min.")
+    .max(25, "25 chars max.")
+    .required("required"),
   address: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(50, "Maximum 50 characters")
-    .required("Address is required"),
+    .min(3, "3 chars min.")
+    .max(50, "50 chars max.")
+    .required("required"),
   expirationYear: Yup.string()
-    .min(4, "Minimum 4 characters")
-    .max(4, "Maximum 4 characters")
-    .required("Expiration Year is required"),
+    .min(4, "4 chars min.")
+    .max(4, "4 chars max.")
+    .required("required"),
   expirationMonth: Yup.string()
-    .min(1, "Minimum 1 characters")
-    .max(2, "Maximum 2 characters")
-    .required("Expiration Month is required"),
+    .min(1, "1 chars min.")
+    .max(2, "2 chars max.")
+    .required("required"),
   cvv: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(4, "Maximum 4 characters")
-    .required("CVV Year is required"),
+    .min(3, "3 chars min.")
+    .max(4, "4 chars max.")
+    .required("required"),
 });
 
 const initialValues = {
@@ -56,127 +57,154 @@ const initialValues = {
 
 function AddFundDollars(props) {
   const navigate = useNavigate();
-  let apiCall = new usersService();
+  const apiCall = new usersService();
 
-  let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
+  const [tab, setTab] = useState("previous");
+  const [loader, setLoader] = useState(false);
+  const { userDetails } = useSelector((state) => state?.userDetails);
+  const { firstname, lastname } = userDetails;
+  const [prevCardDetails, setPrevCardDetails] = useState({});
+  const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
 
-  let [prevCardDetails, setPrevCardDetails] = useState(null); // STATE TO HOLD PREVIOUS CARD SELECTED
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    setPrevCardDetails((prevState) => ({
+      ...prevState,
+      [name]: value,
+    }));
+  };
 
-  let [payListCard, setPayListCard] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS
-
-  const [currentPage, setCurrentPage] = useState(0);
-  const indexOfFirstItem = Number(currentPage);
+  const indexOfFirstItem = 0;
   const indexOfLastItem =
-    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentPreviousCards = payListCard?.data?.slice(
+    indexOfFirstItem + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentPreviousCards = payListCards?.data?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
 
-  const handlePagination = (e) => {
-    handlePagingFunc(e, setCurrentPage);
-  };
-
-  // FUNCTION TO SUBMIT
   const handleSubmit = (values, helpers) => {
     props.setInputError("");
-    if (!props.input || props.input == "0") {
+    if (!props.input || props.input === "0") {
       props.setInputError("Please Enter Amount");
-      return setTimeout(() => {
-        props.setInputError("");
-      }, 5000);
+      return;
     }
 
     if (isNaN(props.input)) {
       props.setInputError("Amount must be a Number");
-      return setTimeout(() => {
-        props.setInputError("");
-      }, 5000);
+      return;
     }
-    if (tab == "previous") {
-      const stateData = { amount: Number(props.input), currency: "dollars" };
-      navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
-    }
-    if (tab == "new") {
+
+    if (tab === "previous") {
+      if (!prevCardDetails) {
+        return;
+      }
+      setLoader(true);
       const stateData = {
         amount: Number(props.input),
-        currency: "dollars",
+        currency: props.currency,
+        card: prevCardDetails["payment-card"],
+      };
+
+      return setTimeout(() => {
+        props.setConfirmCredit({ show: true, data: stateData });
+        setLoader(false);
+      }, 1500);
+    }
+
+    if (tab === "new") {
+      const stateData = {
+        amount: Number(props.input),
+        currency: props.currency,
         ...values,
       };
-      navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
     }
-    props.setInput("");
   };
 
   useEffect(() => {
     apiCall
       .payListCard()
       .then((res) => {
-        setPayListCard({ loading: false, data: res.data.result_list });
+        setPayListCards({ loading: false, data: res.data.result_list });
       })
       .catch((err) => {
         console.log("PAYCARDLIST ERROR", err);
-        setPayListCard({ loading: false, data: [] });
+        setPayListCards({ loading: false, data: [] });
       });
   }, []);
 
+  console.log(props)
+
+  const handleClose = props.onClose
+
   return (
     <>
       <div className="w-full">
         {/* switch button */}
-        <div className="my-1 flex items-center gap-2">
-          <label
-            onClick={() => setTab("previous")}
-            htmlFor="previous"
-            className="cursor-pointer flex items-center gap-1"
-          >
-            <input
-              type="radio"
-              id="previous"
-              name="card-option"
-              checked={tab === "previous"}
-              className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
-                tab == "previous" ? "" : ""
-              } tracking-wide transition duration-200`}
-            />
-            Previous Cards
-          </label>
-          <label
-            onClick={() => setTab("new")}
-            htmlFor="new"
-            className="cursor-pointer flex items-center gap-1"
-          >
-            <input
-              id="new"
-              type="radio"
-              name="card-option"
-              checked={tab === "new"}
-              className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
-                tab == "new" ? "" : ""
-              }  tracking-wide transition duration-200`}
-            />
-            Add New Card
-          </label>
+        <div className="flex">
+          <form className="add-fund-info flex items-center gap-3">
+            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+              {props.currency == "US Dollars" && "Payment Method"}
+            </h1>
+            <div className="my-1 flex items-center gap-2">
+              <label
+                onClick={() => setTab("previous")}
+                htmlFor="previous"
+                className="cursor-pointer flex items-center gap-1"
+              >
+                <input
+                  type="radio"
+                  id="previous"
+                  name="card-option"
+                  checked={tab === "previous"}
+                  className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
+                    tab == "previous" ? "" : ""
+                  } tracking-wide transition duration-200`}
+                />
+                Previous Cards
+              </label>
+              <label
+                onClick={() => setTab("new")}
+                htmlFor="new"
+                className="cursor-pointer flex items-center gap-1"
+              >
+                <input
+                  id="new"
+                  type="radio"
+                  name="card-option"
+                  checked={tab === "new"}
+                  className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
+                    tab == "new" ? "" : ""
+                  }  tracking-wide transition duration-200`}
+                />
+                Add New Card
+              </label>
+            </div>
+          </form>
         </div>
+        <hr />
         {/* END OF switch button */}
 
         {/* previous tab */}
-        {tab == "previous" ? (
-          <div className="p-4 previous-details w-full min-h-[177px] flex flex-col justify-between items-center">
-            {payListCard.loading ? (
+        {tab === "previous" ? (
+          <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
+            {payListCards.loading ? (
               <LoadingSpinner size="10" color="sky-blue" />
-            ) : payListCard?.data?.length ? (
-              <select className="my-3 w-full rounded-full p-4 outline-none border-none">
+            ) : payListCards?.data?.length ? (
+              <select
+                className="my-3 w-full rounded-full p-2 outline-none text-base text-black dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border"
+                value={prevCardDetails["payment-card"]?.card_uid}
+                id="payment-card"
+                name="payment-card"
+                onChange={handleInputChange}
+              >
                 <option value="">Select a card</option>
                 {currentPreviousCards.map((item, index) => (
-                  <option key={index} className={index != 0 && "border-t-2"}>
+                  <option
+                    key={index}
+                    className={index !== 0 && "border-t-2"}
+                    value={JSON.stringify(item)}
+                  >
                     <div className="my-2 flex items-center gap-5">
-                      {/* <input
-                            type="radio"
-                            className="w-8 h-8"
-                            name="card"
-                            value="value"
-                          /> */}
                       <div className="card-details">
                         <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
                           {item.description} Card
@@ -184,25 +212,8 @@ function AddFundDollars(props) {
                         <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
                           Bank **************{item.digits}
                         </p>
-                        {/* <div className="w-full sm:flex items-center gap-5">
-                          <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
-                            {item.added}
-                          </p>
-                          <p className="text-sm font-bold text-green-700 dark:text-white tracking-wide">
-                            Verified
-                          </p>
-                        </div> */}
                       </div>
                     </div>
-                    {/* <td>
-                        <button
-                          // onClick={handleSubmit}
-                          type="button"
-                          className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                        >
-                          <span className="text-white">Manage</span>
-                        </button>
-                      </td> */}
                   </option>
                 ))}
               </select>
@@ -220,26 +231,9 @@ function AddFundDollars(props) {
                 </button>
               </div>
             )}
-            {/* PAGINATION BUTTON */}
-            {/* <div className="w-full">
-              <PaginatedList
-                onClick={handlePagination}
-                prev={currentPage == 0 ? true : false}
-                next={
-                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                  payListCard?.data?.length
-                    ? true
-                    : false
-                }
-                data={payListCard?.data}
-                start={indexOfFirstItem}
-                stop={indexOfLastItem}
-              />
-            </div> */}
-            {/* END OF PAGINATION BUTTON */}
           </div>
         ) : (
-          <div className="new-details w-full max-h-[19.063rem] overflow-y-scroll">
+          <div className="new-details w-full max-h-[23rem]">
             <div className="w-full flex flex-col justify-between">
               <Formik
                 initialValues={initialValues}
@@ -248,142 +242,135 @@ function AddFundDollars(props) {
               >
                 {(props) => {
                   return (
-                    <Form>
+                    <Form className="md:pl-8">
                       <div className="flex flex-col-reverse sm:flex-row">
                         <div className="flex-1 sm:mr-10">
                           <div className="fields w-full">
-                            {/* inputs starts here */}
+                            {/* Inputs */}
                             {/* Name */}
-                            <div className="field w-full my-6">
-                              <InputCom
-                                fieldClass="px-6"
-                                spanTag="*"
-                                label="Name on Card"
-                                type="text"
-                                name="name"
-                                placeholder="DUMMY NAME"
-                                value={props.values.name}
-                                inputHandler={props.handleChange}
-                                blurHandler={props.handleBlur}
-                              />
-                              {props.errors.name && props.touched.name && (
-                                <p className="text-sm text-red-500">
-                                  {props.errors.name}
-                                </p>
-                              )}
+                            <div className="flex items-center field w-full my-2 flex-[0.4] 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:
+                              </label>
+                              <p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
                             </div>
 
-                            {/* CARD NUMBER */}
-                            <div className="field w-full mb-6">
-                              <InputCom
-                                fieldClass="px-6"
-                                spanTag="*"
-                                iconName="master-card visa-card atm-card"
-                                label="Card Number"
-                                type="text"
-                                name="cardNum"
-                                placeholder="Enter Card Number"
-                                value={props.values.cardNum}
-                                inputHandler={props.handleChange}
-                                blurHandler={props.handleBlur}
-                              />
-                              {props.errors.cardNum &&
-                                props.touched.cardNum && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.cardNum}
-                                  </p>
-                                )}
+                            <div className="flex items-center flex-1 gap-3 my-2">
+                              {/* Card Number */}
+                              <div className="field w-full flex-[0.6]">
+                                <InputCom
+                                  fieldClass="px-6"
+                                  spanTag="*"
+                                  iconName="master-card visa-card atm-card"
+                                  label="Card Number"
+                                  type="text"
+                                  name="cardNum"
+                                  placeholder="Enter Card Number"
+                                  value={props.values.cardNum}
+                                  inputHandler={props.handleChange}
+                                  blurHandler={props.handleBlur}
+                                  error={props.errors.cardNum}
+                                />
+                              </div>
+                              {/* Expire Year, Year */}
+                              <div className="sm:grid gap-5 grid-cols-2 flex-[0.4]">
+                                <div className="field w-full mb-6 xl:mb-0 col-span-1">
+                                  <div className="select-option">
+                                    <div
+                                      className={`flex items-center justify-between mb-2.5`}
+                                    >
+                                      <label
+                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
+                                        htmlFor="expiration"
+                                      >
+                                        Exp Month{" "}
+                                        <span className="text-red-700 text-sm italic">
+                                          *
+                                        </span>
+                                        <span className="text-[12px] text-red-500 ml-1">
+                                          {props.errors.expirationMonth && "**"}
+                                        </span>
+                                      </label>
+                                    </div>
+                                    <div
+                                      className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
+                                    >
+                                      <select
+                                        className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
+                                        value={props.values.expirationMonth}
+                                        onChange={props.handleChange}
+                                        onBlur={props.handleBlur}
+                                        name="expirationMonth"
+                                      >
+                                        <option
+                                          value=""
+                                          className="text-dark-gray"
+                                        >
+                                          Month
+                                        </option>
+                                        {expireMonth?.length &&
+                                          expireMonth.map((item, index) => (
+                                            <option
+                                              key={index}
+                                              value={item.value}
+                                            >
+                                              {item.name}
+                                            </option>
+                                          ))}
+                                      </select>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div className="field w-full mb-6 xl:mb-0 col-span-1">
+                                  <div className="select-option">
+                                    <div
+                                      className={`flex items-center justify-between mb-2.5`}
+                                    >
+                                      <label
+                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center line-clamp-3"
+                                        htmlFor="expiration"
+                                      >
+                                        Exp Year{" "}
+                                        <span className="text-red-700 text-sm tracking-wide">
+                                          *
+                                        </span>
+                                        <span className="text-[12px] text-red-500 italic">
+                                          {props.errors.expirationYear && "**"}
+                                        </span>
+                                      </label>
+                                    </div>
+                                    <div
+                                      className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
+                                    >
+                                      <select
+                                        className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
+                                        value={props.values.expirationYear}
+                                        onChange={props.handleChange}
+                                        onBlur={props.handleBlur}
+                                        name="expirationYear"
+                                      >
+                                        <option
+                                          value=""
+                                          className="text-dark-gray"
+                                        >
+                                          Year
+                                        </option>
+                                        {expireYear?.length &&
+                                          expireYear.map((item, index) => (
+                                            <option key={index} value={item}>
+                                              {item}
+                                            </option>
+                                          ))}
+                                      </select>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
                             </div>
-                            {/* EXPIRE YEAR, YEAR AND CVV */}
-                            <div className="sm:grid gap-5 grid-cols-3 mb-6">
-                              <div className="field w-full mb-6 xl:mb-0 col-span-1">
-                                <div className="select-option">
-                                  <div
-                                    className={`flex items-center justify-between mb-2.5`}
-                                  >
-                                    <label
-                                      className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
-                                      htmlFor="expiration"
-                                    >
-                                      Expiration Month{" "}
-                                      <span className="text-red-700 text-sm tracking-wide">
-                                        *
-                                      </span>
-                                    </label>
-                                  </div>
-                                  <div
-                                    className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
-                                  >
-                                    <select
-                                      className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
-                                      value={props.values.expirationMonth}
-                                      onChange={props.handleChange}
-                                      onBlur={props.handleBlur}
-                                      name="expirationMonth"
-                                    >
-                                      <option value="">Select...</option>
-                                      {expireMonth?.length &&
-                                        expireMonth.map((item, index) => (
-                                          <option
-                                            key={index}
-                                            value={item.value}
-                                          >
-                                            {item.name}
-                                          </option>
-                                        ))}
-                                    </select>
-                                  </div>
-                                </div>
-                                {props.errors.expirationMonth &&
-                                  props.touched.expirationMonth && (
-                                    <p className="text-sm text-red-500">
-                                      {props.errors.expirationMonth}
-                                    </p>
-                                  )}
-                              </div>
-                              <div className="field w-full mb-6 xl:mb-0 col-span-1">
-                                <div className="select-option">
-                                  <div
-                                    className={`flex items-center justify-between mb-2.5`}
-                                  >
-                                    <label
-                                      className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
-                                      htmlFor="expiration"
-                                    >
-                                      Expiration Year{" "}
-                                      <span className="text-red-700 text-sm tracking-wide">
-                                        *
-                                      </span>
-                                    </label>
-                                  </div>
-                                  <div
-                                    className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
-                                  >
-                                    <select
-                                      className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
-                                      value={props.values.expirationYear}
-                                      onChange={props.handleChange}
-                                      onBlur={props.handleBlur}
-                                      name="expirationYear"
-                                    >
-                                      <option value="">Select...</option>
-                                      {expireYear?.length &&
-                                        expireYear.map((item, index) => (
-                                          <option key={index} value={item}>
-                                            {item}
-                                          </option>
-                                        ))}
-                                    </select>
-                                  </div>
-                                </div>
-                                {props.errors.expirationYear &&
-                                  props.touched.expirationYear && (
-                                    <p className="text-sm text-red-500">
-                                      {props.errors.expirationYear}
-                                    </p>
-                                  )}
-                              </div>
-                              <div className="field w-full col-span-1">
+
+                            <div className="flex items-center flex-1 gap-3 my-2">
+                              {/* Address and CVV */}
+                              <div className="field w-full col-span-1 flex-[0.4]">
                                 <InputCom
                                   fieldClass="px-6"
                                   spanTag="*"
@@ -395,36 +382,27 @@ function AddFundDollars(props) {
                                   value={props.values.cvv}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.cvv}
+                                />
+                              </div>
+                              <div className="field w-full flex-[0.6]">
+                                <InputCom
+                                  fieldClass="px-6"
+                                  spanTag="*"
+                                  label="Billing Address"
+                                  type="text"
+                                  name="address"
+                                  placeholder="Billing Address"
+                                  value={props.values.Address}
+                                  inputHandler={props.handleChange}
+                                  blurHandler={props.handleBlur}
+                                  error={props.errors.address}
                                 />
-                                {props.errors.cvv && props.touched.cvv && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.cvv}
-                                  </p>
-                                )}
                               </div>
                             </div>
-                            {/* Address */}
-                            <div className="field w-full my-6">
-                              <InputCom
-                                fieldClass="px-6"
-                                spanTag="*"
-                                label="Billing Address"
-                                type="text"
-                                name="address"
-                                placeholder="Billing Address"
-                                value={props.values.Address}
-                                inputHandler={props.handleChange}
-                                blurHandler={props.handleBlur}
-                              />
-                              {props.errors.address &&
-                                props.touched.address && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.address}
-                                  </p>
-                                )}
-                            </div>
-                            {/* postal code and state */}
-                            <div className="sm:grid gap-5 grid-cols-3 mb-6">
+
+                            {/* Postal Code and State */}
+                            <div className="sm:grid gap-5 grid-cols-3 my-2">
                               <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                 <InputCom
                                   fieldClass="px-6"
@@ -436,12 +414,8 @@ function AddFundDollars(props) {
                                   value={props.values.code}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.code}
                                 />
-                                {props.errors.code && props.touched.code && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.code}
-                                  </p>
-                                )}
                               </div>
                               <div className="field w-full col-span-1">
                                 <InputCom
@@ -454,59 +428,33 @@ function AddFundDollars(props) {
                                   value={props.values.state}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.state}
                                 />
-                                {props.errors.state && props.touched.state && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.state}
-                                  </p>
-                                )}
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
 
-                      {/* <div className="w-full">
-                                {requestStatus.message != "" && (
-                                <p
-                                    className={`text-center text-base ${
-                                    requestStatus.status ? "text-green-800" : "text-red-600"
-                                    }`}
-                                >
-                                    {requestStatus.message}
-                                </p>
-                                )}
-                                <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                                <div className="flex items-center space-x-4 mr-9">
-                                    <Link
-                                    to="/"
-                                    className="text-18 text-light-red tracking-wide "
-                                    >
-                                    <span className="border-b dark:border-[#5356fb29]  border-light-red">
-                                        {" "}
-                                        Cancel
-                                    </span>
-                                    </Link>
-
-                                    {requestStatus.loading ? (
-                                    <LoadingSpinner size="8" color="sky-blue" />
-                                    ) : (
-                                    <button
-                                        type="submit"
-                                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                    >
-                                        Update Profile
-                                    </button>
-                                    )}
-                                </div>
-                                </div>
-                            </div> */}
-                      <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
+                      <div className="md:px-8 md:pt-4 px-4 pt-2 add-fund-btn flex justify-end items-center gap-3">
+                        <button
+                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+                          onClick={handleClose}
+                        >
+                          Cancel
+                        </button>
                         <button
                           type="submit"
-                          className="py-1 px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
                         >
-                          <span className="text-white">Continue</span>
+                          {loader ? (
+                            <LoadingSpinner size="6" color="sky-blue" />
+                          ) : (
+                            <>
+                              <span className="text-white">Continue</span>{" "}
+                              <Icons name="chevron-right" />
+                            </>
+                          )}
                         </button>
                       </div>
                     </Form>
@@ -518,13 +466,23 @@ function AddFundDollars(props) {
         )}
       </div>
       {tab == "previous" && (
-        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center py-4">
+        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center gap-4 py-4">
+          <button
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+            onClick={props.onClose}
+          >
+            Cancel
+          </button>
           <button
             onClick={handleSubmit}
             type="button"
-            className="px-4 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
           >
-            <span className="text-white">Continue</span>
+            {loader ? (
+              <LoadingSpinner size="6" color="sky-blue" />
+            ) : (
+              <span className="text-white">Continue</span>
+            )}
           </button>
         </div>
       )}

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,58 +36,71 @@ function AddFundPop({ _payment }) {
       }, 5000);
     }
 
-    const stateData = { amount: Number(input), currency: "naira" };
-    navigate("confirm-add-fund", { state: stateData });
+    const stateData = {
+      amount: Number(input),
+      currency: currency,
+    };
 
-    setInput("");
+    return setTimeout(
+      () =>
+        setConfirmCredit({
+          show: true,
+          data: stateData,
+        }),
+      1500
+    );
   };
 
-  console.log("walletItem details >>", payment, currency);
-
   return (
-    <div className="h-[36rem] w-full">
+    <div className="h-[33rem] w-full">
       <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
         <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
           <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'>Add Credit with Account Deposit</h2>*/}
             {/*<hr />*/}
-            <form className="md:p-8 p-4 add-fund-info">
-              <div className="field w-full">
+            <form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
+              <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                Amount({currency})
+              </h1>
+              <div className="field w-full max-w-[250px]">
                 <InputCom
                   fieldClass="px-6"
-                  label={
-                    currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
-                  }
                   type="text"
                   name="amount"
                   placeholder="0"
                   value={input}
                   inputHandler={handleChange}
                 />
-                {inputError && (
-                  <p className="text-base text-red-500">{inputError}</p>
-                )}
+                <p className="text-base text-red-500 h-5">
+                  {inputError && inputError}
+                </p>
               </div>
             </form>
-            <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
-              {currency == "US Dollars" && "Payment Method"}
-            </h1>
-            <hr />
 
             {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
             {currency == "US Dollars" && (
-              <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl">
+              <div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
                 <AddFundDollars
                   setInputError={setInputError}
                   input={input}
                   setInput={setInput}
+                  currency={currency}
+                  onClose={onClose}
+                  setConfirmCredit={setConfirmCredit}
                 />
               </div>
             )}
 
+            {currency != "US Dollars" && <div className="h-[18rem]"></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"
@@ -103,7 +113,6 @@ function AddFundPop({ _payment }) {
           </div>
         </div>
       </div>
-
       {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
       {currency != "US Dollars" &&
         // <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">

src/components/MyWallet/ConfirmAddFund.jsx

@@ -1,16 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
-import { useLocation, useNavigate } from "react-router-dom";
+import { 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 usersService from "../../services/UsersService";
 
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 
-function ConfirmAddFund({ payment }) {
+function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
 
   let [pageLoading, setPageLoading] = useState(true);
@@ -24,12 +22,10 @@ function ConfirmAddFund({ payment }) {
   const apiURL = new usersService();
   const navigate = useNavigate();
 
-  let { state } = useLocation();
-
   //FUNCTION TO HANDLE SUBMIT
   const onSuccessPayment = () => {
     setRequestStatus({ message: "", loading: true, status: false });
-    let reqData = { amount: state?.account, currency: "NGN" };
+    let reqData = { amount: confirmCredit?.data?.account, currency: "NGN" };
     apiURL
       .startTopUp(reqData)
       .then((res) => {
@@ -66,7 +62,7 @@ function ConfirmAddFund({ payment }) {
   const config = {
     public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
     tx_ref: Date.now(),
-    amount: state?.amount,
+    amount: confirmCredit?.data?.amount,
     currency: "NGN",
     payment_options: "card,mobilemoney,ussd",
     customer: {
@@ -91,73 +87,118 @@ function ConfirmAddFund({ payment }) {
     onClose: () => {},
   };
 
-  useEffect(() => {
-    // what happens if not state redirect user
-    if (!state) {
-      navigate("/my-wallet/add-fund", { replace: true });
-    } else {
-      setPageLoading(false);
-    }
-  }, []);
+  // useEffect(() => {
+  //   // what happens if not data redirect user
+  //   if (!data) {
+  //     navigate("/my-wallet/add-fund", { replace: true });
+  //   } else {
+  //     setPageLoading(false);
+  //   }
+  // }, []);
+
+  const __confirmCard = confirmCredit?.data.card
+    ? JSON.parse(confirmCredit?.data.card)
+    : "";
+
+  const ThePaymentText = ({ value }) => (
+    <div className="my-2 flex items-center gap-5">
+      <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>
+        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
+          Bank **************{value.digits}
+        </p>
+      </div>
+    </div>
+  );
 
   return (
-    <div className="content-wrapper w-full">
-      {pageLoading ? (
-        <LoadingSpinner size="8" color="sky-blue" />
-      ) : (
-        <div className="w-full mb-10">
-          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
-            <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+    <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">
               Confirm Add Fund To Account
             </h2>
-            <hr />
-            <div className="px-4 md:px-8 py-4 add-fund-info">
-              <div className="field w-full mb-3">
+            <hr /> */}
+          <div className="px-4 md:p-8 py-4 add-fund-info">
+            <div className="field w-full mb-3 min-h-[45px]">
+              {confirmCredit?.show ? (
+                <div className="flex flex-col gap-4">
+                  <div className="flex items-center gap-4">
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Amount({confirmCredit?.data?.currency})
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {`${walletItem?.symbol} ${
+                        Number(confirmCredit?.data?.amount).toLocaleString() ||
+                        ""
+                      }`}
+                    </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="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 ">
+                      {__confirmCard ? (
+                        <ThePaymentText value={__confirmCard} />
+                      ) : null}
+                    </span>
+                  </div>
+                </div>
+              ) : (
                 <InputCom
                   fieldClass="px-6"
-                  label={state.currency == 'naira' ? "Amount (Naira):" : "Amount (Dollars):"}
+                  label={` Amount${confirmCredit?.data?.currency}`}
                   type="text"
                   name="amount"
-                  value={state.amount || ""}
+                  value={confirmCredit?.data?.amount || ""}
                   disable={true}
                 />
-              </div>
-            </div>
-
-            <hr />
-            <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
-              {
-                state.currency == 'naira' ?
-                <FlutterWaveButton
-                  {...fwConfig}
-                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                />
-              :
-              <button 
-                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                onClick={()=>console.log('WORKING')}
-              >
-                Continue
-              </button>
-              }
+              )}
             </div>
           </div>
-        </div>
-      )}
+          {/* <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
+            {confirmCredit?.data?.currency && "Payment Method"}
+          </h1> */}
+          {/* <hr /> */}
+          <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"
+              onClick={onClose}
+            >
+              Cancel
+            </button>
 
-      <div className="w-full mb-10">
-        <div className="wallet w-full  md:p-8 p-4 h-full min-h-[600px] bg-white dark:bg-dark-white rounded-2xl shadow">
+            {confirmCredit?.data?.currency == "Naira" && (
+              <FlutterWaveButton
+                {...fwConfig}
+                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+              />
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* <div className="w-full mb-10">
+        <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white 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> */}
+          <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> */}
     </div>
   );
 }

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -1,15 +1,11 @@
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
-// import ModalCom from "../Helpers/ModalCom";
-import { Form, Formik } from "formik";
-import InputCom from "../../Helpers/Inputs/InputCom";
 import usersService from "../../../services/UsersService";
-import Icons from "../../Helpers/Icons";
-import AddFund from "../AddFund";
 import ModalCom from "../../Helpers/ModalCom";
 import AddFundPop from "../AddFundPop";
+import ConfirmAddFund from "../ConfirmAddFund";
 
-const CreditPopup = ({ details, onClose, situation }) => {
+const CreditPopup = ({ details, onClose, situation, walletItem }) => {
   const { pathname, state } = useLocation();
   const [submitTask, setSubmitTask] = useState({
     loading: false,
@@ -17,6 +13,24 @@ const CreditPopup = ({ details, onClose, situation }) => {
     state: "",
   });
   const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
+  let [input, setInput] = useState("");
+  const [confirmCredit, setConfirmCredit] = useState({
+    show: false,
+    data: {},
+  });
+
+  // const openConfirmCredit = (value) => {
+  //   setConfirmCredit({ show: true, data: { ...value } });
+  // };
+
+  // const closeConfirmCredit = () => {
+  //   setConfirmCredit({ show: false, data: {} });
+  // };
+  // const handleConfirmCredit = useMemo((input) => {
+  //   if (input) {
+  //     setConfirmCredit(true);
+  //   } else setConfirmCredit(false);
+  // }, []);
 
   const switchNextStep = ({ target: value }) => {
     setSuggestedNextStep(value);
@@ -42,7 +56,7 @@ const CreditPopup = ({ details, onClose, situation }) => {
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            Add Credit
+            {!confirmCredit.show ? "Add Credit" : "Confirm Credit Add"}
           </h1>
           <button
             type="button"
@@ -71,7 +85,22 @@ const CreditPopup = ({ details, onClose, situation }) => {
           </button>
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center">
-          <AddFundPop _payment={details} />
+          {confirmCredit.show ? (
+            <ConfirmAddFund
+              confirmCredit={confirmCredit}
+              walletItem={walletItem}
+              onClose={onClose}
+            />
+          ) : (
+            <AddFundPop
+              _payment={details}
+              input={input}
+              setInput={setInput}
+              onClose={onClose}
+              confirmCredit={confirmCredit}
+              setConfirmCredit={setConfirmCredit}
+            />
+          )}
         </div>
       </div>
     </ModalCom>

src/components/MyWallet/Wallet.jsx

@@ -119,7 +119,7 @@ const WalletRoutes = () => {
           </Suspense>
         }
       >
-        <Route
+        {/* <Route
           path="add-fund"
           element={
             <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
@@ -134,7 +134,7 @@ const WalletRoutes = () => {
               <ConfirmAddFund payment={paymentHistory} />
             </Suspense>
           }
-        />
+        /> */}
         <Route
           path="transfer-fund"
           element={

src/components/MyWallet/WalletAction.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+
+function WalletAction({walletItem, payment, openPopUp}) {
+  return (
+    <div className="counters flex justify-between gap-2">
+        <div className='w-1/2 flex justify-center items-center'>
+        <Link
+            to="transfer-fund"
+            className={`${
+            walletItem.code != "NAIRA" && "invisible"
+            } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+        >
+            Spend
+        </Link>
+        </div>
+        <div className='w-1/2 flex justify-center items-center'>
+        <button
+            className='px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white'
+            onClick={() => {
+            openPopUp({
+                payment: payment,
+                currency: walletItem?.description,
+            });
+            }}
+        >
+            {/* <span className="">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="38"
+                height="38"
+                viewBox="0 0 42 42"
+                fill="none"
+            >
+                <path
+                d="M21 0C16.8466 0 12.7865 1.23163 9.33303 3.53914C5.8796 5.84665 3.18798 9.1264 1.59854 12.9636C0.00909901 16.8009 -0.406771 21.0233 0.403518 25.0969C1.21381 29.1705 3.21386 32.9123 6.15077 35.8492C9.08767 38.7861 12.8295 40.7862 16.9031 41.5965C20.9767 42.4068 25.1991 41.9909 29.0364 40.4015C32.8736 38.812 36.1534 36.1204 38.4609 32.667C40.7684 29.2135 42 25.1534 42 21C41.994 15.4323 39.7796 10.0944 35.8426 6.15741C31.9056 2.22045 26.5677 0.00602189 21 0ZM28 22.75H22.75V28C22.75 28.4641 22.5656 28.9092 22.2374 29.2374C21.9093 29.5656 21.4641 29.75 21 29.75C20.5359 29.75 20.0908 29.5656 19.7626 29.2374C19.4344 28.9092 19.25 28.4641 19.25 28V22.75H14C13.5359 22.75 13.0908 22.5656 12.7626 22.2374C12.4344 21.9092 12.25 21.4641 12.25 21C12.25 20.5359 12.4344 20.0907 12.7626 19.7626C13.0908 19.4344 13.5359 19.25 14 19.25H19.25V14C19.25 13.5359 19.4344 13.0908 19.7626 12.7626C20.0908 12.4344 20.5359 12.25 21 12.25C21.4641 12.25 21.9093 12.4344 22.2374 12.7626C22.5656 13.0908 22.75 13.5359 22.75 14V19.25H28C28.4641 19.25 28.9093 19.4344 29.2374 19.7626C29.5656 20.0907 29.75 20.5359 29.75 21C29.75 21.4641 29.5656 21.9092 29.2374 22.2374C28.9093 22.5656 28.4641 22.75 28 22.75Z"
+                //   fill="white"
+                className="stroke-black fill-white"
+                ></path>
+            </svg>
+            </span> */}
+            <span className="">Add Credit</span>
+        </button>
+        </div>
+    </div>
+  )
+}
+
+export default WalletAction

src/components/MyWallet/WalletBox.jsx

@@ -10,14 +10,14 @@ export default function WalletBox({ wallet, coupon, payment }) {
     <>
       <div className="my-wallet-wrapper w-full mb-10">
         <div className="main-wrapper w-full">
-          <div className="balance-inquery w-full lg:h-[436px] lg:flex lg:space-x-11 mb-11">
+          <div className="balance-inquery w-full flex flex-wrap justify-center gap-2">
             {wallet.loading ? (
               <div className="w-full h-full flex items-center justify-center">
                 <LoadingSpinner size="16" color="sky-blue" />
               </div>
             ) : wallet.data.length ? (
               wallet.data.map((item, index) => (
-                <div className="lg:w-1/2 h-full mb-10 lg:mb-0">
+                <div className="w-[350px] h-full flex justify-center">
                   <WalletItemCard walletItem={item} payment={payment} />
                 </div>
               ))

src/components/MyWallet/WalletHeader.jsx

@@ -1,11 +1,12 @@
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Icons from "../Helpers/Icons";
-import bank1 from "../../assets/images/bank-1.png";
-import bank2 from "../../assets/images/bank-2.png";
-import bank3 from "../../assets/images/bank-3.png";
-import bank4 from "../../assets/images/bank-4.png";
+// import bank1 from "../../assets/images/bank-1.png";
+// import bank2 from "../../assets/images/bank-2.png";
+// import bank3 from "../../assets/images/bank-3.png";
+// import bank4 from "../../assets/images/bank-4.png";
 import Accordion from "../Helpers/Accordion";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function WalletHeader(props) {
   //  debugger;
@@ -41,30 +42,35 @@ export default function WalletHeader(props) {
             <ul>
               {props.myWalletList &&
                 props.myWalletList?.result_list?.length > 0 &&
-                props.myWalletList.result_list.map((value, index) => (
-                  <li
-                    key={index}
-                    className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
-                  >
-                    <div className="sm:flex justify-between items-center">
-                      <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
-                        <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
-                          <img src={bank1} alt="" />
+                props.myWalletList.result_list.map((value, index) => 
+                {
+                  let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
+                  return(
+                    <li
+                      key={index}
+                      className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                    >
+                      <div className="sm:flex justify-between items-center">
+                        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
+                          <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
+                            <img src={localImgLoad(`images/currency/${image}`)} className="w-14 h-14" alt="" />
+                          </div>
+                          <div className="name">
+                            <p className="text-base text-dark-gray dark:text-white font-medium">
+                              {value.description}
+                            </p>
+                          </div>
                         </div>
-                        <div className="name">
-                          <p className="text-base text-dark-gray dark:text-white font-medium">
-                            {value.description}
+                        <div>
+                          <p className="eth text-xl font-bold text-purple">
+                            {PriceFormatter(value.amount * 0.01, value.code)}
                           </p>
                         </div>
                       </div>
-                      <div>
-                        <p className="eth text-xl font-bold text-purple">
-                          {PriceFormatter(value.amount * 0.01, value.code)}
-                        </p>
-                      </div>
-                    </div>
-                  </li>
-                ))}
+                    </li>
+                  )
+                }
+                )}
 
               {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
               {/*    <div className="sm:flex justify-between items-center">*/}

src/components/MyWallet/WalletItemCard.jsx

@@ -4,6 +4,8 @@ import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import CreditPopup from "./Popup/CreditPopup";
+import localImgLoad from "../../lib/localImgLoad";
+import WalletAction from "./WalletAction";
 
 export default function WalletItemCard({ walletItem, payment }) {
   //   const [eth] = useState(90);
@@ -29,102 +31,86 @@ export default function WalletItemCard({ walletItem, payment }) {
 
   console.log("walletItem >>", walletItem, payment);
 
+  let image = walletItem.code ? `${walletItem.code.toLocaleLowerCase()}.svg` : 'default.png' // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
+
   return (
     <>
       <div
-        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col ${
-          accountType ? "justify-start" : "justify-between"
-        } px-8 py-9`}
+        className={`current-balance-widget w-[350px] h-full rounded-2xl overflow-hidden flex flex-col gap-2 px-8 pt-9 pb-20`}
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
       >
-        <div className="wallet flex justify-between">
-          <div className="w-[100px] h-[100px] rounded-full bg-[#485199] flex justify-center items-center">
-            <div>
-              <p className="text-26 font-bold text-white tracking-wide text-center">
-                .
-              </p>
-              <p className="text-lg text-white tracking-wide text-center">
-                {walletItem.code}
-              </p>
-            </div>
+        <div className="wallet xxs:flex justify-between items-start gap-3">
+          <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+            <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
           </div>
-          <div></div>
-        </div>
-        <div className="balance">
-          <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
-            Current Balance
-          </p>
-          <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-            {PriceFormatter(
-              walletItem.amount * 0.01,
-              walletItem.code,
-              undefined,
-              "text-[2rem]"
-            )}
-          </p>
-          <p className="text-lg text-white tracking-wide">
-            HOLDINGS :{" "}
-            <span className="mt-1">
+          <div className="balance mt-2">
+            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+              Current Balance
+            </p>
+            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
               {PriceFormatter(
-                walletItem.escrow * 0.01,
+                walletItem.amount * 0.01,
                 walletItem.code,
                 undefined,
                 "text-[2rem]"
               )}
-            </span>
-            {/*<span className="text-light-green">(11.5%)</span>*/}
-          </p>
-        </div>
-        {!accountType && (
-          <div className="counters flex space-x-16">
-            <div>
-              <Link
-                to="transfer-fund"
-                className={`${
-                  walletItem.action_type != "AC_AD_FD_ONLY" && "invisible"
-                } px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full relative  bg-purple lg:text-xl text-lg font-bold text-white`}
-              >
-                Transfer
-              </Link>
-            </div>
-            <div>
-              <button
-                // state={{ currency: walletItem.description }}
-                className="px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full bg-white lg:text-xl text-lg font-bold text-black group relative transition duration-300 stroke-black fill-white"
-                onClick={() => {
-                  openPopUp({
-                    payment: payment,
-                    currency: walletItem?.description,
-                  });
-                }}
-              >
-                <span className="">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="38"
-                    height="38"
-                    viewBox="0 0 42 42"
-                    fill="none"
-                  >
-                    <path
-                      d="M21 0C16.8466 0 12.7865 1.23163 9.33303 3.53914C5.8796 5.84665 3.18798 9.1264 1.59854 12.9636C0.00909901 16.8009 -0.406771 21.0233 0.403518 25.0969C1.21381 29.1705 3.21386 32.9123 6.15077 35.8492C9.08767 38.7861 12.8295 40.7862 16.9031 41.5965C20.9767 42.4068 25.1991 41.9909 29.0364 40.4015C32.8736 38.812 36.1534 36.1204 38.4609 32.667C40.7684 29.2135 42 25.1534 42 21C41.994 15.4323 39.7796 10.0944 35.8426 6.15741C31.9056 2.22045 26.5677 0.00602189 21 0ZM28 22.75H22.75V28C22.75 28.4641 22.5656 28.9092 22.2374 29.2374C21.9093 29.5656 21.4641 29.75 21 29.75C20.5359 29.75 20.0908 29.5656 19.7626 29.2374C19.4344 28.9092 19.25 28.4641 19.25 28V22.75H14C13.5359 22.75 13.0908 22.5656 12.7626 22.2374C12.4344 21.9092 12.25 21.4641 12.25 21C12.25 20.5359 12.4344 20.0907 12.7626 19.7626C13.0908 19.4344 13.5359 19.25 14 19.25H19.25V14C19.25 13.5359 19.4344 13.0908 19.7626 12.7626C20.0908 12.4344 20.5359 12.25 21 12.25C21.4641 12.25 21.9093 12.4344 22.2374 12.7626C22.5656 13.0908 22.75 13.5359 22.75 14V19.25H28C28.4641 19.25 28.9093 19.4344 29.2374 19.7626C29.5656 20.0907 29.75 20.5359 29.75 21C29.75 21.4641 29.5656 21.9092 29.2374 22.2374C28.9093 22.5656 28.4641 22.75 28 22.75Z"
-                      //   fill="white"
-                      className="stroke-black fill-white"
-                    ></path>
-                  </svg>
-                </span>
-                <span className="">Add Credit</span>
-                <span className="absolute inset-0 w-full h-full transition-all duration-300 ease-out bg-gray-300 group-hover:bg-gray-400 opacity-0"></span>
-              </button>
-            </div>
+            </p>
+            <p className="xxs:-ml-5 mt-10 mb-5 text-lg text-white tracking-wide flex justify-start items-center gap-2">
+              HOLDINGS :{" "}
+              <span className="mt-1">
+                {PriceFormatter(
+                  walletItem.escrow * 0.01,
+                  walletItem.code,
+                  undefined,
+                  "text-[2rem]"
+                )}
+              </span>
+            </p>
           </div>
-        )}
+        </div>
+        {/* <div className="flex justify-center items-center">
+          <div className="balance">
+            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+              Current Balance
+            </p>
+            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+              {PriceFormatter(
+                walletItem.amount * 0.01,
+                walletItem.code,
+                undefined,
+                "text-[2rem]"
+              )}
+            </p>
+            <p className="text-lg text-white tracking-wide">
+              HOLDINGS :{" "}
+              <span className="mt-1">
+                {PriceFormatter(
+                  walletItem.escrow * 0.01,
+                  walletItem.code,
+                  undefined,
+                  "text-[2rem]"
+                )}
+              </span>
+            </p>
+          </div>
+        </div> */}
+
+        {/* for white underline */}
+        <div className="my-2 w-full h-[1px] bg-white"></div> 
+
+        {!accountType ? (
+          <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
+        )
+        :
+        null
+      }
       </div>
       {creditPopup.show && (
         <CreditPopup
           details={creditPopup.data}
+          walletItem={walletItem}
           onClose={closePopUp}
           situation={openPopUp}
         />

tailwind.config.js

@@ -20,6 +20,9 @@ module.exports = {
         'sky-blue': '#3a8fc3',
         'alice-blue': '#f0f8ff'
       },
+      screens:{
+        xxs: '400px'
+      }
     },
   },
   plugins: [require("@tailwindcss/line-clamp")],