@opexa/portal-components 0.0.192 → 0.0.194
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/components/Bonus/Bonus.client.js +1 -1
- package/dist/components/Cashback/Cashback.client.js +1 -1
- package/dist/components/CustomPromo/CustomPromo.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts +2 -2
- package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts +1 -1
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts +2 -2
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts +1 -1
- package/dist/components/Disclaimer/DisclaimerV2.js +7 -5
- package/dist/components/GameLaunch/GameLaunch.lazy.js +1 -1
- package/dist/components/GamesSearch/GamesSearch.js +1 -1
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.js +17 -9
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +184 -184
- package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +184 -184
- package/dist/components/Jackpots/JackpotsList/JackpotsListItemDesktop.js +15 -3
- package/dist/components/Jackpots/JackpotsList/JackpotsListItemMobile.js +17 -5
- package/dist/components/Jackpots/JackpotsList/useJackpotsListItemData.js +0 -4
- package/dist/components/KYC/backup/KYCContext.d.ts +5 -1
- package/dist/components/KYC/loadModels.d.ts +1 -0
- package/dist/components/KYC/loadModels.js +9 -0
- package/dist/components/KYC/utils.js +18 -18
- package/dist/components/Messages/MessageContext.d.ts +5 -1
- package/dist/components/News/News.js +1 -1
- package/dist/components/Promo/Promo.client.js +1 -1
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts +1 -1
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js +10 -5
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js +4 -3
- package/dist/components/Quests/OnboardingQuest/OnboardingQuest.d.ts +1 -1
- package/dist/components/Quests/WageringQuest/WageringQuest.d.ts +1 -1
- package/dist/components/Quests/WageringQuest/WageringQuest.js +3 -2
- package/dist/components/Quests/WageringQuest/WageringQuestModal.js +4 -3
- package/dist/components/Search/Search.lazy.js +1 -1
- package/dist/components/SignUp/SignUpDefault/SignUpForm.js +2 -1
- package/dist/components/SignUp/SignUpForm.js +2 -1
- package/dist/components/SignUp/SignUpKYC/ImageUploader.js +2 -1
- package/dist/components/SignUp/SignUpKYC/SignUpFormKYC.js +3 -2
- package/dist/components/SignUp/SignUpPagcor/CaptureIdDocument.d.ts +1 -0
- package/dist/components/SignUp/SignUpPagcor/CaptureIdDocument.js +198 -0
- package/dist/components/SignUp/SignUpPagcor/CaptureSelfie.d.ts +1 -0
- package/dist/components/SignUp/SignUpPagcor/CaptureSelfie.js +251 -0
- package/dist/components/SignUp/SignUpPagcor/ImageUploader.d.ts +10 -0
- package/dist/components/SignUp/SignUpPagcor/ImageUploader.js +41 -0
- package/dist/components/SignUp/SignUpPagcor/SignUpFormPagcor.d.ts +1 -0
- package/dist/components/SignUp/SignUpPagcor/SignUpFormPagcor.js +429 -0
- package/dist/components/SignUp/SignUpPagcor/SignUpPagcor.lazy.d.ts +13 -0
- package/dist/components/SignUp/SignUpPagcor/SignUpPagcor.lazy.js +26 -0
- package/dist/components/SignUp/SignUpPagcor/SignUpPagcorContext.d.ts +7 -0
- package/dist/components/SignUp/SignUpPagcor/SignUpPagcorContext.js +2 -0
- package/dist/components/SignUp/SignUpPagcor/useImageUploader.d.ts +11 -0
- package/dist/components/SignUp/SignUpPagcor/useImageUploader.js +20 -0
- package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.module.css +184 -184
- package/dist/components/Tournaments/TournamentsList/TournamentItem.module.css +184 -184
- package/dist/constants/BranchCode.d.ts +4 -0
- package/dist/constants/BranchCode.js +42 -0
- package/dist/constants/GameProvider.d.ts +1 -1
- package/dist/constants/GameProvider.js +8 -0
- package/dist/images/game-providers/BNG.png +0 -0
- package/dist/services/queries.js +2436 -2436
- package/dist/styles/theme.css +693 -693
- package/dist/types/index.d.ts +6 -1
- package/dist/ui/Badge/badge.anatomy.d.ts +1 -1
- package/dist/ui/Badge/badge.recipe.d.ts +3 -3
- package/dist/ui/Carousel/Carousel.d.ts +45 -45
- package/dist/ui/Carousel/carousel.recipe.d.ts +8 -8
- package/dist/ui/Checkbox/Checkbox.d.ts +23 -23
- package/dist/ui/Checkbox/checkbox.recipe.d.ts +3 -3
- package/dist/ui/Clipboard/clipboard.recipe.d.ts +3 -3
- package/dist/ui/Collapsible/collapsible.recipe.d.ts +8 -8
- 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/Menu/Menu.d.ts +90 -90
- package/dist/ui/Menu/menu.recipe.d.ts +8 -8
- package/dist/ui/PasswordInput/passwordInput.recipe.d.ts +3 -3
- package/dist/ui/Popover/popover.recipe.d.ts +5 -5
- package/dist/ui/Progress/Progress.d.ts +27 -27
- package/dist/ui/Progress/progress.recipe.d.ts +3 -3
- package/dist/ui/QrCode/qrCode.recipe.d.ts +5 -5
- package/dist/ui/SegmentGroup/segmentGroup.recipe.d.ts +3 -3
- package/dist/ui/Select/Select.d.ts +45 -45
- package/dist/ui/Select/select.recipe.d.ts +3 -3
- package/dist/ui/Table/Table.d.ts +21 -21
- package/dist/ui/Table/table.anatomy.d.ts +1 -1
- package/dist/ui/Table/table.recipe.d.ts +3 -3
- package/dist/ui/Tabs/tabs.recipe.d.ts +3 -3
- package/dist/ui/Tooltip/tooltip.recipe.d.ts +5 -5
- package/dist/utils/resizeImageSize.d.ts +1 -0
- package/dist/utils/resizeImageSize.js +5 -0
- package/package.json +164 -164
- 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/Empty.d.ts +0 -10
- package/dist/components/Empty.js +0 -7
- 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/Header.d.ts +0 -1
- package/dist/components/KYC/Header.js +0 -6
- package/dist/components/KYC/Step1.d.ts +0 -1
- package/dist/components/KYC/Step1.js +0 -12
- package/dist/components/KYC/Step2.d.ts +0 -1
- package/dist/components/KYC/Step2.js +0 -12
- package/dist/components/KYC/Step3.d.ts +0 -1
- package/dist/components/KYC/Step3.js +0 -11
- package/dist/components/KYC/Step4.d.ts +0 -1
- package/dist/components/KYC/Step4.js +0 -6
- package/dist/components/Messages/MessageItem.d.ts +0 -4
- package/dist/components/Messages/MessageItem.js +0 -34
- 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/constants/envVars.d.ts +0 -5
- package/dist/constants/envVars.js +0 -28
- package/dist/constants/gameProviders.d.ts +0 -5
- package/dist/constants/gameProviders.js +0 -362
- package/dist/constants/gameTypes.d.ts +0 -4
- package/dist/constants/gameTypes.js +0 -64
- package/dist/constants/headerKeys.d.ts +0 -1
- package/dist/constants/headerKeys.js +0 -1
- 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/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/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
|
@@ -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 Header(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronLeftIcon, XIcon } from '../../icons/index.js';
|
|
3
|
-
import { Dialog, IconButton } from '../../ui/index.js';
|
|
4
|
-
export function Header() {
|
|
5
|
-
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" }) })] })) }));
|
|
6
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function Step1(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import Image from 'next/image';
|
|
3
|
-
import { CheckIcon, XIcon } from '../../icons/index.js';
|
|
4
|
-
import uploadId from '../../images/capture-id-banner.png';
|
|
5
|
-
import { Button } from '../../ui/index.js';
|
|
6
|
-
import { useKYCContext } from './KYCContext.js';
|
|
7
|
-
export function Step1() {
|
|
8
|
-
const context = useKYCContext();
|
|
9
|
-
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: () => {
|
|
10
|
-
context.setStep(2);
|
|
11
|
-
}, children: "Continue" }), _jsx(Button, { variant: "outline", children: "Continue on phone" })] })] })] }));
|
|
12
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function Step2(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import Image from 'next/image';
|
|
3
|
-
import { CheckIcon, XIcon } from '../../icons/index.js';
|
|
4
|
-
import selfie from '../../images/capture-selfie-banner.png';
|
|
5
|
-
import { Button } from '../../ui/index.js';
|
|
6
|
-
import { useKYCContext } from './KYCContext.js';
|
|
7
|
-
export function Step2() {
|
|
8
|
-
const context = useKYCContext();
|
|
9
|
-
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: () => {
|
|
10
|
-
context.setStep(3);
|
|
11
|
-
}, children: "Continue" }), _jsx(Button, { variant: "outline", children: "Continue on phone" })] })] })] }));
|
|
12
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function Step3(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { CheckIcon } from '../../icons/index.js';
|
|
3
|
-
import { Button, Checkbox, Field } from '../../ui/index.js';
|
|
4
|
-
import { useKYCContext } from './KYCContext.js';
|
|
5
|
-
export function Step3() {
|
|
6
|
-
const context = useKYCContext();
|
|
7
|
-
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: "Enter your basic and work-related information" }), _jsxs("form", { 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", onSubmit: (e) => {
|
|
8
|
-
e.preventDefault();
|
|
9
|
-
context.setStep(4);
|
|
10
|
-
}, children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Permanent address" }), _jsx(Field.Input, { placeholder: "Enter your permanent address" })] }), _jsxs(Checkbox.Root, { className: "mt-2xl", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { children: "Same as permanent address" }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Field.Root, { className: "mt-sm", children: [_jsx(Field.Label, { children: "Current address" }), _jsx(Field.Input, { placeholder: "Enter your current address" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Source of income" }), _jsx(Field.Input, { placeholder: "Enter your source of income" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Work Description" }), _jsx(Field.Input, { placeholder: "Enter your work description" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Place of birth" }), _jsx(Field.Input, { placeholder: "Enter your place of birth" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Nationality" }), _jsx(Field.Input, { placeholder: "Enter your nationality" })] }), _jsx(Button, { type: "submit", className: "mt-4xl", children: "Submit" })] })] }));
|
|
11
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function Step4(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { CheckCircleIcon } from '../../icons/index.js';
|
|
3
|
-
import { Button, Dialog } from '../../ui/index.js';
|
|
4
|
-
export function Step4() {
|
|
5
|
-
return (_jsxs("div", { children: [_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(CheckCircleIcon, {}) }), _jsx("h2", { className: "mt-3 text-center", children: "Submission Successful" }), _jsx("p", { className: "text-text-tertiary-600 text-center", children: "Your documents have been submitted successfully. They\u2019re now under review, and you\u2019ll receive a notification as soon as your account is verified." }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { className: "mt-3xl", onClick: () => api.setOpen(false), children: "Ok" })) })] }));
|
|
6
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { tz } from '@date-fns/tz';
|
|
3
|
-
import { format } from 'date-fns';
|
|
4
|
-
import Link from 'next/link';
|
|
5
|
-
import { useShallow } from 'zustand/shallow';
|
|
6
|
-
import { useGlobalStore, useLocaleInfo, useMarkMessageAsReadMutation, } from '../../client/hooks/index.js';
|
|
7
|
-
import { getMessageIcon } from '../../components/Messages/utils.js';
|
|
8
|
-
export function MessageItem({ message }) {
|
|
9
|
-
const {
|
|
10
|
-
/**/
|
|
11
|
-
id, icon, title, content, actions, markedAsRead, dateTimeCreated, } = message;
|
|
12
|
-
const localeInfo = useLocaleInfo();
|
|
13
|
-
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
14
|
-
message: ctx.message,
|
|
15
|
-
messages: ctx.messages,
|
|
16
|
-
})));
|
|
17
|
-
const markMessageAsReadMutation = useMarkMessageAsReadMutation();
|
|
18
|
-
const Icon = getMessageIcon(icon);
|
|
19
|
-
const handleViewMessage = async () => {
|
|
20
|
-
globalStore.message.setData(message);
|
|
21
|
-
globalStore.message.setOpen(true);
|
|
22
|
-
globalStore.messages.setOpen(false);
|
|
23
|
-
if (!markedAsRead)
|
|
24
|
-
markMessageAsReadMutation.mutate(id);
|
|
25
|
-
};
|
|
26
|
-
const handleActionClick = (e) => {
|
|
27
|
-
e.stopPropagation();
|
|
28
|
-
globalStore.messages.setOpen(false);
|
|
29
|
-
globalStore.messages.setTab('ALL');
|
|
30
|
-
};
|
|
31
|
-
return (_jsxs("div", { role: "button", tabIndex: 0, className: "border-border-secondary rounded-xs bg-bg-secondary flex h-auto flex-shrink-0 cursor-pointer flex-col border px-3.5 py-2.5", onClick: handleViewMessage, "aria-pressed": "false", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-text-tertiary-600 text-xs font-normal", children: format(new Date(dateTimeCreated), 'M/d/yyyy - h:mma', {
|
|
32
|
-
in: tz(localeInfo.timezone),
|
|
33
|
-
}) }), !markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [_jsx(Icon, { className: "text-brand-400" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: content } }), actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: action.url, onClick: handleActionClick, children: action.name }, index))) }))] }));
|
|
34
|
-
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import useEmblaCarousel from 'embla-carousel-react';
|
|
4
|
-
import Link from 'next/link';
|
|
5
|
-
import { useCallback, useEffect, useState } from 'react';
|
|
6
|
-
import { useTournamentsQuery } from '../../client/hooks/index.js';
|
|
7
|
-
import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon } from '../../icons/index.js';
|
|
8
|
-
import { Button } from '../../ui/index.js';
|
|
9
|
-
import { TournamentCounterItem } from './TournamentCounterItem.js';
|
|
10
|
-
export function TournamentCounter__client(props) {
|
|
11
|
-
const [emblaRef, emblaApi] = useEmblaCarousel({
|
|
12
|
-
align: 'start',
|
|
13
|
-
slidesToScroll: 1,
|
|
14
|
-
});
|
|
15
|
-
const scrollPrev = useCallback(() => {
|
|
16
|
-
if (emblaApi)
|
|
17
|
-
emblaApi.scrollPrev();
|
|
18
|
-
}, [emblaApi]);
|
|
19
|
-
const scrollNext = useCallback(() => {
|
|
20
|
-
if (emblaApi)
|
|
21
|
-
emblaApi.scrollNext();
|
|
22
|
-
}, [emblaApi]);
|
|
23
|
-
const [canScrollPrev, setCanScrollPrev] = useState(false);
|
|
24
|
-
const [canScrollNext, setCanScrollNext] = useState(false);
|
|
25
|
-
const onSelect = useCallback(() => {
|
|
26
|
-
if (!emblaApi)
|
|
27
|
-
return;
|
|
28
|
-
setCanScrollPrev(emblaApi.canScrollPrev());
|
|
29
|
-
setCanScrollNext(emblaApi.canScrollNext());
|
|
30
|
-
}, [emblaApi]);
|
|
31
|
-
useEffect(() => {
|
|
32
|
-
if (!emblaApi)
|
|
33
|
-
return;
|
|
34
|
-
onSelect();
|
|
35
|
-
emblaApi.on('select', onSelect);
|
|
36
|
-
emblaApi.on('reInit', onSelect);
|
|
37
|
-
}, [emblaApi, onSelect]);
|
|
38
|
-
const tournamentsQuery = useTournamentsQuery({
|
|
39
|
-
first: 100,
|
|
40
|
-
filter: {
|
|
41
|
-
status: {
|
|
42
|
-
equal: 'ACTIVE',
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
});
|
|
46
|
-
const tournaments = tournamentsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
|
|
47
|
-
if (tournaments.length <= 0)
|
|
48
|
-
return null;
|
|
49
|
-
return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-lg font-semibold", children: props.heading ?? 'Tournaments' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/tournaments', className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] })] }), _jsx("div", { className: "relative mt-lg lg:overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: tournaments.map((tournament, i) => (_jsx(TournamentCounterItem, { tournament: tournament, viewAllUrl: props.viewAllUrl, className: "w-full" }, i))) }) })] }));
|
|
50
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export interface TournamentCounterProps {
|
|
2
|
-
/** @default "Tournaments" */
|
|
3
|
-
heading?: string;
|
|
4
|
-
/** @default "/tournaments" */
|
|
5
|
-
viewAllUrl?: string;
|
|
6
|
-
className?: string;
|
|
7
|
-
}
|
|
8
|
-
export declare function TournamentCounter(props: TournamentCounterProps): Promise<import("react/jsx-runtime").JSX.Element>;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { prefetchJackpotsQuery } from '../../server/utils/index.js';
|
|
3
|
-
import { TournamentCounter__client } from './TournamentCounter.client.js';
|
|
4
|
-
export async function TournamentCounter(props) {
|
|
5
|
-
await prefetchJackpotsQuery({
|
|
6
|
-
first: 100,
|
|
7
|
-
filter: {
|
|
8
|
-
status: {
|
|
9
|
-
equal: 'ACTIVE',
|
|
10
|
-
},
|
|
11
|
-
deleted: {
|
|
12
|
-
equal: false,
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
sort: {
|
|
16
|
-
cursor: 'POOL',
|
|
17
|
-
order: 'DESC',
|
|
18
|
-
},
|
|
19
|
-
});
|
|
20
|
-
return _jsx(TournamentCounter__client, { ...props });
|
|
21
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { Tournament } from '@opexa/portal-sdk-core';
|
|
2
|
-
export interface TournamentCounterItemProps {
|
|
3
|
-
tournament: Tournament;
|
|
4
|
-
className?: string;
|
|
5
|
-
/** @default "/tournaments" */
|
|
6
|
-
viewAllUrl?: string;
|
|
7
|
-
}
|
|
8
|
-
export declare function TournamentCounterItem({ tournament, className, viewAllUrl, }: TournamentCounterItemProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { pick } from 'lodash-es';
|
|
4
|
-
import Image from 'next/image';
|
|
5
|
-
import Link from 'next/link';
|
|
6
|
-
import React, { useEffect, useMemo, useState } from 'react';
|
|
7
|
-
import { twMerge } from 'tailwind-merge';
|
|
8
|
-
import { useLocaleInfo } from '../../client/hooks/index.js';
|
|
9
|
-
import { ChevronRightIcon, Trophy01Icon, User01Icon } from '../../icons/index.js';
|
|
10
|
-
import { Award01Icon } from '../../icons/Award01Icon.js';
|
|
11
|
-
import { StarIcon } from '../../icons/StarIcon.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';
|
|
16
|
-
import styles from '../JackpotCounter/JackpotCounterItem.module.css';
|
|
17
|
-
export function TournamentCounterItem({ tournament, className, viewAllUrl, }) {
|
|
18
|
-
const localeInfo = useLocaleInfo();
|
|
19
|
-
const [timeRemaining, setTimeRemaining] = useState({
|
|
20
|
-
days: 0,
|
|
21
|
-
hours: 0,
|
|
22
|
-
minutes: 0,
|
|
23
|
-
seconds: 0,
|
|
24
|
-
isPast: false,
|
|
25
|
-
});
|
|
26
|
-
const activationEndDateTime = useMemo(() => new Date(tournament.activationEndDateTime), [tournament.activationEndDateTime]);
|
|
27
|
-
const calculateRemainingTime = React.useCallback(() => {
|
|
28
|
-
const now = new Date();
|
|
29
|
-
const diffMs = activationEndDateTime.getTime() - now.getTime();
|
|
30
|
-
if (diffMs <= 0) {
|
|
31
|
-
setTimeRemaining({
|
|
32
|
-
days: 0,
|
|
33
|
-
hours: 0,
|
|
34
|
-
minutes: 0,
|
|
35
|
-
seconds: 0,
|
|
36
|
-
isPast: true,
|
|
37
|
-
});
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
const diffSeconds = Math.floor(diffMs / 1000);
|
|
41
|
-
const days = Math.floor(diffSeconds / (3600 * 24));
|
|
42
|
-
const hours = Math.floor((diffSeconds % (3600 * 24)) / 3600);
|
|
43
|
-
const minutes = Math.floor((diffSeconds % 3600) / 60);
|
|
44
|
-
const seconds = diffSeconds % 60;
|
|
45
|
-
const updated = pick({ days, hours, minutes, seconds, isPast: false }, [
|
|
46
|
-
'days',
|
|
47
|
-
'hours',
|
|
48
|
-
'minutes',
|
|
49
|
-
'seconds',
|
|
50
|
-
'isPast',
|
|
51
|
-
]);
|
|
52
|
-
setTimeRemaining(updated);
|
|
53
|
-
}, [activationEndDateTime]);
|
|
54
|
-
useEffect(() => {
|
|
55
|
-
calculateRemainingTime();
|
|
56
|
-
const interval = setInterval(calculateRemainingTime, 1000); // Update every second
|
|
57
|
-
return () => clearInterval(interval);
|
|
58
|
-
}, [activationEndDateTime, calculateRemainingTime]);
|
|
59
|
-
const timeParts = [
|
|
60
|
-
{ label: 'Day', value: timeRemaining.days },
|
|
61
|
-
{ label: 'Hour', value: timeRemaining.hours },
|
|
62
|
-
{ label: 'Min', value: timeRemaining.minutes },
|
|
63
|
-
{ label: 'Sec', value: timeRemaining.seconds },
|
|
64
|
-
];
|
|
65
|
-
const tournamentReward = Object.values(tournament.rewardSettings)
|
|
66
|
-
.map(Number)
|
|
67
|
-
.reduce((sum, val) => sum + val, 0);
|
|
68
|
-
const prizeAmountsByRank = Object.values(tournament.rewardSettings).map(Number);
|
|
69
|
-
return (_jsxs("div", { className: twMerge('bg-bg-tertiary border-border-primary relative flex shrink-0 rounded-2xl border p-3 text-center lg:gap-6 lg:p-5', className), children: [_jsx("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", { className: "w-full", children: [_jsxs("div", { className: "flex w-full justify-between", 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-full border px-2 py-0.5 text-xs font-medium", children: [_jsx(Award01Icon, { className: "text-utility-brand-500 size-3.5" }), "Multiplier"] }), _jsx("div", { className: "flex h-fit", children: timeParts.map((part, idx) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: twMerge('bg-bg-primary text-text-primary-900 flex h-fit w-8 flex-col items-center rounded-[4px] pb-1.5'), children: [_jsx("span", { className: "text-base font-medium", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-[8px]", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex flex-col justify-center gap-[6px] px-[6px]", children: [_jsx("div", { className: "bg-bg-primary h-1 w-1 rounded-full" }), _jsx("div", { className: "bg-bg-primary h-1 w-1 rounded-full" })] }))] }, part.label))) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-text-primary-900 mt-2.5 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: tournament.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(tournamentReward, {
|
|
70
|
-
currency: localeInfo.currency.code,
|
|
71
|
-
minDecimalPlaces: 2,
|
|
72
|
-
maxDecimalPlaces: 2,
|
|
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, {
|
|
74
|
-
currency: localeInfo.currency.code,
|
|
75
|
-
minDecimalPlaces: 2,
|
|
76
|
-
maxDecimalPlaces: 2,
|
|
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
|
|
78
|
-
? 'Leaderboard'
|
|
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], {
|
|
80
|
-
currency: localeInfo.currency.code,
|
|
81
|
-
minDecimalPlaces: 2,
|
|
82
|
-
maxDecimalPlaces: 2,
|
|
83
|
-
}) })) : (_jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }))] }, 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))) })) })] }) }) })] })] }));
|
|
84
|
-
}
|
|
85
|
-
const starTierStyles = [
|
|
86
|
-
{
|
|
87
|
-
starColor: 'text-yellow-400',
|
|
88
|
-
numberColor: 'text-bg-primary',
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
starColor: 'text-utility-gray-700',
|
|
92
|
-
numberColor: 'text-bg-primary',
|
|
93
|
-
},
|
|
94
|
-
{
|
|
95
|
-
starColor: 'text-yellow-700',
|
|
96
|
-
numberColor: 'text-bg-primary',
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
starColor: 'text-bg-quaternary',
|
|
100
|
-
numberColor: 'text-text-primary-900',
|
|
101
|
-
},
|
|
102
|
-
{
|
|
103
|
-
starColor: 'text-bg-quaternary',
|
|
104
|
-
numberColor: 'text-text-primary-900',
|
|
105
|
-
},
|
|
106
|
-
];
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './TournamentCounter';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './TournamentCounter.js';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function TournamentDesktop(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import Image from 'next/image';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { twMerge } from 'tailwind-merge';
|
|
5
|
-
import { Trophy01Icon, User01Icon } from '../../icons/index.js';
|
|
6
|
-
import { Award01Icon } from '../../icons/Award01Icon.js';
|
|
7
|
-
import { StarIcon } from '../../icons/StarIcon.js';
|
|
8
|
-
import firstPlace from '../../images/first-place.png';
|
|
9
|
-
import trophyTwo from '../../images/trophy-two.png';
|
|
10
|
-
import trophy from '../../images/trophy.png';
|
|
11
|
-
import { formatNumber, mask } from '../../utils/index.js';
|
|
12
|
-
import styles from '../JackpotCounter/JackpotCounterItem.module.css';
|
|
13
|
-
import { TournamentGameProviders } from './TournamentGameProviders.js';
|
|
14
|
-
import { TournamentRules } from './TournamentRules.js';
|
|
15
|
-
import { useTournamentContext } from './TournamentsContext.js';
|
|
16
|
-
import { useTournamentData } from './useTournamentData.js';
|
|
17
|
-
export function TournamentDesktop() {
|
|
18
|
-
const tournament = useTournamentContext();
|
|
19
|
-
const { prizeAmountsByRank, timeParts, tournamentReward, filteredGameProviders, localeInfo, } = useTournamentData();
|
|
20
|
-
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-6 lg:p-5'), children: [_jsx("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", { className: "w-full", children: [_jsxs("div", { className: "flex w-full justify-between", 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-full border px-2 py-0.5 text-xs font-medium", children: [_jsx(Award01Icon, { className: "text-utility-brand-500 size-3.5" }), "Multiplier"] }), _jsx("div", { className: "flex h-fit", children: timeParts.map((part, idx) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: twMerge('bg-bg-primary text-text-primary-900 flex h-fit w-8 flex-col items-center rounded-[4px] pb-1.5'), children: [_jsx("span", { className: "text-base font-medium", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-[8px]", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex flex-col justify-center gap-[6px] px-[6px]", children: [_jsx("div", { className: "bg-bg-primary h-1 w-1 rounded-full" }), _jsx("div", { className: "bg-bg-primary h-1 w-1 rounded-full" })] }))] }, part.label))) })] }), _jsx("div", { className: "text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: tournament.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(tournamentReward, {
|
|
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("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
|
-
currency: localeInfo.currency.code,
|
|
26
|
-
minDecimalPlaces: 2,
|
|
27
|
-
maxDecimalPlaces: 2,
|
|
28
|
-
}) })] })] }) })) : (_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
|
-
? 'Leaderboard'
|
|
30
|
-
: 'Starting soon!' })] }), _jsx(TournamentRules, {})] }), _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
|
-
currency: localeInfo.currency.code,
|
|
32
|
-
minDecimalPlaces: 2,
|
|
33
|
-
maxDecimalPlaces: 2,
|
|
34
|
-
}) })) : (_jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }))] }, 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))) })) })] }) }) })] })] }), Boolean(filteredGameProviders.length) && (_jsx(TournamentGameProviders, { gameProviders: filteredGameProviders }))] }));
|
|
35
|
-
}
|
|
36
|
-
const starTierStyles = [
|
|
37
|
-
{
|
|
38
|
-
starColor: 'text-yellow-400',
|
|
39
|
-
numberColor: 'text-bg-primary',
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
starColor: 'text-utility-gray-700',
|
|
43
|
-
numberColor: 'text-bg-primary',
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
starColor: 'text-yellow-700',
|
|
47
|
-
numberColor: 'text-bg-primary',
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
starColor: 'text-bg-quaternary',
|
|
51
|
-
numberColor: 'text-text-primary-900',
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
starColor: 'text-bg-quaternary',
|
|
55
|
-
numberColor: 'text-text-primary-900',
|
|
56
|
-
},
|
|
57
|
-
];
|