@opexa/portal-components 0.0.29 → 0.0.31

package/dist/components/SignUp/SignUp.jsx

@@ -1,32 +0,0 @@
-'use client';
-import { Portal } from '@ark-ui/react';
-import Image, {} from 'next/image';
-import { Suspense } from 'react';
-import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
-import { XIcon } from '../../icons/index.js';
-import { Dialog } from '../../ui/index.js';
-import { SignUpForm } from './SignUpForm';
-export function SignUp(props) {
-    const signUpStore = useGlobalStore(useShallow((popups) => popups.signUp));
-    return (<Dialog.Root open={signUpStore.open} onOpenChange={(details) => {
-            signUpStore.setOpen(details.open);
-        }} lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false}>
-      <Portal>
-        <Dialog.Backdrop />
-        <Dialog.Positioner>
-          <Dialog.Content className="bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl">
-            <Dialog.CloseTrigger>
-              <XIcon />
-            </Dialog.CloseTrigger>
-
-            <Image src={props.logo} alt="" width={200} height={100} className="mx-auto h-auto w-[120px]" draggable={false}/>
-
-            <Suspense>
-              <SignUpForm />
-            </Suspense>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
-    </Dialog.Root>);
-}

package/dist/components/SignUp/SignUpForm.jsx

@@ -1,230 +0,0 @@
-'use client';
-import { useDialogContext } from '@ark-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { ObjectId, ObjectType } from '@opexa/portal-sdk-core/object-id';
-import { useSearchParams } from 'next/navigation';
-import { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCooldown, useGlobalStore, useLocaleInfo, useMobileNumberParser, useSendVerificationCodeMutation, useSignInMutation, useSignUpMutation, } from '../../client/hooks/index.js';
-import { toaster } from '../../client/utils/index.js';
-import { ArrowLeftIcon, CheckIcon } from '../../icons/index.js';
-import { Button, Checkbox, Field, PinInput } from '../../ui/index.js';
-export function SignUpForm() {
-    const [step, setStep] = useState(1);
-    const dialog = useDialogContext();
-    const search = useSearchParams();
-    const signInStore = useGlobalStore(useShallow((popups) => popups.signIn));
-    const signUpMutation = useSignUpMutation();
-    const signInMutation = useSignInMutation();
-    const sendVerificationCodeMutation = useSendVerificationCodeMutation();
-    const localeInfo = useLocaleInfo();
-    const mobileNumberParser = useMobileNumberParser();
-    const Step1Definition = z.object({
-        mobileNumber: z.string().superRefine((v, ctx) => {
-            if (!mobileNumberParser.validate(v)) {
-                ctx.addIssue({
-                    code: z.ZodIssueCode.custom,
-                    message: 'Invalid mobile number',
-                });
-            }
-        }),
-        termsAccepted: z.boolean().superRefine((v, ctx) => {
-            if (!v) {
-                ctx.addIssue({
-                    code: z.ZodIssueCode.custom,
-                    message: 'You must accept the terms and conditions',
-                });
-            }
-        }),
-    });
-    const Step2Definition = z.object({
-        verificationCode: z.array(z.string().min(1).max(1).trim()).min(6).max(6),
-    });
-    const step1Form = useForm({
-        resolver: zodResolver(Step1Definition),
-        defaultValues: {
-            mobileNumber: '',
-            termsAccepted: false,
-        },
-    });
-    const step2Form = useForm({
-        resolver: zodResolver(Step2Definition),
-        defaultValues: {
-            verificationCode: Array.from({ length: 6 }).fill(''),
-        },
-    });
-    const cooldown = useCooldown({
-        max: 60,
-        duration: 1000 * 60,
-    });
-    return (<>
-      {step === 1 && (<>
-          <h2 className="mt-xl text-center text-lg font-semibold">
-            Create an account
-          </h2>
-          <p className="text-text-secondary-700 mt-xs text-center text-sm">
-            Register instantly and start playing!
-          </p>
-
-          <form className="mt-3xl" onSubmit={step1Form.handleSubmit(async (data) => {
-                try {
-                    await sendVerificationCodeMutation.mutateAsync({
-                        channel: 'SMS',
-                        recipient: mobileNumberParser.format(data.mobileNumber),
-                    });
-                    setStep(2);
-                    cooldown.start();
-                }
-                catch (e) {
-                    toaster.error({
-                        description: e instanceof Error
-                            ? e.message
-                            : 'Failed to send verification code',
-                    });
-                }
-            })}>
-            <Field.Root invalid={!!step1Form.formState.errors.mobileNumber}>
-              <Field.Label>Mobile Number</Field.Label>
-              <div className="relative">
-                <localeInfo.country.flag className="absolute left-3.5 top-1/2 size-5 shrink-0 -translate-y-1/2"/>
-                <Field.Input className="pl-11" placeholder={`${localeInfo.mobileNumber.areaCode}${localeInfo.mobileNumber.example}`} {...step1Form.register('mobileNumber')}/>
-              </div>
-              <Field.ErrorText>
-                {step1Form.formState.errors.mobileNumber?.message}
-              </Field.ErrorText>
-            </Field.Root>
-
-            <Button type="submit" className="mt-3xl" disabled={step1Form.formState.isSubmitting}>
-              Create Account
-            </Button>
-
-            <Controller control={step1Form.control} name="termsAccepted" render={(o) => (<Checkbox.Root className="mt-xl" invalid={o.fieldState.invalid} checked={o.field.value} onCheckedChange={(details) => {
-                    o.field.onChange(details.checked);
-                }}>
-                  <Checkbox.Control>
-                    <Checkbox.Indicator asChild>
-                      <CheckIcon />
-                    </Checkbox.Indicator>
-                  </Checkbox.Control>
-                  <Checkbox.Label>
-                    I am at least 21 years of age and I accept the{' '}
-                    <span className="text-brand-400 whitespace-nowrap underline underline-offset-2">
-                      Terms and Conditions.
-                    </span>
-                  </Checkbox.Label>
-                  <Checkbox.HiddenInput />
-                </Checkbox.Root>)}/>
-          </form>
-
-          <div className="mt-6 flex w-full items-center justify-center gap-xs text-sm">
-            <span className="text-text-tertiary-600">
-              Don&apos;t have an account?
-            </span>
-            <button type="submit" className="text-button-tertiary-fg font-semibold" onClick={() => {
-                dialog.setOpen(false);
-                signInStore.setOpen(true);
-            }}>
-              Log In
-            </button>
-          </div>
-        </>)}
-
-      {step === 2 && (<>
-          <h2 className="mt-xl text-center text-lg font-semibold">
-            Check your Phone
-          </h2>
-          <p className="text-text-secondary-700 mt-xs text-center text-sm">
-            We&rsquo;ve sent a verification code to your mobile number{' '}
-            <span className="font-semibold">
-              {mobileNumberParser.format(step1Form.getValues('mobileNumber'))}
-            </span>{' '}
-            via text
-          </p>
-
-          <form className="mt-5" onSubmit={step2Form.handleSubmit(async ({ verificationCode }) => {
-                const id = ObjectId.generate(ObjectType.MemberAccount).toString();
-                const { mobileNumber } = step1Form.getValues();
-                try {
-                    await signUpMutation.mutateAsync({
-                        id,
-                        mobileNumber: mobileNumberParser.format(mobileNumber),
-                        verificationCode: verificationCode.join(''),
-                        referralCode: search.get('referralCode') ?? undefined,
-                        domain: search.get('domain') ?? undefined,
-                        btag: search.get('btag') ?? undefined,
-                    });
-                    const name = mobileNumberParser.format(mobileNumber);
-                    const password = `${name}${id}`;
-                    try {
-                        await signInMutation.mutateAsync({
-                            type: 'NAME_AND_PASSWORD',
-                            name: mobileNumberParser.format(mobileNumber),
-                            password,
-                        });
-                    }
-                    catch {
-                        signInStore.setOpen(true);
-                    }
-                    dialog.setOpen(false);
-                    step1Form.reset();
-                    step2Form.reset();
-                    setStep(1);
-                }
-                catch {
-                    toaster.error({
-                        title: 'Invalid Verification Code',
-                    });
-                }
-            })}>
-            <Controller name="verificationCode" control={step2Form.control} render={(o) => (<PinInput.Root placeholder="0" invalid={o.fieldState.invalid} value={o.field.value} onValueChange={(details) => {
-                    o.field.onChange(details.value);
-                }}>
-                  <PinInput.Control className="grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md">
-                    <PinInput.Input index={0}/>
-                    <PinInput.Input index={1}/>
-                    <PinInput.Input index={2}/>
-                    <span className="text-text-placeholder-subtle text-2xl font-medium">
-                      –
-                    </span>
-                    <PinInput.Input index={3}/>
-                    <PinInput.Input index={4}/>
-                    <PinInput.Input index={5}/>
-                  </PinInput.Control>
-                  <PinInput.HiddenInput />
-                </PinInput.Root>)}/>
-
-            <Button type="submit" className="mt-4xl" disabled={step2Form.formState.isSubmitting}>
-              Verify
-            </Button>
-
-            <div className="mt-3 flex w-full items-center justify-center gap-xs text-sm">
-              <span className="text-text-secondary-700">
-                Didn&apos;t recieve the code?
-              </span>
-              <button type="button" className="text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75" disabled={cooldown.cooling} onClick={async () => {
-                await sendVerificationCodeMutation.mutateAsync({
-                    channel: 'SMS',
-                    recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
-                });
-                cooldown.start();
-            }}>
-                {cooldown.cooling
-                ? `Resend in ${cooldown.countdown}s`
-                : 'Resend'}
-              </button>
-            </div>
-
-            <button type="button" className="text-text-tertiary-600 mx-auto mt-3xl flex w-fit items-center gap-1 text-sm font-semibold" onClick={() => {
-                setStep(1);
-                step2Form.reset();
-                cooldown.stop();
-            }}>
-              <ArrowLeftIcon className="size-5"/>
-              Back
-            </button>
-          </form>
-        </>)}
-    </>);
-}

