altaga-expo 1.0.0

package/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+   npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

package/app.json

@@ -0,0 +1,54 @@
+{
+  "expo": {
+    "name": "altaga-expo",
+    "slug": "altaga-expo",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./src/assets/logo.png",
+    "scheme": "altagaexpo",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./src/assets/logo.png",
+        "backgroundImage": "./src/assets/logo.png",
+        "monochromeImage": "./src/assets/logo.png"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false
+    },
+    "web": {
+      "output": "server",
+      "favicon": "./src/assets/favicon.png"
+    },
+    "plugins": [
+      [
+        "expo-router",
+        {
+          "unstable_useServerMiddleware": true
+        }
+      ],
+      [
+        "expo-splash-screen",
+        {
+          "image": "./src/assets/logo.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff",
+          "dark": {
+            "backgroundColor": "#000000"
+          }
+        }
+      ],
+      "expo-secure-store"
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    }
+  }
+}

package/eslint.config.js

@@ -0,0 +1,10 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require('eslint/config');
+const expoConfig = require('eslint-config-expo/flat');
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: ['dist/*'],
+  },
+]);

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "altaga-expo",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "expo lint"
+  },
+  "dependencies": {
+    "@expo-google-fonts/exo-2": "^0.4.2",
+    "@expo/vector-icons": "^15.0.3",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "buffer": "^6.0.3",
+    "expo": "~54.0.33",
+    "expo-constants": "~18.0.13",
+    "expo-font": "~14.0.11",
+    "expo-haptics": "~15.0.8",
+    "expo-image": "~3.0.11",
+    "expo-linking": "~8.0.11",
+    "expo-router": "~6.0.23",
+    "expo-secure-store": "~15.0.8",
+    "expo-splash-screen": "~31.0.13",
+    "expo-status-bar": "~3.0.9",
+    "expo-symbols": "~1.0.8",
+    "expo-system-ui": "~6.0.9",
+    "expo-web-browser": "~15.0.10",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1",
+    "toastify-react-native": "^7.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "typescript": "~5.9.2"
+  },
+  "private": false
+}

package/src/app/(screens)/main.js

