Skip to content

S
sweepstake
Commit 3557cd9c by Arjun Jhukal
Options

updated the fix for refresh balance

parent 07735494
Showing with 245 additions and 66 deletions
src/components/pages/dashboard/userDashboard/gameCredentials/BalanceRefresh.tsx
"use client" // "use client"
import { Refresh } from '@wandersonalwes/iconsax-react' // import { Refresh } from '@wandersonalwes/iconsax-react'
import React from 'react' // import React from 'react'
export default function BalanceRefresh({ label, icon, onClick }: { label: string; icon: boolean; onClick?: () => void }) { // export default function BalanceRefresh({ label, icon, onClick }: { label: string; icon: boolean; onClick?: () => void }) {
// return (
// <p className='text-[10px] lg:text-[12px] leading-[120%] font-[500] bg-primary-grad py-1 px-2 rounded-[12px] flex items-center gap-1 max-w-fit cursor-pointer' onClick={onClick} >
// {icon ? <Refresh size={12} /> : ""}
// {label || ""}
// </p>
// )
// }
"use client";
import { Refresh } from "@wandersonalwes/iconsax-react";
import React from "react";
import { CircularProgress } from "@mui/material";
export default function BalanceRefresh({
label,
icon,
onClick,
loading = false,
}: {
label: string;
icon: boolean;
onClick?: () => void;
loading?: boolean;
}) {
return ( return (
<p className='text-[10px] lg:text-[12px] leading-[120%] font-[500] bg-primary-grad py-1 px-2 rounded-[12px] flex items-center gap-1 max-w-fit cursor-pointer' onClick={() => window.location.reload()} > <p
{icon ? <Refresh size={12} /> : ""} className={`text-[10px] lg:text-[12px] leading-[120%] font-[500] py-1 px-2 rounded-[12px] flex items-center gap-1 max-w-fit cursor-pointer transition-all duration-200 ${loading
{label || ""} ? "bg-gray-500/50 text-gray-200 cursor-not-allowed"
: "bg-primary-grad text-white"
}`}
onClick={!loading ? onClick : undefined}
>
{loading ? (
<>
<CircularProgress size={10} thickness={5} color="inherit" />
Refreshing...
</>
) : (
<>
{icon && <Refresh size={12} />}
{label}
</>
)}
</p> </p>
) );
} }
src/components/pages/dashboard/userDashboard/gameCredentials/CredentialsCard.tsx
import { Box, Button, CircularProgress } from '@mui/material' // import { Box, Button, CircularProgress } from '@mui/material'
import Image from 'next/image' // import Image from 'next/image'
import React from 'react' // import React from 'react'
import BalanceRefresh from './BalanceRefresh' // import BalanceRefresh from './BalanceRefresh'
import { Coin, Copy } from '@wandersonalwes/iconsax-react' // import { Coin, Copy } from '@wandersonalwes/iconsax-react'
import Link from 'next/link' // import Link from 'next/link'
import TapIcon from '@/icons/Tap' // import TapIcon from '@/icons/Tap'
import { CredentialsProps } from '@/types/game' // import { CredentialsProps } from '@/types/game'
import { CardPasswordField } from './CardPasswordHandler' // import { CardPasswordField } from './CardPasswordHandler'
import CopyToClipboard from './CopyToClipboard' // import CopyToClipboard from './CopyToClipboard'
import GameIframeDialog from '../games/exclusiveGames/exclusiveGameDetail/GameIframeDialog' // import GameIframeDialog from '../games/exclusiveGames/exclusiveGameDetail/GameIframeDialog'
import GlassWrapper from '@/components/molecules/GlassWrapper' // import GlassWrapper from '@/components/molecules/GlassWrapper'
import { b } from 'framer-motion/client' // import { b } from 'framer-motion/client'
// import { useGetUserBalanceBySlugQuery } from '@/services/userApi'
export default function CredentialsCard({ cred, balance, balanceLoading }: { cred: CredentialsProps; balance: any, balanceLoading?: boolean }) {
const currentBalance = balance?.data?.game_information?.[cred.name] || null; // export default function CredentialsCard({ cred, balance, balanceLoading }: { cred: CredentialsProps; balance: any, balanceLoading?: boolean }) {
const scValue = // const { data, isLoading } = useGetUserBalanceBySlugQuery({ slug: cred.name }, { skip: !cred.name });
currentBalance?.type === "sc" ? currentBalance.balance ?? 0 : null; // console.log("data", data?.data);
const gcValue = // const currentBalance = balance?.data?.game_information?.[cred.name] || null;
currentBalance?.type === "gc" ? currentBalance.balance ?? 0 : null;
// const scValue =
// currentBalance?.type === "sc" ? currentBalance.balance ?? 0 : null;
// const gcValue =
// currentBalance?.type === "gc" ? currentBalance.balance ?? 0 : null;
// return (
// <GlassWrapper className="p-4 lg:p-6">
// <div className="credentials__header flex gap-2">
// <Image src={cred?.logo || "/assets/images/fallback.png"} alt={cred?.full_name} className='rounded-full aspect-square' width={74} height={74} />
// <div className="game__detail">
// <strong className='block text-[16px] text-white'>{cred.full_name}</strong>
// {balanceLoading ? <div className='flex items-center gap-2 mb-2'>
// <CircularProgress
// size={10}
// thickness={5}
// color='inherit'
// />
// <span className='text-gray-400 text-[10px]'>
// Updating balance...
// </span>
// </div> : <p className="text-[14px] my-[6px] uppercase">
// {currentBalance?.type === "sc" && `sc: ${scValue ?? "N/A"}`}
// {currentBalance?.type === "gc" && `gc: ${gcValue ?? "N/A"}`}
// </p>}
// <BalanceRefresh label='Refresh Balance' icon={true} />
// </div>
// </div>
// <ul className='mt-4'>
// <li className='py-2 border-t border-b border-[rgba(255,255,255,0.2)] grid grid-cols-2'>
// <span className='text-[12px] leading-[120%] font-[600]'>Entries :</span>
// <span className='text-[11px]'>{cred.entries || "N/A"}</span>
// </li>
// <li className='py-2 border-b border-[rgba(255,255,255,0.2)] grid grid-cols-2'>
// <span className='text-[12px] leading-[120%] font-[600]'>Username :</span>
// <div className="flex justify-between items-center">
// <span className='text-[11px]'>{cred?.credentials.username || "N/A"}</span>
// {cred.credentials.username && <CopyToClipboard text={cred.credentials.username} />}
// </div>
// </li>
// <li className='py-2 border-b border-[rgba(255,255,255,0.2)] grid grid-cols-2'>
// <span className='text-[12px] leading-[120%] font-[600]'>Password :</span>
// <CardPasswordField password={cred?.credentials.password} />
// </li>
// </ul>
// <div className="action__group mt-4 flex flex-col md:flex-row justify-between gap-2 md:gap-4">
// <Link href={`/buy-coins/${cred?.id}`} className='ss-btn bg-primary-grad flex justify-center items-center gap-1'><Coin />Buy Coins</Link>
// {
// !cred.is_iframe ? (
// <Link href={"#"} className='ss-btn bg-secondary-grad flex justify-center items-center text-[#426A66] gap-2 '>
// <TapIcon />
// Play Game
// </Link>
// ) : <GameIframeDialog
// gameName={cred?.full_name}
// gameUrl={cred?.game_url || ""}
// isCredCard={true}
// />
// }
// </div>
// </GlassWrapper>
// )
// }
"use client";
import { Box, Button, CircularProgress } from "@mui/material";
import Image from "next/image";
import React from "react";
import BalanceRefresh from "./BalanceRefresh";
import { Coin } from "@wandersonalwes/iconsax-react";
import Link from "next/link";
import TapIcon from "@/icons/Tap";
import { CredentialsProps } from "@/types/game";
import { CardPasswordField } from "./CardPasswordHandler";
import CopyToClipboard from "./CopyToClipboard";
import GameIframeDialog from "../games/exclusiveGames/exclusiveGameDetail/GameIframeDialog";
import GlassWrapper from "@/components/molecules/GlassWrapper";
import { useGetUserBalanceBySlugQuery } from "@/services/userApi";
export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
// Fetch live balance for this game using its provider slug (e.g. 'easystreet', 'goldcoincity', etc.)
const {
data: balanceData,
isLoading: balanceLoading,
isFetching,
refetch,
} = useGetUserBalanceBySlugQuery(
{ slug: cred?.name },
{ skip: !cred?.name }
) 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;
const gcValue = balance?.flag === "gc" ? balance.balance ?? 0 : null;
return ( return (
<GlassWrapper className="p-4 lg:p-6"> <GlassWrapper className="p-4 lg:p-6">
{/* Header Section */}
<div className="credentials__header flex gap-2"> <div className="credentials__header flex gap-2">
<Image src={cred?.logo || "/assets/images/fallback.png"} alt={cred?.full_name} className='rounded-full aspect-square' width={74} height={74} /> <Image
<div className="game__detail"> src={cred?.logo || "/assets/images/fallback.png"}
<strong className='block text-[16px] text-white'>{cred.full_name}</strong> alt={cred?.full_name}
{balanceLoading ? <div className='flex items-center gap-2 mb-2'> width={74}
<CircularProgress height={74}
size={10} className="rounded-full aspect-square"
thickness={5} // ✅ Next.js LCP warning fix
color='inherit' priority={true}
/> />
<span className='text-gray-400 text-[10px]'> <div className="game__detail flex flex-col">
<strong className="block text-[16px] text-white">
{cred.full_name}
</strong>
{balanceLoading ? (
<div className="flex items-center gap-2 mb-2">
<CircularProgress size={10} thickness={5} color="inherit" />
<span className="text-gray-400 text-[10px]">
Updating balance... Updating balance...
</span> </span>
</div> : <p className="text-[14px] my-[6px] uppercase"> </div>
{currentBalance?.type === "sc" && `sc: ${scValue ?? "N/A"}`} ) : (
{currentBalance?.type === "gc" && `gc: ${gcValue ?? "N/A"}`} <p className="text-[14px] my-[6px] uppercase">
</p>} {balance
? balance.flag === "sc"
? `SC: ${scValue}`
: balance.flag === "gc"
? `GC: ${gcValue}`
: "N/A"
: "N/A"}
</p>
)}
<BalanceRefresh label='Refresh Balance' icon={true} /> {/* Refresh Button */}
<BalanceRefresh
label="Refresh Balance"
icon={true}
onClick={() => refetch()}
loading={isFetching}
/>
</div> </div>
</div> </div>
<ul className='mt-4'>
<li className='py-2 border-t border-b border-[rgba(255,255,255,0.2)] grid grid-cols-2'> {/* Credentials Info */}
<span className='text-[12px] leading-[120%] font-[600]'>Entries :</span> <ul className="mt-4">
<span className='text-[11px]'>{cred.entries || "N/A"}</span> <li className="py-2 border-t border-b border-[rgba(255,255,255,0.2)] grid grid-cols-2">
<span className="text-[12px] leading-[120%] font-[600]">Entries :</span>
<span className="text-[11px]">{cred.entries || "N/A"}</span>
</li> </li>
<li className='py-2 border-b border-[rgba(255,255,255,0.2)] grid grid-cols-2'> <li className="py-2 border-b border-[rgba(255,255,255,0.2)] grid grid-cols-2">
<span className='text-[12px] leading-[120%] font-[600]'>Username :</span> <span className="text-[12px] leading-[120%] font-[600]">Username :</span>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className='text-[11px]'>{cred?.credentials.username || "N/A"}</span> <span className="text-[11px]">
{cred.credentials.username && <CopyToClipboard text={cred.credentials.username} />} {cred?.credentials.username || "N/A"}
</span>
{cred.credentials.username && (
<CopyToClipboard text={cred.credentials.username} />
)}
</div> </div>
</li> </li>
<li className='py-2 border-b border-[rgba(255,255,255,0.2)] grid grid-cols-2'> <li className="py-2 border-b border-[rgba(255,255,255,0.2)] grid grid-cols-2">
<span className='text-[12px] leading-[120%] font-[600]'>Password :</span> <span className="text-[12px] leading-[120%] font-[600]">Password :</span>
<CardPasswordField password={cred?.credentials.password} /> <CardPasswordField password={cred?.credentials.password} />
</li> </li>
</ul> </ul>
{/* Action Buttons */}
<div className="action__group mt-4 flex flex-col md:flex-row justify-between gap-2 md:gap-4"> <div className="action__group mt-4 flex flex-col md:flex-row justify-between gap-2 md:gap-4">
<Link href={`/buy-coins/${cred?.id}`} className='ss-btn bg-primary-grad flex justify-center items-center gap-1'><Coin />Buy Coins</Link> <Link
{ href={`/buy-coins/${cred?.id}`}
!cred.is_iframe ? ( className="ss-btn bg-primary-grad flex justify-center items-center gap-1"
<Link href={"#"} className='ss-btn bg-secondary-grad flex justify-center items-center text-[#426A66] gap-2 '> >
<Coin /> Buy Coins
</Link>
{!cred.is_iframe ? (
<Link
href="#"
className="ss-btn bg-secondary-grad flex justify-center items-center text-[#426A66] gap-2"
>
<TapIcon /> <TapIcon />
Play Game Play Game
</Link> </Link>
) : <GameIframeDialog ) : (
<GameIframeDialog
gameName={cred?.full_name} gameName={cred?.full_name}
gameUrl={cred?.game_url || ""} gameUrl={cred?.game_url || ""}
isCredCard={true} isCredCard={true}
/> />
} )}
</div> </div>
</GlassWrapper> </GlassWrapper>
) );
} }
src/components/pages/dashboard/userDashboard/gameCredentials/index.tsx
...@@ -44,8 +44,9 @@ function CredentialsCardShimmer() { ...@@ -44,8 +44,9 @@ function CredentialsCardShimmer() {
export default function GameCredentialsPage() { export default function GameCredentialsPage() {
const { data: creds, isLoading: loadingCreds } = useGetUserGameCredentialsQuery(); const { data: creds, isLoading: loadingCreds } = useGetUserGameCredentialsQuery();
const { data: balance, isLoading: loadingBalance } = useGetUserGameBalanceQuery(); const { data: balance, isLoading: loadingBalance } = useGetUserGameBalanceQuery();
console.log("creds", creds);
console.log("balance", balance); // console.log("creds", creds);
// console.log("balance", balance);
return ( return (
<section className="credentials__listing "> <section className="credentials__listing ">
<div className="section__title mb-8 lg:max-w-[521px]"> <div className="section__title mb-8 lg:max-w-[521px]">
...@@ -63,8 +64,8 @@ export default function GameCredentialsPage() { ...@@ -63,8 +64,8 @@ export default function GameCredentialsPage() {
<div className="col-span-1" key={cred.full_name}> <div className="col-span-1" key={cred.full_name}>
<CredentialsCard <CredentialsCard
cred={cred} cred={cred}
balance={balance} // balance={balance}
balanceLoading={loadingBalance} // balanceLoading={loadingBalance}
/> />
</div> </div>
)) ))
......
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