package/dist/components/TopWins/TopWins.client.jsx

@@ -1,48 +0,0 @@
-'use client';
-import useEmblaCarousel from 'embla-carousel-react';
-import Image from 'next/image';
-import { useLocaleInfo, useTopWinsQuery } from '../../client/hooks/index.js';
-import { formatNumber, getGameImageUrl } from '../../utils/index.js';
-export function TopWins__client(props) {
-    const localeInfo = useLocaleInfo();
-    const topWinsQuery = useTopWinsQuery();
-    const topWins = topWinsQuery.data ?? [];
-    const [emblaRef] = useEmblaCarousel({
-        align: 'start',
-        slidesToScroll: 1,
-    });
-    if (!topWins?.length)
-        return null;
-    return (<div className={props.className}>
-      <div className="mb-3 text-lg font-semibold md:mb-4">
-        {props.heading ?? 'Recent Big Wins'}
-      </div>
-
-      <div ref={emblaRef} className="relative lg:overflow-hidden">
-        <div className="flex gap-sm lg:gap-md">
-          {topWins.map((topWin) => (<div key={topWin.id} className="bg-bg-tertiary border-border-primary flex w-[calc((100%-(0.375rem*2))/3)] shrink-0 flex-col space-y-2 rounded-sm border p-2 text-center lg:w-[calc((100%-(0.5rem*5))/6)] xl:w-[calc((100%-(0.5rem*9))/10)]">
-              <div className="mx-auto aspect-square w-full">
-                {topWin.game && (<Image width={100} height={100} src={getGameImageUrl(topWin.game)} alt="" className="size-full rounded-sm object-cover"/>)}
-              </div>
-
-              <div className="space-y-0.5">
-                <div className="text-text-secondary-700 text-xs">
-                  {topWin.member.name}
-                </div>
-                <div className="text-text-primary-brand text-sm font-semibold">
-                  {formatNumber(topWin.payout, {
-                currency: localeInfo.currency.code,
-                minDecimalPlaces: 2,
-            })}
-                </div>
-                <div className="text-text-secondary-700 text-xs">
-                  {formatNumber(topWin.multiplier, {
-                minDecimalPlaces: 2,
-            })}
-                </div>
-              </div>
-            </div>))}
-        </div>
-      </div>
-    </div>);
-}

