icon color and size changed

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/Helpers/Inputs/InputCom/index.jsx

@@ -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,11 +2,12 @@ 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()
@@ -60,24 +61,28 @@ function AddFundDollars(props) {
 
   let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
   const [loader, setLoader] = useState(false);
+  const { userDetails } = useSelector((state) => state?.userDetails);
+  let { firstname, lastname } = userDetails;
+  let [prevCardDetails, setPrevCardDetails] = useState({}); // STATE TO HOLD PREVIOUS CARD SELECTED
+  let [payListCards, setPayListCards] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS
+  // const [payListCard, setPayListCard] = useState({ data: "" }); //USER PAYLIST
 
-  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("");
@@ -95,10 +100,17 @@ function AddFundDollars(props) {
       }, 5000);
     }
     if (tab == "previous") {
+      if (!prevCardDetails) {
+        // return setTimeout(() => {
+        //   props.setInputError("");
+        // }, 5000);
+        return;
+      }
       setLoader(true);
       const stateData = {
         amount: Number(props.input),
         currency: props.currency,
+        card: prevCardDetails["payment-card"],
       };
 
       setTimeout(() => {
@@ -111,7 +123,7 @@ function AddFundDollars(props) {
       const stateData = {
         amount: Number(props.input),
         currency: props.currency,
-        ...values,
+        values,
       };
       // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
     }
@@ -121,11 +133,11 @@ function AddFundDollars(props) {
     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: [] });
       });
   }, []);
 
@@ -133,63 +145,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"}
-                    value={item}
+                    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
@@ -197,25 +223,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>
@@ -233,26 +242,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}
@@ -267,7 +259,14 @@ function AddFundDollars(props) {
                           <div className="fields w-full">
                             {/* inputs starts here */}
                             {/* Name */}
-                            <div className="field w-full my-6">
+                            <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>
+
+                            {/* <div className="field w-full my-2 flex-[0.4]">
                               <InputCom
                                 fieldClass="px-6"
                                 spanTag="*"
@@ -284,119 +283,130 @@ function AddFundDollars(props) {
                                   {props.errors.name}
                                 </p>
                               )}
+                            </div> */}
+
+                            <div className="flex items-center flex-1 gap-3 my-3">
+                              {/* 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}
+                                />
+                                {props.errors.cardNum &&
+                                  props.touched.cardNum && (
+                                    <p className="text-sm text-red-500">
+                                      {props.errors.cardNum}
+                                    </p>
+                                  )}
+                              </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 block"
+                                        htmlFor="expiration"
+                                      >
+                                        Exp 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-[#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>
+                                  {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"
+                                      >
+                                        Exp 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-[#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>
+                                  {props.errors.expirationYear &&
+                                    props.touched.expirationYear && (
+                                      <p className="text-sm text-red-500">
+                                        {props.errors.expirationYear}
+                                      </p>
+                                    )}
+                                </div>
+                              </div>
                             </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>
-                            {/* 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-3">
+                              {/* Address AND CVV */}
+                              <div className="field w-full col-span-1 flex-[0.4]">
                                 <InputCom
                                   fieldClass="px-6"
                                   spanTag="*"
@@ -415,29 +425,28 @@ function AddFundDollars(props) {
                                   </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 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}
+                                />
+                                {props.errors.address &&
+                                  props.touched.address && (
+                                    <p className="text-sm text-red-500">
+                                      {props.errors.address}
+                                    </p>
+                                  )}
+                              </div>
                             </div>
                             {/* postal code and state */}
-                            <div className="sm:grid gap-5 grid-cols-3 mb-6">
+                            <div className="sm:grid gap-5 grid-cols-3 my-3">
                               <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                 <InputCom
                                   fieldClass="px-6"
@@ -514,12 +523,13 @@ function AddFundDollars(props) {
                                 </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">
                         <button
                           type="submit"
-                          className="py-1 px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                          className="py-1 px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white gap-1"
                         >
-                          <span className="text-white">Continue</span>
+                          <span className="text-white">Continue</span>{" "}
+                          <Icons name="chevron-right" />
                         </button>
                       </div>
                     </Form>

src/components/MyWallet/AddFundPop.jsx

@@ -20,7 +20,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
 
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = (e) => {
-    e.preventDefault()
+    e.preventDefault();
     setInputError("");
     if (!input || input == "0") {
       setInputError("Please Enter Amount");
@@ -36,7 +36,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
       }, 5000);
     }
 
-    if(input)   return;
+    if (input) return;
     // setTimeout(
     //   () =>
     //     setConfirmCredit({
@@ -53,38 +53,34 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
   };
 
   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}

