@opexa/portal-components 0.0.84 → 0.0.86

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts

@@ -1,5 +1,5 @@
 export declare const QRPHDepositContext: import("react").Context<{
-    view: "form" | "qrCode";
+    view: "qrCode" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
@@ -9,7 +9,7 @@ export declare const QRPHDepositContext: import("react").Context<{
         promo?: string | null;
     }) => void;
 }>, useQRPHDepositContext: () => {
-    view: "form" | "qrCode";
+    view: "qrCode" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

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

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
 export declare function useQRPHDeposit(): {
-    view: "form" | "qrCode";
+    view: "qrCode" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/DepositWithdrawal.d.ts

@@ -1,6 +1 @@
-import type { ReactNode } from 'react';
-interface DepositWithdrawalProps {
-    children?: ReactNode;
-}
-export declare function DepositWithdrawal(props: DepositWithdrawalProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function DepositWithdrawal(): import("react/jsx-runtime").JSX.Element;

package/dist/components/DepositWithdrawal/DepositWithdrawal.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal } from '@ark-ui/react';
-import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore, useLocaleInfo, useWalletQuery, } from '../../client/hooks/index.js';
@@ -10,7 +9,7 @@ import { Dialog, IconButton, Tabs } from '../../ui/index.js';
 import { formatNumber } from '../../utils/index.js';
 import { Deposit } from './Deposit/Deposit.js';
 import { Withdrawal } from './Withdrawal/Withdrawal.js';
-export function DepositWithdrawal(props) {
+export function DepositWithdrawal() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
     })));
