Skip to content

S
sweepstake
Commit 07735494 by Arjun Jhukal
Options

updated the loading state for game cred and also shifted the cred from server… 

updated the loading state for game cred and also shifted the cred from server side to client side rendering
parent d99cac5d
Showing with 211 additions and 48 deletions
package-lock.json
......@@ -13,6 +13,7 @@
"@ckeditor/ckeditor5-source-editing": "^47.0.0",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@lottiefiles/dotlottie-react": "^0.17.5",
"@mui/material": "^7.3.2",
"@reduxjs/toolkit": "^2.9.0",
"@tanstack/react-table": "^8.21.3",
......@@ -14438,6 +14439,24 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@lottiefiles/dotlottie-react": {
"version": "0.17.5",
"resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-react/-/dotlottie-react-0.17.5.tgz",
"integrity": "sha512-7CRfJOvA5EjPgiQok972Tg9zCY0/XsIhagiDCdb4zlywExmwYZoN4KOjf4KvwJVMRCrYtHp/txoXPG7se9ijfA==",
"license": "MIT",
"dependencies": {
"@lottiefiles/dotlottie-web": "0.54.1"
},
"peerDependencies": {
"react": "^17 || ^18 || ^19"
}
},
"node_modules/@lottiefiles/dotlottie-web": {
"version": "0.54.1",
"resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-web/-/dotlottie-web-0.54.1.tgz",
"integrity": "sha512-Xq6wKvQ1hJUAalctrrVSZNIPStJBEAzSsQl4rtinPEfl6LBZdos0GGfVLdyGjZZYODzoG28SMN09YKAC9Kz6RQ==",
"license": "MIT"
},
"node_modules/@mui/core-downloads-tracker": {
"version": "7.3.2",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.2.tgz",
......
package.json
......@@ -14,6 +14,7 @@
"@ckeditor/ckeditor5-source-editing": "^47.0.0",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@lottiefiles/dotlottie-react": "^0.17.5",
"@mui/material": "^7.3.2",
"@reduxjs/toolkit": "^2.9.0",
"@tanstack/react-table": "^8.21.3",
......
src/app/(auth)/verify-email/page.tsx
......@@ -15,7 +15,8 @@ export default function VerifyEmail() {
<h1 className='text-[24px] lg:text-[32px] leading-[120%] font-bold mb-4'>Verify your email to
get the fun started</h1>
{/* <Typography variant="h1" className='font-[700]'></Typography> */}
<p className='text-[14px] leading-[120%] font-normal lg:text-[16px] mb-4'>Check the link sent to <strong className='underline text-secondary'>abc@gmail.com</strong> to activate your account.</p>
{/* <p className='text-[14px] leading-[120%] font-normal lg:text-[16px] mb-4'>Check the link sent to <strong className='underline text-secondary'>abc@gmail.com</strong> to activate your account.</p> */}
<p className='text-[14px] leading-[120%] font-normal lg:text-[16px] mb-4'>Check your email for verification link.</p>
<Button fullWidth size="large" type="submit" variant="contained" color="primary" className='!mb-6' onClick={() => {
router.replace(PATH.DASHBOARD.ROOT)
}}>
......
src/app/(dashboard)/(user)/(outsideAuth)/buy-coins/[slug]/loading.tsx 0 → 100644
// components/Loading.tsx
"use client";
import React from "react";
import LotifyLoading from "@/components/atom/LotifyLoading";
import GlobalLoading from "@/components/organism/GlobalLoading";
export default function Loading() {
return (
<GlobalLoading />
);
}
src/app/(dashboard)/(user)/(outsideAuth)/buy-coins/loading.tsx 0 → 100644
// components/Loading.tsx
"use client";
import React from "react";
import LotifyLoading from "@/components/atom/LotifyLoading";
import GlobalLoading from "@/components/organism/GlobalLoading";
export default function Loading() {
return (
<GlobalLoading />
);
}
src/app/(dashboard)/(user)/(outsideAuth)/general/[slug]/loading.tsx
// components/Loading.tsx
import React from 'react';
"use client";
import React from "react";
import LotifyLoading from "@/components/atom/LotifyLoading";
import GlobalLoading from "@/components/organism/GlobalLoading";
export default function Loading() {
return (
<div className="flex items-center justify-center h-[60vh]">
<div className="flex flex-col items-center">
{/* Spinner */}
<div className="w-12 h-12 border-4 border-gray-200 border-t-primary rounded-full animate-spin"></div>
<p className="mt-4 text-gray-600 font-medium text-lg">Loading...</p>
</div>
</div>
<GlobalLoading />
);
}
src/app/(dashboard)/(user)/(outsideAuth)/loading.tsx
// components/Loading.tsx
import GlobalLoading from '@/components/organism/GlobalLoading';
import React from 'react';
export default function Loading() {
return (
<div className="flex items-center justify-center h-[60vh]">
<div className="flex flex-col items-center">
{/* Spinner */}
<div className="w-12 h-12 border-4 border-gray-200 border-t-primary rounded-full animate-spin"></div>
<p className="mt-4 text-gray-600 font-medium text-lg">Loading...</p>
</div>
</div>
<GlobalLoading />
);
}
src/app/(dashboard)/(user)/(outsideAuth)/support/loading.tsx 0 → 100644
// components/Loading.tsx
"use client";
import React from "react";
import LotifyLoading from "@/components/atom/LotifyLoading";
import GlobalLoading from "@/components/organism/GlobalLoading";
export default function Loading() {
return (
<GlobalLoading />
);
}
src/app/(dashboard)/(user)/(outsideAuth)/withdrawl/loading.tsx 0 → 100644
// components/Loading.tsx
"use client";
import React from "react";
import LotifyLoading from "@/components/atom/LotifyLoading";
import GlobalLoading from "@/components/organism/GlobalLoading";
export default function Loading() {
return (
<GlobalLoading />
);
}
src/app/(dashboard)/(user)/(privateUser)/credentials/loading.tsx
// components/Loading.tsx
import GlobalLoading from '@/components/organism/GlobalLoading';
import React from 'react';
export default function Loading() {
return (
<div className="flex items-center justify-center h-[60vh]">
<div className="flex flex-col items-center">
{/* Spinner */}
<div className="w-12 h-12 border-4 border-gray-200 border-t-primary rounded-full animate-spin"></div>
<p className="mt-4 text-gray-600 font-medium text-lg">Loading...</p>
</div>
</div>
<GlobalLoading />
);
}
src/app/globals.css
......@@ -444,4 +444,14 @@
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
\ No newline at end of file
src/components/atom/LotifyLoading.tsx 0 → 100644
"use client";
import React from 'react'
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
export default function LotifyLoading() {
return (
<DotLottieReact
src="/loading.json"
loop
autoplay
/>
)
}
src/components/molecules/Toast.tsx
......@@ -28,7 +28,7 @@ export default function Toast() {
return (
<Snackbar
open={isActive}
anchorOrigin={{ vertical: "top", horizontal: "right" }}
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
onClose={() => dispatch(closeToast())}
autoHideDuration={autoTimeout ? duration || 3000 : null}
sx={{ zIndex: 9999 }}
......
src/components/organism/Cards/UserProfileCard.tsx
......@@ -7,7 +7,7 @@ import Image from 'next/image'
import React from 'react'
export default function UserProfileCard({ balance, loading }: { balance: any; loading?: boolean }) {
const user = useAppSelector(state => state.auth.user);
const user = useAppSelector(state => state?.auth.user);
const { date } = formatDateTime(user?.registered_date as string);
return (
......@@ -35,7 +35,7 @@ export default function UserProfileCard({ balance, loading }: { balance: any; lo
</div>
{/* Other Cards */}
<div className="col-span-2 flex flex-col sm:flex-row gap-2">
{/* <div className="col-span-2 flex flex-col sm:flex-row gap-2">
{[0, 1, 2].map((_, index) => (
<div
key={index}
......@@ -49,7 +49,7 @@ export default function UserProfileCard({ balance, loading }: { balance: any; lo
</div>
</div>
))}
</div>
</div> */}
</div>) :
(<div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-4">
<div className="col-span-1 md:col-span-2 rounded-[14px] p-4 lg:py-6" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
......@@ -61,7 +61,7 @@ export default function UserProfileCard({ balance, loading }: { balance: any; lo
</div>
</div>
</div>
<div className="col-span-2 flex flex-col sm:flex-row gap-2">
{/* <div className="col-span-2 flex flex-col sm:flex-row gap-2">
<div className="w-full rounded-[14px] p-4 lg:py-6 flex justify-center sm:block text-left sm:text-center gap-3" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<Image src={"/assets/images/deposit.svg"} alt='' width={48} height={48} className='sm:mx-auto' />
<div className="content mt-3 ">
......@@ -83,7 +83,7 @@ export default function UserProfileCard({ balance, loading }: { balance: any; lo
<span className="text-white text-[9px]">Total Winnings</span>
</div>
</div>
</div>
</div> */}
</div>)
}
</GlassWrapper>
......
src/components/organism/GlobalLoading.tsx 0 → 100644
import React from 'react'
import LotifyLoading from '../atom/LotifyLoading'
export default function GlobalLoading() {
return (
<div className="flex items-center justify-center h-[80vh]">
<div className="flex flex-col items-center text-center">
<div className="w-40 h-40">
<LotifyLoading />
</div>
<p className="mt-6 text-gray-700 dark:text-gray-300 font-semibold text-lg animate-pulse tracking-wide">
Loading<span className="text-primary">...</span>
</p>
<p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
Please wait while we prepare your content
</p>
</div>
</div>
)
}
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/CoinCalculator.tsx
......@@ -74,7 +74,7 @@ export default function CoinCalculator({ slug }: { slug: string }) {
</p>
</div>
<div className="bonus">
<strong className='text-[16px] block'>+ 10</strong>
<strong className='text-[16px] block'>+ {amount} Bonus</strong>
{/* <span className='text-[12px]'>bonus</span> */}
</div>
</div>
......
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/index.tsx
......@@ -100,7 +100,7 @@ export default function CheckoutPage({ amount, slug, bonus }: {
})
)
}
}}>Proceed to Payment</Button>
}}>{gettingLink ? "Proceeding to Payment..." : "Proceed to Payment"}</Button>
<p className="text-[11px] leading-[120%] mt-8 mb-2 text-center">Powered By</p>
<div className="flex justify-center items-center gap-4">
......
src/components/pages/dashboard/userDashboard/gameCredentials/CredentialsCard.tsx
import { Box, Button } from '@mui/material'
import { Box, Button, CircularProgress } from '@mui/material'
import Image from 'next/image'
import React from 'react'
import BalanceRefresh from './BalanceRefresh'
......@@ -10,9 +10,10 @@ 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 }: { cred: CredentialsProps; balance: any }) {
export default function CredentialsCard({ cred, balance, balanceLoading }: { cred: CredentialsProps; balance: any, balanceLoading?: boolean }) {
const currentBalance = balance?.data?.game_information?.[cred.name] || null;
const scValue =
......@@ -25,10 +26,19 @@ export default function CredentialsCard({ cred, balance }: { cred: CredentialsPr
<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>
<p className="text-[14px] my-[6px] uppercase">
{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>
</p>}
<BalanceRefresh label='Refresh Balance' icon={true} />
</div>
......
src/components/pages/dashboard/userDashboard/gameCredentials/index.tsx
"use client";
import React from 'react'
import CredentialsCard from './CredentialsCard'
import { getUserGameBalance, getUserGameCredentials } from '@/serverApi/game';
import { useGetUserGameBalanceQuery, useGetUserGameCredentialsQuery } from '@/services/userApi';
import GlassWrapper from '@/components/molecules/GlassWrapper';
export default async function GameCredentialsPage() {
const creds = await getUserGameCredentials();
const balance = await getUserGameBalance();
function CredentialsCardShimmer() {
return (
<GlassWrapper className="p-4 lg:p-6 animate-pulse">
<>
{/* Header */}
<div className="credentials__header flex gap-2 items-center">
<div className="w-[74px] h-[74px] rounded-full bg-gray-700/50"></div>
<div className="flex-1 space-y-2">
<div className="h-4 bg-gray-700/50 w-3/4 rounded"></div>
<div className="h-3 bg-gray-700/40 w-1/2 rounded"></div>
<div className="h-3 bg-gray-700/30 w-1/3 rounded"></div>
</div>
</div>
{/* List */}
<ul className="mt-4 space-y-2">
{[1, 2, 3].map((i) => (
<li
key={i}
className="py-2 border-t border-b border-[rgba(255,255,255,0.2)] grid grid-cols-2 items-center"
>
<div className="h-3 bg-gray-700/50 rounded w-3/4"></div>
<div className="h-3 bg-gray-700/30 rounded w-2/4 justify-self-end"></div>
</li>
))}
</ul>
{/* Buttons */}
<div className="action__group mt-4 flex flex-col md:flex-row justify-between gap-2 md:gap-4">
<div className="h-10 bg-gray-700/40 rounded w-full md:w-1/2"></div>
<div className="h-10 bg-gray-700/30 rounded w-full md:w-1/2"></div>
</div>
</>
</GlassWrapper>
);
}
export default function GameCredentialsPage() {
const { data: creds, isLoading: loadingCreds } = useGetUserGameCredentialsQuery();
const { data: balance, isLoading: loadingBalance } = useGetUserGameBalanceQuery();
console.log("creds", creds);
console.log("balance", balance);
return (
<section className="credentials__listing ">
<div className="section__title mb-8 lg:max-w-[521px]">
......@@ -13,11 +54,21 @@ export default async function GameCredentialsPage() {
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-2 lg:gap-4">
{creds?.data.length ? creds?.data.map((cred) => (
<div className="col-span-1" key={cred.full_name}>
<CredentialsCard cred={cred} balance={balance} />
</div>
)) : ""}
{loadingCreds
? Array.from({ length: 6 }).map((_, i) => (
<CredentialsCardShimmer key={i} />
))
: creds?.data?.length
? creds.data.map((cred) => (
<div className="col-span-1" key={cred.full_name}>
<CredentialsCard
cred={cred}
balance={balance}
balanceLoading={loadingBalance}
/>
</div>
))
: ""}
</div>
</section>
)
......
src/components/pages/dashboard/userDashboard/games/exclusiveGames/exclusiveGameDetail/index.tsx
......@@ -53,7 +53,7 @@ export default function ExclusiveGameDetail({ game }: { game: SingleGameResponse
borderRadius: "16px"
}} className="flex justify-center items-center gap-2 py-4 px-6 border border-secondary">
<div className="coins">
<Link href={`/withdrawl/${game?.data?.id}`}>
<Link href={`/withdrawl`}>
<strong className="text-[16px] leading-4 font-[600] block mb-1 text-secondary">Withdraw Coins</strong>
</Link>
</div>
......
src/services/userApi.ts
......@@ -45,9 +45,15 @@ export const userApi = createApi({
url: "/api/detail/get-balance",
method: "GET"
})
})
}),
getUserGameCredentials: builder.query<CredentialsResponseProps, void>({
query: () => ({
url: `/api/credentials`,
method: "GET"
})
}),
})
})
export const { useAddUserWalletMutation, useUpdateUserProfileMutation, useGetUserBalanceQuery, useGetUserBalanceBySlugQuery, useGetUserGameBalanceQuery } = userApi;
\ No newline at end of file
export const { useAddUserWalletMutation, useUpdateUserProfileMutation, useGetUserBalanceQuery, useGetUserBalanceBySlugQuery, useGetUserGameBalanceQuery, useGetUserGameCredentialsQuery } = userApi;
\ 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