Commit acc5038e by Arjun Jhukal

updated the header popup for sweeps coint and gold coin

parent d6a3f84e
...@@ -22,7 +22,6 @@ export default function AccountTab() { ...@@ -22,7 +22,6 @@ export default function AccountTab() {
const user = useAppSelector((state) => state.auth.user); const user = useAppSelector((state) => state.auth.user);
console.log(user);
const renderTabContent = () => { const renderTabContent = () => {
switch (currentActiveTab) { switch (currentActiveTab) {
case "account_detail": case "account_detail":
......
...@@ -58,11 +58,7 @@ export default function Filter({ ...@@ -58,11 +58,7 @@ export default function Filter({
}; };
const handleSelect = (value: number | null, label: string) => { const handleSelect = (value: number | null, label: string) => {
// if (label === "Custom range") {
// setOpen(false);
// setTimeout(() => setCustomRangeOpen(true), 200);
// return;
// }
setCustomRange({ startDate: "", endDate: "" }); setCustomRange({ startDate: "", endDate: "" });
setStartDate(null); setStartDate(null);
......
import GoldCoinIcon from '@/icons/GoldCoinIcon' import GoldCoinIcon from '@/icons/GoldCoinIcon'
import SilverCoinIcon from '@/icons/SilverCoinIcon' import SilverCoinIcon from '@/icons/SilverCoinIcon'
import { useGetUserBalanceQuery } from '@/services/userApi' import { useGetUserBalanceQuery } from '@/services/userApi'
import { Box } from '@mui/material' import { UserBalance } from '@/types/user'
import { Box, Popper, Paper, Fade, ClickAwayListener, IconButton } from '@mui/material'
import { CloseCircle } from '@wandersonalwes/iconsax-react'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react' import React from 'react'
export default function UserCoinCard() { export default function UserCoinCard() {
const { data, isLoading } = useGetUserBalanceQuery(); const { data, isLoading } = useGetUserBalanceQuery();
const [goldCoinPopperOpen, setGoldCoinPopperOpen] = React.useState(false);
const [sweepsCoinPopperOpen, setSweepsCoinPopperOpen] = React.useState(false);
const goldAnchorRef = React.useRef<HTMLDivElement | null>(null);
const sweepsAnchorRef = React.useRef<HTMLDivElement | null>(null);
const sweepsCoin: UserBalance = data?.data?.[0] ?? { providers: [] };
return ( return (
<> <>
<Box sx={{ <Box sx={{
...@@ -13,10 +26,15 @@ export default function UserCoinCard() { ...@@ -13,10 +26,15 @@ export default function UserCoinCard() {
padding: "1px", padding: "1px",
borderRadius: "40px" borderRadius: "40px"
}}> }}>
<Box sx={{ <Box
background: "#2D2D30", ref={goldAnchorRef}
borderRadius: "40px" onClick={() => setGoldCoinPopperOpen(!goldCoinPopperOpen)}
}} className="flex justify-start items-center gap-1 py-2 pl-4 pr-8 cursor-pointer"> sx={{
background: "#2D2D30",
borderRadius: "40px"
}}
className="flex justify-start items-center gap-1 py-2 pl-4 pr-8 cursor-pointer"
>
<GoldCoinIcon /> <GoldCoinIcon />
<div className="coins"> <div className="coins">
<strong className="text-[12px] leading-4 font-[600] text-[#FBA027] block">{data?.data[1]?.value || 0}</strong> <strong className="text-[12px] leading-4 font-[600] text-[#FBA027] block">{data?.data[1]?.value || 0}</strong>
...@@ -24,22 +42,117 @@ export default function UserCoinCard() { ...@@ -24,22 +42,117 @@ export default function UserCoinCard() {
</div> </div>
</Box> </Box>
</Box> </Box>
<Popper
open={goldCoinPopperOpen}
anchorEl={goldAnchorRef.current}
placement="bottom-end"
transition
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={300}>
<Paper elevation={3} sx={{ borderRadius: 3, mt: 1 }}>
<ClickAwayListener onClickAway={() => setGoldCoinPopperOpen(false)}>
<Box className="p-6 w-[300px] lg:w-[438px]">
<div className="text-right">
<IconButton onClick={() => setGoldCoinPopperOpen(false)} className='!opacity-50'>
<CloseCircle />
</IconButton></div>
<div className="header flex justify-start items-center gap-4 border-b border-[rgba(255,255,255,0.1)] pb-3 mb-6 ">
<GoldCoinIcon />
<div className="coin-detail ">
<h2 className="text-[24px] leading-[120%] text-white">{data?.data[1]?.value || 0}</h2>
<p className="text-[11px] text-[rgba(255,255,255,0.8)]">Gold Coins</p>
</div>
</div>
<div className="content">
<p className="text-[11px] text-[rgba(255,255,255,0.8)] mb-6">Gold coins can be used to play all the games under the bonus categories. Enjoy all the bonus games and earn more coins.</p>
<span className="block p-2 bg-[#FEDD3E] rounded-[6px] text-title text-[11px]">Gold coins cannot be redeemed for prizes and have no real value.</span>
</div>
</Box>
</ClickAwayListener>
</Paper>
</Fade>
)}
</Popper>
<Box sx={{ <Box sx={{
background: "linear-gradient(to right,#69A29D,#93E0D9)", background: "linear-gradient(to right,#69A29D,#93E0D9)",
padding: "1px", padding: "1px",
borderRadius: "40px" borderRadius: "40px"
}}> }}>
<Box sx={{ <Box
background: "#2D2D30", ref={sweepsAnchorRef}
borderRadius: "40px" onClick={() => setSweepsCoinPopperOpen(!sweepsCoinPopperOpen)}
}} className="flex justify-start items-center gap-1 py-2 pl-4 pr-8 cursor-pointer"> sx={{
background: "#2D2D30",
borderRadius: "40px"
}}
className="flex justify-start items-center gap-1 py-2 pl-4 pr-8 cursor-pointer"
>
<SilverCoinIcon /> <SilverCoinIcon />
<div className="coins"> <div className="coins">
<strong className="text-[12px] leading-4 font-[600] text-[#93E0D8] block">{data?.data[0]?.value || 0}</strong> <strong className="text-[12px] leading-4 font-[600] text-[#93E0D8] block">{data?.data[0]?.value || 0}</strong>
<span className="text-[9px] mt-[-2px] hidden md:block">Sweeps Coins</span> <span className="text-[9px] mt-[-2px] hidden md:block">Sweeps Coins</span>
</div> </div>
</Box> </Box>
</Box > </Box>
<Popper
open={sweepsCoinPopperOpen}
anchorEl={sweepsAnchorRef.current}
placement="bottom-end"
transition
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={300}>
<Paper elevation={3} sx={{ borderRadius: 3, mt: 1 }}>
<ClickAwayListener onClickAway={() => setSweepsCoinPopperOpen(false)}>
<Box className="p-6 w-[300px] lg:w-[438px]">
<div className="text-right">
<IconButton onClick={() => setSweepsCoinPopperOpen(false)} className='!opacity-50'>
<CloseCircle />
</IconButton></div>
<div className="header flex justify-start items-center gap-4 border-b border-[rgba(255,255,255,0.1)] pb-3 mb-6 ">
<SilverCoinIcon />
<div className="coin-detail ">
<h2 className="text-[24px] leading-[120%] text-white">{data?.data[1]?.value || 0}</h2>
<p className="text-[11px] text-[rgba(255,255,255,0.8)]">Sweeps Coins</p>
</div>
</div>
<div className="flex flex-col gap-3">
{sweepsCoin?.providers?.length
? sweepsCoin.providers.map((coin) => (
<div className="grid grid-cols-12 gap-4 pb-2 border-b border-[rgba(255,255,255,0.2)]" key={coin.name}>
<div className="col-span-5">
<div className="flex justify-start items-center gap-2">
<Image src={coin.icon} alt={coin.name} width={16} height={16} className='!rounded-full aspect-square' />
<p className="text-[11px] text-white font-[500]">{coin.name}</p>
</div>
</div>
<div className="col-span-1">{coin.balance}</div>
<div className="col-span-6">
<div className="flex items-center justify-end gap-4">
<Link href={`/buy-coins/${coin.id}`} className='ss-btn !py-[6px] !px-[10px] bg-primary-grad text-[10px]'>
Buy Coin
</Link>
<Link href={`/withdrawl`} className='ss-btn !py-[6px] !px-[10px] bg-secondary-grad text-[10px]'>
Withdraw
</Link>
</div>
</div>
</div>
)) : ""}
</div>
</Box>
</ClickAwayListener>
</Paper>
</Fade>
)}
</Popper>
</> </>
) )
} }
\ No newline at end of file
...@@ -69,7 +69,6 @@ export default function RegisterPage() { ...@@ -69,7 +69,6 @@ export default function RegisterPage() {
router.replace(`${PATH.AUTH.VERIFY_EMAIL.ROOT}?email=${values.emailAddress}`); router.replace(`${PATH.AUTH.VERIFY_EMAIL.ROOT}?email=${values.emailAddress}`);
} }
catch (e: any) { catch (e: any) {
console.log("Error", e);
dispatch( dispatch(
showToast({ showToast({
message: e?.data?.message || "Unable to register user. Try again later", message: e?.data?.message || "Unable to register user. Try again later",
......
...@@ -66,7 +66,6 @@ export default function ResetPasswordForm({ email }: { email?: string }) { ...@@ -66,7 +66,6 @@ export default function ResetPasswordForm({ email }: { email?: string }) {
router.replace(PATH.AUTH.LOGIN.ROOT); router.replace(PATH.AUTH.LOGIN.ROOT);
} }
catch (e: any) { catch (e: any) {
console.log("Error", e);
dispatch( dispatch(
showToast({ showToast({
message: e?.data?.message || "Unable to reset password. Try again later", message: e?.data?.message || "Unable to reset password. Try again later",
......
...@@ -107,7 +107,7 @@ export default function Activities() { ...@@ -107,7 +107,7 @@ export default function Activities() {
accessorKey: "details", accessorKey: "details",
header: "Details", header: "Details",
cell: ({ row }) => ( cell: ({ row }) => (
<span className="text-[11px] text-para-light max-w-[250px] block truncate line-clamp-2"> <span className="text-[11px] text-para-light max-w-[250px] block ">
{row.original.log} {row.original.log}
</span> </span>
), ),
......
...@@ -26,7 +26,6 @@ export default function AddPageForm({ id }: { id?: string }) { ...@@ -26,7 +26,6 @@ export default function AddPageForm({ id }: { id?: string }) {
}) })
const [updatedPage, { isLoading: updating }] = useUpdatePageByIdMutation(); const [updatedPage, { isLoading: updating }] = useUpdatePageByIdMutation();
console.log("single page data", data);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const router = useRouter(); const router = useRouter();
const formik = useFormik({ const formik = useFormik({
......
...@@ -10,7 +10,6 @@ import React from 'react' ...@@ -10,7 +10,6 @@ import React from 'react'
export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }: { formik: FormikProps<PlayerProps>, id?: string, data?: SinlgePlayerResponseProps, loading?: boolean, buttonLabel?: string }) { export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }: { formik: FormikProps<PlayerProps>, id?: string, data?: SinlgePlayerResponseProps, loading?: boolean, buttonLabel?: string }) {
const router = useRouter(); const router = useRouter();
console.log(loading)
return ( return (
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
<div className="form__fields p-6 lg:p-10 flex flex-col gap-4 lg:gap-6 lg:grid grid-cols-2"> <div className="form__fields p-6 lg:p-10 flex flex-col gap-4 lg:gap-6 lg:grid grid-cols-2">
......
...@@ -89,7 +89,6 @@ export default function BannerSlider() { ...@@ -89,7 +89,6 @@ export default function BannerSlider() {
}) })
); );
} catch (e: any) { } catch (e: any) {
console.log(e);
dispatch( dispatch(
showToast({ showToast({
message: e.message || "Something went wrong", message: e.message || "Something went wrong",
......
...@@ -193,7 +193,6 @@ export default function SiteSetting() { ...@@ -193,7 +193,6 @@ export default function SiteSetting() {
<div className="form__fields p-6 lg:p-10 space-y-6"> <div className="form__fields p-6 lg:p-10 space-y-6">
{formik.values.unique_selling_points.map((usp, index) => { {formik.values.unique_selling_points.map((usp, index) => {
console.log(usp);
return ( return (
<div <div
key={index} key={index}
......
...@@ -23,7 +23,6 @@ export default function DepositHistoryPage( ...@@ -23,7 +23,6 @@ export default function DepositHistoryPage(
page, page,
per_page: pageSize per_page: pageSize
}); });
console.log("filterDays", { currentFilter, customRange })
const columns: ColumnDef<SingleDepositProps>[] = [ const columns: ColumnDef<SingleDepositProps>[] = [
{ {
accessorKey: 'id', accessorKey: 'id',
......
...@@ -26,7 +26,6 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) { ...@@ -26,7 +26,6 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
) as any; ) as any;
const balance = balanceData?.data || null; const balance = balanceData?.data || null;
console.log("Balance for", cred.name, balance);
// Extract values // Extract values
const scValue = balance?.flag === "sc" ? balance.balance ?? 0 : null; const scValue = balance?.flag === "sc" ? balance.balance ?? 0 : null;
......
// export interface UserBalance {
// type?: string;
// value?: string;
// providers: {
// id: number;
// name: string,
// provider: string,
// balance: 0
// }[]
// }
// export interface UserBalanceResponse {
// status?: string;
// message?: string;
// data: UserBalance[];
// }
export interface ProviderInfo {
id: number;
name: string;
provider: string;
icon: string; // ✅ added since you’re using coin.icon
balance: number | string; // ✅ fix type
}
export interface UserBalance { export interface UserBalance {
type?: string; type?: string;
value?: string; value?: string | number;
providers: { providers: ProviderInfo[]; // ✅ reference the provider type
id: number;
name: string,
provider: string,
balance: 0
}[]
} }
export interface UserBalanceResponse { export interface UserBalanceResponse {
status?: string; status?: string;
message?: string; message?: string;
data: UserBalance[]; data: UserBalance[];
} }
\ No newline at end of file
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