@opexa/portal-components 0.0.27 → 0.0.28

package/dist/components/Tournaments/TournamentItemMobile.jsx

@@ -0,0 +1,242 @@
+'use client';
+import { pick } from 'lodash-es';
+import Image from 'next/image';
+import React, { useEffect, useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useLocaleInfo } from '../../client/hooks';
+import { Trophy01Icon } from '../../icons';
+import { ArrowNarrowDownIcon } from '../../icons/ArrowNarrowDownIcon';
+import { ArrowNarrowUpIcon } from '../../icons/ArrowNarrowUpIcon';
+import { Award01Icon } from '../../icons/Award01Icon';
+import { StarIcon } from '../../icons/StarIcon';
+import firstPlace from '../../images/first-place.png';
+import trophy from '../../images/trophy.png';
+import { Button } from '../../ui';
+import { formatNumber } from '../../utils';
+import { TournamentGameProviders } from './TournamentGameProviders';
+import { TournamentRules } from './TournamentRules';
+export function TournamentItemMobile({ jackpot }) {
+    const localeInfo = useLocaleInfo();
+    const [isDetailsVisible, setIsDetailsVisible] = useState(false);
+    const [timeRemaining, setTimeRemaining] = useState({
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+        isPast: false,
+    });
+    // Temp Date
+    const activationEndDateTime = useMemo(() => {
+        const now = new Date();
+        return new Date(now.setSeconds(now.getSeconds() + 2 * 24 * 60 * 60)); // Add 2 days in seconds
+    }, []);
+    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);
+    }, [activationEndDateTime, calculateRemainingTime]);
+    const timeParts = [
+        { label: 'Day', value: timeRemaining.days },
+        { label: 'Hour', value: timeRemaining.hours },
+        { label: 'Min', value: timeRemaining.minutes },
+        { label: 'Sec', value: timeRemaining.seconds },
+    ];
+    return (<div className="bg-bg-primary border-border-primary rounded-2xl border">
+      <div className={twMerge('bg-bg-tertiary relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5')}>
+        <div className="z-1 relative flex flex-1 flex-col">
+          <div className="flex h-full flex-col justify-between">
+            <div className="flex w-full justify-between">
+              <div className="flex w-full flex-col">
+                <div className="relative flex w-full justify-between">
+                  <div className="w-full">
+                    <div className="flex w-full justify-between">
+                      {/* Badge */}
+
+                      <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium">
+                        <Award01Icon className="text-utility-brand-500 size-3.5"/>
+                        Multiplier
+                      </div>
+
+                      {/* Time */}
+
+                      <div className="flex h-fit">
+                        {timeParts.map((part, idx) => (<React.Fragment key={part.label}>
+                            <div className={twMerge('bg-bg-primary text-text-primary-900 flex h-fit w-8 flex-col items-center rounded-[4px] pb-1.5')}>
+                              <span className="text-base font-medium">
+                                {String(part.value).padStart(2, '0')}
+                              </span>
+                              <span className="text-[8px]">{part.label}</span>
+                            </div>
+
+                            {idx < timeParts.length - 1 && (<div className="flex flex-col justify-center gap-[6px] px-[6px]">
+                                <div className="bg-bg-primary h-1 w-1 rounded-full"/>
+                                <div className="bg-bg-primary h-1 w-1 rounded-full"/>
+                              </div>)}
+                          </React.Fragment>))}
+                      </div>
+                    </div>
+
+                    <div className="text-text-primary-900 mt-2.5 text-left text-lg font-medium lg:mt-5 lg:text-2xl">
+                      {jackpot.name}
+                    </div>
+
+                    <div className="bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl">
+                      {formatNumber(jackpot.pool, {
+            currency: localeInfo.currency.code,
+            minDecimalPlaces: 2,
+            maxDecimalPlaces: 2,
+        })}
+                    </div>
+                  </div>
+                  <div className="z-1 absolute bottom-[-60] right-0">
+                    <Image width={72.94} height={93} src={trophy} alt="trophy" quality={100} className="size-full"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Top Payout */}
+
+          <div className="bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4 lg:hidden">
+            <div className="h-[87px] min-w-[66px]">
+              <Image width={66} height={87} src={firstPlace} alt="closeChest" className="size-full mix-blend-luminosity"/>
+            </div>
+
+            <div className="flex flex-col gap-1 text-left">
+              <div className="border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium">
+                <Trophy01Icon className="text-utility-brand-600 size-3.5"/>
+                Top Payout
+              </div>
+
+              <div className="font-semibold">No winners yet</div>
+              <div className="text-text-secondary-700 text-xs">
+                You could be the first to win the tournament!
+              </div>
+            </div>
+          </div>
+
+          <Button variant="outline" className={twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex')} onClick={() => setIsDetailsVisible(!isDetailsVisible)}>
+            <div className="flex gap-1.5">
+              See Details
+              <ArrowNarrowDownIcon className="size-5"/>
+            </div>
+          </Button>
+        </div>
+      </div>
+
+      {isDetailsVisible && (<div>
+          {/* Leaderboard */}
+
+          <div className="z-1 flex-1">
+            <div className="flex items-center justify-between p-3">
+              <div className="flex gap-2">
+                <div className="text-text-primary-900 text-lg font-semibold">
+                  Starting soon!
+                </div>
+              </div>
+              <TournamentRules jackpotRules="<strong>Rules and guidelines <br> 1/20/2025 ~ 1/21/2025</strong><br><br>
+                      <p>1. The contest prize pool closely depends on the bankroll — the more players bet, the bigger it grows.</p>"/>
+            </div>
+
+            <div>
+              <div className="border-gray-200 overflow-hidden">
+                <table className="w-full">
+                  <thead>
+                    <tr className="bg-bg-secondary text-text-tertiary-600 h-8 text-center text-xs font-medium">
+                      <th className="w-[52px]">#</th>
+                      <th>Player</th>
+                      <th>Multiplier</th>
+                      <th>Prize</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Array.from({ length: 5 }).map((_, i) => (<tr key={i} className="bg-bg-primary text-text-secondary-700 text-center text-sm">
+                        <td className="border-border-secondary h-12 w-[52px] border-t-2">
+                          {i + 1 < 6 ? (<div className="relative">
+                              <StarIcon className={twMerge('mx-auto size-6.5', starTierStyles[i].starColor)}/>
+                              <span className={twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor)}>
+                                {i + 1}
+                              </span>
+                            </div>) : ('-')}
+                        </td>
+                        <td className="border-border-secondary h-12 border-t-2">
+                          -
+                        </td>
+                        <td className="border-border-secondary h-12 border-t-2">
+                          -
+                        </td>
+                        <td className="border-border-secondary h-12 border-t-2">
+                          -
+                        </td>
+                      </tr>))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          {/* Game Providers */}
+
+          <TournamentGameProviders />
+
+          <div className="m-3">
+            <Button variant="outline" className={twMerge('px-3.5 py-2.5 text-sm', !isDetailsVisible ? 'hidden' : 'flex')} onClick={() => setIsDetailsVisible(!isDetailsVisible)}>
+              <div className="flex gap-1.5">
+                Hide
+                <ArrowNarrowUpIcon className="size-5"/>
+              </div>
+            </Button>
+          </div>
+        </div>)}
+    </div>);
+}
+const starTierStyles = [
+    {
+        starColor: 'text-yellow-400',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        starColor: 'text-utility-gray-700',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        starColor: 'text-yellow-700',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        starColor: 'text-bg-quaternary',
+        numberColor: 'text-text-primary-900',
+    },
+    {
+        starColor: 'text-bg-quaternary',
+        numberColor: 'text-text-primary-900',
+    },
+];