package/dist/components/TopWins/TopWins.jsx

@@ -1,6 +0,0 @@
-import { prefetchTopWinsQuery } from '../../server/utils/index.js';
-import { TopWins__client } from './TopWins.client';
-export async function TopWins(props) {
-    await prefetchTopWinsQuery();
-    return <TopWins__client {...props}/>;
-}

package/dist/components/TournamentCounter/TournamentCounterItem.jsx

@@ -1,233 +0,0 @@
-'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/index.js';
-import { ChevronRightIcon, Trophy01Icon } from '../../icons/index.js';
-import { Award01Icon } from '../../icons/Award01Icon';
-import { StarIcon } from '../../icons/StarIcon';
-import firstPlace from '../../images/first-place.png';
-import trophyTwo from '../../images/trophy-two.png';
-import trophy from '../../images/trophy.png';
-import Link from 'next/link';
-import { formatNumber } from '../../utils/index.js';
-import styles from '../JackpotCounter/JackpotCounterItem.module.css';
-export function TournamentCounterItem({ jackpot, className, viewAllUrl, }) {
-    const localeInfo = useLocaleInfo();
-    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={twMerge('bg-bg-tertiary border-border-primary relative flex shrink-0 rounded-2xl border p-3 text-center lg:gap-6 lg:p-5', className)}>
-      <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="flex justify-between">
-                    <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 className="text-text-primary-900 mt-4 block text-left text-base lg:hidden">
-                        Play and Win!
-                      </div>
-                    </div>
-
-                    {/* Mobile Trophy Icon */}
-
-                    <div className="flex items-end lg:hidden">
-                      <Image src={trophy} alt="trophy" quality={100} width={155} height={155} className="h-23 w-auto"/>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Desktop Trophy Icon */}
-
-                <div className="z-1 absolute -bottom-16 right-0 hidden lg:block">
-                  <Image quality={100} width={155} height={155} src={trophy} alt="trophy" className="px-6 py-2.5"/>
-                </div>
-              </div>
-
-              {/* Top Payout */}
-
-              <div className="bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex">
-                <Image width={66} height={87} src={firstPlace} alt="closeChest" className="size-full h-auto w-[66px] mix-blend-luminosity"/>
-
-                <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>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Leaderboard */}
-
-      <div className="z-1 hidden flex-1 space-y-4 lg:block">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Image width={24} height={24} src={trophyTwo} quality={100} alt="leaderboardIcon" className="size-full w-6"/>
-            <div className="text-text-primary-900 text-lg font-semibold">
-              Starting soon!
-            </div>
-          </div>
-          <Link className="text-button-tertiary-fg flex text-sm font-semibold" href={viewAllUrl ?? '/tournaments'}>
-            See details
-            <ChevronRightIcon className="size-5"/>
-          </Link>
-        </div>
-
-        <div className={twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea'])}>
-          <div className="border-gray-200 overflow-hidden rounded-xl">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium">
-                  <th className="w-[52px]">#</th>
-                  <th>Player</th>
-                  <th>Multiplier</th>
-                  <th>Prize</th>
-                </tr>
-              </thead>
-              <tbody>
-                {Array.from({ length: 10 }).map((_, i) => (<tr key={i} className="bg-bg-primary text-text-secondary-700 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>
-    </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',
-    },
-];