@opexa/portal-components 0.0.143 → 0.0.145

package/dist/client/hooks/useUpdateMemberVerificationMutation.js

@@ -30,7 +30,6 @@ export const useUpdateMemberVerificationMutation = (config) => {
                     selfieImage: data.selfieImage
                         ? { id: data.selfieImage, status: 'UPLOADING' }
                         : prev.selfieImage,
-                    status: 'UNVERIFIED',
                 };
             });
         },

package/dist/components/AccountVerification/AccountVerification.js

@@ -6,6 +6,7 @@ import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
 import { useProfileCompletionQuery } from '../../client/hooks/useProfileCompletionQuery.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
 import { CheckVerified02Icon } from '../../icons/CheckVerified02Icon.js';
 import { CreditCard02Icon } from '../../icons/CreditCard02Icon.js';
@@ -20,6 +21,7 @@ export function AccountVerification(props) {
         kyc: ctx.kyc,
     })));
     const profileCompletionQuery = useProfileCompletionQuery();
+    const session = useSessionQuery();
     const profileCompletion = profileCompletionQuery.data;
     const verificationQuery = useMemberVerificationQuery();
     const verification = verificationQuery.data;
@@ -30,7 +32,8 @@ export function AccountVerification(props) {
         verification?.status === 'UNVERIFIED';
     return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Verify your identity" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "Complete personal verification to unlock all features and enhance account security." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountVerification
                             ? 'text-text-success-primary'
-                            : 'text-text-warning-primary'), children: profileCompletion?.accountVerification ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("div", { className: "shadow-xs border-border-secondary bg-bg-primary-alt mt-5 rounded-xl border", children: [_jsx("div", { className: "px-4 py-5", children: _jsxs("ul", { className: "space-y-lg", children: [_jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FileCheck02Icon, {}), "Basic Information"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(Globe05Icon, {}), "Proof of address"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(CreditCard02Icon, {}), "Government ID"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FaceIdIcon, {}), "Facial Verification"] })] }) }), _jsx("div", { className: "border-border-secondary flex justify-end border-t px-4 py-3 lg:py-xl", children: _jsx(Button, { size: "sm", className: "w-full lg:w-fit", onClick: () => globalStore.kyc.setOpen(true), children: "Verify Now" }) })] }), success && _jsx(VerificationSuccess, {}), pending && _jsx(VerificationInProgress, {}), failed && _jsx(VerificationFailed, {}), empty && _jsx(VerificationNotSubmitted, {})] }));
+                            : 'text-text-warning-primary'), children: profileCompletion?.accountVerification ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("div", { className: "shadow-xs border-border-secondary bg-bg-primary-alt mt-5 rounded-xl border", children: [_jsx("div", { className: "px-4 py-5", children: _jsxs("ul", { className: "space-y-lg", children: [_jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FileCheck02Icon, {}), "Basic Information"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(Globe05Icon, {}), "Proof of address"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(CreditCard02Icon, {}), "Government ID"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FaceIdIcon, {}), "Facial Verification"] })] }) }), _jsx("div", { className: "border-border-secondary flex justify-end border-t px-4 py-3 lg:py-xl", children: verification?.status !== 'PENDING' ||
+                            (session.data?.status !== 'unauthenticated' && (_jsx(Button, { size: "sm", className: "w-full lg:w-fit", onClick: () => globalStore.kyc.setOpen(true), children: "Verify Now" }))) })] }), success && _jsx(VerificationSuccess, {}), pending && _jsx(VerificationInProgress, {}), failed && _jsx(VerificationFailed, {}), empty && _jsx(VerificationNotSubmitted, {})] }));
 }
 function VerificationNotSubmitted() {
     return (_jsxs("div", { className: "shadow-xs border-border-primary bg-bg-primary-alt mt-6 flex flex-col gap-2 rounded-xl border p-xl lg:flex-row", children: [_jsx("div", { className: "border-text-warning-primary/10 flex size-[2.1875rem] items-center justify-center rounded-full border-2", children: _jsx("div", { className: "border-text-warning-primary/30 flex size-[1.666625rem] items-center justify-center rounded-full border-2", children: _jsx(AlertCircleIcon, { className: "text-text-warning-primary size-5" }) }) }), _jsx("p", { className: "text-text-tertiary-600 max-w-[800px] text-sm", children: "To serve you better and unlock all features, please provide valid identification documents. This helps protect your account and makes recovery easier if ever needed." })] }));

package/dist/components/Games/GamesList.client.d.ts

@@ -14,6 +14,7 @@ export interface GamesListProps {
     search?: string;
     /** @default "Games"*/
     heading?: string;
+    viewProvidersUrl?: string;
     className?: string | ClassNameEntries;
 }
 export declare function GamesList__client(props: GamesListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Games/GamesList.client.js

@@ -1,8 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { isString, noop } from 'lodash-es';
+import Link from 'next/link';
 import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
 import { useInfiniteQueryHelper } from '../../client/hooks/useInfiniteQueryHelper.js';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
 import { GamingPad01Icon } from '../../icons/GamingPad01Icon.js';
 import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import { Button } from '../../ui/Button/index.js';
@@ -20,7 +22,7 @@ export function GamesList__client(props) {
     const classNames = isString(props.className)
         ? { root: props.className }
         : (props.className ?? {});
-    return (_jsxs("div", { className: classNames.root, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), totalRows <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : GamingPad01Icon, title: loading ? 'Just a moment' : 'No games', message: loading
+    return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center lg:justify-between", children: [_jsx("h2", { className: "order-2 mt-4xl text-lg font-semibold lg:order-none lg:mt-0", children: props.heading ?? 'Games' }), props.viewProvidersUrl && (_jsxs(Link, { href: props.viewProvidersUrl, className: "text-button-tertiary-fg order-1 flex items-center gap-sm text-sm font-semibold lg:order-none", children: [_jsx(ChevronLeftIcon, { className: "size-5" }), "Back to all providers"] }))] }), totalRows <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : GamingPad01Icon, title: loading ? 'Just a moment' : 'No games', message: loading
                     ? 'Fetching latest games...'
                     : 'No game is currently available. Please check back later', className: "mt-lg" })), totalRows >= 1 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: availableRows.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, className: {
                                     root: classNames.thumbnailRoot,

package/dist/components/KYC/IdentityVerification.js

@@ -15,6 +15,8 @@ import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { Portal } from '../../ui/Portal/index.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getMemberVerificationQueryKey } from '../../utils/queryKeys.js';
 import FileUpload from './FileUpload.js';
 import { useKYCContext } from './KYCContext.js';
 const formSchema = z.object({
@@ -38,9 +40,18 @@ export function IdentityVerification() {
     });
     const { mutate: updateMemberVerification, isPending: updatePending } = useUpdateMemberVerificationMutation({
         onSuccess: () => {
+            const queryClient = getQueryClient();
             toaster.success({
                 title: 'ID Front Image & Selfie Image updated successfully',
             });
+            queryClient.setQueryData(getMemberVerificationQueryKey(), (prev) => {
+                if (!prev)
+                    return prev;
+                return {
+                    ...prev,
+                    status: 'UNVERIFIED',
+                };
+            });
         },
         onError: (error) => {
             toaster.error({

package/dist/components/KYC/KYC.lazy.js

@@ -9,7 +9,6 @@ import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerifica
 import { XIcon } from '../../icons/XIcon.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { BasicInformation } from './BasicInformation.js';
 import { CaptureIdDocument } from './CaptureIdDocument.js';
 import { CaptureSelfie } from './CaptureSelfie.js';
 import { IdentityVerification } from './IdentityVerification.js';
@@ -28,10 +27,7 @@ export function KYC(props) {
     const memberStatus = memberVerification.data?.status;
     //check steps
     useEffect(() => {
-        if (!isBasicInfoVerified) {
-            kyc.setStep(1);
-        }
-        else if (memberStatus === 'REJECTED') {
+        if (memberStatus === 'REJECTED') {
             kyc.setStep(2);
         }
         else if (isBasicInfoVerified && isMemberUploaded) {
@@ -44,8 +40,8 @@ export function KYC(props) {
     return (_jsx(KYCContext, { value: kyc, children: _jsx(Dialog.Root, { open: globalStore.kyc.open, onOpenChange: (details) => {
                 globalStore.kyc.setOpen(details.open);
             }, lazyMount: true, unmountOnExit: true, onExitComplete: () => {
-                kyc.setStep(1);
+                kyc.setStep(2);
                 kyc.setDone(false);
                 kyc.setCapturing(null);
-            }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt lg:min-h-auto mx-auto min-h-full w-full lg:w-fit", children: [kyc.capturing === 'SELFIE' && _jsx(CaptureSelfie, {}), kyc.capturing === 'ID_DOCUMENT' && _jsx(CaptureIdDocument, {}), !kyc.capturing && (_jsxs("div", { className: "w-full p-3xl lg:w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 1 && _jsx(BasicInformation, {}), kyc.step === 2 && _jsx(IdentityVerification, {}), kyc.step === 3 && _jsx(PersonalInformation, {})] }))] }) })] }) }) }));
+            }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt lg:min-h-auto mx-auto min-h-full w-full lg:w-fit", children: [kyc.capturing === 'SELFIE' && _jsx(CaptureSelfie, {}), kyc.capturing === 'ID_DOCUMENT' && _jsx(CaptureIdDocument, {}), !kyc.capturing && (_jsxs("div", { className: "w-full p-3xl lg:w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 2 && _jsx(IdentityVerification, {}), kyc.step === 3 && _jsx(PersonalInformation, {})] }))] }) })] }) }) }));
 }

