Allow funder to login from funding flow

.eslintrc.cjs

@@ -44,7 +44,7 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/no-empty-function': 0,
     '@typescript-eslint/no-unused-vars': 0,
-    'react-hooks/exhaustive-deps': 0,
+    'react-hooks/exhaustive-deps': 1,
     '@typescript-eslint/ban-types': 0,
     'object-curly-spacing': 0,
     'no-negated-condition': 0,

src/components/icons/svg/ProjectIcon.tsx

@@ -0,0 +1,22 @@
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const ProjectIcon = (props: IconProps) => {
+  return (
+    <Icon
+      width="28px"
+      height="29px"
+      viewBox="0 0 28 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M27 25.3331V14.8969C27 13.4299 26.411 12.0277 25.3715 11.0202L15.7858 1.72856C14.7836 0.757146 13.2164 0.757146 12.2142 1.72856L2.62844 11.0202C1.589 12.0277 1 13.4299 1 14.8969V25.3331C1 26.806 2.16406 28 3.6 28H24.4C25.836 28 27 26.806 27 25.3331Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Icon>
+  )
+}

src/components/layouts/CardLayout.tsx

@@ -1,4 +1,5 @@
 import { Stack, StackProps } from '@chakra-ui/react'
+import { forwardRef } from 'react'
 import { Link, LinkProps } from 'react-router-dom'
 
 export interface CardLayoutProps
@@ -9,34 +10,31 @@ export interface CardLayoutProps
   click?: boolean
 }
 
-export const CardLayout = ({
-  children,
-  noborder,
-  click,
-  hover,
-  ...rest
-}: CardLayoutProps) => {
-  return (
-    <Stack
-      as={rest.to ? Link : undefined}
-      tabIndex={-1}
-      overflow={'hidden'}
-      backgroundColor="white"
-      border="2px solid"
-      borderColor={noborder ? 'transparent' : 'brand.neutral200'}
-      borderRadius="8px"
-      boxShadow="none"
-      padding="24px"
-      spacing="10px"
-      _hover={
-        hover ? { cursor: 'pointer', borderColor: 'brand.neutral400' } : {}
-      }
-      _active={click ? { borderColor: 'brand.primary' } : {}}
-      _focus={click ? { borderColor: 'brand.primary' } : {}}
-      transition="border-color 0.5s"
-      {...rest}
-    >
-      {children}
-    </Stack>
-  )
-}
+export const CardLayout = forwardRef<HTMLDivElement, CardLayoutProps>(
+  ({ children, noborder, click, hover, ...rest }, ref) => {
+    return (
+      <Stack
+        ref={ref}
+        as={rest.to ? Link : undefined}
+        tabIndex={-1}
+        overflow={'hidden'}
+        backgroundColor="white"
+        border="2px solid"
+        borderColor={noborder ? 'transparent' : 'brand.neutral200'}
+        borderRadius="8px"
+        boxShadow="none"
+        padding="24px"
+        spacing="10px"
+        _hover={
+          hover ? { cursor: 'pointer', borderColor: 'brand.neutral400' } : {}
+        }
+        _active={click ? { borderColor: 'brand.primary' } : {}}
+        _focus={click ? { borderColor: 'brand.primary' } : {}}
+        transition="border-color 0.5s"
+        {...rest}
+      >
+        {children}
+      </Stack>
+    )
+  },
+)

src/components/nav/bottomNav/ProjectNav.tsx

@@ -35,7 +35,7 @@ export const ProjectNav = ({ fixed }: { fixed?: boolean }) => {
       setNoTransition(false)
       onClose()
     }
