@opexa/portal-components 0.0.84 → 0.0.86

package/dist/client/hooks/useDepositQuery.js

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getDeposit } from '../../services/index.js';
-import { getDepositQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getDepositQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useDepositQuery = (id, config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useQuery({
         ...config,
@@ -16,10 +15,7 @@ export const useDepositQuery = (id, config) => {
                 : sessionQuery.data?.status === 'authenticated',
         queryKey: getDepositQueryKey(id),
         queryFn: async ({ signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession({ signal });
             invariant(session.status === 'authenticated');
             const deposit = await getDeposit(id, {
                 signal,

package/dist/client/hooks/useDepositRecordsQuery.js

@@ -1,11 +1,10 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getDepositRecords } from '../../services/index.js';
-import { getDepositRecordsQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getDepositRecordsQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useDepositRecordsQuery = (input, config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useInfiniteQuery({
         ...config,
@@ -14,10 +13,7 @@ export const useDepositRecordsQuery = (input, config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getDepositRecordsQueryKey(input),
         queryFn: async ({ pageParam, signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession({ signal });
             invariant(session.status === 'authenticated');
             return await getDepositRecords({ ...input, after: pageParam }, {
                 signal,

package/dist/client/hooks/useDepositsCountQuery.js

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getDepositsCount } from '../../services/index.js';
-import { getDepositsCountQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getDepositsCountQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useDepositsCountQuery = (config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useQuery({
         ...config,
@@ -14,10 +13,7 @@ export const useDepositsCountQuery = (config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getDepositsCountQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession({ signal });
             invariant(session.status === 'authenticated');
             const depositsCount = await getDepositsCount({
                 signal,

package/dist/client/hooks/useEndGameSessionMutation.js

@@ -2,18 +2,14 @@ import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { LEGACY_GAME_PROVIDERS } from '../../constants/index.js';
 import { endGameSession, endGameSession__legacy } from '../../services/index.js';
-import { getEndGameSessionMutationKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getEndGameSessionMutationKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 export const useEndGameSessionMutation = (config) => {
-    const queryClient = getQueryClient();
     return useMutation({
         ...config,
         mutationKey: getEndGameSessionMutationKey(),
         mutationFn: async (input) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession();
             invariant(session.status === 'authenticated');
             if (LEGACY_GAME_PROVIDERS.includes(input.game.provider)) {
                 await endGameSession__legacy(input.session.id, {

package/dist/client/hooks/useFavoriteGamesQuery.js

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getFavoriteGames } from '../../services/index.js';
-import { getFavoriteGamesQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getFavoriteGamesQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useFavoriteGamesQuery = (config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     return useQuery({
         ...config,
@@ -14,10 +13,7 @@ export const useFavoriteGamesQuery = (config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getFavoriteGamesQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession({ signal });
             invariant(session.status === 'authenticated');
             const favoriteGames = getFavoriteGames({
                 signal,

package/dist/client/hooks/useInstapayBankListQuery.js

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getInstapayBankList } from '../../services/index.js';
-import { getInstapayBankListQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getInstapayBankListQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useInstapayBankListQuery = (config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useQuery({
         ...config,
@@ -14,10 +13,7 @@ export const useInstapayBankListQuery = (config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getInstapayBankListQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession({ signal });
             invariant(session.status === 'authenticated');
             const instapayBankList = await getInstapayBankList({
                 signal,

package/dist/client/hooks/useIsMayaSessionValidQuery.js

@@ -1,13 +1,12 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { validateMayaSession } from '../../services/index.js';
-import { getIsMayaSessionValidQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getIsMayaSessionValidQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useOnMMA } from './useOnMMA.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useIsMayaSessionValidQuery = (config) => {
     const [onMMA] = useOnMMA();
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useQuery({
         gcTime: 0,
@@ -23,10 +22,7 @@ export const useIsMayaSessionValidQuery = (config) => {
                 : sessionQuery.data?.status === 'authenticated',
         queryKey: getIsMayaSessionValidQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession({ signal });
             invariant(session.status === 'authenticated');
             try {
                 await validateMayaSession({

package/dist/client/hooks/useMarkGameAsFavoriteMutation.js

@@ -2,17 +2,14 @@ import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getSession } from '../../client/services/index.js';
 import { markGameAsFavorite } from '../../services/index.js';
-import { getFavoriteGamesQueryKey, getGamesQueryKey, getMarkGameAsFavoriteMutationKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getFavoriteGamesQueryKey, getGamesQueryKey, getMarkGameAsFavoriteMutationKey, getQueryClient, } from '../../utils/index.js';
 export const useMarkGameAsFavoriteMutation = (config) => {
     const queryClient = getQueryClient();
     const mutation = useMutation({
         ...config,
         mutationKey: getMarkGameAsFavoriteMutationKey(),
         mutationFn: async (id) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession();
             invariant(session.status === 'authenticated');
             await markGameAsFavorite(id, {
                 headers: {

package/dist/client/hooks/useMarkMessageAsReadMutation.js

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { markMessageAsRead } from '../../services/index.js';
-import { getMarkMessageAsReadMutationKey, getMessagesQueryKey, getQueryClient, getSessionQueryKey, getUnreadMessagesCountQueryKey, } from '../../utils/index.js';
+import { getMarkMessageAsReadMutationKey, getMessagesQueryKey, getQueryClient, getUnreadMessagesCountQueryKey, } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 export const useMarkMessageAsReadMutation = (config) => {
     const queryClient = getQueryClient();
@@ -9,10 +9,7 @@ export const useMarkMessageAsReadMutation = (config) => {
         ...config,
         mutationKey: getMarkMessageAsReadMutationKey(),
         mutationFn: async (id) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession();
             invariant(session.status === 'authenticated');
             await markMessageAsRead(id, {
                 headers: {

package/dist/client/hooks/useMemberVerificationQuery.js

@@ -1,21 +1,17 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getMemberVerification } from '../../services/index.js';
-import { getMemberVerificationQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getMemberVerificationQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useMemberVerificationQuery = (config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useQuery({
         enabled: sessionQuery.data?.status === 'authenticated',
         ...config,
         queryKey: getMemberVerificationQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession({ signal });
             invariant(session.status === 'authenticated');
             return await getMemberVerification({
                 signal,

package/dist/client/hooks/useMessagesQuery.js

@@ -1,11 +1,10 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getMessages } from '../../services/index.js';
-import { getMessagesQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getMessagesQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useMessagesQuery = (input, config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useInfiniteQuery({
         ...config,
@@ -14,10 +13,7 @@ export const useMessagesQuery = (input, config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getMessagesQueryKey(input),
         queryFn: async ({ pageParam, signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession({ signal });
             invariant(session.status === 'authenticated');
             return getMessages({ ...input, after: pageParam }, {
                 signal,

package/dist/client/hooks/usePaymentSettingsQuery.js

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getPaymentSettings } from '../../services/index.js';
-import { getPaymentSettingsQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getPaymentSettingsQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const usePaymentSettingsQuery = (config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useQuery({
         ...config,
@@ -14,10 +13,7 @@ export const usePaymentSettingsQuery = (config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getPaymentSettingsQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession({ signal });
             invariant(session.status === 'authenticated');
             return await getPaymentSettings({
                 signal,

package/dist/client/hooks/useProfileCompletionQuery.js

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getProfileCompletion } from '../../services/index.js';
-import { getProfileCompletionQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getProfileCompletionQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useProfileCompletionQuery = (config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useQuery({
         ...config,
@@ -14,10 +13,7 @@ export const useProfileCompletionQuery = (config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getProfileCompletionQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession({ signal });
             invariant(session.status === 'authenticated');
             return await getProfileCompletion({
                 signal,

package/dist/client/hooks/useTransactionRecordsQuery.js

@@ -1,11 +1,10 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getTransactionRecords, } from '../../services/index.js';
-import { getQueryClient, getSessionQueryKey, getTransactionRecordsQueryKey, } from '../../utils/index.js';
+import { getTransactionRecordsQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useTransactionRecordsQuery = (input, config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useInfiniteQuery({
         ...config,
@@ -14,10 +13,7 @@ export const useTransactionRecordsQuery = (input, config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getTransactionRecordsQueryKey(input),
         queryFn: async ({ pageParam, signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession({ signal });
             invariant(session.status === 'authenticated');
             return getTransactionRecords({ ...input, after: pageParam }, {
                 signal,

package/dist/client/hooks/useUnmarkGameAsFavoriteMutation.js

@@ -2,17 +2,14 @@ import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getSession } from '../../client/services/index.js';
 import { unmarkGameAsFavorite } from '../../services/index.js';
-import { getFavoriteGamesQueryKey, getGamesQueryKey, getQueryClient, getSessionQueryKey, getUnmarkGameAsFavoriteMutationKey, } from '../../utils/index.js';
+import { getFavoriteGamesQueryKey, getGamesQueryKey, getQueryClient, getUnmarkGameAsFavoriteMutationKey, } from '../../utils/index.js';
 export const useUnmarkGameAsFavoriteMutation = (config) => {
     const queryClient = getQueryClient();
     const mutation = useMutation({
         ...config,
         mutationKey: getUnmarkGameAsFavoriteMutationKey(),
         mutationFn: async (id) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession();
             invariant(session.status === 'authenticated');
             await unmarkGameAsFavorite(id, {
                 headers: {

package/dist/client/hooks/useUnreadMessagesCountQuery.js

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getUnreadMessagesCount, } from '../../services/index.js';
-import { getQueryClient, getSessionQueryKey, getUnreadMessagesCountQueryKey, } from '../../utils/index.js';
+import { getUnreadMessagesCountQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useUnreadMessagesCountQuery = (input, config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useQuery({
         ...config,
@@ -14,10 +13,7 @@ export const useUnreadMessagesCountQuery = (input, config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getUnreadMessagesCountQueryKey(input),
         queryFn: async ({ signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession();
             invariant(session.status === 'authenticated');
             return await getUnreadMessagesCount(input, {
                 signal,

package/dist/client/hooks/useUpdateAccountMutation.js

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { updateMemberAccount, } from '../../services/index.js';
-import { getAccountQueryKey, getProfileCompletionQueryKey, getQueryClient, getSessionQueryKey, getUpdateAccountMutationKey, } from '../../utils/index.js';
+import { getAccountQueryKey, getProfileCompletionQueryKey, getQueryClient, getUpdateAccountMutationKey, } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useAccountQuery } from './useAccountQuery.js';
 export const useUpdateAccountMutation = (config) => {
@@ -11,10 +11,7 @@ export const useUpdateAccountMutation = (config) => {
         ...config,
         mutationKey: getUpdateAccountMutationKey(),
         mutationFn: async (input) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession();
             invariant(session.status === 'authenticated');
             invariant(accountQuery.data);
             await updateMemberAccount(accountQuery.data.id, input, {

package/dist/client/hooks/useWalletQuery.js

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getWallet } from '../../services/index.js';
-import { getQueryClient, getSessionQueryKey, getWalletQueryKey, } from '../../utils/index.js';
+import { getWalletQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useWalletQuery = (config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     return useQuery({
         ...config,
@@ -14,12 +13,14 @@ export const useWalletQuery = (config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getWalletQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession({ signal });
             invariant(session.status === 'authenticated');
-            const wallet = await getWallet({ signal });
+            const wallet = await getWallet({
+                signal,
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
             return wallet ?? null;
         },
     });

package/dist/client/hooks/useWithdrawalRecordsQuery.js

@@ -1,11 +1,10 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getWithdrawalRecords, } from '../../services/index.js';
-import { getQueryClient, getSessionQueryKey, getWithdrawalRecordsQueryKey, } from '../../utils/index.js';
+import { getWithdrawalRecordsQueryKey } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useWithdrawalRecordsQuery = (input, config) => {
-    const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useInfiniteQuery({
         ...config,
@@ -14,10 +13,7 @@ export const useWithdrawalRecordsQuery = (input, config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getWithdrawalRecordsQueryKey(input),
         queryFn: async ({ pageParam, signal }) => {
-            const session = await queryClient.fetchQuery({
-                queryKey: getSessionQueryKey(),
-                queryFn: () => getSession(),
-            });
+            const session = await getSession();
             invariant(session.status === 'authenticated');
             return await getWithdrawalRecords({ ...input, after: pageParam }, {
                 signal,

package/dist/components/Account/Account.d.ts

@@ -1,6 +1,4 @@
-import type { ReactNode } from 'react';
 export interface AccountProps {
-    children?: ReactNode;
     /**
      * @default '0px'
      * @example

package/dist/components/Account/Account.js

@@ -6,9 +6,9 @@ import Link from 'next/link';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useAccountQuery, useGlobalStore, useLocaleInfo, useSignOutMutation, useUnreadMessagesCountQuery, useWalletQuery, } from '../../client/hooks/index.js';
-import { AlertCircleIcon, Bell01Icon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, Gift01Icon, Logout01Icon, Settings02Icon, XIcon, } from '../../icons/index.js';
+import { AlertCircleIcon, Bell01Icon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, Gift01Icon, Logout01Icon, Settings02Icon, } from '../../icons/index.js';
 import avatarPlaceholder from '../../images/placeholder-avatar.png';
-import { Badge, Button, Drawer, IconButton, Popover } from '../../ui/index.js';
+import { Badge, Button, Drawer, Popover } from '../../ui/index.js';
 import { formatNumber, parseDecimal } from '../../utils/index.js';
 import { accountRecipe } from './account.recipe.js';
 const recipe = accountRecipe();
@@ -25,17 +25,19 @@ export function Account(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.account__mobile.open, onOpenChange: (details) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Drawer.Root, { open: globalStore.account__mobile.open, onOpenChange: (details) => {
                     globalStore.account__mobile.setOpen(details.open);
-                }, lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, className: "lg:hidden", children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: globalStore.account__mobile.open ? (_jsx(XIcon, {})) : (_jsx(Image, { src: avatarPlaceholder, alt: "", width: 100, height: 100, className: "size-10" })) })) }), _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'px-xl', 'py-6', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
-                                    ['--offset-top-mobile']: mobileOffsetTop,
-                                    ['--offset-top-desktop']: desktopOffsetTop,
-                                }, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl, shouldShowSettings: shouldShowSettings })] }) }) })] }), _jsxs(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
+                }, lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'px-xl', 'py-6', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
+                                ['--offset-top-mobile']: mobileOffsetTop,
+                                ['--offset-top-desktop']: desktopOffsetTop,
+                            }, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl, shouldShowSettings: shouldShowSettings })] }) }) }) }), _jsx(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
                     globalStore.account.setOpen(details.open);
                 }, lazyMount: true, unmountOnExit: true, positioning: {
                     placement: 'bottom',
                     strategy: 'fixed',
-                }, children: [_jsx(Popover.Trigger, { className: "hidden lg:flex", asChild: true, children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: _jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-10" }) })) }), _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl, shouldShowSettings: shouldShowSettings })] }) }) })] })] }));
+                }, ids: {
+                    trigger: 'opexa-portal-components:account-trigger',
+                }, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl, shouldShowSettings: shouldShowSettings })] }) }) }) })] }));
 }
 function Profile() {
     const accountQuery = useAccountQuery();

package/dist/components/Account/AccountTrigger.d.ts

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

package/dist/components/Account/AccountTrigger.js

@@ -1,13 +1,25 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
+import Image from 'next/image';
+import { useMediaQuery } from 'usehooks-ts';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/index.js';
-export function AccountTrigger(props) {
-    const { mobile, ...rest } = props;
-    const { open, setOpen } = useGlobalStore(useShallow((ctx) => (mobile ? ctx.account__mobile : ctx.account)));
-    return (_jsx(ark.button, { type: "button", "aria-label": "Toggle account menu", "data-open": open ? 'open' : 'closed', ...rest, onClick: (e) => {
-            setOpen(!open);
+import avatarPlaceholder from '../../images/placeholder-avatar.png';
+import { IconButton } from '../../ui/index.js';
+export function AccountTrigger({ asChild, children, ...props }) {
+    const desktop = useMediaQuery('(min-width: 1024px)', {
+        defaultValue: true,
+    });
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+    })));
+    const disclosure = desktop
+        ? globalStore.account
+        : globalStore.account__mobile;
+    return (_jsx(ark.button, { type: "button", "aria-label": "Toggle account menu", "data-open": disclosure.open ? 'open' : 'closed', ...props, onClick: (e) => {
+            disclosure.setOpen(!disclosure.open);
             return props.onClick?.(e);
-        } }));
+        }, asChild: !children ? true : asChild, children: children ?? (_jsx(IconButton, { id: "opexa-portal-components:account-trigger", size: "sm", colorScheme: "gray", children: _jsx(Image, { src: avatarPlaceholder, alt: "", width: 64, height: 64, className: "size-10" }) })) }));
 }

package/dist/components/Bonuses/BonusesTrigger.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithRef } from 'react';
 interface BonusesTriggerProps extends ComponentPropsWithRef<'a'> {
 }
-export declare function BonusesTrigger(props: BonusesTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BonusesTrigger({ children, className, ...props }: BonusesTriggerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Bonuses/BonusesTrigger.js

@@ -5,7 +5,7 @@ import { twMerge } from 'tailwind-merge';
 import { useBonusesQuery, useCashbackBonusesQuery } from '../../client/hooks/index.js';
 import { Gift01Icon } from '../../icons/index.js';
 import { iconButtonRecipe } from '../../ui/IconButton/iconButton.recipe.js';
-export function BonusesTrigger(props) {
+export function BonusesTrigger({ children, className, ...props }) {
     const bonusesQuery = useBonusesQuery({
         refetchInterval: 10000,
     });
@@ -18,6 +18,6 @@ export function BonusesTrigger(props) {
     return (_jsx(Link, { "aria-label": "View Rewards", "data-count": totalCount, ...props, href: props.href ?? '/rewards', className: iconButtonRecipe({
             size: 'sm',
             colorScheme: 'gray',
-            className: twMerge('relative', props.className),
-        }), children: props.children ?? (_jsxs(_Fragment, { children: [totalCount > 0 && (_jsx("div", { className: "bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 min-w-5 rounded-full border px-1.5 text-2xs font-semibold", children: totalCount })), _jsx(Gift01Icon, {})] })) }));
+            className: twMerge('relative', className),
+        }), children: children ?? (_jsxs(_Fragment, { children: [totalCount > 0 && (_jsx("div", { className: "bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 min-w-5 rounded-full border px-1.5 text-2xs font-semibold", children: totalCount })), _jsx(Gift01Icon, {})] })) }));
 }

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

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

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts

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