@opexa/portal-components 0.0.839 → 0.0.840

package/dist/components/PortalProvider/AndroidOnlyComponents.d.ts

@@ -0,0 +1 @@
+export declare function AndroidOnlyComponents(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/PortalProvider/AndroidOnlyComponents.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
+import { AndroidRoutingHandler } from './AndroidRoutingHandler.js';
+import PushNotification from './PushNotifications.js';
+export function AndroidOnlyComponents() {
+    const platform = Capacitor.getPlatform();
+    const isNative = platform === 'android' || platform === 'ios';
+    if (!isNative)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(PushNotification, {}), _jsx(AndroidRoutingHandler, {})] }));
+}

package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.d.ts

@@ -4,12 +4,22 @@ interface ClassNameEntries {
     badgeRoot?: string;
     badgeLabel?: string;
     badgeIcon?: string;
+    countdownHeading?: string;
+    countdownSubheading?: string;
+    countdownLabel?: string;
+    countdownTime?: string;
+    countdownSeparator?: string;
 }
 interface StyleEntries {
     root?: CSSProperties;
     badgeRoot?: CSSProperties;
     badgeLabel?: CSSProperties;
     badgeIcon?: CSSProperties;
+    countdownHeading?: CSSProperties;
+    countdownSubheading?: CSSProperties;
+    countdownLabel?: CSSProperties;
+    countdownTime?: CSSProperties;
+    countdownSeparator?: CSSProperties;
 }
 export interface TournamentsCarouselItemProps {
     style?: CSSProperties | StyleEntries;

package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isString, pick } from 'lodash-es';
+import { format } from 'date-fns';
+import { isString } from 'lodash-es';
 import Image from 'next/image';
 import Link from 'next/link';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {} from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
 import { Award01Icon } from '../../../icons/Award01Icon.js';
@@ -12,62 +13,21 @@ import { StarIcon } from '../../../icons/StarIcon.js';
 import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
 import { User01Icon } from '../../../icons/User01Icon.js';
 import firstPlace from '../../../images/first-place.png';
-import trophy from '../../../images/trophy.png';
 import trophyTwo from '../../../images/trophy-two.png';
+import trophy from '../../../images/trophy.png';
 import { formatNumber } from '../../../utils/formatNumber.js';
 import { isStyleEntries } from '../../../utils/isStyleEntries.js';
 import { maskFirstLast } from '../../../utils/mask.js';
