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

@@ -46,3 +46,8 @@ 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

.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}
         >
+          {data?.data?.length > 1 ?
+            <>
             <option value={""}>Select your Country</option>
-          {data?.length > 0 &&
+            {data?.data?.map((item, idx) => (
-            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">
+        <div className="flex space-x-2 items-center mb-4 sm:mb-0">
-          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+          <h1 className="text-center text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
             Recent Activities
           </h1>
         </div>
@@ -79,9 +79,13 @@ export default function HomeActivities({ className }) {
             {/*</tr>*/}
 
             {recentActivitiesData.loading ? (
+              <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];
@@ -90,15 +94,15 @@ export default function HomeActivities({ className }) {
                     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">
                             {item.title ? item.title : "Title"}
@@ -110,8 +114,8 @@ export default function HomeActivities({ className }) {
                       </div>
                     </td>
 
-                    <td className="text-right py-4">
+                    <td className="text-right py-3">
-                      <div className="flex space-x-1 items-center justify-center">
+                      <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,6 +316,11 @@ function AddFundDollars(props) {
 
         {tab === "new" && (
           <div className="new-details w-full max-h-[22rem]">
+            {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}
@@ -553,6 +560,9 @@ function AddFundDollars(props) {
                   }}
                 </Formik>
               </div>
+            :
+            null
+            }
           </div>
         )}
       </div>

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -26,13 +26,17 @@ function AddFundPop({
   };
 
   const handleSubmit = async () => {
+    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 } },
@@ -43,12 +47,18 @@ function AddFundPop({
       }
 
       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 } },
@@ -58,14 +68,17 @@ function AddFundPop({
         return;
       }
 
+      // Prepare state data for API call
       let stateData = {
         amount: Number(input) * 100,
         currency: walletItem?.code,
       };
 
-    try {
+      // 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,60 +16,49 @@ 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" &&
+                    !isSuccess && "h-[328px] items-center justify-center"
-                    "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={isSuccess ? "green" : "red"}
-                        stroke-width="2"
+                      strokeWidth="2"
-                        stroke-linecap="round"
+                      strokeLinecap="round"
-                        stroke-linejoin="round"
+                      strokeLinejoin="round"
-                        className="feather feather-check-circle"
+                      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>
-                      </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>
                   </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" ||
+                      {isSuccess
-                      data?.status == "successful"
                         ? "Credit was Successful!"
                         : "Credit was Unsuccessful"}
                     </h1>
                   </div>
 
                   {data?.internal_return >= 0 &&
-                  data?.result !== "Charge failed" ? (
+                    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">
@@ -82,7 +76,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                             Wallet Balance
                           </h1>
                           <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          {data?.curr_balance}
+                            {data?.curr_balance * 0.01}
                           </span>
                         </div>
 
@@ -95,7 +89,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                           </span>
                         </div>
                       </>
-                  ) : null}
+                    )}
                 </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;
+  const { cardNum } = value;
-  value.description =
+  let description = value.description;
-    type === "new"
+  let digits = value.digits;
-      ? cardDetails.cardNum[0] === "4"
+
-        ? "Visa"
+  if (type === "new") {
-        : cardDetails.cardNum[0] == "5"
+    const firstDigit = cardNum[0];
-        ? "Master"
+    if (firstDigit === "4") {
-        : "ATM"
+      description = "Visa";
-      : value.description;
+    } else if (firstDigit === "5") {
-  value.digits = type === "new" ? cardDetails.cardNum.slice(-4) : value.digits;
+      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">
+        <h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
-          {value.description} Card
+          {description} Card
         </h1>
-        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
+        <p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
-          Bank **************{value.digits}
+          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
+    <div className={`flex items-center ${gapClassName}`}>
-      className={`flex items-center ${country == "US" ? "gap-14" : "gap-4"}`}
-    >
       <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
+    <div className={`flex items-center border-b border-gray-600 ${gapClass}`}>
-      className={`flex items-center border-b border-gray-600 ${
-        country == "US" ? "gap-[2.7rem]" : "gap-4"
-      }`}
-    >
       <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
+    <div className={`flex items-center ${gap}`}>
-      className={`flex items-center ${
-        country == "US" ? "gap-[8rem]" : "gap-[6.3rem]"
-      }`}
-    >
       <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,10 +202,27 @@ 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 () => {
+    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,
@@ -199,16 +230,12 @@ function ConfirmAddFund({
         currency,
       };
 
-    try {
+      // Send request to server to make the payment using getPaidPrevCard method of usersService
-      setConfirmCredit((prev) => ({
-        ...prev,
-        show: {
-          acceptConfirm: { loader: true },
-        },
-      }));
       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,11 +268,26 @@ function ConfirmAddFund({
     }
   };
 
+  /**
+   * Handles the payment process when a new card is used.
+   * @async
+   */
   const handleNewCard = async () => {
+    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, ""),
@@ -257,16 +300,13 @@ function ConfirmAddFund({
         uid,
       };
 
-    try {
+      // Send request to server to process payment
-      setConfirmCredit((prev) => ({
-        ...prev,
-        show: {
-          acceptConfirm: { loader: true },
-        },
-      }));
       const res = await apiURL.getPaidNewCard(reqData);
       const _response = res.data;
+
+      // Handle response from server
       if (res.data.internal_return < 0) {
+        // Payment could not be completed
         setConfirmCredit((prev) => ({
           ...prev,
           show: {
@@ -275,9 +315,8 @@ function ConfirmAddFund({
           },
           data: _response,
         }));
-        return;
+      } else {
-      }
+        // Payment was successful
-
         setTimeout(() => {
           setConfirmCredit((prev) => ({
             ...prev,
@@ -287,9 +326,10 @@ function ConfirmAddFund({
             },
             data: _response,
           }));
-        dispatch(tableReload({ type: "WALLETTABLE" }));
         }, 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
+              : getTitle()}
-                  ? "Confirm Credit Add"
-                  : confirmCredit?.show?.acceptConfirm?.state
-                  ? "Credit Add Completed"
-                  : "Add Credit"}
-              </>
-            )}
           </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,6 +524,11 @@ function NairaWithdraw({
                       )}
 
                       {tab == "new" && (
+                        recipients.loading ?
+                          <div className="mt-3 flex flex-col w-full h-[188px] justify-center items-center">
+                            <LoadingSpinner size='10' color='sky-blue' />
+                          </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]">
@@ -789,6 +796,8 @@ function NairaWithdraw({
                               {/* 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]">
+        <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-[22rem]">
-            {wallet.loading ? (
+          {loading ? (
             <div className="w-full h-full flex items-center justify-center">
               <LoadingSpinner size="16" color="sky-blue" />
             </div>
-            ) : wallet.data.length ? (
+          ) : (
-              wallet.data.map((item, index) => (
+            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>
             ))
-            ) : null}
+          )}
         </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 { userDetails } = useSelector((state) => state.userDetails);
-  //   const [btc] = useState(85);
+  const accountType = userDetails?.account_type === 'FAMILY';
-  //   const [ltc] = useState(20);
+  const dispatch = useDispatch();
-
-  const { userDetails } = useSelector((state) => state?.userDetails);
-  let accountType = userDetails?.account_type == "FAMILY";
-
-  //   Credit popup
   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
+  const image = walletItem.code
-    ? `${walletItem.code.toLocaleLowerCase()}.svg`
+    ? `${walletItem.code.toLowerCase()}.svg`
-    : "default.png"; // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
+    : '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">
+        <p className="text-lg text-white tracking-wide flex justify-center items-center gap-8">
-          HOLDINGS :{" "}
+          HOLDINGS :{' '}
-          <span className="mt-1">
+          <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}