reduced the height of each activity and image removed

.env

@@ -74,3 +74,9 @@ REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
 
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
+
+
+REACT_APP_MAX_CREDIT_CARDS=4
+REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
+
+REACT_APP_MAX_FAMILY_MEMBERS=8

.env.development

@@ -45,4 +45,9 @@ REACT_APP_TOTAL_NUM_FILE=4
 REACT_APP_LOGOUT_TEXT="Sign Out"
 
 REACT_APP_APPLE_SOCIAL_LOGIN=0
-REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
+REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
+
+REACT_APP_MAX_CREDIT_CARDS=4
+REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
+
+REACT_APP_MAX_FAMILY_MEMBERS=8

.env.production

@@ -52,3 +52,8 @@ REACT_APP_TOTAL_NUM_FILE=4
 REACT_APP_LOGOUT_TEXT="Sign Out"
 REACT_APP_APPLE_SOCIAL_LOGIN=0
 REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
+
+REACT_APP_MAX_CREDIT_CARDS=4
+REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
+
+REACT_APP_MAX_FAMILY_MEMBERS=8

src/components/AuthPages/SignUp/index.jsx

@@ -1,20 +1,26 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 
 export default function SignUp() {
+  const queryParams = new URLSearchParams(location?.search);
+  const country = queryParams.get("cnt")?.toUpperCase();
+  
+  const {pathname} = useLocation()
+  const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
+
   const [signUpLoading, setSignUpLoading] = useState(false);
   const [checked, setValue] = useState(false);
   // for the catch error
   const [msgError, setMsgError] = useState("");
   const [showPassword, setShowPassword] = useState(false);
-  const [countries, setCountries] = useState([]);
+  const [countries, setCountries] = useState({loading:true, data:[]});
 
   const [formData, setFormData] = useState({
-    country: "",
+    country: country? country : "",
     first_name: "",
     last_name: "",
     email: "",
@@ -45,9 +51,18 @@ export default function SignUp() {
     try {
       if (res.status === 200) {
         const { signup_country } = await res.data;
-        setCountries(signup_country);
+        // setCountries(signup_country);
+        if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
+          let cnt = signup_country.filter(item => item[0]==country) // test to see country passed in query param exist from list of countries supplied by API
+          if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
+            setFormData(prev => ({...prev, country: ''}))
+            return setCountries({loading: false, data: signup_country});
+          }
+          return setCountries({loading: false, data: cnt});
+        }
+        setCountries({loading: false, data:signup_country});
       } else if (res.data.result !== 100) {
-        setCountries("Nothing see here!");
+        setCountries({loading: false, data:[]});
       }
     } catch (error) {
       throw new Error(error);
@@ -134,7 +149,7 @@ export default function SignUp() {
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
           <div className="mb-5">
-            <Link to="#">
+            <Link to={currentPath}>
               <img
                 src={WrenchBoard}
                 alt="wrenchboard"
@@ -172,6 +187,7 @@ export default function SignUp() {
                   name="country"
                   value={formData.country}
                   inputHandler={handleInputChange}
+                  disable={country && countries?.data?.length <= 1 ? true : false}
                 />
                 <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
                   <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
@@ -306,6 +322,7 @@ export default function SignUp() {
                 <div className="signin-area mb-1">
                   <div className="flex justify-center">
                     <button
+                      disabled={countries.loading}
                       type="button"
                       onClick={handleSignUp}
                       className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
@@ -333,6 +350,7 @@ const SelectOption = ({
   inputHandler,
   value,
   data, // passing the data from parent
+  disable
 }) => {
   return (
     <div className="input-com mb-7">
@@ -346,19 +364,39 @@ const SelectOption = ({
       </div>
       <div>
         <select
+        disabled={disable}
           name={name}
           id={name}
           className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
           onChange={inputHandler}
           value={value}
         >
-          <option value={""}>Select your Country</option>
-          {data?.length > 0 &&
-            data?.map((item, idx) => (
+          {data?.data?.length > 1 ?
+            <>
+            <option value={""}>Select your Country</option>
+            {data?.data?.map((item, idx) => (
               <option value={item[0]} key={idx}>
                 {item[1]}
               </option>
             ))}
+            </>
+            :
+            data?.data?.length == 1 ?
+            data?.data?.map((item, idx) => (
+              <option value={item[0]} key={idx}>
+                {item[1]}
+              </option>
+            ))
+            :
+            data?.data?.length < 1 && data.loading ?
+            <option value=''>
+              Loading...
+            </option>
+            :
+            <option value=''>
+              No Country Found!
+            </option>
+          }
         </select>
       </div>
     </div>

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

@@ -25,6 +25,7 @@ export default function InputCom({
   maxLength = 45,
   minLength = 0,
   direction,
+  tabIndex,
   error,
 }) {
   const inputRef = useRef(null);
@@ -100,6 +101,7 @@ export default function InputCom({
           onInput={onInput}
           minLength={minLengthValidation()}
           maxLength={maxLengthValidation()}
+          tabIndex={tabIndex}
           // pattern={inputPatterns()}
           ref={inputRef}
           readOnly={disable}

src/components/Home/HomeActivities.jsx

@@ -58,8 +58,8 @@ export default function HomeActivities({ className }) {
       }`}
     >
       <div className="header w-full sm:flex justify-between items-center mb-5">
-        <div className="flex space-x-2 items-center mb-2 sm:mb-0">
-          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+        <div className="flex space-x-2 items-center mb-4 sm:mb-0">
+          <h1 className="text-center text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
             Recent Activities
           </h1>
         </div>
@@ -79,28 +79,32 @@ export default function HomeActivities({ className }) {
             {/*</tr>*/}
 
             {recentActivitiesData.loading ? (
-              <div className="h-[100px] w-full flex justify-center items-center">
-                <LoadingSpinner color="sky-blue" size="16" />
-              </div>
+              <tr>
+                <td>
+                  <div className="h-[100px] w-full flex justify-center items-center">
+                    <LoadingSpinner color="sky-blue" size="16" />
+                  </div>
+                </td>
+              </tr>
             ) : recentActivitiesData.data ? (
               recentActivitiesData.data?.map((item) => {
                 let addedDate = item?.added?.split(" ")[0];
                 return (
                   <tr
-                    className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+                    className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
                     key={item.uid}
                   >
-                    <td className=" py-8">
+                    <td className="py-3">
                       <div className="flex space-x-2 items-center">
-                        <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                        {/* <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                           <img
                             src={dataImage1}
                             alt="data"
                             className="w-full h-full"
                           />
-                        </div>
+                        </div> */}
                         <div className="flex flex-col">
-                          <h1 className="font-bold text-xl   text-dark-gray dark:text-white">
+                          <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                             {item.title ? item.title : "Title"}
                           </h1>
                           <span className="text-sm text-thin-light-gray">
@@ -110,8 +114,8 @@ export default function HomeActivities({ className }) {
                       </div>
                     </td>
 
-                    <td className="text-right py-4">
-                      <div className="flex space-x-1 items-center justify-center">
+                    <td className="text-right py-3">
+                      <div className="flex space-x-1 items-center justify-end">
                         <span className="text-base text-dark-gray dark:text-white font-medium">
                           {item.added ? addedDate : ""}
                         </span>

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -64,6 +64,8 @@ const initialValues = {
 };
 
 function AddFundDollars(props) {
+  let MaxNoOfCards = process.env.REACT_APP_MAX_CREDIT_CARDS // HOLDS THE VALUE OF THE MAX NUMBER OF CARDS USER CAN ADD
+  
   const apiCall = new usersService();
   let countryWallet = props.walletItem.country;
   const [tab, setTab] = useState("previous");
@@ -240,7 +242,7 @@ function AddFundDollars(props) {
               <label
                 onClick={() => setTab("new")}
                 htmlFor="new"
-                className="cursor-pointer flex items-center gap-1"
+                className={`cursor-pointer flex items-center gap-1 ${payListCards.data.length >= MaxNoOfCards ? 'pointer-events-none':''}`}
               >
                 <input
                   id="new"
@@ -251,7 +253,7 @@ function AddFundDollars(props) {
                     tab == "new" ? "" : ""
                   }  tracking-wide transition duration-200`}
                 />
-                Add New Card
+                Add New Card {payListCards.data.length >= MaxNoOfCards && <span className="text-[14px] text-red-500">Max Reached</span>}
               </label>
             </div>
           </form>
@@ -314,245 +316,253 @@ function AddFundDollars(props) {
 
         {tab === "new" && (
           <div className="new-details w-full max-h-[22rem]">
-            <div className="w-full flex flex-col justify-between">
-              <Formik
-                initialValues={initialValues}
-                validationSchema={validationSchema}
-                onSubmit={handleSubmit}
-              >
-                {(props) => {
-                  return (
-                    <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 */}
-                            {/* 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">
-                                Name:
-                              </label>
-                              <p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
-                            </div>
-
-                            <div className="flex items-center flex-1 gap-3 my-2">
-                              {/* Card Number */}
-                              <div className="field w-full flex-[0.6]">
-                                <InputCom
-                                  fieldClass="px-6"
-                                  spanTag="*"
-                                  iconName={cardIcons}
-                                  label="Card Number"
-                                  type="text"
-                                  name="cardNum"
-                                  onInput={handleCards}
-                                  placeholder="Enter Card Number"
-                                  value={handleCardNumberChange(
-                                    props.values.cardNum
-                                  )}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                  error={props.errors.cardNum}
-                                />
+            {payListCards.loading ?
+              <div className="pt-10 flex w-full h-full justify-center items-center">
+                <LoadingSpinner size='10' color='sky-blue' />
+              </div>
+            :payListCards.data.length < MaxNoOfCards ?
+              <div className="w-full flex flex-col justify-between">
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema}
+                  onSubmit={handleSubmit}
+                >
+                  {(props) => {
+                    return (
+                      <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 */}
+                              {/* 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">
+                                  Name:
+                                </label>
+                                <p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
                               </div>
 
-                              {/* Expire Year, Year */}
-                              <div className="sm:grid gap-5 grid-cols-2 flex-[0.4]">
-                                <div className="field w-full mb-6 xl:mb-0 col-span-1">
-                                  <div className="select-option">
-                                    <div
-                                      className={`flex items-center justify-between mb-2.5`}
-                                    >
-                                      <label
-                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
-                                        htmlFor="expiration"
-                                      >
-                                        Exp Month{" "}
-                                        <span className="text-red-700 text-sm italic">
-                                          *
-                                        </span>
-                                        <span className="text-[12px] text-red-500 ml-1">
-                                          {props.errors.expirationMonth && "**"}
-                                        </span>
-                                      </label>
-                                    </div>
-                                    <div
-                                      className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
-                                    >
-                                      <select
-                                        className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
-                                        value={props.values.expirationMonth}
-                                        onChange={props.handleChange}
-                                        onBlur={props.handleBlur}
-                                        name="expirationMonth"
-                                      >
-                                        <option
-                                          value=""
-                                          className="text-dark-gray"
-                                        >
-                                          Month
-                                        </option>
-                                        {expireMonth?.length &&
-                                          expireMonth.map((item, index) => (
-                                            <option
-                                              key={index}
-                                              value={
-                                                Number(item.value) < 10
-                                                  ? "0" + item.value
-                                                  : item.value
-                                              }
-                                            >
-                                              {item.name}
-                                            </option>
-                                          ))}
-                                      </select>
-                                    </div>
-                                  </div>
+                              <div className="flex items-center flex-1 gap-3 my-2">
+                                {/* Card Number */}
+                                <div className="field w-full flex-[0.6]">
+                                  <InputCom
+                                    fieldClass="px-6"
+                                    spanTag="*"
+                                    iconName={cardIcons}
+                                    label="Card Number"
+                                    type="text"
+                                    name="cardNum"
+                                    onInput={handleCards}
+                                    placeholder="Enter Card Number"
+                                    value={handleCardNumberChange(
+                                      props.values.cardNum
+                                    )}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    error={props.errors.cardNum}
+                                  />
                                 </div>
 
-                                <div className="field w-full mb-6 xl:mb-0 col-span-1">
-                                  <div className="select-option">
-                                    <div
-                                      className={`flex items-center justify-between mb-2.5`}
-                                    >
-                                      <label
-                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center line-clamp-3"
-                                        htmlFor="expiration"
+                                {/* Expire Year, Year */}
+                                <div className="sm:grid gap-5 grid-cols-2 flex-[0.4]">
+                                  <div className="field w-full mb-6 xl:mb-0 col-span-1">
+                                    <div className="select-option">
+                                      <div
+                                        className={`flex items-center justify-between mb-2.5`}
                                       >
-                                        Exp Year{" "}
-                                        <span className="text-red-700 text-sm tracking-wide">
-                                          *
-                                        </span>
-                                        <span className="text-[12px] text-red-500 italic">
-                                          {props.errors.expirationYear && "**"}
-                                        </span>
-                                      </label>
-                                    </div>
-                                    <div
-                                      className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
-                                    >
-                                      <select
-                                        className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
-                                        value={props.values.expirationYear}
-                                        onChange={props.handleChange}
-                                        onBlur={props.handleBlur}
-                                        name="expirationYear"
-                                      >
-                                        <option
-                                          value=""
-                                          className="text-dark-gray"
+                                        <label
+                                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
+                                          htmlFor="expiration"
                                         >
-                                          Year
-                                        </option>
-                                        {expireYear?.length &&
-                                          expireYear.map((item, index) => (
-                                            <option key={index} value={item}>
-                                              {item}
-                                            </option>
-                                          ))}
-                                      </select>
+                                          Exp Month{" "}
+                                          <span className="text-red-700 text-sm italic">
+                                            *
+                                          </span>
+                                          <span className="text-[12px] text-red-500 ml-1">
+                                            {props.errors.expirationMonth && "**"}
+                                          </span>
+                                        </label>
+                                      </div>
+                                      <div
+                                        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
+                                      >
+                                        <select
+                                          className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
+                                          value={props.values.expirationMonth}
+                                          onChange={props.handleChange}
+                                          onBlur={props.handleBlur}
+                                          name="expirationMonth"
+                                        >
+                                          <option
+                                            value=""
+                                            className="text-dark-gray"
+                                          >
+                                            Month
+                                          </option>
+                                          {expireMonth?.length &&
+                                            expireMonth.map((item, index) => (
+                                              <option
+                                                key={index}
+                                                value={
+                                                  Number(item.value) < 10
+                                                    ? "0" + item.value
+                                                    : item.value
+                                                }
+                                              >
+                                                {item.name}
+                                              </option>
+                                            ))}
+                                        </select>
+                                      </div>
+                                    </div>
+                                  </div>
+
+                                  <div className="field w-full mb-6 xl:mb-0 col-span-1">
+                                    <div className="select-option">
+                                      <div
+                                        className={`flex items-center justify-between mb-2.5`}
+                                      >
+                                        <label
+                                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center line-clamp-3"
+                                          htmlFor="expiration"
+                                        >
+                                          Exp Year{" "}
+                                          <span className="text-red-700 text-sm tracking-wide">
+                                            *
+                                          </span>
+                                          <span className="text-[12px] text-red-500 italic">
+                                            {props.errors.expirationYear && "**"}
+                                          </span>
+                                        </label>
+                                      </div>
+                                      <div
+                                        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
+                                      >
+                                        <select
+                                          className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
+                                          value={props.values.expirationYear}
+                                          onChange={props.handleChange}
+                                          onBlur={props.handleBlur}
+                                          name="expirationYear"
+                                        >
+                                          <option
+                                            value=""
+                                            className="text-dark-gray"
+                                          >
+                                            Year
+                                          </option>
+                                          {expireYear?.length &&
+                                            expireYear.map((item, index) => (
+                                              <option key={index} value={item}>
+                                                {item}
+                                              </option>
+                                            ))}
+                                        </select>
+                                      </div>
                                     </div>
                                   </div>
                                 </div>
                               </div>
-                            </div>
 
-                            {/* Address and CVV */}
-                            <div className="flex items-center flex-1 gap-3 my-2">
-                              <div className="field w-full col-span-1 flex-[0.4]">
-                                <InputCom
-                                  fieldClass="px-6"
-                                  spanTag="*"
-                                  iconName={cardIcons}
-                                  label="CVV"
-                                  type="text"
-                                  name="cvv"
-                                  placeholder="CVV"
-                                  maxLength={3}
-                                  value={props.values.cvv}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                  error={props.errors.cvv}
-                                />
+                              {/* Address and CVV */}
+                              <div className="flex items-center flex-1 gap-3 my-2">
+                                <div className="field w-full col-span-1 flex-[0.4]">
+                                  <InputCom
+                                    fieldClass="px-6"
+                                    spanTag="*"
+                                    iconName={cardIcons}
+                                    label="CVV"
+                                    type="text"
+                                    name="cvv"
+                                    placeholder="CVV"
+                                    maxLength={3}
+                                    value={props.values.cvv}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    error={props.errors.cvv}
+                                  />
+                                </div>
+                                <div className="field w-full flex-[0.6]">
+                                  <InputCom
+                                    fieldClass="px-6"
+                                    spanTag="*"
+                                    label="Billing Address"
+                                    type="text"
+                                    name="address"
+                                    placeholder="Billing Address"
+                                    value={props.values.Address}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    error={props.errors.address}
+                                  />
+                                </div>
                               </div>
-                              <div className="field w-full flex-[0.6]">
-                                <InputCom
-                                  fieldClass="px-6"
-                                  spanTag="*"
-                                  label="Billing Address"
-                                  type="text"
-                                  name="address"
-                                  placeholder="Billing Address"
-                                  value={props.values.Address}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                  error={props.errors.address}
-                                />
-                              </div>
-                            </div>
 
-                            {/* Postal Code and State */}
-                            <div className="sm:grid gap-5 grid-cols-3 my-2">
-                              <div className="field w-full xl:mb-0 col-span-1">
-                                <InputCom
-                                  fieldClass="px-6"
-                                  spanTag="*"
-                                  label="Postal Code"
-                                  type="number"
-                                  name="code"
-                                  placeholder="Postal Code"
-                                  value={props.values.code}
-                                  maxLength={6}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                  error={props.errors.code}
-                                />
-                              </div>
-                              <div className="field w-full col-span-1">
-                                <InputCom
-                                  fieldClass="px-6"
-                                  spanTag="*"
-                                  label="State"
-                                  type="text"
-                                  name="state"
-                                  placeholder="State"
-                                  value={props.values.state.toUpperCase()}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                  error={props.errors.state}
-                                />
+                              {/* Postal Code and State */}
+                              <div className="sm:grid gap-5 grid-cols-3 my-2">
+                                <div className="field w-full xl:mb-0 col-span-1">
+                                  <InputCom
+                                    fieldClass="px-6"
+                                    spanTag="*"
+                                    label="Postal Code"
+                                    type="number"
+                                    name="code"
+                                    placeholder="Postal Code"
+                                    value={props.values.code}
+                                    maxLength={6}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    error={props.errors.code}
+                                  />
+                                </div>
+                                <div className="field w-full col-span-1">
+                                  <InputCom
+                                    fieldClass="px-6"
+                                    spanTag="*"
+                                    label="State"
+                                    type="text"
+                                    name="state"
+                                    placeholder="State"
+                                    value={props.values.state.toUpperCase()}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    error={props.errors.state}
+                                  />
+                                </div>
                               </div>
                             </div>
                           </div>
                         </div>
-                      </div>
 
-                      <div className="add-fund-btn flex justify-end items-center gap-2 mt-4">
-                        <button
-                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
-                          onClick={handleClose}
-                        >
-                          Cancel
-                        </button>
-                        <button
-                          type="submit"
-                          className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                        >
-                          {props.confirmCredit?.show?.awaitConfirm?.loader ? (
-                            <LoadingSpinner size="6" color="sky-blue" />
-                          ) : (
-                            <>
-                              <span className="text-white">Continue</span>{" "}
-                              <Icons name="chevron-right" />
-                            </>
-                          )}
-                        </button>
-                      </div>
-                    </Form>
-                  );
-                }}
-              </Formik>
-            </div>
+                        <div className="add-fund-btn flex justify-end items-center gap-2 mt-4">
+                          <button
+                            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
+                            onClick={handleClose}
+                          >
+                            Cancel
+                          </button>
+                          <button
+                            type="submit"
+                            className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                          >
+                            {props.confirmCredit?.show?.awaitConfirm?.loader ? (
+                              <LoadingSpinner size="6" color="sky-blue" />
+                            ) : (
+                              <>
+                                <span className="text-white">Continue</span>{" "}
+                                <Icons name="chevron-right" />
+                              </>
+                            )}
+                          </button>
+                        </div>
+                      </Form>
+                    );
+                  }}
+                </Formik>
+              </div>
+            :
+            null
+            }
           </div>
         )}
       </div>

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -26,46 +26,59 @@ function AddFundPop({
   };
 
   const handleSubmit = async () => {
-    setInputError("");
-    setConfirmCredit((prev) => ({
-      ...prev,
-      show: { awaitConfirm: { loader: true } },
-    }));
-
-    if (!input || input === "0") {
-      setConfirmCredit((prev) => ({
-        ...prev,
-        show: { awaitConfirm: { loader: false } },
-      }));
-      setInputError("Please Enter Amount");
-      setTimeout(() => setInputError(""), 5000);
-      return;
-    }
-
-    if (Number(input) * 100 > Number(walletItem?.transfer_limit)) {
-      setInputError("Credit limit has been exceeded");
-      setTimeout(() => setInputError(""), 5000);
-      return;
-    }
-
-    if (isNaN(input)) {
-      setConfirmCredit((prev) => ({
-        ...prev,
-        show: { awaitConfirm: { loader: false } },
-      }));
-      setInputError("Amount must be a Number");
-      setTimeout(() => setInputError(""), 5000);
-      return;
-    }
-
-    let stateData = {
-      amount: Number(input) * 100,
-      currency: walletItem?.code,
-    };
-
     try {
+      // Clear any previous input error and set the loading spinner to be shown
+      setInputError("");
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: true } },
+      }));
+
+      // Perform validation checks on the input amount
+      if (!input || input === "0") {
+        // Handle input validation error
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: { awaitConfirm: { loader: false } },
+        }));
+        setInputError("Please Enter Amount");
+        setTimeout(() => setInputError(""), 5000);
+        return;
+      }
+
+      if (Number(input) * 100 > Number(walletItem?.transfer_limit)) {
+        // Handle credit limit exceeded error
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: { awaitConfirm: { loader: false } },
+        }));
+        setInputError("Credit limit has been exceeded");
+        setTimeout(() => setInputError(""), 5000);
+        return;
+      }
+
+      if (isNaN(input)) {
+        // Handle invalid input error
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: { awaitConfirm: { loader: false } },
+        }));
+        setInputError("Amount must be a Number");
+        setTimeout(() => setInputError(""), 5000);
+        return;
+      }
+
+      // Prepare state data for API call
+      let stateData = {
+        amount: Number(input) * 100,
+        currency: walletItem?.code,
+      };
+
+      // Make API call to start credit process
       const res = await apiCall.getStartCredit(stateData);
+
       if (res.data.internal_return < 0) {
+        // Handle API error
         setConfirmCredit((prev) => ({
           ...prev,
           show: { awaitConfirm: { loader: false } },
@@ -75,6 +88,7 @@ function AddFundPop({
         return;
       }
 
+      // Update state with response data
       const _response = res.data;
       stateData.amount = Number(input);
       stateData.currency = currency;
@@ -91,6 +105,7 @@ function AddFundPop({
         }));
       }, 1500);
     } catch (error) {
+      // Handle API call error
       setConfirmCredit((prev) => ({
         ...prev,
         show: { awaitConfirm: { loader: false } },
@@ -116,6 +131,7 @@ function AddFundPop({
                   placeholder="0"
                   value={input}
                   inputHandler={handleChange}
+                  tabIndex={0}
                 />
                 <p className="text-base text-red-500 italic h-5">
                   {inputError && inputError}

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -1,7 +1,12 @@
-import React from "react";
-
+/**
+ * Renders a modal with information about a credit transaction.
+ * @returns {JSX.Element} - The rendered modal component.
+ */
 function CompleteConfirmCredit({ onClose, confirmCredit }) {
   const { data } = confirmCredit;
+  const isSuccess =
+    data?.result === "Charge success" || data?.status === "successful";
+
   return (
     <div className="logout-modal-body w-full flex flex-col items-center">
       <div className="content-wrapper w-full h-[32rem]">
@@ -11,91 +16,80 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
               <div className="field w-full mb-3 min-h-[45px]">
                 <div
                   className={`flex flex-col gap-4 ${
-                    data?.result !== "Charge success" &&
-                    "h-[328px] items-center justify-center"
+                    !isSuccess && "h-[328px] items-center justify-center"
                   }`}
                 >
-                  {/* Success Icon for now */}
                   <div className="flex items-center w-full justify-center">
-                    {data?.result == "Charge success" ||
-                    data?.status == "successful" ? (
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="100"
-                        height="100"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="green"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        className="feather feather-check-circle"
-                      >
-                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
-                      </svg>
-                    ) : (
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        width="100"
-                        height="100"
-                        stroke="red"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        className="feather feather-x-circle"
-                      >
-                        <circle cx="12" cy="12" r="10"></circle>
-                        <line x1="15" y1="9" x2="9" y2="15"></line>
-                        <line x1="9" y1="9" x2="15" y2="15"></line>
-                      </svg>
-                    )}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="100"
+                      height="100"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke={isSuccess ? "green" : "red"}
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className={`feather ${
+                        isSuccess ? "feather-check-circle" : "feather-x-circle"
+                      }`}
+                    >
+                      {isSuccess ? (
+                        <>
+                          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                          <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                        </>
+                      ) : (
+                        <>
+                          <circle cx="12" cy="12" r="10"></circle>
+                          <line x1="15" y1="9" x2="9" y2="15"></line>
+                          <line x1="9" y1="9" x2="15" y2="15"></line>
+                        </>
+                      )}
+                    </svg>
                   </div>
 
-                  <div className={`flex items-center`}>
+                  <div className="flex items-center">
                     <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {data?.result == "Charge success" ||
-                      data?.status == "successful"
+                      {isSuccess
                         ? "Credit was Successful!"
                         : "Credit was Unsuccessful"}
                     </h1>
                   </div>
 
                   {data?.internal_return >= 0 &&
-                  data?.result !== "Charge failed" ? (
-                    <>
-                      <div className="flex items-center gap-8">
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          Amount({data?.currency || ""})
-                        </h1>
-                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          {`${data?.symbol || ""} ${
-                            Number(data?.amount * 0.01).toLocaleString() || ""
-                          }`}
-                        </span>
-                      </div>
+                    data?.result !== "Charge failed" && (
+                      <>
+                        <div className="flex items-center gap-8">
+                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            Amount({data?.currency || ""})
+                          </h1>
+                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            {`${data?.symbol || ""} ${
+                              Number(data?.amount * 0.01).toLocaleString() || ""
+                            }`}
+                          </span>
+                        </div>
 
-                      <div className="flex items-center gap-8">
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          Wallet Balance
-                        </h1>
-                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          {data?.curr_balance}
-                        </span>
-                      </div>
+                        <div className="flex items-center gap-8">
+                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            Wallet Balance
+                          </h1>
+                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            {data?.curr_balance * 0.01}
+                          </span>
+                        </div>
 
-                      <div className="flex items-center gap-8">
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          Confirmation Number
-                        </h1>
-                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          {data?.confirmation}
-                        </span>
-                      </div>
-                    </>
-                  ) : null}
+                        <div className="flex items-center gap-8">
+                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            Confirmation Number
+                          </h1>
+                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            {data?.confirmation}
+                          </span>
+                        </div>
+                      </>
+                    )}
                 </div>
               </div>
             </div>

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -1,84 +1,102 @@
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 import React, { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { toast } from "react-toastify";
 import debounce from "../../../hooks/debounce";
 import usersService from "../../../services/UsersService";
-import { tableReload } from "../../../store/TableReloads";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
+/**
+ * Renders a React component that displays the description and last four digits of a payment card.
+ */
 function ThePaymentText({ value, type }) {
-  const cardDetails = value;
-  value.description =
-    type === "new"
-      ? cardDetails.cardNum[0] === "4"
-        ? "Visa"
-        : cardDetails.cardNum[0] == "5"
-        ? "Master"
-        : "ATM"
-      : value.description;
-  value.digits = type === "new" ? cardDetails.cardNum.slice(-4) : value.digits;
+  const { cardNum } = value;
+  let description = value.description;
+  let digits = value.digits;
+
+  if (type === "new") {
+    const firstDigit = cardNum[0];
+    if (firstDigit === "4") {
+      description = "Visa";
+    } else if (firstDigit === "5") {
+      description = "Master";
+    } else {
+      description = "ATM";
+    }
+    digits = cardNum.slice(-4);
+  }
+
   return (
     <div className="my-2 flex items-center gap-5">
       <div className="card-details flex items-center gap-3">
-        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
-          {value.description} Card
+        <h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
+          {description} Card
         </h1>
-        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
-          Bank **************{value.digits}
+        <p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
+          Bank **************{digits}
         </p>
       </div>
     </div>
   );
 }
 
+/**
+ * Renders the amount of a transaction in a specific currency.
+ * @returns {JSX.Element} - The rendered component.
+ */
 function AmountSection({ currency, amount, country }) {
-  const formattedAmount = Number(amount).toFixed(2);
+  const formattedAmount = amount?.toFixed(2);
+  const gapClassName = country === "US" ? "gap-14" : "gap-4";
+
   return (
-    <div
-      className={`flex items-center ${country == "US" ? "gap-14" : "gap-4"}`}
-    >
+    <div className={`flex items-center ${gapClassName}`}>
       <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
         Amount({currency})
       </h1>
-      <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedAmount}
       </span>
     </div>
   );
 }
 
+/**
+ * Renders the transaction fee for a payment.
+ * @returns {JSX.Element} - Rendered JSX displaying the transaction fee with the label "Transaction Fee".
+ */
 function TransactionFeeSection({ currency, fee, country }) {
-  const formattedFee = Number(fee).toFixed(2);
+  const formattedFee = (+fee).toFixed(2);
+  const gapClass = country === "US" ? "gap-[2.7rem]" : "gap-4";
+
   return (
-    <div
-      className={`flex items-center border-b border-gray-600 ${
-        country == "US" ? "gap-[2.7rem]" : "gap-4"
-      }`}
-    >
+    <div className={`flex items-center border-b border-gray-600 ${gapClass}`}>
       <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
         Transaction Fee
       </h1>
-      <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedFee}
       </span>
     </div>
   );
 }
 
+/**
+ * Calculates the total amount by adding the `amount` and `fee` values together.
+ * Formats the total amount to two decimal places and displays it.
+ * @returns {JSX.Element} - The TotalSection component.
+ */
 function TotalSection({ currency, amount, fee, country }) {
   const total = Number(amount) + Number(fee);
-  const formattedTotal = total.toFixed(2);
+  const formattedTotal = total?.toFixed(2);
+
+  const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";
+
   return (
-    <div
-      className={`flex items-center ${
-        country == "US" ? "gap-[8rem]" : "gap-[6.3rem]"
-      }`}
-    >
+    <div className={`flex items-center ${gap}`}>
       <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
         Total
       </h1>
-      <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedTotal}
       </span>
     </div>
@@ -102,8 +120,6 @@ function ConfirmAddFund({
 
   const { userDetails } = useSelector((state) => state?.userDetails);
 
-  const dispatch = useDispatch();
-
   const [requestStatus, setRequestStatus] = useState({
     message: "",
     loading: false,
@@ -127,7 +143,7 @@ function ConfirmAddFund({
       logo: "https://www.wrenchboard.com/assets/images/wrench-500-500-icon.png",
     },
   };
-  //debugger;
+
   const fwConfig = {
     ...config,
     text: "Proceed",
@@ -162,8 +178,6 @@ function ConfirmAddFund({
             status: false,
           });
         }
-
-        return dispatch(tableReload({ type: "WALLETTABLE" }));
       })
       .catch((err) => {
         setRequestStatus({
@@ -188,27 +202,40 @@ function ConfirmAddFund({
 
   const debouncedSuccessPayment = debounce(onSuccessPayment, 5000);
 
+  /**
+   * Handles the process of making a payment using a previously saved card.
+   * Updates the state to show a loader while the payment is being processed,
+   * sends a request to the server to make the payment, and updates the state with the response.
+   * If the payment is successful, it also dispatches an action to reload the wallet table.
+   */
   const handlePrevCard = async () => {
-    const { amount, credit_reference, currency } = __confirmData;
-    const { card_uid } = __confirmCardDetails;
-
-    const reqData = {
-      amount: amount * 100,
-      card_uid,
-      credit_reference,
-      currency,
-    };
-
     try {
+      // Show loader while the payment is being processed
       setConfirmCredit((prev) => ({
         ...prev,
         show: {
           acceptConfirm: { loader: true },
         },
       }));
+
+      // Extract necessary data from confirmCredit and confirmCardDetails objects
+      const { amount, credit_reference, currency } = __confirmData;
+      const { card_uid } = __confirmCardDetails;
+
+      // Create request data object with required parameters for making the payment
+      const reqData = {
+        amount: amount * 100,
+        card_uid,
+        credit_reference,
+        currency,
+      };
+
+      // Send request to server to make the payment using getPaidPrevCard method of usersService
       const res = await apiURL.getPaidPrevCard(reqData);
       const _response = res.data;
-      if (res.data.internal_return < 0) {
+
+      // If internal_return value in the response is less than 0, hide the loader and return
+      if (_response.internal_return < 0) {
         setConfirmCredit((prev) => ({
           ...prev,
           show: {
@@ -218,6 +245,7 @@ function ConfirmAddFund({
         return;
       }
 
+      // Update state to show the acceptConfirm state and the response data
       setTimeout(() => {
         setConfirmCredit((prev) => ({
           ...prev,
@@ -227,9 +255,9 @@ function ConfirmAddFund({
           },
           data: _response,
         }));
-        dispatch(tableReload({ type: "WALLETTABLE" }));
       }, 1500);
     } catch (error) {
+      // Handle error and hide the loader
       setConfirmCredit((prev) => ({
         ...prev,
         show: {
@@ -240,45 +268,45 @@ function ConfirmAddFund({
     }
   };
 
+  /**
+   * Handles the payment process when a new card is used.
+   * @async
+   */
   const handleNewCard = async () => {
-    const { amount, credit_reference, uid } = __confirmData;
-    const { address, cardNum, cvv, expirationMonth, expirationYear } =
-      __confirmCardDetails;
-
-    const reqData = {
-      amount: amount * 100,
-      cardnumber: cardNum.replace(/\s/g, ""),
-      credit_reference,
-      cvc: cvv,
-      description: address,
-      exp_month: expirationMonth,
-      exp_year: expirationYear,
-      paymenttype: 100,
-      uid,
-    };
-
     try {
+      // Extract necessary data from __confirmData and __confirmCardDetails
+      const { amount, credit_reference, uid } = __confirmData;
+      const { address, cardNum, cvv, expirationMonth, expirationYear } =
+        __confirmCardDetails;
+
+      // Set loading state to indicate payment is being processed
       setConfirmCredit((prev) => ({
         ...prev,
         show: {
           acceptConfirm: { loader: true },
         },
       }));
+
+      // Prepare request data
+      const reqData = {
+        amount: amount * 100,
+        cardnumber: cardNum.replace(/\s/g, ""),
+        credit_reference,
+        cvc: cvv,
+        description: address,
+        exp_month: expirationMonth,
+        exp_year: expirationYear,
+        paymenttype: 100,
+        uid,
+      };
+
+      // Send request to server to process payment
       const res = await apiURL.getPaidNewCard(reqData);
       const _response = res.data;
-      if (res.data.internal_return < 0) {
-        setConfirmCredit((prev) => ({
-          ...prev,
-          show: {
-            awaitConfirm: { loader: false, state: false },
-            acceptConfirm: { loader: false, state: true },
-          },
-          data: _response,
-        }));
-        return;
-      }
 
-      setTimeout(() => {
+      // Handle response from server
+      if (res.data.internal_return < 0) {
+        // Payment could not be completed
         setConfirmCredit((prev) => ({
           ...prev,
           show: {
@@ -287,9 +315,21 @@ function ConfirmAddFund({
           },
           data: _response,
         }));
-        dispatch(tableReload({ type: "WALLETTABLE" }));
-      }, 1500);
+      } else {
+        // Payment was successful
+        setTimeout(() => {
+          setConfirmCredit((prev) => ({
+            ...prev,
+            show: {
+              awaitConfirm: { loader: false, state: false },
+              acceptConfirm: { loader: false, state: true },
+            },
+            data: _response,
+          }));
+        }, 1500);
+      }
     } catch (error) {
+      // Handle error during payment process
       setConfirmCredit((prev) => ({
         ...prev,
         show: {
@@ -362,7 +402,7 @@ function ConfirmAddFund({
                     <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">
+                    <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
                       {__confirmData?.credit_reference}
                     </span>
                   </div>

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -6,7 +6,7 @@ import CompleteConfirmCredit from "./CompleteConfirmCredit";
 import ConfirmAddFund from "./ConfirmAddFund";
 
 const CreditPopup = ({ details, onClose, situation, walletItem }) => {
-  let [input, setInput] = useState("");
+  const [input, setInput] = useState("");
   const [confirmCredit, setConfirmCredit] = useState({
     show: {
       awaitConfirm: { loader: false, state: false },
@@ -15,6 +15,20 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     data: {},
   });
 
+  const getTitle = () => {
+    if (confirmCredit?.show?.acceptConfirm?.state) {
+      if (confirmCredit?.data?.internal_return < 0) {
+        return "Credit Unsuccessful";
+      } else {
+        return "Credit Add Completed";
+      }
+    } else if (confirmCredit?.show?.awaitConfirm?.state) {
+      return "Confirm Credit Add";
+    } else {
+      return "Add Credit";
+    }
+  };
+
   return (
     <ModalCom
       action={onClose}
@@ -24,23 +38,9 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            {confirmCredit?.show?.acceptConfirm?.state &&
-            (confirmCredit?.data?.internal_return < 0 
-              // ||
-              // confirmCredit?.data?.status !== "successful"
-              ) ? (
-              "Credit Unsuccessful"
-            ) : (
-              <>
-                {confirmCredit?.show?.acceptConfirm?.loader
-                  ? "Confirming Credit..."
-                  : confirmCredit?.show?.awaitConfirm?.state
-                  ? "Confirm Credit Add"
-                  : confirmCredit?.show?.acceptConfirm?.state
-                  ? "Credit Add Completed"
-                  : "Add Credit"}
-              </>
-            )}
+            {confirmCredit?.show?.acceptConfirm?.loader
+              ? "Confirming Credit..."
+              : getTitle()}
           </h1>
           <button
             type="button"

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -12,6 +12,8 @@ function NairaWithdraw({
   state,
   setShowConfirmNairaWithdraw,
 }) {
+
+  let MaxNoOfBanks = process.env.REACT_APP_MAX_CREDIT_BANK_ACCOUNT // HOLDS THE VALUE OF THE MAX NUMBER OF BANKS USER CAN ADD
   const apiCall = new usersService();
   const [tab, setTab] = useState("previous");
   let [requestStatus, setRequestStatus] = useState(false);
@@ -422,7 +424,7 @@ function NairaWithdraw({
                         <label
                           onClick={() => setTab("new")}
                           htmlFor="new"
-                          className="cursor-pointer flex items-center gap-1"
+                          className={`cursor-pointer flex items-center gap-1 ${recipients.data.length >= MaxNoOfBanks ? 'pointer-events-none':''}`}
                         >
                           <input
                             id="new"
@@ -434,7 +436,7 @@ function NairaWithdraw({
                               tab == "new" ? "" : ""
                             }  tracking-wide transition duration-200`}
                           />
-                          New Account{" "}
+                          New Account{" "} {recipients.data.length >= MaxNoOfBanks && <span className="text-[14px] text-red-500">Max Reached</span>}
                         </label>
                       </div>
                     </div>
@@ -522,273 +524,280 @@ function NairaWithdraw({
                       )}
 
                       {tab == "new" && (
-                        <div className="w-full mt-3 rounded-md bg-slate-100">
-                          <div className="relative fields w-full flex flex-col p-4">
-                            <div className="flex flex-[2] min-h-[52px]">
-                              {/* country */}
-                              <div className="add-recipient w-full flex items-center flex-1 xl:mb-0">
-                                <label
-                                  htmlFor="newAccount.country"
-                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
-                                >
-                                  Country{" "}
-                                  <span className="text-red-500">*</span>
-                                </label>
-                                <select
-                                  className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px]"
-                                  name="newAccount.country"
-                                  value={props.values.newAccount?.country}
-                                  onChange={(e) => {
-                                    props.handleChange(e);
-                                    handleBankOptions(e);
-                                  }}
-                                >
-                                  {allCountries.loading ? (
-                                    <option
-                                      className="text-slate-500 text-lg"
-                                      value=""
-                                    >
-                                      Loading...
-                                    </option>
-                                  ) : allCountries.data?.length ? (
-                                    <>
-                                      <option
-                                        className="text-slate-500 text-lg"
-                                        value=""
-                                      >
-                                        {errorMsgs.newAccount?.country
-                                          ? errorMsgs.newAccount.country
-                                          : "Select..."}
-                                      </option>
-                                      {allCountries.data.map((item, index) => (
-                                        <option
-                                          key={index}
-                                          className="text-slate-500 text-lg"
-                                          value={item[0]}
-                                        >
-                                          {item[1]}
-                                        </option>
-                                      ))}
-                                    </>
-                                  ) : (
-                                    <option
-                                      className="text-slate-500 text-lg"
-                                      value=""
-                                    >
-                                      No Options Found!
-                                    </option>
-                                  )}
-                                </select>
-                                {/* {props.errors.country &&
-                                  props.touched.country && (
-                                    <p className="text-sm text-red-500">
-                                      {props.errors.country}
-                                    </p>
-                                  )} */}
-                              </div>
-
-                              {/* bank name */}
-                              <div className="add-recipient w-full flex items-center flex-1">
-                                <label
-                                  htmlFor="newAccount.bank"
-                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4] tracking-[1.5px]"
-                                >
-                                  Bank Name{" "}
-                                  <span className="text-red-500">*</span>
-                                </label>
-                                <select
-                                  className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
-                                  name="newAccount.bank"
-                                  value={props.values.newAccount?.bank}
-                                  onChange={props.handleChange}
-                                  onBlur={props.handleBlur}
-                                >
-                                  {bankName.loading ? (
-                                    <option
-                                      className="text-slate-500 text-lg"
-                                      value=""
-                                    >
-                                      Loading...
-                                    </option>
-                                  ) : bankName.data?.length ? (
-                                    <>
-                                      <option
-                                        className="text-slate-500 text-lg"
-                                        value=""
-                                      >
-                                        Select...
-                                      </option>
-                                      {bankName.data?.map((item, index) => (
-                                        <option
-                                          key={index}
-                                          className="text-slate-500 text-lg"
-                                          value={item.bank_uid}
-                                        >
-                                          {item.name}
-                                        </option>
-                                      ))}
-                                    </>
-                                  ) : (
-                                    <option
-                                      className="text-slate-500 text-lg"
-                                      value=""
-                                    >
-                                      {allCountries.data?.length
-                                        ? "Select..."
-                                        : "No Options Found!"}
-                                    </option>
-                                  )}
-                                </select>
-                                {/* {props.errors.bank && props.touched.bank && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.bank}
-                                  </p>
-                                )} */}
-                              </div>
-                            </div>
-
-                            <div className="flex flex-[2] gap-4">
-                              {/* ACCOUNT NUMBER */}
-                              <div className="field w-full flex-[1.4] flex items-center gap-2">
-                                <label
-                                  htmlFor="newAccount.accountNumber"
-                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex items-center flex-1"
-                                >
-                                  Account Number{" "}
-                                  <span className="text-red-500">*</span>
-                                </label>
-                                <InputCom
-                                  fieldClass="px-6 tracking-[1.5px]"
-                                  inputClass="flex items-center max-w-[15rem]"
-                                  type="text"
-                                  name="newAccount.accountNumber"
-                                  placeholder="Account No"
-                                  maxLength={10}
-                                  value={props.values.newAccount?.accountNumber}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                />
-                                {/* {props.errors.accountNumber &&
-                                  props.touched.accountNumber && (
-                                    <p className="text-sm text-red-500">
-                                      {props.errors.accountNumber}
-                                    </p>
-                                  )} */}
-                              </div>
-
-                              {/* Account Type */}
-                              <div className="add-recipient w-full flex flex-1 items-center">
-                                <label
-                                  htmlFor="newAccount.accountType"
-                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
-                                >
-                                  Type <span className="text-red-500">*</span>
-                                </label>
-                                <select
-                                  className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
-                                  name="newAccount.accountType"
-                                  value={props.values.newAccount?.accountType}
-                                  onChange={props.handleChange}
-                                  onBlur={props.handleBlur}
-                                >
-                                  {accType.loading ? (
-                                    <option
-                                      className="text-slate-500 text-lg"
-                                      value=""
-                                    >
-                                      Loading...
-                                    </option>
-                                  ) : accType.data?.length ? (
-                                    <>
-                                      <option
-                                        className="text-slate-500 text-lg"
-                                        value=""
-                                      >
-                                        Select...
-                                      </option>
-                                      {accType.data?.map((item, index) => (
-                                        <option
-                                          key={index}
-                                          className="text-slate-500 text-lg"
-                                          value={item.value}
-                                        >
-                                          {item.name}
-                                        </option>
-                                      ))}
-                                    </>
-                                  ) : (
-                                    <option
-                                      className="text-slate-500 text-lg"
-                                      value=""
-                                    >
-                                      No Options Found!
-                                    </option>
-                                  )}
-                                </select>
-                                {/* {props.errors.accountType &&
-                                  props.touched.accountType && (
-                                    <p className="text-sm text-red-500">
-                                      {props.errors.accountType}
-                                    </p>
-                                  )} */}
-                              </div>
-                            </div>
-
-                            <div className="flex items-center flex-1">
-                              {/* state */}
-                              <div className="field w-full flex items-center gap-4 flex-[0.4]">
-                                <label
-                                  htmlFor="newAccount.state"
-                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
-                                >
-                                  State <span className="text-red-500">*</span>
-                                </label>
-                                <InputCom
-                                  fieldClass="px-6 tracking-[1.5px]"
-                                  inputClass="max-w-[10rem]"
-                                  type="text"
-                                  name="newAccount.state"
-                                  placeholder="State/Province"
-                                  value={props.values.newAccount?.state}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                />
-                                {/* {props.errors.state && props.touched.state && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.state}
-                                  </p>
-                                )} */}
-                              </div>
-
-                              {/* city */}
-                              <div className="field w-full flex items-center flex-[0.4]">
-                                <label
-                                  htmlFor="newAccount.city"
-                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
-                                >
-                                  City <span className="text-red-500">*</span>
-                                </label>
-                                <InputCom
-                                  fieldClass="px-6 tracking-[1.5px]"
-                                  type="text"
-                                  inputClass="max-w-[10rem]"
-                                  name="newAccount.city"
-                                  placeholder="City"
-                                  value={props.values.newAccount?.city}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                />
-                                {/* {props.errors.city && props.touched.city && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.city}
-                                  </p>
-                                )} */}
-                              </div>
-                            </div>
-
-                            {/* end of inputs for new accounts */}
+                        recipients.loading ?
+                          <div className="mt-3 flex flex-col w-full h-[188px] justify-center items-center">
+                            <LoadingSpinner size='10' color='sky-blue' />
                           </div>
-                        </div>
+                        :recipients.data.length < MaxNoOfBanks ?
+                          <div className="w-full mt-3 rounded-md bg-slate-100">
+                            <div className="relative fields w-full flex flex-col p-4">
+                              <div className="flex flex-[2] min-h-[52px]">
+                                {/* country */}
+                                <div className="add-recipient w-full flex items-center flex-1 xl:mb-0">
+                                  <label
+                                    htmlFor="newAccount.country"
+                                    className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
+                                  >
+                                    Country{" "}
+                                    <span className="text-red-500">*</span>
+                                  </label>
+                                  <select
+                                    className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px]"
+                                    name="newAccount.country"
+                                    value={props.values.newAccount?.country}
+                                    onChange={(e) => {
+                                      props.handleChange(e);
+                                      handleBankOptions(e);
+                                    }}
+                                  >
+                                    {allCountries.loading ? (
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        Loading...
+                                      </option>
+                                    ) : allCountries.data?.length ? (
+                                      <>
+                                        <option
+                                          className="text-slate-500 text-lg"
+                                          value=""
+                                        >
+                                          {errorMsgs.newAccount?.country
+                                            ? errorMsgs.newAccount.country
+                                            : "Select..."}
+                                        </option>
+                                        {allCountries.data.map((item, index) => (
+                                          <option
+                                            key={index}
+                                            className="text-slate-500 text-lg"
+                                            value={item[0]}
+                                          >
+                                            {item[1]}
+                                          </option>
+                                        ))}
+                                      </>
+                                    ) : (
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        No Options Found!
+                                      </option>
+                                    )}
+                                  </select>
+                                  {/* {props.errors.country &&
+                                    props.touched.country && (
+                                      <p className="text-sm text-red-500">
+                                        {props.errors.country}
+                                      </p>
+                                    )} */}
+                                </div>
+
+                                {/* bank name */}
+                                <div className="add-recipient w-full flex items-center flex-1">
+                                  <label
+                                    htmlFor="newAccount.bank"
+                                    className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4] tracking-[1.5px]"
+                                  >
+                                    Bank Name{" "}
+                                    <span className="text-red-500">*</span>
+                                  </label>
+                                  <select
+                                    className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
+                                    name="newAccount.bank"
+                                    value={props.values.newAccount?.bank}
+                                    onChange={props.handleChange}
+                                    onBlur={props.handleBlur}
+                                  >
+                                    {bankName.loading ? (
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        Loading...
+                                      </option>
+                                    ) : bankName.data?.length ? (
+                                      <>
+                                        <option
+                                          className="text-slate-500 text-lg"
+                                          value=""
+                                        >
+                                          Select...
+                                        </option>
+                                        {bankName.data?.map((item, index) => (
+                                          <option
+                                            key={index}
+                                            className="text-slate-500 text-lg"
+                                            value={item.bank_uid}
+                                          >
+                                            {item.name}
+                                          </option>
+                                        ))}
+                                      </>
+                                    ) : (
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        {allCountries.data?.length
+                                          ? "Select..."
+                                          : "No Options Found!"}
+                                      </option>
+                                    )}
+                                  </select>
+                                  {/* {props.errors.bank && props.touched.bank && (
+                                    <p className="text-sm text-red-500">
+                                      {props.errors.bank}
+                                    </p>
+                                  )} */}
+                                </div>
+                              </div>
+
+                              <div className="flex flex-[2] gap-4">
+                                {/* ACCOUNT NUMBER */}
+                                <div className="field w-full flex-[1.4] flex items-center gap-2">
+                                  <label
+                                    htmlFor="newAccount.accountNumber"
+                                    className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex items-center flex-1"
+                                  >
+                                    Account Number{" "}
+                                    <span className="text-red-500">*</span>
+                                  </label>
+                                  <InputCom
+                                    fieldClass="px-6 tracking-[1.5px]"
+                                    inputClass="flex items-center max-w-[15rem]"
+                                    type="text"
+                                    name="newAccount.accountNumber"
+                                    placeholder="Account No"
+                                    maxLength={10}
+                                    value={props.values.newAccount?.accountNumber}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                  />
+                                  {/* {props.errors.accountNumber &&
+                                    props.touched.accountNumber && (
+                                      <p className="text-sm text-red-500">
+                                        {props.errors.accountNumber}
+                                      </p>
+                                    )} */}
+                                </div>
+
+                                {/* Account Type */}
+                                <div className="add-recipient w-full flex flex-1 items-center">
+                                  <label
+                                    htmlFor="newAccount.accountType"
+                                    className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
+                                  >
+                                    Type <span className="text-red-500">*</span>
+                                  </label>
+                                  <select
+                                    className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
+                                    name="newAccount.accountType"
+                                    value={props.values.newAccount?.accountType}
+                                    onChange={props.handleChange}
+                                    onBlur={props.handleBlur}
+                                  >
+                                    {accType.loading ? (
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        Loading...
+                                      </option>
+                                    ) : accType.data?.length ? (
+                                      <>
+                                        <option
+                                          className="text-slate-500 text-lg"
+                                          value=""
+                                        >
+                                          Select...
+                                        </option>
+                                        {accType.data?.map((item, index) => (
+                                          <option
+                                            key={index}
+                                            className="text-slate-500 text-lg"
+                                            value={item.value}
+                                          >
+                                            {item.name}
+                                          </option>
+                                        ))}
+                                      </>
+                                    ) : (
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        No Options Found!
+                                      </option>
+                                    )}
+                                  </select>
+                                  {/* {props.errors.accountType &&
+                                    props.touched.accountType && (
+                                      <p className="text-sm text-red-500">
+                                        {props.errors.accountType}
+                                      </p>
+                                    )} */}
+                                </div>
+                              </div>
+
+                              <div className="flex items-center flex-1">
+                                {/* state */}
+                                <div className="field w-full flex items-center gap-4 flex-[0.4]">
+                                  <label
+                                    htmlFor="newAccount.state"
+                                    className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
+                                  >
+                                    State <span className="text-red-500">*</span>
+                                  </label>
+                                  <InputCom
+                                    fieldClass="px-6 tracking-[1.5px]"
+                                    inputClass="max-w-[10rem]"
+                                    type="text"
+                                    name="newAccount.state"
+                                    placeholder="State/Province"
+                                    value={props.values.newAccount?.state}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                  />
+                                  {/* {props.errors.state && props.touched.state && (
+                                    <p className="text-sm text-red-500">
+                                      {props.errors.state}
+                                    </p>
+                                  )} */}
+                                </div>
+
+                                {/* city */}
+                                <div className="field w-full flex items-center flex-[0.4]">
+                                  <label
+                                    htmlFor="newAccount.city"
+                                    className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
+                                  >
+                                    City <span className="text-red-500">*</span>
+                                  </label>
+                                  <InputCom
+                                    fieldClass="px-6 tracking-[1.5px]"
+                                    type="text"
+                                    inputClass="max-w-[10rem]"
+                                    name="newAccount.city"
+                                    placeholder="City"
+                                    value={props.values.newAccount?.city}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                  />
+                                  {/* {props.errors.city && props.touched.city && (
+                                    <p className="text-sm text-red-500">
+                                      {props.errors.city}
+                                    </p>
+                                  )} */}
+                                </div>
+                              </div>
+
+                              {/* end of inputs for new accounts */}
+                            </div>
+                          </div>
+                        :
+                          <div className="mt-3 flex w-full h-[188px] justify-center items-center"></div>
                       )}
                     </div>
 

src/components/MyWallet/WalletBox.jsx

@@ -1,26 +1,29 @@
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 
+/**
+ * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
+ */
 export default function WalletBox({ wallet, payment }) {
+  const { loading, data } = wallet;
+
   return (
-    <>
-      <div className="my-wallet-wrapper w-full mb-10">
-        <div className="main-wrapper w-full">
-          <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 className="my-wallet-wrapper w-full mb-10">
+      <div className="main-wrapper w-full">
+        <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-[22rem]">
+          {loading ? (
+            <div className="w-full h-full flex items-center justify-center">
+              <LoadingSpinner size="16" color="sky-blue" />
+            </div>
+          ) : (
+            data.length > 0 && data.map((item) => (
+              <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
+                <WalletItemCard walletItem={item} payment={payment} />
               </div>
-            ) : wallet.data.length ? (
-              wallet.data.map((item, index) => (
-                <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
-                  <WalletItemCard walletItem={item} payment={payment} />
-                </div>
-              ))
-            ) : null}
-          </div>
+            ))
+          )}
         </div>
       </div>
-    </>
+    </div>
   );
 }

src/components/MyWallet/WalletItemCard.jsx

@@ -1,21 +1,25 @@
 import React, { useState } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
 import localImgLoad from "../../lib/localImgLoad";
+import { tableReload } from "../../store/TableReloads";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import CreditPopup from "./Popup/CreditPopup";
 import WalletAction from "./WalletAction";
 
+/**
+ * Renders a card displaying information about a wallet item.
+ */
 export default function WalletItemCard({ walletItem, payment }) {
-  //   const [eth] = useState(90);
-  //   const [btc] = useState(85);
-  //   const [ltc] = useState(20);
-
-  const { userDetails } = useSelector((state) => state?.userDetails);
-  let accountType = userDetails?.account_type == "FAMILY";
-
-  //   Credit popup
+  const { userDetails } = useSelector((state) => state.userDetails);
+  const accountType = userDetails?.account_type === 'FAMILY';
+  const dispatch = useDispatch();
   const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
+
+  /**
+   * Opens the credit popup.
+   * @param {Object} value - The value object.
+   */
   const openPopUp = (value) => {
     setCreditPopup({
       show: true,
@@ -23,29 +27,32 @@ export default function WalletItemCard({ walletItem, payment }) {
     });
   };
 
+  /**
+   * Closes the credit popup and dispatches a table reload action.
+   */
   const closePopUp = () => {
     setCreditPopup({ show: false, data: {} });
+    dispatch(tableReload({ type: 'WALLETTABLE' }));
   };
 
-  let image = walletItem.code
-    ? `${walletItem.code.toLocaleLowerCase()}.svg`
-    : "default.png"; // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
+  const image = walletItem.code
+    ? `${walletItem.code.toLowerCase()}.svg`
+    : 'default.png';
 
   return (
     <>
       <div
-        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`}
+        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
       >
-        {/* <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">
+          <div className="min-w-[100px] min-h-[100px] max-w-[150px] max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
             <img
               src={localImgLoad(`images/currency/${image}`)}
               className="w-full h-full"
-              alt="curreny-icon"
+              alt="currency-icon"
             />
           </div>
           <div className="balance w-full mt-2 flex justify-center">
@@ -53,41 +60,41 @@ export default function WalletItemCard({ walletItem, payment }) {
               <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="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125">
                 {PriceFormatter(
                   walletItem.amount * 0.01,
                   walletItem.code,
                   undefined,
-                  "text-[2rem]"
+                  'text-[2rem]'
                 )}
               </p>
             </div>
           </div>
         </div>
 
-        <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
-          HOLDINGS :{" "}
-          <span className="mt-1">
+        <p className="text-lg text-white tracking-wide flex justify-center items-center gap-8">
+          HOLDINGS :{' '}
+          <span className="xxs:scale-100 lg:scale-100 xl:scale-125">
             {PriceFormatter(
               walletItem.escrow * 0.01,
               walletItem.code,
               undefined,
-              "text-[2rem]"
+              'text-[2rem]'
             )}
           </span>
         </p>
-        {/* for white underline */}
+
         <div className="my-2 w-full h-[1px] bg-white"></div>
 
-        {!accountType ? (
+        {!accountType && (
           <WalletAction
             walletItem={walletItem}
             payment={payment}
             openPopUp={openPopUp}
           />
-        ) : null}
-        {/* </div> */}
+        )}
       </div>
+
       {creditPopup.show && (
         <CreditPopup
           details={creditPopup.data}