@opexa/portal-components 0.0.289 → 0.0.291
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/useAuthenticateMutation.js +8 -3
- package/dist/client/hooks/useSignInMutation.js +8 -3
- package/dist/components/Banner/Banner.client.d.ts +12 -0
- package/dist/components/Banner/Banner.client.js +49 -0
- package/dist/components/Bonus/Bonus.client.js +4 -4
- package/dist/components/Cashback/Cashback.client.js +1 -1
- package/dist/components/CustomPromo/CustomPromo.js +1 -1
- package/dist/components/GameLaunch/GameLaunch.lazy.js +1 -1
- package/dist/components/GamesSearch/GamesSearch.js +1 -1
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +184 -184
- package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +184 -184
- package/dist/components/KYC/utils.js +18 -18
- package/dist/components/News/News.js +1 -1
- package/dist/components/PortalProvider/FeatureFlag.js +1 -1
- package/dist/components/PortalProvider/PortalProvider.d.ts +3 -2
- package/dist/components/PortalProvider/PortalProvider.js +3 -4
- package/dist/components/PortalProvider/Providers.d.ts +5 -4
- package/dist/components/PortalProvider/Providers.js +3 -2
- package/dist/components/Promo/Promo.client.js +1 -1
- package/dist/components/Quests/JourneyQuest.d.ts +1 -0
- package/dist/components/Quests/JourneyQuest.js +61 -0
- package/dist/components/Quests/Quests.client.js +2 -0
- package/dist/components/Search/Search.lazy.js +1 -1
- package/dist/components/SignIn/MobileNumberSignIn.d.ts +1 -5
- package/dist/components/SignIn/MobileNumberSignIn.js +5 -23
- package/dist/components/SignIn/NameAndPasswordSignIn.d.ts +1 -5
- package/dist/components/SignIn/NameAndPasswordSignIn.js +6 -14
- package/dist/components/SignIn/SignIn.lazy.js +1 -1
- package/dist/components/SignIn/SignInForm.d.ts +1 -5
- package/dist/components/SignIn/SignInForm.js +2 -2
- package/dist/components/SignUp/SignUpDefault/SignUpForm.js +3 -7
- package/dist/components/SignUp/SignUpKYC/utils.js +18 -18
- package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.module.css +184 -184
- package/dist/components/Tournaments/TournamentsList/TournamentItem.module.css +184 -184
- package/dist/constants/EnvVar.d.ts +0 -2
- package/dist/constants/EnvVar.js +0 -11
- package/dist/constants/GameProvider.d.ts +1 -1
- package/dist/constants/GameProvider.js +1 -0
- package/dist/handlers/postAuthenticate.js +1 -1
- package/dist/handlers/postSession.js +1 -1
- package/dist/handlers/postTransformIdFrontImage.d.ts +3 -0
- package/dist/handlers/postTransformIdFrontImage.js +82 -0
- package/dist/handlers/postTransformSelfieImage.d.ts +3 -0
- package/dist/handlers/postTransformSelfieImage.js +82 -0
- package/dist/services/graphqlRequest.js +1 -9
- package/dist/services/httpRequest.js +1 -9
- package/dist/services/queries.js +2574 -2574
- package/dist/styles/theme.css +704 -701
- package/dist/ui/AlertDialog/AlertDialog.d.ts +55 -55
- package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +5 -5
- package/dist/ui/Badge/Badge.d.ts +12 -0
- package/dist/ui/Badge/badge.recipe.d.ts +3 -0
- package/dist/ui/Badge/badge.recipe.js +11 -0
- package/dist/ui/Combobox/Combobox.d.ts +42 -42
- package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
- package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
- package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
- package/dist/ui/Dialog/Dialog.d.ts +55 -55
- package/dist/ui/Dialog/dialog.recipe.d.ts +5 -5
- package/dist/ui/Drawer/Drawer.d.ts +33 -33
- package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
- package/dist/ui/Field/Field.d.ts +21 -21
- package/dist/ui/Field/field.recipe.d.ts +3 -3
- package/package.json +164 -163
- package/dist/client/hooks/index.d.ts +0 -65
- package/dist/client/hooks/index.js +0 -65
- package/dist/client/services/index.d.ts +0 -4
- package/dist/client/services/index.js +0 -4
- package/dist/client/utils/index.d.ts +0 -3
- package/dist/client/utils/index.js +0 -3
- package/dist/components/CashbackBonus/CashbackBonus.client.d.ts +0 -2
- package/dist/components/CashbackBonus/CashbackBonus.client.js +0 -9
- package/dist/components/CashbackBonus/CashbackBonus.d.ts +0 -10
- package/dist/components/CashbackBonus/CashbackBonus.js +0 -5
- package/dist/components/CashbackBonus/index.d.ts +0 -1
- package/dist/components/CashbackBonus/index.js +0 -1
- package/dist/components/Empty.d.ts +0 -9
- package/dist/components/Empty.js +0 -7
- package/dist/components/FeatureFlag/FeatureFlag.d.ts +0 -1
- package/dist/components/FeatureFlag/FeatureFlag.js +0 -29
- package/dist/components/FeatureFlag/index.d.ts +0 -1
- package/dist/components/FeatureFlag/index.js +0 -1
- package/dist/components/Games/GameContext.d.ts +0 -2
- package/dist/components/Games/GameContext.js +0 -2
- package/dist/components/InfiniteScroll.d.ts +0 -10
- package/dist/components/InfiniteScroll.js +0 -25
- package/dist/components/JackpotCounter/JackpotCounter.client.d.ts +0 -2
- package/dist/components/JackpotCounter/JackpotCounter.client.js +0 -66
- package/dist/components/JackpotCounter/JackpotCounter.d.ts +0 -17
- package/dist/components/JackpotCounter/JackpotCounter.js +0 -21
- package/dist/components/JackpotCounter/JackpotCounterItem.d.ts +0 -18
- package/dist/components/JackpotCounter/JackpotCounterItem.js +0 -109
- package/dist/components/JackpotCounter/JackpotCounterItem.module.css +0 -184
- package/dist/components/JackpotCounter/index.d.ts +0 -1
- package/dist/components/JackpotCounter/index.js +0 -1
- package/dist/components/Jackpots/JackpotDesktop.d.ts +0 -1
- package/dist/components/Jackpots/JackpotDesktop.js +0 -45
- package/dist/components/Jackpots/JackpotGameProviders.d.ts +0 -5
- package/dist/components/Jackpots/JackpotGameProviders.js +0 -41
- package/dist/components/Jackpots/JackpotItemDesktop.d.ts +0 -9
- package/dist/components/Jackpots/JackpotItemDesktop.js +0 -43
- package/dist/components/Jackpots/JackpotItemMobile.d.ts +0 -9
- package/dist/components/Jackpots/JackpotItemMobile.js +0 -44
- package/dist/components/Jackpots/JackpotMobile.d.ts +0 -1
- package/dist/components/Jackpots/JackpotMobile.js +0 -46
- package/dist/components/Jackpots/JackpotRules.d.ts +0 -5
- package/dist/components/Jackpots/JackpotRules.js +0 -11
- package/dist/components/Jackpots/Jackpots.client.d.ts +0 -2
- package/dist/components/Jackpots/Jackpots.client.js +0 -29
- package/dist/components/Jackpots/JackpotsContext.d.ts +0 -4
- package/dist/components/Jackpots/JackpotsContext.js +0 -3
- package/dist/components/Jackpots/useJackpotData.d.ts +0 -14
- package/dist/components/Jackpots/useJackpotData.js +0 -93
- package/dist/components/Jackpots/useJackpotItemData.d.ts +0 -20
- package/dist/components/Jackpots/useJackpotItemData.js +0 -87
- package/dist/components/KYC/AutoOpen.d.ts +0 -1
- package/dist/components/KYC/AutoOpen.js +0 -45
- package/dist/components/KYC/Header.d.ts +0 -1
- package/dist/components/KYC/Header.js +0 -8
- package/dist/components/KYC/Step1.d.ts +0 -1
- package/dist/components/KYC/Step1.js +0 -13
- package/dist/components/KYC/Step2.d.ts +0 -1
- package/dist/components/KYC/Step2.js +0 -13
- package/dist/components/KYC/Step3.d.ts +0 -1
- package/dist/components/KYC/Step3.js +0 -13
- package/dist/components/KYC/Step4.d.ts +0 -1
- package/dist/components/KYC/Step4.js +0 -7
- package/dist/components/KYC/backup/Header.d.ts +0 -1
- package/dist/components/KYC/backup/Header.js +0 -8
- package/dist/components/KYC/backup/Indicator.d.ts +0 -1
- package/dist/components/KYC/backup/Indicator.js +0 -9
- package/dist/components/KYC/backup/KYC.d.ts +0 -1
- package/dist/components/KYC/backup/KYC.js +0 -14
- package/dist/components/KYC/backup/KYC.lazy.d.ts +0 -1
- package/dist/components/KYC/backup/KYC.lazy.js +0 -26
- package/dist/components/KYC/backup/KYCContext.d.ts +0 -6
- package/dist/components/KYC/backup/KYCContext.js +0 -2
- package/dist/components/KYC/backup/Step1.d.ts +0 -1
- package/dist/components/KYC/backup/Step1.js +0 -13
- package/dist/components/KYC/backup/Step2.d.ts +0 -1
- package/dist/components/KYC/backup/Step2.js +0 -13
- package/dist/components/KYC/backup/Step3.d.ts +0 -1
- package/dist/components/KYC/backup/Step3.js +0 -13
- package/dist/components/KYC/backup/Step4.d.ts +0 -1
- package/dist/components/KYC/backup/Step4.js +0 -7
- package/dist/components/KYC/backup/useKYC.d.ts +0 -10
- package/dist/components/KYC/backup/useKYC.js +0 -8
- package/dist/components/KYC/loadModels.d.ts +0 -1
- package/dist/components/KYC/loadModels.js +0 -9
- package/dist/components/Messages/Message.d.ts +0 -1
- package/dist/components/Messages/Message.js +0 -34
- package/dist/components/Messages/MessageContext.d.ts +0 -6
- package/dist/components/Messages/MessageContext.js +0 -2
- package/dist/components/Messages/MessageItem.d.ts +0 -4
- package/dist/components/Messages/MessageItem.js +0 -34
- package/dist/components/Messages/MessagePopup.d.ts +0 -1
- package/dist/components/Messages/MessagePopup.js +0 -19
- package/dist/components/Messages/MessageTrigger.d.ts +0 -8
- package/dist/components/Messages/MessageTrigger.js +0 -19
- package/dist/components/Promo/PromoContent.d.ts +0 -2
- package/dist/components/Promo/PromoContent.js +0 -9
- package/dist/components/Promos/PromoCarousel.d.ts +0 -2
- package/dist/components/Promos/PromoCarousel.js +0 -41
- package/dist/components/Promos/PromoGrid.d.ts +0 -2
- package/dist/components/Promos/PromoGrid.js +0 -12
- package/dist/components/Promos/PromoItem.d.ts +0 -7
- package/dist/components/Promos/PromoItem.js +0 -10
- package/dist/components/Quests/CountdownTimer.d.ts +0 -15
- package/dist/components/Quests/CountdownTimer.js +0 -33
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts +0 -4
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js +0 -78
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.d.ts +0 -8
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js +0 -9
- package/dist/components/Quests/OnboardingQuest/OnboardingQuest.d.ts +0 -4
- package/dist/components/Quests/OnboardingQuest/OnboardingQuest.js +0 -4
- package/dist/components/Quests/WageringQuest/WageringQuest.d.ts +0 -4
- package/dist/components/Quests/WageringQuest/WageringQuest.js +0 -20
- package/dist/components/Quests/WageringQuest/WageringQuestModal.d.ts +0 -9
- package/dist/components/Quests/WageringQuest/WageringQuestModal.js +0 -9
- package/dist/components/SignUp/SignUp.lazy.d.ts +0 -12
- package/dist/components/SignUp/SignUp.lazy.js +0 -18
- package/dist/components/SignUp/SignUpContext.d.ts +0 -6
- package/dist/components/SignUp/SignUpContext.js +0 -2
- package/dist/components/SignUp/SignUpForm.d.ts +0 -1
- package/dist/components/SignUp/SignUpForm.js +0 -288
- package/dist/components/TournamentCounter/TournamentCounter.client.d.ts +0 -2
- package/dist/components/TournamentCounter/TournamentCounter.client.js +0 -50
- package/dist/components/TournamentCounter/TournamentCounter.d.ts +0 -8
- package/dist/components/TournamentCounter/TournamentCounter.js +0 -21
- package/dist/components/TournamentCounter/TournamentCounterItem.d.ts +0 -8
- package/dist/components/TournamentCounter/TournamentCounterItem.js +0 -106
- package/dist/components/TournamentCounter/index.d.ts +0 -1
- package/dist/components/TournamentCounter/index.js +0 -1
- package/dist/components/Tournaments/TournamentDesktop.d.ts +0 -1
- package/dist/components/Tournaments/TournamentDesktop.js +0 -57
- package/dist/components/Tournaments/TournamentGameProviders.d.ts +0 -5
- package/dist/components/Tournaments/TournamentGameProviders.js +0 -38
- package/dist/components/Tournaments/TournamentItemDesktop.d.ts +0 -7
- package/dist/components/Tournaments/TournamentItemDesktop.js +0 -56
- package/dist/components/Tournaments/TournamentItemMobile.d.ts +0 -7
- package/dist/components/Tournaments/TournamentItemMobile.js +0 -54
- package/dist/components/Tournaments/TournamentMobile.d.ts +0 -1
- package/dist/components/Tournaments/TournamentMobile.js +0 -55
- package/dist/components/Tournaments/TournamentRules.d.ts +0 -5
- package/dist/components/Tournaments/TournamentRules.js +0 -11
- package/dist/components/Tournaments/Tournaments.client.d.ts +0 -2
- package/dist/components/Tournaments/Tournaments.client.js +0 -20
- package/dist/components/Tournaments/TournamentsContext.d.ts +0 -4
- package/dist/components/Tournaments/TournamentsContext.js +0 -3
- package/dist/components/Tournaments/useTournamentData.d.ts +0 -10
- package/dist/components/Tournaments/useTournamentData.js +0 -72
- package/dist/components/Tournaments/useTournamentItemData.d.ts +0 -16
- package/dist/components/Tournaments/useTournamentItemData.js +0 -64
- package/dist/components/index.d.ts +0 -33
- package/dist/components/index.js +0 -33
- package/dist/components/shared/IdDocumentField.client.d.ts +0 -25
- package/dist/components/shared/IdDocumentField.client.js +0 -204
- package/dist/components/shared/IdDocumentField.d.ts +0 -2
- package/dist/components/shared/IdDocumentField.js +0 -11
- package/dist/components/shared/SelfieField.client.d.ts +0 -20
- package/dist/components/shared/SelfieField.client.js +0 -327
- package/dist/components/shared/SelfieField.d.ts +0 -2
- package/dist/components/shared/SelfieField.js +0 -11
- package/dist/constants/BranchCode.d.ts +0 -4
- package/dist/constants/BranchCode.js +0 -42
- package/dist/constants/endpoints.d.ts +0 -10
- package/dist/constants/endpoints.js +0 -41
- package/dist/constants/envVars.d.ts +0 -5
- package/dist/constants/envVars.js +0 -28
- package/dist/constants/gameProviders.d.ts +0 -76
- package/dist/constants/gameProviders.js +0 -361
- package/dist/constants/gameTypes.d.ts +0 -3
- package/dist/constants/gameTypes.js +0 -64
- package/dist/constants/headerKeys.d.ts +0 -2
- package/dist/constants/headerKeys.js +0 -2
- package/dist/constants/secretQuestions.d.ts +0 -3
- package/dist/constants/secretQuestions.js +0 -24
- package/dist/constants/storageKeys.d.ts +0 -2
- package/dist/constants/storageKeys.js +0 -2
- package/dist/handlers.d.ts +0 -43
- package/dist/handlers.js +0 -297
- package/dist/icons/BellRingIcon.d.ts +0 -2
- package/dist/icons/BellRingIcon.js +0 -4
- package/dist/icons/index.d.ts +0 -65
- package/dist/icons/index.js +0 -65
- package/dist/images/hacksaw-gaming.png +0 -0
- package/dist/server/services/index.d.ts +0 -4
- package/dist/server/services/index.js +0 -4
- package/dist/server/utils/index.d.ts +0 -29
- package/dist/server/utils/index.js +0 -29
- package/dist/ui/Presence.d.ts +0 -2
- package/dist/ui/Presence.js +0 -7
- package/dist/ui/Prose.d.ts +0 -2
- package/dist/ui/Prose.js +0 -5
- package/dist/ui/index.d.ts +0 -26
- package/dist/ui/index.js +0 -26
- package/dist/utils/createErrorFromCode.d.ts +0 -2
- package/dist/utils/createErrorFromCode.js +0 -11
- package/dist/utils/dataUrlToBlob.d.ts +0 -1
- package/dist/utils/dataUrlToBlob.js +0 -11
- package/dist/utils/index.d.ts +0 -17
- package/dist/utils/index.js +0 -17
- package/dist/utils/isMobile.d.ts +0 -5
- package/dist/utils/isMobile.js +0 -9
- package/dist/utils/resizeImageSize.d.ts +0 -1
- package/dist/utils/resizeImageSize.js +0 -6
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { Progress } from '@ark-ui/react';
|
|
4
|
-
import Image from 'next/image';
|
|
5
|
-
import { twMerge } from 'tailwind-merge';
|
|
6
|
-
import { ArrowNarrowUpRightIcon, ChevronLeftIcon, ChevronRightIcon, Trophy01Icon, User01Icon, } from '../../icons/index.js';
|
|
7
|
-
import { StarIcon } from '../../icons/StarIcon.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';
|
|
13
|
-
import styles from '../JackpotCounter/JackpotCounterItem.module.css';
|
|
14
|
-
import { JackpotGameProviders } from './JackpotGameProviders.js';
|
|
15
|
-
import { JackpotRules } from './JackpotRules.js';
|
|
16
|
-
import { useJackpotItemData } from './useJackpotItemData.js';
|
|
17
|
-
export function JackpotItemDesktop({ jackpot, gameProviders, }) {
|
|
18
|
-
const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, starTierStyles, } = useJackpotItemData({ jackpot, gameProviders });
|
|
19
|
-
return (_jsxs("div", { className: twMerge('bg-bg-tertiary border-border-primary rounded-2xl border'), children: [_jsxs("div", { className: twMerge('relative flex shrink-0 p-3 text-center lg:gap-4 lg:p-5'), children: [_jsxs("div", { className: "z-1 relative flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [isPayingOut ? (_jsxs("div", { className: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [_jsx("span", { className: "full bg-utility-success-500 size-1.5 animate-pulse rounded" }), "Paying Out"] })) : (_jsxs("div", { className: "border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [_jsx(ArrowNarrowUpRightIcon, { className: "text-utility-blue-500 size-3.5" }), "Accumulating"] })), _jsx("div", { className: "text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: "bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl", children: formatNumber(jackpotAmount, {
|
|
20
|
-
currency: localeInfo.currency.code,
|
|
21
|
-
minDecimalPlaces: 2,
|
|
22
|
-
maxDecimalPlaces: 2,
|
|
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, {
|
|
24
|
-
currency: localeInfo.currency.code,
|
|
25
|
-
minDecimalPlaces: 2,
|
|
26
|
-
maxDecimalPlaces: 2,
|
|
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: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-1 flex justify-between", children: [_jsx("div", { className: "text-text-primary-900 text-xs font-semibold", children: formatNumber(0, {
|
|
28
|
-
currency: localeInfo.currency.code,
|
|
29
|
-
compact: true,
|
|
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, {
|
|
31
|
-
currency: localeInfo.currency.code,
|
|
32
|
-
compact: true,
|
|
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
|
|
34
|
-
? `The pot has hit ${formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
35
|
-
currency: localeInfo.currency.code,
|
|
36
|
-
compact: true,
|
|
37
|
-
})} Play now for your chance to win big! 🔥`
|
|
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, {
|
|
39
|
-
currency: localeInfo.currency.code,
|
|
40
|
-
minDecimalPlaces: 2,
|
|
41
|
-
maxDecimalPlaces: 2,
|
|
42
|
-
}) })] }, i))) })) : (_jsx(_Fragment, { children: Array.from({ length: 10 }).map((_, 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: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" })] }, i))) })) })] }) }) })] }), isPayingOut && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl') }))] }), Boolean(filteredGameProviders.length) && (_jsx(JackpotGameProviders, { gameProviders: filteredGameProviders }))] }));
|
|
43
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { Jackpot } from '@opexa/portal-sdk-core';
|
|
2
|
-
import type { GameProviderData } from '../../types';
|
|
3
|
-
export interface JackpotItemMobileProps {
|
|
4
|
-
jackpot: Jackpot;
|
|
5
|
-
/** @default "/jackpots" */
|
|
6
|
-
viewAllUrl?: string;
|
|
7
|
-
gameProviders: GameProviderData[];
|
|
8
|
-
}
|
|
9
|
-
export declare function JackpotItemMobile({ jackpot, gameProviders, }: JackpotItemMobileProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { Progress } from '@ark-ui/react';
|
|
4
|
-
import Image from 'next/image';
|
|
5
|
-
import { useState } from 'react';
|
|
6
|
-
import { twMerge } from 'tailwind-merge';
|
|
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';
|
|
11
|
-
import { Button } from '../../ui/index.js';
|
|
12
|
-
import { formatNumber, getPercentage, mask } from '../../utils/index.js';
|
|
13
|
-
import styles from '../JackpotCounter/JackpotCounterItem.module.css';
|
|
14
|
-
import { JackpotGameProviders } from './JackpotGameProviders.js';
|
|
15
|
-
import { JackpotRules } from './JackpotRules.js';
|
|
16
|
-
import { useJackpotItemData } from './useJackpotItemData.js';
|
|
17
|
-
export function JackpotItemMobile({ jackpot, gameProviders, }) {
|
|
18
|
-
const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, starTierStyles, } = useJackpotItemData({ jackpot, gameProviders });
|
|
19
|
-
const [isDetailsVisible, setIsDetailsVisible] = useState(false);
|
|
20
|
-
return (_jsxs("div", { className: "bg-bg-primary border-border-primary rounded-2xl border", children: [_jsxs("div", { className: twMerge('bg-bg-tertiary relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5'), children: [_jsxs("div", { className: "z-1 relative flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [isPayingOut ? (_jsxs("div", { className: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [_jsx("span", { className: "full bg-utility-success-500 size-1.5 animate-pulse rounded" }), "Paying Out"] })) : (_jsxs("div", { className: "border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [_jsx(ArrowNarrowUpRightIcon, { className: "text-utility-blue-500 size-3.5" }), "Accumulating"] })), _jsx("div", { className: "text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: "bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl", children: formatNumber(jackpotAmount, {
|
|
21
|
-
currency: localeInfo.currency.code,
|
|
22
|
-
minDecimalPlaces: 2,
|
|
23
|
-
maxDecimalPlaces: 2,
|
|
24
|
-
}) })] }), _jsx("div", { className: "z-1 bottom-[-60] right-0 block lg:absolute", children: _jsx(Image, { width: 100, height: 100, src: isPayingOut ? openChest : closeChest, alt: "closeChest", quality: 100, className: "size-full h-auto w-[100px]" }) })] }) }) }) }), _jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-1 flex justify-between", children: [_jsx("div", { className: "text-text-primary-900 text-xs font-semibold", children: formatNumber(0, {
|
|
25
|
-
currency: localeInfo.currency.code,
|
|
26
|
-
compact: true,
|
|
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, {
|
|
28
|
-
currency: localeInfo.currency.code,
|
|
29
|
-
compact: true,
|
|
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
|
|
31
|
-
? `The pot has hit ${formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
32
|
-
currency: localeInfo.currency.code,
|
|
33
|
-
compact: true,
|
|
34
|
-
})} Play now for your chance to win big! 🔥`
|
|
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, {
|
|
36
|
-
currency: localeInfo.currency.code,
|
|
37
|
-
minDecimalPlaces: 2,
|
|
38
|
-
maxDecimalPlaces: 2,
|
|
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, {
|
|
40
|
-
currency: localeInfo.currency.code,
|
|
41
|
-
minDecimalPlaces: 2,
|
|
42
|
-
maxDecimalPlaces: 2,
|
|
43
|
-
}) })] }, i))) })) : (_jsx(_Fragment, { children: Array.from({ length: 10 }).map((_, 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: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" })] }, i))) })) })] }) }) })] }), Boolean(filteredGameProviders.length) && (_jsx(JackpotGameProviders, { gameProviders: filteredGameProviders })), _jsx("div", { className: "m-3", children: _jsx(Button, { variant: "outline", className: twMerge('px-3.5 py-2.5 text-sm', !isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["Hide", _jsx(ArrowNarrowUpIcon, { className: "size-5" })] }) }) })] }))] }));
|
|
44
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function JackpotMobile(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { Progress } from '@ark-ui/react';
|
|
4
|
-
import Image from 'next/image';
|
|
5
|
-
import { useState } from 'react';
|
|
6
|
-
import { twMerge } from 'tailwind-merge';
|
|
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';
|
|
11
|
-
import { Button } from '../../ui/index.js';
|
|
12
|
-
import { formatNumber, getPercentage, mask } from '../../utils/index.js';
|
|
13
|
-
import styles from '../JackpotCounter/JackpotCounterItem.module.css';
|
|
14
|
-
import { JackpotGameProviders } from './JackpotGameProviders.js';
|
|
15
|
-
import { JackpotRules } from './JackpotRules.js';
|
|
16
|
-
import { useJackpotContext } from './JackpotsContext.js';
|
|
17
|
-
import { useJackpotData } from './useJackpotData.js';
|
|
18
|
-
export function JackpotMobile() {
|
|
19
|
-
const jackpot = useJackpotContext();
|
|
20
|
-
const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, starTierStyles, } = useJackpotData();
|
|
21
|
-
const [isDetailsVisible, setIsDetailsVisible] = useState(false);
|
|
22
|
-
return (_jsxs("div", { className: "bg-bg-primary border-border-primary rounded-2xl border", children: [_jsxs("div", { className: twMerge('bg-bg-tertiary relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5'), children: [_jsxs("div", { className: "z-1 relative flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [isPayingOut ? (_jsxs("div", { className: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [_jsx("span", { className: "full bg-utility-success-500 size-1.5 animate-pulse rounded" }), "Paying Out"] })) : (_jsxs("div", { className: "border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [_jsx(ArrowNarrowUpRightIcon, { className: "text-utility-blue-500 size-3.5" }), "Accumulating"] })), _jsx("div", { className: "text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: "bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl", children: formatNumber(jackpotAmount, {
|
|
23
|
-
currency: localeInfo.currency.code,
|
|
24
|
-
minDecimalPlaces: 2,
|
|
25
|
-
maxDecimalPlaces: 2,
|
|
26
|
-
}) })] }), _jsx("div", { className: "z-1 bottom-[-60] right-0 block lg:absolute", children: _jsx(Image, { width: 100, height: 100, src: isPayingOut ? openChest : closeChest, alt: "closeChest", quality: 100, className: "size-full h-auto w-[100px]" }) })] }) }) }) }), _jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-1 flex justify-between", children: [_jsx("div", { className: "text-text-primary-900 text-xs font-semibold", children: formatNumber(0, {
|
|
27
|
-
currency: localeInfo.currency.code,
|
|
28
|
-
compact: true,
|
|
29
|
-
}) }), _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, {
|
|
30
|
-
currency: localeInfo.currency.code,
|
|
31
|
-
compact: true,
|
|
32
|
-
}) })] })] }), _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
|
|
33
|
-
? `The pot has hit ${formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
34
|
-
currency: localeInfo.currency.code,
|
|
35
|
-
compact: true,
|
|
36
|
-
})} Play now for your chance to win big! 🔥`
|
|
37
|
-
: 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, {
|
|
38
|
-
currency: localeInfo.currency.code,
|
|
39
|
-
minDecimalPlaces: 2,
|
|
40
|
-
maxDecimalPlaces: 2,
|
|
41
|
-
}) })] })] }) })) : (_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, {})] }), _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, {
|
|
42
|
-
currency: localeInfo.currency.code,
|
|
43
|
-
minDecimalPlaces: 2,
|
|
44
|
-
maxDecimalPlaces: 2,
|
|
45
|
-
}) })] }, i))) })) : (_jsx(_Fragment, { children: Array.from({ length: 10 }).map((_, 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: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" })] }, i))) })) })] }) }) })] }), Boolean(filteredGameProviders.length) && (_jsx(JackpotGameProviders, { gameProviders: filteredGameProviders })), _jsx("div", { className: "m-3", children: _jsx(Button, { variant: "outline", className: twMerge('px-3.5 py-2.5 text-sm', !isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["Hide", _jsx(ArrowNarrowUpIcon, { className: "size-5" })] }) }) })] }))] }));
|
|
46
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Portal } from '@ark-ui/react';
|
|
4
|
-
import { XIcon } from '../../icons/index.js';
|
|
5
|
-
import { Flag06Icon } from '../../icons/Flag06Icon.js';
|
|
6
|
-
import { Dialog } from '../../ui/index.js';
|
|
7
|
-
import { useJackpotContext } from './JackpotsContext.js';
|
|
8
|
-
export function JackpotRules(props) {
|
|
9
|
-
const jackpot = useJackpotContext();
|
|
10
|
-
return (_jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { asChild: true, children: props.children ?? (_jsx("button", { type: "button", className: "text-button-tertiary-fg flex text-sm font-semibold", children: "Jackpot Rules" })) }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-full w-full items-start lg:h-auto lg:w-[640px] lg:rounded-xl", children: [_jsxs("div", { className: "p-3xl", children: [_jsxs("div", { className: "mb-3 flex justify-between", children: [_jsx("div", { className: "bg-bg-tertiary border-border-primary flex h-12 w-12 items-center justify-center rounded-lg border", children: _jsx(Flag06Icon, { className: "text-text-tertiary-600 size-full p-3" }) }), _jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Jackpot Rules" }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-sm", children: "Terms and Conditions" })] }), _jsx("div", { className: "border-gray-800 border-t-1 pb-3", children: _jsx("div", { dangerouslySetInnerHTML: { __html: jackpot.description }, className: "px-3xl py-3" }) })] }) })] })] }));
|
|
11
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import Image from 'next/image';
|
|
4
|
-
import { useJackpotsQuery } from '../../client/hooks/index.js';
|
|
5
|
-
import closeChest from '../../images/close-chest.png';
|
|
6
|
-
import { JackpotDesktop } from './JackpotDesktop.js';
|
|
7
|
-
import { JackpotMobile } from './JackpotMobile.js';
|
|
8
|
-
import { JackpotContext, JackpotsPropsContext } from './JackpotsContext.js';
|
|
9
|
-
export function Jackpots__client(props) {
|
|
10
|
-
const jackpotsQuery = useJackpotsQuery({
|
|
11
|
-
first: 100,
|
|
12
|
-
filter: {
|
|
13
|
-
status: {
|
|
14
|
-
equal: 'ACTIVE',
|
|
15
|
-
},
|
|
16
|
-
deleted: {
|
|
17
|
-
equal: false,
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
sort: {
|
|
21
|
-
cursor: 'POOL',
|
|
22
|
-
order: 'DESC',
|
|
23
|
-
},
|
|
24
|
-
});
|
|
25
|
-
const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
|
|
26
|
-
if (jackpots.length <= 0)
|
|
27
|
-
return null;
|
|
28
|
-
return (_jsx(JackpotsPropsContext, { value: props, children: _jsxs("div", { className: props.className, children: [_jsx("div", { className: "mb-3 text-lg font-semibold lg:mb-4.5", children: props.heading ?? 'Jackpots' }), jackpots.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: jackpots.map((jackpot) => (_jsx(JackpotContext, { value: jackpot, children: _jsx(JackpotDesktop, {}) }, jackpot.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot) => (_jsx(JackpotContext, { value: jackpot, children: _jsx(JackpotMobile, {}) }, jackpot.id))) })] })) : (_jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", quality: 100, className: "h-29.5 w-29.5 lg:h-25 lg:w-25 size-full mix-blend-luminosity" }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'jackpots', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
|
|
29
|
-
}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { Jackpot } from '@opexa/portal-sdk-core';
|
|
2
|
-
import type { JackpotsProps } from './Jackpots';
|
|
3
|
-
export declare const JackpotsPropsContext: import("react").Context<JackpotsProps>, useJackpotsPropsContext: () => JackpotsProps;
|
|
4
|
-
export declare const JackpotContext: import("react").Context<Jackpot>, useJackpotContext: () => Jackpot;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export declare function useJackpotData(): {
|
|
2
|
-
jackpotPayouts: import("@opexa/portal-sdk-core").JackpotPayout[];
|
|
3
|
-
topJackpotPayout: import("@opexa/portal-sdk-core").JackpotPayout;
|
|
4
|
-
filteredGameProviders: import("../../types").GameProviderData[];
|
|
5
|
-
localeInfo: import("../../utils").LocaleInfo;
|
|
6
|
-
isPayingOut: boolean;
|
|
7
|
-
jackpotAmount: string;
|
|
8
|
-
arrowImages: import("react/jsx-runtime").JSX.Element[];
|
|
9
|
-
getAccumulatingJackpotDescription: (part: number, total: number) => string;
|
|
10
|
-
starTierStyles: {
|
|
11
|
-
starColor: string;
|
|
12
|
-
numberColor: string;
|
|
13
|
-
}[];
|
|
14
|
-
};
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
// useJackpotItemData.ts
|
|
3
|
-
import { useCallback, useMemo } from 'react';
|
|
4
|
-
import { twMerge } from 'tailwind-merge';
|
|
5
|
-
import { useLocaleInfo } from '../../client/hooks/index.js';
|
|
6
|
-
import { useJackpotPayoutsQuery } from '../../client/hooks/useJackpotPayoutsQuery.js';
|
|
7
|
-
import { GAME_PROVIDER_DATA } from '../../constants/index.js';
|
|
8
|
-
import { ChevronLeftIcon, ChevronRightIcon } from '../../icons/index.js';
|
|
9
|
-
import styles from '../JackpotCounter/JackpotCounterItem.module.css';
|
|
10
|
-
import { useJackpotContext, useJackpotsPropsContext } from './JackpotsContext.js';
|
|
11
|
-
export function useJackpotData() {
|
|
12
|
-
const jackpotsProps = useJackpotsPropsContext();
|
|
13
|
-
const jackpot = useJackpotContext();
|
|
14
|
-
const gameProviders = jackpotsProps.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
|
|
15
|
-
const jackpotPayoutsQuery = useJackpotPayoutsQuery({
|
|
16
|
-
first: 30,
|
|
17
|
-
filter: {
|
|
18
|
-
jackpot: {
|
|
19
|
-
equal: jackpot.id,
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
sort: {
|
|
23
|
-
cursor: 'AMOUNT',
|
|
24
|
-
order: 'DESC',
|
|
25
|
-
},
|
|
26
|
-
}, {
|
|
27
|
-
enabled: typeof window !== 'undefined',
|
|
28
|
-
});
|
|
29
|
-
const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
|
|
30
|
-
const topJackpotPayout = jackpotPayouts[0] ?? [];
|
|
31
|
-
const enabledJackpotGameProviders = useMemo(() => {
|
|
32
|
-
const gameProvider = Object.entries(jackpot?.jackpotTurnoverContributionPercentagePerGameProvider ?? {})
|
|
33
|
-
.filter(([, value]) => Number(value) > 0)
|
|
34
|
-
.map(([key]) => key);
|
|
35
|
-
return gameProvider;
|
|
36
|
-
}, [jackpot]);
|
|
37
|
-
const filteredGameProviders = gameProviders.filter((provider) => enabledJackpotGameProviders.includes(provider.id));
|
|
38
|
-
const localeInfo = useLocaleInfo();
|
|
39
|
-
const isPayingOut = jackpot.drawing;
|
|
40
|
-
const jackpotAmount = isPayingOut
|
|
41
|
-
? jackpot.maximumJackpotPoolLimit
|
|
42
|
-
: jackpot.pool;
|
|
43
|
-
const Arrow = useCallback(({ index }) => {
|
|
44
|
-
const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
|
|
45
|
-
return (_jsx(Icon, { className: twMerge('scale-400 lg:scale-250 text-brand-300 min-w-2.5 lg:min-w-4', isPayingOut
|
|
46
|
-
? styles['animate-wave-color-error']
|
|
47
|
-
: styles['animate-wave-color-success']), style: {
|
|
48
|
-
animationDelay: isPayingOut
|
|
49
|
-
? `${(40 - index - 1) * 0.1}s`
|
|
50
|
-
: `${index * 0.1}s`,
|
|
51
|
-
} }));
|
|
52
|
-
}, [isPayingOut]);
|
|
53
|
-
const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => (_jsx(Arrow, { isFirst: i === 0, index: i }, i))), [Arrow]);
|
|
54
|
-
const getAccumulatingJackpotDescription = (part, total) => {
|
|
55
|
-
const percentage = total === 0 ? 0 : (part / total) * 100;
|
|
56
|
-
return percentage <= 90
|
|
57
|
-
? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
|
|
58
|
-
: '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
|
|
59
|
-
};
|
|
60
|
-
const starTierStyles = [
|
|
61
|
-
{
|
|
62
|
-
starColor: 'text-yellow-400',
|
|
63
|
-
numberColor: 'text-bg-primary',
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
starColor: 'text-utility-gray-700',
|
|
67
|
-
numberColor: 'text-bg-primary',
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
starColor: 'text-yellow-700',
|
|
71
|
-
numberColor: 'text-bg-primary',
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
starColor: 'text-bg-quaternary',
|
|
75
|
-
numberColor: 'text-text-primary-900',
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
starColor: 'text-bg-quaternary',
|
|
79
|
-
numberColor: 'text-text-primary-900',
|
|
80
|
-
},
|
|
81
|
-
];
|
|
82
|
-
return {
|
|
83
|
-
jackpotPayouts,
|
|
84
|
-
topJackpotPayout,
|
|
85
|
-
filteredGameProviders,
|
|
86
|
-
localeInfo,
|
|
87
|
-
isPayingOut,
|
|
88
|
-
jackpotAmount,
|
|
89
|
-
arrowImages,
|
|
90
|
-
getAccumulatingJackpotDescription,
|
|
91
|
-
starTierStyles,
|
|
92
|
-
};
|
|
93
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import type { Jackpot } from '@opexa/portal-sdk-core';
|
|
2
|
-
import type { GameProviderData } from '../../types';
|
|
3
|
-
export interface JackpotItemProps {
|
|
4
|
-
jackpot: Jackpot;
|
|
5
|
-
gameProviders: GameProviderData[];
|
|
6
|
-
}
|
|
7
|
-
export declare function useJackpotItemData({ jackpot, gameProviders, }: JackpotItemProps): {
|
|
8
|
-
jackpotPayouts: import("@opexa/portal-sdk-core").JackpotPayout[];
|
|
9
|
-
topJackpotPayout: import("@opexa/portal-sdk-core").JackpotPayout;
|
|
10
|
-
filteredGameProviders: GameProviderData[];
|
|
11
|
-
localeInfo: import("../../utils").LocaleInfo;
|
|
12
|
-
isPayingOut: boolean;
|
|
13
|
-
jackpotAmount: string;
|
|
14
|
-
arrowImages: import("react/jsx-runtime").JSX.Element[];
|
|
15
|
-
getAccumulatingJackpotDescription: (part: number, total: number) => string;
|
|
16
|
-
starTierStyles: {
|
|
17
|
-
starColor: string;
|
|
18
|
-
numberColor: string;
|
|
19
|
-
}[];
|
|
20
|
-
};
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useMemo } from 'react';
|
|
3
|
-
import { twMerge } from 'tailwind-merge';
|
|
4
|
-
import { useLocaleInfo } from '../../client/hooks/index.js';
|
|
5
|
-
import { useJackpotPayoutsQuery } from '../../client/hooks/useJackpotPayoutsQuery.js';
|
|
6
|
-
import { ChevronLeftIcon, ChevronRightIcon } from '../../icons/index.js';
|
|
7
|
-
import styles from '../JackpotCounter/JackpotCounterItem.module.css';
|
|
8
|
-
export function useJackpotItemData({ jackpot, gameProviders, }) {
|
|
9
|
-
const jackpotPayoutsQuery = useJackpotPayoutsQuery({
|
|
10
|
-
first: 30,
|
|
11
|
-
filter: {
|
|
12
|
-
jackpot: {
|
|
13
|
-
equal: jackpot.id,
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
sort: {
|
|
17
|
-
cursor: 'AMOUNT',
|
|
18
|
-
order: 'DESC',
|
|
19
|
-
},
|
|
20
|
-
}, {
|
|
21
|
-
enabled: typeof window !== 'undefined',
|
|
22
|
-
});
|
|
23
|
-
const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
|
|
24
|
-
const topJackpotPayout = jackpotPayouts[0] ?? [];
|
|
25
|
-
const enabledJackpotGameProviders = useMemo(() => {
|
|
26
|
-
const gameProvider = Object.entries(jackpot?.jackpotTurnoverContributionPercentagePerGameProvider ?? {})
|
|
27
|
-
.filter(([, value]) => Number(value) > 0)
|
|
28
|
-
.map(([key]) => key);
|
|
29
|
-
return gameProvider;
|
|
30
|
-
}, [jackpot]);
|
|
31
|
-
const filteredGameProviders = gameProviders.filter((provider) => enabledJackpotGameProviders.includes(provider.id));
|
|
32
|
-
const localeInfo = useLocaleInfo();
|
|
33
|
-
const isPayingOut = jackpot.drawing;
|
|
34
|
-
const jackpotAmount = isPayingOut
|
|
35
|
-
? jackpot.maximumJackpotPoolLimit
|
|
36
|
-
: jackpot.pool;
|
|
37
|
-
const Arrow = useCallback(({ index }) => {
|
|
38
|
-
const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
|
|
39
|
-
return (_jsx(Icon, { className: twMerge('scale-400 lg:scale-250 text-brand-300 min-w-2.5 lg:min-w-4', isPayingOut
|
|
40
|
-
? styles['animate-wave-color-error']
|
|
41
|
-
: styles['animate-wave-color-success']), style: {
|
|
42
|
-
animationDelay: isPayingOut
|
|
43
|
-
? `${(40 - index - 1) * 0.1}s`
|
|
44
|
-
: `${index * 0.1}s`,
|
|
45
|
-
} }));
|
|
46
|
-
}, [isPayingOut]);
|
|
47
|
-
const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => (_jsx(Arrow, { isFirst: i === 0, index: i }, i))), [Arrow]);
|
|
48
|
-
const getAccumulatingJackpotDescription = (part, total) => {
|
|
49
|
-
const percentage = total === 0 ? 0 : (part / total) * 100;
|
|
50
|
-
return percentage <= 90
|
|
51
|
-
? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
|
|
52
|
-
: '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
|
|
53
|
-
};
|
|
54
|
-
const starTierStyles = [
|
|
55
|
-
{
|
|
56
|
-
starColor: 'text-yellow-400',
|
|
57
|
-
numberColor: 'text-bg-primary',
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
starColor: 'text-utility-gray-700',
|
|
61
|
-
numberColor: 'text-bg-primary',
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
starColor: 'text-yellow-700',
|
|
65
|
-
numberColor: 'text-bg-primary',
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
starColor: 'text-bg-quaternary',
|
|
69
|
-
numberColor: 'text-text-primary-900',
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
starColor: 'text-bg-quaternary',
|
|
73
|
-
numberColor: 'text-text-primary-900',
|
|
74
|
-
},
|
|
75
|
-
];
|
|
76
|
-
return {
|
|
77
|
-
jackpotPayouts,
|
|
78
|
-
topJackpotPayout,
|
|
79
|
-
filteredGameProviders,
|
|
80
|
-
localeInfo,
|
|
81
|
-
isPayingOut,
|
|
82
|
-
jackpotAmount,
|
|
83
|
-
arrowImages,
|
|
84
|
-
getAccumulatingJackpotDescription,
|
|
85
|
-
starTierStyles,
|
|
86
|
-
};
|
|
87
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function AutoOpen(): null;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
import { useShallow } from 'zustand/shallow';
|
|
3
|
-
import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
|
|
4
|
-
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
5
|
-
import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
|
|
6
|
-
import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
|
|
7
|
-
import { KYC_PROMPT_LOCALSTORAGE_KEY } from '../../constants/index.js';
|
|
8
|
-
export function AutoOpen() {
|
|
9
|
-
const kycStore = useGlobalStore(useShallow((ctx) => ctx.kyc));
|
|
10
|
-
const { data: session } = useSessionQuery();
|
|
11
|
-
const { data: account } = useAccountQuery();
|
|
12
|
-
const { data: verification } = useMemberVerificationQuery();
|
|
13
|
-
const isBasicInfoCompleted = account?.realName !== null && account?.birthDay !== null;
|
|
14
|
-
const isUploadCompleted = verification &&
|
|
15
|
-
verification.idFrontImage !== null &&
|
|
16
|
-
verification.selfieImage !== null;
|
|
17
|
-
const isRejected = Boolean(verification?.status === 'REJECTED');
|
|
18
|
-
const step = !isBasicInfoCompleted
|
|
19
|
-
? 1
|
|
20
|
-
: isRejected
|
|
21
|
-
? 2
|
|
22
|
-
: isUploadCompleted
|
|
23
|
-
? 3
|
|
24
|
-
: 2;
|
|
25
|
-
const shouldOpen = !account?.realName ||
|
|
26
|
-
!account?.birthDay ||
|
|
27
|
-
!verification ||
|
|
28
|
-
verification.status === 'REJECTED' ||
|
|
29
|
-
verification.status === 'UNVERIFIED';
|
|
30
|
-
useEffect(() => {
|
|
31
|
-
if (session?.status == 'authenticated' &&
|
|
32
|
-
!kycStore['~touched'] &&
|
|
33
|
-
shouldOpen &&
|
|
34
|
-
localStorage.getItem(KYC_PROMPT_LOCALSTORAGE_KEY) == null) {
|
|
35
|
-
kycStore.setOpen(true);
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
}, [kycStore, session?.status, shouldOpen]);
|
|
39
|
-
useEffect(() => {
|
|
40
|
-
if (step) {
|
|
41
|
-
kycStore.setStep(step);
|
|
42
|
-
}
|
|
43
|
-
}, [kycStore, step]);
|
|
44
|
-
return null;
|
|
45
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function Header(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
|
|
3
|
-
import { XIcon } from '../../icons/XIcon.js';
|
|
4
|
-
import { Dialog } from '../../ui/Dialog/index.js';
|
|
5
|
-
import { IconButton } from '../../ui/IconButton/index.js';
|
|
6
|
-
export function Header() {
|
|
7
|
-
return (_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "bg-bg-primary-alt relative flex items-center gap-xl px-xl py-md lg:justify-center lg:bg-transparent lg:p-0", children: [_jsx(IconButton, { size: "2xs", variant: "outline", colorScheme: "gray", className: "lg:hidden", onClick: () => api.setOpen(false), children: _jsx(ChevronLeftIcon, {}) }), _jsx(Dialog.Title, { className: "text-lg font-semibold", children: "Personal Verification" }), _jsx("button", { type: "button", className: "text-text-quinary absolute right-0 top-1/2 hidden -translate-y-1/2 lg:block", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "size-6" }) })] })) }));
|
|
8
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function Step1(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import Image from 'next/image';
|
|
3
|
-
import { CheckIcon } from '../../icons/CheckIcon.js';
|
|
4
|
-
import { XIcon } from '../../icons/XIcon.js';
|
|
5
|
-
import uploadId from '../../images/capture-id-banner.png';
|
|
6
|
-
import { Button } from '../../ui/Button/index.js';
|
|
7
|
-
import { useKYCContext } from './KYCContext.js';
|
|
8
|
-
export function Step1() {
|
|
9
|
-
const context = useKYCContext();
|
|
10
|
-
return (_jsxs("div", { className: "mt-2xl px-xl lg:mt-3xl lg:px-0", children: [_jsx("p", { className: "lg:text-text-secondary-700 text-center text-2xl font-semibold lg:text-base", children: "Prepare to upload your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt mt-6 rounded-xl border p-4 lg:mt-2xl lg:border-0 lg:bg-transparent lg:p-0", children: [_jsx(Image, { src: uploadId, alt: "", className: "h-auto w-full", width: 600, height: 352 }), _jsxs("ul", { className: "mt-2xl space-y-3", children: [_jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Upload front side of your ID"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Take a photo in a well lit room"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(XIcon, { className: "text-text-featured-icon-light-error size-6" }), "Don't edit image of your ID"] })] }), _jsxs("div", { className: "mt-4xl space-y-lg", children: [_jsx(Button, { onClick: () => {
|
|
11
|
-
context.setStep(2);
|
|
12
|
-
}, children: "Continue" }), _jsx(Button, { variant: "outline", children: "Continue on phone" })] })] })] }));
|
|
13
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function Step2(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import Image from 'next/image';
|
|
3
|
-
import { CheckIcon } from '../../icons/CheckIcon.js';
|
|
4
|
-
import { XIcon } from '../../icons/XIcon.js';
|
|
5
|
-
import selfie from '../../images/capture-selfie-banner.png';
|
|
6
|
-
import { Button } from '../../ui/Button/index.js';
|
|
7
|
-
import { useKYCContext } from './KYCContext.js';
|
|
8
|
-
export function Step2() {
|
|
9
|
-
const context = useKYCContext();
|
|
10
|
-
return (_jsxs("div", { className: "mt-2xl px-xl lg:mt-3xl lg:px-0", children: [_jsx("p", { className: "lg:text-text-secondary-700 text-center text-2xl font-semibold lg:text-base", children: "Take a selfie holding your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt mt-6 rounded-xl border p-4 lg:mt-2xl lg:border-0 lg:bg-transparent lg:p-0", children: [_jsx(Image, { src: selfie, alt: "", className: "h-auto w-full", width: 600, height: 352 }), _jsxs("ul", { className: "mt-2xl space-y-3", children: [_jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Face and ID must be clearly visible"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Take a photo in a well lit room"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(XIcon, { className: "text-text-featured-icon-light-error size-6" }), "No hats, sunglasses, or masks"] })] }), _jsxs("div", { className: "mt-4xl space-y-lg", children: [_jsx(Button, { size: "sm", onClick: () => {
|
|
11
|
-
context.setStep(3);
|
|
12
|
-
}, children: "Continue" }), _jsx(Button, { variant: "outline", children: "Continue on phone" })] })] })] }));
|
|
13
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function Step3(): import("react/jsx-runtime").JSX.Element;
|