@@ -0,0 +1,43 @@
+import { Pressable, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { createGlobalStyles } from "../../core/styles";
+import { useSmartSize } from "../../providers/smartProvider";
+
+export default function Main() {
+  const smartSize = useSmartSize();
+  const { normalize } = smartSize;
+  const GlobalStyles = createGlobalStyles(smartSize);
+
+  return (
+    <SafeAreaView style={GlobalStyles.container}>
+      {/* ─── Minimal Header ─── */}
+      <View style={GlobalStyles.header}>
+        <Text style={GlobalStyles.heroTitle}>Template</Text>
+        <View style={{ width: normalize(12), height: normalize(12), borderRadius: 6, backgroundColor: "#D4AF37" }} />
+      </View>
+
+      {/* ─── Minimal Body ─── */}
+      <View style={[GlobalStyles.main, { padding: normalize(24), justifyContent: 'center' }]}>
+        <View style={{ gap: normalize(12) }}>
+          <Text style={GlobalStyles.sectionHeader}>Welcome</Text>
+          <Text style={[GlobalStyles.heroTitle, { fontSize: normalize(48), lineHeight: normalize(48) }]}>
+            Start{"\n"}Building.
+          </Text>
+          <Text style={GlobalStyles.bodyText}>
+            This is a clean, minimal starting point for your next project.
+          </Text>
+        </View>
+      </View>
+
+      {/* ─── Single Action ─── */}
+      <View style={{ padding: normalize(24), paddingBottom: normalize(40) }}>
+        <Pressable style={({ pressed }) => [
+          GlobalStyles.primaryButton,
+          pressed && { opacity: 0.9, transform: [{ scale: 0.98 }] }
+        ]}>
+          <Text style={GlobalStyles.buttonText}>Get Started</Text>
+        </Pressable>
+      </View>
+    </SafeAreaView>
+  );
+}

package/src/app/+html.js

@@ -0,0 +1,20 @@
+import { ScrollViewStyleReset } from "expo-router/html";
+
+export default function Root({ children }) {
+  return (
+    <html lang="en" style={{ backgroundColor: "black" }}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+        <ScrollViewStyleReset />
+      </head>
+      <body style={{ backgroundColor: "black", margin: 0, padding: 0 }}>
+        {children}
+      </body>
+    </html>
+  );
+}

package/src/app/+middleware.js

@@ -0,0 +1,38 @@
+import { getCorsHeaders, isAllowedOrigin } from "../utilsAPI/corsHelper";
+
+export const unstable_settings = {
+  matcher: {
+    patterns: [
+      "/api",           
+      "/api/[...path]"  
+    ],
+  },
+};
+
+export default function middleware(request) {
+  if (request.method === "OPTIONS") {
+    return new Response(null, {
+      status: 204,
+      headers: getCorsHeaders(request),
+    });
+  }
+
+  if (!isAllowedOrigin(request)) {
+    console.warn(`🚫 CORS BLOCKED origin: ${request.headers.get("origin")}`);
+    return Response.json(
+      { error: "CORS error: Origin not allowed" },
+      { status: 403, headers: getCorsHeaders(request) }
+    );
+  }
+
+  const userAgent = request.headers.get("user-agent")?.toLowerCase() || "";
+  const blockedAgents = ["postman", "curl", "node-fetch", "axios", "insomnia", "undici"];
+  
+  if (blockedAgents.some(agent => userAgent.includes(agent))) {
+    console.warn(`🚫 Blocked automated tool: ${userAgent}`);
+    return Response.json(
+      { error: "Automated requests and server tools are not allowed." },
+      { status: 403, headers: getCorsHeaders(request) }
+    );
+  }
+}

package/src/app/+not-found.js

@@ -0,0 +1,6 @@
+import { Redirect } from "expo-router";
+
+export default function NotFoundScreen() {
+  // This instantly redirects any unmatched route to your main screen
+  return <Redirect href="/(screens)/main" />;
+}

package/src/app/_layout.js

@@ -0,0 +1,58 @@
+import '../core/polyfills';
+import { ContextProvider } from "../providers/contextModule";
+import SmartProvider from "../providers/smartProvider";
+import {
+  Exo2_400Regular,
+  Exo2_700Bold,
+  useFonts,
+} from "@expo-google-fonts/exo-2";
+import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import React from "react";
+import "react-native-reanimated";
+import "../core/error";
+import ContextLoader from "../providers/contextLoader";
+
+export default function RootLayout() {
+  useFonts({
+    Exo2_400Regular,
+    Exo2_700Bold,
+  });
+  return (
+    <React.Fragment>
+      {
+        // This provider put a phone frame around the app if the app is running on a desktop
+      }
+      <SmartProvider>
+        {
+          // This provider provides the context to the app
+        }
+        <ContextProvider>
+          {
+            // This provider provides metamask connectivity
+          }
+          <ContextLoader />
+          {
+            // Base App Analytics
+          }
+          <Stack
+            initialRouteName="index"
+            screenOptions={{
+              animation: "simple_push",
+              headerShown: false,
+              contentStyle: { backgroundColor: "black" },
+            }}
+          >
+            {
+              // Splash Loading Screen
+            }
+            <Stack.Screen name="index" />
+            <Stack.Screen name="(screens)/main" />
+            <Stack.Screen name="+not-found" options={{ title: 'Oops!' }} />
+          </Stack>
+          <StatusBar style="auto" />
+        </ContextProvider>
+      </SmartProvider>
+    </React.Fragment>
+  );
+}

package/src/app/api/helloNoSecure+api.js

@@ -0,0 +1,7 @@
+export const GET = async () => {
+  return Response.json({ hello: "world" });
+};
+
+export const POST = async () => {
+  return Response.json({ hello: "world" });
+};

package/src/app/api/helloSecure+api.js

@@ -0,0 +1,9 @@
+import { withSecurity } from "../../utilsAPI/withSecurity";
+
+export const GET = withSecurity(async () => {
+  return Response.json({ hello: "world" });
+});
+
+export const POST = withSecurity(async () => {
+  return Response.json({ hello: "world" });
+});

package/src/app/index.js

@@ -0,0 +1,35 @@
+// Basic Imports
+import { Image } from "expo-image";
+import { useNavigation } from "expo-router";
+import { useContext, useEffect } from "react";
+import { View } from "react-native";
+import logoSplash from "../assets/logo.png";
+import { createGlobalStyles } from "../core/styles";
+import ContextModule from "../providers/contextModule";
+import { useSmartSize } from "../providers/smartProvider";
+
+export default function SplashLoading() {
+  const context = useContext(ContextModule);
+  const smartSize = useSmartSize();
+  const GlobalStyles = createGlobalStyles(smartSize);
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    context.value.starter && navigation.navigate("(screens)/main");
+  }, [context.value.starter, navigation]);
+
+  return (
+    <View style={[GlobalStyles.container, { justifyContent: "center" }]}>
+      <Image
+        source={logoSplash}
+        alt="Main Logo"
+        contentFit="contain" 
+        transition={200}     
+        style={{
+          width: "70%",
+          aspectRatio: 1,    
+        }}
+      />
+    </View>
+  );
+}

