layout fix

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/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);
@@ -113,19 +105,18 @@ function AddFundDollars(props) {
         card: prevCardDetails["payment-card"],
       };
 
-      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 +132,10 @@ function AddFundDollars(props) {
       });
   }, []);
 
+  console.log(props)
+
+  const handleClose = props.onClose
+
   return (
     <>
       <div className="w-full">
@@ -190,13 +185,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 +201,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 +233,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 +242,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 +255,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 +269,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 +280,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 +320,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 +327,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 +349,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 +364,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 +382,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 +396,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 +414,8 @@ function AddFundDollars(props) {
                                   value={props.values.code}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.code}
                                 />
-                                {props.errors.code && props.touched.code && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.code}
-                                  </p>
-                                )}
                               </div>
                               <div className="field w-full col-span-1">
                                 <InputCom
@@ -476,60 +428,33 @@ function AddFundDollars(props) {
                                   value={props.values.state}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.state}
                                 />
-                                {props.errors.state && props.touched.state && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.state}
-                                  </p>
-                                )}
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
 
-                      {/* <div className="w-full">
-                                {requestStatus.message != "" && (
-                                <p
-                                    className={`text-center text-base ${
-                                    requestStatus.status ? "text-green-800" : "text-red-600"
-                                    }`}
-                                >
-                                    {requestStatus.message}
-                                </p>
-                                )}
-                                <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                                <div className="flex items-center space-x-4 mr-9">
-                                    <Link
-                                    to="/"
-                                    className="text-18 text-light-red tracking-wide "
-                                    >
-                                    <span className="border-b dark:border-[#5356fb29]  border-light-red">
-                                        {" "}
-                                        Cancel
-                                    </span>
-                                    </Link>
-
-                                    {requestStatus.loading ? (
-                                    <LoadingSpinner size="8" color="sky-blue" />
-                                    ) : (
-                                    <button
-                                        type="submit"
-                                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                    >
-                                        Update Profile
-                                    </button>
-                                    )}
-                                </div>
-                                </div>
-                            </div> */}
-                      <div className="md: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

@@ -36,20 +36,19 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
       }, 5000);
     }
 
-    if (input) return;
-    // setTimeout(
-    //   () =>
-    //     setConfirmCredit({
-    //       show: true,
-    //       data: { amount: Number(input), currency: "naira" },
-    //     }),
-    //   1500
-    // );
+    const stateData = {
+      amount: Number(input),
+      currency: currency,
+    };
 
