@opexa/portal-components 0.0.243 → 0.0.244

package/dist/client/hooks/useCamera.js

@@ -1,11 +1,11 @@
 import { isBoolean, isFunction, isObject } from 'lodash-es';
-import { useCallback, useMemo, useRef, useState, } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import invariant from 'tiny-invariant';
 import { useMediaQuery } from 'usehooks-ts';
 export function useCamera(options = {}) {
     const { transform, validate, ...constraints } = options;
     const videoRef = useRef(null);
-    const stream = useRef(null);
+    const streamRef = useRef(null);
     const [data, setData] = useState(null);
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(false);
@@ -51,7 +51,7 @@ export function useCamera(options = {}) {
                 },
             });
             node.srcObject = result;
-            stream.current = result;
+            streamRef.current = result;
             setMirror(!isObject(constraints.video)
                 ? true
                 : constraints.video.facingMode === 'environment'
@@ -92,7 +92,7 @@ export function useCamera(options = {}) {
         setLoading(false);
         setSnapping(false);
         return new Promise((resolve) => {
-            stream.current?.getTracks().forEach((track) => track.stop());
+            streamRef.current?.getTracks().forEach((track) => track.stop());
             videoRef.current?.pause();
             resolve();
         });
@@ -218,8 +218,17 @@ export function useCamera(options = {}) {
             boxSizing: 'border-box',
             background: 'transparent',
             transform: mirror ? 'scaleX(-1)' : 'none',
+            pointerEvents: 'none',
         },
     }), [mirror]);
