dont disable button (#4785)

charmverse · Oct 10, 2024 · 5102941 · 5102941
1 parent 7b72eea
commit 5102941
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/apps/scoutgame/components/common/WarpcastLogin/FarcasterModal.tsx b/apps/scoutgame/components/common/WarpcastLogin/FarcasterModal.tsx
@@ -6,7 +6,7 @@ import { Paper } from '@mui/material';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import type { ModalProps } from '@mui/material/Modal';
-import Modal from '@mui/material/Modal';
+import Dialog from '@mui/material/Modal';
 import Typography from '@mui/material/Typography';
 
 const sx = {
@@ -21,9 +21,9 @@ const sx = {
   borderRadius: 3
 };
 
-export function FarcasterLoginModal({ url, ...props }: Omit<ModalProps, 'children'> & { url?: string }) {
+export function FarcasterLoginModal({ url, open, onClose }: Omit<ModalProps, 'children'> & { url?: string }) {
   return (
-    <Modal open={props.open && !!url} onClose={props.onClose} data-mui-color-scheme='light' data-test='farcaster-modal'>
+    <Dialog onClose={onClose} open={open && !!url} data-mui-color-scheme='light' data-test='farcaster-modal'>
       <Paper sx={sx}>
         <Typography variant='h6' fontWeight='bold'>
           Sign in with Farcaster
@@ -39,6 +39,6 @@ export function FarcasterLoginModal({ url, ...props }: Omit<ModalProps, 'childre
           </Link>
         </Box>
       </Paper>
-    </Modal>
+    </Dialog>
   );
 }
diff --git a/apps/scoutgame/components/common/WarpcastLogin/WarpcastLoginButton.tsx b/apps/scoutgame/components/common/WarpcastLogin/WarpcastLoginButton.tsx
@@ -6,10 +6,10 @@ import { useProfile } from '@farcaster/auth-kit';
 import type { StatusAPIResponse, AuthClientError } from '@farcaster/auth-kit';
 import type { ButtonProps } from '@mui/material';
 import { Box, Button, Typography } from '@mui/material';
-import { usePopupState } from 'material-ui-popup-state/hooks';
+import { usePopupState, bindPopover } from 'material-ui-popup-state/hooks';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useAction } from 'next-safe-action/hooks';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import { LoadingComponent } from 'components/common/Loading/LoadingComponent';
 import { useFarcasterConnection } from 'hooks/useFarcasterConnection';
@@ -73,7 +73,11 @@ export function WarpcastLoginButton({ children, ...props }: ButtonProps) {
     popupState.open();
   }, []);
 
-  const { signIn, url } = useFarcasterConnection({
+  const {
+    signIn,
+    url,
+    error: connectionError
+  } = useFarcasterConnection({
     onSuccess: onSuccessCallback,
     onError: onErrorCallback,
     onClick
@@ -87,16 +91,19 @@ export function WarpcastLoginButton({ children, ...props }: ButtonProps) {
     );
   }
 
-  const errorMessage = result?.serverError?.message?.includes('private beta')
-    ? 'Scout Game is in private beta'
-    : 'There was an error while logging in';
+  const errorMessage =
+    (connectionError && connectionError.message) ||
+    (hasErrored &&
+      (result?.serverError?.message?.includes('private beta')
+        ? 'Scout Game is in private beta'
+        : 'There was an error while logging in'));
 
   return (
     <Box width='100%' data-test='connect-with-farcaster'>
       <Button
         size='large'
         onClick={signIn}
-        disabled={!url}
+        variant='contained'
         sx={{
           px: {
             xs: 2.5,
@@ -108,16 +115,15 @@ export function WarpcastLoginButton({ children, ...props }: ButtonProps) {
           }
         }}
         startIcon={<WarpcastIcon />}
-        {...props}
       >
         {children || 'Sign in with Warpcast'}
       </Button>
-      {hasErrored && (
+      {errorMessage && (
         <Typography variant='body2' sx={{ mt: 2 }} color='error'>
           {errorMessage}
         </Typography>
       )}
-      <FarcasterLoginModal open={popupState.isOpen} onClose={() => popupState.close()} url={url} />
+      <FarcasterLoginModal {...bindPopover(popupState)} url={url} />
     </Box>
   );
 }