merge dev to main (#832)

Co-authored-by: mariodev <[email protected]>
streamethorg · Jul 30, 2024 · 79a433e · 79a433e
1 parent d1d8930
commit 79a433e
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 53 deletions.
diff --git a/packages/app/components/authorization/AuthorizationMessage.tsx b/packages/app/components/authorization/AuthorizationMessage.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { SignInUserButton } from '../misc/SignInUserButton';
 import {
   Card,
@@ -12,24 +12,10 @@ import {
 import LoginBackground from '@/public/login-background.png';
 import Image from 'next/image';
 
-import { usePrivy } from '@privy-io/react-auth';
-import { toast } from 'sonner';
-
 import Link from 'next/link';
 import SignInWithSocials from './SignInWithSocials';
 
 const AuthorizationMessage = () => {
-  const { ready, authenticated, login } = usePrivy();
-
-  useEffect(() => {
-    if (ready && !authenticated) {
-      login();
-    }
-    if (authenticated) {
-      toast.message('Redirecting to Studio...');
-    }
-  }, [ready, authenticated]);
-
   return (
     <div className="flex h-screen w-screen flex-row">
       <div className="flex h-full w-1/2 flex-col items-center justify-center">
@@ -39,8 +25,20 @@ const AuthorizationMessage = () => {
             <CardDescription>
               Click the sign in button to connect to StreamETH
             </CardDescription>
-            <div className="flex w-full items-center justify-center pt-[20px]">
-              <SignInUserButton />
+            <div className="flex flex-col divide-y gap-4">
+              <div className="flex w-full items-center justify-center pt-[20px]">
+                <SignInUserButton />
+              </div>
+
+              <div className="pt-6 text-sm">
+                Don&apos;t have an account? {` `}
+                <Link
+                  className="text-primary text-bold"
+                  href={'https://xg2nwufp1ju.typeform.com/to/UHZwa5M3'}
+                >
+                  Create Account
+                </Link>
+              </div>
             </div>
           </CardHeader>
 
@@ -74,7 +72,6 @@ const AuthorizationMessage = () => {
           className="object-cover w-full h-full"
         /> */}
       </div>
-      <div></div>
     </div>
   );
 };

diff --git a/packages/app/components/misc/ConnectWalletButton.tsx b/packages/app/components/misc/ConnectWalletButton.tsx
@@ -16,7 +16,7 @@ export const ConnectWalletButton = ({
         return (
           <Button variant={'primary'} onClick={show} className={className}>
             <span className="px-2 md:px-0">
-              {isConnected ? ensName ?? truncatedAddress : btnText}
+              {isConnected ? (ensName ?? truncatedAddress) : btnText}
             </span>
           </Button>
         );

diff --git a/packages/app/components/misc/SignInUserButton.tsx b/packages/app/components/misc/SignInUserButton.tsx
@@ -3,8 +3,17 @@ import { Button } from '@/components/ui/button';
 import { useLogin, useLogout, usePrivy } from '@privy-io/react-auth';
 import { deleteSession, storeSession } from '@/lib/actions/auth';
 import { apiUrl } from '@/lib/utils/utils';
-import { Loader2 } from 'lucide-react';
+import { LuExternalLink, LuLoader2, LuUserX } from 'react-icons/lu';
 import React, { useEffect, useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+import { toast } from 'sonner';
+import Link from 'next/link';
 
 interface SignInUserButtonProps {
   className?: string;
@@ -17,13 +26,15 @@ export const SignInUserButton = ({
 }: SignInUserButtonProps) => {
   const { ready, authenticated } = usePrivy();
   const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [privyRefreshToken, setPrivyRefreshToken] = useState<string | null>('');
 
-  const privyRefreshToken = localStorage.getItem('privy:refresh_token');
   const parsePrivyRefreshToken = privyRefreshToken
     ? JSON.parse(privyRefreshToken)
     : null;
 
   const getSession = async () => {
+    setIsLoading(true);
     const privyToken = localStorage.getItem('privy:token');
     const token = privyToken ? JSON.parse(privyToken) : null;
     const res = await fetch(`${apiUrl()}/auth/login`, {
@@ -35,26 +46,22 @@ export const SignInUserButton = ({
       headers: { 'Content-Type': 'application/json' },
     });
     const resData = await res.json();
-    storeSession({
-      token: resData?.data?.token,
-      address: resData?.data?.user?.walletAddress,
-    });
+    if (!resData.data?.token) {
+      logout();
+      setIsOpen(true);
+      deleteSession();
+    } else {
+      storeSession({
+        token: resData?.data?.token,
+        address: resData?.data?.user?.walletAddress,
+      });
+    }
+    setIsLoading(false);
   };
 
-  useEffect(() => {
-    if (!parsePrivyRefreshToken) logout();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [parsePrivyRefreshToken]);
-
-  useEffect(() => {
-    if (!parsePrivyRefreshToken) logout();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [parsePrivyRefreshToken]);
-
   const { login } = useLogin({
     onComplete: () => {
       getSession();
-      setIsLoading(false);
     },
     onError: (error) => {
       deleteSession();
@@ -69,6 +76,22 @@ export const SignInUserButton = ({
     },
   });
 
+  useEffect(() => {
+    // Check if we're in the browser
+    if (typeof window !== 'undefined') {
+      const token = localStorage.getItem('privy:refresh_token');
+      setPrivyRefreshToken(token);
+    }
+  }, []);
+
+  useEffect(() => {
+    // This effect runs whenever privyRefreshToken changes
+    if (privyRefreshToken === null || privyRefreshToken === undefined) {
+      logout();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [privyRefreshToken]);
+
   const handleClick = () => {
     setIsLoading(true);
     if (authenticated) {
@@ -79,18 +102,51 @@ export const SignInUserButton = ({
   };
 
   return (
-    <Button
-      onClick={handleClick}
-      className={className}
-      disabled={!ready || isLoading}
-    >
-      {!ready || isLoading ? (
-        <Loader2 className="h-4 w-4 animate-spin" />
-      ) : authenticated ? (
-        'Sign Out'
-      ) : (
-        btnText
-      )}
-    </Button>
+    <>
+      <Button
+        onClick={handleClick}
+        className={className}
+        disabled={!ready || isLoading}
+      >
+        {!ready || isLoading ? (
+          <LuLoader2 className="h-4 w-4 animate-spin" />
+        ) : authenticated ? (
+          'Sign Out'
+        ) : (
+          btnText
+        )}
+      </Button>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-xl">
+              <LuUserX className="h-6 w-6 text-destructive" />
+              User Not Found
+            </DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <p className="text-muted-foreground">
+              We could not find your account. Would you like to create a new one?
+            </p>
+          </div>
+          <DialogFooter className="flex flex-col sm:flex-row gap-2">
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button>
+              <Link
+                href="https://xg2nwufp1ju.typeform.com/to/UHZwa5M3"
+                className="flex items-center gap-2"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Create Account
+                <LuExternalLink className="h-4 w-4" />
+              </Link>
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };
diff --git a/packages/server/src/services/auth.service.ts b/packages/server/src/services/auth.service.ts
@@ -18,12 +18,12 @@ export default class AuthService {
     let existingUser = await this.userService.findOne({
       walletAddress: user.wallet.address,
     });
+
     if (!existingUser) {
-      existingUser = await this.userService.create({
-        walletAddress: user.wallet.address,
-        did: user.id,
-      });
+      await privy.deleteUser(verifyToken.userId);
+      throw new HttpException(404, 'User not found');
     }
+
     let token = jwt.sign(
       { id: existingUser.walletAddress },
       config.jwt.secret,