wallet dropdown icons added

.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="#4687ba" 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="#4687ba" 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="#000" 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="#4687ba" 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/MyWallet/AddFundDollars.jsx

@@ -2,10 +2,10 @@ 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";
 
 const validationSchema = Yup.object().shape({
@@ -59,24 +59,29 @@ function AddFundDollars(props) {
   let apiCall = new usersService();
 
   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
 
-  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("");
@@ -94,29 +99,44 @@ function AddFundDollars(props) {
       }, 5000);
     }
     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 (!prevCardDetails) {
+        // return setTimeout(() => {
+        //   props.setInputError("");
+        // }, 5000);
+        return;
+      }
+      setLoader(true);
+      const stateData = {
+        amount: Number(props.input),
+        currency: props.currency,
+        card: prevCardDetails["payment-card"],
+      };
+
+      setTimeout(() => {
+        props.setConfirmCredit({ show: true, data: stateData });
+        setLoader(false);
+      }, 1500);
+      // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
     }
     if (tab == "new") {
       const stateData = {
         amount: Number(props.input),
-        currency: "dollars",
-        ...values,
+        currency: props.currency,
+        values,
       };
-      navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
+      // 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: [] });
       });
   }, []);
 
@@ -124,59 +144,77 @@ function AddFundDollars(props) {
     <>
       <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 ? (
+          <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-4 outline-none border-none text-base text-black dark:text-gray-100 bg-[#dce2e6] dark:bg-[#5e6278] 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"
-                          /> */}
+                          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
@@ -185,24 +223,24 @@ function AddFundDollars(props) {
                           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> */}
+                        <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> */}
+                      <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 +258,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] overflow-y-scroll">
             <div className="w-full flex flex-col justify-between">
               <Formik
                 initialValues={initialValues}
@@ -254,6 +275,12 @@ 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:
+                              </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>
                             <div className="field w-full my-6">
                               <InputCom
                                 fieldClass="px-6"
@@ -518,13 +545,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 });
+    if (input) return;
+    // setTimeout(
+    //   () =>
+    //     setConfirmCredit({
+    //       show: true,
+    //       data: { amount: Number(input), currency: "naira" },
+    //     }),
+    //   1500
+    // );
 
-    setInput("");
+    // const stateData = { amount: Number(input), currency: "naira" };
+    // navigate("confirm-add-fund", { state: stateData });
+
+    // setInput("");
   };
 
-  console.log("walletItem details >>", payment, currency);
-
   return (
-    <div className="h-[36rem] w-full">
+    <div className="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">
+                {currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"}
+              </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>
             )}
 
             {/* 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"

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,127 @@ 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);
+  //   }
+  // }, []);
+
+  let __confirmCard = 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">
+                      {confirmCredit?.data?.currency == "naira"
+                        ? "Amount (Naira):"
+                        : "Amount (Dollars):"}
+                    </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} />
+                      )}
+                    </span>
+                  </div>
+                </div>
+              ) : (
                 <InputCom
                   fieldClass="px-6"
-                  label={state.currency == 'naira' ? "Amount (Naira):" : "Amount (Dollars):"}
+                  label={
+                    confirmCredit?.data?.currency == "naira"
+                      ? "Amount (Naira):"
+                      : "Amount (Dollars):"
+                  }
                   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 
+          </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>
+            {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"
-                onClick={()=>console.log('WORKING')}
+              />
+            ) : (
+              <button
+                className="px-4 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>
-      )}
+      </div>
 
-      <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">
+      {/* <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);
@@ -33,6 +47,8 @@ const CreditPopup = ({ details, onClose, situation }) => {
     onClose();
   };
 
+  console.log("prop drills >> ", state);
+
   return (
     <ModalCom
       action={onClose}
@@ -42,7 +58,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 +87,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/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}`)} 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

@@ -125,6 +125,7 @@ export default function WalletItemCard({ walletItem, payment }) {
       {creditPopup.show && (
         <CreditPopup
           details={creditPopup.data}
+          walletItem={walletItem}
           onClose={closePopUp}
           situation={openPopUp}
         />