Discord Activity Wrapper Page

cgen-22bf7512a16245b4a6db40df9fa79d58

client/pages/DiscordActivity.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useState } from 'react';
+import { useDiscord } from '@/contexts/DiscordContext';
+import LoadingScreen from '@/components/LoadingScreen';
+
+interface DiscordSDK {
+  ready: () => Promise<void>;
+  user: {
+    getMe: () => Promise<any>;
+  };
+  commands: {
+    authorize: (options: any) => Promise<any>;
+  };
+}
+
+export default function DiscordActivity() {
+  const { isDiscordActivity, discordUser } = useDiscord();
+  const [sdkReady, setSdkReady] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const initDiscordSDK = async () => {
+      try {
+        // Discord SDK should be loaded by the script in index.html
+        if (!(window as any).DiscordSDK) {
+          throw new Error('Discord SDK not loaded');
+        }
+
+        const discord = (window as any).DiscordSDK as DiscordSDK;
+        
+        // Ready the SDK
+        await discord.ready();
+        setSdkReady(true);
+
+        // Subscribe to close events
+        if (discord.subscribe) {
+          discord.subscribe('ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE', (data: any) => {
+            console.log('Discord participants updated:', data);
+          });
+        }
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        console.error('Failed to initialize Discord SDK:', err);
+        setError(errorMessage);
+      }
+    };
+
+    if (!sdkReady) {
+      initDiscordSDK();
+    }
+  }, []);
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="text-center space-y-4">
+          <h1 className="text-2xl font-bold text-foreground">Discord Activity Error</h1>
+          <p className="text-muted-foreground">{error}</p>
+          <p className="text-sm text-muted-foreground">
+            Make sure you're running this as a Discord Activity within a Discord server.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isDiscordActivity || !sdkReady) {
+    return (
+      <LoadingScreen
+        message="Initializing Discord Activity..."
+        showProgress
+        duration={1000}
+      />
+    );
+  }
+
+  if (!discordUser) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="text-center space-y-4">
+          <h1 className="text-2xl font-bold text-foreground">Welcome to AeThex</h1>
+          <p className="text-muted-foreground">Discord user information unavailable</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Activity is ready and user is authenticated via Discord
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="p-4 text-sm text-muted-foreground border-b border-border/50">
+        <p>👋 Welcome <strong>{discordUser.username}</strong> to AeThex Discord Activity</p>
+      </div>
+      <div className="container mx-auto py-8">
+        <div className="text-center space-y-4">
+          <h1 className="text-3xl font-bold text-foreground">AeThex Community</h1>
+          <p className="text-muted-foreground">Full platform access from Discord</p>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mt-8">
+            <a
+              href="/feed"
+              className="p-4 rounded-lg border border-border/50 hover:border-aethex-400/50 transition text-left"
+            >
+              <div className="font-semibold">Community Feed</div>
+              <p className="text-sm text-muted-foreground mt-1">View posts and engage with creators</p>
+            </a>
+            <a
+              href="/community"
+              className="p-4 rounded-lg border border-border/50 hover:border-aethex-400/50 transition text-left"
+            >
+              <div className="font-semibold">Community Hub</div>
+              <p className="text-sm text-muted-foreground mt-1">Connect with mentors and developers</p>
+            </a>
+            <a
+              href="/dashboard"
+              className="p-4 rounded-lg border border-border/50 hover:border-aethex-400/50 transition text-left"
+            >
+              <div className="font-semibold">Dashboard</div>
+              <p className="text-sm text-muted-foreground mt-1">Manage your projects and profile</p>
+            </a>
+            <a
+              href="/roadmap"
+              className="p-4 rounded-lg border border-border/50 hover:border-aethex-400/50 transition text-left"
+            >
+              <div className="font-semibold">Roadmap</div>
+              <p className="text-sm text-muted-foreground mt-1">Vote on upcoming features</p>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}