@opexa/portal-components 0.0.938 → 0.0.940

package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositForm.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import Link from 'next/link';
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
+import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
+import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
+import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { parseDecimal } from '../../../../utils/parseDecimal.js';
+import { AmountChoices } from '../../AmountChoices.js';
+import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
+import { AvailablePromos } from '../AvailablePromos.js';
+import { useQRPHDepositContext } from './QRPHDepositContext.js';
+export function QRPHDepositForm() {
+    const depositWithdrawalProps = useDepositWithdrawalPropsContext();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const context = useQRPHDepositContext();
+    const depositsCountQuery = useDepositsCountQuery();
+    const depositsCount = depositsCountQuery.data ?? 0;
+    const paymentSettingsQuery = usePaymentSettingsQuery();
+    const paymentSettings = paymentSettingsQuery.data;
+    const gatewaySettings = paymentSettings?.qrphDepositGatewaySettings;
+    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
+    const minimumAmount = depositsCount <= 0
+        ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
+        : parseDecimal(gatewaySettings?.minimumAmount, 0);
+    const promosQuery = useAvailablePromosQuery();
+    const promos = promosQuery.data ?? [];
+    const definition = z
+        .object({
+        amount: z.string().superRefine((val, ctx) => {
+            const n = parseDecimal(val, 0);
+            if (val.includes('.')) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'Amount must be a whole number',
+                });
+                return;
+            }
+            if (n < minimumAmount) {
+                ctx.addIssue({
+                    type: 'number',
+                    code: z.ZodIssueCode.too_small,
+                    inclusive: true,
+                    minimum: minimumAmount,
+                    message: `Please enter ${minimumAmount.toLocaleString()} or more to proceed with your deposit.`,
+                });
+            }
+            if (n > maximumAmount) {
+                ctx.addIssue({
+                    type: 'number',
+                    code: z.ZodIssueCode.too_big,
+                    inclusive: true,
+                    maximum: maximumAmount,
+                    message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
+                });
+            }
+        }),
+        promo: z.string().optional().nullable(),
+    })
+        .superRefine((value, ctx) => {
+        const promo = promos.find((o) => o.id === value.promo);
+        const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
+        const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
+        const amount = parseDecimal(value.amount, 0);
+        if (promo && amount < promoMinAmount) {
+            ctx.addIssue({
+                path: ['amount'],
+                code: z.ZodIssueCode.custom,
+                message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
+            });
+        }
+        if (promo && amount > promoMaxAmount) {
+            ctx.addIssue({
+                path: ['amount'],
+                code: z.ZodIssueCode.custom,
+                message: `Maximum amount for this promo is ${promoMaxAmount}`,
+            });
+        }
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(definition),
+        defaultValues: {
+            amount: '0',
+            promo: globalStore.depositWithdrawal.promo ?? null,
+        },
+    });
+    useEffect(() => {
+        if (minimumAmount) {
+            form.reset({
+                amount: minimumAmount.toString(),
+                promo: form.getValues('promo') ?? null,
+            });
+        }
+    }, [form, minimumAmount]);
+    if (context.view !== 'form')
+        return null;
+    return (_jsxs("form", { onSubmit: form.handleSubmit(context.generateQRCode), noValidate: true, children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Enter the amount you want to deposit" }), _jsx(Field.Input, { type: "number", ...form.register('amount') }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
+                    form.setValue('amount', value.toString(), {
+                        shouldTouch: true,
+                        shouldDirty: true,
+                        shouldValidate: true,
+                    });
+                }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
+                        o.field.onChange(value);
+                        globalStore.depositWithdrawal.setPromo(null);
+                    }, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", children: "Deposit" }), depositWithdrawalProps.hasPrivacyPolicyAndTermsOfUse && (_jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["By depositing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }))] }));
+}

package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHQRCode.d.ts