-    // const stateData = { amount: Number(input), currency: "naira" };
-    // navigate("confirm-add-fund", { state: stateData });
-
-    // setInput("");
+    return setTimeout(
+      () =>
+        setConfirmCredit({
+          show: true,
+          data: stateData,
+        }),
+      1500
+    );
   };
 
   return (
@@ -61,7 +60,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
             {/*<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
@@ -92,6 +91,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
               </div>
             )}
 
+            {currency != "US Dollars" && <div className="h-[18rem]"></div>}
             {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
             {currency != "US Dollars" && (
               <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
@@ -113,7 +113,6 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
           </div>
         </div>
       </div>
-
       {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
       {currency != "US Dollars" &&
         // <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">

src/components/MyWallet/ConfirmAddFund.jsx

@@ -96,7 +96,10 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   //   }
   // }, []);
 
-  let __confirmCard = JSON.parse(confirmCredit?.data.card);
+  const __confirmCard = confirmCredit?.data.card
+    ? JSON.parse(confirmCredit?.data.card)
+    : "";
+
   const ThePaymentText = ({ value }) => (
     <div className="my-2 flex items-center gap-5">
       <div className="card-details flex items-center gap-3">
@@ -124,9 +127,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                 <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({confirmCredit?.data?.currency})
                     </h1>
                     <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                       {`${walletItem?.symbol} ${
@@ -144,20 +145,16 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                       {confirmCredit?.data?.currency && "Payment Method:"}
                     </label>
                     <span className="text-[#181c32] dark:text-white ">
-                      {__confirmCard && (
+                      {__confirmCard ? (
                         <ThePaymentText value={__confirmCard} />
-                      )}
+                      ) : null}
                     </span>
                   </div>
                 </div>
               ) : (
                 <InputCom
                   fieldClass="px-6"
-                  label={
-                    confirmCredit?.data?.currency == "naira"
-                      ? "Amount (Naira):"
-                      : "Amount (Dollars):"
-                  }
+                  label={` Amount${confirmCredit?.data?.currency}`}
                   type="text"
                   name="amount"
                   value={confirmCredit?.data?.amount || ""}
@@ -178,18 +175,12 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             >
               Cancel
             </button>
-            {confirmCredit?.data?.currency == "naira" ? (
+
+            {confirmCredit?.data?.currency == "Naira" && (
               <FlutterWaveButton
                 {...fwConfig}
                 className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
               />
-            ) : (
-              <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

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

src/components/MyWallet/WalletAction.jsx

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

src/components/MyWallet/WalletBox.jsx

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

src/components/MyWallet/WalletItemCard.jsx

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import CreditPopup from "./Popup/CreditPopup";
 import localImgLoad from "../../lib/localImgLoad";
+import WalletAction from "./WalletAction";
 
 export default function WalletItemCard({ walletItem, payment }) {
   //   const [eth] = useState(90);
@@ -35,18 +36,42 @@ export default function WalletItemCard({ walletItem, payment }) {
   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-[350px] h-full rounded-2xl overflow-hidden flex flex-col gap-2 px-8 pt-9 pb-20`}
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
       >
-        <div className="wallet flex justify-start">
-          <div className="w-[100px] h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+        <div className="wallet xxs:flex justify-between items-start gap-3">
+          <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
             <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
           </div>
+          <div className="balance mt-2">
+            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+              Current Balance
+            </p>
+            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+              {PriceFormatter(
+                walletItem.amount * 0.01,
+                walletItem.code,
+                undefined,
+                "text-[2rem]"
+              )}
+            </p>
+            <p className="xxs:-ml-5 mt-10 mb-5 text-lg text-white tracking-wide flex justify-start items-center gap-2">
+              HOLDINGS :{" "}
+              <span className="mt-1">
+                {PriceFormatter(
+                  walletItem.escrow * 0.01,
+                  walletItem.code,
+                  undefined,
+                  "text-[2rem]"
+                )}
+              </span>
+            </p>
+          </div>
         </div>
-        <div className="flex justify-end items-center">
-          <div className="balance w-2/3">
+        {/* <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>
@@ -70,54 +95,17 @@ export default function WalletItemCard({ walletItem, payment }) {
               </span>
             </p>
           </div>
-        </div>
+        </div> */}
 
         {/* for white underline */}
         <div className="my-2 w-full h-[1px] bg-white"></div> 
 
-        {!accountType && (
-          <div className="counters flex justify-between gap-2">
-            <div>
-              <Link
-                to="transfer-fund"
-                className={`${
-                  walletItem.code != "NAIRA" && "invisible"
-                } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
-              >
-                Spend
-              </Link>
-            </div>
-            <div>
-              <button
-                // state={{ currency: walletItem.description }}
-                className='px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white'
-                onClick={() => {
-                  openPopUp({
-                    payment: payment,
-                    currency: walletItem?.description,
-                  });
-                }}
-              >
-                {/* <span className="">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="38"
-                    height="38"
-                    viewBox="0 0 42 42"
-                    fill="none"
-                  >
-                    <path
-                      d="M21 0C16.8466 0 12.7865 1.23163 9.33303 3.53914C5.8796 5.84665 3.18798 9.1264 1.59854 12.9636C0.00909901 16.8009 -0.406771 21.0233 0.403518 25.0969C1.21381 29.1705 3.21386 32.9123 6.15077 35.8492C9.08767 38.7861 12.8295 40.7862 16.9031 41.5965C20.9767 42.4068 25.1991 41.9909 29.0364 40.4015C32.8736 38.812 36.1534 36.1204 38.4609 32.667C40.7684 29.2135 42 25.1534 42 21C41.994 15.4323 39.7796 10.0944 35.8426 6.15741C31.9056 2.22045 26.5677 0.00602189 21 0ZM28 22.75H22.75V28C22.75 28.4641 22.5656 28.9092 22.2374 29.2374C21.9093 29.5656 21.4641 29.75 21 29.75C20.5359 29.75 20.0908 29.5656 19.7626 29.2374C19.4344 28.9092 19.25 28.4641 19.25 28V22.75H14C13.5359 22.75 13.0908 22.5656 12.7626 22.2374C12.4344 21.9092 12.25 21.4641 12.25 21C12.25 20.5359 12.4344 20.0907 12.7626 19.7626C13.0908 19.4344 13.5359 19.25 14 19.25H19.25V14C19.25 13.5359 19.4344 13.0908 19.7626 12.7626C20.0908 12.4344 20.5359 12.25 21 12.25C21.4641 12.25 21.9093 12.4344 22.2374 12.7626C22.5656 13.0908 22.75 13.5359 22.75 14V19.25H28C28.4641 19.25 28.9093 19.4344 29.2374 19.7626C29.5656 20.0907 29.75 20.5359 29.75 21C29.75 21.4641 29.5656 21.9092 29.2374 22.2374C28.9093 22.5656 28.4641 22.75 28 22.75Z"
-                      //   fill="white"
-                      className="stroke-black fill-white"
-                    ></path>
-                  </svg>
-                </span> */}
-                <span className="">Add Credit</span>
-              </button>
-            </div>
-          </div>
-        )}
+        {!accountType ? (
+          <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
+        )
+        :
+        null
+      }
       </div>
       {creditPopup.show && (
         <CreditPopup

tailwind.config.js

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