@opexa/portal-components 0.0.154 → 0.0.158

package/dist/client/hooks/useBonusesQuery.d.ts

@@ -1,2 +1,3 @@
+import { type BonusesInput } from '../../services/wallet';
 import type { Bonus, Query } from '../../types';
-export declare const useBonusesQuery: Query<Bonus[]>;
+export declare const useBonusesQuery: Query<Bonus[], BonusesInput>;

package/dist/client/hooks/useBonusesQuery.js

@@ -5,7 +5,7 @@ import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getBonusesCountQueryKey, getBonusesQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 import { useSessionQuery } from './useSessionQuery.js';
-export const useBonusesQuery = (config) => {
+export const useBonusesQuery = (input, config) => {
     const queryClient = getQueryClient();
     const sessionQuery = useSessionQuery();
     const query = useQuery({
@@ -14,11 +14,11 @@ export const useBonusesQuery = (config) => {
         enabled: config?.enabled === false
             ? false
             : sessionQuery.data?.status === 'authenticated',
-        queryKey: getBonusesQueryKey(),
+        queryKey: getBonusesQueryKey(input),
         queryFn: async ({ signal }) => {
             const session = await getSession();
             invariant(session.status === 'authenticated');
-            const bonuses = await getBonuses({
+            const bonuses = await getBonuses(input, {
                 signal,
                 headers: {
                     Authorization: `Bearer ${session.token}`,

package/dist/client/hooks/useMarkMessageAsReadMutation.js

@@ -44,7 +44,11 @@ export const useMarkMessageAsReadMutation = (config) => {
                     })),
                 };
             });
-            queryClient.setQueryData(getUnreadMessagesCountQueryKey(), (prev) => {
+            queryClient.setQueriesData({
+                queryKey: getUnreadMessagesCountQueryKey(),
+                exact: false,
+                type: 'all',
+            }, (prev) => {
                 return prev && prev > 0 ? prev - 1 : 0;
             });
             return id;

package/dist/client/hooks/useMessagesQuery.js

@@ -7,6 +7,7 @@ import { useSessionQuery } from './useSessionQuery.js';
 export const useMessagesQuery = (input, config) => {
     const sessionQuery = useSessionQuery();
     const query = useInfiniteQuery({
+        staleTime: 1000 * 2,
         ...config,
         enabled: config?.enabled === false
             ? false

package/dist/client/hooks/useUnreadMessagesCountQuery.js

@@ -7,6 +7,7 @@ import { useSessionQuery } from './useSessionQuery.js';
 export const useUnreadMessagesCountQuery = (input, config) => {
     const sessionQuery = useSessionQuery();
     const query = useQuery({
+        staleTime: 1000 * 2,
         ...config,
         enabled: config?.enabled === false
             ? false

package/dist/components/AccountVerification/AccountVerification.js

@@ -6,7 +6,6 @@ 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,8 +19,6 @@ export function AccountVerification(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         kyc: ctx.kyc,
     })));
-    const sessionQuery = useSessionQuery();
-    const session = sessionQuery.data;
     const profileCompletionQuery = useProfileCompletionQuery();
     const profileCompletion = profileCompletionQuery.data;
     const verificationQuery = useMemberVerificationQuery();
@@ -33,8 +30,7 @@ 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: ((verification && verification.status !== 'PENDING') ||
-                            session?.status === 'authenticated') && (_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 || verification?.status === 'REJECTED') && (_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/Bonuses/Bonuses.client.js

@@ -1,10 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { isAfter } from 'date-fns';
 import { clamp } from 'lodash-es';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
 import { useBonusesQuery } from '../../client/hooks/useBonusesQuery.js';
@@ -23,32 +22,45 @@ import { Button } from '../../ui/Button/index.js';
 import { Popover } from '../../ui/Popover/index.js';
 import { Progress } from '../../ui/Progress/index.js';
 import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
-import { capitalize } from '../../utils/capitalize.js';
 import { formatNumber } from '../../utils/formatNumber.js';
 import { parseDecimal } from '../../utils/parseDecimal.js';
 import { ClaimSpotBonus } from './ClaimSpotBonus.js';
-const TABS = ['ALL', 'ACTIVE', 'CASHBACKS'];
+const TabSchema = z
+    .enum(['all', 'active', 'cashbacks'])
+    .optional()
+    .nullable()
+    .catch('all')
+    .transform((v) => v ?? 'all');
 export function Bonuses__client(props) {
-    const [tab, setTab] = useState(TABS[0]);
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const tab = TabSchema.parse(searchParams.get('tab'));
+    const setTab = (tab) => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.set('tab', tab);
+        router.push(`${pathname}?${params.toString()}`);
+    };
     const bonusesQuery = useBonusesQuery({
+        ...(tab === 'active' && {
+            filter: {
+                expiration: {
+                    greaterThanOrEqual: new Date(),
+                },
+            },
+        }),
+    }, {
         refetchInterval: 5000,
+        enabled: tab !== 'cashbacks',
     });
     const cashbackBonusesQuery = useCashbackBonusesQuery({
         refetchInterval: 5000,
     });
-    const bonuses = tab === 'CASHBACKS'
-        ? []
-        : (bonusesQuery.data ?? []).filter((bonus) => {
-            return tab === 'ACTIVE' ? (new Date(), bonus.expiration) : true;
-        });
-    const cashbackBonuses = (cashbackBonusesQuery.data ?? []).filter((bonus) => {
-        return tab === 'ACTIVE'
-            ? isAfter(new Date(), bonus.cashback.activationEndDateTime)
-            : true;
-    });
+    const bonuses = bonusesQuery.data ?? [];
+    const cashbackBonuses = cashbackBonusesQuery.data ?? [];
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Rewards' }), _jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
-                            setTab(z.enum(TABS).parse(details.value));
-                        }, className: "mt-3", children: [TABS.map((value) => (_jsxs(SegmentGroup.Item, { value: value, children: [_jsx(SegmentGroup.ItemText, { children: capitalize(value) }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, value))), _jsx(SegmentGroup.Indicator, {})] }), _jsxs("div", { className: "mt-3xl grid gap-3xl lg:mt-lg lg:grid-cols-3", children: [tab === 'ALL' && _jsx(SpotBonus, {}), tab !== 'CASHBACKS' && (_jsx(_Fragment, { children: bonuses.map((bonus) => (_jsx(Bonus, { data: bonus, viewDetailsUrl: props.viewBonusDetailsUrl ?? '/rewards' }, bonus.id))) })), cashbackBonuses.map((cashbackBonus) => (_jsx(CashbackBonus, { data: cashbackBonus }, cashbackBonus.id)))] })] }), _jsx(ClaimSpotBonus, {})] }));
+                            setTab(TabSchema.parse(details.value));
+                        }, className: "mt-3", children: [_jsxs(SegmentGroup.Item, { value: "all", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "active", children: [_jsx(SegmentGroup.ItemText, { children: "Active" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "cashbacks", children: [_jsx(SegmentGroup.ItemText, { children: "Cashbacks" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsxs("div", { className: "mt-3xl grid gap-3xl lg:mt-lg lg:grid-cols-3", children: [tab === 'all' && _jsx(SpotBonus, {}), bonuses.map((bonus) => (_jsx(Bonus, { data: bonus, viewDetailsUrl: props.viewBonusDetailsUrl ?? '/rewards' }, bonus.id))), cashbackBonuses.map((cashbackBonus) => (_jsx(CashbackBonus, { data: cashbackBonus }, cashbackBonus.id)))] })] }), _jsx(ClaimSpotBonus, {})] }));
 }
 function Bonus(props) {
     const bonus = props.data;

package/dist/components/Bonuses/Bonuses.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
 import { prefetchBonusesQuery } from '../../server/utils/prefetchBonusesQuery.js';
 import { prefetchCashbacksQuery } from '../../server/utils/prefetchCashbacksQuery.js';
 import { Bonuses__client } from './Bonuses.client.js';
 export async function Bonuses(props) {
     await Promise.allSettled([prefetchBonusesQuery(), prefetchCashbacksQuery()]);
-    return _jsx(Bonuses__client, { ...props });
+    return (_jsx(Suspense, { fallback: null, children: _jsx(Bonuses__client, { ...props }) }));
 }

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

@@ -1,6 +1,6 @@
 export declare const OnlineBankDepositContext: (props: {
     value: {
-        view: "form" | "vca";
+        view: "vca" | "form";
         status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
@@ -13,7 +13,7 @@ export declare const OnlineBankDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, 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;

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

@@ -1,6 +1,6 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        view: "form" | "qrCode";
+        view: "qrCode" | "form";
         status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
@@ -13,7 +13,7 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, 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/KYC/AutoOpen.d.ts

@@ -0,0 +1 @@
+export declare function AutoOpen(): null;

package/dist/components/KYC/AutoOpen.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useShallow } from 'zustand/shallow';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+export function AutoOpen() {
+    const kycStore = useGlobalStore(useShallow((ctx) => ctx.kyc));
+    const { data: session } = useSessionQuery();
+    const { data: account } = useAccountQuery();
+    const { data: verification } = useMemberVerificationQuery();
+    const shouldOpen = !account?.realName ||
+        !account?.birthDay ||
+        !verification ||
+        verification.status === 'REJECTED';
+    useEffect(() => {
+        if (session?.status == 'authenticated' &&
+            !kycStore['~touched'] &&
+            shouldOpen) {
+            kycStore.setOpen(true);
+            return;
+        }
+    }, [kycStore, session?.status, shouldOpen]);
+    return null;
+}

package/dist/components/KYC/BasicInformation.js

@@ -5,11 +5,11 @@ import { isNil, omitBy, size } from 'lodash-es';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import invariant from 'tiny-invariant';
+import { useInterval } from 'usehooks-ts';
 import { z } from 'zod';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useUpdateAccountMutation } from '../../client/hooks/useUpdateAccountMutation.js';
 import { toaster } from '../../client/utils/toaster.js';
-import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
@@ -55,6 +55,8 @@ export function BasicInformation() {
     });
     const accountQuery = useAccountQuery();
     const account = accountQuery.data;
+    const completed = account != null && account.realName != null && account.birthDay != null;
+    useInterval(() => kyc.setStep(2), completed ? 1000 : null);
     const updateAccountMutation = useUpdateAccountMutation({
         onError(error) {
             toaster.error({
@@ -80,8 +82,6 @@ export function BasicInformation() {
             });
         }
     }, [account, form, kyc]);
-    if (accountQuery.isLoading)
-        return _jsx(SpinnerIcon, {});
     return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center text-lg font-semibold", children: "Basic Information" }), _jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Enter your basic details for identification and communication." }), _jsxs("form", { className: "mt-3", onSubmit: form.handleSubmit((data) => {
                     invariant(account);
                     const input = omitBy({
@@ -93,5 +93,7 @@ export function BasicInformation() {
                     if (size(input) === 0)
                         return kyc.setStep(2);
                     updateAccountMutation.mutate(input);
-                }), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!accountQuery.data?.realName, children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-3", invalid: !!form.formState.errors.branchCode, readOnly: !!accountQuery.data?.birthDay, children: [_jsx(Field.Label, { children: "Date of Birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] }), _jsx(Button, { type: "submit", className: "mt-8", disabled: updateAccountMutation.isPending, children: "Continue" })] })] }));
+                }), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!accountQuery.data?.realName, children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-3", invalid: !!form.formState.errors.branchCode, readOnly: !!accountQuery.data?.birthDay, children: [_jsx(Field.Label, { children: "Date of Birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] }), _jsx(Button, { type: "submit", className: "mt-8", disabled: accountQuery.isLoading ||
+                            updateAccountMutation.isPending ||
+                            completed, children: completed ? (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", className: "size-5", children: [_jsx("path", { fill: "currentColor", d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25" }), _jsx("path", { fill: "currentColor", d: "M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z", children: _jsx("animateTransform", { attributeName: "transform", dur: "0.75s", repeatCount: "indefinite", type: "rotate", values: "0 12 12;360 12 12" }) })] })) : ('Continue') })] })] }));
 }