@@ -0,0 +1,3 @@
+export declare function QRPHQRCode(props: {
+    qrCodeString: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHQRCode.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
+import { Directory, Filesystem } from '@capacitor/filesystem';
+import Image from 'next/image';
+import { toaster } from '../../../../client/utils/toaster.js';
+import qrphIcon from '../../../../images/qrph-icon.png';
+import { QrCode } from '../../../../ui/QrCode/index.js';
+export function QRPHQRCode(props) {
+    async function handleNativeDownload() {
+        const QRCode = await import('qrcode');
+        const dataUrl = await QRCode.toDataURL(props.qrCodeString, {
+            type: 'image/png',
+            color: {
+                light: '#FFFFFF',
+                dark: '#000000',
+            },
+        });
+        const base64 = dataUrl.split(',')[1];
+        try {
+            await Filesystem.writeFile({
+                path: `qrcode-${Date.now()}.png`,
+                data: base64,
+                directory: Directory.Documents,
+            });
+            toaster.success({
+                title: 'QR Code successfully saved to your device',
+                description: 'To continue with your deposit, please upload the QR code in your banking app.',
+            });
+        }
+        catch (error) {
+            console.log(error, 'error');
+            toaster.error({
+                title: 'Failed to save QR Code',
+                description: 'An error occurred while saving the QR code to your device.',
+            });
+        }
+    }
+    async function handleWebDownload() {
+        try {
+            const QRCode = await import('qrcode');
+            const dataUrl = await QRCode.toDataURL(props.qrCodeString, {
+                type: 'image/png',
+                color: {
+                    light: '#FFFFFF',
+                    dark: '#000000',
+                },
+            });
+            const link = document.createElement('a');
+            link.href = dataUrl;
+            link.download = `qrcode-${Date.now()}.png`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            toaster.success({
+                title: 'QR Code successfully saved to your device',
+                description: 'To continue with your deposit, please upload the QR code in your banking app.',
+            });
+        }
+        catch (error) {
+            console.log(error, 'error');
+            toaster.error({
+                title: 'Failed to save QR Code',
+                description: 'An error occurred while saving the QR code to your device.',
+            });
+        }
+    }
+    return (_jsxs(QrCode.Root, { value: props.qrCodeString, className: "mx-auto mt-6 w-[12.5rem] rounded-lg border border-border-primary bg-bg-brand-secondary-alt p-5 lg:w-[13rem] lg:p-6", children: [_jsxs("div", { className: "relative", children: [_jsx(QrCode.Frame, { className: "mx-auto size-[10rem] rounded-[0.25rem] border border-border-primary bg-white", children: _jsx(QrCode.Pattern, {}) }), _jsx(QrCode.Overlay, { className: "bg-white p-0.5", children: _jsx(Image, { src: qrphIcon, alt: "", className: "size-8", width: 40, height: 40 }) })] }), Capacitor.isNativePlatform() ? (_jsx("button", { type: "button", onClick: handleNativeDownload, className: "mt-5 block w-full text-center font-semibold text-sm text-text-secondary-700", children: "Download QR Code to Device" })) : (_jsx("button", { type: "button", onClick: handleWebDownload, className: "mt-5 block w-full text-center font-semibold text-sm text-text-secondary-700", children: "Download QR Code" }))] }));
+}

package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/useQRPHDeposit.d.ts

@@ -0,0 +1,13 @@
+import type { Deposit } from '../../../../types';
+export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
+export declare function useQRPHDeposit(): {
+    view: "form" | "qrCode";
+    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    verify: () => void;
+    reset: () => void;
+    deposit: Deposit | null;
+    generateQRCode: (input: {
+        amount: string;
+        promo?: string | null;
+    }) => void;
+};

package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/useQRPHDeposit.js

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react';
+import invariant from 'tiny-invariant';
+import { useShallow } from 'zustand/shallow';
+import { useCreateQRPHDepositMutation } from '../../../../client/hooks/useCreateQRPHDepositMutation.js';
+import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
+import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
+import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
+import { getQueryClient } from '../../../../utils/getQueryClient.js';
+import { getDepositsCountQueryKey } from '../../../../utils/queryKeys.js';
+export function useQRPHDeposit() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kycVerificationStatus: ctx.kycVerificationStatus,
+    })));
+    const [deposit, setDeposit] = useState(null);
+    const verificationQuery = useMemberVerificationQuery();
+    const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
+    const [status, setStatus] = useState('waiting');
+    const view = status === 'verification-failed' ||
+        status === 'verification-waiting' ||
+        status === 'verification-success' ||
+        status === 'verification-processing'
+        ? 'qrCode'
+        : 'form';
+    const mutation = useCreateQRPHDepositMutation({
+        onMutate() {
+            setStatus('processing');
+        },
+        onSuccess(data) {
+            const queryClient = getQueryClient();
+            invariant(data.qrCode);
+            setStatus('verification-waiting');
+            queryClient.invalidateQueries({ queryKey: getDepositsCountQueryKey() });
+            setDeposit(data);
+        },
+        onError() {
+            setStatus('failed');
+        },
+    });
+    const generateQRCode = (input) => {
+        //handle new kyc process
+        if (verificationStatus === 'PENDING' ||
+            verificationStatus === 'UNVERIFIED' ||
+            verificationStatus === 'REJECTED' ||
+            verificationStatus === 'CREATED') {
+            globalStore.kycVerificationStatus.setOpen(true);
+            return;
+        }
+        else {
+            mutation.mutate({
+                amount: input.amount,
+                promo: input.promo ?? undefined,
+            });
+        }
+    };
+    const query = useDepositQuery(deposit?.id, {
+        enabled: !!deposit,
+        refetchInterval: 5000,
+    });
+    useEffect(() => {
+        if (query.data?.status === 'APPROVED' ||
+            query.data?.status === 'CONFIRMED') {
+            setStatus('verification-success');
+        }
+        if (query.data?.status === 'CANCELLED' ||
+            query.data?.status === 'REJECTED' ||
+            query.data?.status === 'FAILED') {
+            setStatus('verification-failed');
+        }
+    }, [query.data?.status]);
+    const reset = () => {
+        setDeposit(null);
+        setStatus('waiting');
+    };
+    const verify = () => {
+        setStatus('verification-processing');
+    };
+    return {
+        view,
+        status,
+        verify,
+        reset,
+        deposit,
+        generateQRCode,
+    };
+}

