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() {
const user = useAppSelector((state) => state.auth.user);
console.log(user);
const renderTabContent = () => {
switch (currentActiveTab) {
case "account_detail":
......
......@@ -58,11 +58,7 @@ export default function Filter({
};
const handleSelect = (value: number | null, label: string) => {
// if (label === "Custom range") {
// setOpen(false);
// setTimeout(() => setCustomRangeOpen(true), 200);
// return;
// }
setCustomRange({ startDate: "", endDate: "" });
setStartDate(null);
......
import GoldCoinIcon from '@/icons/GoldCoinIcon'
import SilverCoinIcon from '@/icons/SilverCoinIcon'
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'
export default function UserCoinCard() {
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 (
<>
<Box sx={{
......@@ -13,10 +26,15 @@ export default function UserCoinCard() {
padding: "1px",
borderRadius: "40px"
}}>
<Box sx={{
background: "#2D2D30",
borderRadius: "40px"
}} className="flex justify-start items-center gap-1 py-2 pl-4 pr-8 cursor-pointer">
<Box
ref={goldAnchorRef}
onClick={() => setGoldCoinPopperOpen(!goldCoinPopperOpen)}
sx={{
background: "#2D2D30",
borderRadius: "40px"
}}
className="flex justify-start items-center gap-1 py-2 pl-4 pr-8 cursor-pointer"
>
<GoldCoinIcon />
<div className="coins">
<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() {
</div>
</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={{
background: "linear-gradient(to right,#69A29D,#93E0D9)",
padding: "1px",
borderRadius: "40px"
}}>
<Box sx={{
background: "#2D2D30",
borderRadius: "40px"
}} className="flex justify-start items-center gap-1 py-2 pl-4 pr-8 cursor-pointer">
<Box
ref={sweepsAnchorRef}
onClick={() => setSweepsCoinPopperOpen(!sweepsCoinPopperOpen)}
sx={{
background: "#2D2D30",
borderRadius: "40px"
}}
className="flex justify-start items-center gap-1 py-2 pl-4 pr-8 cursor-pointer"
>
<SilverCoinIcon />
<div className="coins">
<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>
</div>
</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() {
router.replace(`${PATH.AUTH.VERIFY_EMAIL.ROOT}?email=${values.emailAddress}`);
}
catch (e: any) {
console.log("Error", e);
dispatch(
showToast({
message: e?.data?.message || "Unable to register user. Try again later",
......
......@@ -66,7 +66,6 @@ export default function ResetPasswordForm({ email }: { email?: string }) {
router.replace(PATH.AUTH.LOGIN.ROOT);
}
catch (e: any) {
console.log("Error", e);
dispatch(
showToast({
message: e?.data?.message || "Unable to reset password. Try again later",
......
......@@ -107,7 +107,7 @@ export default function Activities() {
accessorKey: "details",
header: "Details",
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}
</span>
),
......
......@@ -26,7 +26,6 @@ export default function AddPageForm({ id }: { id?: string }) {
})
const [updatedPage, { isLoading: updating }] = useUpdatePageByIdMutation();
console.log("single page data", data);
const dispatch = useAppDispatch();
const router = useRouter();
const formik = useFormik({
......
......@@ -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 }) {
const router = useRouter();
console.log(loading)
return (
<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">
......
......@@ -89,7 +89,6 @@ export default function BannerSlider() {
})
);
} catch (e: any) {
console.log(e);
dispatch(
showToast({
message: e.message || "Something went wrong",
......
......@@ -193,7 +193,6 @@ export default function SiteSetting() {
<div className="form__fields p-6 lg:p-10 space-y-6">
{formik.values.unique_selling_points.map((usp, index) => {
console.log(usp);
return (
<div
key={index}
......
......@@ -23,7 +23,6 @@ export default function DepositHistoryPage(
page,
per_page: pageSize
});
console.log("filterDays", { currentFilter, customRange })
const columns: ColumnDef<SingleDepositProps>[] = [
{
accessorKey: 'id',
......
......@@ -26,7 +26,6 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
) as any;
const balance = balanceData?.data || null;
console.log("Balance for", cred.name, balance);
// Extract values
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 {
type?: string;
value?: string;
providers: {
id: number;
name: string,
provider: string,
balance: 0
}[]
value?: string | number;
providers: ProviderInfo[]; // ✅ reference the provider type
}
export interface UserBalanceResponse {
status?: string;
message?: string;
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