package/dist/components/KYC/CaptureSelfie.js

@@ -10,9 +10,8 @@ import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { onMobileDevice } from '../../utils/onMobileDevice.js';
 import { useKYCContext } from './KYCContext.js';
-import { loadFaceApiModels } from './loadModels.js';
 import PersonOverlayDesktop from './PersonOverlayDesktop.js';
-import { dataURLtoBlob, resizeFile } from './utils.js';
+import { dataURLtoBlob, loadFaceApiModels, resizeFile } from './utils.js';
 export function CaptureSelfie() {
     const kyc = useKYCContext();
     const { mutate, isPending } = useUploadImageFileMutation();

package/dist/components/KYC/FileUpload.js

@@ -1,17 +1,43 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Image from 'next/image';
+import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useFileQuery } from '../../client/hooks/useFileQuery.js';
+import invariant from 'tiny-invariant';
 import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
+import { getSession } from '../../client/services/getSession.js';
 import { UploadCloud02Icon } from '../../icons/UploadCloud02Icon.js';
+import { getFile } from '../../services/file.js';
 import { Button } from '../../ui/Button/index.js';
+import { createPoll } from '../../utils/createPoll.js';
 import { useKYCContext } from './KYCContext.js';
 import { validateFile } from './utils.js';
 function FileUpload({ value, name, hasDescription, onChange, captureObject, }) {
     const kyc = useKYCContext();
     const { mutate, isPending } = useUploadImageFileMutation();
-    const { data: uploadedImage, isSuccess: uploadedImageReady } = useFileQuery(value);
+    const [uploadedImageUrl, setUploadedImageUrl] = useState(null);
+    async function pollImage(id) {
+        if (!id)
+            return;
+        const poll = createPoll(async () => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            const file = await getFile(id, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            return file ?? null;
+        }, { until: (r) => !!r, interval: 1000, maxAttempt: 5 });
+        const image = await poll();
+        if (!image) {
+            console.error('Image not found or failed to load');
+        }
+        setUploadedImageUrl(image?.url ?? null);
+    }
+    useEffect(() => {
+        pollImage(value);
+    }, [value]);
     if (isPending) {
         return (_jsx("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: _jsx("div", { className: "flex items-center justify-center", children: _jsx("span", { className: "text-text-secondary-700", children: "Uploading..." }) }) }));
     }
@@ -38,6 +64,6 @@ function FileUpload({ value, name, hasDescription, onChange, captureObject, }) {
             fileInput.click();
         }
     }
-    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [uploadedImageReady ? (_jsxs("div", { className: "border-border-primary bg-bg-primary min-h-[9.25rem]", children: [_jsx(Image, { src: uploadedImage?.url ?? '', alt: "Uploaded", className: "w-full object-contain", width: 350, height: 350, draggable: false }), _jsx(Button, { size: "xs", variant: "outline", className: twMerge('mx-auto mt-4 w-fit', value && 'hidden'), type: "button", onClick: handleUploadClick, children: "Reupload" })] })) : hasDescription ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-quinary size-4" }) }), _jsxs("p", { className: "text-text-tertiary-600 text-center text-sm", children: [_jsx("span", { className: "text-button-secondary-fg cursor-pointer font-semibold", onClick: handleUploadClick, children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] })] })) : null, _jsx("input", { type: "file", id: `file-upload-${name}`, name: name, onChange: handleFileChange, accept: "image/png, image/jpg, image/jpeg", className: "hidden" }), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => kyc.setCapturing(captureObject), disabled: isPending, type: "button", children: value ? 'Retake Photo' : 'Take a Photo' })] }));
+    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [uploadedImageUrl ? (_jsxs("div", { className: "border-border-primary bg-bg-primary min-h-[9.25rem]", children: [_jsx(Image, { src: uploadedImageUrl, alt: "Uploaded", className: "w-full object-contain", width: 350, height: 350, draggable: false }), _jsx(Button, { size: "xs", variant: "outline", className: twMerge('mx-auto mt-4 w-fit', value && 'hidden'), type: "button", onClick: handleUploadClick, children: "Reupload" })] })) : hasDescription ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-quinary size-4" }) }), _jsxs("p", { className: "text-text-tertiary-600 text-center text-sm", children: [_jsx("span", { className: "text-button-secondary-fg cursor-pointer font-semibold", onClick: handleUploadClick, children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] })] })) : null, _jsx("input", { type: "file", id: `file-upload-${name}`, name: name, onChange: handleFileChange, accept: "image/png, image/jpg, image/jpeg", className: "hidden" }), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => kyc.setCapturing(captureObject), disabled: isPending, type: "button", children: value ? 'Retake Photo' : 'Take a Photo' })] }));
 }
 export default FileUpload;

package/dist/components/KYC/KYC.js

@@ -4,11 +4,12 @@ import dynamic from 'next/dynamic';
 import Script from 'next/script';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { AutoOpen } from './AutoOpen.js';
 const Component = dynamic(() => import('./KYC.lazy.js').then((m) => m.KYC), {
     ssr: false,
     loading: () => null,
 });
 export function KYC(props) {
     const touched = useGlobalStore(useShallow((ctx) => ctx.kyc['~touched']));
-    return (_jsxs(_Fragment, { children: [touched && _jsx(Component, { ...props }), _jsx(Script, { src: "https://docs.opencv.org/4.7.0/opencv.js", async: true }), _jsx(Script, { src: "https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js", strategy: "afterInteractive" })] }));
+    return (_jsxs(_Fragment, { children: [touched && _jsx(Component, { ...props }), _jsx(AutoOpen, {}), _jsx(Script, { src: "https://docs.opencv.org/4.7.0/opencv.js", defer: true }), _jsx(Script, { src: "https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js", defer: true })] }));
 }

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

@@ -1,14 +1,11 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
-import { useEffect } from 'react';
 import { useShallow } from 'zustand/shallow';
-import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
-import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
 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';
@@ -17,31 +14,11 @@ import { KYCContext } from './KYCContext.js';
 import { PersonalInformation } from './PersonalInformation.js';
 import { useKYC } from './useKYC.js';
 export function KYC(props) {
-    const kyc = useKYC();
-    const accountQuery = useAccountQuery();
-    const memberVerification = useMemberVerificationQuery();
-    const isBasicInfoVerified = Boolean(accountQuery.data?.realName) &&
-        Boolean(accountQuery.data?.birthDay);
-    const isMemberUploaded = Boolean(memberVerification.data?.idFrontImage) &&
-        Boolean(memberVerification.data?.selfieImage);
-    const memberStatus = memberVerification.data?.status;
-    //check steps
-    useEffect(() => {
-        if (memberStatus === 'REJECTED') {
-            kyc.setStep(2);
-        }
-        else if (isBasicInfoVerified && isMemberUploaded) {
-            kyc.setStep(3);
-        }
-    }, [isBasicInfoVerified, isMemberUploaded, memberStatus, kyc]);
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         kyc: ctx.kyc,
     })));
