@opexa/portal-components 0.0.181 → 0.0.182

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

@@ -4,6 +4,10 @@ export interface PopupStore {
     setOpen: (open: boolean) => void;
     '~touched': boolean;
 }
+export interface KYCPopupStore extends PopupStore {
+    step: number;
+    setStep: (step: number) => void;
+}
 export type GameLaunchStore__Details = {
     status: 'WAITING';
     game?: null;
@@ -60,7 +64,7 @@ interface GlobalStore {
     message: MessageStore;
     sidebar: PopupStore;
     sidebar__mobile: PopupStore;
-    kyc: PopupStore;
+    kyc: KYCPopupStore;
     spotBonus: PopupStore;
 }
 export declare const useGlobalStore: import("zustand").UseBoundStore<import("zustand").StoreApi<GlobalStore>>;

package/dist/client/hooks/useGlobalStore.js

@@ -193,6 +193,16 @@ export const useGlobalStore = create((set) => ({
                 },
             }));
         },
+        step: 1,
+        setStep(step) {
+            set((prev) => ({
+                kyc: {
+                    ...prev.kyc,
+                    step,
+                    '~touched': true,
+                },
+            }));
+        },
         '~touched': false,
     },
     sidebar: {

package/dist/components/AccountVerification/AccountVerification.js

@@ -22,6 +22,8 @@ export function AccountVerification(props) {
     const profileCompletion = profileCompletionQuery.data;
     const verificationQuery = useMemberVerificationQuery();
     const verification = verificationQuery.data;
+    const isKycCompleted = (verification && verification.status === 'VERIFIED') ||
+        verification?.status === 'PENDING';
     const empty = verification == null;
     const pending = verification?.status === 'PENDING';
     const success = verification?.status === 'VERIFIED' || verification?.status === 'APPROVED';
@@ -29,7 +31,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(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, {})] }));
+                            : '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(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: !isKycCompleted && (_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/KYC/AutoOpen.js

@@ -10,6 +10,18 @@ export function AutoOpen() {
     const { data: session } = useSessionQuery();
     const { data: account } = useAccountQuery();
     const { data: verification } = useMemberVerificationQuery();
+    const isBasicInfoCompleted = account?.realName !== null && account?.birthDay !== null;
+    const isUploadCompleted = verification &&
+        verification.idFrontImage !== null &&
+        verification.selfieImage !== null;
+    const isRejected = Boolean(verification?.status === 'REJECTED');
+    const step = !isBasicInfoCompleted
+        ? 1
+        : isRejected
+            ? 2
+            : isUploadCompleted
+                ? 3
+                : 2;
     const shouldOpen = !account?.realName ||
         !account?.birthDay ||
         !verification ||
@@ -24,5 +36,10 @@ export function AutoOpen() {
             return;
         }
     }, [kycStore, session?.status, shouldOpen]);
+    useEffect(() => {
+        if (step) {
+            kycStore.setStep(step);
+        }
+    }, [kycStore, step]);
     return null;
 }

package/dist/components/KYC/BasicInformation.js

@@ -5,7 +5,6 @@ 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';
@@ -56,7 +55,6 @@ 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({

package/dist/components/KYC/CaptureIdDocument.js

@@ -11,7 +11,7 @@ import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { useKYCContext } from './KYCContext.js';
 import NoCameraError from './NoCameraError.js';
-import { dataURLtoBlob, resizeFile, showPermissionInstructions } from './utils.js';
+import { cameraErrorDescriptions, dataURLtoBlob, resizeFile, showPermissionInstructions, } from './utils.js';
 export function CaptureIdDocument() {
     const kyc = useKYCContext();
     const { mutate, isPending } = useUploadImageFileMutation();
@@ -210,5 +210,10 @@ export function CaptureIdDocument() {
     return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full p-4 lg:w-[640px] lg:px-12 lg:py-4xl", children: [_jsxs("button", { type: "button", className: "flex items-center gap-lg lg:absolute lg:right-5 lg:top-5 lg:p-md", onClick: () => {
                         stopCamera();
                         kyc.setCapturing(null);
-                    }, children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "lg:max-w-auto text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", _jsx("br", { className: "hidden lg:block" }), " Avoid glare or reflections, and ensure all corners are within the frame."] }), _jsx("div", { id: "parent", className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8", children: ['NotAllowedError', 'NotReadableError', 'NotFoundError'].includes(cameraError) ? (_jsx(NoCameraError, { onRetry: checkCameraPermission, title: "Camera Access Required", description: "We were unable to detect a camera on your device. Please ensure it is properly connected and\r\n            accessible to this application." })) : captureInProgress ? (_jsxs("div", { className: "relative flex h-fit w-full flex-col items-center justify-center", children: [_jsx("video", { ref: videoElement, autoPlay: true, muted: true, playsInline: true, className: "relative h-[60vh] w-full rounded-lg object-cover md:aspect-video md:max-h-[333px]", width: "100%", height: "100%" }), _jsxs("div", { className: "pointer-events-none absolute inset-0 z-50", children: [_jsx("div", { className: twMerge('absolute inset-0 w-full bg-black/60 backdrop-blur-sm [clip-path:polygon(0%_0%,0%_100%,calc(50%-158px)_100%,calc(50%-158px)_calc(50%-100px),calc(50%+158px)_calc(50%-100px),calc(50%+158px)_calc(50%+100px),calc(50%-158px)_calc(50%+100px),calc(50%-158px)_100%,100%_100%,100%_0%)] md:[clip-path:polygon(0%_0%,0%_100%,calc(50%-225px)_100%,calc(50%-225px)_calc(50%-142px),calc(50%+225px)_calc(50%-142px),calc(50%+225px)_calc(50%+142px),calc(50%-225px)_calc(50%+142px),calc(50%-225px)_100%,100%_100%,100%_0%)]') }), _jsx("div", { className: "absolute inset-0 z-[60] mx-auto flex items-center justify-center", children: _jsx("div", { className: "relative aspect-[1011/638] h-[200px] md:h-[295px] md:w-[450px]", children: _jsx("div", { className: "h-full w-full rounded-lg border-4 border-dashed border-[#B54708]" }) }) })] })] })) : (_jsx("div", { ref: containerRef, className: "relative grid h-full w-full place-items-center rounded-lg object-contain md:max-h-[333px]" })) }), captureInProgress ? (_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", onClick: captureAndProcessImage, children: ["Capture Image", _jsx(Camera01Icon, { className: "size-5" })] })) : selectedImage && selectedImage.src ? (_jsxs("div", { className: "mt-4 flex flex-col items-center justify-center gap-2 md:flex-row", children: [_jsxs(Button, { className: "lg:w-fit", type: "button", onClick: retakePhoto, children: ["Retake Photo ", _jsx(Camera01Icon, { className: "ml-1" })] }), _jsxs(Button, { className: "lg:w-fit", type: "button", onClick: uploadPhoto, disabled: isPending, children: ["Use Photo ", _jsx(CheckCircleIcon, { className: "ml-1" })] })] })) : (_jsxs(Button, { className: twMerge('disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit', cameraError && 'hidden'), onClick: startCamera, disabled: isLoading || !!videoStream, children: [isLoading ? 'Starting Camera...' : 'Start Camera', _jsx(Camera01Icon, { className: "size-5" })] }))] }) }));
+                    }, children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "lg:max-w-auto text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", _jsx("br", { className: "hidden lg:block" }), " Avoid glare or reflections, and ensure all corners are within the frame."] }), _jsx("div", { id: "parent", className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8", children: [
+                        'NotAllowedError',
+                        'NotReadableError',
+                        'NotFoundError',
+                        'NoIdDetectedError',
+                    ].includes(cameraError) ? (_jsx(NoCameraError, { onRetry: checkCameraPermission, title: "Camera Access Required", description: cameraErrorDescriptions[cameraError] })) : captureInProgress ? (_jsxs("div", { className: "relative flex h-fit w-full flex-col items-center justify-center", children: [_jsx("video", { ref: videoElement, autoPlay: true, muted: true, playsInline: true, className: "relative h-[50vh] w-full rounded-lg object-cover md:aspect-video md:max-h-[333px]", width: "100%", height: "100%" }), _jsxs("div", { className: "pointer-events-none absolute inset-0 z-50", children: [_jsx("div", { className: twMerge('absolute inset-0 w-full bg-black/60 backdrop-blur-sm [clip-path:polygon(0%_0%,0%_100%,calc(50%-158px)_100%,calc(50%-158px)_calc(50%-100px),calc(50%+158px)_calc(50%-100px),calc(50%+158px)_calc(50%+100px),calc(50%-158px)_calc(50%+100px),calc(50%-158px)_100%,100%_100%,100%_0%)] md:[clip-path:polygon(0%_0%,0%_100%,calc(50%-225px)_100%,calc(50%-225px)_calc(50%-142px),calc(50%+225px)_calc(50%-142px),calc(50%+225px)_calc(50%+142px),calc(50%-225px)_calc(50%+142px),calc(50%-225px)_100%,100%_100%,100%_0%)]') }), _jsx("div", { className: "absolute inset-0 z-[60] mx-auto flex items-center justify-center", children: _jsx("div", { className: "relative aspect-[1011/638] h-[200px] md:h-[295px] md:w-[450px]", children: _jsx("div", { className: "h-full w-full rounded-lg border-4 border-dashed border-[#B54708]" }) }) })] })] })) : (_jsx("div", { ref: containerRef, className: "relative grid h-full w-full place-items-center rounded-lg object-contain md:max-h-[333px]" })) }), captureInProgress ? (_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", onClick: captureAndProcessImage, children: ["Capture Image", _jsx(Camera01Icon, { className: "size-5" })] })) : selectedImage && selectedImage.src ? (_jsxs("div", { className: "mt-4 flex flex-col items-center justify-center gap-2 md:flex-row", children: [_jsxs(Button, { className: "lg:w-fit", type: "button", onClick: retakePhoto, children: ["Retake Photo ", _jsx(Camera01Icon, { className: "ml-1" })] }), _jsxs(Button, { className: "lg:w-fit", type: "button", onClick: uploadPhoto, disabled: isPending, children: ["Use Photo ", _jsx(CheckCircleIcon, { className: "ml-1" })] })] })) : (_jsxs(Button, { className: twMerge('disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit', cameraError && 'hidden'), onClick: startCamera, disabled: isLoading || !!videoStream, children: [isLoading ? 'Starting Camera...' : 'Start Camera', _jsx(Camera01Icon, { className: "size-5" })] }))] }) }));
 }

package/dist/components/KYC/FileUpload.js

@@ -15,10 +15,12 @@ import { validateFile } from './utils.js';
 function FileUpload({ value, name, hasDescription, onChange, captureObject, }) {
     const kyc = useKYCContext();
     const { mutate, isPending } = useUploadImageFileMutation();
+    const [isLoading, setIsLoading] = useState(false);
     const [uploadedImageUrl, setUploadedImageUrl] = useState(null);
     async function pollImage(id) {
         if (!id)
             return;
+        setIsLoading(true);
         const poll = createPoll(async () => {
             const session = await getSession();
             invariant(session.status === 'authenticated');
@@ -34,11 +36,12 @@ function FileUpload({ value, name, hasDescription, onChange, captureObject, }) {
             console.error('Image not found or failed to load');
         }
         setUploadedImageUrl(image?.url ?? null);
+        setIsLoading(false);
     }
     useEffect(() => {
         pollImage(value);
     }, [value]);
-    if (isPending) {
+    if (isPending || isLoading) {
         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..." }) }) }));
     }
     function handleFileChange(event) {

package/dist/components/KYC/IdentityVerification.js

@@ -84,7 +84,7 @@ export function IdentityVerification() {
                 placeOfBirth: '',
                 sourceOfIncome: '',
             });
-            kyc.setStep(3);
+            globalStore.kyc.setStep(3);
         }
         else {
             updateMemberVerification({
@@ -94,7 +94,7 @@ export function IdentityVerification() {
                     idFrontImage: values.idFrontImage,
                 },
             });
-            kyc.setStep(3);
+            globalStore.kyc.setStep(3);
         }
     }
     useEffect(() => {

package/dist/components/KYC/Indicator.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { noop } from 'lodash-es';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { Progress } from '../../ui/Progress/index.js';
-import { useKYCContext } from './KYCContext.js';
 export function Indicator() {
-    const kyc = useKYCContext();
-    return (_jsxs("div", { className: "flex items-center justify-center gap-1.5 py-3", children: [_jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step > 1 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step > 2 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step === 3 && kyc.done ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) })] }));
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+    })));
+    return (_jsxs("div", { className: "flex items-center justify-center gap-1.5 py-3", children: [_jsx(Progress.Root, { className: "w-10 shrink-0", value: globalStore.kyc.step > 1 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-10 shrink-0", value: globalStore.kyc.step > 2 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-10 shrink-0", value: globalStore.kyc.step === 3 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) })] }));
 }

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

@@ -24,5 +24,5 @@ export function KYC(props) {
                 if (!details.open) {
                     localStorage.setItem(KYC_PROMPT_LOCALSTORAGE_KEY, '');
                 }
-            }, 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, {})] }))] }) })] }) }) }));
+            }, lazyMount: true, unmountOnExit: true, onExitComplete: kyc.reset, closeOnEscape: true, closeOnInteractOutside: false, 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, {}), globalStore.kyc.step === 1 && _jsx(BasicInformation, {}), globalStore.kyc.step === 2 && _jsx(IdentityVerification, {}), globalStore.kyc.step === 3 && _jsx(PersonalInformation, {})] }))] }) })] }) }) }));
 }

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

@@ -6,3 +6,4 @@ export declare const MAX_NAME_LENGTH = 52;
 export declare const SUPPORTED_FILES: string[];
 export declare function validateFile(file: File): "File too large" | "File name too long" | "Unsupported file" | undefined;
 export declare function showPermissionInstructions(): void;
+export declare const cameraErrorDescriptions: Record<string, string>;

package/dist/components/KYC/utils.js