package/src/core/constants.js

@@ -0,0 +1,3 @@
+export const refreshTime = 1000 * 15;
+export const versionFlag = true;
+export const appVersion = "1.0.5";

package/src/core/error.js

@@ -0,0 +1,28 @@
+if (typeof window !== "undefined") {
+  // Fill this with your own ignore patterns
+  const ignorePatterns = [
+  ];
+
+  const shouldIgnore = (...args) => {
+    const msg = args.map(String).join(" ").toLowerCase();
+    return ignorePatterns.some((p) => msg.includes(p));
+  };
+
+  const originalError = console.error;
+  console.error = (...args) => {
+    if (shouldIgnore(...args)) return;
+    originalError.apply(console, args);
+  };
+
+  const originalWarn = console.warn;
+  console.warn = (...args) => {
+    if (shouldIgnore(...args)) return;
+    originalWarn.apply(console, args);
+  };
+
+  const originalLog = console.log;
+  console.log = (...args) => {
+    if (shouldIgnore(...args)) return;
+    originalLog.apply(console, args);
+  };
+}

package/src/core/polyfills.js

@@ -0,0 +1,4 @@
+import { Buffer } from 'buffer';
+global.Buffer = Buffer;
+
+// Fill this with your own polyfills

package/src/core/styles.js

@@ -0,0 +1,112 @@
+import { Dimensions, StatusBar, StyleSheet } from "react-native";
+
+export const screenHeight = Dimensions.get("screen").height;
+export const windowHeight = Dimensions.get("window").height;
+
+// ─── Luxury Dark Palette ──────────────────────────────────────────────────
+export const backgroundColor = "#0A0A0A"; // Rich Black
+export const cardColor = "#1C1C1E";       // Elevated surface
+export const accentColor = "#D4AF37";     // Metallic Gold
+export const whiteColor = "#FFFFFF";
+export const textSecondary = "#8E8E93";
+export const borderColor = "#2C2C2E";
+
+export const headerHeight = 84;
+export const footerHeight = 64;
+export const ratio =
+  Dimensions.get("window").height / Dimensions.get("window").width;
+export const mainHeight =
+  Dimensions.get("window").height -
+  (headerHeight + footerHeight + (ratio > 1.7 ? 0 : (StatusBar.currentHeight ?? 0)));
+export const StatusBarHeight = StatusBar.currentHeight ?? 0;
+
+export const createGlobalStyles = ({ normalize }) => {
+  const baseText = { 
+    color: whiteColor, 
+    fontFamily: "Exo2_400Regular"
+  };
+  const baseBoldText = { 
+    ...baseText, 
+    fontFamily: "Exo2_700Bold" 
+  };
+
+  return StyleSheet.create({
+    // ─── Core Layout ──────────────────────────────────────────────────────────
+    container: {
+      flex: 1,
+      backgroundColor,
+    },
+    header: {
+      height: normalize(headerHeight),
+      width: "100%",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: normalize(24),
+      borderBottomWidth: 1,
+      borderBottomColor: borderColor,
+    },
+    main: {
+      flex: 1,
+      width: "100%",
+    },
+    footer: {
+      width: "100%",
+      height: normalize(footerHeight),
+      flexDirection: "row",
+      justifyContent: "space-around",
+      alignItems: "center",
+      borderTopWidth: 1,
+      borderTopColor: borderColor,
+    },
+    // ─── Typography (Luxury Minimalist) ───────────────────────────────────────
+    heroTitle: {
+      ...baseBoldText,
+      fontSize: normalize(32),
+      letterSpacing: -1,
+    },
+    sectionHeader: {
+      ...baseBoldText,
+      fontSize: normalize(18),
+      color: accentColor,
+      textTransform: "uppercase",
+      letterSpacing: 1.5,
+    },
+    bodyText: {
+      ...baseText,
+      fontSize: normalize(16),
+      color: textSecondary,
+    },
+    labelSmall: {
+      ...baseText,
+      fontSize: normalize(12),
+      color: textSecondary,
+      textTransform: "uppercase",
+      letterSpacing: 1,
+    },
+    // ─── Template Components ──────────────────────────────────────────────────
+    card: {
+      backgroundColor: cardColor,
+      borderRadius: normalize(16),
+      padding: normalize(20),
+      borderWidth: 1,
+      borderColor,
+    },
+    primaryButton: {
+      backgroundColor: accentColor,
+      borderRadius: normalize(12),
+      paddingVertical: normalize(16),
+      paddingHorizontal: normalize(32),
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    buttonText: {
+      ...baseBoldText,
+      color: backgroundColor,
+      fontSize: normalize(16),
+    },
+    // ─── Utility ──────────────────────────────────────────────────────────────
+    textAccent: { color: accentColor },
+    textWhite: { color: whiteColor },
+  });
+};

package/src/hocs/useHOCS.js

@@ -0,0 +1,33 @@
+import {
+  useGlobalSearchParams,
+  useLocalSearchParams,
+  useNavigation,
+} from "expo-router";
+
+export const useHOCS = (Component) => { // For Class Components to have access to hooks
+  const getCurrentRoute = (navigation) => {
+    const state = navigation.getState();
+    const currentRoute = state.routes[state.index].name;
+    return currentRoute;
+  };
+
+  const HOCSComponent = (props) => {
+    const navigation = useNavigation();
+    const route = getCurrentRoute(navigation);
+    const glob = useGlobalSearchParams();
+    const local = useLocalSearchParams();
+    return (
+      <Component
+        glob={glob}
+        local={local}
+        navigation={navigation}
+        route={route}
+        {...props}
+      />
+    );
+  };
+
+  HOCSComponent.displayName = "HOCSComponent";
+
+  return HOCSComponent;
+};

package/src/providers/contextLoader.js

@@ -0,0 +1,43 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { Fragment, useCallback, useContext, useEffect } from "react";
+import { getAsyncStorageValue } from "../utilsApp/utils";
+import ContextModule from "./contextModule";
+
+export default function ContextLoader() {
+  const context = useContext(ContextModule);
+  const checkStarter = useCallback(async () => {
+    //await nukeStorage(); // for testing
+
+    const nonSensitiveData = await getAsyncStorageValue("NONSENSITIVEDATA"); // Check if the app is started for the first time
+
+    if (nonSensitiveData === null) {
+      context.setValue({ starter: true });
+      return;
+    }
+
+    const schema = await AsyncStorage.getItem("General");
+    const isConsistent =
+      Object.keys(context.value).length ===
+      Object.keys(JSON.parse(schema)).length;
+
+    if (isConsistent) {
+      console.log("Schema Match, using stored data"); // Avoiding data loss
+      context.setValue({
+        nonSensitiveData,
+        starter: true,
+      });
+    } else {
+      console.log("Schema Mismatch, using default data");
+      context.setValue({
+        ...context.value,
+        starter: true,
+      });
+    }
+  }, [context]);
+
+  useEffect(() => {
+    checkStarter();
+  }, []);
+
+  return <Fragment />;
+}

package/src/providers/contextModule.js

@@ -0,0 +1,57 @@
+import React from "react";
+
+const ContextModule = React.createContext();
+
+class ContextProvider extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: {
+        // Use Your own default values
+      },
+    };
+  }
+
+  setValue = (value, then = () => {}) => {
+    this.setState(
+      {
+        value: {
+          ...this.state.value,
+          ...value,
+        },
+      },
+      () => then(),
+    );
+  };
+
+  setValueAsync = async (value, then = () => {}) => {
+    await new Promise((resolve) =>
+      this.setState(
+        {
+          value: {
+            ...this.state.value,
+            ...value,
+          },
+        },
+        () => resolve(),
+      ),
+    );
+    then();
+  };
+
+  render() {
+    const { children } = this.props;
+    const { value } = this.state;
+    const { setValue, setValueAsync } = this;
+
+    return (
+      <ContextModule.Provider value={{ value, setValue, setValueAsync }}>
+        {children}
+      </ContextModule.Provider>
+    );
+  }
+}
+
+export { ContextProvider };
+export const ContextConsumer = ContextModule.Consumer;
+export default ContextModule;

package/src/providers/smartProvider.js

