refactor: avatar profile centralized, session handling, SEO tags, refactored referrals and other minor fixes

.eslintrc.json

@@ -0,0 +1,50 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "react-hooks",
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "react-hooks/exhaustive-deps": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "import/no-extraneous-dependencies": "off",
+    "@typescript-eslint/ban-types": "off",
+    "react/no-unescaped-entities": "off",
+    "no-async-promise-executor": "off",
+    "react/no-children-prop": "off",
+    "no-extra-boolean-cast": "off",
+    "react/display-name": "off",
+    "prefer-const": "off",
+    "no-console": "off",
+    "no-debugger": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

index.html

@@ -42,23 +42,6 @@
         rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@900&display=swap" rel="stylesheet" />
 
-  <title>Watchit App</title>
-
-
-  <meta property="og:title" content="Watchit app" />
-  <meta property="og:description" content="Experience content like never before with Web3xAI" />
-  <meta property="og:url" content="https://app.watchit.movie" />
-  <meta property="og:image" content="https://pbs.twimg.com/profile_images/1814015504412987392/7FKUViWb_400x400.jpg" />
-  <meta property="og:type" content="website" />
-
-
-  <meta name="twitter:card" content="Explore and support a new era of video content on Watchit. Connect with creators, access exclusive experiences, and join a decentralized community powered by Web3 and AI." />
-  <meta name="twitter:title" content="Watchit app" />
-  <meta name="twitter:description" content="Experience content like never before with Web3xAI" />
-  <meta name="twitter:url" content="https://app.watchit.movie" />
-  <meta name="twitter:image" content="https://pbs.twimg.com/profile_images/1814015504412987392/7FKUViWb_400x400.jpg" />
-
-
   <meta name="description" content="Explore and support a new era of video content on Watchit. Connect with creators, access exclusive experiences, and join a decentralized community powered by Web3 and AI." />
   <meta name="keywords" content="Watchit app, Web3, AI, streaming, innovative content, Watchit, video platform, creator support, decentralized entertainment, Web3, AI, exclusive content, video community, NFT, digital rights, smart contracts, blockchain media" />
   <meta name="author" content="Watchit Team" />

package.json

@@ -43,6 +43,7 @@
     ]
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
     "@helia/unixfs": "^4.0.1",
     "@hookform/resolvers": "^3.1.1",
     "@iconify/react": "^4.1.1",

src/App.tsx

@@ -98,20 +98,20 @@ export default function App() {
             themeStretch: false,
           }}
         >
-          <AuthProvider>
-            <Provider store={store}>
-              <ThemeProvider>
-                <MotionLazy>
-                  <SnackbarProvider>
-                    <SettingsDrawer />
-                    <ProgressBar />
-                    <Router />
-                    <ResponsiveOverlay />
-                  </SnackbarProvider>
-                </MotionLazy>
-              </ThemeProvider>
-            </Provider>
-          </AuthProvider>
+          <Provider store={store}>
+            <AuthProvider>
+                <ThemeProvider>
+                  <MotionLazy>
+                    <SnackbarProvider>
+                      <SettingsDrawer />
+                      <ProgressBar />
+                      <Router />
+                      <ResponsiveOverlay />
+                    </SnackbarProvider>
+                  </MotionLazy>
+                </ThemeProvider>
+            </AuthProvider>
+          </Provider>
         </SettingsProvider>
       </LocalizationProvider>
     </MetaMaskProvider>

src/auth/context/web3Auth/config/web3AuthSettings.ts

