@opexa/portal-components 0.0.326 β 0.0.328
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/Jackpots/JackpotsCarousel/JackpotsCarouselItem.d.ts +1 -1
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.js +81 -46
- package/dist/components/Jackpots/JackpotsList/JackpotsListItemMobile.js +37 -2
- package/dist/handlers/postAuthenticate.js +3 -1
- package/dist/handlers/postSession.js +3 -1
- package/dist/middleware.js +1 -1
- package/dist/services/httpRequest.js +4 -0
- package/package.json +1 -1
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Progress } from
|
|
4
|
-
import { format } from
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import
|
|
3
|
+
import { Progress } from '@ark-ui/react/progress';
|
|
4
|
+
import { format } from 'date-fns';
|
|
5
|
+
import isMobile from 'is-mobile';
|
|
6
|
+
import Image from 'next/image';
|
|
7
|
+
import Link from 'next/link';
|
|
8
|
+
import { useCallback, useEffect, useId, useMemo, useState, } from 'react';
|
|
9
|
+
import { twMerge } from 'tailwind-merge';
|
|
10
|
+
import { useJackpotPayoutsQuery } from '../../../client/hooks/useJackpotPayoutsQuery.js';
|
|
11
|
+
import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
|
|
12
|
+
import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
|
|
13
|
+
import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
|
|
14
|
+
import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
|
|
15
|
+
import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
|
|
16
|
+
import { User01Icon } from '../../../icons/User01Icon.js';
|
|
17
|
+
import closeChest from '../../../images/close-chest.png';
|
|
18
|
+
import firstPlace from '../../../images/first-place.png';
|
|
19
|
+
import leaderboard from '../../../images/leaderboard.png';
|
|
20
|
+
import openChest from '../../../images/open-chest.png';
|
|
21
|
+
import * as Tooltip from '../../../ui/Tooltip/Tooltip.js';
|
|
22
|
+
import { capitalize } from '../../../utils/capitalize.js';
|
|
23
|
+
import { formatNumber } from '../../../utils/formatNumber.js';
|
|
24
|
+
import { mask } from '../../../utils/mask.js';
|
|
25
|
+
import { parseDecimal } from '../../../utils/parseDecimal.js';
|
|
26
|
+
import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
|
|
27
|
+
import styles from './JackpotsCarouselItem.module.css';
|
|
27
28
|
export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = true, }) {
|
|
28
29
|
const jackpot = useJackpotsCarouselItemContext();
|
|
29
30
|
const jackpotPayoutsQuery = useJackpotPayoutsQuery({
|
|
@@ -34,7 +35,7 @@ export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = t
|
|
|
34
35
|
},
|
|
35
36
|
},
|
|
36
37
|
}, {
|
|
37
|
-
enabled: typeof window !==
|
|
38
|
+
enabled: typeof window !== 'undefined',
|
|
38
39
|
});
|
|
39
40
|
const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
|
|
40
41
|
const latestJackpotPayout = jackpotPayouts[0] ?? [];
|
|
@@ -43,16 +44,45 @@ export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = t
|
|
|
43
44
|
const jackpotAmount = jackpot.pool;
|
|
44
45
|
const Arrow = useCallback(({ index }) => {
|
|
45
46
|
const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
|
|
46
|
-
return (_jsx(Icon, { className: twMerge(
|
|
47
|
-
? styles[
|
|
48
|
-
: styles[
|
|
47
|
+
return (_jsx(Icon, { className: twMerge('min-w-2.5 scale-400 text-brand-300 lg:min-w-4 lg:scale-250', isPayingOut
|
|
48
|
+
? styles['animate-wave-color-error']
|
|
49
|
+
: styles['animate-wave-color-success']), style: {
|
|
49
50
|
animationDelay: isPayingOut
|
|
50
51
|
? `${(40 - index - 1) * 0.1}s`
|
|
51
52
|
: `${index * 0.1}s`,
|
|
52
53
|
} }));
|
|
53
54
|
}, [isPayingOut]);
|
|
54
55
|
const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => (_jsx(Arrow, { isFirst: i === 0, index: i }, i))), [Arrow]);
|
|
55
|
-
|
|
56
|
+
const [mainTooltipOpen, setMainTooltipOpen] = useState(false);
|
|
57
|
+
const [minLimitTooltipOpen, setMinLimitTooltipOpen] = useState(false);
|
|
58
|
+
const isMobileDevice = useMemo(() => isMobile(), []);
|
|
59
|
+
const mainTooltipId = useId();
|
|
60
|
+
const minLimitTooltipId = useId();
|
|
61
|
+
const handleMainTooltipClick = useCallback((e) => {
|
|
62
|
+
if (isMobileDevice) {
|
|
63
|
+
e.stopPropagation();
|
|
64
|
+
setMainTooltipOpen((prev) => !prev);
|
|
65
|
+
}
|
|
66
|
+
}, [isMobileDevice]);
|
|
67
|
+
const handleMinLimitTooltipClick = useCallback((e) => {
|
|
68
|
+
if (isMobileDevice) {
|
|
69
|
+
e.stopPropagation();
|
|
70
|
+
setMinLimitTooltipOpen((prev) => !prev);
|
|
71
|
+
}
|
|
72
|
+
}, [isMobileDevice]);
|
|
73
|
+
useEffect(() => {
|
|
74
|
+
if (isMobile() && mainTooltipOpen) {
|
|
75
|
+
const timeout = setTimeout(() => setMainTooltipOpen(false), 3000);
|
|
76
|
+
return () => clearTimeout(timeout);
|
|
77
|
+
}
|
|
78
|
+
}, [mainTooltipOpen]);
|
|
79
|
+
useEffect(() => {
|
|
80
|
+
if (isMobile() && minLimitTooltipOpen) {
|
|
81
|
+
const timeout = setTimeout(() => setMinLimitTooltipOpen(false), 3000);
|
|
82
|
+
return () => clearTimeout(timeout);
|
|
83
|
+
}
|
|
84
|
+
}, [minLimitTooltipOpen]);
|
|
85
|
+
return (_jsxs("div", { className: twMerge('relative flex w-full shrink-0 rounded-2xl border border-border-primary bg-bg-tertiary p-3 text-center lg:gap-4 lg:p-5', className), style: style, children: [_jsxs("div", { className: "relative z-1 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: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx("span", { className: "full size-1.5 animate-pulse rounded bg-utility-success-500" }), "Paying Out"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "Accumulating"] })), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: "mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl", children: formatNumber(jackpotAmount, {
|
|
56
86
|
currency: localeInfo.currency.code,
|
|
57
87
|
minDecimalPlaces: 2,
|
|
58
88
|
maxDecimalPlaces: 2,
|
|
@@ -62,19 +92,24 @@ export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = t
|
|
|
62
92
|
currency: localeInfo.currency.code,
|
|
63
93
|
minDecimalPlaces: 2,
|
|
64
94
|
maxDecimalPlaces: 2,
|
|
65
|
-
}) })] })] }) })) : (_jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "firstPlace", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Recent 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: "font-semibold text-text-primary-900 text-xs", children: formatNumber(0, {
|
|
95
|
+
}) })] })] }) })) : (_jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "firstPlace", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Recent 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: "font-semibold text-text-primary-900 text-xs", "aria-live": "polite", children: formatNumber(0, {
|
|
66
96
|
currency: localeInfo.currency.code,
|
|
67
97
|
compact: true,
|
|
68
|
-
}) }), _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(
|
|
98
|
+
}) }), _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: "font-semibold text-text-primary-900 text-xs", children: formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
69
99
|
currency: localeInfo.currency.code,
|
|
70
100
|
compact: true,
|
|
71
|
-
}) })] })] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), children: _jsx(Progress.Track, { className: "h-full overflow-hidden rounded-full bg-bg-primary", children: _jsxs(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: [_jsxs(Tooltip.Root, {
|
|
101
|
+
}) })] })] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), "aria-valuenow": getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), "aria-valuemax": 100, "aria-label": "Jackpot progress", children: _jsx(Progress.Track, { className: "h-full overflow-hidden rounded-full bg-bg-primary", children: _jsxs(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: [_jsxs(Tooltip.Root, { ...(isMobileDevice
|
|
102
|
+
? {
|
|
103
|
+
open: mainTooltipOpen,
|
|
104
|
+
onOpenChange: (details) => setMainTooltipOpen(details.open),
|
|
105
|
+
}
|
|
106
|
+
: {}), openDelay: 0, closeDelay: 100, lazyMount: true, unmountOnExit: true, positioning: { strategy: 'fixed', placement: 'top' }, children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("div", { className: "absolute inset-0 h-full w-full", onClick: handleMainTooltipClick, role: "button", tabIndex: 0, "aria-label": "Show current jackpot tooltip", "aria-describedby": mainTooltipId }) }), _jsx(Tooltip.Positioner, { children: _jsxs(Tooltip.Content, { id: mainTooltipId, children: [_jsxs("div", { className: "text-xs", children: ["Current\uD83D\uDCB0:", ' ', formatNumber(jackpot.pool, {
|
|
72
107
|
currency: localeInfo.currency.code,
|
|
73
108
|
minDecimalPlaces: 2,
|
|
74
109
|
maxDecimalPlaces: 2,
|
|
75
|
-
})] }), _jsx(Tooltip.Arrow, { children: _jsx(Tooltip.ArrowTip, {}) })] }) })] }), _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }), _jsxs(Tooltip.Root, { openDelay: 0, closeDelay: 100, lazyMount: true, unmountOnExit: true, positioning: { strategy:
|
|
110
|
+
})] }), _jsx(Tooltip.Arrow, { children: _jsx(Tooltip.ArrowTip, {}) })] }) })] }), _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }), _jsxs(Tooltip.Root, { open: isMobile() ? minLimitTooltipOpen : undefined, onOpenChange: (details) => isMobile() && setMinLimitTooltipOpen(details.open), openDelay: 0, closeDelay: 100, lazyMount: true, unmountOnExit: true, positioning: { strategy: 'fixed', placement: 'top' }, children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("div", { onClick: handleMinLimitTooltipClick, className: "absolute inset-0 h-full bg-black opacity-30", style: {
|
|
76
111
|
width: `${getPercentage(jackpot.minimumJackpotPoolDrawingLimit, jackpot.pool)}%`,
|
|
77
|
-
} }) }), _jsx(Tooltip.Positioner, { children: _jsxs(Tooltip.Content, { children: [_jsxs("div", { className: "text-xs", children: ["Minimum Payout Limit:",
|
|
112
|
+
}, role: "button", tabIndex: 0, "aria-label": "Show minimum payout limit tooltip", "aria-describedby": minLimitTooltipId }) }), _jsx(Tooltip.Positioner, { children: _jsxs(Tooltip.Content, { id: minLimitTooltipId, children: [_jsxs("div", { className: "text-xs", children: ["Minimum Payout Limit:", ' ', formatNumber(jackpot.minimumJackpotPoolDrawingLimit, {
|
|
78
113
|
currency: localeInfo.currency.code,
|
|
79
114
|
minDecimalPlaces: 2,
|
|
80
115
|
maxDecimalPlaces: 2,
|
|
@@ -83,29 +118,29 @@ export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = t
|
|
|
83
118
|
currency: localeInfo.currency.code,
|
|
84
119
|
compact: true,
|
|
85
120
|
})} Play now for your chance to win big! π₯`
|
|
86
|
-
: 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, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: jackpotPayouts.length ?
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
121
|
+
: 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, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: jackpotPayouts.length ? 'Recent payouts' : 'Starting soon!' })] }), _jsxs(Link, { className: "flex font-semibold text-button-tertiary-fg text-sm", href: viewAllUrl ?? '/jackpots', children: ["See details", _jsx(ChevronRightIcon, { className: "size-5" })] })] }), _jsx("div", { className: twMerge('max-h-[17rem] overflow-y-scroll', styles.scrollArea), children: _jsx("div", { className: "overflow-hidden rounded-xl border-gray-200", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsx("tr", { className: "h-8 whitespace-nowrap bg-bg-secondary text-left font-medium text-text-tertiary-600 text-xs", children: [
|
|
122
|
+
'Player',
|
|
123
|
+
'Game Provider',
|
|
124
|
+
'Multiplier',
|
|
125
|
+
'Prize',
|
|
126
|
+
'Timestamp',
|
|
92
127
|
].map((header) => (_jsx("th", { className: "px-4", children: header }, header))) }) }), _jsx("tbody", { children: jackpotPayouts.length
|
|
93
128
|
? jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "whitespace-nowrap bg-bg-primary text-left text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: mask(jackpotPayout.member.name, {
|
|
94
129
|
totalCharsCount: 6,
|
|
95
|
-
}) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: capitalize(jackpotPayout.game?.provider ??
|
|
130
|
+
}) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: capitalize(jackpotPayout.game?.provider ?? '-', {
|
|
96
131
|
delimiter: capitalize.delimiters.UNDERSCORE,
|
|
97
132
|
}) }), _jsxs("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4 text-brand-400", children: formatNumber(jackpotPayout.amount, {
|
|
98
133
|
currency: localeInfo.currency.code,
|
|
99
134
|
minDecimalPlaces: 2,
|
|
100
135
|
maxDecimalPlaces: 2,
|
|
101
|
-
}) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: format(new Date(jackpotPayout.dateTimeCreated),
|
|
102
|
-
: Array.from({ length: 10 }).map((_, i) => (_jsxs("tr", { className: "bg-bg-primary text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" })] }, i))) })] }) }) })] }), isPayingOut && animate && (_jsx("div", { className: twMerge(styles[
|
|
136
|
+
}) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: format(new Date(jackpotPayout.dateTimeCreated), 'dd MMM yyyy h:mm a') })] }, i)))
|
|
137
|
+
: Array.from({ length: 10 }).map((_, i) => (_jsxs("tr", { className: "bg-bg-primary text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" })] }, i))) })] }) }) })] }), isPayingOut && animate && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute top-0 right-0 rounded-2xl [--light-rays-top:25%] lg:[--light-rays-top:9.375rem]') }))] }));
|
|
103
138
|
}
|
|
104
139
|
const getAccumulatingJackpotDescription = (part, total) => {
|
|
105
140
|
const percentage = total === 0 ? 0 : (part / total) * 100;
|
|
106
141
|
return percentage <= 90
|
|
107
|
-
?
|
|
108
|
-
:
|
|
142
|
+
? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
|
|
143
|
+
: 'π₯ Itβs about to pop! Stay in the game for your shot at the prize!';
|
|
109
144
|
};
|
|
110
145
|
function getPercentage(value, total) {
|
|
111
146
|
const v = parseDecimal(value, 0);
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Progress } from '@ark-ui/react/progress';
|
|
3
3
|
import { format } from 'date-fns';
|
|
4
4
|
import Image from 'next/image';
|
|
5
|
-
import { useState } from 'react';
|
|
5
|
+
import { useCallback, useEffect, useId, useState, } from 'react';
|
|
6
6
|
import { twMerge } from 'tailwind-merge';
|
|
7
7
|
import { ArrowNarrowDownIcon } from '../../../icons/ArrowNarrowDownIcon.js';
|
|
8
8
|
import { ArrowNarrowUpIcon } from '../../../icons/ArrowNarrowUpIcon.js';
|
|
@@ -15,6 +15,7 @@ import closeChest from '../../../images/close-chest.png';
|
|
|
15
15
|
import firstPlace from '../../../images/first-place.png';
|
|
16
16
|
import openChest from '../../../images/open-chest.png';
|
|
17
17
|
import { Button } from '../../../ui/Button/index.js';
|
|
18
|
+
import { Tooltip } from '../../../ui/Tooltip/index.js';
|
|
18
19
|
import { capitalize } from '../../../utils/capitalize.js';
|
|
19
20
|
import { formatNumber } from '../../../utils/formatNumber.js';
|
|
20
21
|
import { mask } from '../../../utils/mask.js';
|
|
@@ -28,6 +29,30 @@ export function JackpotsListItemMobile({ animate = true, ...props }) {
|
|
|
28
29
|
const jackpot = useJackpotsListItemContext();
|
|
29
30
|
const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, } = useJackpotsListItemData();
|
|
30
31
|
const [isDetailsVisible, setIsDetailsVisible] = useState(false);
|
|
32
|
+
const [mainTooltipOpen, setMainTooltipOpen] = useState(false);
|
|
33
|
+
const [minLimitTooltipOpen, setMinLimitTooltipOpen] = useState(false);
|
|
34
|
+
const mainTooltipId = useId();
|
|
35
|
+
const minLimitTooltipId = useId();
|
|
36
|
+
const handleMainTooltipClick = useCallback((e) => {
|
|
37
|
+
e.stopPropagation();
|
|
38
|
+
setMainTooltipOpen((prev) => !prev);
|
|
39
|
+
}, []);
|
|
40
|
+
const handleMinLimitTooltipClick = useCallback((e) => {
|
|
41
|
+
e.stopPropagation();
|
|
42
|
+
setMinLimitTooltipOpen((prev) => !prev);
|
|
43
|
+
}, []);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
if (mainTooltipOpen) {
|
|
46
|
+
const timeout = setTimeout(() => setMainTooltipOpen(false), 3000);
|
|
47
|
+
return () => clearTimeout(timeout);
|
|
48
|
+
}
|
|
49
|
+
}, [mainTooltipOpen]);
|
|
50
|
+
useEffect(() => {
|
|
51
|
+
if (minLimitTooltipOpen) {
|
|
52
|
+
const timeout = setTimeout(() => setMinLimitTooltipOpen(false), 3000);
|
|
53
|
+
return () => clearTimeout(timeout);
|
|
54
|
+
}
|
|
55
|
+
}, [minLimitTooltipOpen]);
|
|
31
56
|
return (_jsxs("div", { style: props.style, className: twMerge('rounded-2xl border border-border-primary bg-bg-primary', props.className), children: [_jsxs("div", { className: "relative flex shrink-0 rounded-2xl bg-bg-tertiary p-3 text-center lg:gap-4 lg:p-5", children: [_jsxs("div", { className: "relative z-1 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: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx("span", { className: "full size-1.5 animate-pulse rounded bg-utility-success-500" }), "Paying Out"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "Accumulating"] })), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: "mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl", children: formatNumber(jackpotAmount, {
|
|
32
57
|
currency: localeInfo.currency.code,
|
|
33
58
|
minDecimalPlaces: 2,
|
|
@@ -38,7 +63,17 @@ export function JackpotsListItemMobile({ animate = true, ...props }) {
|
|
|
38
63
|
}) }), _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: "font-semibold text-text-primary-900 text-xs", children: formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
39
64
|
currency: localeInfo.currency.code,
|
|
40
65
|
compact: true,
|
|
41
|
-
}) })] })] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), children: _jsx(Progress.Track, { className: "h-full overflow-hidden rounded-full bg-bg-primary", children:
|
|
66
|
+
}) })] })] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), "aria-valuenow": getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), "aria-valuemax": 100, "aria-label": "Jackpot progress", children: _jsx(Progress.Track, { className: "h-full overflow-hidden rounded-full bg-bg-primary", children: _jsxs(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: [_jsxs(Tooltip.Root, { open: mainTooltipOpen, onOpenChange: (details) => setMainTooltipOpen(details.open), openDelay: 0, closeDelay: 100, lazyMount: true, unmountOnExit: true, positioning: { strategy: 'fixed', placement: 'top' }, children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("div", { className: "absolute inset-0 h-full w-full", onClick: handleMainTooltipClick, role: "button", tabIndex: 0, "aria-label": "Show current jackpot tooltip", "aria-describedby": mainTooltipId }) }), _jsx(Tooltip.Positioner, { children: _jsxs(Tooltip.Content, { id: mainTooltipId, children: [_jsxs("div", { className: "text-xs", children: ["Current\uD83D\uDCB0:", ' ', formatNumber(jackpot.pool, {
|
|
67
|
+
currency: localeInfo.currency.code,
|
|
68
|
+
minDecimalPlaces: 2,
|
|
69
|
+
maxDecimalPlaces: 2,
|
|
70
|
+
})] }), _jsx(Tooltip.Arrow, { children: _jsx(Tooltip.ArrowTip, {}) })] }) })] }), _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }), _jsxs(Tooltip.Root, { open: minLimitTooltipOpen, onOpenChange: (details) => setMinLimitTooltipOpen(details.open), openDelay: 0, closeDelay: 100, lazyMount: true, unmountOnExit: true, positioning: { strategy: 'fixed', placement: 'top' }, children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("div", { onClick: handleMinLimitTooltipClick, className: "absolute inset-0 h-full bg-black opacity-30", style: {
|
|
71
|
+
width: `${getPercentage(jackpot.minimumJackpotPoolDrawingLimit, jackpot.pool)}%`,
|
|
72
|
+
}, role: "button", tabIndex: 0, "aria-label": "Show minimum payout limit tooltip", "aria-describedby": minLimitTooltipId }) }), _jsx(Tooltip.Positioner, { children: _jsxs(Tooltip.Content, { id: minLimitTooltipId, children: [_jsxs("div", { className: "text-xs", children: ["Minimum Payout Limit:", ' ', formatNumber(jackpot.minimumJackpotPoolDrawingLimit, {
|
|
73
|
+
currency: localeInfo.currency.code,
|
|
74
|
+
minDecimalPlaces: 2,
|
|
75
|
+
maxDecimalPlaces: 2,
|
|
76
|
+
})] }), _jsx(Tooltip.Arrow, { children: _jsx(Tooltip.ArrowTip, {}) })] }) })] })] }) }) }), _jsx("div", { className: "mt-1 block text-start text-2xs lg:hidden", children: isPayingOut
|
|
42
77
|
? `The pot has hit ${formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
43
78
|
currency: localeInfo.currency.code,
|
|
44
79
|
compact: true,
|
|
@@ -14,7 +14,9 @@ export async function postAuthenticate(request) {
|
|
|
14
14
|
const userAgent = request.headers.get('user-agent');
|
|
15
15
|
const forwarded = request.headers.get('x-forwarded-for');
|
|
16
16
|
const realIp = request.headers.get('x-real-ip');
|
|
17
|
-
const ipaddress = forwarded
|
|
17
|
+
const ipaddress = forwarded || realIp || 'unknown';
|
|
18
|
+
console.log(forwarded, 'forwarded');
|
|
19
|
+
console.log(realIp, 'realIp');
|
|
18
20
|
if (!parsed.success) {
|
|
19
21
|
return NextResponse.json({
|
|
20
22
|
ok: false,
|
|
@@ -33,7 +33,9 @@ export async function postSession(request) {
|
|
|
33
33
|
const userAgent = request.headers.get('user-agent');
|
|
34
34
|
const forwarded = request.headers.get('x-forwarded-for');
|
|
35
35
|
const realIp = request.headers.get('x-real-ip');
|
|
36
|
-
const ipaddress = forwarded
|
|
36
|
+
const ipaddress = forwarded || realIp || 'unknown';
|
|
37
|
+
console.log(forwarded, 'forwarded');
|
|
38
|
+
console.log(realIp, 'realIp');
|
|
37
39
|
if (!parsed.success) {
|
|
38
40
|
return NextResponse.json({
|
|
39
41
|
ok: false,
|
package/dist/middleware.js
CHANGED
|
@@ -8,7 +8,7 @@ export const middleware = async (req) => {
|
|
|
8
8
|
const res = NextResponse.next();
|
|
9
9
|
const forwarded = req.headers.get('x-forwarded-for');
|
|
10
10
|
const realIp = req.headers.get('x-real-ip');
|
|
11
|
-
const ipaddress = forwarded
|
|
11
|
+
const ipaddress = forwarded || realIp || 'unknown';
|
|
12
12
|
if (!accessToken && refreshToken) {
|
|
13
13
|
try {
|
|
14
14
|
const data = await refreshSession({
|
|
@@ -10,6 +10,10 @@ export async function httpRequest(url, opts = {}) {
|
|
|
10
10
|
new Headers(opts.headers).forEach((value, key) => {
|
|
11
11
|
headers.set(key, value);
|
|
12
12
|
});
|
|
13
|
+
console.log('https');
|
|
14
|
+
console.log('HTTP URL:', url);
|
|
15
|
+
console.dir({ headers }, { depth: null });
|
|
16
|
+
console.log('option headers', opts.headers);
|
|
13
17
|
const res = await fetch(url, {
|
|
14
18
|
...opts,
|
|
15
19
|
headers,
|