package/dist/components/KYC/PersonalInformation.js

@@ -14,6 +14,8 @@ import { Button } from '../../ui/Button/index.js';
 import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getMemberVerificationQueryKey } from '../../utils/queryKeys.js';
 import { useKYCContext } from './KYCContext.js';
 const definition = z.object({
     address: z.string().trim().min(1, 'Current address is required'),
@@ -38,6 +40,15 @@ export function PersonalInformation() {
             });
         },
         onSuccess() {
+            const queryClient = getQueryClient();
+            queryClient.setQueryData(getMemberVerificationQueryKey(), (prev) => {
+                if (!prev)
+                    return prev;
+                return {
+                    ...prev,
+                    status: 'PENDING',
+                };
+            });
             kyc.setDone(true);
             globalStore.kyc.setOpen(false);
             toaster.success({

package/dist/components/KYC/useKYC.js

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 export function useKYC() {
-    const [step, setStep] = useState(1);
+    const [step, setStep] = useState(2);
     const [done, setDone] = useState(false);
     const [idFrontImageId, setFrontImageId] = useState(null);
     const [selfieImageId, setSelfieImageId] = useState(null);

package/dist/components/Messages/Message.js

@@ -8,7 +8,10 @@ import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
 import { useMessageContext } from './MessageContext.js';
 import { MessageIcon } from './MessageIcon.js';
+import { useMessagesPropsContext } from './MessagesContext.js';
 export function Message() {
+    const messagesProps = useMessagesPropsContext();
+    const transactionsPageUrl = messagesProps.transactionsPageUrl ?? '/transactions';
     const message = useMessageContext();
     const localeInfo = useLocaleInfo();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
@@ -23,9 +26,23 @@ export function Message() {
         if (!message.markedAsRead)
             markMessageAsReadMutation.mutate(message.id);
     };
+    function normalizeRedirectUrl(value) {
+        const searchParams = new URLSearchParams(value);
+        if (searchParams.has('personalCenter')) {
+            if (searchParams.get('personalCenter') === 'deposit' &&
+                searchParams.has('id')) {
+                return `${transactionsPageUrl}?tab=deposits&id=${searchParams.get('id')}`;
+            }
+            if (searchParams.get('personalCenter') === 'withdrawal' &&
+                searchParams.has('id')) {
+                return `${transactionsPageUrl}?tab=withdrawals&id=${searchParams.get('id')}`;
+            }
+        }
+        return value;
+    }
     return (_jsxs("div", { role: "button", tabIndex: 0, className: "border-border-secondary rounded-xs bg-bg-secondary flex h-auto flex-shrink-0 cursor-pointer flex-col border px-3.5 py-2.5", onClick: handleViewMessage, "aria-pressed": "false", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-text-tertiary-600 text-xs font-normal", children: format(new Date(message.dateTimeCreated), 'M/d/yyyy - h:mma', {
                             in: tz(localeInfo.timezone),
-                        }) }), !message.markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [_jsx(MessageIcon, { type: message.icon, className: "text-brand-400 size-5" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: message.title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: message.content } }), message.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: message.actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: action.url, onClick: (e) => {
+                        }) }), !message.markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [_jsx(MessageIcon, { type: message.icon, className: "text-brand-400 size-5" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: message.title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: message.content } }), message.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: message.actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: normalizeRedirectUrl(action.url), onClick: (e) => {
                         e.stopPropagation();
                         globalStore.messages.setOpen(false);
                         globalStore.messages.setTab('ALL');

package/dist/components/Messages/MessageContext.d.ts

@@ -1,5 +1,5 @@
 import type { Message } from '../../types';
-export declare const MessageContext: (props: {
+export declare const MessageProvider: (props: {
     value: Message;
 } & {
     children?: import("react").ReactNode | undefined;

package/dist/components/Messages/MessageContext.js

@@ -1,2 +1,2 @@
 import { createContext } from '../../client/utils/createContext.js';
-export const [MessageContext, useMessageContext] = createContext();
+export const [MessageProvider, useMessageContext] = createContext();

package/dist/components/Messages/Messages.lazy.d.ts

@@ -9,5 +9,7 @@ export interface MessagesProps {
      * ```
      */
     offsetTop?: string | [mobile: string, desktop: string];
+    /** @default '/transactions' */
+    transactionsPageUrl?: string;
 }
 export declare function Messages(props: MessagesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/Messages.lazy.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
@@ -13,8 +13,9 @@ import { Portal } from '../../ui/Portal/index.js';
 import { Tabs } from '../../ui/Tabs/index.js';
 import { InfiniteScroll } from '../shared/InfiniteScroll.js';
 import { Message } from './Message.js';
-import { MessageContext } from './MessageContext.js';
+import { MessageProvider } from './MessageContext.js';
 import { MessagePopup } from './MessagePopup.js';
+import { MessagesPropsProvider } from './MessagesContext.js';
 const TABS = ['ALL', 'UNREAD'];
 export function Messages(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
@@ -39,10 +40,10 @@ export function Messages(props) {
     const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
         ? props.offsetTop
         : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
-    return (_jsxs(_Fragment, { children: [_jsx(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsx(Drawer.Content, { className: twMerge('flex', 'flex-col', 'border-border-secondary', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'lg:border-l', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
+    return (_jsxs(MessagesPropsProvider, { value: props, children: [_jsx(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsx(Drawer.Content, { className: twMerge('flex', 'flex-col', 'border-border-secondary', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'lg:border-l', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
                                 ['--offset-top-mobile']: mobileOffsetTop,
                                 ['--offset-top-desktop']: desktopOffsetTop,
-                            }, children: _jsxs("div", { className: "flex flex-col space-y-6", children: [_jsxs("div", { className: "flex items-end justify-between px-4 pt-6", children: [_jsx("p", { className: "text-text-primary-brand text-xl font-semibold", children: "Notifications" }), _jsx(Drawer.CloseTrigger, { className: "p-2", children: _jsx(XIcon, {}) })] }), _jsxs(Tabs.Root, { value: globalStore.messages.tab, onValueChange: (details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsx("div", { className: "mb-4 w-full px-4", children: _jsxs(Tabs.List, { className: "border-border-secondary w-full border", children: [_jsx(Tabs.Trigger, { value: "ALL", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600", children: "All" }), _jsxs(Tabs.Trigger, { value: "UNREAD", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600 flex items-center justify-center space-x-2", children: [_jsx("div", { children: "Unread" }), !!unreadMessagesCount && (_jsx("div", { className: "border-border-primary bg-bg-secondary rounded-full border px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, { className: "bg-bg-active" })] }) }), _jsx("div", { className: "border-border-secondary w-full border-t" }), TABS.map((tab) => (_jsxs(Tabs.Content, { value: tab, className: "scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full max-h-[calc(100vh-197px)] overflow-y-auto p-xl", style: { scrollbarGutter: 'stable' }, children: [messages.length > 0 && (_jsx("div", { className: "flex flex-col space-y-4", children: messages.map((message) => (_jsx(MessageContext, { value: message, children: _jsx(Message, {}) }, message.id))) })), _jsx(InfiniteScroll, { loader: _jsx(SpinnerIcon, { className: "mx-auto size-5" }), hasMore: !!messagesQuery.hasNextPage, loadMore: async () => {
+                            }, children: _jsxs("div", { className: "flex flex-col space-y-6", children: [_jsxs("div", { className: "flex items-end justify-between px-4 pt-6", children: [_jsx("p", { className: "text-text-primary-brand text-xl font-semibold", children: "Notifications" }), _jsx(Drawer.CloseTrigger, { className: "p-2", children: _jsx(XIcon, {}) })] }), _jsxs(Tabs.Root, { value: globalStore.messages.tab, onValueChange: (details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsx("div", { className: "mb-4 w-full px-4", children: _jsxs(Tabs.List, { className: "border-border-secondary w-full border", children: [_jsx(Tabs.Trigger, { value: "ALL", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600", children: "All" }), _jsxs(Tabs.Trigger, { value: "UNREAD", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600 flex items-center justify-center space-x-2", children: [_jsx("div", { children: "Unread" }), !!unreadMessagesCount && (_jsx("div", { className: "border-border-primary bg-bg-secondary rounded-full border px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, { className: "bg-bg-active" })] }) }), _jsx("div", { className: "border-border-secondary w-full border-t" }), TABS.map((tab) => (_jsxs(Tabs.Content, { value: tab, className: "scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full max-h-[calc(100vh-197px)] overflow-y-auto p-xl", style: { scrollbarGutter: 'stable' }, children: [messages.length > 0 && (_jsx("div", { className: "flex flex-col space-y-4", children: messages.map((message) => (_jsx(MessageProvider, { value: message, children: _jsx(Message, {}) }, message.id))) })), _jsx(InfiniteScroll, { loader: _jsx(SpinnerIcon, { className: "mx-auto size-5" }), hasMore: !!messagesQuery.hasNextPage, loadMore: async () => {
                                                             await messagesQuery.fetchNextPage();
                                                         }, className: "mt-4" })] }, tab)))] })] }) }) }) }) }), _jsx(MessagePopup, {})] }));
 }

package/dist/components/Messages/MessagesContext.d.ts

@@ -0,0 +1,6 @@
+import type { MessagesProps } from './Messages.lazy';
+export declare const MessagesPropsProvider: (props: {
+    value: MessagesProps;
+} & {
+    children?: import("react").ReactNode | undefined;
+}) => React.ReactNode, useMessagesPropsContext: () => MessagesProps;

package/dist/components/Messages/MessagesContext.js

@@ -0,0 +1,2 @@
+import { createContext } from '../../client/utils/createContext.js';
+export const [MessagesPropsProvider, useMessagesPropsContext] = createContext();

package/dist/components/TransactionRecords/DepositRecordsTable.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { tz, TZDateMini } from '@date-fns/tz';
 import { endOfDay, format, startOfDay } from 'date-fns';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useReducer } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useDepositRecordsQuery } from '../../client/hooks/useDepositRecordsQuery.js';
@@ -19,6 +20,9 @@ import { formatNumber } from '../../utils/formatNumber.js';
 import { Empty } from '../shared/Empty.js';
 import { TableFilters } from './TableFilters.js';
 export function DepositRecordsTable() {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
     const [state, setState] = useReducer((prev, next) => ({
         ...prev,
         ...next,
@@ -26,6 +30,11 @@ export function DepositRecordsTable() {
     const localeInfo = useLocaleInfo();
     const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useDepositRecordsQuery, {
         filter: {
+            ...(searchParams.has('id') && {
+                deposit: {
+                    equal: searchParams.get('id')?.toString(),
+                },
+            }),
             ...(state.type && {
                 type: {
                     equal: state.type,
@@ -59,6 +68,11 @@ export function DepositRecordsTable() {
                         timestamp: value.timestamp,
                     });
                     firstPage();
+                    if (searchParams.has('id')) {
+                        const newSearchParams = new URLSearchParams(searchParams);
+                        newSearchParams.delete('id');
+                        router.push(`${pathname}?${newSearchParams.toString()}`);
+                    }
                 }, enabledFilters: {
                     depositType: true,
                     depositStatus: true,

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

@@ -1,4 +1,2 @@
-export interface TransactionRecordsProps {
-    className?: string;
-}
-export declare function TransactionRecords(props: TransactionRecordsProps): Promise<import("react/jsx-runtime").JSX.Element>;
+import { type TransactionRecordsProps } from './TransactionRecords.suspense';
+export declare function TransactionRecords(props: TransactionRecordsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TransactionRecords/TransactionRecords.js

@@ -1,13 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { prefetchTransactionRecordsQuery } from '../../server/utils/prefetchTransactionRecordsQuery.js';
-import { Tabs } from '../../ui/Tabs/index.js';
-import { DepositRecordsTable } from './DepositRecordsTable.js';
-import { TransactionRecordsTable } from './TransactionRecordsTable.js';
-import { WithdrawalRecordsTable } from './WithdrawalRecordsTable.js';
-export async function TransactionRecords(props) {
-    await prefetchTransactionRecordsQuery({
-        first: 10,
-        filter: {},
-    });
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Transactions" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "View your transaction records" }), _jsxs(Tabs.Root, { className: "mt-lg lg:mt-2xl", defaultValue: "transactions", lazyMount: true, unmountOnExit: true, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "transactions", children: "All Transactions" }), _jsx(Tabs.Trigger, { value: "deposits", children: "Deposits" }), _jsx(Tabs.Trigger, { value: "withdrawals", children: "Withdrawals" }), _jsx(Tabs.Indicator, {})] }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsx(Tabs.Content, { value: "transactions", className: "mt-xl", children: _jsx(TransactionRecordsTable, {}) }), _jsx(Tabs.Content, { value: "deposits", className: "mt-xl", children: _jsx(DepositRecordsTable, {}) }), _jsx(Tabs.Content, { value: "withdrawals", className: "mt-xl", children: _jsx(WithdrawalRecordsTable, {}) })] })] }));
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { TransactionRecords__suspense, } from './TransactionRecords.suspense.js';
+export function TransactionRecords(props) {
+    return (_jsx(Suspense, { fallback: null, children: _jsx(TransactionRecords__suspense, { ...props }) }));
 }

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

@@ -0,0 +1,4 @@
+export interface TransactionRecordsProps {
+    className?: string;
+}
+export declare function TransactionRecords__suspense(props: TransactionRecordsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TransactionRecords/TransactionRecords.suspense.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
+import { z } from 'zod';
+import { Tabs } from '../../ui/Tabs/index.js';
+import { DepositRecordsTable } from './DepositRecordsTable.js';
+import { TransactionRecordsTable } from './TransactionRecordsTable.js';
+import { WithdrawalRecordsTable } from './WithdrawalRecordsTable.js';
+const TabSchema = z
+    .enum(['transactions', 'deposits', 'withdrawals'])
+    .optional()
+    .nullable()
+    .catch('transactions')
+    .transform((v) => v ?? 'transactions');
+export function TransactionRecords__suspense(props) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const tab = TabSchema.parse(searchParams.get('tab'));
+    const setTab = (value) => {
+        const newSearchParams = new URLSearchParams(searchParams);
+        newSearchParams.set('tab', value);
+        newSearchParams.delete('id');
+        router.push(`${pathname}?${newSearchParams.toString()}`);
+    };
+    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Transactions" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "View your transaction records" }), _jsxs(Tabs.Root, { className: "mt-lg lg:mt-2xl", value: tab, onValueChange: (details) => setTab(TabSchema.parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "transactions", children: "All Transactions" }), _jsx(Tabs.Trigger, { value: "deposits", children: "Deposits" }), _jsx(Tabs.Trigger, { value: "withdrawals", children: "Withdrawals" }), _jsx(Tabs.Indicator, {})] }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsx(Tabs.Content, { value: "transactions", className: "mt-xl", children: _jsx(TransactionRecordsTable, {}) }), _jsx(Tabs.Content, { value: "deposits", className: "mt-xl", children: _jsx(Suspense, { fallback: null, children: _jsx(DepositRecordsTable, {}) }) }), _jsx(Tabs.Content, { value: "withdrawals", className: "mt-xl", children: _jsx(Suspense, { fallback: null, children: _jsx(WithdrawalRecordsTable, {}) }) })] })] }));
+}

package/dist/components/TransactionRecords/WithdrawalRecordsTable.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { tz, TZDateMini } from '@date-fns/tz';
 import { endOfDay, format, startOfDay } from 'date-fns';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useReducer } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useInfiniteQueryHelper } from '../../client/hooks/useInfiniteQueryHelper.js';
@@ -19,6 +20,9 @@ import { formatNumber } from '../../utils/formatNumber.js';
 import { Empty } from '../shared/Empty.js';
 import { TableFilters } from './TableFilters.js';
 export function WithdrawalRecordsTable() {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
     const [state, setState] = useReducer((prev, next) => ({
         ...prev,
         ...next,
@@ -26,6 +30,11 @@ export function WithdrawalRecordsTable() {
     const localeInfo = useLocaleInfo();
     const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useWithdrawalRecordsQuery, {
         filter: {
+            ...(searchParams.has('id') && {
+                withdrawal: {
+                    equal: searchParams.get('id')?.toString(),
+                },
+            }),
             ...(state.type && {
                 type: {
                     equal: state.type,
@@ -59,6 +68,11 @@ export function WithdrawalRecordsTable() {
                         timestamp: value.timestamp,
                     });
                     firstPage();
+                    if (searchParams.has('id')) {
+                        const newSearchParams = new URLSearchParams(searchParams);
+                        newSearchParams.delete('id');
+                        router.push(`${pathname}?${newSearchParams.toString()}`);
+                    }
                 }, enabledFilters: {
                     withdrawalType: true,
                     withdrawalStatus: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.143",
+  "version": "0.0.145",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",