payment count down timer added

.env

@@ -122,3 +122,6 @@ REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
 
 # FOR FAMILY GAME LINK
 REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90

.env.development

@@ -90,3 +90,6 @@ REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
 
 # FOR FAMILY GAME LINK
 REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90

.env.production

@@ -96,3 +96,6 @@ REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
 
 # FOR FAMILY GAME LINK
 REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90

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/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>
+  )
+}