+    const kyc = useKYC();
     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(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 === 2 && _jsx(IdentityVerification, {}), kyc.step === 3 && _jsx(PersonalInformation, {})] }))] }) })] }) }) }));
+            }, lazyMount: true, unmountOnExit: true, onExitComplete: kyc.reset, 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, {})] }))] }) })] }) }) }));
 }

package/dist/components/KYC/useKYC.d.ts

@@ -21,6 +21,7 @@ export interface UseKYCReturn {
     setFrontImageId: (id: string | null) => void;
     selfieImageId: string | null;
     setSelfieImageId: (id: string | null) => void;
+    reset: () => void;
 }
 export declare function useKYC(): UseKYCReturn;
 export {};

package/dist/components/KYC/useKYC.js

@@ -17,6 +17,13 @@ export function useKYC() {
             subscriber(detail);
         });
     };
+    const reset = () => {
+        setStep(1);
+        setDone(false);
+        setCapturing(null);
+        setFrontImageId(null);
+        setSelfieImageId(null);
+    };
     return {
         step,
         setStep,
@@ -30,5 +37,6 @@ export function useKYC() {
         setSelfieImageId,
         subscribe,
         triggerEvent,
+        reset,
     };
 }

package/dist/components/KYC/utils.d.ts

@@ -1,3 +1,4 @@
+export declare function loadFaceApiModels(): Promise<void>;
 export declare function dataURLtoBlob(dataURL: string): Blob;
 export declare const resizeFile: (file: File) => Promise<unknown>;
 export declare const MAX_FILE_SIZE = 10;

