Merge pull request #501 from WatchItDev/main

refactor: session issues and minor fixes (converge branches)

Author: Jadapema

src/components/publication-detail-main.tsx

@@ -224,7 +224,7 @@ export default function PublicationDetailMain({
                 sx={{
                   width: 26,
                   height: 26,
-                  border: (theme) => `solid 2px ${theme.palette.background.default}`,
+                  border: (theme: any) => `solid 2px ${theme.palette.background.default}`,
                 }}
               />
               <Typography variant="subtitle2" noWrap sx={{ ml: 1 }}>
@@ -338,7 +338,7 @@ export default function PublicationDetailMain({
               pr: 1,
             }}
           >
-            {hasAccess ? (
+            {hasAccess && sessionData?.authenticated ? (
               // @ts-ignore
               <LeaveTipCard post={post} />
             ) : (

src/components/subscribe-to-unlock-card.tsx

@@ -16,7 +16,6 @@ interface Props {
 export const SubscribeToUnlockCard = ({
   onSubscribe,
   loadingSubscribe,
-  subscribeDisabled,
   post,
 }: Props) => {
   const { terms } = useGetPolicyTerms(
@@ -58,7 +57,7 @@ export const SubscribeToUnlockCard = ({
           sx={{ width: '100%', py: 1.5 }}
           onClick={onSubscribe}
           loading={loadingSubscribe}
-          disabled={subscribeDisabled}
+          // disabled={subscribeDisabled}
         >
           <IconPlayerPlay size={20} style={{ marginRight: 5 }} />
           Join

src/components/user-item/index.tsx

@@ -151,24 +151,37 @@ interface UserNameAndBadgeProps {
   address: Address;
 }
 
-export const UserNameAndBadge : FC<UserNameAndBadgeProps> = ({ name, address}) => {
+export const UserNameAndBadge: FC<UserNameAndBadgeProps> = ({ name, address }) => {
   return (
-    <Box sx={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-    }}>
-
-      <Typography sx={{mr:'2px'}}>{name}</Typography>
-      <Box sx={{
+    <Box
+      sx={{
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: '50%',
-      }}>
+        justifyContent: 'flex-start',
+      }}
+    >
+      <Typography
+        sx={{
+          mr: '2px',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          maxWidth: '100px',
+        }}
+      >
+        {name}
+      </Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: '50%',
+        }}
+      >
         <BadgeVerified address={address} />
       </Box>
     </Box>
-
   );
-}
+};
+

src/components/video-player/video-player.tsx

@@ -35,10 +35,10 @@ export const VideoPlayer: FC<VideoPlayerProps> = ({ src, titleMovie, onBack, sho
       if (event.key === 'Escape' || event.key === 'Esc') onBack?.();
     };
 
-    document.addEventListener('keydown', handleKeyDown);
+    document?.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      document?.removeEventListener('keydown', handleKeyDown);
     };
   }, [onBack]);
 

src/hooks/use-account-session.ts

@@ -65,11 +65,11 @@ export const useAccountSession = (): UseAccountSessionHook => {
     // wait for web3auth ready state and allow bypass if
     if ((isPending() || loading) && !data?.authenticated) return;
     // is authenticated avoid re-run code below
-    if (sessionData?.authenticated) return;
+    if (sessionData?.authenticated || data?.type === 'ANONYMOUS') return;
     // dispatch the session data and turn off the loading
     dispatch(setSession({ session: data }))
     dispatch(setAuthLoading({ isSessionLoading: false }));
-  }, [isSessionLoading]);
+  }, [isSessionLoading, data?.authenticated, data?.type]);
 
   return {
     logout: handleSessionExpired,

src/hooks/use-web3-session.ts

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { useWeb3Auth } from '@src/hooks/use-web3-auth';
 
 /**
@@ -9,22 +8,10 @@ import { useWeb3Auth } from '@src/hooks/use-web3-auth';
  */
 export function useWeb3Session() {
   const { web3Auth } = useWeb3Auth();
-  const accountAbstractionProvider = web3Auth?.options?.accountAbstractionProvider;
-
-  const bundlerClient = useMemo(() => {
-    // @ts-ignore
-    return accountAbstractionProvider?.bundlerClient || null;
-  }, [accountAbstractionProvider]);
-
-  const smartAccount = useMemo(() => {
-    // @ts-ignore
-    return accountAbstractionProvider?.smartAccount || null;
-  }, [accountAbstractionProvider]);
-
-  const provider = useMemo(() => {
-    // @ts-ignore
-    return accountAbstractionProvider?.provider || null;
-  }, [accountAbstractionProvider]);
+  const accountAbstractionProvider: any = web3Auth?.options?.accountAbstractionProvider;
+  const bundlerClient = accountAbstractionProvider?.bundlerClient;
+  const smartAccount = accountAbstractionProvider?.smartAccount;
+  const provider = accountAbstractionProvider?.provider;
 
   return {
     bundlerClient,

src/sections/finance/components/finance-quick-transfer-modal.tsx

@@ -102,6 +102,8 @@ function FinanceQuickTransferModal({
     try {
       await transfer({ amount, recipient: address ?? '' });
 
+      onFinish();
+
       const senderId = sessionData?.profile?.id ?? address;
 
       // Build the notification payload
@@ -136,7 +138,6 @@ function FinanceQuickTransferModal({
       notifySuccess(SUCCESS.TRANSFER_CREATED_SUCCESSFULLY, {
         destination: isSame ? contactInfo?.metadata?.displayName : truncateAddress(address ?? ''),
       });
-      onFinish();
     } catch (err: any) {
       notifyError(ERRORS.TRANSFER_FAILED_ERROR);
     }

src/sections/publication/view/publication-details-view.tsx

@@ -169,7 +169,7 @@ export default function PublicationDetailsView({ id }: Props) {
                 justifyContent: 'center',
               }}
             >
-              {hasAccess ? (
+              {hasAccess && sessionData?.authenticated ? (
                 <MoviePlayView publication={data} loading={loading} />
               ) : (
                 <Box
@@ -236,7 +236,7 @@ export default function PublicationDetailsView({ id }: Props) {
                       zIndex: 2,
                     }}
                     onClick={handleSubscribe}
-                    disabled={accessLoading || hasAccess || accessFetchingLoading}
+                    // disabled={accessLoading || hasAccess || accessFetchingLoading}
                     loading={accessLoading || accessFetchingLoading}
                   >
                     <IconPlayerPlay fontSize="large" size={18} />