@@ -70,3 +70,9 @@ export function showPermissionInstructions() {
         `;
     alert(instructions);
 }
+export const cameraErrorDescriptions = {
+    NotAllowedError: 'We were unable to detect a camera on your device. Please ensure it is properly connected and accessible to this application.',
+    NotReadableError: 'We were unable to access your camera. Please check if another application is using it or try reconnecting your device.',
+    NotFoundError: 'No camera was found. Please connect a camera and try again.',
+    NoIdDetectedError: 'No ID document was detected in the frame. Please ensure your ID is clearly visible and try again.',
+};

package/dist/components/Quests/DailyCheckInQuest.js

@@ -84,7 +84,7 @@ function RemainingTimeTilTomorrow() {
             });
         },
     });
-    return (_jsxs("div", { className: "flex items-center space-x-0.5", children: [_jsx(CheckIcon, { className: "size-5" }), _jsx("p", { children: remainingTime.toString() })] }));
+    return (_jsxs("div", { className: "flex items-center space-x-0.5", children: [_jsx(CheckIcon, { className: "size-5" }), _jsxs("p", { children: ["Available in ", remainingTime.toString()] })] }));
 }
 function Rules(props) {
     const [open, setOpen] = useControllableState({

package/dist/components/Quests/OnboardingQuest.js

@@ -4,6 +4,7 @@ import { useShallow } from 'zustand/shallow';
 import { useControllableState } from '../../client/hooks/useControllableState.js';
 import { useDisclosure } from '../../client/hooks/useDisclosure.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
 import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
 import { CoinsHandIcon } from '../../icons/CoinsHandIcon.js';
@@ -19,17 +20,20 @@ import { RemainingTime } from './RemainingTime.js';
 export function OnboardingQuest() {
     const quest = useQuestContext();
     const disclosure = useDisclosure();
+    const { data: verification } = useMemberVerificationQuery();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         kyc: ctx.kyc,
         depositWithdrawal: ctx.depositWithdrawal,
     })));
     const remainingTime = useRemainingTime(quest.endDateTime);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(RemainingTime, {}), _jsx("button", { type: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("h2", { className: "text-xl font-semibold", children: quest.name }), _jsx("div", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: quest.description } })] }), _jsxs("div", { className: "w-full grow space-y-2", children: [_jsxs(Checkbox.Root, { checked: quest.accountVerificationCompleted, onCheckedChange: noop, children: [_jsx(Checkbox.Control, { className: "bg-transparent", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: "text-sm font-medium leading-tight", children: "Complete personal verification" }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Checkbox.Root, { checked: quest.firstDepositCompleted, onCheckedChange: noop, children: [_jsx(Checkbox.Control, { className: "bg-transparent", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: "text-sm font-medium leading-tight", children: "Make your first deposit" }), _jsx(Checkbox.HiddenInput, {})] })] }), _jsxs("div", { className: "flex gap-lg", children: [_jsxs(Button, { size: "sm", onClick: () => {
+    const isKycCompleted = Boolean(verification?.status === 'VERIFIED') ||
+        Boolean(verification?.status === 'PENDING');
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(RemainingTime, {}), _jsx("button", { type: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("h2", { className: "text-xl font-semibold", children: quest.name }), _jsx("div", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: quest.description } })] }), _jsxs("div", { className: "w-full grow space-y-2", children: [_jsxs(Checkbox.Root, { checked: quest.accountVerificationCompleted, onCheckedChange: noop, children: [_jsx(Checkbox.Control, { className: "bg-transparent", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: "text-sm font-medium leading-tight", children: "Complete personal verification" }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Checkbox.Root, { checked: quest.firstDepositCompleted, onCheckedChange: noop, children: [_jsx(Checkbox.Control, { className: "bg-transparent", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: "text-sm font-medium leading-tight", children: "Make your first deposit" }), _jsx(Checkbox.HiddenInput, {})] })] }), _jsxs("div", { className: "flex gap-lg", children: [!isKycCompleted && (_jsxs(Button, { size: "sm", onClick: () => {
                                     globalStore.kyc.setOpen(true);
                                 }, disabled: quest.accountVerificationCompleted ||
                                     quest.status === 'COMPLETED' ||
                                     quest.status === 'FAILED' ||
-                                    remainingTime.expired, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: [quest.accountVerificationCompleted ? (_jsx(CheckIcon, { className: "size-5" })) : (_jsx(FileCheck02Icon, { className: "size-5" })), "Verify"] }), _jsxs(Button, { size: "sm", onClick: () => {
+                                    remainingTime.expired, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: [quest.accountVerificationCompleted ? (_jsx(CheckIcon, { className: "size-5" })) : (_jsx(FileCheck02Icon, { className: "size-5" })), "Verify"] })), _jsxs(Button, { size: "sm", onClick: () => {
                                     globalStore.depositWithdrawal.setTab('DEPOSIT');
                                     globalStore.depositWithdrawal.setOpen(true);
                                 }, disabled: quest.firstDepositCompleted ||

package/package.json

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