@@ -122,6 +122,7 @@ export function web3AuthFactory(): Web3Auth {
   });
 
   const web3AuthOptions: Web3AuthOptions = {
+    sessionTime: 60 * 60 * 24 * 30, // 30 days
     privateKeyProvider,
     accountAbstractionProvider,
     chainConfig: chain.polygonAmoy,

src/components/animate/motion-lazy.tsx

@@ -2,7 +2,7 @@ import { LazyMotion, m } from 'framer-motion';
 
 // ----------------------------------------------------------------------
 
-// eslint-disable-next-line import/extensions
+// @ts-ignore
 const loadFeatures = () => import('./features.js').then((res) => res.default);
 
 type Props = {

src/components/avatar/avatar.tsx

@@ -0,0 +1,23 @@
+// @mui
+import Avatar from '@mui/material/Avatar';
+import {FC} from "react";
+import {dicebear} from "@src/utils/dicebear.ts";
+
+interface AvatarProfileProps {
+  src: string;
+  alt?: string;
+  sx?: any;
+  [x: string]: any;
+}
+
+const AvatarProfile: FC<AvatarProfileProps> = ({ src, alt, sx, ...other }) => {
+
+  //Check if src is a valid URL starting with http or https; if not, use the dicebear API to generate a random avatar
+  if (!src.startsWith('http') && !src.startsWith('https')) { src = dicebear(src)  }
+
+  return (
+    <Avatar alt={alt ?? 'Avatar profile'} src={src} sx={sx} {...other}  />
+  )
+}
+
+export default AvatarProfile;

src/components/avatar/index.ts

@@ -0,0 +1 @@
+export * from '@src/components/avatar';

src/components/carousel/variants/carousel-main.tsx

@@ -15,9 +15,7 @@ import { varFade } from '@src/components/animate';
 import Carousel, { CarouselDots, useCarousel } from '@src/components/carousel/index';
 import { IconFlagFilled, IconPlayerPlay } from '@tabler/icons-react';
 import Stack from '@mui/material/Stack';
-
 // @ts-ignore
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { type Post } from '@lens-protocol/api-bindings/dist/declarations/src/lens/graphql/generated';
 import { paths } from '@src/routes/paths.ts';
 import { useRouter } from '@src/routes/hooks';

src/components/login-modal/modal.tsx

@@ -1,5 +1,5 @@
 // REACT IMPORTS
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 // MUI IMPORTS
 import { Backdrop, Box, Fade, Modal } from '@mui/material';
@@ -13,9 +13,12 @@ import { ProfileSelectView } from '@src/components/login-modal/profile-select-vi
 import { ProfileFormView } from '@src/components/login-modal/profile-form-view.tsx';
 import { WatchitLoader } from '../watchit-loader';
 import { useDispatch, useSelector } from 'react-redux';
-import { closeLoginModal } from '@redux/auth';
+import {closeLoginModal, setEmail} from '@redux/auth';
 import { notifySuccess } from '@notifications/internal-notifications.ts';
 import { SUCCESS } from '@notifications/success.ts';
+// @ts-ignore
+import {type AuthUserInfo} from "@web3auth/auth/dist/types/utils/interfaces";
+import useReferrals from '@src/hooks/use-referrals.ts';
 
 // ----------------------------------------------------------------------
 
@@ -35,6 +38,7 @@ export const LoginModal: React.FC<LoginModalProps> = ({ open, onClose }) => {
   const sessionData = useSelector((state: any) => state.auth.session);
   const { execute: logoutExecute } = useLogout();
   const { execute: loginExecute, error } = useLogin();
+  const { acceptOrCreateInvitationForUser } = useReferrals();
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -45,6 +49,9 @@ export const LoginModal: React.FC<LoginModalProps> = ({ open, onClose }) => {
           method: 'eth_accounts',
         });
 
+        // Obtain user info from the provider to get the email
+        await w3.getUserInfo().then((r:Partial<AuthUserInfo>) => dispatch(setEmail(r?.email)));
+
         if (accounts && accounts.length > 0) {
           setAddress(accounts[0]);
         }
@@ -66,6 +73,12 @@ export const LoginModal: React.FC<LoginModalProps> = ({ open, onClose }) => {
           await w3?.connect();
           setView('profile');
           setLoading(false);
+
+          // Once the user is authenticated, store the session expiration
+          const sessionTimeMs = 60 * 60 * 24 * 30 * 1000; // 30 days
+          const expirationTimestamp = Date.now() + sessionTimeMs;
+          localStorage.setItem("sessionExpiration", expirationTimestamp.toString());
+
         } catch (err) {
           onClose();
           w3?.loginModal.closeModal();
@@ -76,10 +89,11 @@ export const LoginModal: React.FC<LoginModalProps> = ({ open, onClose }) => {
     }
   }, [open, view, w3.connected]);
 
-  const handleProfileCreateSuccess = () => {
+  const handleProfileCreateSuccess = useCallback(() => {
+    acceptOrCreateInvitationForUser();
     notifySuccess(SUCCESS.PROFILE_CREATED_SUCCESSFULLY);
     dispatch(closeLoginModal());
-  };
+  }, []);
 
   const handleLogin = async (profile?: Profile) => {
     if (!profile || !address) return;
@@ -100,6 +114,12 @@ export const LoginModal: React.FC<LoginModalProps> = ({ open, onClose }) => {
     setAddress('');
   };
 
+  const handleBackdropClick = () => {
+    if (view === 'profile') {
+      onClose();
+    }
+  };
+
   return (
     <>
       <Modal
@@ -109,7 +129,7 @@ export const LoginModal: React.FC<LoginModalProps> = ({ open, onClose }) => {
         onClose={onClose}
         closeAfterTransition
         BackdropComponent={Backdrop}
-        BackdropProps={{ timeout: 500, onClick: () => {} }}
+        BackdropProps={{ timeout: 500, onClick: handleBackdropClick }}
       >
         <Fade in={open}>
           <Box

src/components/login-modal/profile-form-view.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 
-// Redux
+// REDUX IMPORTS
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '@reduxjs/toolkit/query';
 import {
@@ -16,9 +16,8 @@ import {
 
 // MUI IMPORTS
 import { Box, Button, Grid, Input, TextField, Typography } from '@mui/material';
-import Avatar from '@mui/material/Avatar';
 
-// Project IMPORTS
+// PROJECTS IMPORTS
 import Image from '../image';
 import { ProfileData } from '@src/auth/context/web3Auth/types.ts';
 import { uploadImageToIPFS, uploadMetadataToIPFS } from '@src/utils/ipfs.ts';
@@ -27,7 +26,7 @@ import TextMaxLine from '@src/components/text-max-line';
 import NeonPaper from '@src/sections/publication/NeonPaperContainer';
 import uuidv4 from '@src/utils/uuidv4';
 
-// Lens
+// LENS IMPORTS
 import { Profile } from '@lens-protocol/api-bindings';
 import {
   LoginError,
@@ -36,10 +35,11 @@ import {
   useSetProfileMetadata,
 } from '@lens-protocol/react-web';
 
-// Notifications
+// NOTIFICATIONS IMPORTS
 import { notifyError, notifySuccess } from '@notifications/internal-notifications';
 import { SUCCESS } from '@notifications/success';
 import { ERRORS } from '@notifications/errors.ts';
+import AvatarProfile from "@src/components/avatar/avatar.tsx";
 
 // ----------------------------------------------------------------------
 
@@ -113,8 +113,8 @@ export const ProfileFormView: React.FC<ProfileFormProps> = ({
     username: Yup.string()
       .min(5, 'Username must be at least 5 characters')
       .required('Username is required'),
-    name: Yup.string().required('Name is required'),
-    bio: Yup.string().required('Bio is required'),
+    name: Yup.string().min(3, 'Name must be at least 3 characters').required('Name is required'),
+    bio: Yup.string().min(10, 'Bio must be at least 10 characters').required('Bio is required'),
     socialLinks: Yup.object({
       twitter: Yup.string().url('Enter a valid URL'),
       instagram: Yup.string().url('Enter a valid URL'),
@@ -378,12 +378,12 @@ export const ProfileFormView: React.FC<ProfileFormProps> = ({
             }}
           />
           {/* Avatar */}
-          <Avatar
+          <AvatarProfile
             src={
               profileImagePreview ??
               (initialValues?.profileImage
                 ? `https://ipfs.io/ipfs/${initialValues?.profileImage?.replaceAll?.('ipfs://', '')}`
-                : `https://api.dicebear.com/9.x/bottts-neutral/svg?seed=${mode === 'update' && sessionData?.authenticated ? sessionData?.profile?.id : 'new'}`)
+                : mode === 'update' && sessionData?.authenticated ? sessionData?.profile?.id : 'new')
             }
             alt=""
             onClick={() => profileImageInputRef.current?.click()}