Merge pull request #486 from WatchItDev/fix/web3auth/session

fix: bundler client null and session data anonymous

Author: geolffreym

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/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]);
 
   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/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} />