@opexa/portal-components 0.0.36 → 0.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/client/hooks/useAccountQuery.d.ts +1 -1
- package/dist/client/hooks/useAuthenticateMutation.d.ts +1 -1
- package/dist/client/hooks/useAvailablePromosQuery.d.ts +1 -1
- package/dist/client/hooks/useBetRecordsQuery.d.ts +1 -1
- package/dist/client/hooks/useBonusesQuery.d.ts +1 -1
- package/dist/client/hooks/useCashbacksQuery.d.ts +1 -1
- package/dist/client/hooks/useCreateGCashDepositMutation.d.ts +1 -1
- package/dist/client/hooks/useCreateGCashWithdrawalMutation.d.ts +1 -1
- package/dist/client/hooks/useCreateGameSessionMutation.d.ts +1 -1
- package/dist/client/hooks/useCreateGameSessionMutation.js +1 -1
- package/dist/client/hooks/useCreateInstapayWithdrawalMutation.d.ts +1 -1
- package/dist/client/hooks/useCreateMayaAppDepositMutation.d.ts +1 -1
- package/dist/client/hooks/useCreateMayaAppWithdrawalMutation.d.ts +1 -1
- package/dist/client/hooks/useCreateMayaDepositMutation.d.ts +1 -1
- package/dist/client/hooks/useCreateMayaWithdrawalMutation.d.ts +1 -1
- package/dist/client/hooks/useCreateOnlineBankDepositMutation.d.ts +1 -1
- package/dist/client/hooks/useCreateQRPHDepositMutation.d.ts +1 -1
- package/dist/client/hooks/useDepositQuery.d.ts +1 -1
- package/dist/client/hooks/useDepositRecordsQuery.d.ts +1 -1
- package/dist/client/hooks/useDepositsCountQuery.d.ts +1 -1
- package/dist/client/hooks/useEndGameSessionMutation.d.ts +1 -1
- package/dist/client/hooks/useEndGameSessionMutation.js +1 -1
- package/dist/client/hooks/useFavoriteGamesQuery.d.ts +1 -1
- package/dist/client/hooks/useGamesQuery.d.ts +1 -1
- package/dist/client/hooks/useInfiniteQueryHelper.d.ts +1 -1
- package/dist/client/hooks/useInstapayBankListQuery.d.ts +1 -1
- package/dist/client/hooks/useIsMayaSessionValidQuery.d.ts +1 -1
- package/dist/client/hooks/useJackpotPayoutsQuery.d.ts +1 -1
- package/dist/client/hooks/useJackpotPayoutsQuery.js +1 -1
- package/dist/client/hooks/useJackpotsQuery.d.ts +1 -1
- package/dist/client/hooks/useLocaleInfo.d.ts +1 -1
- package/dist/client/hooks/useMarkGameAsFavoriteMutation.d.ts +1 -1
- package/dist/client/hooks/useMarkMessageAsReadMutation.d.ts +1 -1
- package/dist/client/hooks/useMarkMessageAsReadMutation.js +1 -1
- package/dist/client/hooks/useMemberVerificationQuery.d.ts +1 -1
- package/dist/client/hooks/useMessagesQuery.d.ts +1 -1
- package/dist/client/hooks/usePaymentSettingsQuery.d.ts +1 -1
- package/dist/client/hooks/usePlatformQuery.d.ts +1 -1
- package/dist/client/hooks/useProfileCompletionQuery.d.ts +1 -1
- package/dist/client/hooks/usePromoQuery.d.ts +1 -1
- package/dist/client/hooks/usePromosQuery.d.ts +1 -1
- package/dist/client/hooks/useSendVerificationCodeMutation.d.ts +1 -1
- package/dist/client/hooks/useSessionQuery.d.ts +1 -1
- package/dist/client/hooks/useSignInMutation.d.ts +1 -1
- package/dist/client/hooks/useSignOutMutation.d.ts +1 -1
- package/dist/client/hooks/useSignUpMutation.d.ts +1 -1
- package/dist/client/hooks/useTopWinsQuery.d.ts +1 -1
- package/dist/client/hooks/useTournamentsQuery.d.ts +1 -1
- package/dist/client/hooks/useTransactionRecordsQuery.d.ts +1 -1
- package/dist/client/hooks/useUnmarkGameAsFavoriteMutation.d.ts +1 -1
- package/dist/client/hooks/useUnreadMessagesCountQuery.d.ts +1 -1
- package/dist/client/hooks/useWalletQuery.d.ts +1 -1
- package/dist/client/hooks/useWalletQuery.js +1 -1
- package/dist/client/hooks/useWithdrawalRecordsQuery.d.ts +1 -1
- package/dist/client/services/getSession.d.ts +1 -1
- package/dist/components/Account/Account.js +1 -1
- package/dist/components/AccountInfo/AccountInfo.js +1 -1
- package/dist/components/AccountVerification/VerificationCapture.js +5 -5
- package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositVCA.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositQrCode.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.js +1 -1
- package/dist/components/DepositWithdrawal/DepositWithdrawal.js +1 -1
- package/dist/components/DepositWithdrawal/PaymentMethods.js +5 -5
- package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js +1 -1
- package/dist/components/Disclaimer/Disclaimer.js +2 -2
- package/dist/components/GameProviders/GameProviders.d.ts +1 -1
- package/dist/components/GamesSearch/GamesSearch.js +1 -1
- package/dist/components/JackpotCounter/JackpotCounterItem.js +8 -10
- package/dist/components/Jackpots/JackpotGameProviders.d.ts +1 -1
- package/dist/components/Jackpots/JackpotItemDesktop.d.ts +1 -1
- package/dist/components/Jackpots/JackpotItemDesktop.js +8 -10
- package/dist/components/Jackpots/JackpotItemMobile.d.ts +1 -1
- package/dist/components/Jackpots/JackpotItemMobile.js +8 -13
- package/dist/components/Jackpots/Jackpots.d.ts +1 -1
- package/dist/components/Jackpots/Jackpots.js +1 -1
- package/dist/components/Jackpots/useJackpotItemData.d.ts +1 -1
- package/dist/components/Jackpots/useJackpotItemData.js +1 -1
- package/dist/components/Messages/utils.d.ts +1 -1
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js +2 -2
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js +1 -1
- package/dist/components/Quests/WageringQuest/WageringQuest.js +1 -1
- package/dist/components/Quests/WageringQuest/WageringQuestModal.js +1 -1
- package/dist/components/SignIn/SignInForm.js +1 -1
- package/dist/components/TournamentCounter/TournamentCounterItem.js +7 -8
- package/dist/components/Tournaments/TournamentGameProviders.d.ts +1 -1
- package/dist/components/Tournaments/TournamentItemDesktop.d.ts +1 -1
- package/dist/components/Tournaments/TournamentItemDesktop.js +6 -7
- package/dist/components/Tournaments/TournamentItemMobile.d.ts +1 -1
- package/dist/components/Tournaments/TournamentItemMobile.js +6 -11
- package/dist/components/Tournaments/Tournaments.d.ts +1 -1
- package/dist/components/Tournaments/Tournaments.js +1 -1
- package/dist/components/Tournaments/useTournamentItemData.d.ts +1 -1
- package/dist/components/TransactionRecords/TableFilters.d.ts +1 -1
- package/dist/icons/index.d.ts +3 -0
- package/dist/icons/index.js +3 -0
- package/dist/images/capture-id-banner.png +0 -0
- package/dist/images/capture-selfie-banner.png +0 -0
- package/dist/server/services/getSession.d.ts +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/utils/getPercentage.d.ts +1 -1
- package/dist/utils/getPercentage.js +6 -5
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.js +2 -0
- package/dist/utils/mask.d.ts +10 -0
- package/dist/utils/mask.js +10 -0
- package/package.json +6 -10
- package/dist/utils/maskDisplayName.d.ts +0 -1
- package/dist/utils/maskDisplayName.js +0 -8
|
@@ -9,13 +9,11 @@ import { useLocaleInfo } from '../../client/hooks/index.js';
|
|
|
9
9
|
import { useJackpotPayoutsQuery } from '../../client/hooks/useJackpotPayoutsQuery.js';
|
|
10
10
|
import { ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, Trophy01Icon, User01Icon, } from '../../icons/index.js';
|
|
11
11
|
import { StarIcon } from '../../icons/StarIcon.js';
|
|
12
|
-
import closeChest from '
|
|
13
|
-
import firstPlace from '
|
|
14
|
-
import leaderboard from '
|
|
15
|
-
import openChest from '
|
|
16
|
-
import { formatNumber } from '../../utils/index.js';
|
|
17
|
-
import { getPercentage } from '../../utils/getPercentage.js';
|
|
18
|
-
import { maskDisplayName } from '../../utils/maskDisplayName.js';
|
|
12
|
+
import closeChest from '../../images/close-chest.png';
|
|
13
|
+
import firstPlace from '../../images/first-place.png';
|
|
14
|
+
import leaderboard from '../../images/leaderboard.png';
|
|
15
|
+
import openChest from '../../images/open-chest.png';
|
|
16
|
+
import { formatNumber, getPercentage, mask } from '../../utils/index.js';
|
|
19
17
|
import styles from './JackpotCounterItem.module.css';
|
|
20
18
|
export function JackpotCounterItem({ jackpot, className, viewAllUrl, }) {
|
|
21
19
|
const jackpotPayoutsQuery = useJackpotPayoutsQuery({
|
|
@@ -52,7 +50,7 @@ export function JackpotCounterItem({ jackpot, className, viewAllUrl, }) {
|
|
|
52
50
|
currency: localeInfo.currency.code,
|
|
53
51
|
minDecimalPlaces: 2,
|
|
54
52
|
maxDecimalPlaces: 2,
|
|
55
|
-
}) })] }), _jsx("div", { className: "z-1 bottom-[-60] right-0 lg:absolute", children: _jsx(Image, { width: 150, height: 150, src: isPayingOut ? openChest : closeChest, alt: "closeChest", quality: 100, className: "h-25 w-25 lg:h-37.5 lg:w-37.5 size-full p-2" }) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children:
|
|
53
|
+
}) })] }), _jsx("div", { className: "z-1 bottom-[-60] right-0 lg:absolute", children: _jsx(Image, { width: 150, height: 150, src: isPayingOut ? openChest : closeChest, alt: "closeChest", quality: 100, className: "h-25 w-25 lg:h-37.5 lg:w-37.5 size-full p-2" }) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: topJackpotPayout.member.name }), _jsx("div", { className: "text-brand-400 text-2xl", children: formatNumber(topJackpotPayout.amount, {
|
|
56
54
|
currency: localeInfo.currency.code,
|
|
57
55
|
minDecimalPlaces: 2,
|
|
58
56
|
maxDecimalPlaces: 2,
|
|
@@ -62,12 +60,12 @@ export function JackpotCounterItem({ jackpot, className, viewAllUrl, }) {
|
|
|
62
60
|
}) }), _jsxs("div", { className: "relative flex items-center justify-end gap-1.5", children: [isPayingOut ? (_jsxs("div", { className: "flex w-6 items-center", children: [_jsx("div", { className: twMerge('absolute left-0', styles['animate-arrow-red-flash-1']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-1.5', styles['animate-arrow-red-flash-2']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-3', styles['animate-arrow-red-flash-3']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) })] })) : (_jsxs("div", { className: "flex w-6 items-center", children: [_jsx("div", { className: twMerge('absolute left-0', styles['animate-arrow-green-flash-1']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-1.5', styles['animate-arrow-green-flash-2']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-3', styles['animate-arrow-green-flash-3']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) })] })), _jsx("div", { className: "text-text-primary-900 text-xs font-semibold", children: formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
63
61
|
currency: localeInfo.currency.code,
|
|
64
62
|
compact: true,
|
|
65
|
-
}) })] })] }), _jsx(Progress.Root, { className: "bg-bg-primary h-2 w-full rounded-full lg:h-4", max: 100, value: getPercentage(
|
|
63
|
+
}) })] })] }), _jsx(Progress.Root, { className: "bg-bg-primary h-2 w-full rounded-full lg:h-4", max: 100, value: getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), children: _jsx(Progress.Track, { className: "bg-bg-primary h-full overflow-hidden rounded-full", children: _jsx(Progress.Range, { className: "bg-brand-500 relative h-full overflow-hidden rounded-full pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) }), _jsx("div", { className: "mt-1 block text-start text-2xs lg:hidden", children: isPayingOut
|
|
66
64
|
? `The pot has hit ${formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
67
65
|
currency: localeInfo.currency.code,
|
|
68
66
|
compact: true,
|
|
69
67
|
})} Play now for your chance to win big! 🔥`
|
|
70
|
-
: getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] })] }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, quality: 100, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!' })] }), _jsxs(Link, { className: "text-button-tertiary-fg flex text-sm font-semibold", href: viewAllUrl ?? '/jackpots', children: ["See details", _jsx(ChevronRightIcon, { className: "size-5" })] })] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children:
|
|
68
|
+
: getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] })] }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, quality: 100, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!' })] }), _jsxs(Link, { className: "text-button-tertiary-fg flex text-sm font-semibold", href: viewAllUrl ?? '/jackpots', children: ["See details", _jsx(ChevronRightIcon, { className: "size-5" })] })] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(jackpotPayout.member.name) }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(jackpotPayout.amount, {
|
|
71
69
|
currency: localeInfo.currency.code,
|
|
72
70
|
minDecimalPlaces: 2,
|
|
73
71
|
maxDecimalPlaces: 2,
|
|
@@ -5,13 +5,11 @@ import Image from 'next/image';
|
|
|
5
5
|
import { twMerge } from 'tailwind-merge';
|
|
6
6
|
import { ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, Trophy01Icon, User01Icon, } from '../../icons/index.js';
|
|
7
7
|
import { StarIcon } from '../../icons/StarIcon.js';
|
|
8
|
-
import closeChest from '
|
|
9
|
-
import firstPlace from '
|
|
10
|
-
import leaderboard from '
|
|
11
|
-
import openChest from '
|
|
12
|
-
import { formatNumber } from '../../utils/index.js';
|
|
13
|
-
import { getPercentage } from '../../utils/getPercentage.js';
|
|
14
|
-
import { maskDisplayName } from '../../utils/maskDisplayName.js';
|
|
8
|
+
import closeChest from '../../images/close-chest.png';
|
|
9
|
+
import firstPlace from '../../images/first-place.png';
|
|
10
|
+
import leaderboard from '../../images/leaderboard.png';
|
|
11
|
+
import openChest from '../../images/open-chest.png';
|
|
12
|
+
import { formatNumber, getPercentage, mask } from '../../utils/index.js';
|
|
15
13
|
import styles from '../JackpotCounter/JackpotCounterItem.module.css';
|
|
16
14
|
import { JackpotGameProviders } from './JackpotGameProviders.js';
|
|
17
15
|
import { JackpotRules } from './JackpotRules.js';
|
|
@@ -22,7 +20,7 @@ export function JackpotItemDesktop({ jackpot, gameProviders, }) {
|
|
|
22
20
|
currency: localeInfo.currency.code,
|
|
23
21
|
minDecimalPlaces: 2,
|
|
24
22
|
maxDecimalPlaces: 2,
|
|
25
|
-
}) })] }), _jsx("div", { className: "z-1 bottom-[-60] right-0 block lg:absolute", children: _jsx(Image, { width: 150, height: 150, src: isPayingOut ? openChest : closeChest, alt: "closeChest", quality: 100, className: "h-25 w-25 lg:h-37.5 lg:w-37.5 size-full p-2" }) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children:
|
|
23
|
+
}) })] }), _jsx("div", { className: "z-1 bottom-[-60] right-0 block lg:absolute", children: _jsx(Image, { width: 150, height: 150, src: isPayingOut ? openChest : closeChest, alt: "closeChest", quality: 100, className: "h-25 w-25 lg:h-37.5 lg:w-37.5 size-full p-2" }) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: mask(topJackpotPayout.member.name) }), _jsx("div", { className: "text-brand-400 text-2xl", children: formatNumber(topJackpotPayout.amount, {
|
|
26
24
|
currency: localeInfo.currency.code,
|
|
27
25
|
minDecimalPlaces: 2,
|
|
28
26
|
maxDecimalPlaces: 2,
|
|
@@ -32,12 +30,12 @@ export function JackpotItemDesktop({ jackpot, gameProviders, }) {
|
|
|
32
30
|
}) }), _jsxs("div", { className: "relative flex items-center justify-end gap-1.5", children: [isPayingOut ? (_jsxs("div", { className: "flex w-6 items-center", children: [_jsx("div", { className: twMerge('absolute left-0', styles['animate-arrow-red-flash-1']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-1.5', styles['animate-arrow-red-flash-2']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-3', styles['animate-arrow-red-flash-3']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) })] })) : (_jsxs("div", { className: "flex w-6 items-center", children: [_jsx("div", { className: twMerge('absolute left-0', styles['animate-arrow-green-flash-1']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-1.5', styles['animate-arrow-green-flash-2']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-3', styles['animate-arrow-green-flash-3']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) })] })), _jsx("div", { className: "text-text-primary-900 text-xs font-semibold", children: formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
33
31
|
currency: localeInfo.currency.code,
|
|
34
32
|
compact: true,
|
|
35
|
-
}) })] })] }), _jsx(Progress.Root, { className: "bg-bg-primary h-2 w-full rounded-full lg:h-4", max: 100, value: getPercentage(
|
|
33
|
+
}) })] })] }), _jsx(Progress.Root, { className: "bg-bg-primary h-2 w-full rounded-full lg:h-4", max: 100, value: getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), children: _jsx(Progress.Track, { className: "bg-bg-primary h-full overflow-hidden rounded-full", children: _jsx(Progress.Range, { className: "bg-brand-500 relative h-full overflow-hidden rounded-full pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) }), _jsx("div", { className: "mt-1 block text-start text-2xs lg:hidden", children: isPayingOut
|
|
36
34
|
? `The pot has hit ${formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
37
35
|
currency: localeInfo.currency.code,
|
|
38
36
|
compact: true,
|
|
39
37
|
})} Play now for your chance to win big! 🔥`
|
|
40
|
-
: getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] })] }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, quality: 100, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!' })] }), _jsx(JackpotRules, { jackpotRules: jackpot.description })] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children:
|
|
38
|
+
: getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] })] }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, quality: 100, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!' })] }), _jsx(JackpotRules, { jackpotRules: jackpot.description })] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(jackpotPayout.member.name) }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(jackpotPayout.amount, {
|
|
41
39
|
currency: localeInfo.currency.code,
|
|
42
40
|
minDecimalPlaces: 2,
|
|
43
41
|
maxDecimalPlaces: 2,
|
|
@@ -4,17 +4,12 @@ import { Progress } from '@ark-ui/react';
|
|
|
4
4
|
import Image from 'next/image';
|
|
5
5
|
import { useState } from 'react';
|
|
6
6
|
import { twMerge } from 'tailwind-merge';
|
|
7
|
-
import { ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, Trophy01Icon, User01Icon, } from '../../icons/index.js';
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import closeChest from '~/images/close-chest.png';
|
|
12
|
-
import firstPlace from '~/images/first-place.png';
|
|
13
|
-
import openChest from '~/images/open-chest.png';
|
|
7
|
+
import { ArrowNarrowDownIcon, ArrowNarrowUpIcon, ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, StarIcon, Trophy01Icon, User01Icon, } from '../../icons/index.js';
|
|
8
|
+
import closeChest from '../../images/close-chest.png';
|
|
9
|
+
import firstPlace from '../../images/first-place.png';
|
|
10
|
+
import openChest from '../../images/open-chest.png';
|
|
14
11
|
import { Button } from '../../ui/index.js';
|
|
15
|
-
import { formatNumber } from '../../utils/index.js';
|
|
16
|
-
import { getPercentage } from '../../utils/getPercentage.js';
|
|
17
|
-
import { maskDisplayName } from '../../utils/maskDisplayName.js';
|
|
12
|
+
import { formatNumber, getPercentage, mask } from '../../utils/index.js';
|
|
18
13
|
import styles from '../JackpotCounter/JackpotCounterItem.module.css';
|
|
19
14
|
import { JackpotGameProviders } from './JackpotGameProviders.js';
|
|
20
15
|
import { JackpotRules } from './JackpotRules.js';
|
|
@@ -32,16 +27,16 @@ export function JackpotItemMobile({ jackpot, gameProviders, }) {
|
|
|
32
27
|
}) }), _jsxs("div", { className: "relative flex items-center justify-end gap-1.5", children: [isPayingOut ? (_jsxs("div", { className: "flex w-6 items-center", children: [_jsx("div", { className: twMerge('absolute left-0', styles['animate-arrow-red-flash-1']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-1.5', styles['animate-arrow-red-flash-2']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-3', styles['animate-arrow-red-flash-3']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) })] })) : (_jsxs("div", { className: "flex w-6 items-center", children: [_jsx("div", { className: twMerge('absolute left-0', styles['animate-arrow-green-flash-1']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-1.5', styles['animate-arrow-green-flash-2']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-3', styles['animate-arrow-green-flash-3']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) })] })), _jsx("div", { className: "text-text-primary-900 text-xs font-semibold", children: formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
33
28
|
currency: localeInfo.currency.code,
|
|
34
29
|
compact: true,
|
|
35
|
-
}) })] })] }), _jsx(Progress.Root, { className: "bg-bg-primary h-2 w-full rounded-full lg:h-4", max: 100, value: getPercentage(
|
|
30
|
+
}) })] })] }), _jsx(Progress.Root, { className: "bg-bg-primary h-2 w-full rounded-full lg:h-4", max: 100, value: getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), children: _jsx(Progress.Track, { className: "bg-bg-primary h-full overflow-hidden rounded-full", children: _jsx(Progress.Range, { className: "bg-brand-500 relative h-full overflow-hidden rounded-full pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) }), _jsx("div", { className: "mt-1 block text-start text-2xs lg:hidden", children: isPayingOut
|
|
36
31
|
? `The pot has hit ${formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
37
32
|
currency: localeInfo.currency.code,
|
|
38
33
|
compact: true,
|
|
39
34
|
})} Play now for your chance to win big! 🔥`
|
|
40
|
-
: getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children:
|
|
35
|
+
: getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: mask(topJackpotPayout.member.name) }), _jsx("div", { className: "text-brand-400 text-2xl", children: formatNumber(topJackpotPayout.amount, {
|
|
41
36
|
currency: localeInfo.currency.code,
|
|
42
37
|
minDecimalPlaces: 2,
|
|
43
38
|
maxDecimalPlaces: 2,
|
|
44
|
-
}) })] })] }) })) : (_jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[66px] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }), isPayingOut && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:150px]') }))] }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("div", { className: "flex gap-2", children: _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!' }) }), _jsx(JackpotRules, { jackpotRules: jackpot.description })] }), _jsx("div", { children: _jsx("div", { className: "border-gray-200 overflow-hidden", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-center text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-center text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children:
|
|
39
|
+
}) })] })] }) })) : (_jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[66px] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }), isPayingOut && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:150px]') }))] }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("div", { className: "flex gap-2", children: _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!' }) }), _jsx(JackpotRules, { jackpotRules: jackpot.description })] }), _jsx("div", { children: _jsx("div", { className: "border-gray-200 overflow-hidden", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-center text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-center text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(jackpotPayout.member.name) }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(jackpotPayout.amount, {
|
|
45
40
|
currency: localeInfo.currency.code,
|
|
46
41
|
minDecimalPlaces: 2,
|
|
47
42
|
maxDecimalPlaces: 2,
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import Image from 'next/image';
|
|
4
4
|
import { useJackpotsQuery } from '../../client/hooks/index.js';
|
|
5
|
-
import closeChest from '
|
|
5
|
+
import closeChest from '../../images/close-chest.png';
|
|
6
6
|
import { JackpotItemDesktop } from './JackpotItemDesktop.js';
|
|
7
7
|
import { JackpotItemMobile } from './JackpotItemMobile.js';
|
|
8
8
|
export function Jackpots(props) {
|
|
@@ -22,7 +22,7 @@ export function useJackpotItemData({ jackpot, gameProviders, }) {
|
|
|
22
22
|
const topJackpotPayout = jackpotPayouts[0] ?? [];
|
|
23
23
|
const enabledJackpotGameProviders = useMemo(() => {
|
|
24
24
|
const gameProvider = Object.entries(jackpot?.jackpotTurnoverContributionPercentagePerGameProvider ?? {})
|
|
25
|
-
.filter(([
|
|
25
|
+
.filter(([, value]) => Number(value) > 0)
|
|
26
26
|
.map(([key]) => key);
|
|
27
27
|
return gameProvider;
|
|
28
28
|
}, [jackpot]);
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { useState } from 'react';
|
|
4
4
|
import { twMerge } from 'tailwind-merge';
|
|
5
|
+
import { CalendarIcon, ClockStopWatchIcon, InfoCircleIcon, } from '../../../icons/index.js';
|
|
5
6
|
import { Button } from '../../../ui/index.js';
|
|
6
|
-
import { useState } from 'react';
|
|
7
7
|
import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
|
|
8
8
|
export default function DailyCheckInQuest() {
|
|
9
9
|
const [showRules, setShowRules] = useState(false);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Button, Dialog } from '../../../ui/index.js';
|
|
4
3
|
import { Portal } from '@ark-ui/react';
|
|
5
4
|
import { XIcon } from '../../../icons/index.js';
|
|
5
|
+
import { Button, Dialog } from '../../../ui/index.js';
|
|
6
6
|
export function DailyCheckInQuestModal(props) {
|
|
7
7
|
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-[18px] font-semibold", children: "Daily Check-In Rules" }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn rewards just for checking in each day!" }), _jsx("li", { children: "Stay consistent to unlock special rewards on the 3rd, 5th, and 7th day." }), _jsx("li", { children: "Missing a day will reset your streak, starting again from Day 1." }), _jsx("li", { children: "Each check-in unlocks the next one on the following day." }), _jsx("li", { children: "Successfully check in for 7 consecutive days to complete the quest and reset the cycle." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
|
|
8
8
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from 'react';
|
|
3
4
|
import { ClockStopWatchIcon, InfoCircleIcon } from '../../../icons/index.js';
|
|
4
5
|
import { Button } from '../../../ui/index.js';
|
|
5
|
-
import { useState } from 'react';
|
|
6
6
|
import { WageringQuestModal } from './WageringQuestModal.js';
|
|
7
7
|
export default function WageringQuest() {
|
|
8
8
|
const [showRules, setShowRules] = useState(false);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Button, Dialog } from '../../../ui/index.js';
|
|
4
3
|
import { Portal } from '@ark-ui/react';
|
|
5
4
|
import { XIcon } from '../../../icons/index.js';
|
|
5
|
+
import { Button, Dialog } from '../../../ui/index.js';
|
|
6
6
|
export function WageringQuestModal(props) {
|
|
7
7
|
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-[18px] font-semibold", children: "Slots - total bet Rules" }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
|
|
8
8
|
}
|
|
@@ -8,7 +8,7 @@ import { z } from 'zod';
|
|
|
8
8
|
import { useShallow } from 'zustand/shallow';
|
|
9
9
|
import { useCooldown, useGlobalStore, useLocaleInfo, useMobileNumberParser, useSendVerificationCodeMutation, useSignInMutation, } from '../../client/hooks/index.js';
|
|
10
10
|
import { toaster } from '../../client/utils/index.js';
|
|
11
|
-
import { ArrowLeftIcon, CheckIcon, FacebookIcon, GoogleIcon } from '../../icons/index.js';
|
|
11
|
+
import { ArrowLeftIcon, CheckIcon, FacebookIcon, GoogleIcon, } from '../../icons/index.js';
|
|
12
12
|
import { Button, Checkbox, Field, PinInput } from '../../ui/index.js';
|
|
13
13
|
export function SignInForm() {
|
|
14
14
|
const [step, setStep] = useState(1);
|
|
@@ -2,18 +2,17 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { pick } from 'lodash-es';
|
|
4
4
|
import Image from 'next/image';
|
|
5
|
+
import Link from 'next/link';
|
|
5
6
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
6
7
|
import { twMerge } from 'tailwind-merge';
|
|
7
8
|
import { useLocaleInfo } from '../../client/hooks/index.js';
|
|
8
9
|
import { ChevronRightIcon, Trophy01Icon, User01Icon } from '../../icons/index.js';
|
|
9
10
|
import { Award01Icon } from '../../icons/Award01Icon.js';
|
|
10
11
|
import { StarIcon } from '../../icons/StarIcon.js';
|
|
11
|
-
import firstPlace from '
|
|
12
|
-
import trophyTwo from '
|
|
13
|
-
import trophy from '
|
|
14
|
-
import
|
|
15
|
-
import { formatNumber } from '../../utils/index.js';
|
|
16
|
-
import { maskDisplayName } from '../../utils/maskDisplayName.js';
|
|
12
|
+
import firstPlace from '../../images/first-place.png';
|
|
13
|
+
import trophyTwo from '../../images/trophy-two.png';
|
|
14
|
+
import trophy from '../../images/trophy.png';
|
|
15
|
+
import { formatNumber, mask } from '../../utils/index.js';
|
|
17
16
|
import styles from '../JackpotCounter/JackpotCounterItem.module.css';
|
|
18
17
|
export function TournamentCounterItem({ tournament, className, viewAllUrl, }) {
|
|
19
18
|
const localeInfo = useLocaleInfo();
|
|
@@ -71,13 +70,13 @@ export function TournamentCounterItem({ tournament, className, viewAllUrl, }) {
|
|
|
71
70
|
currency: localeInfo.currency.code,
|
|
72
71
|
minDecimalPlaces: 2,
|
|
73
72
|
maxDecimalPlaces: 2,
|
|
74
|
-
}) }), _jsx("div", { className: "text-text-primary-900 mt-4 block text-left text-base lg:hidden", children: "Play and Win!" })] }), _jsx("div", { className: "flex items-end lg:hidden", children: _jsx(Image, { src: trophy, alt: "trophy", quality: 100, width: 155, height: 155, className: "h-23 w-auto" }) })] })] }), _jsx("div", { className: "z-1 absolute -bottom-16 right-0 hidden lg:block", children: _jsx(Image, { quality: 100, width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) })] }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children:
|
|
73
|
+
}) }), _jsx("div", { className: "text-text-primary-900 mt-4 block text-left text-base lg:hidden", children: "Play and Win!" })] }), _jsx("div", { className: "flex items-end lg:hidden", children: _jsx(Image, { src: trophy, alt: "trophy", quality: 100, width: 155, height: 155, className: "h-23 w-auto" }) })] })] }), _jsx("div", { className: "z-1 absolute -bottom-16 right-0 hidden lg:block", children: _jsx(Image, { quality: 100, width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) })] }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: mask(tournament?.topPayouts[0]?.member?.name || '') }), _jsx("div", { className: "text-brand-400 text-2xl", children: formatNumber(tournament?.topPayouts[0]?.amount, {
|
|
75
74
|
currency: localeInfo.currency.code,
|
|
76
75
|
minDecimalPlaces: 2,
|
|
77
76
|
maxDecimalPlaces: 2,
|
|
78
77
|
}) })] })] }) })) : (_jsxs("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[66px] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] }))] }) }) }) }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Image, { width: 24, height: 24, src: trophyTwo, quality: 100, alt: "leaderboardIcon", className: "size-full w-6" }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: tournament.currentLeaderboard.edges.length
|
|
79
78
|
? 'Leaderboard'
|
|
80
|
-
: 'Starting soon!' })] }), _jsxs(Link, { className: "text-button-tertiary-fg flex text-sm font-semibold", href: viewAllUrl ?? '/tournaments', children: ["See details", _jsx(ChevronRightIcon, { className: "size-5" })] })] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length ? (_jsx(_Fragment, { children: tournament.currentLeaderboard.edges.map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children:
|
|
79
|
+
: 'Starting soon!' })] }), _jsxs(Link, { className: "text-button-tertiary-fg flex text-sm font-semibold", href: viewAllUrl ?? '/tournaments', children: ["See details", _jsx(ChevronRightIcon, { className: "size-5" })] })] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length ? (_jsx(_Fragment, { children: tournament.currentLeaderboard.edges.map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(tournament.node.username) }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [tournament.node.multiplier, "x"] }), i + 1 <= prizeAmountsByRank.length ? (_jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(prizeAmountsByRank[i], {
|
|
81
80
|
currency: localeInfo.currency.code,
|
|
82
81
|
minDecimalPlaces: 2,
|
|
83
82
|
maxDecimalPlaces: 2,
|
|
@@ -6,11 +6,10 @@ import { twMerge } from 'tailwind-merge';
|
|
|
6
6
|
import { Trophy01Icon, User01Icon } from '../../icons/index.js';
|
|
7
7
|
import { Award01Icon } from '../../icons/Award01Icon.js';
|
|
8
8
|
import { StarIcon } from '../../icons/StarIcon.js';
|
|
9
|
-
import firstPlace from '
|
|
10
|
-
import trophyTwo from '
|
|
11
|
-
import trophy from '
|
|
12
|
-
import { formatNumber } from '../../utils/index.js';
|
|
13
|
-
import { maskDisplayName } from '../../utils/maskDisplayName.js';
|
|
9
|
+
import firstPlace from '../../images/first-place.png';
|
|
10
|
+
import trophyTwo from '../../images/trophy-two.png';
|
|
11
|
+
import trophy from '../../images/trophy.png';
|
|
12
|
+
import { formatNumber, mask } from '../../utils/index.js';
|
|
14
13
|
import styles from '../JackpotCounter/JackpotCounterItem.module.css';
|
|
15
14
|
import { TournamentGameProviders } from './TournamentGameProviders.js';
|
|
16
15
|
import { TournamentRules } from './TournamentRules.js';
|
|
@@ -21,13 +20,13 @@ export function TournamentItemDesktop({ tournament, gameProviders, }) {
|
|
|
21
20
|
currency: localeInfo.currency.code,
|
|
22
21
|
minDecimalPlaces: 2,
|
|
23
22
|
maxDecimalPlaces: 2,
|
|
24
|
-
}) })] }), _jsx("div", { className: "z-1 bottom-[-60] right-0 block lg:absolute", children: _jsx("div", { className: "h-[155px] w-auto shrink-0", children: _jsx(Image, { quality: 100, width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) }) })] }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children:
|
|
23
|
+
}) })] }), _jsx("div", { className: "z-1 bottom-[-60] right-0 block lg:absolute", children: _jsx("div", { className: "h-[155px] w-auto shrink-0", children: _jsx(Image, { quality: 100, width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) }) })] }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: mask(tournament?.topPayouts[0]?.member?.name || '') }), _jsx("div", { className: "text-brand-400 text-2xl", children: formatNumber(tournament?.topPayouts[0]?.amount, {
|
|
25
24
|
currency: localeInfo.currency.code,
|
|
26
25
|
minDecimalPlaces: 2,
|
|
27
26
|
maxDecimalPlaces: 2,
|
|
28
27
|
}) })] })] }) })) : (_jsxs("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[66px] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] }))] }) }) }) }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Image, { width: 24, height: 24, src: trophyTwo, quality: 100, alt: "leaderboardIcon", className: "size-full w-6" }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: tournament.currentLeaderboard.edges.length
|
|
29
28
|
? 'Leaderboard'
|
|
30
|
-
: 'Starting soon!' })] }), _jsx(TournamentRules, { jackpotRules: tournament.description })] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length ? (_jsx(_Fragment, { children: tournament.currentLeaderboard.edges.map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children:
|
|
29
|
+
: 'Starting soon!' })] }), _jsx(TournamentRules, { jackpotRules: tournament.description })] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length ? (_jsx(_Fragment, { children: tournament.currentLeaderboard.edges.map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(tournament.node.username) }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [tournament.node.multiplier, "x"] }), i + 1 <= prizeAmountsByRank.length ? (_jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(prizeAmountsByRank[i], {
|
|
31
30
|
currency: localeInfo.currency.code,
|
|
32
31
|
minDecimalPlaces: 2,
|
|
33
32
|
maxDecimalPlaces: 2,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Tournament } from '@opexa/portal-sdk-core';
|
|
2
|
-
import type { GameProviderData } from '
|
|
2
|
+
import type { GameProviderData } from '../../types';
|
|
3
3
|
export interface TournamentItemMobileProps {
|
|
4
4
|
tournament: Tournament;
|
|
5
5
|
gameProviders: GameProviderData[];
|
|
@@ -3,16 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import Image from 'next/image';
|
|
4
4
|
import React, { useState } from 'react';
|
|
5
5
|
import { twMerge } from 'tailwind-merge';
|
|
6
|
-
import { Trophy01Icon, User01Icon } from '../../icons/index.js';
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { Award01Icon } from '../../icons/Award01Icon.js';
|
|
10
|
-
import { StarIcon } from '../../icons/StarIcon.js';
|
|
11
|
-
import firstPlace from '~/images/first-place.png';
|
|
12
|
-
import trophy from '~/images/trophy.png';
|
|
6
|
+
import { ArrowNarrowDownIcon, ArrowNarrowUpIcon, Award01Icon, StarIcon, Trophy01Icon, User01Icon, } from '../../icons/index.js';
|
|
7
|
+
import firstPlace from '../../images/first-place.png';
|
|
8
|
+
import trophy from '../../images/trophy.png';
|
|
13
9
|
import { Button } from '../../ui/index.js';
|
|
14
|
-
import { formatNumber } from '../../utils/index.js';
|
|
15
|
-
import { maskDisplayName } from '../../utils/maskDisplayName.js';
|
|
10
|
+
import { formatNumber, mask } from '../../utils/index.js';
|
|
16
11
|
import { TournamentGameProviders } from './TournamentGameProviders.js';
|
|
17
12
|
import { TournamentRules } from './TournamentRules.js';
|
|
18
13
|
import { useTournamentItemData } from './useTournamentItemData.js';
|
|
@@ -23,13 +18,13 @@ export function TournamentItemMobile({ tournament, gameProviders, }) {
|
|
|
23
18
|
currency: localeInfo.currency.code,
|
|
24
19
|
minDecimalPlaces: 2,
|
|
25
20
|
maxDecimalPlaces: 2,
|
|
26
|
-
}) })] }), _jsx("div", { className: "z-1 absolute bottom-[-60] right-0", children: _jsx(Image, { width: 72.94, height: 93, src: trophy, alt: "trophy", quality: 100, className: "size-full" }) })] }) }) }) }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children:
|
|
21
|
+
}) })] }), _jsx("div", { className: "z-1 absolute bottom-[-60] right-0", children: _jsx(Image, { width: 72.94, height: 93, src: trophy, alt: "trophy", quality: 100, className: "size-full" }) })] }) }) }) }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: mask(tournament?.topPayouts[0]?.member?.name || '') }), _jsx("div", { className: "text-brand-400 text-2xl", children: formatNumber(tournament?.topPayouts[0]?.amount, {
|
|
27
22
|
currency: localeInfo.currency.code,
|
|
28
23
|
minDecimalPlaces: 2,
|
|
29
24
|
maxDecimalPlaces: 2,
|
|
30
25
|
}) })] })] }) })) : (_jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[66px] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }) }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("div", { className: "flex gap-2", children: _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: tournament.currentLeaderboard.edges.length
|
|
31
26
|
? 'Leaderboard'
|
|
32
|
-
: 'Starting soon!' }) }), _jsx(TournamentRules, { jackpotRules: tournament.description })] }), _jsx("div", { children: _jsx("div", { className: "border-gray-200 overflow-hidden", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-center text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length ? (_jsx(_Fragment, { children: tournament.currentLeaderboard.edges.map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-center text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children:
|
|
27
|
+
: 'Starting soon!' }) }), _jsx(TournamentRules, { jackpotRules: tournament.description })] }), _jsx("div", { children: _jsx("div", { className: "border-gray-200 overflow-hidden", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-center text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length ? (_jsx(_Fragment, { children: tournament.currentLeaderboard.edges.map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-center text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(tournament.node.username) }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [tournament.node.multiplier, "x"] }), i + 1 <= prizeAmountsByRank.length ? (_jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(prizeAmountsByRank[i], {
|
|
33
28
|
currency: localeInfo.currency.code,
|
|
34
29
|
minDecimalPlaces: 2,
|
|
35
30
|
maxDecimalPlaces: 2,
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import Image from 'next/image';
|
|
4
4
|
import { useTournamentsQuery } from '../../client/hooks/index.js';
|
|
5
|
-
import closeChest from '
|
|
5
|
+
import closeChest from '../../images/close-chest.png';
|
|
6
6
|
import { TournamentItemDesktop } from './TournamentItemDesktop.js';
|
|
7
7
|
import { TournamentItemMobile } from './TournamentItemMobile.js';
|
|
8
8
|
export function Tournaments(props) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DepositStatus, GameProvider, GameType, TransactionType, WithdrawalStatus } from '@opexa/portal-sdk-core';
|
|
2
|
-
import type { DateRange } from '
|
|
2
|
+
import type { DateRange } from '../../types';
|
|
3
3
|
interface EnabledFilters {
|
|
4
4
|
timestamp?: boolean;
|
|
5
5
|
gameType?: boolean;
|
package/dist/icons/index.d.ts
CHANGED
|
@@ -2,8 +2,11 @@ export * from './AlertCircleIcon';
|
|
|
2
2
|
export * from './AlertTriangle';
|
|
3
3
|
export * from './Announcement01Icon';
|
|
4
4
|
export * from './ArrowLeftIcon';
|
|
5
|
+
export * from './ArrowNarrowDownIcon';
|
|
6
|
+
export * from './ArrowNarrowUpIcon';
|
|
5
7
|
export * from './ArrowNarrowUpRightIcon';
|
|
6
8
|
export * from './ArrowRightIcon';
|
|
9
|
+
export * from './Award01Icon';
|
|
7
10
|
export * from './Award02Icon';
|
|
8
11
|
export * from './BankIcon';
|
|
9
12
|
export * from './Bell01Icon';
|
package/dist/icons/index.js
CHANGED
|
@@ -2,8 +2,11 @@ export * from './AlertCircleIcon.js';
|
|
|
2
2
|
export * from './AlertTriangle.js';
|
|
3
3
|
export * from './Announcement01Icon.js';
|
|
4
4
|
export * from './ArrowLeftIcon.js';
|
|
5
|
+
export * from './ArrowNarrowDownIcon.js';
|
|
6
|
+
export * from './ArrowNarrowUpIcon.js';
|
|
5
7
|
export * from './ArrowNarrowUpRightIcon.js';
|
|
6
8
|
export * from './ArrowRightIcon.js';
|
|
9
|
+
export * from './Award01Icon.js';
|
|
7
10
|
export * from './Award02Icon.js';
|
|
8
11
|
export * from './BankIcon.js';
|
|
9
12
|
export * from './Bell01Icon.js';
|