Skip to content

S
sweepstake
Commit f4b38a7d by Arjun Jhukal
Options

updated the input fields value indivudality for the withdraw

parent 8bdb9834
Showing with 96 additions and 44 deletions
src/components/pages/dashboard/userDashboard/withdrawl/index.tsx
"use client"; "use client";
import { useAppDispatch, useAppSelector } from "@/hooks/hook"; import { useAppDispatch, useAppSelector } from "@/hooks/hook";
...@@ -13,11 +14,24 @@ import WithdrawlModal from "./WithdrawlModal"; ...@@ -13,11 +14,24 @@ import WithdrawlModal from "./WithdrawlModal";
import { useWithdrawlMutation } from "@/services/transaction"; import { useWithdrawlMutation } from "@/services/transaction";
const validationSchema = Yup.object({ const validationSchema = Yup.object({
withdrawl_amount: Yup.number() withdrawl_amounts: Yup.object().test(
.required("Amount is required") "min-amount",
.min(2, "Amount must be greater than $2"), "Amount must be greater than $2",
(value) => {
if (!value) return true;
return Object.values(value).every(
(v) => v === "" || Number(v) >= 2
);
}
),
}); });
type FormValues = {
game_provider: string;
withdrawl_amounts: Record<string, number | "">;
wallet_address: string;
};
export default function WithdrawlPage({ export default function WithdrawlPage({
games, games,
coins, coins,
...@@ -26,35 +40,31 @@ export default function WithdrawlPage({ ...@@ -26,35 +40,31 @@ export default function WithdrawlPage({
coins: any; coins: any;
}) { }) {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const user = useAppSelector(state => state.auth.user); const user = useAppSelector((state) => state.auth.user);
const gameInfo = coins?.data?.game_information || {}; const gameInfo = coins?.data?.game_information || {};
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const [withdrawMoney, { isLoading: widthdrawing }] = useWithdrawlMutation(); const [withdrawMoney, { isLoading: widthdrawing }] =
const formik = useFormik({ useWithdrawlMutation();
const formik = useFormik<FormValues>({
initialValues: { initialValues: {
game_provider: "", game_provider: "",
withdrawl_amount: 0, withdrawl_amounts: {},
wallet_address: user?.wallet_address || "", wallet_address: user?.wallet_address || "",
}, },
validationSchema, validationSchema,
enableReinitialize: true, enableReinitialize: true,
onSubmit: async (values) => { onSubmit: async (values) => {
try { try {
const formData = new FormData(); const amount =
values.withdrawl_amounts[values.game_provider];
formData.append("wallet", values.wallet_address); await withdrawMoney({
formData.append("amount", values.withdrawl_amount.toString());
formData.append("game_provider", values.game_provider);
// const response = await withdrawMoney(formData).unwrap();
const response = await withdrawMoney({
wallet: values.wallet_address, wallet: values.wallet_address,
amount: values.withdrawl_amount, amount: Number(amount),
game_provider: values.game_provider game_provider: values.game_provider,
}).unwrap(); }).unwrap();
setOpen(false); setOpen(false);
dispatch( dispatch(
showToast({ showToast({
...@@ -70,39 +80,52 @@ export default function WithdrawlPage({ ...@@ -70,39 +80,52 @@ export default function WithdrawlPage({
}) })
); );
} }
} },
}); });
const handleWithdrawlChange = (
const handleWithdrawlChange = (value: number | string) => { provider: string,
const numericValue = value: string
value === "" ? "" : Number(value); ) => {
formik.setFieldValue("withdrawl_amount", numericValue); if (value === "") {
formik.setFieldValue(`withdrawl_amounts.${provider}`, "");
} else {
const num = Number(value);
formik.setFieldValue(
`withdrawl_amounts.${provider}`,
isNaN(num) ? "" : num
);
}
}; };
const handleWithdrawClick = (balance: number, provider: string) => { const handleWithdrawClick = (
balance: number,
provider: string
) => {
if (balance < 2) { if (balance < 2) {
dispatch( dispatch(
showToast({ showToast({
message: "Insufficient balance to withdraw (Min $2 required)", message:
"Insufficient balance to withdraw (Min $2 required)",
variant: ToastVariant.ERROR, variant: ToastVariant.ERROR,
}) })
); );
return; return;
} }
formik.setFieldValue("game_provider", provider); formik.setFieldValue("game_provider", provider);
setOpen(true); setOpen(true);
}; };
return ( return (
<section className="withdrawl__root"> <section className="withdrawl__root">
<div className="section__title mb-4 lg:mb-8 max-w-[520px]"> <div className="section__title mb-4 lg:mb-8 max-w-[520px]">
<h1 className="mb-2 text-[24px] lg:text-[32px]">Withdraw Coins</h1> <h1 className="mb-2 text-[24px] lg:text-[32px]">
Withdraw Coins
</h1>
<p className="text-[11px] lg:text-[13px]"> <p className="text-[11px] lg:text-[13px]">
To start playing and cashing out your winnings, you’ll need a crypto To start playing and cashing out your winnings, you’ll
wallet to purchase E-Credits and receive payouts. Don't worry—it’s need a crypto wallet to purchase E-Credits and receive
quick and easy! payouts. Don't worry—it’s quick and easy!
</p> </p>
</div> </div>
...@@ -127,7 +150,10 @@ export default function WithdrawlPage({ ...@@ -127,7 +150,10 @@ export default function WithdrawlPage({
{/* Game Info */} {/* Game Info */}
<div className="flex gap-4 items-center mb-4 lg:col-span-1"> <div className="flex gap-4 items-center mb-4 lg:col-span-1">
<Image <Image
src={game.thumbnail || "/assets/images/fallback.png"} src={
game.thumbnail ||
"/assets/images/fallback.png"
}
alt={game.name} alt={game.name}
width={66} width={66}
height={66} height={66}
...@@ -146,23 +172,32 @@ export default function WithdrawlPage({ ...@@ -146,23 +172,32 @@ export default function WithdrawlPage({
{/* Input Field */} {/* Input Field */}
<div className="lg:col-span-1 lg:text-center"> <div className="lg:col-span-1 lg:text-center">
<label <label
htmlFor="withdrawl" htmlFor={`withdrawl-${game.provider}`}
className="text-[12px] block mb-1" className="text-[12px] block mb-1"
> >
Enter your coins Enter your coins
</label> </label>
<div className="value__field relative"> <div className="value__field relative">
<OutlinedInput <OutlinedInput
id={`withdrawl-${game.provider}`}
type="number" type="number"
value={formik.values.withdrawl_amount} value={
formik.values.withdrawl_amounts[
game.provider
] ?? ""
}
onChange={(e) => onChange={(e) =>
handleWithdrawlChange(e.target.value) handleWithdrawlChange(
game.provider,
e.target.value
)
} }
inputProps={{ min: 2 }} inputProps={{ min: 2 }}
placeholder="5.0" placeholder="5.0"
error={Boolean( error={Boolean(
formik.touched.withdrawl_amount && (formik.errors.withdrawl_amounts as any)?.[
formik.errors.withdrawl_amount game.provider
]
)} )}
/> />
<Button <Button
...@@ -174,16 +209,26 @@ export default function WithdrawlPage({ ...@@ -174,16 +209,26 @@ export default function WithdrawlPage({
right: 0, right: 0,
maxWidth: "fit-content", maxWidth: "fit-content",
}} }}
onClick={() => handleWithdrawlChange(info.balance)} onClick={() =>
handleWithdrawlChange(
game.provider,
info.balance.toString()
)
}
type="button" type="button"
> >
| &nbsp;&nbsp;All | &nbsp;&nbsp;All
</Button> </Button>
</div> </div>
{formik.touched.withdrawl_amount && {(formik.errors.withdrawl_amounts as any)?.[
formik.errors.withdrawl_amount && ( game.provider
] && (
<span className="text-red-400 text-xs"> <span className="text-red-400 text-xs">
{formik.errors.withdrawl_amount} {
(formik.errors.withdrawl_amounts as any)?.[
game.provider
]
}
</span> </span>
)} )}
<span className="text-[8px] lg:text-[10px]"> <span className="text-[8px] lg:text-[10px]">
...@@ -199,7 +244,16 @@ export default function WithdrawlPage({ ...@@ -199,7 +244,16 @@ export default function WithdrawlPage({
color="secondary" color="secondary"
className="!max-w-fit !text-[#426A66]" className="!max-w-fit !text-[#426A66]"
startIcon={<CardPos />} startIcon={<CardPos />}
onClick={() => handleWithdrawClick(formik.values.withdrawl_amount, game.provider)} onClick={() =>
handleWithdrawClick(
Number(
formik.values.withdrawl_amounts[
game.provider
] || 0
),
game.provider
)
}
type="button" type="button"
> >
Withdraw Withdraw
...@@ -212,14 +266,12 @@ export default function WithdrawlPage({ ...@@ -212,14 +266,12 @@ export default function WithdrawlPage({
</div> </div>
</form> </form>
{/* ✅ Pass formik.handleSubmit to modal */}
<WithdrawlModal <WithdrawlModal
open={open} open={open}
handleClose={() => setOpen(false)} handleClose={() => setOpen(false)}
formik={formik} formik={formik}
wallet={user?.wallet_address || ""} wallet={user?.wallet_address || ""}
/> />
</section> </section>
); );
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment