feat(mobile): add OTPWindow component to navigation sitemap and enhance screen registration logic

Signed-off-by: Innei <tukon479@gmail.com>

apps/mobile/src/lib/navigation/sitemap/registry.ts

@@ -15,7 +15,7 @@ class NavigationSitemapRegistryStatic {
     props?: T,
     options?: Partial<RegisterOptions>,
   ) {
-    const title = controllerView.name || controllerView.displayName
+    const title = controllerView.id || controllerView.displayName || controllerView.name
     if (!title) {
       if (__DEV__) {
         console.error("registerByComponent: no name, ignore")

apps/mobile/src/sitemap.tsx

@@ -1,4 +1,9 @@
+import { Alert, View } from "react-native"
+
+import { Navigation } from "./lib/navigation/Navigation"
 import { NavigationSitemapRegistry } from "./lib/navigation/sitemap/registry"
+import type { NavigationControllerView } from "./lib/navigation/types"
+import { OTPWindow } from "./modules/settings/compoents/OTPWindow"
 import { TermsScreen } from "./screens/(headless)/terms"
 import { TwoFactorAuthScreen } from "./screens/(modal)/2fa"
 import { ForgetPasswordScreen } from "./screens/(modal)/forget-password"
@@ -23,4 +28,36 @@ export function registerSitemap() {
       stackPresentation: "fullScreenModal",
     })
   })
+  ;[
+    /// Other
+    screenHoC(OTPWindow, {
+      onDismiss() {
+        Navigation.rootNavigation.back()
+      },
+      onSuccess() {
+        Navigation.rootNavigation.back()
+      },
+      verifyFn(code) {
+        Alert.alert(code)
+        return Promise.resolve()
+      },
+    }),
+  ].forEach((Component) => {
+    NavigationSitemapRegistry.registerByComponent(Component, void 0, {
+      stackPresentation: "push",
+    })
+  })
+}
+
+function screenHoC<P extends object>(Component: React.ComponentType<P>, props: P) {
+  const Wrapper: NavigationControllerView<P> = function () {
+    return (
+      <View className="bg-system-background flex-1">
+        <Component {...props} />
+      </View>
+    )
+  }
+  Wrapper.id = `ScreenHoC(${Component.name})`
+  Wrapper.displayName = `ScreenHoC(${Component.name})`
+  return Wrapper
 }