reduced the height of each activity and image removed

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,28 +79,32 @@ export default function HomeActivities({ className }) {
             {/*</tr>*/}
 
             {recentActivitiesData.loading ? (
-              <div className="h-[100px] w-full flex justify-center items-center">
+              <tr>
-                <LoadingSpinner color="sky-blue" size="16" />
+                <td>
-              </div>
+                  <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">
+                    <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/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,5 +1,12 @@
+/**
+ * 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]">
@@ -9,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" &&
+                    !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" ||
+                    <svg
-                    data?.status == "successful" ? (
+                      xmlns="http://www.w3.org/2000/svg"
-                      <svg
+                      width="100"
-                        xmlns="http://www.w3.org/2000/svg"
+                      height="100"
-                        width="100"
+                      viewBox="0 0 24 24"
-                        height="100"
+                      fill="none"
-                        viewBox="0 0 24 24"
+                      stroke={isSuccess ? "green" : "red"}
-                        fill="none"
+                      strokeWidth="2"
-                        stroke="green"
+                      strokeLinecap="round"
-                        stroke-width="2"
+                      strokeLinejoin="round"
-                        stroke-linecap="round"
+                      className={`feather ${
-                        stroke-linejoin="round"
+                        isSuccess ? "feather-check-circle" : "feather-x-circle"
-                        className="feather feather-check-circle"
+                      }`}
-                      >
+                    >
-                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                      {isSuccess ? (
-                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                        <>
-                      </svg>
+                          <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
+                        </>
-                        xmlns="http://www.w3.org/2000/svg"
+                      ) : (
-                        viewBox="0 0 24 24"
+                        <>
-                        fill="none"
+                          <circle cx="12" cy="12" r="10"></circle>
-                        width="100"
+                          <line x1="15" y1="9" x2="9" y2="15"></line>
-                        height="100"
+                          <line x1="9" y1="9" x2="15" y2="15"></line>
-                        stroke="red"
+                        </>
-                        stroke-width="2"
+                      )}
-                        stroke-linecap="round"
+                    </svg>
-                        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>
-                    )}
                   </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">
+                        <div className="flex items-center gap-8">
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          Amount({data?.currency || ""})
+                            Amount({data?.currency || ""})
-                        </h1>
+                          </h1>
-                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          {`${data?.symbol || ""} ${
+                            {`${data?.symbol || ""} ${
-                            Number(data?.amount * 0.01).toLocaleString() || ""
+                              Number(data?.amount * 0.01).toLocaleString() || ""
-                          }`}
+                            }`}
-                        </span>
+                          </span>
-                      </div>
+                        </div>
 
-                      <div className="flex items-center gap-8">
+                        <div className="flex items-center gap-8">
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          Wallet Balance
+                            Wallet Balance
-                        </h1>
+                          </h1>
-                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <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>
+                          </span>
-                      </div>
+                        </div>
 
-                      <div className="flex items-center gap-8">
+                        <div className="flex items-center gap-8">
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          Confirmation Number
+                            Confirmation Number
-                        </h1>
+                          </h1>
-                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          {data?.confirmation}
+                            {data?.confirmation}
-                        </span>
+                          </span>
-                      </div>
+                        </div>
-                    </>
+                      </>
-                  ) : null}
+                    )}
                 </div>
               </div>
             </div>

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -1,13 +1,14 @@
 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 { cardNum } = value;
   let description = value.description;
@@ -39,12 +40,16 @@ function ThePaymentText({ value, type }) {
   );
 }
 
+/**
+ * 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>
@@ -55,14 +60,16 @@ function AmountSection({ currency, amount, country }) {
   );
 }
 
+/**
+ * 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>
@@ -73,15 +80,19 @@ function TransactionFeeSection({ currency, fee, country }) {
   );
 }
 
+/**
+ * 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>
@@ -109,8 +120,6 @@ function ConfirmAddFund({
 
   const { userDetails } = useSelector((state) => state?.userDetails);
 
-  const dispatch = useDispatch();
-
   const [requestStatus, setRequestStatus] = useState({
     message: "",
     loading: false,
@@ -169,8 +178,6 @@ function ConfirmAddFund({
             status: false,
           });
         }
-
-        return dispatch(tableReload({ type: "WALLETTABLE" }));
       })
       .catch((err) => {
         setRequestStatus({
@@ -248,8 +255,6 @@ function ConfirmAddFund({
           },
           data: _response,
         }));
-        // Dispatch an action to reload the wallet table
-        dispatch(tableReload({ type: "WALLETTABLE" }));
       }, 1500);
     } catch (error) {
       // Handle error and hide the loader
@@ -271,7 +276,8 @@ function ConfirmAddFund({
     try {
       // Extract necessary data from __confirmData and __confirmCardDetails
       const { amount, credit_reference, uid } = __confirmData;
-      const { address, cardNum, cvv, expirationMonth, expirationYear } = __confirmCardDetails;
+      const { address, cardNum, cvv, expirationMonth, expirationYear } =
+        __confirmCardDetails;
 
       // Set loading state to indicate payment is being processed
       setConfirmCredit((prev) => ({
@@ -320,8 +326,6 @@ function ConfirmAddFund({
             },
             data: _response,
           }));
-          console.log("Show meeeeeeeeee");
-          dispatch(tableReload({ type: "WALLETTABLE" }));
         }, 1500);
       }
     } catch (error) {

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -15,7 +15,19 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     data: {},
   });
 
-  console.log(confirmCredit);
+  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
@@ -26,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?.show?.acceptConfirm?.loader
-            (confirmCredit?.data?.internal_return < 0 
+              ? "Confirming Credit..."
-              // ||
+              : getTitle()}
-              // 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"}
-              </>
-            )}
           </h1>
           <button
             type="button"

src/components/MyWallet/WalletBox.jsx

@@ -1,29 +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="my-wallet-wrapper w-full mb-10">
+      <div className="main-wrapper w-full">
-        <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]">
-          <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(325px,_1fr))] gap-5 mb-11 h-[22rem]">
+          {loading ? (
-            {wallet.loading ? (
+            <div className="w-full h-full flex items-center justify-center">
-              <div className="w-full h-full flex items-center justify-center">
+              <LoadingSpinner size="16" color="sky-blue" />
-                <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,17 +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 { userDetails } = useSelector((state) => state?.userDetails);
+  const { userDetails } = useSelector((state) => state.userDetails);
-  let accountType = userDetails?.account_type == "FAMILY";
+  const accountType = userDetails?.account_type === 'FAMILY';
-
+  const dispatch = useDispatch();
-  //   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,
@@ -19,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">
@@ -49,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}