package/dist/components/Tournaments/TournamentRules.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export interface TournamentRulesProps {
     children?: ReactNode;
     jackpotRules: string;

package/dist/components/Tournaments/TournamentRules.jsx

@@ -0,0 +1,43 @@
+'use client';
+import { Portal } from '@ark-ui/react';
+import { XIcon } from '../../icons';
+import { Flag06Icon } from '../../icons/Flag06Icon';
+import { Dialog } from '../../ui';
+export function TournamentRules(props) {
+    return (<Dialog.Root lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false}>
+      <Dialog.Trigger asChild>
+        {props.children ?? (<button type="button" className="text-button-tertiary-fg flex text-sm font-semibold">
+            Tournament Rules
+          </button>)}
+      </Dialog.Trigger>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content className="bg-bg-primary-alt mx-auto h-full w-full items-start lg:h-auto lg:w-[640px] lg:rounded-xl">
+            <div className="p-3xl">
+              <div className="mb-3 flex justify-between">
+                <div className="bg-bg-tertiary border-border-primary flex h-12 w-12 items-center justify-center rounded-lg border">
+                  <Flag06Icon className="text-text-tertiary-600 size-full p-3"/>
+                </div>
+
+                <Dialog.CloseTrigger>
+                  <XIcon />
+                </Dialog.CloseTrigger>
+              </div>
+
+              <div className="text-text-primary-900 text-lg font-semibold">
+                Tournament Rules
+              </div>
+              <div className="text-text-tertiary-600 mt-1 text-sm">
+                Terms and Conditions
+              </div>
+            </div>
+
+            <div className="border-gray-800 border-t-1 pb-3">
+              <div dangerouslySetInnerHTML={{ __html: props.jackpotRules }} className="px-3xl py-3"/>
+            </div>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>);
+}