+import { useTournamentTimer } from '../TournamentsList/useTournamentTimer.js';
 import { useTournamentsCarouselItemContext } from './TournamentsCarouselContext.js';
 import css from './TournamentsCarouselItem.module.css';
 export function TournamentsCarouselItem({ style, className, viewAllUrl, }) {
     const tournament = useTournamentsCarouselItemContext();
     const localeInfo = useLocaleInfo();
-    const [timeRemaining, setTimeRemaining] = useState({
-        days: 0,
-        hours: 0,
-        minutes: 0,
-        seconds: 0,
-        isPast: false,
+    const { isLaunchStarts, timeParts, now } = useTournamentTimer({
+        activationEndDateTime: tournament.activationEndDateTime,
+        activationStartDateTime: tournament.activationStartDateTime,
     });
-    const activationEndDateTime = useMemo(() => new Date(tournament.activationEndDateTime), [tournament.activationEndDateTime]);
-    const calculateRemainingTime = React.useCallback(() => {
-        const now = new Date();
-        const diffMs = activationEndDateTime.getTime() - now.getTime();
-        if (diffMs <= 0) {
-            setTimeRemaining({
-                days: 0,
-                hours: 0,
-                minutes: 0,
-                seconds: 0,
-                isPast: true,
-            });
-            return;
-        }
-        const diffSeconds = Math.floor(diffMs / 1000);
-        const days = Math.floor(diffSeconds / (3600 * 24));
-        const hours = Math.floor((diffSeconds % (3600 * 24)) / 3600);
-        const minutes = Math.floor((diffSeconds % 3600) / 60);
-        const seconds = diffSeconds % 60;
-        const updated = pick({ days, hours, minutes, seconds, isPast: false }, [
-            'days',
-            'hours',
-            'minutes',
-            'seconds',
-            'isPast',
-        ]);
-        setTimeRemaining(updated);
-    }, [activationEndDateTime]);
-    useEffect(() => {
-        calculateRemainingTime();
-        const interval = setInterval(calculateRemainingTime, 1000); // Update every second
-        return () => clearInterval(interval);
-    }, [calculateRemainingTime]);
-    const timeParts = [
-        { label: 'Day', value: timeRemaining.days },
-        { label: 'Hour', value: timeRemaining.hours },
-        { label: 'Min', value: timeRemaining.minutes },
-        { label: 'Sec', value: timeRemaining.seconds },
-    ];
     const tournamentReward = Object.values(tournament.rewardSettings)
         .map(Number)
         .reduce((sum, val) => sum + val, 0);
@@ -83,18 +43,23 @@ export function TournamentsCarouselItem({ style, className, viewAllUrl, }) {
     const classNames = isString(className)
         ? { root: className }
         : (className ?? {});
-    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-6 lg:p-5', classNames.root), style: styles.root, children: [_jsx("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", { className: "w-full", children: [_jsxs("div", { className: "flex w-full justify-between", children: [_jsxs("div", { style: styles.badgeRoot, className: twMerge('flex h-fit w-fit items-center gap-1 rounded-full border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', classNames.badgeRoot), children: [_jsx(Award01Icon, { style: styles.badgeIcon, className: twMerge('size-3.5 text-utility-brand-500', classNames.badgeIcon) }), _jsx("span", { style: styles.badgeLabel, className: classNames.badgeLabel, children: "Multiplier" })] }), _jsx("div", { className: "flex h-fit", children: timeParts.map((part, idx) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: twMerge('flex h-fit w-8 flex-col items-center rounded-[0.25rem] bg-bg-primary pb-1.5 text-text-primary-900'), children: [_jsx("span", { className: "font-medium text-base", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-3xs", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex flex-col justify-center gap-1.5 px-1.5", children: [_jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" }), _jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" })] }))] }, part.label))) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "mt-2.5 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: tournament.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(tournamentReward, {
+    const isEnded = new Date(tournament.activationEndDateTime) < now;
+    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-6 lg:p-5', classNames.root), style: styles.root, children: [_jsx("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", { className: "w-full", children: [_jsxs("div", { className: "flex w-full justify-between", children: [_jsxs("div", { style: styles.badgeRoot, className: twMerge('flex h-fit w-fit items-center gap-1 rounded-full border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', classNames.badgeRoot), children: [_jsx(Award01Icon, { style: styles.badgeIcon, className: twMerge('size-3.5 text-utility-brand-500', classNames.badgeIcon) }), _jsx("span", { style: styles.badgeLabel, className: classNames.badgeLabel, children: "Multiplier" })] }), _jsxs("div", { className: "flex flex-col", children: [isEnded && (_jsxs("div", { className: twMerge('mb-2 flex flex-col items-center justify-center whitespace-nowrap rounded-md bg-[#0C0E12] px-2 py-1.5 font-semibold text-[#EAAA08] text-sm', classNames.countdownHeading), children: [_jsx("span", { className: "font-semibold", children: "Ended" }), _jsx("span", { className: twMerge('text-[9px] text-white', classNames.countdownSubheading), children: format(tournament.activationEndDateTime, 'MMMM dd, yyyy') })] })), !isLaunchStarts && !isEnded && (_jsx("div", { className: twMerge('mb-2 flex items-center justify-center rounded-md bg-[#0C0E12] py-1 font-semibold text-[#EAAA08] text-sm', classNames.countdownHeading), children: "Launching Soon" })), !isEnded && (_jsx("div", { className: "flex h-fit", children: timeParts.map((part, idx) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: twMerge('flex h-fit w-8 flex-col items-center rounded-[0.25rem] bg-bg-primary pb-1.5 text-text-primary-900'), children: [_jsx("span", { className: "font-medium text-base", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-3xs", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex flex-col justify-center gap-1.5 px-1.5", children: [_jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" }), _jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" })] }))] }, part.label))) }))] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-left font-medium text-lg text-text-primary-900 lg:text-2xl", children: tournament.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(tournamentReward, {
                                                                         currency: localeInfo.currency.code,
                                                                         minDecimalPlaces: 2,
                                                                         maxDecimalPlaces: 2,
-                                                                    }) }), _jsx("div", { className: "mt-4 block text-left text-base text-text-primary-900 lg:hidden", children: "Play and Win!" })] }), _jsx("div", { className: "flex items-end lg:hidden", children: _jsx(Image, { src: trophy, alt: "trophy", width: 155, height: 155, className: "h-23 w-auto" }) })] })] }), _jsx("div", { className: "-bottom-16 absolute right-0 z-1 hidden lg:block", children: _jsx(Image, { width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) })] }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsx("div", { className: "absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: "1st" })] }), _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" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: maskFirstLast(tournament?.topPayouts[0]?.member?.name || '') }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.topPayouts[0]?.amount, {
+                                                                    }) }), _jsx("div", { className: "mt-4 block text-left text-base text-text-primary-900 lg:hidden", children: "Play and Win!" })] }), _jsx("div", { className: "flex items-end lg:hidden", children: _jsx(Image, { src: trophy, alt: "trophy", width: 155, height: 155, className: "h-23 w-auto" }) })] })] }), _jsx("div", { className: "-bottom-16 -right-6 absolute z-1 hidden lg:block", children: _jsx(Image, { width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) })] }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsx("div", { className: "absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: "1st" })] }), _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" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: maskFirstLast(tournament?.topPayouts[0]?.member?.name || '', {
+                                                            midLength: 4,
+                                                        }) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.topPayouts[0]?.amount, {
                                                             currency: localeInfo.currency.code,
                                                             minDecimalPlaces: 2,
                                                             maxDecimalPlaces: 2,
                                                         }) })] })] }) })) : (_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: "closeChest", 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" }), "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, alt: "leaderboardIcon", className: "size-full w-6" }), _jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: tournament.currentLeaderboard.edges.length
                                             ? 'Leaderboard'
                                             : 'Starting soon!' })] }), _jsxs(Link, { className: "flex font-semibold text-button-tertiary-fg text-sm", href: viewAllUrl ?? '/tournaments', children: ["See details", _jsx(ChevronRightIcon, { className: "size-5" })] })] }), _jsx("div", { className: twMerge('max-h-[17rem] overflow-y-scroll', css.scrollArea), children: _jsx("div", { className: "overflow-hidden rounded-xl border-gray-200", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "h-8 bg-bg-secondary font-medium text-text-tertiary-600 text-xs", children: [_jsx("th", { className: "w-[3.25rem]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length
-                                            ? tournament.currentLeaderboard.edges.map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 w-[3.25rem] border-border-secondary 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 font-bold text-2xs', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: maskFirstLast(tournament.node.username) }), _jsxs("td", { className: "h-12 border-border-secondary border-t-2", children: [tournament.node.multiplier, "x"] }), i + 1 <= prizeAmountsByRank.length ? (_jsx("td", { className: "h-12 border-border-secondary border-t-2 text-brand-400", children: formatNumber(prizeAmountsByRank[i], {
+                                            ? tournament.currentLeaderboard.edges.map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 w-[3.25rem] border-border-secondary 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 font-bold text-2xs', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: maskFirstLast(tournament.node.username, {
+                                                            midLength: 4,
+                                                        }) }), _jsxs("td", { className: "h-12 border-border-secondary border-t-2", children: [tournament.node.multiplier, "x"] }), i + 1 <= prizeAmountsByRank.length ? (_jsx("td", { className: "h-12 border-border-secondary border-t-2 text-brand-400", children: formatNumber(prizeAmountsByRank[i], {
                                                             currency: localeInfo.currency.code,
                                                             minDecimalPlaces: 2,
                                                             maxDecimalPlaces: 2,

package/dist/components/Tournaments/TournamentsList/TournamentsListItemDesktop.d.ts

@@ -1,15 +1,27 @@
-import { type CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 interface ClassNameEntries {
+    outerRoot?: string;
     root?: string;
     badgeRoot?: string;
     badgeLabel?: string;
     badgeIcon?: string;
+    countdownHeading?: string;
+    countdownSubheading?: string;
+    countdownLabel?: string;
+    countdownTime?: string;
+    countdownSeparator?: string;
 }
 interface StyleEntries {
+    outerRoot?: CSSProperties;
     root?: CSSProperties;
     badgeRoot?: CSSProperties;
     badgeLabel?: CSSProperties;
     badgeIcon?: CSSProperties;
+    countdownHeading?: CSSProperties;
+    countdownSubheading?: CSSProperties;
+    countdownLabel?: CSSProperties;
+    countdownTime?: CSSProperties;
+    countdownSeparator?: CSSProperties;
 }
 interface TournamentsListItemDesktopProps {
     style?: CSSProperties | StyleEntries;

package/dist/components/Tournaments/TournamentsList/TournamentsListItemDesktop.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns';
 import { isString } from 'lodash-es';
 import Image from 'next/image';
-import React, {} from 'react';
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Award01Icon } from '../../../icons/Award01Icon.js';
 import { StarIcon } from '../../../icons/StarIcon.js';
 import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
 import { User01Icon } from '../../../icons/User01Icon.js';
 import firstPlace from '../../../images/first-place.png';
-import trophy from '../../../images/trophy.png';
 import trophyTwo from '../../../images/trophy-two.png';
+import trophy from '../../../images/trophy.png';
 import { formatNumber } from '../../../utils/formatNumber.js';
 import { isStyleEntries } from '../../../utils/isStyleEntries.js';
 import { maskFirstLast } from '../../../utils/mask.js';
@@ -18,9 +19,14 @@ import { useTournamentsListItemContext } from './TournamentsListContext.js';
 import { TournamentsListItemGameProviders } from './TournamentsListItemGameProviders.js';
 import { TournamentsListItemRules } from './TournamentsListItemRules.js';
 import { useTournamentsListItemData } from './useTournamentListItemData.js';
+import { useTournamentTimer } from './useTournamentTimer.js';
 export function TournamentsListItemDesktop({ style, className, }) {
     const tournament = useTournamentsListItemContext();
-    const { prizeAmountsByRank, timeParts, tournamentReward, filteredGameProviders, localeInfo, } = useTournamentsListItemData();
+    const { isLaunchStarts, timeParts, now } = useTournamentTimer({
+        activationEndDateTime: tournament.activationEndDateTime,
+        activationStartDateTime: tournament.activationStartDateTime,
+    });
+    const { tournamentReward, filteredGameProviders, localeInfo } = useTournamentsListItemData();
     const styles = isStyleEntries(style, [
         'root',
         'badgeRoot',
@@ -32,18 +38,30 @@ export function TournamentsListItemDesktop({ style, className, }) {
     const classNames = isString(className)
         ? { root: className }
         : (className ?? {});
-    return (_jsxs("div", { style: styles.root, className: twMerge('rounded-2xl border border-border-primary bg-bg-tertiary', classNames.root), children: [_jsxs("div", { className: twMerge('relative flex shrink-0 p-3 text-center lg:gap-6 lg:p-5'), children: [_jsx("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", { className: "w-full", children: [_jsxs("div", { className: "flex w-full justify-between", children: [_jsxs("div", { style: styles.badgeRoot, className: twMerge('flex h-fit w-fit items-center gap-1 rounded-full border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', classNames.badgeRoot), children: [_jsx(Award01Icon, { style: styles.badgeIcon, className: twMerge('size-3.5 text-utility-brand-500', classNames.badgeIcon) }), _jsx("span", { style: styles.badgeLabel, className: classNames.badgeLabel, children: "Multiplier" })] }), _jsx("div", { className: "flex h-fit", children: timeParts.map((part, idx) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: twMerge('flex h-fit w-8 flex-col items-center rounded-[0.25rem] bg-bg-primary pb-1.5 text-text-primary-900'), children: [_jsx("span", { className: "font-medium text-base", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-3xs", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex flex-col justify-center gap-1.5 px-1.5", children: [_jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" }), _jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" })] }))] }, part.label))) })] }), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: tournament.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(tournamentReward, {
+    const isEnded = new Date(tournament.activationEndDateTime) < now;
+    return (_jsxs("div", { style: styles.outerRoot, className: twMerge('overflow-hidden rounded-2xl border border-border-primary bg-[#13161B]', classNames.outerRoot), children: [_jsxs("div", { style: styles.root, className: twMerge('relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-6 lg:p-5', classNames.root), children: [_jsx("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", { className: "w-full", children: [_jsxs("div", { style: styles.badgeRoot, className: twMerge('flex h-fit w-fit items-center gap-1 rounded-full border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', classNames.badgeRoot), children: [_jsx(Award01Icon, { style: styles.badgeIcon, className: twMerge('size-3.5 text-utility-brand-500', classNames.badgeIcon) }), _jsx("span", { style: styles.badgeLabel, className: classNames.badgeLabel, children: "Multiplier" })] }), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-4.5 lg:text-2xl", children: tournament.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:mb-5xl lg:text-4xl", children: formatNumber(tournamentReward, {
                                                                 currency: localeInfo.currency.code,
                                                                 minDecimalPlaces: 2,
                                                                 maxDecimalPlaces: 2,
-                                                            }) })] }), _jsx("div", { className: "right-0 bottom-[-60] z-1 block lg:absolute", children: _jsx("div", { className: "h-[9.688rem] w-auto shrink-0", children: _jsx(Image, { width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) }) })] }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsx("div", { className: "absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: "1st" })] }), _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" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: maskFirstLast(tournament?.topPayouts[0]?.member?.name || '') }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.topPayouts[0]?.amount, {
+                                                            }) })] }), _jsxs("div", { className: "flex h-fit flex-col", children: [isEnded && (_jsxs("div", { className: twMerge('mb-2 flex flex-col items-center justify-center whitespace-nowrap rounded-md bg-[#0C0E12] px-2 py-1.5 font-semibold text-[#EAAA08] text-sm', classNames.countdownHeading), children: [_jsx("span", { className: "font-semibold", children: "Ended" }), _jsx("span", { className: twMerge('text-[9px] text-white', classNames.countdownSubheading), children: format(tournament.activationEndDateTime, 'MMMM dd, yyyy') })] })), !isLaunchStarts && !isEnded && (_jsx("div", { className: twMerge('mb-2 flex items-center justify-center rounded-md bg-[#0C0E12] py-1 font-semibold text-[#EAAA08] text-sm', classNames.countdownHeading), children: "Launching Soon" })), !isEnded && (_jsx("div", { className: "flex justify-end space-x-2 text-center text-yellow-900", children: timeParts.map((part, idx) => {
+                                                                return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "rounded-md bg-[#0C0E12] p-1", children: [_jsx("p", { className: twMerge('w-[32px] font-medium text-[#FFFFFF] text-xl', classNames.countdownTime), children: part.value }), _jsx("p", { className: "text-[#FFFFFF] text-[8px]", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex flex-col items-center justify-center gap-1.5", children: [_jsx("span", { className: twMerge('inline-flex h-1 w-1 rounded-full bg-[#0C0E12]', classNames.countdownSeparator) }), _jsx("span", { className: twMerge('inline-flex h-1 w-1 rounded-full bg-[#0C0E12]', classNames.countdownSeparator) })] }))] }, part.label));
+                                                            }) }))] }), _jsx("div", { className: "-right-7 bottom-[-70px] z-1 block lg:absolute", children: _jsx("div", { className: "h-[9.688rem] w-auto shrink-0", children: _jsx(Image, { width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) }) })] }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsx("div", { className: "absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: "1st" })] }), _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" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: maskFirstLast(tournament?.topPayouts[0]?.member?.name || '', { midLength: 4 }) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.topPayouts[0]?.amount, {
                                                                     currency: localeInfo.currency.code,
                                                                     minDecimalPlaces: 2,
                                                                     maxDecimalPlaces: 2,
                                                                 }) })] })] }) })) : (_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: "closeChest", 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" }), "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, alt: "leaderboardIcon", className: "size-full w-6" }), _jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: tournament.currentLeaderboard.edges.length
                                                     ? 'Leaderboard'
                                                     : 'Starting soon!' })] }), _jsx(TournamentsListItemRules, {})] }), _jsx("div", { className: twMerge('max-h-[17rem] overflow-y-scroll', css.scrollArea), children: _jsx("div", { className: "overflow-hidden rounded-xl border-gray-200", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "h-8 bg-bg-secondary font-medium text-text-tertiary-600 text-xs", children: [_jsx("th", { className: "w-[3.25rem]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length
-                                                    ? tournament.currentLeaderboard.edges.map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 w-[3.25rem] border-border-secondary 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 font-bold text-2xs', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: maskFirstLast(tournament.node.username) }), _jsxs("td", { className: "h-12 border-border-secondary border-t-2", children: [tournament.node.multiplier, "x"] }), i + 1 <= prizeAmountsByRank.length ? (_jsx("td", { className: "h-12 border-border-secondary border-t-2 text-brand-400", children: formatNumber(prizeAmountsByRank[i], {
+                                                    ? [
+                                                        ...tournament.currentLeaderboard.edges,
+                                                        ...Array(Math.max(0, 10 - tournament.currentLeaderboard.edges.length)).fill(''),
+                                                    ].map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 w-[3.25rem] border-border-secondary 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 font-bold text-2xs', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: tournament.node?.username
+                                                                    ? maskFirstLast(tournament.node.username, {
+                                                                        midLength: 4,
+                                                                    })
+                                                                    : '-' }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: tournament.node?.multiplier
+                                                                    ? `${tournament.node.multiplier}x`
+                                                                    : '-' }), tournament.node?.prize ? (_jsx("td", { className: "h-12 border-border-secondary border-t-2 text-brand-400", children: formatNumber(tournament.node.prize, {
                                                                     currency: localeInfo.currency.code,
                                                                     minDecimalPlaces: 2,
                                                                     maxDecimalPlaces: 2,

package/dist/components/Tournaments/TournamentsList/TournamentsListItemMobile.d.ts

@@ -1,15 +1,27 @@
 import { type CSSProperties } from 'react';
 interface ClassNameEntries {
+    outerRoot?: string;
     root?: string;
     badgeRoot?: string;
     badgeLabel?: string;
     badgeIcon?: string;
+    countdownHeading?: string;
+    countdownSubheading?: string;
+    countdownLabel?: string;
+    countdownTime?: string;
+    countdownSeparator?: string;
 }
 interface StyleEntries {
+    outerRoot?: CSSProperties;
     root?: CSSProperties;
     badgeRoot?: CSSProperties;
     badgeLabel?: CSSProperties;
     badgeIcon?: CSSProperties;
+    countdownHeading?: CSSProperties;
+    countdownSubheading?: CSSProperties;
+    countdownLabel?: CSSProperties;
+    countdownTime?: CSSProperties;
+    countdownSeparator?: CSSProperties;
 }
 interface TournamentsListItemMobileProps {
     style?: CSSProperties | StyleEntries;

package/dist/components/Tournaments/TournamentsList/TournamentsListItemMobile.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns';
 import { isString } from 'lodash-es';
 import Image from 'next/image';
-import { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { ArrowNarrowDownIcon } from '../../../icons/ArrowNarrowDownIcon.js';
 import { ArrowNarrowUpIcon } from '../../../icons/ArrowNarrowUpIcon.js';
@@ -19,10 +20,15 @@ import { useTournamentsListItemContext } from './TournamentsListContext.js';
 import { TournamentsListItemGameProviders } from './TournamentsListItemGameProviders.js';
 import { TournamentsListItemRules } from './TournamentsListItemRules.js';
 import { useTournamentsListItemData } from './useTournamentListItemData.js';
+import { useTournamentTimer } from './useTournamentTimer.js';
 export function TournamentsListItemMobile({ style, className, }) {
     const tournament = useTournamentsListItemContext();
+    const { isLaunchStarts, timeParts, now } = useTournamentTimer({
+        activationEndDateTime: tournament.activationEndDateTime,
+        activationStartDateTime: tournament.activationStartDateTime,
+    });
     const [isDetailsVisible, setIsDetailsVisible] = useState(false);
-    const { prizeAmountsByRank, timeParts, tournamentReward, filteredGameProviders, localeInfo, } = useTournamentsListItemData();
+    const { prizeAmountsByRank, tournamentReward, filteredGameProviders, localeInfo, } = useTournamentsListItemData();
     const styles = isStyleEntries(style, [
         'root',
         'badgeRoot',
@@ -34,23 +40,28 @@ export function TournamentsListItemMobile({ style, className, }) {
     const classNames = isString(className)
         ? { root: className }
         : (className ?? {});
-    return (_jsxs("div", { style: styles.root, className: twMerge('rounded-2xl border border-border-primary bg-bg-primary', classNames.root), children: [_jsx("div", { className: twMerge('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", { className: "w-full", children: [_jsxs("div", { className: "flex w-full justify-between", children: [_jsxs("div", { style: styles.badgeRoot, className: twMerge('flex h-fit w-fit items-center gap-1 rounded-full border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', classNames.badgeRoot), children: [_jsx(Award01Icon, { style: styles.badgeIcon, className: twMerge('size-3.5 text-utility-brand-500', classNames.badgeIcon) }), _jsx("span", { style: styles.badgeLabel, className: classNames.badgeLabel, children: "Multiplier" })] }), _jsx("div", { className: "flex h-fit", children: timeParts.map((part, idx) => (_jsxs(Fragment, { children: [_jsxs("div", { className: twMerge('flex h-fit w-8 flex-col items-center rounded-[0.25rem] bg-bg-primary pb-1.5 text-text-primary-900'), children: [_jsx("span", { className: "font-medium text-base", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-3xs", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex flex-col justify-center gap-1.5 px-1.5", children: [_jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" }), _jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" })] }))] }, part.label))) })] }), _jsx("div", { className: "mt-2.5 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: tournament.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(tournamentReward, {
+    const isEnded = new Date(tournament.activationEndDateTime) < now;
+    return (_jsxs("div", { style: styles.root, className: twMerge('overflow-hidden rounded-2xl border border-border-primary bg-bg-primary', classNames.outerRoot), children: [_jsx("div", { className: twMerge('relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5', classNames.root), children: _jsxs("div", { className: "relative flex flex-1 flex-col", children: [_jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "w-full", children: [_jsxs("div", { className: "flex justify-between", children: [_jsxs("div", { style: styles.badgeRoot, className: twMerge('flex h-fit w-fit items-center gap-1 rounded-full border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', classNames.badgeRoot), children: [_jsx(Award01Icon, { style: styles.badgeIcon, className: twMerge('size-3.5 text-utility-brand-500', classNames.badgeIcon) }), _jsx("span", { style: styles.badgeLabel, className: classNames.badgeLabel, children: "Multiplier" })] }), _jsxs("div", { className: "flex h-fit flex-col", children: [isEnded && (_jsxs("div", { className: twMerge('mb-2 flex flex-col items-center justify-center whitespace-nowrap rounded-md bg-[#0C0E12] px-2 py-1.5 font-semibold text-[#EAAA08] text-sm', classNames.countdownHeading), children: [_jsx("span", { className: "font-semibold", children: "Ended" }), _jsx("span", { className: twMerge('text-[#CECFD2] text-[9px]', classNames.countdownSubheading), children: format(tournament.activationEndDateTime, 'MMMM dd, yyyy') })] })), !isLaunchStarts && !isEnded && (_jsx("div", { className: twMerge('mb-2 flex items-center justify-center rounded-md bg-[#0C0E12] py-1 font-semibold text-[#EAAA08] text-sm', classNames.countdownHeading), children: "Launching Soon" })), !isEnded && (_jsx("div", { className: "flex justify-between text-center text-yellow-900", children: timeParts.map((part, idx) => {
+                                                            return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "flex h-fit w-8 flex-col items-center rounded-[0.25rem] bg-bg-primary pb-1.5 text-text-primary-900", children: [_jsx("p", { className: twMerge('font-medium text-base', classNames.countdownTime), children: part.value }), _jsx("p", { className: "text-3xs", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex flex-col justify-center gap-1.5 px-1.5", children: [_jsx("span", { className: twMerge('h-1 w-1 rounded-full bg-bg-primary', classNames.countdownSeparator) }), _jsx("span", { className: twMerge('h-1 w-1 rounded-full bg-bg-primary', classNames.countdownSeparator) })] }))] }, part.label));
+                                                        }) }))] })] }), _jsx("div", { className: "text-left font-medium text-lg text-text-primary-900 lg:mt-4.5 lg:text-2xl", children: tournament.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:mb-5xl lg:text-4xl", children: formatNumber(tournamentReward, {
+                                            currency: localeInfo.currency.code,
+                                            minDecimalPlaces: 2,
+                                            maxDecimalPlaces: 2,
+                                        }) })] }) }), _jsxs("div", { className: "relative", children: [tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 flex w-full gap-4 rounded-lg bg-bg-primary p-4", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsx("div", { className: "absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: "1st" })] }), _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" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: maskFirstLast(tournament?.topPayouts[0]?.member?.name || '', {
+                                                            midLength: 4,
+                                                        }) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.topPayouts[0]?.amount, {
                                                             currency: localeInfo.currency.code,
                                                             minDecimalPlaces: 2,
                                                             maxDecimalPlaces: 2,
-                                                        }) })] }), _jsx("div", { className: "absolute right-0 bottom-[-60] z-1", children: _jsx(Image, { width: 72.94, height: 93, src: trophy, alt: "trophy", className: "size-full" }) })] }) }) }) }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 flex w-full gap-4 rounded-lg bg-bg-primary p-4", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsx("div", { className: "absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: "1st" })] }), _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" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: maskFirstLast(tournament?.topPayouts[0]?.member?.name || '') }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(tournament?.topPayouts[0]?.amount, {
-                                                    currency: localeInfo.currency.code,
-                                                    minDecimalPlaces: 2,
-                                                    maxDecimalPlaces: 2,
-                                                }) })] })] }) })) : (_jsxs("div", { className: "relative mt-4 flex w-full gap-4 rounded-lg bg-bg-primary p-4", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", 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" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }) }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("div", { className: "flex gap-2", children: _jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: tournament.currentLeaderboard.edges.length
-                                                ? 'Leaderboard'
-                                                : 'Starting soon!' }) }), _jsx(TournamentsListItemRules, {})] }), _jsx("div", { children: _jsx("div", { className: "overflow-hidden border-gray-200", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "h-8 bg-bg-secondary text-center font-medium text-text-tertiary-600 text-xs", children: [_jsx("th", { className: "w-[3.25rem]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length
-                                                    ? tournament.currentLeaderboard.edges.map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-center text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 w-[3.25rem] border-border-secondary 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 font-bold text-2xs', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: maskFirstLast(tournament.node.username) }), _jsxs("td", { className: "h-12 border-border-secondary border-t-2", children: [tournament.node.multiplier, "x"] }), i + 1 <= prizeAmountsByRank.length ? (_jsx("td", { className: "h-12 border-border-secondary border-t-2 text-brand-400", children: formatNumber(prizeAmountsByRank[i], {
+                                                        }) })] })] }) })) : (_jsxs("div", { className: "relative mt-4 flex w-fit gap-4 rounded-lg bg-bg-primary p-4", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", 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" }), "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("div", { className: "-right-0 absolute bottom-[30px] z-1 block lg:absolute", children: _jsx("div", { className: "h-[9.688rem] w-auto shrink-0", children: _jsx(Image, { width: 72.941, height: 93, src: trophy, alt: "trophy" }) }) })] }), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }) }), isDetailsVisible && (_jsxs("div", { className: "bg-bg-primary", 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: "font-semibold text-lg text-text-primary-900", children: "Leaderboard" }) }), _jsx(TournamentsListItemRules, {})] }), _jsx("div", { children: _jsx("div", { className: "overflow-hidden border-gray-200", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "h-8 bg-bg-secondary text-center font-medium text-text-tertiary-600 text-xs", children: [_jsx("th", { className: "w-[3.25rem]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length
+                                                    ? tournament.currentLeaderboard.edges.map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-center text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 w-[3.25rem] border-border-secondary 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 font-bold text-2xs', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: maskFirstLast(tournament.node.username, {
+                                                                    midLength: 4,
+                                                                }) }), _jsxs("td", { className: "h-12 border-border-secondary border-t-2", children: [tournament.node.multiplier, "x"] }), i + 1 <= prizeAmountsByRank.length ? (_jsx("td", { className: "h-12 border-border-secondary border-t-2 text-brand-400", children: formatNumber(prizeAmountsByRank[i], {
                                                                     currency: localeInfo.currency.code,
                                                                     minDecimalPlaces: 2,
                                                                     maxDecimalPlaces: 2,
                                                                 }) })) : (_jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }))] }, i)))