@@ -0,0 +1,131 @@
+import frame from "../assets/frame.png";
+import { Image } from "expo-image";
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { Dimensions, PixelRatio, Platform, View } from "react-native";
+import ToastManager from "toastify-react-native";
+
+// 1. Create the Context
+const SmartSizeContext = createContext({
+  width: 0,
+  height: 0,
+  scale: 1,
+  normalize: (size) => size,
+});
+
+// 2. Export the Hook
+export const useSmartSize = () => useContext(SmartSizeContext);
+
+export default function SmartProvider({ children }) {
+  const [frameSize, setFrameSize] = useState({ width: 0, height: 0 });
+  const [windowDimensions, setWindowDimensions] = useState(
+    Dimensions.get("window"),
+  );
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+    const subscription = Dimensions.addEventListener("change", ({ window }) => {
+      setWindowDimensions(window);
+    });
+    return () => subscription?.remove();
+  }, []);
+
+  const ratio = windowDimensions.height / windowDimensions.width;
+  // Ensure the frame is only added after the component has mounted on the client.
+  // This prevents hydration mismatches (React error #418) between the server and the first render.
+  const isWebMobileView = isMounted ? Platform.OS === "web" && ratio < 1 : false;
+
+  // 3. Calculate the internal "smartphone" dimensions
+  // These are the dimensions the children actually see
+  const internalSize = useMemo(() => {
+    let width, height;
+    if (!isWebMobileView) {
+      width = windowDimensions.width;
+      height = windowDimensions.height;
+    } else {
+      width = frameSize.height / 2.3179;
+      height = frameSize.height * 0.7668;
+    }
+
+    // Scale primarily based on width to avoid height-distortion on vertical screens.
+    const baseScale = width / 375;
+    // Apply a moderation factor (0 = no scale, 1 = full linear scale) to prevent extreme sizes
+    const factor = 0.4; // Adjust this value (0 to 1) to fine-tune the moderation
+    const moderateScale = 1 + (baseScale - 1) * factor;
+    // Clamp the scale to a safe range to prevent undersizing on tiny screens or oversizing on tablets
+    const clampedScale = Math.max(0.85, Math.min(1.2, moderateScale));
+    const normalize = (size) => PixelRatio.roundToNearestPixel(size * clampedScale);
+
+    return {
+      width,
+      height,
+      scale: clampedScale,
+      normalize,
+    };
+  }, [frameSize, windowDimensions, isWebMobileView]);
+
+  const handleLayout = (event) => {
+    const { width, height } = event.nativeEvent.layout;
+    // Optimization: Only update if the integer value changed (prevents loops)
+    setFrameSize((prev) => {
+      if (
+        Math.round(prev.width) === Math.round(width) &&
+        Math.round(prev.height) === Math.round(height)
+      ) {
+        return prev;
+      }
+      return { width, height };
+    });
+  };
+
+  return (
+    <SmartSizeContext.Provider value={internalSize}>
+      {isWebMobileView ? (
+        <React.Fragment>
+          <Image
+            source={frame}
+            onLayout={handleLayout}
+            contentFit="contain"
+            style={{
+              width: "auto",
+              height: windowDimensions.height,
+              backgroundColor: "black",
+            }}
+          />
+          <View
+            style={{
+              position: "absolute",
+              width: `100%`,
+              height: `100%`,
+              alignSelf: "center",
+              justifyContent: "center",
+            }}
+          >
+            <View
+              style={{
+                width: internalSize.width,
+                height: "76.68%",
+                alignSelf: "center",
+                justifyContent: "center",
+              }}
+            >
+              {children}
+              <ToastManager style={{ width: internalSize.width }} />
+            </View>
+          </View>
+        </React.Fragment>
+      ) : (
+        <View style={{ flex: 1, backgroundColor: "black" }}>
+          {children}
+          <ToastManager />
+        </View>
+      )}
+    </SmartSizeContext.Provider>
+  );
+}

package/src/utilsAPI/corsHelper.js

@@ -0,0 +1,27 @@
+const ALLOWED_ORIGINS = [
+  "https://YOUR_WEBSITE_URL.com", 
+  "http://localhost:8081" 
+];
+
+export function isAllowedOrigin(request) {
+  const origin = request.headers.get("origin");
+  
+  if (!origin) {
+    return true; 
+  }
+  
+  return ALLOWED_ORIGINS.includes(origin);
+}
+
+export function getCorsHeaders(request) {
+  const origin = request.headers.get("origin");
+  const allowedOrigin = ALLOWED_ORIGINS.includes(origin) ? origin : ALLOWED_ORIGINS[0];
+
+  return {
+    "Access-Control-Allow-Origin": allowedOrigin,
+    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type, Authorization, X-API-Key, X-Timestamp, X-Signature",
+  };
+}
+
+export default function CorsHelper() { return null; }

