reduced reference number

.env

@@ -121,4 +121,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0
 REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
 
 # FOR FAMILY GAME LINK
-REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90

.env.development

@@ -89,4 +89,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0
 REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
 
 # FOR FAMILY GAME LINK
-REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90

.env.production

@@ -95,4 +95,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0
 REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
 
 # FOR FAMILY GAME LINK
-REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -260,13 +260,13 @@ function AddFundDollars(props) {
         {/* switch button */}
         <div className="flex">
           <form className="add-fund-info flex items-center gap-3 md:px-8 md:pt-4 px-4 pt-2">
-            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+            <h1 className="job-label my-1">
               {countryWallet == "US" && "Payment Method"}
             </h1>
             <div className="my-1 flex items-center gap-2">
               <label
                 htmlFor="previous"
-                className="cursor-pointer flex items-center gap-1"
+                className="flex items-center gap-1"
               >
                 <input
                   type="radio"
@@ -283,7 +283,7 @@ function AddFundDollars(props) {
               </label>
               <label
                 htmlFor="new"
-                className={`cursor-pointer flex items-center gap-1 ${
+                className={`flex items-center gap-1 ${
                   payListCards.data.length >= MaxNoOfCards
                     ? "pointer-events-none"
                     : ""
@@ -388,7 +388,7 @@ function AddFundDollars(props) {
                               {/* 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">
+                                <label className="job-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>
@@ -423,7 +423,7 @@ function AddFundDollars(props) {
                                         className={`flex items-center justify-between mb-2.5`}
                                       >
                                         <label
-                                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
+                                          className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
                                           htmlFor="expiration"
                                         >
                                           Exp Month{" "}

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -131,7 +131,7 @@ function AddFundPop({
         <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
             <form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
-              <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+              <h1 className="job-label my-1">
                 Amount({currency})
               </h1>
               <div className="field w-full max-w-[250px]">

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -49,7 +49,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                     </svg>
                   </div>
 
-                  <div className="flex items-center">
+                  <div className="w-full flex justify-center items-center">
                     <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
                       {isSuccess
                         ? "Credit was Successful!"
@@ -59,41 +59,42 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
 
                   {data?.internal_return >= 0 &&
                     data?.result !== "Charge failed" && (
-                      <>
+                      <div className="w-full md:w-[60%] mx-auto">
-                        <div className="flex items-center gap-8">
+                        <div className="grid grid-cols-2 gap-8 my-2">
-                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <h1 className="job-label">
                             Amount({data?.currency || ""})
                           </h1>
-                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                             {`${data?.symbol || ""} ${
-                              Number(data?.amount * 0.01).toLocaleString() || ""
+                              Number(data?.amount * 0.01).toFixed(2) || ""
                             }`}
                           </span>
                         </div>
                         
                         {data?.curr_balance &&
-                        <div className="flex items-center gap-8">
+                        <div className="grid grid-cols-2 gap-8 my-2">
-                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <h1 className="job-label">
                             Wallet Balance
                           </h1>
-                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
-                            {data?.curr_balance * 0.01}
+                            {(data?.curr_balance * 0.01).toFixed(2)}
                           </span>
                         </div>
                         }
 
                         {isSuccess && (
-                          <div className="flex items-center gap-8">
+                          <div className="grid grid-cols-2 gap-8 my-2">
-                            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            <h1 className="job-label">
                               Confirmation Number
                             </h1>
-                            <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            <span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                               {data?.confirmation}
                             </span>
                           </div>
                         )}
-                      </>
+                      </div>
-                    )}
+                    )
+                  }
                 </div>
               </div>
             </div>

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -29,10 +29,10 @@ function ThePaymentText({ value, type }) {
   return (
     <div className="my-2 flex items-center gap-5">
       <div className="card-details flex items-center gap-3">
-        <h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
+        <h1 className="text-base">
           {description} Card
         </h1>
-        <p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
+        <p className="text-base font-normal text-dark-gray dark:text-white tracking-wide">
           Bank **************{digits}
         </p>
       </div>
@@ -49,10 +49,11 @@ function AmountSection({ currency, amount, country }) {
 
   return (
     <div className={`flex items-center gap-8`}>
-      <h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+      {/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
+      <h1 className="min-w-[150px] job-label">
         Amount({currency})
       </h1>
-      <span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedAmount}
       </span>
     </div>
@@ -68,10 +69,10 @@ function TransactionFeeSection({ currency, fee, country }) {
 
   return (
     <div className={`flex items-center gap-8 border-b border-gray-600`}>
-      <h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+      <h1 className="min-w-[150px] job-label">
         Transaction Fee
       </h1>
-      <span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedFee}
       </span>
     </div>
@@ -89,10 +90,10 @@ function TotalSection({ currency, amount, fee, country }) {
 
   return (
     <div className={`flex items-center gap-8`}>
-      <h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+      <h1 className="min-w-[150px] job-label">
         Total
       </h1>
-      <span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedTotal}
       </span>
     </div>
@@ -380,7 +381,7 @@ function ConfirmAddFund({
                       <div className="flex items-center gap-8">
                         <label
                           htmlFor="payment"
-                          className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
+                          className="min-w-[150px] job-label"
                         >
                           Payment Method
                         </label>
@@ -395,11 +396,12 @@ function ConfirmAddFund({
                     <div
                       className={`gap-8 flex items-center`}
                     >
-                      <h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      <h1 className="min-w-[150px] job-label">
                         Reference No
                       </h1>
-                      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+                      <span className="text-base font-normal text-dark-gray dark:text-white tracking-tighter my-1">
-                        {__confirmData?.credit_reference}
+                        {/* Displays only half of the string */}
+                        {__confirmData?.credit_reference.slice(0, (Math.floor(__confirmData?.credit_reference.length/2)))}
                       </span>
                     </div>
                   </div>

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -4,6 +4,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AddFundPop from "./AddFundPop";
 import CompleteConfirmCredit from "./CompleteConfirmCredit";
 import ConfirmAddFund from "./ConfirmAddFund";
+import CustomTimer from "../../countdown/CustomTimer";
 
 const CreditPopup = ({ details, onClose, situation, walletItem }) => {
   const [input, setInput] = useState("");
@@ -75,7 +76,8 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
                 <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Processing payment</p>
                 <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Please do not refresh</p>
                 <LoadingSpinner size="6" color="sky-blue" height='h-20' />
-                <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Timer countdown</p>
+                {/* <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Timer countdown</p> */}
+                <CustomTimer className="text-lg text-center md:text-2xl text-emerald-600 tracking-wide font-bold" />
               </div>
             </div>
           ) : (

src/components/countdown/CustomTimer.jsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react'
+
+export default function CustomTimer({className='text-emerald-500'}) {
+
+    const [time, setTime] = useState(Number(process.env.REACT_APP_CUSTOMTIMER))
+
+    useEffect(()=>{
+        const timer = setInterval(()=>{
+            setTime(prev => prev - 1)
+        },1000)
+        return ()=>{
+            clearInterval(timer)
+        }
+    },[])
+
+    let minutes = time == 0 ? 0 : Math.floor(time/60)
+    let seconds = time == 0 ? 0 :time - (minutes * 60)
+
+  return (
+    <p className={`w-full text-base text-emerald-500 ${className}`}>
+        {`${minutes > 9 ? minutes : '0'+minutes} : ${seconds > 9 ? seconds : '0'+seconds}`}
+    </p>
+  )
+}