added count down timer

This commit is contained in:
victorAnumudu
2024-04-04 20:33:49 +01:00
parent 6f2fc17090
commit e5b36e3f45
6 changed files with 55 additions and 19 deletions
@@ -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="flex items-center gap-8">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
<div className="w-full md:w-[60%] mx-auto">
<div className="grid grid-cols-2 gap-8 my-2">
<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">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
<div className="grid grid-cols-2 gap-8 my-2">
<h1 className="job-label">
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 className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
{(data?.curr_balance * 0.01).toFixed(2)}
</span>
</div>
}
{isSuccess && (
<div className="flex items-center gap-8">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
<div className="grid grid-cols-2 gap-8 my-2">
<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>
@@ -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>
) : (