package/dist/components/Tournaments/Tournaments.jsx

@@ -0,0 +1,37 @@
+'use client';
+import { useJackpotsQuery } from '../../client/hooks';
+import { TournamentItem } from './TournamentItem';
+import { TournamentItemMobile } from './TournamentItemMobile';
+export function Tournaments(props) {
+    const jackpotsQuery = useJackpotsQuery({
+        first: 100,
+        filter: {
+            status: {
+                equal: 'ACTIVE',
+            },
+            deleted: {
+                equal: false,
+            },
+        },
+        sort: {
+            cursor: 'POOL',
+            order: 'DESC',
+        },
+    });
+    const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    if (jackpots.length <= 0)
+        return null;
+    return (<div className={props.className}>
+      <div className="mb-3 text-lg font-semibold lg:mb-4.5">
+        {props.heading ?? 'Tournaments'}
+      </div>
+
+      <div className="hidden flex-col gap-6 lg:flex">
+        {jackpots.map((jackpot) => (<TournamentItem key={jackpot.id} jackpot={jackpot}/>))}
+      </div>
+
+      <div className="flex flex-col gap-6 lg:hidden">
+        {jackpots.map((jackpot) => (<TournamentItemMobile key={jackpot.id} jackpot={jackpot}/>))}
+      </div>
+    </div>);
+}

package/dist/components/Tournaments/index.js

@@ -0,0 +1 @@
+export * from './Tournaments';

package/dist/components/TransactionRecords/DepositRecordsTable.jsx