@@ -18,22 +17,12 @@ export function DepositWithdrawal(props) {
     const walletQuery = useWalletQuery({
         refetchInterval: 5000,
     });
-    return (_jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.depositWithdrawal.open, onOpenChange: (details) => {
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.depositWithdrawal.open, onOpenChange: (details) => {
             globalStore.depositWithdrawal.setOpen(details.open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { asChild: true, children: props.children ?? _jsx(DefaulTrigger, {}) }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)]", children: _jsxs(Dialog.Content, { className: "lg:min-h-auto mx-auto min-h-full w-full px-4 py-3xl lg:w-[480px] lg:rounded-xl", children: [_jsxs(Dialog.Header, { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-10 items-center justify-center rounded-md border", children: _jsx(Wallet02Icon, { className: "size-5" }) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" }), _jsx(Dialog.Context, { children: (api) => (_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, {}) })) })] }), _jsxs(Dialog.Body, { className: "mt-3xl", children: [_jsx("p", { className: "text-text-secondary-700 text-center text-sm", children: "Deposit Balance" }), _jsx("p", { className: "text-center text-3xl font-bold leading-tight tracking-tight", children: formatNumber(walletQuery.data?.balance, {
-                                                currency: localeInfo.currency.code,
-                                                minDecimalPlaces: 2,
-                                            }) }), _jsxs(Tabs.Root, { value: globalStore.depositWithdrawal.tab, onValueChange: (details) => {
-                                                globalStore.depositWithdrawal.setTab(z.enum(['DEPOSIT', 'WITHDRAWAL']).parse(details.value));
-                                            }, lazyMount: true, unmountOnExit: true, className: "mt-3xl space-y-4xl", children: [_jsxs(Tabs.List, { className: "w-full", children: [_jsx(Tabs.Trigger, { value: "DEPOSIT", className: "grow", children: "Deposit" }), _jsx(Tabs.Trigger, { value: "WITHDRAWAL", className: "grow", children: "Withdrawal" }), _jsx(Tabs.Indicator, {})] }), _jsx(Tabs.Content, { value: "DEPOSIT", className: "space-y-3xl", children: _jsx(Deposit, {}) }), _jsx(Tabs.Content, { value: "WITHDRAWAL", className: "space-y-3xl", children: _jsx(Withdrawal, {}) })] })] })] }) })] })] }));
-}
-function DefaulTrigger(props) {
-    const localeInfo = useLocaleInfo();
-    const walletQuery = useWalletQuery({
-        refetchInterval: 5000,
-    });
-    return (_jsxs("button", { type: "button", ...props, className: twMerge('flex', props.className), children: [_jsx("div", { className: "border-border-primary flex h-10 items-center rounded-l-md border border-r-0 px-3.5", children: formatNumber(walletQuery.data?.balance, {
-                    currency: localeInfo.currency.code,
-                    minDecimalPlaces: 2,
-                }) }), _jsx("div", { className: "bg-button-primary-bg text-button-primary-fg flex h-10 items-center gap-1.5 rounded-r-md px-3.5 text-sm font-semibold", children: "Deposit" })] }));
+        }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)]", children: _jsxs(Dialog.Content, { className: "lg:min-h-auto mx-auto min-h-full w-full px-4 py-3xl lg:w-[480px] lg:rounded-xl", children: [_jsxs(Dialog.Header, { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-10 items-center justify-center rounded-md border", children: _jsx(Wallet02Icon, { className: "size-5" }) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" }), _jsx(Dialog.Context, { children: (api) => (_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, {}) })) })] }), _jsxs(Dialog.Body, { className: "mt-3xl", children: [_jsx("p", { className: "text-text-secondary-700 text-center text-sm", children: "Deposit Balance" }), _jsx("p", { className: "text-center text-3xl font-bold leading-tight tracking-tight", children: formatNumber(walletQuery.data?.balance, {
+                                            currency: localeInfo.currency.code,
+                                            minDecimalPlaces: 2,
+                                        }) }), _jsxs(Tabs.Root, { value: globalStore.depositWithdrawal.tab, onValueChange: (details) => {
+                                            globalStore.depositWithdrawal.setTab(z.enum(['DEPOSIT', 'WITHDRAWAL']).parse(details.value));
+                                        }, lazyMount: true, unmountOnExit: true, className: "mt-3xl space-y-4xl", children: [_jsxs(Tabs.List, { className: "w-full", children: [_jsx(Tabs.Trigger, { value: "DEPOSIT", className: "grow", children: "Deposit" }), _jsx(Tabs.Trigger, { value: "WITHDRAWAL", className: "grow", children: "Withdrawal" }), _jsx(Tabs.Indicator, {})] }), _jsx(Tabs.Content, { value: "DEPOSIT", className: "space-y-3xl", children: _jsx(Deposit, {}) }), _jsx(Tabs.Content, { value: "WITHDRAWAL", className: "space-y-3xl", children: _jsx(Withdrawal, {}) })] })] })] }) })] }) }));
 }

package/dist/components/DepositWithdrawal/DepositWithdrawalTrigger.d.ts

@@ -2,4 +2,4 @@ import type { ComponentPropsWithRef } from 'react';
 export interface DepositWithdrawalTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
 }
-export declare function DepositWithdrawalTrigger(props: DepositWithdrawalTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DepositWithdrawalTrigger({ asChild, children, ...props }: DepositWithdrawalTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DepositWithdrawal/DepositWithdrawalTrigger.js

@@ -1,13 +1,18 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useSessionQuery } from '../../client/hooks/index.js';
-export function DepositWithdrawalTrigger(props) {
+import { useGlobalStore, useLocaleInfo, useSessionQuery, useWalletQuery, } from '../../client/hooks/index.js';
+import { formatNumber } from '../../utils/index.js';
+export function DepositWithdrawalTrigger({ asChild, children, ...props }) {
     const sessionQuery = useSessionQuery();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
     })));
+    const localeInfo = useLocaleInfo();
+    const walletQuery = useWalletQuery({
+        refetchInterval: 5000,
+    });
     const disabled = sessionQuery.data?.status === 'unauthenticated'
         ? true
         : globalStore.depositWithdrawal.open
