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 React from 'react'
// import { Refresh } from '@wandersonalwes/iconsax-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 (
<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()} >
{icon ? <Refresh size={12} /> : ""}
{label || ""}
<p
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
? "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>
)
);
}
src/components/pages/dashboard/userDashboard/gameCredentials/CredentialsCard.tsx
import { Box, Button, CircularProgress } from '@mui/material'
import Image from 'next/image'
import React from 'react'
import BalanceRefresh from './BalanceRefresh'
import { Coin, Copy } 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 { b } from 'framer-motion/client'
export default function CredentialsCard({ cred, balance, balanceLoading }: { cred: CredentialsProps; balance: any, balanceLoading?: boolean }) {
const currentBalance = balance?.data?.game_information?.[cred.name] || null;
const scValue =
currentBalance?.type === "sc" ? currentBalance.balance ?? 0 : null;
const gcValue =
currentBalance?.type === "gc" ? currentBalance.balance ?? 0 : null;
// import { Box, Button, CircularProgress } from '@mui/material'
// import Image from 'next/image'
// import React from 'react'
// import BalanceRefresh from './BalanceRefresh'
// import { Coin, Copy } 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 { b } from 'framer-motion/client'
// import { useGetUserBalanceBySlugQuery } from '@/services/userApi'
// export default function CredentialsCard({ cred, balance, balanceLoading }: { cred: CredentialsProps; balance: any, balanceLoading?: boolean }) {
// const { data, isLoading } = useGetUserBalanceBySlugQuery({ slug: cred.name }, { skip: !cred.name });
// console.log("data", data?.data);
// const currentBalance = balance?.data?.game_information?.[cred.name] || 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 (
<GlassWrapper className="p-4 lg:p-6">
{/* Header Section */}
<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'
<Image
src={cred?.logo || "/assets/images/fallback.png"}
alt={cred?.full_name}
width={74}
height={74}
className="rounded-full aspect-square"
// ✅ Next.js LCP warning fix
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...
</span>
</div> : <p className="text-[14px] my-[6px] uppercase">
{currentBalance?.type === "sc" && `sc: ${scValue ?? "N/A"}`}
{currentBalance?.type === "gc" && `gc: ${gcValue ?? "N/A"}`}
</p>}
</div>
) : (
<p className="text-[14px] my-[6px] uppercase">
{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>
<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>
{/* Credentials Info */}
<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>
<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} />}
<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>
<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>
{/* Action Buttons */}
<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 '>
<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
) : (
<GameIframeDialog
gameName={cred?.full_name}
gameUrl={cred?.game_url || ""}
isCredCard={true}
/>
}
)}
</div>
</GlassWrapper>
)
);
}
src/components/pages/dashboard/userDashboard/gameCredentials/index.tsx
......@@ -44,8 +44,9 @@ function CredentialsCardShimmer() {
export default function GameCredentialsPage() {
const { data: creds, isLoading: loadingCreds } = useGetUserGameCredentialsQuery();
const { data: balance, isLoading: loadingBalance } = useGetUserGameBalanceQuery();
console.log("creds", creds);
console.log("balance", balance);
// console.log("creds", creds);
// console.log("balance", balance);
return (
<section className="credentials__listing ">
<div className="section__title mb-8 lg:max-w-[521px]">
......@@ -63,8 +64,8 @@ export default function GameCredentialsPage() {
<div className="col-span-1" key={cred.full_name}>
<CredentialsCard
cred={cred}
balance={balance}
balanceLoading={loadingBalance}
// balance={balance}
// balanceLoading={loadingBalance}
/>
</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