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

src/components/organism/dialog/index.tsx

@@ -5,7 +5,11 @@ import { useEffect, useState } from "react";
 
 export default function AgeVerificationModal() {
     const user = useAppSelector((state) => state.auth.user);
-    const [open, setOpen] = useState(true);
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+        setOpen(!user);
+    }, [user]);
 
     const handleConfirmAge = () => {
         setOpen(false);
@@ -15,17 +19,15 @@ export default function AgeVerificationModal() {
         window.location.href = "about:blank";
     };
 
-    useEffect(() => {
-        if (user) {
-            setOpen(false);
-        }
-    }, [user]);
     return (
         <Dialog
             open={open}
-            aria-labelledby="age-verification-dialog"
             disableEscapeKeyDown
+            disableScrollLock
+            keepMounted={false}
+            aria-labelledby="age-verification-dialog"
             sx={{
+                pointerEvents: open ? "auto" : "none",
                 "& .MuiBackdrop-root": {
                     backdropFilter: "blur(8px)",
                     backgroundColor: "rgba(0, 0, 0, 0.4)",
@@ -36,28 +38,23 @@ export default function AgeVerificationModal() {
                 <Typography variant="h5" fontWeight="bold" gutterBottom>
                     Age Verification Required
                 </Typography>
+
                 <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.
                 </Typography>
+
                 <Typography variant="body2" mb={3}>
-                    By clicking "I am over 21", you agree that you meet the minimum age requirement.
-                    If you are under 21, you will not be able to access this site.
+                    By clicking "I am over 21", you confirm that you meet the minimum age requirement.
                 </Typography>
 
-                <Box mt={2} display="flex" gap={1} justifyContent="flex-end">
-                    <Button
-                        variant="outlined"
-                        color="secondary"
-                        onClick={handleCancel}
-                        sx={{ ml: 1 }}
-                    >
+                <Box display="flex" gap={1} justifyContent="flex-end">
+                    <Button variant="outlined" color="secondary" onClick={handleCancel}>
                         I am under 21
                     </Button>
-                    <Button variant="contained" color="primary" onClick={handleConfirmAge}>
+                    <Button variant="contained" onClick={handleConfirmAge}>
                         I am over 21
                     </Button>
-
                 </Box>
             </DialogContent>
         </Dialog>

src/components/pages/dashboard/userDashboard/withdrawl/WithdrawlModal.tsx

-import { Box, Button, Modal, OutlinedInput } from "@mui/material";
-import Image from "next/image";
-import React from "react";
-import ConnectWalletForm from "../connectWallet/ConnectWalletForm";
+import { Box, Button, InputLabel, Modal, OutlinedInput } from "@mui/material";
 import { SecuritySafe } from "@wandersonalwes/iconsax-react";
 import { FormikProps } from "formik";
+import Image from "next/image";
+import React from "react";
+import { WithdrawlFormValues } from ".";
 
 export default function WithdrawlModal({
     open,
@@ -13,7 +13,7 @@ export default function WithdrawlModal({
 }: {
     open: boolean;
     handleClose: () => void;
-    formik: FormikProps<any>;
+    formik: FormikProps<WithdrawlFormValues>;
     wallet: string;
 }) {
     const [isEditing, setIsEditing] = React.useState(false);
@@ -70,7 +70,24 @@ export default function WithdrawlModal({
                     Your Withdrawn amount will be sent to the following address.
                 </p>
 
-                <form onSubmit={formik.handleSubmit}>
+                <form onSubmit={formik.handleSubmit} className="flex flex-col gap-3">
+                    <div className="relative">
+                        <InputLabel htmlFor="photoid_number" className="text-start">Photo ID <span className="text-red-500">*</span></InputLabel>
+                        <OutlinedInput
+                            name="photoid_number"
+                            id="photoid_number"
+                            value={formik.values.photoid_number}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            placeholder="Enter your Photo ID"
+                        />
+                        {
+                            formik.touched.photoid_number && formik.errors.photoid_number ?
+                                <span className="error text-start">{formik.errors.photoid_number || ""}</span> : null
+                        }
+                    </div>
+                    <div className="relative">
+                        <InputLabel htmlFor="wallet_address" className="text-start">Wallet Address <span className="text-red-500">*</span></InputLabel>
                         <div className="relative">
                             <OutlinedInput
                                 name="wallet_address"
@@ -99,6 +116,7 @@ export default function WithdrawlModal({
                                 </Button>
                             )}
                         </div>
+                    </div>
 
                     <Button
                         type="submit"

src/components/pages/dashboard/userDashboard/withdrawl/index.tsx

@@ -27,10 +27,11 @@ const validationSchema = Yup.object({
     ),
 });
 
-type FormValues = {
+export type WithdrawlFormValues = {
     game_provider: string;
     withdrawl_amounts: Record<string, number | "">;
     wallet_address: string;
+    photoid_number: string;
 };
 
 export default function WithdrawlPage({
@@ -48,11 +49,12 @@ export default function WithdrawlPage({
     const [withdrawMoney, { isLoading: widthdrawing }] =
         useWithdrawlMutation();
 
-    const formik = useFormik<FormValues>({
+    const formik = useFormik<WithdrawlFormValues>({
         initialValues: {
             game_provider: "",
             withdrawl_amounts: {},
             wallet_address: user?.wallet_address || "",
+            photoid_number: "",
         },
         validationSchema,
         enableReinitialize: true,