fix: update @pezkuwi/api packages to 16.5.22

backend/package.json

@@ -12,7 +12,7 @@
     "tar": "^7.4.3"
   },
   "dependencies": {
-    "@pezkuwi/api": "^16.5.18",
+    "@pezkuwi/api": "^16.5.22",
     "@pezkuwi/util": "^14.0.13",
     "@pezkuwi/util-crypto": "^14.0.13",
     "cors": "^2.8.5",

mobile/package.json

@@ -38,9 +38,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
-    "@pezkuwi/api": "^16.5.18",
+    "@pezkuwi/api": "^16.5.22",
     "@pezkuwi/keyring": "^14.0.13",
-    "@pezkuwi/types": "^16.5.18",
+    "@pezkuwi/types": "^16.5.22",
     "@pezkuwi/util": "^14.0.13",
     "@pezkuwi/util-crypto": "^14.0.13",
     "@react-native-async-storage/async-storage": "^2.2.0",
@@ -80,17 +80,17 @@
   },
   "overrides": {
     "react-test-renderer": "19.1.0",
-    "@pezkuwi/api-augment": "^16.5.18",
-    "@pezkuwi/api-base": "^16.5.18",
-    "@pezkuwi/api-derive": "^16.5.18",
-    "@pezkuwi/rpc-augment": "^16.5.18",
-    "@pezkuwi/rpc-core": "^16.5.18",
-    "@pezkuwi/rpc-provider": "^16.5.18",
-    "@pezkuwi/types": "^16.5.18",
-    "@pezkuwi/types-augment": "^16.5.18",
-    "@pezkuwi/types-codec": "^16.5.18",
-    "@pezkuwi/types-create": "^16.5.18",
-    "@pezkuwi/types-known": "^16.5.18",
+    "@pezkuwi/api-augment": "^16.5.22",
+    "@pezkuwi/api-base": "^16.5.22",
+    "@pezkuwi/api-derive": "^16.5.22",
+    "@pezkuwi/rpc-augment": "^16.5.22",
+    "@pezkuwi/rpc-core": "^16.5.22",
+    "@pezkuwi/rpc-provider": "^16.5.22",
+    "@pezkuwi/types": "^16.5.22",
+    "@pezkuwi/types-augment": "^16.5.22",
+    "@pezkuwi/types-codec": "^16.5.22",
+    "@pezkuwi/types-create": "^16.5.22",
+    "@pezkuwi/types-known": "^16.5.22",
     "@pezkuwi/networks": "^16.5.9",
     "@pezkuwi/keyring": "^14.0.13",
     "@pezkuwi/util": "^14.0.13",

web/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
-    "@pezkuwi/api": "^16.5.18",
+    "@pezkuwi/api": "^16.5.22",
     "@pezkuwi/extension-dapp": "^0.62.20",
     "@pezkuwi/keyring": "^14.0.13",
     "@pezkuwi/util": "^14.0.13",
@@ -92,18 +92,18 @@
     "zod": "^3.23.8"
   },
   "overrides": {
-    "@pezkuwi/api": "^16.5.18",
-    "@pezkuwi/api-augment": "^16.5.18",
-    "@pezkuwi/api-base": "^16.5.18",
-    "@pezkuwi/api-derive": "^16.5.18",
-    "@pezkuwi/rpc-augment": "^16.5.18",
-    "@pezkuwi/rpc-core": "^16.5.18",
-    "@pezkuwi/rpc-provider": "^16.5.18",
-    "@pezkuwi/types": "^16.5.18",
-    "@pezkuwi/types-augment": "^16.5.18",
-    "@pezkuwi/types-codec": "^16.5.18",
-    "@pezkuwi/types-create": "^16.5.18",
-    "@pezkuwi/types-known": "^16.5.18",
+    "@pezkuwi/api": "^16.5.22",
+    "@pezkuwi/api-augment": "^16.5.22",
+    "@pezkuwi/api-base": "^16.5.22",
+    "@pezkuwi/api-derive": "^16.5.22",
+    "@pezkuwi/rpc-augment": "^16.5.22",
+    "@pezkuwi/rpc-core": "^16.5.22",
+    "@pezkuwi/rpc-provider": "^16.5.22",
+    "@pezkuwi/types": "^16.5.22",
+    "@pezkuwi/types-augment": "^16.5.22",
+    "@pezkuwi/types-codec": "^16.5.22",
+    "@pezkuwi/types-create": "^16.5.22",
+    "@pezkuwi/types-known": "^16.5.22",
     "@pezkuwi/types-support": "^16.5.18",
     "@pezkuwi/keyring": "$@pezkuwi/keyring",
     "@pezkuwi/util": "$@pezkuwi/util",

web/src/pages/EmailVerification.tsx

@@ -1,46 +1,155 @@
 import { useEffect, useState } from 'react';
-import { useSearchParams, useNavigate } from 'react-router-dom';
+import { useSearchParams, useNavigate, useLocation } from 'react-router-dom';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { supabase } from '@/lib/supabase';
-import { CheckCircle, XCircle, Loader2, ArrowLeft } from 'lucide-react';
+import { CheckCircle, XCircle, Loader2, ArrowLeft, Mail, RefreshCw } from 'lucide-react';
 
 export default function EmailVerification() {
   const [searchParams] = useSearchParams();
+  const location = useLocation();
   const navigate = useNavigate();
-  const [verifying, setVerifying] = useState(true);
+  const [verifying, setVerifying] = useState(false);
   const [verified, setVerified] = useState(false);
   const [error, setError] = useState('');
+  const [resending, setResending] = useState(false);
+  const [resent, setResent] = useState(false);
+
+  // Get email from navigation state (after sign up)
+  const email = location.state?.email;
+  const token = searchParams.get('token');
+  const type = searchParams.get('type');
 
   useEffect(() => {
-    const token = searchParams.get('token');
-    if (token) {
+    // Handle Supabase email confirmation callback
+    if (type === 'signup' || type === 'email_change') {
+      // Supabase handles this automatically via the URL hash
+      // Check if we have an active session
+      supabase.auth.getSession().then(({ data: { session } }) => {
+        if (session) {
+          setVerified(true);
+        }
+      });
+    } else if (token) {
       verifyEmail(token);
-    } else {
-      setError('No verification token provided');
-      setVerifying(false);
     }
-  }, [searchParams]);
+  }, [token, type]);
 
-  const verifyEmail = async (token: string) => {
+  const verifyEmail = async (verifyToken: string) => {
+    setVerifying(true);
     try {
       const { error } = await supabase.functions.invoke('email-verification', {
-        body: { action: 'verify', token }
+        body: { action: 'verify', token: verifyToken }
       });
 
       if (error) throw error;
-      
+
       setVerified(true);
-    } catch (err: Error) {
-      setError(err.message || 'Failed to verify email');
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to verify email';
+      setError(errorMessage);
     } finally {
       setVerifying(false);
     }
   };
 
+  const handleResendEmail = async () => {
+    if (!email) return;
+
+    setResending(true);
+    setError('');
+    try {
+      const { error } = await supabase.auth.resend({
+        type: 'signup',
+        email: email,
+      });
+
+      if (error) throw error;
+
+      setResent(true);
+      setTimeout(() => setResent(false), 5000);
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to resend email';
+      setError(errorMessage);
+    } finally {
+      setResending(false);
+    }
+  };
+
+  // Show "check your email" screen after sign up
+  if (email && !token && !type) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 flex items-center justify-center p-4">
+        <Card className="w-full max-w-md relative bg-gray-900/90 backdrop-blur-xl border-gray-800">
+          <button
+            onClick={() => navigate('/login')}
+            className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors z-10"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </button>
+          <CardHeader className="text-center">
+            <div className="mx-auto w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mb-4">
+              <Mail className="w-8 h-8 text-green-500" />
+            </div>
+            <CardTitle className="text-2xl text-white">Check Your Email</CardTitle>
+            <CardDescription className="text-gray-400">
+              We sent a verification link to
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="text-center space-y-6">
+            <p className="text-lg font-medium text-green-400">{email}</p>
+
+            <div className="bg-gray-800/50 rounded-lg p-4 text-left space-y-2">
+              <p className="text-sm text-gray-300">Please check your email and click the verification link to activate your account.</p>
+              <p className="text-xs text-gray-500">If you don't see the email, check your spam folder.</p>
+            </div>
+
+            {error && (
+              <p className="text-sm text-red-400">{error}</p>
+            )}
+
+            {resent && (
+              <p className="text-sm text-green-400">Verification email sent!</p>
+            )}
+
+            <div className="space-y-3">
+              <Button
+                variant="outline"
+                className="w-full border-gray-700 bg-gray-800 hover:bg-gray-700 text-white"
+                onClick={handleResendEmail}
+                disabled={resending}
+              >
+                {resending ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Sending...
+                  </>
+                ) : (
+                  <>
+                    <RefreshCw className="mr-2 h-4 w-4" />
+                    Resend Verification Email
+                  </>
+                )}
+              </Button>
+
+              <Button
+                variant="ghost"
+                className="w-full text-gray-400 hover:text-white"
+                onClick={() => navigate('/login')}
+              >
+                Back to Login
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // Show verification status screen (when user clicks email link)
   return (
-    <div className="container mx-auto flex items-center justify-center min-h-screen p-4">
-      <Card className="w-full max-w-md relative">
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 flex items-center justify-center p-4">
+      <Card className="w-full max-w-md relative bg-gray-900/90 backdrop-blur-xl border-gray-800">
         <button
           onClick={() => navigate('/')}
           className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors z-10"
@@ -48,40 +157,43 @@ export default function EmailVerification() {
           <ArrowLeft className="w-5 h-5" />
         </button>
         <CardHeader>
-          <CardTitle>Email Verification</CardTitle>
-          <CardDescription>
+          <CardTitle className="text-white">Email Verification</CardTitle>
+          <CardDescription className="text-gray-400">
             {verifying ? 'Verifying your email...' : 'Email verification status'}
           </CardDescription>
         </CardHeader>
         <CardContent className="text-center space-y-4">
           {verifying && (
             <div className="flex flex-col items-center space-y-4">
-              <Loader2 className="h-12 w-12 animate-spin text-primary" />
-              <p>Please wait while we verify your email...</p>
+              <Loader2 className="h-12 w-12 animate-spin text-green-500" />
+              <p className="text-gray-300">Please wait while we verify your email...</p>
             </div>
           )}
 
           {!verifying && verified && (
             <div className="flex flex-col items-center space-y-4">
               <CheckCircle className="h-12 w-12 text-green-500" />
-              <h3 className="text-lg font-semibold">Email Verified Successfully!</h3>
-              <p className="text-muted-foreground">
+              <h3 className="text-lg font-semibold text-white">Email Verified Successfully!</h3>
+              <p className="text-gray-400">
                 Your email has been verified. You can now access all features.
               </p>
-              <Button onClick={() => navigate('/dashboard')}>
-                Go to Dashboard
+              <Button
+                className="bg-green-600 hover:bg-green-500"
+                onClick={() => navigate('/login')}
+              >
+                Go to Login
               </Button>
             </div>
           )}
 
-          {!verifying && !verified && (
+          {!verifying && !verified && error && (
             <div className="flex flex-col items-center space-y-4">
               <XCircle className="h-12 w-12 text-red-500" />
-              <h3 className="text-lg font-semibold">Verification Failed</h3>
-              <p className="text-muted-foreground">{error}</p>
+              <h3 className="text-lg font-semibold text-white">Verification Failed</h3>
+              <p className="text-gray-400">{error}</p>
               <div className="flex gap-2">
-                <Button variant="outline" onClick={() => navigate('/dashboard')}>
-                  Go to Dashboard
+                <Button variant="outline" onClick={() => navigate('/')}>
+                  Go to Home
                 </Button>
                 <Button onClick={() => navigate('/login')}>
                   Login
@@ -89,8 +201,21 @@ export default function EmailVerification() {
               </div>
             </div>
           )}
+
+          {!verifying && !verified && !error && !token && !type && (
+            <div className="flex flex-col items-center space-y-4">
+              <Mail className="h-12 w-12 text-gray-500" />
+              <h3 className="text-lg font-semibold text-white">No Verification Token</h3>
+              <p className="text-gray-400">
+                Please click the verification link in your email.
+              </p>
+              <Button onClick={() => navigate('/login')}>
+                Back to Login
+              </Button>
+            </div>
+          )}
         </CardContent>
       </Card>
     </div>
   );
-}
+}

web/src/pages/Login.tsx

@@ -79,16 +79,17 @@ const Login: React.FC = () => {
       }
       
       const { error } = await signUp(
-        signupData.email, 
-        signupData.password, 
-        signupData.name, 
+        signupData.email,
+        signupData.password,
+        signupData.name,
         signupData.referralCode
       );
-      
+
       if (error) {
         setError(error.message);
       } else {
-        navigate('/');
+        // Redirect to email verification page
+        navigate('/email-verification', { state: { email: signupData.email } });
       }
     } catch {
       setError('Signup failed. Please try again.');