package/dist/components/KYC/utils.js

@@ -1,4 +1,13 @@
+import * as faceapi from 'face-api.js';
 import Resizer from 'react-image-file-resizer';
+export async function loadFaceApiModels() {
+    const MODEL_URL = '/models';
+    await Promise.all([
+        faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
+        faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
+        faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),
+    ]);
+}
 export function dataURLtoBlob(dataURL) {
     const parts = dataURL.split(';base64,');
     const contentType = parts[0].split(':')[1];

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

@@ -27,7 +27,7 @@ const TABS = ['ALL', 'UNREAD'];
 export function Messages(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
     const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, {
-        refetchInterval: globalStore.messages.open ? 5_000 : 10_000,
+        refetchInterval: globalStore.messages.open ? 5000 : 10000,
     });
     const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
     const messagesQuery = useMessagesQuery({
@@ -41,7 +41,7 @@ export function Messages(props) {
         }),
     }, {
         enabled: globalStore.messages.open,
-        refetchInterval: 5_000,
+        refetchInterval: 10000,
     });
     const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((e) => e.node)) ?? [];
     const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)

package/dist/components/Messages/MessagesPopup.js

@@ -29,22 +29,24 @@ export function MessagesPopup() {
         depositWithdrawal: ctx.depositWithdrawal,
     })));
     const markMessageAsReadMutation = useMarkMessageAsReadMutation();