+    useEffect(() => {
+        return () => {
+            setData(null);
+            setError(null);
+            setLoading(false);
+            setSnapping(false);
+        };
+    }, []);
     return {
         snap,
         open,

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

@@ -4,12 +4,9 @@ export interface UseFeatureFlagReturn {
     disable(): Promise<void>;
 }
 export declare function useFeatureFlag(): UseFeatureFlagReturn;
-interface FeatureFlagEventDetail {
-    enabled: boolean;
-}
-type FeatureFlagEvent = CustomEvent<FeatureFlagEventDetail>;
 interface EventsMap {
-    'web-portal::feature-flag': FeatureFlagEvent;
+    'web-portal::feature-flag-enabled': CustomEvent;
+    'web-portal::feature-flag-disabled': CustomEvent;
 }
 type Listener<K extends keyof EventsMap> = (this: Window, event: EventsMap[K]) => void;
 declare global {

package/dist/client/hooks/useFeatureFlag.js

@@ -1,52 +1,37 @@
-'use client';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { FEATURE_FLAG_LOCAL_STORAGE_KEY } from '../../constants/index.js';
-const event = new CustomEvent('web-portal::feature-flag', {
-    detail: {
-        enabled: false,
-    },
-    bubbles: true,
-    cancelable: false,
-});
 export function useFeatureFlag() {
     const [enabled, setEnabled] = useState(false);
-    function enable() {
+    const enable = useCallback(() => {
         return new Promise((resolve) => {
-            const event = new CustomEvent('web-portal::feature-flag', {
-                detail: {
-                    enabled: true,
-                },
-                bubbles: true,
-                cancelable: false,
-            });
-            window.dispatchEvent(event);
+            localStorage.setItem(FEATURE_FLAG_LOCAL_STORAGE_KEY, '');
+            window.dispatchEvent(FEATURE_FLAG_ENABLED_EVENT);
             resolve();
         });
-    }
-    function disable() {
+    }, []);
+    const disable = useCallback(() => {
         return new Promise((resolve) => {
-            window.dispatchEvent(event);
+            localStorage.removeItem(FEATURE_FLAG_LOCAL_STORAGE_KEY);
+            window.dispatchEvent(FEATURE_FLAG_DISABLED_EVENT);
             resolve();
         });
-    }
+    }, []);
     useEffect(() => {
-        if (localStorage.getItem(FEATURE_FLAG_LOCAL_STORAGE_KEY) != null) {
-            setEnabled(true);
-        }
+        setEnabled(localStorage.getItem(FEATURE_FLAG_LOCAL_STORAGE_KEY) != null);
     }, []);
     useEffect(() => {
-        const handle = (event) => {
-            if (event.detail.enabled) {
-                setEnabled(true);
-                localStorage.setItem(FEATURE_FLAG_LOCAL_STORAGE_KEY, '');
-            }
-            else {
-                setEnabled(false);
-                localStorage.removeItem(FEATURE_FLAG_LOCAL_STORAGE_KEY);
-            }
+        function handleEnabled() {
+            setEnabled(true);
+        }
+        function handleDisabled() {
+            setEnabled(false);
+        }
+        window.addEventListener('web-portal::feature-flag-enabled', handleEnabled);
+        window.addEventListener('web-portal::feature-flag-disabled', handleDisabled);
+        return () => {
+            window.removeEventListener('web-portal::feature-flag-enabled', handleEnabled);
+            window.removeEventListener('web-portal::feature-flag-disabled', handleDisabled);
         };
-        window.addEventListener('web-portal::feature-flag', handle);
-        return () => window.removeEventListener('web-portal::feature-flag', handle);
     }, []);
     return {
         enabled,
@@ -54,3 +39,11 @@ export function useFeatureFlag() {
         disable,
     };
 }
+const FEATURE_FLAG_DISABLED_EVENT = new CustomEvent('web-portal::feature-flag-disabled', {
+    bubbles: true,
+    cancelable: false,
+});
+const FEATURE_FLAG_ENABLED_EVENT = new CustomEvent('web-portal::feature-flag-enabled', {
+    bubbles: true,
+    cancelable: false,
+});

package/dist/components/KYC/AutoOpen.js

@@ -22,12 +22,17 @@ export function AutoOpen() {
             : isUploadCompleted
                 ? 3
                 : 2;
-    const shouldOpen = !isBasicInfoCompleted || !isUploadCompleted || isRejected;
+    const shouldOpen = !account?.realName ||
+        !account?.birthDay ||
+        !verification ||
+        verification.status === 'REJECTED' ||
+        verification.status === 'UNVERIFIED';
     useEffect(() => {
         if (session?.status == 'authenticated' &&
+            !kycStore['~touched'] &&
             shouldOpen &&
-            localStorage.getItem(KYC_PROMPT_LOCALSTORAGE_KEY) === null) {
-            kycStore.setKycReminder(true);
+            localStorage.getItem(KYC_PROMPT_LOCALSTORAGE_KEY) == null) {
+            kycStore.setOpen(true);
             return;
         }
     }, [kycStore, session?.status, shouldOpen]);

package/dist/components/PortalProvider/FeatureFlag.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { Presence } from '../../ui/Presence/index.js';
@@ -15,12 +15,20 @@ export function FeatureFlag() {
             featureFlag.enable();
         }
     }, [featureFlag, searchParams]);
+    const removeFutureParam = useCallback(() => {
+        return new Promise((resolve) => {
+            if (!searchParams.has('future'))
+                return resolve();
+            const newSearchParams = new URLSearchParams(searchParams);
+            newSearchParams.delete('future');
+            router.replace(`${pathname}?${newSearchParams.toString()}`, {
+                scroll: false,
+            });
+            setTimeout(resolve, 250);
+        });
+    }, [pathname, router, searchParams]);
     return (_jsx(Portal, { children: _jsx(Presence, { present: featureFlag.enabled, asChild: true, children: _jsx("div", { className: "fixed bottom-3 flex w-full flex-col items-center justify-center", children: _jsxs("div", { className: "rounded-full bg-black/50 px-2 py-1 text-sm leading-none backdrop-blur-md", children: ["Experimental features are enabled.", ' ', _jsx("button", { type: "button", className: "cursor-pointer underline underline-offset-2", onClick: async () => {
+                                await removeFutureParam();
                                 await featureFlag.disable();
-                                const newSearchParams = new URLSearchParams(searchParams);
-                                newSearchParams.delete('future');
-                                router.replace(`${pathname}?${newSearchParams.toString()}`, {
-                                    scroll: false,
-                                });
                             }, children: "Disable" })] }) }) }) }));
 }

package/dist/components/SignUp/SignUpForm.js

@@ -192,7 +192,6 @@ export function SignUpForm() {
                                     mobileNumber: mobileNumberParser.format(mobileNumber),
                                     verificationCode: verificationCode.join(''),
                                     referralCode: search.get('referralCode') ?? undefined,
-                                    domain: search.get('domain') ?? undefined,
                                     btag: search.get('btag') ?? undefined,
                                 });
                                 const name = mobileNumberParser.format(mobileNumber);
@@ -252,7 +251,7 @@ export function SignUpForm() {
                                                 o.field.onChange(details.value);
                                             }, onValueComplete: () => {
                                                 form2Ref.current?.requestSubmit();
-                                            }, children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
+                                            }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
                                                 recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),

package/dist/components/shared/SelfieField.js

@@ -259,19 +259,18 @@ const [SelfieFieldProvider, useSelfieFieldContext] = createContext();
  *  Utils
  * -------------------------------------
  */
-let __faceapi_models_loaded__ = false;
-async function loadFaceApiModels() {
-    if (__faceapi_models_loaded__)
+let __models_loaded__ = false;
+async function loadModels() {
+    if (__models_loaded__)
         return;
     await Promise.all([
         faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
-        faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
         faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
     ]);
-    __faceapi_models_loaded__ = true;
+    __models_loaded__ = true;
 }
 const validateFace = cache(async (video, guide) => {
-    await loadFaceApiModels();
+    await loadModels();
     const videoRect = video.getBoundingClientRect();
     const guideRect = guide.getBoundingClientRect();
     const canvas = document.createElement('canvas');
@@ -310,7 +309,7 @@ const validateFace = cache(async (video, guide) => {
     return overlapRatio >= 0.6;
 });
 export async function validateFaceFromImage(img) {
-    await loadFaceApiModels();
+    await loadModels();
     const detection = await faceapi.detectSingleFace(img, new faceapi.TinyFaceDetectorOptions({
         inputSize: 224,
         scoreThreshold: 0.5,