src/components/MyWallet/ConfirmAddFund.jsx

@@ -96,30 +96,39 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   //   }
   // }, []);
 
-  console.log("data on confirm", confirmCredit);
+  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 h-[36rem]">
+    <div className="content-wrapper w-full h-[32rem]">
       <div className="w-full mb-10">
-        <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+        <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 min-h-[45px] flex items-center">
+          <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 items-center gap-4">
+                <div className="flex flex-col gap-4">
                   <div className="flex items-center gap-4">
-                    <label
-                      htmlFor="amount"
-                      className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
-                    >
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                       {confirmCredit?.data?.currency == "naira"
                         ? "Amount (Naira):"
                         : "Amount (Dollars):"}
-                    </label>
-                    <span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                       {`${walletItem?.symbol} ${
                         Number(confirmCredit?.data?.amount).toLocaleString() ||
                         ""
@@ -127,14 +136,17 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                     </span>
                   </div>
                   <div className="flex items-center gap-4">
+                    {/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"> */}
                     <label
                       htmlFor="payment"
-                      className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
+                      className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
                     >
-                      {confirmCredit?.data?.currency && "Payment Method"}
+                      {confirmCredit?.data?.currency && "Payment Method:"}
                     </label>
-                    <span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
-                      Coming Soon...
+                    <span className="text-[#181c32] dark:text-white ">
+                      {__confirmCard && (
+                        <ThePaymentText value={__confirmCard} />
+                      )}
                     </span>
                   </div>
                 </div>
@@ -158,10 +170,10 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             {confirmCredit?.data?.currency && "Payment Method"}
           </h1> */}
           {/* <hr /> */}
-          <div className="min-h-[350px]"></div>
+          <div className="min-h-[220px]"></div>
           <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
             <button
-              className="px-2 h-11 flex justify-center items-center border-gradient text-base rounded-full"
+              className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
               onClick={onClose}
             >
               Cancel

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -47,7 +47,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     onClose();
   };
 
-  console.log("prop drills >> ", confirmCredit);
+  console.log("prop drills >> ", state);
 
   return (
     <ModalCom

src/components/MyWallet/WalletBox.jsx

@@ -10,7 +10,7 @@ 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 lg:flex lg:space-x-11 mb-11">
             {wallet.loading ? (
               <div className="w-full h-full flex items-center justify-center">
                 <LoadingSpinner size="16" color="sky-blue" />

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,7 @@ 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";
 
 export default function WalletItemCard({ walletItem, payment }) {
   //   const [eth] = useState(90);
@@ -29,70 +30,67 @@ 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-full h-full rounded-2xl overflow-hidden flex flex-col gap-2 px-8 py-9`}
         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 flex justify-start">
+          <div className="w-[100px] 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="flex justify-end items-center">
+          <div className="balance w-2/3">
+            <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>
+            </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 && (
-          <div className="counters flex space-x-16">
+          <div className="counters flex justify-between gap-2">
             <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`}
+                  walletItem.code != "NAIRA" && "invisible"
+                } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
               >
-                Transfer
+                Spend
               </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"
+                className='px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white'
                 onClick={() => {
                   openPopUp({
                     payment: payment,
@@ -100,7 +98,7 @@ export default function WalletItemCard({ walletItem, payment }) {
                   });
                 }}
               >
-                <span className="">
+                {/* <span className="">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="38"
@@ -114,9 +112,8 @@ export default function WalletItemCard({ walletItem, payment }) {
                       className="stroke-black fill-white"
                     ></path>
                   </svg>
-                </span>
+                </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>
           </div>