-    const [paused, setPaused] = useState(false);
-    useInterval(() => setPaused(false), paused ? 1000 * 30 : null);
     const disclosure = useDisclosure({
         onOpenChange(open) {
             if (open) {
                 const message = messages.at(0);
-                if (!message || message.markedAsRead)
+                if (!message)
+                    return;
+                if (message.markedAsRead)
                     return;
                 markMessageAsReadMutation.mutate(message.id);
             }
             else {
                 setPaused(true);
-                setPage(1);
+                setIndex_(0);
             }
         },
     });
+    const [paused, setPaused] = useState(false);
+    useInterval(() => setPaused(false), paused ? 1000 * 30 : null);
     const messagesQuery = useMessagesQuery({
         first: 10,
         filter: {
@@ -62,10 +64,19 @@ export function MessagesPopup() {
             !globalStore.message.open &&
             !globalStore.kyc.open &&
             !paused,
-        refetchInterval: disclosure.open ? undefined : 10_000,
+        refetchInterval: disclosure.open ? undefined : 10000,
     });
     const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [];
-    const [page, setPage] = useState(1);
+    const [index, setIndex_] = useState(0);
+    const setIndex = (newIndex) => {
+        setIndex_(newIndex);
+        const message = messages.at(newIndex);
+        if (!message)
+            return;
+        if (message.markedAsRead)
+            return;
+        markMessageAsReadMutation.mutate(message.id);
+    };
     useEffect(() => {
         if (messages.length > 0) {
             disclosure.setOpen(true);
@@ -73,14 +84,8 @@ export function MessagesPopup() {
     }, [disclosure, messages.length, paused]);
     return (_jsx(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => {
             disclosure.setOpen(details.open);
-        }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Carousel.Root, { page: page, onPageChange: (details) => {
-                                    setPage(details.page);
-                                    const message = messages.at(details.page - 1);
-                                    if (!message)
-                                        return;
-                                    if (message.markedAsRead)
-                                        return;
-                                    markMessageAsReadMutation.mutate(message.id);
+        }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Carousel.Root, { page: index, onPageChange: (details) => {
+                                    setIndex(details.page);
                                 }, slideCount: messages.length, allowMouseDrag: true, children: [_jsx(Carousel.ItemGroup, { children: messages.map((message, index) => (_jsxs(Carousel.Item, { index: index, className: "select-none", children: [_jsx("div", { className: "bg-bg-brand-secondary text-text-brand mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(MessageIcon, { type: message.icon, className: "size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold xl:mt-xl", children: message.title }), message.content && (_jsx("div", { dangerouslySetInnerHTML: { __html: message.content }, className: "text-text-secondary-700 mt-xs pb-5 text-center text-sm" })), message.image && (_jsx("div", { className: "mt-5 pb-5", children: _jsx(Image, { src: message.image, alt: "", width: 400, height: 250, loading: "lazy", unoptimized: true, className: "h-auto w-full rounded-sm" }) })), message.actions.length ? (_jsx("div", { className: "mt-3xl flex flex-col gap-2 text-center lg:mt-4xl", children: message.actions.map((action, index) => (_jsx(Button, { asChild: true, children: _jsx(Link, { href: normalizeActionUrl(transactionsPageUrl, action.url), onClick: () => {
                                                                 disclosure.setOpen(false);
                                                             }, children: action.name }) }, index))) })) : null] }, message.id))) }), _jsxs(Carousel.Control, { className: "mt-5 flex items-center lg:mt-3xl", children: [_jsxs(Carousel.PrevTrigger, { className: "text-text-quarterary-500 hidden items-center gap-md font-semibold disabled:invisible lg:flex", children: [_jsx(ChevronLeftIcon, { className: "size-5" }), "Back"] }), _jsx(Carousel.IndicatorGroup, { className: "flex grow justify-center gap-xs", children: messages.map((message, index) => (_jsx(Carousel.Indicator, { index: index, className: "bg-bg-quaternary ui-current:bg-brand-400 size-2.5 rounded-full transition-all duration-150 ui-current:w-5" }, message.id))) }), _jsxs(Carousel.NextTrigger, { className: "text-text-quarterary-500 hidden items-center gap-md font-semibold disabled:invisible lg:flex", children: ["Next", _jsx(ChevronRightIcon, { className: "size-5" })] })] })] })] }) })] }) }));

