Skip to content

S
sweepstake
Commit 6027f7b9 by Arjun Jhukal
Options

updated the scrollable issue and also added the photo id at eh withdrawl

parent a802fe22
Showing with 67 additions and 50 deletions
src/components/organism/dialog/index.tsx
...@@ -5,7 +5,11 @@ import { useEffect, useState } from "react"; ...@@ -5,7 +5,11 @@ import { useEffect, useState } from "react";
export default function AgeVerificationModal() { export default function AgeVerificationModal() {
const user = useAppSelector((state) => state.auth.user); const user = useAppSelector((state) => state.auth.user);
const [open, setOpen] = useState(true); const [open, setOpen] = useState(false);
useEffect(() => {
setOpen(!user);
}, [user]);
const handleConfirmAge = () => { const handleConfirmAge = () => {
setOpen(false); setOpen(false);
...@@ -15,17 +19,15 @@ export default function AgeVerificationModal() { ...@@ -15,17 +19,15 @@ export default function AgeVerificationModal() {
window.location.href = "about:blank"; window.location.href = "about:blank";
}; };
useEffect(() => {
if (user) {
setOpen(false);
}
}, [user]);
return ( return (
<Dialog <Dialog
open={open} open={open}
aria-labelledby="age-verification-dialog"
disableEscapeKeyDown disableEscapeKeyDown
disableScrollLock
keepMounted={false}
aria-labelledby="age-verification-dialog"
sx={{ sx={{
pointerEvents: open ? "auto" : "none",
"& .MuiBackdrop-root": { "& .MuiBackdrop-root": {
backdropFilter: "blur(8px)", backdropFilter: "blur(8px)",
backgroundColor: "rgba(0, 0, 0, 0.4)", backgroundColor: "rgba(0, 0, 0, 0.4)",
...@@ -36,28 +38,23 @@ export default function AgeVerificationModal() { ...@@ -36,28 +38,23 @@ export default function AgeVerificationModal() {
<Typography variant="h5" fontWeight="bold" gutterBottom> <Typography variant="h5" fontWeight="bold" gutterBottom>
Age Verification Required Age Verification Required
</Typography> </Typography>
<Typography mb={2}> <Typography mb={2}>
This site is restricted to users who are below 21 years of age. This site is restricted to users who are 21 years of age or older.
Please confirm your age to proceed. Please confirm your age to proceed.
</Typography> </Typography>
<Typography variant="body2" mb={3}> <Typography variant="body2" mb={3}>
By clicking "I am over 21", you agree that you meet the minimum age requirement. By clicking "I am over 21", you confirm that you meet the minimum age requirement.
If you are under 21, you will not be able to access this site.
</Typography> </Typography>
<Box mt={2} display="flex" gap={1} justifyContent="flex-end"> <Box display="flex" gap={1} justifyContent="flex-end">
<Button <Button variant="outlined" color="secondary" onClick={handleCancel}>
variant="outlined"
color="secondary"
onClick={handleCancel}
sx={{ ml: 1 }}
>
I am under 21 I am under 21
</Button> </Button>
<Button variant="contained" color="primary" onClick={handleConfirmAge}> <Button variant="contained" onClick={handleConfirmAge}>
I am over 21 I am over 21
</Button> </Button>
</Box> </Box>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
......
src/components/pages/dashboard/userDashboard/withdrawl/WithdrawlModal.tsx
import { Box, Button, Modal, OutlinedInput } from "@mui/material"; import { Box, Button, InputLabel, Modal, OutlinedInput } from "@mui/material";
import Image from "next/image";
import React from "react";
import ConnectWalletForm from "../connectWallet/ConnectWalletForm";
import { SecuritySafe } from "@wandersonalwes/iconsax-react"; import { SecuritySafe } from "@wandersonalwes/iconsax-react";
import { FormikProps } from "formik"; import { FormikProps } from "formik";
import Image from "next/image";
import React from "react";
import { WithdrawlFormValues } from ".";
export default function WithdrawlModal({ export default function WithdrawlModal({
open, open,
...@@ -13,7 +13,7 @@ export default function WithdrawlModal({ ...@@ -13,7 +13,7 @@ export default function WithdrawlModal({
}: { }: {
open: boolean; open: boolean;
handleClose: () => void; handleClose: () => void;
formik: FormikProps<any>; formik: FormikProps<WithdrawlFormValues>;
wallet: string; wallet: string;
}) { }) {
const [isEditing, setIsEditing] = React.useState(false); const [isEditing, setIsEditing] = React.useState(false);
...@@ -70,34 +70,52 @@ export default function WithdrawlModal({ ...@@ -70,34 +70,52 @@ export default function WithdrawlModal({
Your Withdrawn amount will be sent to the following address. Your Withdrawn amount will be sent to the following address.
</p> </p>
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit} className="flex flex-col gap-3">
<div className="relative"> <div className="relative">
<InputLabel htmlFor="photoid_number" className="text-start">Photo ID <span className="text-red-500">*</span></InputLabel>
<OutlinedInput <OutlinedInput
name="wallet_address" name="photoid_number"
id="wallet_address" id="photoid_number"
value={formik.values.wallet_address} value={formik.values.photoid_number}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
placeholder="Enter your bitcoin address" placeholder="Enter your Photo ID"
disabled={!isEditing} // ✅ locked until change
/> />
{!isEditing && ( {
<Button formik.touched.photoid_number && formik.errors.photoid_number ?
className="!p-0 !text-white" <span className="error text-start">{formik.errors.photoid_number || ""}</span> : null
sx={{ }
position: "absolute", </div>
top: "50%", <div className="relative">
transform: "translateY(-50%)", <InputLabel htmlFor="wallet_address" className="text-start">Wallet Address <span className="text-red-500">*</span></InputLabel>
right: 16, <div className="relative">
maxWidth: "fit-content", <OutlinedInput
textDecoration: "underline", name="wallet_address"
}} id="wallet_address"
type="button" value={formik.values.wallet_address}
onClick={handleChangeAddress} onChange={formik.handleChange}
> onBlur={formik.handleBlur}
| &nbsp;&nbsp;Change Address placeholder="Enter your bitcoin address"
</Button> disabled={!isEditing} // ✅ locked until change
)} />
{!isEditing && (
<Button
className="!p-0 !text-white"
sx={{
position: "absolute",
top: "50%",
transform: "translateY(-50%)",
right: 16,
maxWidth: "fit-content",
textDecoration: "underline",
}}
type="button"
onClick={handleChangeAddress}
>
| &nbsp;&nbsp;Change Address
</Button>
)}
</div>
</div> </div>
<Button <Button
...@@ -107,7 +125,7 @@ export default function WithdrawlModal({ ...@@ -107,7 +125,7 @@ export default function WithdrawlModal({
className="!mt-3" className="!mt-3"
disabled={!formik.values.wallet_address} disabled={!formik.values.wallet_address}
> >
Withdraw Now Withdraw Now
</Button> </Button>
</form> </form>
......
src/components/pages/dashboard/userDashboard/withdrawl/index.tsx
...@@ -27,10 +27,11 @@ const validationSchema = Yup.object({ ...@@ -27,10 +27,11 @@ const validationSchema = Yup.object({
), ),
}); });
type FormValues = { export type WithdrawlFormValues = {
game_provider: string; game_provider: string;
withdrawl_amounts: Record<string, number | "">; withdrawl_amounts: Record<string, number | "">;
wallet_address: string; wallet_address: string;
photoid_number: string;
}; };
export default function WithdrawlPage({ export default function WithdrawlPage({
...@@ -48,11 +49,12 @@ export default function WithdrawlPage({ ...@@ -48,11 +49,12 @@ export default function WithdrawlPage({
const [withdrawMoney, { isLoading: widthdrawing }] = const [withdrawMoney, { isLoading: widthdrawing }] =
useWithdrawlMutation(); useWithdrawlMutation();
const formik = useFormik<FormValues>({ const formik = useFormik<WithdrawlFormValues>({
initialValues: { initialValues: {
game_provider: "", game_provider: "",
withdrawl_amounts: {}, withdrawl_amounts: {},
wallet_address: user?.wallet_address || "", wallet_address: user?.wallet_address || "",
photoid_number: "",
}, },
validationSchema, validationSchema,
enableReinitialize: true, enableReinitialize: true,
......
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