init

dmtp/client/components/auth/AuthGuard.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useAuth } from '@/hooks/useAuth';
+import { useWalletConnection } from '@/hooks/useWalletConnection';
+import { ReactNode } from 'react';
+
+interface AuthGuardProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+
+/**
+ * Component that requires authentication
+ * Shows fallback or warning if user is not authenticated
+ */
+export function AuthGuard({ children, fallback }: AuthGuardProps) {
+    const { isConnected } = useWalletConnection();
+    const { isAuthenticated, authenticate, isAuthenticating } = useAuth();
+
+    if (!isConnected) {
+        return (
+            fallback || (
+                <div className="text-center py-12">
+                    <div className="max-w-md mx-auto bg-green-50 border border-green-200  p-6">
+                        <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                            🔌 Wallet Not Connected
+                        </h3>
+                        <p className="text-gray-700">
+                            Please connect your wallet to access this feature.
+                        </p>
+                    </div>
+                </div>
+            )
+        );
+    }
+
+    if (!isAuthenticated) {
+        return (
+            fallback || (
+                <div className="text-center py-12">
+                    <div className="max-w-md mx-auto bg-green-50 border border-green-200  p-6">
+                        <h3 className="text-xl font-semibold text-gray-900 mb-4">
+                            🔐 Authentication Required
+                        </h3>
+                        <p className="text-gray-700 mb-4">
+                            Please sign a message to verify your wallet ownership.
+                        </p>
+                        <button
+                            onClick={() => authenticate()}
+                            disabled={isAuthenticating}
+                            className="px-6 py-2 bg-blue-600 text-white  hover:bg-blue-700 transition-colors disabled:bg-gray-400"
+                        >
+                            {isAuthenticating ? 'Authenticating...' : 'Sign Message'}
+                        </button>
+                    </div>
+                </div>
+            )
+        );
+    }
+
+    return <>{children}</>;
+}