package/dist/components/DepositWithdrawal/Withdrawal/Withdrawal.js

@@ -141,12 +141,16 @@ export function Withdrawal() {
     if (parseDecimal(wallet?.balance, 0) < 1) {
         return _jsx(InsufficientBalance, {});
     }
-    if ((!memberVerification ||
-        memberVerification.status === 'REJECTED' ||
-        memberVerification.status === 'UNVERIFIED') &&
-        !allowUnverifiedAccounts) {
+    if (!memberVerification ||
+        (memberVerification.status !== 'APPROVED' &&
+            memberVerification.status !== 'VERIFIED' &&
+            memberVerification.status !== 'PENDING') ||
+        allowUnverifiedAccounts) {
         return _jsx(AccountVerificationRequired, {});
     }
+    if (memberVerification.status === 'PENDING') {
+        return _jsx(AccountVerificationPending, {});
+    }
     if (enabledPaymentMethods.length <= 0) {
         return _jsx(NoAvailablePaymentMethods, {});
     }
@@ -162,6 +166,9 @@ function AccountVerificationRequired() {
                     globalStore.depositWithdrawal.setOpen(false);
                 }, children: "Verify Now" })] }));
 }
+function AccountVerificationPending() {
+    return (_jsxs("div", { className: "pt-xl", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-warning-secondary", children: _jsx(AlertCircleIcon, { className: "size-6 text-text-featured-icon-light-warning" }) }), _jsx("h2", { className: "mt-lg text-center font-semibold text-lg", children: "Verification Pending" }), _jsx("p", { className: "mx-auto mt-xs max-w-[25rem] text-center text-sm text-text-tertiary-600", children: "Your personal verification is currently under review. You will be able to withdraw funds once your account is approved." })] }));
+}
 function InsufficientBalance() {
     const setTab = useGlobalStore(useShallow((ctx) => ctx.depositWithdrawal.setTab));
     return (_jsxs("div", { className: "pt-xl", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-warning-secondary", children: _jsx(AlertCircleIcon, { className: "size-6 text-text-featured-icon-light-warning" }) }), _jsx("h2", { className: "mt-lg text-center font-semibold text-lg", children: "Balance is very low" }), _jsx("p", { className: "mx-auto mt-xs max-w-[25rem] text-center text-sm text-text-tertiary-600", children: "No funds available for withdrawal. Please make a deposit." }), _jsx(Button, { className: "mt-3xl", onClick: () => setTab('DEPOSIT'), children: "Deposit" })] }));

package/dist/components/DigitainLauncher/Loading.d.ts

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

package/dist/components/DigitainLauncher/Loading.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Loading() {
+    return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-blue-500 border-t-transparent" }), _jsx("p", { className: "font-medium text-gray-700 text-lg", children: "Loading Sports Book\u2026" })] }) }));
+}

package/dist/components/Disclaimer/DisclaimerV2.js

@@ -7,6 +7,7 @@ import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
 import { getSession } from '../../client/services/getSession.js';
 import { BIOMETRIC_STORAGE_KEY } from '../../client/utils/biometric.js';
@@ -33,6 +34,8 @@ export function DisclaimerV2(props) {
         termsOfUse: ctx.termsOfUse,
         responsibleGaming: ctx.responsibleGaming,
     })));
+    const sessionQuery = useSessionQuery();
+    const isAuthenticated = sessionQuery.data?.status === 'authenticated';
     const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
     const [showWarning, setShowWarning] = useState(false);
     const signOutMutation = useSignOutMutation({
@@ -84,11 +87,19 @@ export function DisclaimerV2(props) {
                                                 disclaimer.close();
                                             }
                                         }, variant: "outline", children: "Exit" }), _jsx(Button, { type: "button", onClick: () => {
+                                            if (sessionQuery.data?.status === 'authenticated') {
+                                                disclaimer.setOpen(true);
+                                            }
                                             if (!checked) {
                                                 setShowWarning(true);
                                                 setTimeout(() => setShowWarning(false), 4000);
                                                 return;
                                             }
+                                            //new flow
+                                            if (isAuthenticated) {
+                                                globalStore.termsOfUse.setNext(null);
+                                                globalStore.termsOfUse.setOpen(true);
+                                            }
                                             disclaimer.close();
                                         }, children: "I Accept" })] })] }) })] }) }));
 }