@@ -17,5 +22,8 @@ export function DepositWithdrawalTrigger(props) {
             props.onClick?.(e);
             globalStore.depositWithdrawal.setTab('DEPOSIT');
             globalStore.depositWithdrawal.setOpen(true);
-        } }));
+        }, asChild: !children ? true : asChild, children: children ?? (_jsxs("button", { type: "button", ...props, className: "flex", children: [_jsx("div", { className: "border-border-primary flex h-10 items-center rounded-l-md border border-r-0 px-3.5", children: formatNumber(walletQuery.data?.balance, {
+                        currency: localeInfo.currency.code,
+                        minDecimalPlaces: 2,
+                    }) }), _jsx("div", { className: "bg-button-primary-bg text-button-primary-fg flex h-10 items-center gap-1.5 rounded-r-md px-3.5 text-sm font-semibold", children: "Deposit" })] })) }));
 }

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

@@ -1,4 +1 @@
-import type { Message as TMessage } from '../../types';
-export declare function Message({ message }: {
-    message: TMessage;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function Message(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/Message.js

@@ -4,31 +4,30 @@ import { format } from 'date-fns';
 import Link from 'next/link';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore, useLocaleInfo, useMarkMessageAsReadMutation, } from '../../client/hooks/index.js';
+import { useMessageContext } from './MessageContext.js';
 import { getMessageIcon } from './utils.js';
-export function Message({ message }) {
-    const { 
-    /**/
-    id, icon, title, content, actions, markedAsRead, dateTimeCreated, } = message;
+export function Message() {
+    const message = useMessageContext();
     const localeInfo = useLocaleInfo();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         message: ctx.message,
         messages: ctx.messages,
     })));
     const markMessageAsReadMutation = useMarkMessageAsReadMutation();
-    const Icon = getMessageIcon(icon);
+    const Icon = getMessageIcon(message.icon);
     const handleViewMessage = async () => {
         globalStore.message.setData(message);
         globalStore.message.setOpen(true);
         globalStore.messages.setOpen(false);
-        if (!markedAsRead)
-            markMessageAsReadMutation.mutate(id);
+        if (!message.markedAsRead)
+            markMessageAsReadMutation.mutate(message.id);
     };
     const handleActionClick = (e) => {
         e.stopPropagation();
         globalStore.messages.setOpen(false);
         globalStore.messages.setTab('ALL');
     };
-    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(dateTimeCreated), 'M/d/yyyy - h:mma', {
+    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),
-                        }) }), !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(Icon, { className: "text-brand-400" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: content } }), actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: 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: handleActionClick, children: action.name }, index))) }))] }));
+                        }) }), !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(Icon, { className: "text-brand-400" }), _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: handleActionClick, children: action.name }, index))) }))] }));
 }

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

@@ -0,0 +1,2 @@
+import type { Message } from '../../types';
+export declare const MessageContext: import("react").Context<Message>, useMessageContext: () => Message;

package/dist/components/Messages/MessageContext.js

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

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

