Commit 6027f7b9 by Arjun Jhukal

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

parent a802fe22
......@@ -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>
......
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,34 +70,52 @@ 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="wallet_address"
id="wallet_address"
value={formik.values.wallet_address}
name="photoid_number"
id="photoid_number"
value={formik.values.photoid_number}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
placeholder="Enter your bitcoin address"
disabled={!isEditing} // ✅ locked until change
placeholder="Enter your Photo ID"
/>
{!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>
)}
{
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"
id="wallet_address"
value={formik.values.wallet_address}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
placeholder="Enter your bitcoin address"
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>
<Button
......@@ -107,7 +125,7 @@ export default function WithdrawlModal({
className="!mt-3"
disabled={!formik.values.wallet_address}
>
Withdraw Now
Withdraw Now
</Button>
</form>
......
......@@ -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,
......
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