Add files via upload

src/components/Layout.tsx

@@ -1,8 +1,21 @@
 import React from 'react';
-import { Link, Outlet } from 'react-router-dom';
+import { Link, Outlet, useSearchParams } from 'react-router-dom';
 import { Navigation } from './Navigation';
 
 export function Layout() {
+  const [searchParams] = useSearchParams();
+  const isIframe = searchParams.get('iframe') === '1';
+
+  if (isIframe) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-white">
+        <main className="container mx-auto px-4 py-4 md:py-8">
+          <Outlet />
+        </main>
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen bg-gray-900 text-white">
       <Navigation />

src/components/Navigation.tsx

@@ -1,18 +1,21 @@
 import React, { useState } from 'react';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Link, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { Flame, Menu, X } from 'lucide-react';
 import { useStore } from '../store/useStore';
 
 export function Navigation() {
   const location = useLocation();
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const { user, setUser } = useStore();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const isIframe = searchParams.get('iframe') === '1';
 
   const handleLogout = () => {
     setUser(null);
     setIsMenuOpen(false);
-    navigate('/login', { replace: true }); // Use replace to prevent going back to dashboard
+    const newPath = '/login' + (isIframe ? '?iframe=1' : '');
+    navigate(newPath, { replace: true });
   };
 
   const handleMenuClick = () => {
@@ -23,11 +26,16 @@ export function Navigation() {
     setIsMenuOpen(false);
   };
 
+  // Helper function to add iframe parameter to paths
+  const getPath = (path: string) => {
+    return isIframe ? `${path}?iframe=1` : path;
+  };
+
   return (
     <nav className="border-b border-gray-800 bg-gray-900 sticky top-0 z-50">
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-16">
-          <Link to="/" className="flex items-center space-x-2" onClick={handleNavigation}>
+          <Link to={getPath('/')} className="flex items-center space-x-2" onClick={handleNavigation}>
             {import.meta.env.VITE_LOGO_URL ? (
               <img 
                 src={import.meta.env.VITE_LOGO_URL} 
@@ -47,7 +55,7 @@ export function Navigation() {
             {user ? (
               <>
                 <Link
-                  to="/dashboard"
+                  to={getPath('/dashboard')}
                   className="px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors"
                 >
                   Dashboard
@@ -61,7 +69,7 @@ export function Navigation() {
               </>
             ) : (
               <Link
-                to="/login"
+                to={getPath('/login')}
                 className="px-4 py-2 bg-orange-500 rounded-lg hover:bg-orange-600 transition-colors"
               >
                 Connect Nostr
@@ -89,7 +97,7 @@ export function Navigation() {
               {user ? (
                 <>
                   <Link
-                    to="/dashboard"
+                    to={getPath('/dashboard')}
                     onClick={handleNavigation}
                     className="px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors"
                   >
@@ -104,7 +112,7 @@ export function Navigation() {
                 </>
               ) : (
                 <Link
-                  to="/login"
+                  to={getPath('/login')}
                   onClick={handleNavigation}
                   className="px-4 py-2 bg-orange-500 rounded-lg hover:bg-orange-600 transition-colors text-center"
                 >

src/pages/Dashboard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
-import { Shield, AlertTriangle, Zap, Copy, Activity, Users } from 'lucide-react';
+import { Shield, AlertTriangle, Zap, Copy, Activity, Users, LogOut } from 'lucide-react';
 import { useStore } from '../store/useStore';
 import { apiService } from '../services/api';
 import { Notification } from '../components/Notification';
@@ -15,6 +15,8 @@ export function Dashboard() {
   const isDemoMode = import.meta.env.VITE_ENABLE_DEMO === 'true';
   const apiUrl = import.meta.env.VITE_API_URL;
   const { isVisible, message, type, showNotification, hideNotification } = useNotification();
+  const [searchParams] = useSearchParams();
+  const isIframe = searchParams.get('iframe') === '1';
 
   // Check user authentication and fetch status once
   useEffect(() => {
@@ -34,7 +36,6 @@ export function Dashboard() {
             npub: userInfo.npub,
           });
         } catch (error: any) {
-          // If user is not found (404) or any other error, assume not whitelisted
           if (error.response?.status === 404 || error) {
             setUser({
               ...user,
@@ -48,7 +49,7 @@ export function Dashboard() {
     };
 
     checkUserStatus();
-  }, [user?.pubkey, navigate, setUser, isDemoMode]); // Only run on mount and when these dependencies change
+  }, [user?.pubkey, navigate, setUser, isDemoMode]);
 
   // Fetch uptime and active users
   useEffect(() => {
@@ -109,6 +110,11 @@ export function Dashboard() {
     }
   };
 
+  const handleLogout = () => {
+    setUser(null);
+    navigate('/login');
+  };
+
   if (loading || !user) {
     return (
       <div className="flex justify-center items-center min-h-[400px]">
@@ -223,6 +229,19 @@ export function Dashboard() {
             <p className="text-gray-400">Active Users</p>
           </div>
         </div>
+
+        {/* Logout Button (only shown in iframe mode) */}
+        {isIframe && (
+          <div className="flex justify-center">
+            <button
+              onClick={handleLogout}
+              className="flex items-center space-x-2 px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors"
+            >
+              <LogOut className="h-5 w-5" />
+              <span>Logout</span>
+            </button>
+          </div>
+        )}
       </div>
       <Notification
         isVisible={isVisible}

src/pages/Home.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { Flame, Zap, Shield, Globe, Server, Code, Cpu, Copy } from 'lucide-react';
 import { Notification } from '../components/Notification';
 import { useNotification } from '../hooks/useNotification';
 
 export function Home() {
   const { isVisible, message, type, showNotification, hideNotification } = useNotification();
+  const [searchParams] = useSearchParams();
+  const isIframe = searchParams.get('iframe') === '1';
 
   const copyToClipboard = async (text: string) => {
     try {
@@ -26,7 +28,7 @@ export function Home() {
             A high-performance Nostr relay built by Bitcoiners, for Bitcoiners
           </p>
           <Link
-            to="/login"
+            to={isIframe ? '/login?iframe=1' : '/login'}
             className="inline-block px-8 py-4 bg-orange-500 rounded-lg hover:bg-orange-600 transition-colors font-semibold text-lg"
           >
             Get Started

src/pages/Login.tsx

@@ -1,19 +1,21 @@
 import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Loader2, Zap } from 'lucide-react';
 import { useStore } from '../store/useStore';
 
 export function Login() {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const { user, setUser } = useStore();
   const [isLoading, setIsLoading] = useState(false);
   const [pubkeyInput, setPubkeyInput] = useState('');
+  const isIframe = searchParams.get('iframe') === '1';
 
   useEffect(() => {
     if (user) {
-      navigate('/dashboard');
+      navigate(isIframe ? '/dashboard?iframe=1' : '/dashboard');
     }
-  }, [user, navigate]);
+  }, [user, navigate, isIframe]);
 
   const handleExtensionLogin = async () => {
     setIsLoading(true);
@@ -33,9 +35,8 @@ export function Login() {
         throw new Error('No public key found');
       }
 
-      // Simply store the pubkey and navigate to dashboard
       setUser({ pubkey, isWhitelisted: false });
-      navigate('/dashboard');
+      navigate(isIframe ? '/dashboard?iframe=1' : '/dashboard');
     } catch (error: any) {
       if (error.message === 'Rejected by user') {
         return;
@@ -62,9 +63,8 @@ export function Login() {
 
     setIsLoading(true);
     try {
-      // Simply store the pubkey and navigate to dashboard
       setUser({ pubkey: pubkeyInput.trim(), isWhitelisted: false });
-      navigate('/dashboard');
+      navigate(isIframe ? '/dashboard?iframe=1' : '/dashboard');
     } catch (error) {
       console.error('Login failed:', error);
       alert('Failed to login with the provided public key. Please check the format and try again.');

src/pages/Payment.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { QRCodeSVG } from 'qrcode.react';
 import { Copy, CheckCircle } from 'lucide-react';
 import { useStore } from '../store/useStore';
@@ -11,6 +11,7 @@ import { useNotification } from '../hooks/useNotification';
 
 export function Payment() {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const { user, setUser } = useStore();
   const [invoice, setInvoice] = useState<LightningInvoice | null>(null);
   const [loading, setLoading] = useState(true);
@@ -19,15 +20,16 @@ export function Payment() {
   const { isVisible, message, type, showNotification, hideNotification } = useNotification();
   const [checkingPayment, setCheckingPayment] = useState(false);
   const [showSuccess, setShowSuccess] = useState(false);
+  const isIframe = searchParams.get('iframe') === '1';
 
   useEffect(() => {
     if (!user) {
-      navigate('/login');
+      navigate(isIframe ? '/login?iframe=1' : '/login');
       return;
     }
 
     if (user.isWhitelisted) {
-      navigate('/dashboard');
+      navigate(isIframe ? '/dashboard?iframe=1' : '/dashboard');
       return;
     }
 
@@ -59,12 +61,12 @@ export function Payment() {
     };
 
     generateInvoice();
-  }, [user, navigate]);
+  }, [user, navigate, isIframe]);
 
   const handlePaymentSuccess = async () => {
     setShowSuccess(true);
     setTimeout(() => {
-      navigate('/thank-you');
+      navigate(isIframe ? '/thank-you?iframe=1' : '/thank-you');
     }, 1500);
     return true;
   };
@@ -147,7 +149,6 @@ export function Payment() {
   return (
     <>
       <div className="max-w-md mx-auto bg-gray-800 rounded-lg p-8 relative">
-        {/* Success Animation Overlay */}
         {showSuccess && (
           <div className="absolute inset-0 bg-gray-900/95 flex items-center justify-center rounded-lg animate-fade-in z-10">
             <div className="text-center animate-success-appear">

src/pages/Terms.tsx

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { Shield } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 
 export function Terms() {
   const [terms, setTerms] = useState<string>('');
   const [loading, setLoading] = useState(true);
+  const [searchParams] = useSearchParams();
+  const isIframe = searchParams.get('iframe') === '1';
 
   useEffect(() => {
     const fetchTerms = async () => {

src/pages/ThankYou.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { CheckCircle, Copy, ArrowRight } from 'lucide-react';
 import { useStore } from '../store/useStore';
 import confetti from 'canvas-confetti';
@@ -8,13 +8,15 @@ import { useNotification } from '../hooks/useNotification';
 
 export function ThankYou() {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const { user } = useStore();
   const { isVisible, message, type, showNotification, hideNotification } = useNotification();
   const relayUrl = import.meta.env.VITE_NOSTR_RELAY_URL;
+  const isIframe = searchParams.get('iframe') === '1';
 
   useEffect(() => {
     if (!user) {
-      navigate('/login');
+      navigate(isIframe ? '/login?iframe=1' : '/login');
       return;
     }
 
@@ -36,7 +38,6 @@ export function ThankYou() {
 
       const particleCount = 50 * (timeLeft / duration);
       
-      // Since they fall down, start a bit higher than random
       confetti({
         ...defaults,
         particleCount,
@@ -50,7 +51,7 @@ export function ThankYou() {
     }, 250);
 
     return () => clearInterval(interval);
-  }, [user, navigate]);
+  }, [user, navigate, isIframe]);
 
   const copyToClipboard = async (text: string) => {
     try {
@@ -114,7 +115,7 @@ export function ThankYou() {
       </div>
 
       <button
-        onClick={() => navigate('/dashboard')}
+        onClick={() => navigate(isIframe ? '/dashboard?iframe=1' : '/dashboard')}
         className="px-8 py-4 bg-orange-500 rounded-lg hover:bg-orange-600 transition-colors font-semibold"
       >
         Go to Dashboard