@@ -1,5 +1,4 @@
 export interface MessagesProps {
-    children?: React.ReactNode;
     /**
      * @default '0px'
      * @example

package/dist/components/Messages/Messages.js

@@ -5,10 +5,11 @@ import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore, useMessagesQuery, useUnreadMessagesCountQuery, } from '../../client/hooks/index.js';
-import { Bell01Icon, SpinnerIcon, XIcon } from '../../icons/index.js';
-import { Drawer, IconButton, Tabs } from '../../ui/index.js';
+import { SpinnerIcon, XIcon } from '../../icons/index.js';
+import { Drawer, Tabs } from '../../ui/index.js';
 import { InfiniteScroll } from '../InfiniteScroll.js';
 import { Message } from './Message.js';
+import { MessageContext } from './MessageContext.js';
 import { MessagePopup } from './MessagePopup.js';
 const TABS = ['ALL', 'UNREAD'];
 export function Messages(props) {
@@ -29,10 +30,10 @@ export function Messages(props) {
     const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
         ? props.offsetTop
         : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
-    return (_jsxs(_Fragment, { children: [_jsxs(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, children: props.children ?? (_jsxs(IconButton, { size: "sm", colorScheme: "gray", className: "relative", children: [!!unreadMessagesCount && (_jsx("div", { className: "bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 rounded-full border px-1.5 text-2xs font-semibold", children: unreadMessagesCount })), _jsx(Bell01Icon, {})] })) }), _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(Message, { message: 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, {})] }));
+    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: {
+                                ['--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 () => {
+                                                            await messagesQuery.fetchNextPage();
+                                                        }, className: "mt-4" })] }, tab)))] })] }) }) }) }) }), _jsx(MessagePopup, {})] }));
 }

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

@@ -2,5 +2,5 @@ import type { ComponentPropsWithRef } from 'react';
 interface MessagesTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
 }
-export declare function MessagesTrigger(props: MessagesTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessagesTrigger({ asChild, children, ...props }: MessagesTriggerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Messages/MessagesTrigger.js

@@ -1,14 +1,18 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
-export function MessagesTrigger(props) {
+import { useGlobalStore, useUnreadMessagesCountQuery, } from '../../client/hooks/index.js';
+import { Bell01Icon } from '../../icons/index.js';
+import { IconButton } from '../../ui/index.js';
+export function MessagesTrigger({ asChild, children, ...props }) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         messages: ctx.messages,
     })));
+    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
+    const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
     return (_jsx(ark.button, { type: "button", "aria-label": "Toggle messages panel", "data-state": globalStore.messages.open ? 'open' : 'closed', ...props, onClick: (e) => {
             globalStore.messages.setOpen(!globalStore.messages.open);
             return props.onClick?.(e);
-        } }));
+        }, asChild: !children ? true : asChild, children: children ?? (_jsxs(IconButton, { size: "sm", colorScheme: "gray", className: "relative", children: [!!unreadMessagesCount && (_jsx("div", { className: "bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 rounded-full border px-1.5 text-2xs font-semibold", children: unreadMessagesCount })), _jsx(Bell01Icon, {})] })) }));
 }

package/dist/components/PortalProvider/Providers.js

@@ -1,12 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { QueryClientProvider } from '@tanstack/react-query';
-import dynamic from 'next/dynamic';
 import { getQueryClient } from '../../utils/index.js';
-const ThemeProvider = dynamic(() => import('next-themes').then((mod) => mod.ThemeProvider), {
-    ssr: false,
-});
 export function Providers({ children }) {
     const queryClient = getQueryClient();
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemeProvider, { attribute: "class", storageKey: "WebPortalTheme", enableSystem: false, enableColorScheme: false, defaultTheme: "dark", disableTransitionOnChange: true, children: children }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: children }));
 }

package/dist/components/SignUp/SignUpForm.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useDialogContext } from '@ark-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { ObjectId } from '@opexa/object-id';
 import { useSearchParams } from 'next/navigation';
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -10,7 +11,7 @@ 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 { ObjectId, ObjectType } from '../../services/ObjectId.js';
+import { ObjectType } from '../../services/ObjectType.js';
 import { Button, Checkbox, Field, PinInput } from '../../ui/index.js';
 export function SignUpForm() {
     const [step, setStep] = useState(1);

package/dist/handlers.js

@@ -159,6 +159,7 @@ export const POST = async (request, { params }) => {
         const body = await request.json();
         const parsed = CreateSessionDefinition.safeParse(body);
         const recaptcha = request.headers.get(RECAPTCHA_HEADER_KEY);
+        console.log(body);
         if (!parsed.success) {
             return NextResponse.json({
                 ok: false,

package/dist/services/ObjectId.d.ts

@@ -1,17 +1,3 @@
-export declare class ObjectId {
-    private _buffer;
-    constructor(buffer: Buffer);
-    static translate(id: ObjectId, type: number): ObjectId;
-    static generate(type?: number): ObjectId;
-    static generateFromKey(type: number, key: string): Promise<ObjectId>;
-    static from(value: string | Buffer): ObjectId;
-    get type(): number;
-    get buffer(): Buffer<ArrayBufferLike>;
-    compare(other: ObjectId): 0 | 1 | -1;
-    equals(other: ObjectId): boolean;
-    clone(): ObjectId;
-    toString(encoding?: 'bs58' | 'hex' | 'base64'): string;
-}
 export declare const ObjectType: {
     MemberAccount: number;
     MemberVerification: number;

package/dist/services/ObjectId.js

@@ -1,79 +1,65 @@
-import bs58 from 'bs58';
-import { sha256 } from 'crypto-hash';
-import randomBytes from 'randombytes';
-const MACHINE_ID = randomBytes(5);
-let counter = randomBytes(4).readUInt32BE(0) & 0xffffff;
-export class ObjectId {
-    _buffer;
-    constructor(buffer) {
-        this._buffer = buffer;
-    }
-    static translate(id, type) {
-        const buffer = Buffer.from(id.buffer);
-        buffer[0] = type & 0xff;
-        return ObjectId.from(buffer);
-    }
-    static generate(type) {
-        const buffer = Buffer.alloc(13);
-        const time = Math.floor(Date.now() / 1000) & 0xffffffff;
-        counter = (counter + 1) & 0xffffff;
-        buffer[0] = (type ?? 0) & 0xff;
-        buffer[1] = (time >> 24) & 0xff;
-        buffer[2] = (time >> 16) & 0xff;
-        buffer[3] = (time >> 8) & 0xff;
-        buffer[4] = time & 0xff;
-        buffer[5] = MACHINE_ID[0];
-        buffer[6] = MACHINE_ID[1];
-        buffer[7] = MACHINE_ID[2];
-        buffer[8] = MACHINE_ID[3];
-        buffer[9] = MACHINE_ID[4];
-        buffer[10] = (counter >> 16) & 0xff;
-        buffer[11] = (counter >> 8) & 0xff;
-        buffer[12] = counter & 0xff;
-        return new ObjectId(buffer);
-    }
-    static async generateFromKey(type, key) {
-        const buffer = Buffer.alloc(13);
-        buffer[0] = type & 0xff;
-        Buffer.from(await sha256(key, { outputFormat: 'buffer' })).copy(buffer, 1, 0, 12);
-        return new ObjectId(buffer);
-    }
-    static from(value) {
-        if (typeof value === 'string') {
-            if (value.length > 20) {
-                throw new Error('String value exceeds the limit of 20 characters');
-            }
-            return new ObjectId(Buffer.from(bs58.decode(value)));
-        }
-        if (value instanceof Buffer) {
-            return new ObjectId(value);
-        }
-        throw new Error('Invalid value type. Expected string or Buffer.');
-    }
-    get type() {
-        return this.buffer[0];
-    }
-    get buffer() {
-        return this._buffer;
-    }
-    compare(other) {
-        return this._buffer.compare(other._buffer);
-    }
-    equals(other) {
-        return this._buffer.equals(other._buffer);
-    }
-    clone() {
-        const buffer = Buffer.alloc(13);
-        this.buffer.copy(buffer);
-        return ObjectId.from(buffer);
-    }
-    toString(encoding) {
-        if (!encoding || encoding === 'bs58') {
-            return bs58.encode(this._buffer);
-        }
-        return this._buffer.toString(encoding);
-    }
-}
+/* ref: https://github.com/HighOutputVentures/opexa/blob/main/packages/object-id/src/libs/object-id.ts */
+// import bs58 from 'bs58';
+// import { sha256 } from 'crypto-hash';
+// import randomBytes from 'randombytes';
+// const MACHINE_ID = randomBytes(5);
+// let counter = randomBytes(4).readUInt32BE(0) & 0xffffff;
+// export class ObjectId {
+//   constructor(private readonly _buffer: Buffer) {}
+//   /**
+//    * @param type The type of the object, e.g. `ObjectType.MemberAccount`
+//    * @example
+//    * ```ts
+//    * import { ObjectId, ObjectType } from '@opexa/portal-components';
+//    *
+//    * const id = ObjectId.generate(ObjectType.MemberAccount).toString();
+//    * ```
+//    */
+//   static generate(type: number) {
+//     const buffer = Buffer.alloc(13);
+//     const time = Math.floor(Date.now() / 1000) & 0xffffffff;
+//     counter = (counter + 1) & 0xffffff;
+//     buffer[0] = type & 0xff;
+//     buffer[1] = (time >> 24) & 0xff;
+//     buffer[2] = (time >> 16) & 0xff;
+//     buffer[3] = (time >> 8) & 0xff;
+//     buffer[4] = time & 0xff;
+//     buffer[5] = MACHINE_ID[0];
+//     buffer[6] = MACHINE_ID[1];
+//     buffer[7] = MACHINE_ID[2];
+//     buffer[8] = MACHINE_ID[3];
+//     buffer[9] = MACHINE_ID[4];
+//     buffer[10] = (counter >> 16) & 0xff;
+//     buffer[11] = (counter >> 8) & 0xff;
+//     buffer[12] = counter & 0xff;
+//     return new ObjectId(buffer);
+//   }
+//   /**
+//    *
+//    * @param type The type of the object, e.g. `ObjectType.Game`
+//    * @param key The key to generate the object ID from, e.g. `Game.id`
+//    * @example
+//    * ```ts
+//    * import { ObjectId, ObjectType } from '@opexa/portal-components';
+//    *
+//    * const id = (await ObjectId.generateFromKey(ObjectType.Game, gameId)).toString();
+//    * ```
+//    */
+//   static async generateFromKey(type: number, key: string) {
+//     const buffer = Buffer.alloc(13);
+//     buffer[0] = type & 0xff;
+//     Buffer.from(await sha256(key, { outputFormat: 'buffer' })).copy(
+//       <Uint8Array>buffer,
+//       1,
+//       0,
+//       12,
+//     );
+//     return new ObjectId(buffer);
+//   }
+//   toString() {
+//     return bs58.encode(<Uint8Array>this._buffer);
+//   }
+// }
 export const ObjectType = {
     MemberAccount: 8,
     MemberVerification: 15,

package/dist/services/ObjectType.d.ts

@@ -0,0 +1,10 @@
+export declare const ObjectType: {
+    MemberAccount: number;
+    MemberVerification: number;
+    Deposit: number;
+    Withdrawal: number;
+    File: number;
+    Game: number;
+    GameSession: number;
+    MayaSession: number;
+};

package/dist/services/ObjectType.js

@@ -0,0 +1,10 @@
+export const ObjectType = {
+    MemberAccount: 8,
+    MemberVerification: 15,
+    Deposit: 9,
+    Withdrawal: 14,
+    File: 16,
+    Game: 203,
+    GameSession: 204,
+    MayaSession: 230,
+};

package/dist/services/index.d.ts

@@ -3,10 +3,11 @@ export * from './auth.service';
 export * from './cmsPortal.service';
 export * from './file.service';
 export * from './game.service';
-export * from './graphqlRequest';
-export * from './httpRequest';
 export * from './portal.service';
 export * from './report.service';
-export * from './sha256';
 export * from './trigger.service';
 export * from './wallet.service';
+export * from './graphqlRequest';
+export * from './httpRequest';
+export * from './ObjectType';
+export * from './sha256';

package/dist/services/index.js

@@ -3,10 +3,11 @@ export * from './auth.service.js';
 export * from './cmsPortal.service.js';
 export * from './file.service.js';
 export * from './game.service.js';
-export * from './graphqlRequest.js';
-export * from './httpRequest.js';
 export * from './portal.service.js';
 export * from './report.service.js';
-export * from './sha256.js';
 export * from './trigger.service.js';
 export * from './wallet.service.js';
+export * from './graphqlRequest.js';
+export * from './httpRequest.js';
+export * from './ObjectType.js';
+export * from './sha256.js';

package/dist/styles/theme.css

@@ -1,5 +1,5 @@
 @plugin '@tailwindcss/typography';
-@plugin 'tailwindcss-plugin-zag';
+@plugin 'tailwind-zag';
 
 @layer base {
   html {
@@ -694,4 +694,4 @@
 @custom-variant scrollbar (&::-webkit-scrollbar);
 @custom-variant scrollbar-thumb (&::-webkit-scrollbar-thumb);
 @custom-variant scrollbar-track (&::-webkit-scrollbar-track);
-@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));