package/src/utilsAPI/withSecurity.js

@@ -0,0 +1,21 @@
+import { getCorsHeaders } from "./corsHelper";
+
+export function withSecurity(handler) {
+  return async (request) => {
+    try {
+      const response = await handler(request);
+      const cors = getCorsHeaders(request);
+      return new Response(response.body, {
+        ...response,
+        headers: {
+          ...Object.fromEntries(response.headers.entries()),
+          ...cors,
+        },
+      });
+    } catch (_err) {
+      return Response.json({ error: "Internal Error" }, { status: 500 });
+    }
+  };
+}
+
+export default function WithSecurity() { return null; }

package/src/utilsApp/utils.js

@@ -0,0 +1,136 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as EncryptedStorage from "expo-secure-store";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Dimensions, PixelRatio, Platform } from "react-native";
+
+export async function getAsyncStorageValue(label, storage = "General") {
+  try {
+    const session = await AsyncStorage.getItem(storage);
+    if (label in JSON.parse(session)) {
+      return JSON.parse(session)[label];
+    } else {
+      return null;
+    }
+  } catch {
+    return null;
+  }
+}
+
+export async function setAsyncStorageValue(value, storage = "General") {
+  const session = await AsyncStorage.getItem(storage);
+  await AsyncStorage.setItem(
+    storage,
+    JSON.stringify({
+      ...JSON.parse(session),
+      ...value,
+    }),
+  );
+}
+
+export async function getEncryptedStorageValue(label, storage = "General") {
+  try {
+    const session = await EncryptedStorage.getItem(storage);
+    if (label in JSON.parse(session)) {
+      return JSON.parse(session)[label];
+    } else {
+      return null;
+    }
+  } catch {
+    try {
+      const session = await AsyncStorage.getItem(storage + "Backup");
+      if (label in JSON.parse(session)) {
+        return JSON.parse(session)[label];
+      } else {
+        return null;
+      }
+    } catch {
+      return null;
+    }
+  }
+}
+
+export async function setEncryptedStorageValue(value, storage = "General") {
+  try {
+    const session = await EncryptedStorage.getItem(storage);
+    await EncryptedStorage.setItem(
+      storage,
+      JSON.stringify({
+        ...JSON.parse(session),
+        ...value,
+      }),
+    );
+  } catch {
+    const session = await AsyncStorage.getItem(storage + "Backup");
+    await AsyncStorage.setItem(
+      storage + "Backup",
+      JSON.stringify({
+        ...JSON.parse(session),
+        ...value,
+      }),
+    );
+  }
+}
+
+export async function nukeStorage(storage = "General") {
+  try {
+    await AsyncStorage.clear();
+    await clearSecureStorage(storage);
+  } catch {
+    console.log("Failed to clear AsyncStorage");
+  }
+}
+
+export async function clearSecureStorage(storage) {
+  try {
+    await EncryptedStorage.deleteItemAsync(storage);
+  } catch {
+    console.log("Failed to clear EncryptedStorage");
+  }
+}
+
+export function epsilonRound(num, zeros = 4) {
+  let temp = num;
+  if (typeof num === "string") {
+    temp = parseFloat(num);
+  }
+  return (
+    Math.round((temp + Number.EPSILON) * Math.pow(10, zeros)) /
+    Math.pow(10, zeros)
+  );
+}
+
+export const normalizeFontSize = (size) => {
+  let { width, height } = Dimensions.get("window");
+  if (Platform.OS === "web" && height / width < 1) {
+    width /= 2.3179;
+    height *= 0.7668;
+  }
+  const scale = width / 375;
+  const factor = 0.4;
+  const moderateScale = 1 + (scale - 1) * factor;
+  // Clamp the scale between 0.85 (min) and 1.2 (max) to prevent overlapping layouts
+  const clampedScale = Math.max(0.85, Math.min(1.2, moderateScale));
+  return PixelRatio.roundToNearestPixel(size * clampedScale);
+};
+
+export function useStateAsync(initialValue) {
+  const [state, setState] = useState(initialValue);
+  const resolverRef = useRef(null);
+
+  const asyncSetState = useCallback((newValue) => {
+    setState(newValue);
+    return new Promise((resolve) => {
+      resolverRef.current = resolve;
+    });
+  }, []);
+
+  // Resolve the promise after state updates
+  useEffect(() => {
+    if (resolverRef.current) {
+      resolverRef.current(state);
+      resolverRef.current = null;
+    }
+  }, [state]);
+
+  return [state, asyncSetState];
+}