rc 1.0

app/components/UnlockModal.tsx

@@ -1,12 +1,19 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, Suspense } from 'react'
+import AuthModal from './AuthModal'
 
 interface UnlockModalProps {
   isOpen: boolean
   onClose: () => void
 }
 
+interface User {
+  id: number
+  username: string
+  email: string
+}
+
 interface ReferralStatus {
   referralCount: number
   isUnlocked: boolean
@@ -19,6 +26,7 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
   const [referralLink, setReferralLink] = useState<string>('')
   const [loading, setLoading] = useState(true)
   const [copied, setCopied] = useState(false)
+  const [showAuthModal, setShowAuthModal] = useState(false)
 
   useEffect(() => {
     if (isOpen) {
@@ -63,6 +71,12 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
     }
   }
 
+  const handleLogin = async (user: User) => {
+    setShowAuthModal(false)
+    // Refresh referral data after login
+    await fetchReferralData()
+  }
+
   if (!isOpen) return null
 
   const status = referralStatus || {
@@ -192,11 +206,26 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
                   borderRadius: '8px',
                   marginBottom: '24px',
                   textAlign: 'center',
-                  color: 'var(--muted)',
-                  fontSize: '14px',
                 }}
               >
-                Please log in to get your referral link
+                <p style={{ color: 'var(--muted)', fontSize: '14px', margin: '0 0 12px 0' }}>
+                  Please log in to get your referral link
+                </p>
+                <button
+                  onClick={() => setShowAuthModal(true)}
+                  style={{
+                    padding: '10px 20px',
+                    background: 'var(--accent)',
+                    color: '#000',
+                    border: 'none',
+                    borderRadius: '8px',
+                    cursor: 'pointer',
+                    fontSize: '14px',
+                    fontWeight: 500,
+                  }}
+                >
+                  Login
+                </button>
               </div>
             )}
 
@@ -245,6 +274,15 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
           </>
         )}
       </div>
+
+      {/* Auth Modal */}
+      <Suspense fallback={null}>
+        <AuthModal
+          isOpen={showAuthModal}
+          onClose={() => setShowAuthModal(false)}
+          onLogin={handleLogin}
+        />
+      </Suspense>
     </div>
   )
 }