package/dist/components/News/News.js

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
 import { Prose } from '../../ui/Prose/index.js';
 export function News(props) {
-    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/news', className: "text-button-secondary-fg flex items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all News"] }), _jsx(Image, { src: props.news.image, alt: "", width: 1024, height: 600, priority: true, className: "mt-3xl block h-auto w-full rounded-xl lg:mt-6" }), _jsx("p", { className: "text-brand-400 mt-xl text-sm font-semibold lg:mt-6", children: props.news.category }), _jsx("h2", { className: "mt-xl text-2xl font-semibold lg:mt-6", children: props.news.title }), _jsx(Prose, { className: "mt-xl lg:mt-6", dangerouslySetInnerHTML: {
+    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/news', className: "text-button-secondary-fg flex items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all News"] }), _jsx(Image, { src: props.news.image, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-3xl block h-auto w-full rounded-xl lg:mt-6" }), _jsx("p", { className: "text-brand-400 mt-xl text-sm font-semibold lg:mt-6", children: props.news.category }), _jsx("h2", { className: "mt-xl text-2xl font-semibold lg:mt-6", children: props.news.title }), _jsx(Prose, { className: "mt-xl lg:mt-6", dangerouslySetInnerHTML: {
                     __html: props.news.content,
                 } })] }));
 }