package/dist/components/Disclaimer/DisclaimerV3.js

@@ -7,6 +7,7 @@ import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
 import pagcorLogo from '../../images/pagcor2.png';
@@ -25,6 +26,8 @@ export function DisclaimerV3(props) {
         responsibleGaming: ctx.responsibleGaming,
         onboarding: ctx.onboarding,
     })));
+    const sessionQuery = useSessionQuery();
+    const isAuthenticated = sessionQuery.data?.status === 'authenticated';
     const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
     const [showWarning, setShowWarning] = useState(false);
     return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { "aria-label": `${props.siteName} Player Disclaimer`, "aria-labelledby": "disclaimer-title", "aria-describedby": "disclaimer-description", className: twMerge('flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start overflow-y-auto scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent p-3xl lg:mx-auto lg:h-auto lg:max-h-[85vh] lg:w-[500px] lg:rounded-xl'), children: [_jsx("div", { className: "mx-auto h-auto max-w-[120px]", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "h-full w-full object-cover", draggable: false, unoptimized: true }) }), _jsxs("div", { className: "my-4 grid w-full grid-cols-2 items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 50, width: 186, className: "mx-auto h-[43px] w-auto shrink-0 object-contain", draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: "mx-auto h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsx("div", { className: "w-full text-center font-semibold text-2xl uppercase", id: "disclaimer-title", children: "Notice" }), _jsx("div", { className: "mb-1 text-sm text-text-secondary-700", id: "disclaimer-description", children: "By entering this website, you acknowledge and confirm:" }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", "aria-label": "Restricted persons list", children: [_jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are 21 years old and above."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not a government official, or employee connected directly with the operation of the Government or any of its agencies, member of the Armed Forces of the Philippines including the Army, Navy, Air Force, or the Philippine Nationa Police."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not included in the PAGCOR's National Database Restricted Persons (NDRP)."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "Funds or credits in the account of player who is found ineligible to play shall mean forfeiture of said funds/credits in favor of the Government."] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
@@ -46,6 +49,10 @@ export function DisclaimerV3(props) {
                                                 setTimeout(() => setShowWarning(false), 4000);
                                                 return;
                                             }
+                                            if (isAuthenticated) {
+                                                globalStore.termsOfUse.setNext(null);
+                                                globalStore.termsOfUse.setOpen(true);
+                                            }
                                             disclaimer.close();
                                             if (props.openOnboardingOnAgree) {
                                                 globalStore.onboarding.setOpen(true);

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css

@@ -0,0 +1,184 @@
+@keyframes arrow-green-flash {
+  0% {
+    color: #abefc6;
+  }
+  100% {
+    color: #079455;
+  }
+}
+
+.animate-arrow-green-flash-1 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+.animate-arrow-green-flash-2 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-green-flash-3 {
+  animation: arrow-green-flash 0.4s infinite;
+}
+
+@keyframes arrow-red-flash {
+  0%,
+  100% {
+    color: #f97066;
+  }
+  50% {
+    color: #fecdca;
+  }
+}
+
+.animate-arrow-red-flash-1 {
+  animation: arrow-red-flash 0.4s infinite;
+}
+
+.animate-arrow-red-flash-2 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-red-flash-3 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+/* Animated BG */
+@keyframes rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.light-rays {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+
+  --first: var(--color-bg-tertiary);
+  --second: var(--color-bg-quaternary);
+}
+
+.light-rays::before,
+.light-rays::after {
+  content: '';
+  position: absolute;
+  top: var(--light-rays-top, 150px);
+  left: calc(50% - 90px);
+  margin: -100vmax;
+  width: 200vmax;
+  height: 200vmax;
+  opacity: 0.6;
+  transform-origin: center;
+}
+
+.light-rays::before {
+  background: conic-gradient(
+    var(--first) 0deg 7.2deg,
+    var(--second) 7.2deg 14.4deg,
+    var(--first) 14.4deg 21.6deg,
+    var(--second) 21.6deg 28.8deg,
+    var(--first) 28.8deg 36deg,
+    var(--second) 36deg 43.2deg,
+    var(--first) 43.2deg 50.4deg,
+    var(--second) 50.4deg 57.6deg,
+    var(--first) 57.6deg 64.8deg,
+    var(--second) 64.8deg 72deg,
+    var(--first) 72deg 79.2deg,
+    var(--second) 79.2deg 86.4deg,
+    var(--first) 86.4deg 93.6deg,
+    var(--second) 93.6deg 100.8deg,
+    var(--first) 100.8deg 108deg,
+    var(--second) 108deg 115.2deg,
+    var(--first) 115.2deg 122.4deg,
+    var(--second) 122.4deg 129.6deg,
+    var(--first) 129.6deg 136.8deg,
+    var(--second) 136.8deg 144deg,
+    var(--first) 144deg 151.2deg,
+    var(--second) 151.2deg 158.4deg,
+    var(--first) 158.4deg 165.6deg,
+    var(--second) 165.6deg 172.8deg,
+    var(--first) 172.8deg 180deg,
+    var(--second) 180deg 187.2deg,
+    var(--first) 187.2deg 194.4deg,
+    var(--second) 194.4deg 201.6deg,
+    var(--first) 201.6deg 208.8deg,
+    var(--second) 208.8deg 216deg,
+    var(--first) 216deg 223.2deg,
+    var(--second) 223.2deg 230.4deg,
+    var(--first) 230.4deg 237.6deg,
+    var(--second) 237.6deg 244.8deg,
+    var(--first) 244.8deg 252deg,
+    var(--second) 252deg 259.2deg,
+    var(--first) 259.2deg 266.4deg,
+    var(--second) 266.4deg 273.6deg,
+    var(--first) 273.6deg 280.8deg,
+    var(--second) 280.8deg 288deg,
+    var(--first) 288deg 295.2deg,
+    var(--second) 295.2deg 302.4deg,
+    var(--first) 302.4deg 309.6deg,
+    var(--second) 309.6deg 316.8deg,
+    var(--first) 316.8deg 324deg,
+    var(--second) 324deg 331.2deg,
+    var(--first) 331.2deg 338.4deg,
+    var(--second) 338.4deg 345.6deg,
+    var(--first) 345.6deg 352.8deg,
+    var(--second) 352.8deg 360deg
+  );
+  animation: rotate 20s linear infinite;
+}
+
+@media (max-width: 1024px) {
+  .light-rays::before,
+  .light-rays::after {
+    left: auto;
+    right: 11%;
+  }
+}
+
+/* ScrollArea.module.css */
+.scrollArea {
+  overflow-y: scroll;
+  padding-right: 4px;
+}
+
+/* WebKit-based browsers */
+.scrollArea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollArea::-webkit-scrollbar-track {
+  background: var(--color-bg-primary-alt);
+  border-radius: 9999px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-quaternary);
+  border-radius: 9999px;
+}
+
+@keyframes waveColor {
+  0%,
+  2.5% {
+    color: var(--wave-highlight-color);
+  }
+  2.51%,
+  100% {
+    color: var(--color-brand-300);
+  }
+}
+
+.animate-wave-color-success {
+  --wave-highlight-color: var(--color-success-800);
+  animation: waveColor 4s ease-in-out infinite;
+}
+
+.animate-wave-color-error {
+  --wave-highlight-color: var(--color-error-600);
+  animation: waveColor 4s ease-in-out infinite;
+}