@@ -0,0 +1,193 @@
+import { createListCollection, Portal } from '@ark-ui/react';
+import { tz, TZDateMini } from '@date-fns/tz';
+import {} from '@opexa/portal-sdk-core';
+import { endOfDay, format, startOfDay } from 'date-fns';
+import { useState } from 'react';
+import { useDepositRecordsQuery, useInfiniteQueryHelper, useLocaleInfo, } from '../../client/hooks';
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons';
+import { Badge, IconButton, Select, Table } from '../../ui';
+import { capitalize, formatNumber } from '../../utils';
+import { Empty } from '../Empty';
+import { TableFilters } from './TableFilters';
+export function DepositRecordsTable() {
+    const [timestamp, setTimestamp] = useState();
+    const [depositStatus, setDepositStatus] = useState();
+    const localeInfo = useLocaleInfo();
+    const { page, pageSize, hasNextPage, hasPrevPage, next, prev, rows, setPageSize, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useDepositRecordsQuery, {
+        filter: {
+            ...(depositStatus && {
+                status: {
+                    equal: depositStatus,
+                },
+            }),
+            ...(timestamp && {
+                dateTimeCreated: {
+                    ...(timestamp.start && {
+                        greaterThanOrEqual: new TZDateMini(startOfDay(timestamp.start), localeInfo.timezone).toISOString(),
+                    }),
+                    ...(timestamp.end && {
+                        lesserThanOrEqual: new TZDateMini(endOfDay(timestamp.end), localeInfo.timezone).toISOString(),
+                    }),
+                },
+            }),
+        },
+    });
+    return (<>
+      <TableFilters enabledFilters={{
+            depositStatus: true,
+        }} value={{
+            timestamp,
+            depositStatus,
+        }} onChange={(value) => {
+            firstPage();
+            setTimestamp(value.timestamp);
+            setDepositStatus(value.depositStatus);
+        }}/>
+
+      {rows.length <= 0 && (<Empty icon={loading ? SpinnerIcon : File02Icon} title={loading ? 'Just a moment' : 'No data'} message={loading
+                ? 'Fetching latest deposit records...'
+                : 'No data is currently available.'} className="mt-5xl"/>)}
+
+      {rows.length >= 1 && (<div className="border-border-primary -ml-4 mt-3xl w-dvw border-y lg:-ml-0 lg:w-full lg:rounded-xl lg:border-x">
+          <div className="border-border-primary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-xl rounded-b-none border-b">
+            <Table.Root className="border-0">
+              <Table.Header>
+                <Table.Row>
+                  <Table.Heading>Deposit No.</Table.Heading>
+                  <Table.Heading>Reference</Table.Heading>
+                  <Table.Heading>Deposit Method</Table.Heading>
+                  <Table.Heading>Applied Amount</Table.Heading>
+                  <Table.Heading>Recieved Amount</Table.Heading>
+                  <Table.Heading>Transaction Fee</Table.Heading>
+                  <Table.Heading>Deposit Time</Table.Heading>
+                  <Table.Heading>Recieved Time</Table.Heading>
+                  <Table.Heading>Status</Table.Heading>
+                </Table.Row>
+              </Table.Header>
+
+              <Table.Body>
+                {rows.map((data) => (<Table.Row key={data.id}>
+                    <Table.Cell className="!py-1">
+                      {data.depositNumber}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">{data.reference}</Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {capitalize(data.type, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                })}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {formatNumber(data.amount, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                })}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {formatNumber(data.netAmount, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                })}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {formatNumber(data.fee, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                })}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      <div className="leading-tight">
+                        {format(data.dateTimeCreated, 'MM/dd/yyyy', {
+                    in: tz(localeInfo.timezone),
+                })}
+                      </div>
+                      <div className="text-text-tertiary-600 leading-tight">
+                        {format(data.dateTimeCreated, 'hh:mm a', {
+                    in: tz(localeInfo.timezone),
+                })}
+                      </div>
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {(data.status === 'CONFIRMED' ||
+                    data.status === 'APPROVED') && (<>
+                          <div className="leading-tight">
+                            {format(data.dateTimeLastUpdated, 'MM/dd/yyyy', {
+                        in: tz(localeInfo.timezone),
+                    })}
+                          </div>
+                          <div className="text-text-tertiary-600 leading-tight">
+                            {format(data.dateTimeLastUpdated, 'hh:mm a', {
+                        in: tz(localeInfo.timezone),
+                    })}
+                          </div>
+                        </>)}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      <Badge.Root variant="subtle" colorScheme={data.status === 'FAILED' ||
+                    data.status === 'REJECTED' ||
+                    data.status === 'CANCELLED'
+                    ? 'danger'
+                    : data.status === 'PENDING'
+                        ? 'warning'
+                        : 'success'}>
+                        <Badge.Label>
+                          {capitalize(data.status, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                })}
+                        </Badge.Label>
+                      </Badge.Root>
+                    </Table.Cell>
+                  </Table.Row>))}
+              </Table.Body>
+            </Table.Root>
+          </div>
+
+          <div className="flex items-center gap-lg px-4 py-3">
+            <p className="text-text-secondary-700 order-2 grow text-center text-sm font-medium lg:order-none lg:grow-0">
+              Page {page} of {totalPages}
+            </p>
+            <div className="hidden grow lg:block"></div>
+            <Select.Root size="sm" value={[pageSize.toString()]} onValueChange={(details) => {
+                const n = parseInt(details.value[0]);
+                const v = isNaN(n) ? 10 : n;
+                setPageSize(v);
+            }} collection={pageSizeCollection} lazyMount className="hidden lg:block" positioning={{
+                sameWidth: true,
+            }}>
+              <Select.Trigger>
+                <Select.ValueText />
+                <Select.Indicator asChild>
+                  <ChevronDownIcon />
+                </Select.Indicator>
+                <Portal>
+                  <Select.Positioner>
+                    <Select.Content>
+                      {pageSizeCollection.items.map((item) => (<Select.Item key={item} item={item}>
+                          <Select.ItemText>
+                            {pageSizeCollection.stringifyItem(item)}
+                          </Select.ItemText>
+                          <Select.ItemIndicator asChild>
+                            <CheckIcon />
+                          </Select.ItemIndicator>
+                        </Select.Item>))}
+                    </Select.Content>
+                  </Select.Positioner>
+                </Portal>
+              </Select.Trigger>
+            </Select.Root>
+            <div className="contents lg:flex">
+              <IconButton size="sm" variant="outline" colorScheme="gray" className="order-1 lg:order-none lg:rounded-r-none lg:border-r-0" disabled={!hasPrevPage || loading} onClick={() => prev()}>
+                <ChevronLeftIcon className="size-5"/>
+              </IconButton>
+              <IconButton size="sm" variant="outline" colorScheme="gray" className="order-3 lg:order-none lg:rounded-l-none" disabled={!hasNextPage || loading} onClick={() => next()}>
+                <ChevronRightIcon className="size-5"/>
+              </IconButton>
+            </div>
+          </div>
+        </div>)}
+    </>);
+}
+const pageSizeCollection = createListCollection({
+    items: useInfiniteQueryHelper.config.pageSizes,
+    itemToValue: (item) => item.toString(),
+    itemToString: (item) => `${item} items per page`,
+});

package/dist/components/TransactionRecords/TableFilters.d.ts

@@ -1,5 +1,5 @@
-import { DepositStatus, GameProvider, GameType, TransactionType, WithdrawalStatus } from '@opexa/portal-sdk-core';
-import { DateRange } from '../../types';
+import type { DepositStatus, GameProvider, GameType, TransactionType, WithdrawalStatus } from '@opexa/portal-sdk-core';
+import type { DateRange } from '../../types';
 interface EnabledFilters {
     timestamp?: boolean;
     gameType?: boolean;