-  }, [isScrollingUp, mobileView, fixed])
+  }, [isScrollingUp, mobileView, fixed, onOpen, onClose])
 
   return (
     <>
@@ -78,10 +78,13 @@ export const ProjectNavUI = () => {
     return 'brand.neutral600'
   }
 
-  const transactionCount = project?.fundingTxsCount
-  const fundersCount = project?.fundersCount
+  if (!project) {
+    return null
+  }
+
+  const { fundersCount, fundingTxsCount } = project
 
-  const isOwner = project?.owners[0]?.user?.id === user.id
+  const isOwner = project.owners[0]?.user?.id === user.id
 
   const handleClick = (value: MobileViews) => {
     if (mobileView === value) {
@@ -129,8 +132,8 @@ export const ProjectNavUI = () => {
         _hover={{}}
         paddingX="5px"
       >
-        {transactionCount && (
-          <Text fontFamily={fonts.mono}>{transactionCount}</Text>
+        {fundingTxsCount && (
+          <Text fontFamily={fonts.mono}>{fundingTxsCount}</Text>
         )}
       </Button>
       <Button

src/config/routes.tsx

@@ -29,7 +29,7 @@ import { NotFoundPage } from '../pages/notFound'
 import { Profile } from '../pages/profile'
 import {
   ProjectContributors,
-  ProjectDashboard,
+  ProjectDashboardPage,
   ProjectDescription,
   ProjectDetails,
   ProjectFundingSettings,
@@ -118,7 +118,7 @@ const platformRoutes = [
   },
   {
     path: getPath('projectDashboard', PathName.projectId),
-    element: ProjectDashboard,
+    element: ProjectDashboardPage,
     authenticated: true,
     nested: [
       {

src/config/theme.ts

@@ -50,13 +50,15 @@ export const theme = extendTheme({
         },
         transparent: {
           backgroundColor: 'transparent',
-          border: '1px solid',
+          color: colors.neutral600,
+          border: 'none',
           borderColor: 'transparent',
           _hover: {
-            borderColor: colors.neutral900,
+            backgroundColor: colors.neutral200,
           },
           _active: {
-            backgroundColor: colors.neutral900,
+            backgroundColor: colors.neutral300,
+            color: colors.textBlack,
           },
         },
         containedClear: {

src/constants/components/id.ts

@@ -19,11 +19,6 @@ export const ID = {
       contribution: 'project-activity-list-container',
       leaderboard: 'project-leaderboard-list-container',
     },
-    view: {
-      entries: 'project-main-entries-container',
-      rewards: 'project-main-rewards-container',
-      milestones: 'project-main-milestones-container',
-    },
   },
   profile: {
     tabs: 'user-profile-tab-container',

src/context/auth.tsx

@@ -17,6 +17,7 @@ import { Project, User } from '../types/generated/graphql'
 const defaultContext: AuthContextProps = {
   isLoggedIn: false,
   user: defaultUser,
+  isAnonymous: true,
   loading: false,
   error: undefined,
   login() {},
@@ -30,7 +31,7 @@ const defaultContext: AuthContextProps = {
   async getAuthToken() {
     return false
   },
-  setUser(user: User) {},
+  setUser() {},
   followedProjects: [],
 }
 
@@ -44,6 +45,7 @@ export type NavContextProps = {
 type AuthContextProps = {
   isLoggedIn: boolean
   user: User
+  isAnonymous: boolean
   loading: boolean
   error?: ApolloError
   login: (me: User) => void
@@ -55,7 +57,7 @@ type AuthContextProps = {
   setIsLoggedIn: Dispatch<SetStateAction<boolean>>
   queryCurrentUser: () => void
   getAuthToken: () => Promise<boolean>
-  setUser: (user: User) => void
+  setUser: Dispatch<SetStateAction<User>>
   followedProjects: Project[]
 }
 
@@ -142,6 +144,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     }
 
     setInitialLoad(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {
@@ -156,12 +159,13 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     if (initialLoad) {
       setLoading(loadingUser)
     }
-  }, [loadingUser])
+  }, [initialLoad, loadingUser])
 
   return (
     <AuthContext.Provider
       value={{
         user,
+        isAnonymous: !(user && user.id),
         queryCurrentUser,
         setUser,
         loading,

src/context/project.tsx

@@ -1,7 +1,11 @@
 import { createContext, useContext, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 
+import { getPath } from '../constants'
+import { useProjectState } from '../hooks/graphqlState'
 import { ProjectFragment } from '../types'
 import { useAuthContext } from './auth'
+import { useNavContext } from './nav'
 
 export enum MobileViews {
   description = 'description',
@@ -11,30 +15,29 @@ export enum MobileViews {
 }
 
 type ProjectState = {
-  project: ProjectFragment
-  updateProject?: (updateProject: Partial<ProjectFragment>) => void
-  saveProject?: () => Promise<void>
-  saving?: boolean
+  projectId?: string | number
 }
 
 type ProjectContextProps = {
-  project: ProjectFragment
+  project: ProjectFragment | null
   updateProject: (updateProject: Partial<ProjectFragment>) => void
   saveProject: () => Promise<void>
   mobileView: MobileViews
   setMobileView: (view: MobileViews) => void
   isProjectOwner: boolean
-  saving?: boolean
+  loading?: boolean
+  error: any
 }
 
 const defaultProjectContext = {
   mobileView: MobileViews.description,
   setMobileView(_view: MobileViews) {},
-  project: {} as ProjectFragment,
+  project: null,
   updateProject() {},
   async saveProject() {},
   isProjectOwner: false,
-  saving: false,
+  loading: false,
+  error: null,
 }
 
 export const ProjectContext = createContext<ProjectContextProps>(
@@ -44,25 +47,56 @@ export const ProjectContext = createContext<ProjectContextProps>(
 export const useProjectContext = () => useContext(ProjectContext)
 
 export const ProjectProvider = ({
-  project,
-  updateProject = defaultProjectContext.updateProject,
-  saveProject = defaultProjectContext.saveProject,
-  saving,
+  projectId,
   children,
 }: { children: React.ReactNode } & ProjectState) => {
+  const navigate = useNavigate()
+  const { setNavData } = useNavContext()
   const [mobileView, setMobileView] = useState<MobileViews>(
     MobileViews.description,
   )
   const [isProjectOwner, setIsProjectOwner] = useState(false)
   const { user } = useAuthContext()
 
+  const { error, loading, project, updateProject, saveProject } =
+    useProjectState(projectId || '', {
+      skip: !projectId,
+
+      onError() {
+        navigate(getPath('notFound'))
+      },
+
+      onCompleted(data) {
+        if (!data?.project) {
+          navigate(getPath('notFound'))
+          return
+        }
+
+        const { project } = data
+
+        setNavData({
+          projectName: project.name,
+          projectTitle: project.title,
+          projectPath: getPath('project', project.name),
+          projectOwnerIDs:
+            project.owners.map((ownerInfo) => {
+              return Number(ownerInfo.user.id || -1)
+            }) || [],
+        })
+      },
+    })
+
   useEffect(() => {
+    if (!project) {
+      return
+    }
+
     if (project.id && project.owners[0]?.user.id === user.id) {
       setIsProjectOwner(true)
     } else {
       setIsProjectOwner(false)
     }
-  }, [project.id, project.owners, user])
+  }, [project, user])
 
   return (
     <ProjectContext.Provider
@@ -73,7 +107,8 @@ export const ProjectProvider = ({
         isProjectOwner,
         updateProject,
         saveProject,
-        saving,
+        error,
+        loading,
       }}
     >
       {children}