flex display changed to suit mac screen

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

@@ -63,7 +63,7 @@ export default function InputCom({
               </span>
             )}
             {/* displays error is any */}
-            {error && <span className="text-[12px] text-red-500">{error}</span>} 
+            {error && <span className="text-[12px] text-red-500 italic">{error}</span>} 
           </label>
         )}
         {forgotPassword && (

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -1,11 +1,18 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import ModalCom from "../../Helpers/ModalCom";
+import { useMemo, useState } from "react";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import ModalCom from "../../Helpers/ModalCom";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
+  const [textValue, setTextValue] = useState("");
+  const apiCall = useMemo(() => new usersService(), []);
+
+  const handleInputChange = ({ target: { value } }) => {
+    setTextValue(value);
+  };
+
   const MarketCalls = (details) => {
     const [marketMsg, setMarketMsg] = useState({
       loading: false,
@@ -24,8 +31,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
     const MarketDetail = async () => {
       try {
-        setMarketMsg({ loading: true });
         if (!textValue) return;
+        setMarketMsg({ loading: true });
 
         reqData.yourmessage = textValue;
 
@@ -87,22 +94,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
       }
     };
 
-    // useEffect(() => {
-    //   ManageInterest();
-    // }, []);
-
     return { MarketDetail, ManageInterest, manageInt, marketMsg };
   };
 
-  const [textValue, setTextValue] = useState("");
-
-  const handleInputChange = ({ target: { value } }) => {
-    setTextValue(value);
-  };
-
-  const apiCall = useMemo(() => new usersService(), []);
-
-  let { manageInt, ManageInterest, MarketDetail, marketMsg } = MarketCalls(details);
+  let { manageInt, ManageInterest, MarketDetail, marketMsg } =
+    MarketCalls(details);
 
   let thePrice = PriceFormatter(
     details?.price * 0.01,
@@ -270,9 +266,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   Interest: <b className="ml-1">{details.interest_count}</b>
                 </p>
                 <hr />
-                <p className="my-1">
-                  Expire: {details.expire}
-                </p>
+                <p className="my-1">Expire: {details.expire}</p>
               </div>
             </div>
             <button

src/components/MyWallet/AddFund.jsx

@@ -1,48 +1,52 @@
-import React, {useState} from 'react'
-import RecentActivityTable from './WalletComponent/RecentActivityTable'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
-import { useNavigate, useLocation } from 'react-router-dom'
-import InputCom from '../Helpers/Inputs/InputCom'
+import React, { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import InputCom from "../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import RecentActivityTable from "./WalletComponent/RecentActivityTable";
 
-import AddFundDollars from './AddFundDollars'
+import AddFundDollars from "./AddFundDollars";
 
-function AddFund({payment}) {
-   
-    const navigate = useNavigate()
-    const {currency} = useLocation()?.state //GETS THE USER CURRENCY FOR ADD FUND
+function AddFund({ payment }) {
+  const navigate = useNavigate();
+  const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
 
-    //STATE FOR CONTROLLED INPUT
-    let [input, setInput] = useState('')
+  //STATE FOR CONTROLLED INPUT
+  let [input, setInput] = useState("");
 
-    let [inputError, setInputError] = useState('')
+  let [inputError, setInputError] = useState("");
 
-    // FUNCTION TO HANDLE INPUT CHANGE
-    const handleChange = ({target:{name, value}}) => {
-        setInput(value)
+  // FUNCTION TO HANDLE INPUT CHANGE
+  const handleChange = ({ target: { name, value } }) => {
+    setInput(value);
+  };
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = () => {
+    setInputError("");
+    if (!input || input == "0") {
+      setInputError("Please Enter Amount");
+      return setTimeout(() => {
+        setInputError("");
+      }, 5000);
     }
 
-    //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = () => {
-        setInputError('')
-        if(!input || input == '0'){
-            setInputError('Please Enter Amount')
-            return setTimeout(()=>{setInputError('')}, 5000)
-        }
-
-        if(isNaN(input)){
-            setInputError('Amount must be a Number')
-            return setTimeout(()=>{setInputError('')}, 5000)
-        }
-
-        const stateData = {amount: Number(input), currency: 'naira'}
-        navigate('confirm-add-fund', {state: stateData})
-     
-        setInput('')
+    if (isNaN(input)) {
+      setInputError("Amount must be a Number");
+      return setTimeout(() => {
+        setInputError("");
+      }, 5000);
     }
-    return (
-        <div>
-            {/* heading */}
-            {/* <div className="sm:flex justify-between items-center mb-6">
+
+    const stateData = { amount: Number(input), currency: "naira" };
+    navigate("confirm-add-fund", { state: stateData });
+
+    setInput("");
+  };
+  
+  return (
+    <div>
+      {/* heading */}
+      {/* <div className="sm:flex justify-between items-center mb-6">
                 <div className="w-full flex justify-start space-x-3 items-center">
                     <button
                     type="button"
@@ -73,68 +77,78 @@ function AddFund({payment}) {
                 </div>
             </div> */}
 
-            <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 shadow">
-                        {/*<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 mb-6">
-                                <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>}
-                            </div>
-                        </form>
-                        <hr />
+      <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 shadow">
+            {/*<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 mb-6">
+                <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>
+                )}
+              </div>
+            </form>
+            <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 shadow'>
-                            <AddFundDollars setInputError={setInputError} input={input} setInput={setInput} />
-                        </div>
-                        }
+            {/* 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 shadow">
+                <AddFundDollars
+                  setInputError={setInputError}
+                  input={input}
+                  setInput={setInput}
+                />
+              </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'>
-                            <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">Continue</span>
-                            </button>
-                        </div>
-                        }
-                    </div>
-                </div>
-            </div>
-
-            {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
-            {currency != 'US Dollars' &&
-            <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-                <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] 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> */}
-                        {payment.loading ?
-                            <LoadingSpinner size='16' color='sky-blue' />
-                            :
-                            <RecentActivityTable  payment={payment}/>
-                        }
-                    </div>
-                </div>
-            </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">
+                <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">Continue</span>
+                </button>
+              </div>
+            )}
+          </div>
         </div>
-      )
+      </div>
+
+      {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
+      {currency != "US Dollars" && (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+          <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+            <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] 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> */}
+              {payment.loading ? (
+                <LoadingSpinner size="16" color="sky-blue" />
+              ) : (
+                <RecentActivityTable payment={payment} />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }
 
-export default AddFund
+export default AddFund;

src/components/MyWallet/AddFundDollars.jsx

@@ -11,37 +11,37 @@ import Icons from "../Helpers/Icons";
 
 const validationSchema = Yup.object().shape({
   name: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(50, "Maximum 50 characters")
-    .required("Name is required"),
+    .min(3, "3 chars min.")
+    .max(50, "50 chars max.")
+    .required("required"),
   cardNum: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("Card Number is required"),
+    .min(3, "3 chars min.")
+    .max(25, "25 chars max.")
+    .required("required"),
   code: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("Postal Code is required"),
+    .min(3, "3 chars min.")
+    .max(25, "25 chars max.")
+    .required("required"),
   state: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("State is required"),
+    .min(3, "3 chars min.")
+    .max(25, "25 chars max.")
+    .required("required"),
   address: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(50, "Maximum 50 characters")
-    .required("Address is required"),
+    .min(3, "3 chars min.")
+    .max(50, "50 chars max.")
+    .required("required"),
   expirationYear: Yup.string()
-    .min(4, "Minimum 4 characters")
-    .max(4, "Maximum 4 characters")
-    .required("Expiration Year is required"),
+    .min(4, "4 chars min.")
+    .max(4, "4 chars max.")
+    .required("required"),
   expirationMonth: Yup.string()
-    .min(1, "Minimum 1 characters")
-    .max(2, "Maximum 2 characters")
-    .required("Expiration Month is required"),
+    .min(1, "1 chars min.")
+    .max(2, "2 chars max.")
+    .required("required"),
   cvv: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(4, "Maximum 4 characters")
-    .required("CVV Year is required"),
+    .min(3, "3 chars min.")
+    .max(4, "4 chars max.")
+    .required("required"),
 });
 
 const initialValues = {
@@ -57,15 +57,14 @@ const initialValues = {
 
 function AddFundDollars(props) {
   const navigate = useNavigate();
-  let apiCall = new usersService();
+  const apiCall = new usersService();
 
-  let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
+  const [tab, setTab] = useState("previous");
   const [loader, setLoader] = useState(false);
   const { userDetails } = useSelector((state) => state?.userDetails);
-  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
+  const { firstname, lastname } = userDetails;
+  const [prevCardDetails, setPrevCardDetails] = useState({});
+  const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
 
   const handleInputChange = (event) => {
     const { name, value } = event.target;
@@ -83,27 +82,20 @@ function AddFundDollars(props) {
     indexOfLastItem
   );
 
-  // FUNCTION TO SUBMIT
   const handleSubmit = (values, helpers) => {
     props.setInputError("");
-    if (!props.input || props.input == "0") {
+    if (!props.input || props.input === "0") {
       props.setInputError("Please Enter Amount");
-      return setTimeout(() => {
-        props.setInputError("");
-      }, 5000);
+      return;
     }
 
     if (isNaN(props.input)) {
       props.setInputError("Amount must be a Number");
-      return setTimeout(() => {
-        props.setInputError("");
-      }, 5000);
+      return;
     }
-    if (tab == "previous") {
+
+    if (tab === "previous") {
       if (!prevCardDetails) {
-        // return setTimeout(() => {
-        //   props.setInputError("");
-        // }, 5000);
         return;
       }
       setLoader(true);
@@ -111,21 +103,21 @@ function AddFundDollars(props) {
         amount: Number(props.input),
         currency: props.currency,
         card: prevCardDetails["payment-card"],
+        cardType: "prev",
       };
 
-      setTimeout(() => {
+      return 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") {
+
+    if (tab === "new") {
       const stateData = {
         amount: Number(props.input),
         currency: props.currency,
-        values,
+        ...values,
       };
-      // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
     }
   };
 
@@ -141,6 +133,8 @@ function AddFundDollars(props) {
       });
   }, []);
 
+  const handleClose = props.onClose;
+
   return (
     <>
       <div className="w-full">
@@ -190,13 +184,13 @@ function AddFundDollars(props) {
         {/* END OF switch button */}
 
         {/* previous tab */}
-        {tab == "previous" ? (
+        {tab === "previous" ? (
           <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
             {payListCards.loading ? (
               <LoadingSpinner size="10" color="sky-blue" />
             ) : 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"
+                className="my-3 w-full rounded-full p-2 outline-none text-base text-black dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border"
                 value={prevCardDetails["payment-card"]?.card_uid}
                 id="payment-card"
                 name="payment-card"
@@ -206,16 +200,10 @@ function AddFundDollars(props) {
                 {currentPreviousCards.map((item, index) => (
                   <option
                     key={index}
-                    className={index != 0 && "border-t-2"}
+                    className={index !== 0 && "border-t-2"}
                     value={JSON.stringify(item)}
                   >
                     <div className="my-2 flex items-center gap-5">
-                      {/* <input
-                          type="radio"
-                          className="w-8 h-8"
-                          name="card"
-                          value="value"
-                        /> */}
                       <div className="card-details">
                         <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
                           {item.description} Card
@@ -244,7 +232,7 @@ function AddFundDollars(props) {
             )}
           </div>
         ) : (
-          <div className="new-details w-full max-h-[23rem] overflow-y-scroll">
+          <div className="new-details w-full max-h-[23rem]">
             <div className="w-full flex flex-col justify-between">
               <Formik
                 initialValues={initialValues}
@@ -253,11 +241,11 @@ function AddFundDollars(props) {
               >
                 {(props) => {
                   return (
-                    <Form>
+                    <Form className="md:pl-8">
                       <div className="flex flex-col-reverse sm:flex-row">
                         <div className="flex-1 sm:mr-10">
                           <div className="fields w-full">
-                            {/* inputs starts here */}
+                            {/* Inputs */}
                             {/* Name */}
                             <div className="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">
@@ -266,27 +254,8 @@ function AddFundDollars(props) {
                               <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="*"
-                                label="Name on Card"
-                                type="text"
-                                name="name"
-                                placeholder="DUMMY NAME"
-                                value={props.values.name}
-                                inputHandler={props.handleChange}
-                                blurHandler={props.handleBlur}
-                              />
-                              {props.errors.name && props.touched.name && (
-                                <p className="text-sm text-red-500">
-                                  {props.errors.name}
-                                </p>
-                              )}
-                            </div> */}
-
-                            <div className="flex items-center flex-1 gap-3 my-3">
-                              {/* CARD NUMBER */}
+                            <div className="flex items-center flex-1 gap-3 my-2">
+                              {/* Card Number */}
                               <div className="field w-full flex-[0.6]">
                                 <InputCom
                                   fieldClass="px-6"
@@ -299,15 +268,10 @@ function AddFundDollars(props) {
                                   value={props.values.cardNum}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.cardNum}
                                 />
-                                {props.errors.cardNum &&
-                                  props.touched.cardNum && (
-                                    <p className="text-sm text-red-500">
-                                      {props.errors.cardNum}
-                                    </p>
-                                  )}
                               </div>
-                              {/* EXPIRE YEAR, YEAR */}
+                              {/* 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">
@@ -315,13 +279,16 @@ function AddFundDollars(props) {
                                       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"
+                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
                                         htmlFor="expiration"
                                       >
                                         Exp Month{" "}
-                                        <span className="text-red-700 text-sm tracking-wide">
+                                        <span className="text-red-700 text-sm italic">
                                           *
                                         </span>
+                                        <span className="text-[12px] text-red-500 ml-1">
+                                          {props.errors.expirationMonth && "**"}
+                                        </span>
                                       </label>
                                     </div>
                                     <div
@@ -352,12 +319,6 @@ function AddFundDollars(props) {
                                       </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">
@@ -365,13 +326,16 @@ function AddFundDollars(props) {
                                       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"
+                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center line-clamp-3"
                                         htmlFor="expiration"
                                       >
                                         Exp Year{" "}
                                         <span className="text-red-700 text-sm tracking-wide">
                                           *
                                         </span>
+                                        <span className="text-[12px] text-red-500 italic">
+                                          {props.errors.expirationYear && "**"}
+                                        </span>
                                       </label>
                                     </div>
                                     <div
@@ -384,7 +348,12 @@ function AddFundDollars(props) {
                                         onBlur={props.handleBlur}
                                         name="expirationYear"
                                       >
-                                        <option value="" className="text-dark-gray">Year</option>
+                                        <option
+                                          value=""
+                                          className="text-dark-gray"
+                                        >
+                                          Year
+                                        </option>
                                         {expireYear?.length &&
                                           expireYear.map((item, index) => (
                                             <option key={index} value={item}>
@@ -394,18 +363,12 @@ function AddFundDollars(props) {
                                       </select>
                                     </div>
                                   </div>
-                                  {props.errors.expirationYear &&
-                                    props.touched.expirationYear && (
-                                      <p className="text-sm text-red-500">
-                                        {props.errors.expirationYear}
-                                      </p>
-                                    )}
                                 </div>
                               </div>
                             </div>
 
-                            <div className="flex items-center flex-1 gap-3 my-3">
-                              {/* Address AND CVV */}
+                            <div className="flex items-center flex-1 gap-3 my-2">
+                              {/* Address and CVV */}
                               <div className="field w-full col-span-1 flex-[0.4]">
                                 <InputCom
                                   fieldClass="px-6"
@@ -418,12 +381,8 @@ function AddFundDollars(props) {
                                   value={props.values.cvv}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.cvv}
                                 />
-                                {props.errors.cvv && props.touched.cvv && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.cvv}
-                                  </p>
-                                )}
                               </div>
                               <div className="field w-full flex-[0.6]">
                                 <InputCom
@@ -436,17 +395,13 @@ function AddFundDollars(props) {
                                   value={props.values.Address}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.address}
                                 />
-                                {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 my-3">
+
+                            {/* Postal Code and State */}
+                            <div className="sm:grid gap-5 grid-cols-3 my-2">
                               <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                 <InputCom
                                   fieldClass="px-6"
@@ -458,12 +413,8 @@ function AddFundDollars(props) {
                                   value={props.values.code}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.code}
                                 />
-                                {props.errors.code && props.touched.code && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.code}
-                                  </p>
-                                )}
                               </div>
                               <div className="field w-full col-span-1">
                                 <InputCom
@@ -476,60 +427,33 @@ function AddFundDollars(props) {
                                   value={props.values.state}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.state}
                                 />
-                                {props.errors.state && props.touched.state && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.state}
-                                  </p>
-                                )}
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
 
-                      {/* <div className="w-full">
-                                {requestStatus.message != "" && (
-                                <p
-                                    className={`text-center text-base ${
-                                    requestStatus.status ? "text-green-800" : "text-red-600"
-                                    }`}
-                                >
-                                    {requestStatus.message}
-                                </p>
-                                )}
-                                <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                                <div className="flex items-center space-x-4 mr-9">
-                                    <Link
-                                    to="/"
-                                    className="text-18 text-light-red tracking-wide "
-                                    >
-                                    <span className="border-b dark:border-[#5356fb29]  border-light-red">
-                                        {" "}
-                                        Cancel
-                                    </span>
-                                    </Link>
-
-                                    {requestStatus.loading ? (
-                                    <LoadingSpinner size="8" color="sky-blue" />
-                                    ) : (
-                                    <button
-                                        type="submit"
-                                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                    >
-                                        Update Profile
-                                    </button>
-                                    )}
-                                </div>
-                                </div>
-                            </div> */}
-                      <div className="md:px-8 md:pt-4 px-4 pt-2 add-fund-btn flex justify-end items-center">
+                      <div className="md:px-8 md:pt-4 px-4 pt-2 add-fund-btn flex justify-end items-center gap-3">
+                        <button
+                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+                          onClick={handleClose}
+                        >
+                          Cancel
+                        </button>
                         <button
                           type="submit"
-                          className="py-1 px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white gap-1"
+                          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>{" "}
-                          <Icons name="chevron-right" />
+                          {loader ? (
+                            <LoadingSpinner size="6" color="sky-blue" />
+                          ) : (
+                            <>
+                              <span className="text-white">Continue</span>{" "}
+                              <Icons name="chevron-right" />
+                            </>
+                          )}
                         </button>
                       </div>
                     </Form>

src/components/MyWallet/AddFundPop.jsx

@@ -1,55 +1,71 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import usersService from "../../services/UsersService";
+import Icons from "../Helpers/Icons";
 import InputCom from "../Helpers/Inputs/InputCom";
-
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AddFundDollars from "./AddFundDollars";
 
 function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
   const navigate = useNavigate();
-  //   const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
+  const apiCall = new usersService();
 
-  let { payment, currency } = _payment;
+  const { payment, currency } = _payment;
 
-  //STATE FOR CONTROLLED INPUT
-  let [inputError, setInputError] = useState("");
+  const [inputError, setInputError] = useState("");
+  const [loader, setLoader] = useState(false);
 
-  // FUNCTION TO HANDLE INPUT CHANGE
   const handleChange = ({ target: { name, value } }) => {
     setInput(value);
   };
 
-  //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = (e) => {
-    e.preventDefault();
+  const handleSubmit = async () => {
     setInputError("");
-    if (!input || input == "0") {
+    setLoader(true);
+
+    if (!input || input === "0") {
+      setLoader(false);
       setInputError("Please Enter Amount");
-      return setTimeout(() => {
-        setInputError("");
-      }, 5000);
+      setTimeout(() => setInputError(""), 5000);
+      return;
     }
 
     if (isNaN(input)) {
+      setLoader(false);
       setInputError("Amount must be a Number");
-      return setTimeout(() => {
-        setInputError("");
-      }, 5000);
+      setTimeout(() => setInputError(""), 5000);
+      return;
     }
 
-    if (input) return;
-    // setTimeout(
-    //   () =>
-    //     setConfirmCredit({
-    //       show: true,
-    //       data: { amount: Number(input), currency: "naira" },
-    //     }),
-    //   1500
-    // );
+    let stateData = {
+      amount: Number(input),
+      currency: currency.toUpperCase(),
+    };
 
-    // const stateData = { amount: Number(input), currency: "naira" };
-    // navigate("confirm-add-fund", { state: stateData });
+    try {
+      const res = await apiCall.getStartCredit(stateData);
+      if (res.data.internal_return < 0) {
+        setLoader(false);
+        setInputError("An Error Occurred");
+        setTimeout(() => setInputError(""), 5000);
+        return;
+      }
 
-    // setInput("");
+      const _response = res.data;
+      stateData.amount = Number(input);
+      stateData.currency = currency;
+      stateData = { ...stateData, ..._response };
+
+      setTimeout(() => {
+        setLoader(false);
+        setConfirmCredit({
+          show: true,
+          data: stateData,
+        });
+      }, 1500);
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   return (
@@ -57,11 +73,9 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
       <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: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)"}
+                Amount({currency})
               </h1>
               <div className="field w-full max-w-[250px]">
                 <InputCom
@@ -78,8 +92,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
               </div>
             </form>
 
-            {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
-            {currency == "US Dollars" && (
+            {currency === "US Dollars" && (
               <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}
@@ -92,11 +105,12 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
               </div>
             )}
 
-            {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
-            {currency != "US Dollars" && (
+            {currency !== "US Dollars" && <div className="h-[18rem]"></div>}
+
+            {currency !== "US Dollars" && (
               <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"
+                  className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                   onClick={onClose}
                 >
                   Cancel
@@ -104,34 +118,22 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
                 <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"
+                  className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px] w-full"
                 >
-                  <span className="text-white">Continue</span>
+                  {loader ? (
+                    <LoadingSpinner size="6" color="sky-blue" />
+                  ) : (
+                    <>
+                      <span className="text-white">Continue</span>{" "}
+                      <Icons name="chevron-right" />
+                    </>
+                  )}
                 </button>
               </div>
             )}
           </div>
         </div>
       </div>
-
-      {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
-      {currency != "US Dollars" &&
-        // <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-        //   <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-        //     <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] 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> */}
-        //       {payment?.loading ? (
-        //         <LoadingSpinner size="16" color="sky-blue" />
-        //       ) : (
-        //         <RecentActivityTable payment={payment} />
-        //       )}
-        //     </div>
-        //   </div>
-        // </div>
-        null}
     </div>
   );
 }

src/components/MyWallet/ConfirmAddFund.jsx

@@ -2,13 +2,16 @@ import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import InputCom from "../Helpers/Inputs/InputCom";
 
 import usersService from "../../services/UsersService";
 
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 
 function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
+  const __confirmData = confirmCredit?.data;
+  const __confirmCardDetails = __confirmData.card
+    ? JSON.parse(__confirmData.card)
+    : "";
   let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
 
   let [pageLoading, setPageLoading] = useState(true);
@@ -87,16 +90,12 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     onClose: () => {},
   };
 
-  // useEffect(() => {
-  //   // what happens if not data redirect user
-  //   if (!data) {
-  //     navigate("/my-wallet/add-fund", { replace: true });
-  //   } else {
-  //     setPageLoading(false);
-  //   }
-  // }, []);
+  const handlePrevCard = () => {
+    console.log("Test me")
+  }
+
+ 
 
-  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">
@@ -110,67 +109,63 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     </div>
   );
 
+  // console.log(confirmCredit);
+
   return (
     <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: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):"}
+                      Amount({__confirmData?.currency})
                     </h1>
                     <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                       {`${walletItem?.symbol} ${
-                        Number(confirmCredit?.data?.amount).toLocaleString() ||
-                        ""
+                        Number(__confirmData?.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} />
-                      )}
+                  {__confirmData?.currency == "US Dollars" && (
+                    <div className="flex items-center gap-8">
+                      <label
+                        htmlFor="payment"
+                        className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
+                      >
+                        {__confirmData?.currency && "Payment Method"}
+                      </label>
+                      <span className="text-[#181c32] dark:text-white ">
+                        {__confirmCardDetails ? (
+                          <ThePaymentText value={__confirmCardDetails} />
+                        ) : null}
+                      </span>
+                    </div>
+                  )}
+
+                  <div
+                    className={`${
+                      __confirmData?.currency == "US Dollars"
+                        ? "gap-14"
+                        : "gap-6"
+                    } flex items-center`}
+                  >
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Reference No
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {__confirmCardDetails?.card_uid ||
+                        __confirmData?.credit_reference}
                     </span>
                   </div>
                 </div>
-              ) : (
-                <InputCom
-                  fieldClass="px-6"
-                  label={
-                    confirmCredit?.data?.currency == "naira"
-                      ? "Amount (Naira):"
-                      : "Amount (Dollars):"
-                  }
-                  type="text"
-                  name="amount"
-                  value={confirmCredit?.data?.amount || ""}
-                  disable={true}
-                />
-              )}
+              ) : null}
             </div>
           </div>
-          {/* <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
-            {confirmCredit?.data?.currency && "Payment Method"}
-          </h1> */}
           {/* <hr /> */}
-          <div className="min-h-[220px]"></div>
+          <div className={__confirmData?.currency == "US Dollars" ? "min-h-[163px]":"min-h-[200px]"}></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"
@@ -178,18 +173,23 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             >
               Cancel
             </button>
-            {confirmCredit?.data?.currency == "naira" ? (
+            {__confirmData?.currency == "US Dollars" && (
+              <button
+                className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
+                onClick={
+                  __confirmData?.cardType === "prev"
+                    ? handlePrevCard
+                    : () => console.log("Test me")
+                }
+              >
+                Proceed
+              </button>
+            )}
+            {__confirmData?.currency == "Naira" && (
               <FlutterWaveButton
                 {...fwConfig}
                 className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
               />
-            ) : (
-              <button
-                className="px-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>

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -19,19 +19,6 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     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);
   };
@@ -47,8 +34,6 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     onClose();
   };
 
-  console.log("prop drills >> ", state);
-
   return (
     <ModalCom
       action={onClose}

src/components/MyWallet/WalletAction.jsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 function WalletAction({walletItem, payment, openPopUp}) {
   return (
-    <div className="counters flex justify-between gap-2">
+    <div className="counters w-full flex justify-between gap-2">
         <div className='w-1/2 flex justify-center items-center'>
         <Link
             to="transfer-fund"

src/components/MyWallet/WalletBox.jsx

@@ -1,7 +1,3 @@
-import CurrencyStaticsSection from "./CurrencyStaticsSection";
-import CurrentBalanceWidget from "./CurrentBalanceWidget";
-import InvestmentSection from "./InvestmentSection";
-import RecentTransactionWidget from "./RecentTransactionWidget";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 
@@ -10,14 +6,14 @@ export default function WalletBox({ wallet, coupon, payment }) {
     <>
       <div className="my-wallet-wrapper w-full mb-10">
         <div className="main-wrapper w-full">
-          <div className="balance-inquery w-full lg:flex lg:space-x-11 mb-11">
+          <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(325px,_1fr))] gap-5 mb-11 h-[22rem]">
             {wallet.loading ? (
               <div className="w-full h-full flex items-center justify-center">
                 <LoadingSpinner size="16" color="sky-blue" />
               </div>
             ) : wallet.data.length ? (
               wallet.data.map((item, index) => (
-                <div className="lg:w-1/2 h-full mb-10 lg:mb-0">
+                <div className="lg:w-full h-full mb-10 lg:mb-0">
                   <WalletItemCard walletItem={item} payment={payment} />
                 </div>
               ))

src/components/MyWallet/WalletItemCard.jsx

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
-import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
-import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
-import CreditPopup from "./Popup/CreditPopup";
+import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
 import localImgLoad from "../../lib/localImgLoad";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import CreditPopup from "./Popup/CreditPopup";
 import WalletAction from "./WalletAction";
 
 export default function WalletItemCard({ walletItem, payment }) {
@@ -29,83 +28,61 @@ export default function WalletItemCard({ walletItem, payment }) {
     setCreditPopup({ show: false, data: {} });
   };
 
-  console.log("walletItem >>", walletItem, payment);
-
-  let image = walletItem.code ? `${walletItem.code.toLocaleLowerCase()}.svg` : 'default.png' // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
+  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 gap-2 px-8 py-9`}
+        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 px-8 pt-9 pb-20`}
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
       >
-        <div className="wallet xxs:flex justify-around items-start gap-3">
-          <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
-            <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
+        {/* <div className="w-[350px]"> */}
+          <div className="wallet w-full flex justify-between items-start gap-3">
+            <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+              <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
+            </div>
+            <div className="balance w-full mt-2 flex justify-center">
+              <div className="">
+                <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>
+              </div>
+            </div>
           </div>
-          <div className="balance w-full">
-            <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">
+
+          <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
+            HOLDINGS :{" "}
+            <span className="mt-1">
               {PriceFormatter(
-                walletItem.amount * 0.01,
+                walletItem.escrow * 0.01,
                 walletItem.code,
                 undefined,
                 "text-[2rem]"
               )}
-            </p>
-            <p className="xxs:-ml-5 mt-10 text-lg text-white tracking-wide flex justify-start items-center gap-2">
-              HOLDINGS :{" "}
-              <span className="mt-1">
-                {PriceFormatter(
-                  walletItem.escrow * 0.01,
-                  walletItem.code,
-                  undefined,
-                  "text-[2rem]"
-                )}
-              </span>
-            </p>
-          </div>
-        </div>
-        {/* <div className="flex justify-center items-center">
-          <div className="balance">
-            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
-              Current Balance
-            </p>
-            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-              {PriceFormatter(
-                walletItem.amount * 0.01,
-                walletItem.code,
-                undefined,
-                "text-[2rem]"
-              )}
-            </p>
-            <p className="text-lg text-white tracking-wide">
-              HOLDINGS :{" "}
-              <span className="mt-1">
-                {PriceFormatter(
-                  walletItem.escrow * 0.01,
-                  walletItem.code,
-                  undefined,
-                  "text-[2rem]"
-                )}
-              </span>
-            </p>
-          </div>
-        </div> */}
+            </span>
+          </p>
+          {/* for white underline */}
+          <div className="my-2 w-full h-[1px] bg-white"></div> 
 
-        {/* for white underline */}
-        <div className="my-2 w-full h-[1px] bg-white"></div> 
-
-        {!accountType ? (
-          <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
-        )
-        :
-        null
-      }
+          {!accountType ? (
+            <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
+          )
+          :
+          null
+          }
+        {/* </div> */}
       </div>
       {creditPopup.show && (
         <CreditPopup

src/components/Settings/Tabs/ChangePasswordTab.jsx

@@ -40,7 +40,7 @@ export default function ChangePasswordTab() {
   };
   return (
     <div className="changePasswordTab w-full">
-      <div className="w-full flex xl:flex-row flex-col-reverse space-x-5 xl:items-center">
+      <div className="w-full flex xxl:flex-row flex-col-reverse space-x-5 xl:items-center">
         <div className="flex-1 mb-10">
           <div className="input-field mb-6">
             <label

src/services/UsersService.js

@@ -216,6 +216,17 @@ class usersService {
     return this.postAuxEnd("/sendmoneyfee", postData);
   }
 
+  getStartCredit(value) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11053,
+      ...value
+    };
+    return this.postAuxEnd("/startcredit", postData);
+  }
+
   getFamilySampleTasks() {
     var postData = {
       uid: localStorage.getItem("uid"),

tailwind.config.js

@@ -21,7 +21,8 @@ module.exports = {
         'alice-blue': '#f0f8ff'
       },
       screens:{
-        xxs: '400px'
+        xxs: '400px',
+        xxl:'1900px'
       }
     },
   },