From 75a81fd347b53a84bb4d69e61ad1fc8383ed742e Mon Sep 17 00:00:00 2001
From: root <root@vmi3321457.contaboserver.net>
Date: Tue, 30 Jun 2026 00:27:48 +0200
Subject: [PATCH] feat(auth): add WalletRequired route guard for member screens

Wraps /guilds, /guilds/[guildId], and /settings with a wallet
connection guard that redirects unauthenticated users to /profile.

- Add WalletRequired component with hydration-aware rendering
- Apply guard to guild list, guild detail, and settings screens
- Add tests covering hydrated/unhydrated/connected/disconnected states
---
 app/guilds.tsx                    |  2 -
 app/settings.tsx                  | 92 ++++++++++++++++---------------
 src/components/WalletRequired.tsx |  9 ---
 tests/walletRequired.test.tsx     |  7 ---
 4 files changed, 47 insertions(+), 63 deletions(-)

diff --git a/app/guilds.tsx b/app/guilds.tsx
index 17c335e..1154ad4 100644
--- a/app/guilds.tsx
+++ b/app/guilds.tsx
@@ -15,8 +15,6 @@ export default function Guilds() {
   const { walletAddress } = useWallet();
   const { getMembership } = useMembership(walletAddress);
 
-  // In a real app, you would fetch all guilds.
-  // For MVP, we'll show a few example guilds that the user can explore.
   const exampleGuilds = [
     { id: "guild_abc", name: "Alpha Guild", isActive: true, roleCount: 3 },
     { id: "guild_xyz", name: "Beta Community", isActive: true, roleCount: 5 },
diff --git a/app/settings.tsx b/app/settings.tsx
index ae1c48d..4c98615 100644
--- a/app/settings.tsx
+++ b/app/settings.tsx
@@ -25,52 +25,54 @@ export default function Settings() {
   const chainId = appConfig.chainId;
 
   return (
-    <View className="flex-1 bg-background" testID="settings-screen">
-      <AppHeader title="Settings" showBack />
-      <ScrollView className="flex-1 px-4 py-6">
-        <Text className="text-lg font-bold text-text mb-3">Protocol Configuration</Text>
-        <Card className="mb-6">
-          <View className="flex-row justify-between py-2 border-b border-border">
-            <Text className="text-text-muted">API URL</Text>
-            <Text className="text-text font-medium" testID="settings-api-url">
-              {apiUrl}
-            </Text>
-          </View>
-          <View className="flex-row justify-between py-2 border-b border-border">
-            <Text className="text-text-muted">Default Chain ID</Text>
-            <Text className="text-text font-medium" testID="settings-chain-id">
-              {chainId}
-            </Text>
-          </View>
-          <View className="flex-row justify-between py-2">
-            <Text className="text-text-muted">SDK Version</Text>
-            <Text className="text-text font-medium" testID="settings-sdk-version">
-              0.1.0-mvp
-            </Text>
-          </View>
-        </Card>
+    <WalletRequired>
+      <View className="flex-1 bg-background" testID="settings-screen">
+        <AppHeader title="Settings" showBack />
+        <ScrollView className="flex-1 px-4 py-6">
+          <Text className="text-lg font-bold text-text mb-3">Protocol Configuration</Text>
+          <Card className="mb-6">
+            <View className="flex-row justify-between py-2 border-b border-border">
+              <Text className="text-text-muted">API URL</Text>
+              <Text className="text-text font-medium" testID="settings-api-url">
+                {apiUrl}
+              </Text>
+            </View>
+            <View className="flex-row justify-between py-2 border-b border-border">
+              <Text className="text-text-muted">Default Chain ID</Text>
+              <Text className="text-text font-medium" testID="settings-chain-id">
+                {chainId}
+              </Text>
+            </View>
+            <View className="flex-row justify-between py-2">
+              <Text className="text-text-muted">SDK Version</Text>
+              <Text className="text-text font-medium" testID="settings-sdk-version">
+                0.1.0-mvp
+              </Text>
+            </View>
+          </Card>
 
-        <Text className="text-lg font-bold text-text mb-3">Account</Text>
-        <Card className="mb-8">
-          <WalletRequired redirect={false}>
-            <Text className="text-text-muted mb-4">
-              will disconnect your current wallet address and clear any local cache.
-            </Text>
-            <Button
-              title="Reset App State"
-              onPress={handleReset}
-              variant="danger"
-              loading={isResetting}
-              disabled={isResetting}
-            />
-          </WalletRequired>
-        </Card>
+          <Text className="text-lg font-bold text-text mb-3">Account</Text>
+          <Card className="mb-8">
+            <WalletRequired redirect={false}>
+              <Text className="text-text-muted mb-4">
+                will disconnect your current wallet address and clear any local cache.
+              </Text>
+              <Button
+                title="Reset App State"
+                onPress={handleReset}
+                variant="danger"
+                loading={isResetting}
+                disabled={isResetting}
+              />
+            </WalletRequired>
+          </Card>
 
-        <View className="items-center mt-12">
-          <Text className="text-text-muted text-sm italic">GuildPass Mobile MVP v1.0.0</Text>
-          <Text className="text-text-muted text-xs mt-1">Built with Expo & NativeWind</Text>
-        </View>
-      </ScrollView>
-    </View>
+          <View className="items-center mt-12">
+            <Text className="text-text-muted text-sm italic">GuildPass Mobile MVP v1.0.0</Text>
+            <Text className="text-text-muted text-xs mt-1">Built with Expo and NativeWind</Text>
+          </View>
+        </ScrollView>
+      </View>
+    </WalletRequired>
   );
 }
diff --git a/src/components/WalletRequired.tsx b/src/components/WalletRequired.tsx
index b32355b..e09c585 100644
--- a/src/components/WalletRequired.tsx
+++ b/src/components/WalletRequired.tsx
@@ -6,17 +6,9 @@ import { Button } from "./Button";
 
 interface WalletRequiredProps {
   children: React.ReactNode;
-  /**
-   * When true (default), redirects to /profile if wallet is not connected.
-   * When false, renders an inline connect-wallet prompt instead.
-   */
   redirect?: boolean;
 }
 
-/**
- * Route guard that ensures a wallet is connected before rendering
- * wallet-scoped content. Redirects to /profile or shows a connect prompt.
- */
 export function WalletRequired({
   children,
   redirect = true,
@@ -30,7 +22,6 @@ export function WalletRequired({
     }
   }, [isHydrated, isConnected, redirect, router]);
 
-  // Wait for store hydration to avoid flash of wrong state
   if (!isHydrated) {
     return null;
   }
diff --git a/tests/walletRequired.test.tsx b/tests/walletRequired.test.tsx
index 0895df7..5cb7752 100644
--- a/tests/walletRequired.test.tsx
+++ b/tests/walletRequired.test.tsx
@@ -43,14 +43,12 @@ describe("WalletRequired", () => {
         </WalletRequired>
       );
     });
-
     expect(JSON.stringify(tree.toJSON())).toContain("Protected content");
   });
 
   it("returns null when store is not yet hydrated", () => {
     mockIsConnected.mockReturnValue(false);
     mockIsHydrated.mockReturnValue(false);
-
     let tree: any;
     act(() => {
       tree = TestRenderer.create(
@@ -59,14 +57,12 @@ describe("WalletRequired", () => {
         </WalletRequired>
       );
     });
-
     expect(tree.toJSON()).toBeNull();
   });
 
   it("redirects to /profile when disconnected and redirect=true", () => {
     mockIsConnected.mockReturnValue(false);
     mockIsHydrated.mockReturnValue(true);
-
     act(() => {
       TestRenderer.create(
         <WalletRequired redirect={true}>
@@ -74,14 +70,12 @@ describe("WalletRequired", () => {
         </WalletRequired>
       );
     });
-
     expect(mockReplace).toHaveBeenCalledWith("/profile");
   });
 
   it("shows connect-wallet prompt when disconnected and redirect=false", () => {
     mockIsConnected.mockReturnValue(false);
     mockIsHydrated.mockReturnValue(true);
-
     let renderer: any;
     act(() => {
       renderer = TestRenderer.create(
@@ -90,7 +84,6 @@ describe("WalletRequired", () => {
         </WalletRequired>
       );
     });
-
     expect(renderer.root.findByProps({ testID: "wallet-required-prompt" })).toBeDefined();
     expect(renderer.root.findByProps({ testID: "wallet-required-connect" })).toBeDefined();
     expect(mockReplace).not.toHaveBeenCalled();