From 6c0d14fe45dffe6843451364c88d812b25421713 Mon Sep 17 00:00:00 2001
From: ssss12315 <83549130+ssss12315@users.noreply.github.com>
Date: Sat, 27 Sep 2025 15:55:15 +0800
Subject: [PATCH] Create EnvGuard.tsx

Purpose: When EXPO_PUBLIC_PRIVY_APP_ID / EXPO_PUBLIC_PRIVY_CLIENT_ID is missing, a closable warning bar is displayed at the top of the application, and instructions for the next step (steps from the README) are given.
---
 app/app/components/EnvGuard.tsx | 49 +++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 app/app/components/EnvGuard.tsx

diff --git a/app/app/components/EnvGuard.tsx b/app/app/components/EnvGuard.tsx
new file mode 100644
index 0000000..7e137b5
--- /dev/null
+++ b/app/app/components/EnvGuard.tsx
@@ -0,0 +1,49 @@
+"use client"; //chore(env): add runtime EnvGuard for Privy env keys
+
+import { useMemo, useState } from "react";
+import { View, Text, Pressable } from "react-native";
+
+const REQUIRED_KEYS = ["EXPO_PUBLIC_PRIVY_APP_ID", "EXPO_PUBLIC_PRIVY_CLIENT_ID"] as const;
+
+function readEnv(key: string) {
+  // Expo pastes EXPO_PUBLIC_* into process.env
+  // @ts-expect-error RN global injection at compile time
+  return process.env?.[key];
+}
+
+export default function EnvGuard() {
+  const [dismissed, setDismissed] = useState(false);
+
+  const missing = useMemo(() => {
+    return REQUIRED_KEYS.filter((k) => !readEnv(k));
+  }, []);
+
+  if (dismissed || missing.length === 0) return null;
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1000,
+        backgroundColor: "#F59E0B", // amber-500
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+      }}
+    >
+      <Text style={{ color: "#111827", fontWeight: "700", marginBottom: 4 }}>
+        Environment variable missing：{missing.join(", ")}
+      </Text>
+      <Text style={{ color: "#111827" }}>
+        Please create a .env file in the project root directory and fill it in according to README
+        {" "}
+        EXPO_PUBLIC_PRIVY_APP_ID / EXPO_PUBLIC_PRIVY_CLIENT_ID。
+      </Text>
+      <Pressable onPress={() => setDismissed(true)} style={{ marginTop: 8 }}>
+        <Text style={{ color: "#111827", textDecorationLine: "underline" }}>I already know, hide</Text>
+      </Pressable>
+    </View>
+  );
+}