-                                                    : Array.from({ length: 5 }).map((_, i) => (_jsxs("tr", { className: "bg-bg-primary text-center text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 w-[3.25rem] border-border-secondary 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 font-bold text-2xs', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _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))) })] }) }) })] }), Boolean(filteredGameProviders.length) && (_jsx(TournamentsListItemGameProviders, { 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" })] }) }) })] }))] }));
+                                                    : Array.from({ length: 5 }).map((_, i) => (_jsxs("tr", { className: "bg-bg-primary text-center text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 w-[3.25rem] border-border-secondary 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 font-bold text-2xs', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _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))) })] }) }) })] }), Boolean(filteredGameProviders.length) && (_jsx(TournamentsListItemGameProviders, { gameProviders: filteredGameProviders })), _jsx("div", { className: "p-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" })] }) }) })] }))] }));
 }
 const starTierStyles = [
     {

package/dist/components/Tournaments/TournamentsList/useTournamentTimer.d.ts

@@ -0,0 +1,13 @@
+type Tournament = {
+    activationStartDateTime: string;
+    activationEndDateTime: string;
+};
+export declare function useTournamentTimer(tournament: Tournament): {
+    now: Date;
+    isLaunchStarts: boolean;
+    timeParts: {
+        label: string;
+        value: string;
+    }[];
+};
+export {};

package/dist/components/Tournaments/TournamentsList/useTournamentTimer.js

@@ -0,0 +1,45 @@
+import { intervalToDuration } from 'date-fns';
+import { useEffect, useMemo, useState } from 'react';
+export function useTournamentTimer(tournament) {
+    const now = useNow(1000);
+    const launchStartDate = useMemo(() => new Date(tournament.activationStartDateTime), [tournament.activationStartDateTime]);
+    const isLaunchStarts = useMemo(() => launchStartDate < now, [launchStartDate, now]);
+    const [timeRemaining, setTimeRemaining] = useState(intervalToDuration({
+        start: now,
+        end: isLaunchStarts
+            ? new Date(tournament.activationEndDateTime)
+            : launchStartDate,
+    }));
+    useEffect(() => {
+        setTimeRemaining(intervalToDuration({
+            start: now,
+            end: isLaunchStarts
+                ? new Date(tournament.activationEndDateTime)
+                : launchStartDate,
+        }));
+    }, [now, isLaunchStarts, launchStartDate, tournament.activationEndDateTime]);
+    const timeParts = useMemo(() => [
+        { label: 'Day', value: String(timeRemaining.days ?? 0).padStart(2, '0') },
+        {
+            label: 'Hour',
+            value: String(timeRemaining.hours ?? 0).padStart(2, '0'),
+        },
+        {
+            label: 'Min',
+            value: String(timeRemaining.minutes ?? 0).padStart(2, '0'),
+        },
+        {
+            label: 'Sec',
+            value: String(timeRemaining.seconds ?? 0).padStart(2, '0'),
+        },
+    ], [timeRemaining]);
+    return { now, isLaunchStarts, timeParts };
+}
+function useNow(intervalMs = 1000) {
+    const [now, setNow] = useState(new Date());
+    useEffect(() => {
+        const id = setInterval(() => setNow(new Date()), intervalMs);
+        return () => clearInterval(id);
+    }, [intervalMs]);
+    return now;
+}

package/dist/services/queries.d.ts

@@ -136,6 +136,6 @@ export declare const FACEBOOK_CLIENT_ID = "\n  query FacebookClientId {\n    fac
 export declare const REQUIRE_FIRST_DEPOSIT = "\n  query RequireFirstDeposit {\n    requireFirstDeposit\n  }\n";
 export declare const UNLINK_GOOGLE = "\n  mutation UnlinkGoogle($input: UnlinkGoogleInput!) {\n    unlinkGoogle(input: $input)\n  }\n";
 export declare const UNLINK_FACEBOOK = "\n  mutation UnlinkFacebook($input: UnlinkFacebookInput!) {\n    unlinkFacebook(input: $input)\n  }\n";
-export declare const TOURNAMENTS = "\n  query Tournaments(\n    $first: Int\n    $after: Cursor\n    $filter: TournamentFilterInput\n  ) {\n    tournaments(first: $first, after: $after, filter: $filter) {\n      totalCount\n      pageInfo {\n        hasNextPage\n        endCursor\n      }\n      edges {\n        node {\n          ... on MultiplierTournament {\n            id\n            type\n            name\n            winnersCount\n            status\n            description\n            activationStartDateTime\n            activationEndDateTime\n            topPayouts {\n              id\n              multiplier\n              amount\n              member {\n                id\n                name\n              }\n            }\n            currentLeaderboard {\n              totalCount\n              edges {\n                node {\n                  ... on TournamentLeaderboard {\n                    id\n                    username\n                    multiplier\n                    dateTimeCreated\n                  }\n                }\n              }\n            }\n            previousLeaderboard {\n              totalCount\n              edges {\n                node {\n                  ... on TournamentLeaderboard {\n                    id\n                    username\n                    multiplier\n                    dateTimeCreated\n                  }\n                }\n              }\n            }\n            enabledGameProviders\n            frequency\n            mode\n            mobileBanner {\n              id\n              url\n              mimeType\n            }\n            webBanner {\n              id\n              url\n              mimeType\n            }\n            rewardSettings\n          }\n        }\n      }\n    }\n  }\n";
+export declare const TOURNAMENTS = "\n  query Tournaments(\n    $first: Int\n    $after: Cursor\n    $filter: TournamentFilterInput\n  ) {\n    tournaments(first: $first, after: $after, filter: $filter) {\n      totalCount\n      pageInfo {\n        hasNextPage\n        endCursor\n      }\n      edges {\n        node {\n          ... on MultiplierTournament {\n            id\n            type\n            name\n            winnersCount\n            status\n            description\n            activationStartDateTime\n            activationEndDateTime\n            topPayouts {\n              id\n              multiplier\n              amount\n              member {\n                id\n                name\n              }\n            }\n            currentLeaderboard {\n              totalCount\n              edges {\n                node {\n                  ... on TournamentLeaderboard {\n                    id\n                    username\n                    multiplier\n                    dateTimeCreated\n                    prize\n                  }\n                }\n              }\n            }\n            previousLeaderboard {\n              totalCount\n              edges {\n                node {\n                  ... on TournamentLeaderboard {\n                    id\n                    username\n                    multiplier\n                    dateTimeCreated\n                    prize\n                  }\n                }\n              }\n            }\n            enabledGameProviders\n            frequency\n            mode\n            mobileBanner {\n              id\n              url\n              mimeType\n            }\n            webBanner {\n              id\n              url\n              mimeType\n            }\n            rewardSettings\n          }\n        }\n      }\n    }\n  }\n";
 export declare const TOURNAMENTS_COUNT = "\n  query TournamentsCount($filter: TournamentFilterInput) {\n    tournaments(filter: $filter) {\n      totalCount\n    }\n  }\n";
 export declare const GENERATE_SUMSUB_VERIFICATION_TOKEN = "\n  mutation GenerateSumsubVerificationToken {\n    generateSumsubVerificationToken\n  }\n";

package/dist/services/queries.js

@@ -3105,6 +3105,7 @@ export const TOURNAMENTS = /* GraphQL */ `
                     username
                     multiplier
                     dateTimeCreated
+                    prize
                   }
                 }
               }
@@ -3118,6 +3119,7 @@ export const TOURNAMENTS = /* GraphQL */ `
                     username
                     multiplier
                     dateTimeCreated
+                    prize
                   }
                 }
               }

package/dist/types/index.d.ts

@@ -906,6 +906,7 @@ export interface TournamentLeaderboard {
     username: string;
     multiplier: string;
     dateTimeCreated: string;
+    prize?: string;
 }
 export interface TournamentPayout {
     id: string;