From 7ef054d5b0f6097427a38af204e658fa877fa42c Mon Sep 17 00:00:00 2001
From: J Francisco Rader <franciscorader@gmail.com>
Date: Tue, 9 May 2023 01:19:33 -0300
Subject: [PATCH 1/4] feat: add profile to comment box

---
 src/context/auth.tsx                          |   3 +
 src/helpers/useBTCConverter.ts                |  29 ++-
 src/hooks/useFundingFormState.tsx             | 164 +++++++-------
 .../components/FundingFormSection.tsx         |  10 +-
 .../projectActivityPanel/index.tsx            |  39 ++--
 .../ProjectFundingSelectionFormScreen.tsx     |  21 +-
 .../components/FundingFormRewardItem.tsx      |   4 +-
 .../ProjectFundingFormCommentField.tsx        | 207 ++++++++++++++++++
 .../ProjectPaymentFormFundingComment.tsx      | 175 ---------------
 .../projectMainBody/components/index.ts       |   2 +-
 10 files changed, 353 insertions(+), 301 deletions(-)
 create mode 100644 src/pages/projectView/projectMainBody/components/ProjectFundingFormCommentField.tsx
 delete mode 100644 src/pages/projectView/projectMainBody/components/ProjectPaymentFormFundingComment.tsx

diff --git a/src/context/auth.tsx b/src/context/auth.tsx
index cac035fb1..3005d8a7b 100644
--- a/src/context/auth.tsx
+++ b/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() {},
@@ -44,6 +45,7 @@ export type NavContextProps = {
 type AuthContextProps = {
   isLoggedIn: boolean
   user: User
+  isAnonymous: boolean
   loading: boolean
   error?: ApolloError
   login: (me: User) => void
@@ -162,6 +164,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     <AuthContext.Provider
       value={{
         user,
+        isAnonymous: !(user && user.id),
         queryCurrentUser,
         setUser,
         loading,
diff --git a/src/helpers/useBTCConverter.ts b/src/helpers/useBTCConverter.ts
index f9c9333c6..bae5c3978 100644
--- a/src/helpers/useBTCConverter.ts
+++ b/src/helpers/useBTCConverter.ts
@@ -1,20 +1,31 @@
+import { useCallback } from 'react'
+
 import { useBtcContext } from '../context/btc'
 import { Satoshis, USDCents, USDollars } from '../types/types'
 
 export const useBTCConverter = () => {
   const { btcRate } = useBtcContext()
 
-  const getUSDAmount = (satoshis: Satoshis): USDollars => {
-    return (satoshis * btcRate) as USDollars
-  }
+  const getUSDAmount = useCallback(
+    (satoshis: Satoshis): USDollars => {
+      return (satoshis * btcRate) as USDollars
+    },
+    [btcRate],
+  )
 
-  const getUSDCentsAmount = (satoshis: Satoshis): USDCents => {
-    return (satoshis * btcRate * 100) as USDCents
-  }
+  const getUSDCentsAmount = useCallback(
+    (satoshis: Satoshis): USDCents => {
+      return (satoshis * btcRate * 100) as USDCents
+    },
+    [btcRate],
+  )
 
-  const getSatoshisFromUSDCents = (usdCents: USDCents): Satoshis => {
-    return Math.round(usdCents / 100 / btcRate) as Satoshis
-  }
+  const getSatoshisFromUSDCents = useCallback(
+    (usdCents: USDCents): Satoshis => {
+      return Math.round(usdCents / 100 / btcRate) as Satoshis
+    },
+    [btcRate],
+  )
 
   return {
     getUSDAmount,
diff --git a/src/hooks/useFundingFormState.tsx b/src/hooks/useFundingFormState.tsx
index 6e13c89e4..42f5a5dcc 100644
--- a/src/hooks/useFundingFormState.tsx
+++ b/src/hooks/useFundingFormState.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 
 import { AuthContext } from '../context'
 import { useBTCConverter } from '../helpers'
@@ -45,28 +45,38 @@ export const useFundingFormState = ({ rewards }: UseFundStateProps) => {
   const { user } = useContext(AuthContext)
   const { getUSDCentsAmount } = useBTCConverter()
 
-  const initialState: IFundForm = {
-    donationAmount: 0,
-    rewardsCost: 0,
-    comment: '',
-    shippingDestination: ShippingDestination.National,
-    shippingCost: 0,
-    anonymous: !(user && user.id), // The default user has id 0
-    funderAvatarURL: user.imageUrl || '',
-    funderUsername: user.username,
-    email: '',
-    media: '',
-    rewardsByIDAndCount: undefined,
-    rewardCurrency: RewardCurrency.Usdcent,
-  }
+  const initialState: IFundForm = useMemo(
+    () => ({
+      donationAmount: 0,
+      rewardsCost: 0,
+      comment: '',
+      shippingDestination: ShippingDestination.National,
+      shippingCost: 0,
+      anonymous: !(user && user.id), // The default user has id 0
+      funderAvatarURL: user.imageUrl || '',
+      funderUsername: user.username,
+      email: '',
+      media: '',
+      rewardsByIDAndCount: undefined,
+      rewardCurrency: RewardCurrency.Usdcent,
+    }),
+    [user],
+  )
 
   const [state, _setState] = useState<IFundForm>(initialState)
 
-  const setTarget = (event: any) => {
-    const { name, value } = event.target
-    const newState = { ...state, [name]: value }
-    _setState(newState)
-  }
+  const setTarget = useCallback(
+    (event: any) => {
+      const { name, value } = event.target
+      const newState = { ...state, [name]: value }
+      _setState(newState)
+    },
+    [state],
+  )
+
+  const setState = useCallback((name: string, value: any) => {
+    _setState((current) => ({ ...current, [name]: value }))
+  }, [])
 
   useEffect(() => {
     if (!user || !user.id) {
@@ -74,64 +84,66 @@ export const useFundingFormState = ({ rewards }: UseFundStateProps) => {
     } else {
       setState('anonymous', false)
     }
-  }, [user])
-
-  const setState = (name: string, value: any) => {
-    const newState = { ...state, [name]: value }
-    _setState(newState)
-  }
-
-  const updateReward = ({ id, count }: IRewardCount) => {
-    const newRewardsCountInfo = { ...state.rewardsByIDAndCount }
-
-    if (count !== 0) {
-      newRewardsCountInfo[id as unknown as keyof ProjectReward] = count
-    } else if (count === 0) {
-      delete newRewardsCountInfo[id as unknown as keyof ProjectReward]
-    }
-
-    let rewardsCost = 0
-
-    if (rewards) {
-      Object.keys(newRewardsCountInfo).forEach((rewardID: string) => {
-        const id = parseInt(rewardID, 10)
-
-        const reward = rewards.find(
-          (reward: ProjectReward) =>
-            reward.id === id || `${reward.id}` === rewardID,
-        )
-
-        if (reward && reward.id) {
-          const rewardMultiplier =
-            newRewardsCountInfo[rewardID as keyof ProjectReward]
-          if (!rewardMultiplier) {
-            return 0
+  }, [setState, user])
+
+  const updateReward = useCallback(
+    ({ id, count }: IRewardCount) => {
+      const newRewardsCountInfo = { ...state.rewardsByIDAndCount }
+
+      if (count !== 0) {
+        newRewardsCountInfo[id as unknown as keyof ProjectReward] = count
+      } else if (count === 0) {
+        delete newRewardsCountInfo[id as unknown as keyof ProjectReward]
+      }
+
+      let rewardsCost = 0
+
+      if (rewards) {
+        Object.keys(newRewardsCountInfo).forEach((rewardID: string) => {
+          const id = parseInt(rewardID, 10)
+
+          const reward = rewards.find(
+            (reward: ProjectReward) =>
+              reward.id === id || `${reward.id}` === rewardID,
+          )
+
+          if (reward && reward.id) {
+            const rewardMultiplier =
+              newRewardsCountInfo[rewardID as keyof ProjectReward]
+            if (!rewardMultiplier) {
+              return 0
+            }
+
+            const cost =
+              state.rewardCurrency === RewardCurrency.Usdcent
+                ? reward.cost
+                : // Assume sats if not USD cents
+                  getUSDCentsAmount(reward.cost as Satoshis)
+
+            rewardsCost += cost * rewardMultiplier
           }
-
-          const cost =
-            state.rewardCurrency === RewardCurrency.Usdcent
-              ? reward.cost
-              : // Assume sats if not USD cents
-                getUSDCentsAmount(reward.cost as Satoshis)
-
-          rewardsCost += cost * rewardMultiplier
-        }
-      })
-    }
-
-    const newState = {
-      ...state,
-      rewardsByIDAndCount: newRewardsCountInfo,
-      rewardsCost,
-      totalAmount: rewardsCost + state.donationAmount,
-    }
-
-    _setState(newState)
-  }
-
-  const resetForm = () => {
+        })
+      }
+
+      _setState((current) => ({
+        ...current,
+        rewardsByIDAndCount: newRewardsCountInfo,
+        rewardsCost,
+        totalAmount: rewardsCost + state.donationAmount,
+      }))
+    },
+    [
+      getUSDCentsAmount,
+      rewards,
+      state.donationAmount,
+      state.rewardCurrency,
+      state.rewardsByIDAndCount,
+    ],
+  )
+
+  const resetForm = useCallback(() => {
     _setState(initialState)
-  }
+  }, [initialState])
 
   return { state, setTarget, setState, updateReward, resetForm }
 }
diff --git a/src/pages/projectView/projectActivityPanel/components/FundingFormSection.tsx b/src/pages/projectView/projectActivityPanel/components/FundingFormSection.tsx
index 46d905cd5..4014f61a0 100644
--- a/src/pages/projectView/projectActivityPanel/components/FundingFormSection.tsx
+++ b/src/pages/projectView/projectActivityPanel/components/FundingFormSection.tsx
@@ -7,13 +7,13 @@ import { SectionTitle } from '../../../../components/ui'
 import { IFundForm } from '../../../../hooks'
 import { IRewardCount } from '../../../../interfaces'
 import { colors } from '../../../../styles'
-import { ProjectReward } from '../../../../types/generated/graphql'
+import { ProjectRewardForCreateUpdateFragment } from '../../../../types/generated/graphql'
 import { FundingFormRewardItem } from '../../projectMainBody/components/FundingFormRewardItem'
 
 type Props = {
   setFormState: any
   updateReward: (_: IRewardCount) => void
-  rewards?: ProjectReward[]
+  rewards?: ProjectRewardForCreateUpdateFragment[]
   formState?: IFundForm
 }
 
@@ -25,7 +25,9 @@ export const FundingFormSection = ({
 }: Props) => {
   const getRewardCount = (rewardId: number) =>
     formState?.rewardsByIDAndCount
-      ? formState?.rewardsByIDAndCount[`${rewardId}` as keyof ProjectReward]
+      ? formState?.rewardsByIDAndCount[
+          `${rewardId}` as keyof ProjectRewardForCreateUpdateFragment
+        ]
       : 0
 
   const hasRewards = rewards && rewards.length
@@ -82,7 +84,7 @@ export const FundingFormSection = ({
                   />
                 </HStack>
               </ItemCard>
-              {rewards.map((reward: ProjectReward) => (
+              {rewards.map((reward) => (
                 <FundingFormRewardItem
                   key={reward.id}
                   item={reward}
diff --git a/src/pages/projectView/projectActivityPanel/index.tsx b/src/pages/projectView/projectActivityPanel/index.tsx
index 9bcf71573..10c1ebefb 100644
--- a/src/pages/projectView/projectActivityPanel/index.tsx
+++ b/src/pages/projectView/projectActivityPanel/index.tsx
@@ -15,6 +15,7 @@ import {
   RewardFundingInput,
 } from '../../../types/generated/graphql'
 import { toInt, useMobileMode } from '../../../utils'
+import { truthyFilter } from '../../../utils/array'
 import {
   InfoPageSkeleton,
   ProjectFundingInitialInfoScreen,
@@ -86,20 +87,20 @@ export const ProjectActivityPanel = ({
       resetFundingFlow()
       resetForm()
     }
-  }, [mobileView])
+  }, [mobileView, resetForm, resetFundingFlow, setFundState])
 
   useEffect(() => {
     if (user && user.id) {
       setFormState('anonymous', false)
     }
-  }, [user])
+  }, [setFormState, user])
 
   useEffect(() => {
     if (!formState.anonymous && (!user || !user.id)) {
       loginOnOpen()
       setFormState('anonymous', true)
     }
-  }, [formState.anonymous])
+  }, [formState.anonymous, loginOnOpen, setFormState, user])
 
   const handleCloseButton = () => {
     setMobileView(MobileViews.contribution)
@@ -168,10 +169,6 @@ export const ProjectActivityPanel = ({
     requestFunding(input)
   }
 
-  const getActivityHeight = () => {
-    return 'calc(100% - 20px)'
-  }
-
   const renderPanelContent = () => {
     if (!project || !project.id) {
       return <InfoPageSkeleton />
@@ -192,21 +189,17 @@ export const ProjectActivityPanel = ({
       case fundingStages.form:
         return (
           <ProjectFundingSelectionFormScreen
-            {...{
-              fundingRequestLoading,
-              isMobile,
-              handleCloseButton,
-              formState,
-              setFormState,
-              setTarget,
-              updateReward,
-              handleFund,
-              rewards: project.rewards?.filter(
-                (reward) => reward !== null,
-              ) as ProjectReward[],
-              type: project.type,
-              name: project.name,
-            }}
+            fundingRequestLoading={fundingRequestLoading}
+            isMobile={isMobile}
+            handleCloseButton={handleCloseButton}
+            formState={formState}
+            setFormState={setFormState}
+            setTarget={setTarget}
+            updateReward={updateReward}
+            handleFund={handleFund}
+            rewards={project.rewards?.filter(truthyFilter)}
+            type={project.type}
+            name={project.name}
           />
         )
       case fundingStages.started:
@@ -245,7 +238,7 @@ export const ProjectActivityPanel = ({
         alignItems="center"
         backgroundColor="#FFFFFF"
         marginTop={isMobile ? '0px' : '20px'}
-        height={getActivityHeight()}
+        height="calc(100% - 20px)"
         borderTopLeftRadius={isMobile ? 'initial' : '8px'}
         overflow="hidden"
         borderTop={isMobile ? 'none' : '2px solid'}
diff --git a/src/pages/projectView/projectActivityPanel/screens/ProjectFundingSelectionFormScreen.tsx b/src/pages/projectView/projectActivityPanel/screens/ProjectFundingSelectionFormScreen.tsx
index 07fff256a..01ca74b1a 100644
--- a/src/pages/projectView/projectActivityPanel/screens/ProjectFundingSelectionFormScreen.tsx
+++ b/src/pages/projectView/projectActivityPanel/screens/ProjectFundingSelectionFormScreen.tsx
@@ -19,9 +19,9 @@ import { MAX_FUNDING_AMOUNT_USD } from '../../../../constants'
 import { useFundCalc } from '../../../../helpers/fundingCalculation'
 import { IFundForm } from '../../../../hooks'
 import { IProjectType } from '../../../../interfaces'
-import { ProjectReward } from '../../../../types/generated/graphql'
+import { ProjectRewardForCreateUpdateFragment } from '../../../../types/generated/graphql'
 import { useNotification } from '../../../../utils'
-import { ProjectPaymentFormFundingComment } from '../../projectMainBody/components/ProjectPaymentFormFundingComment'
+import { ProjectFundingFormCommentField } from '../../projectMainBody/components/ProjectFundingFormCommentField'
 import { FundingFormSection } from '../components/FundingFormSection'
 
 type Props = {
@@ -34,7 +34,7 @@ type Props = {
   setFormState: any
   handleFund: () => void
   type: IProjectType
-  rewards?: ProjectReward[]
+  rewards?: ProjectRewardForCreateUpdateFragment[]
   name: string
 }
 
@@ -59,6 +59,7 @@ export const ProjectFundingSelectionFormScreen = ({
   const hasSelectedRewards =
     formState.rewardsByIDAndCount &&
     Object.entries(formState.rewardsByIDAndCount).length > 0
+
   const submit = () => {
     const valid = validateFundingAmount()
     if (valid) {
@@ -125,12 +126,10 @@ export const ProjectFundingSelectionFormScreen = ({
 
       <Box width="100%" overflowY="auto" flex={1}>
         <FundingFormSection
-          {...{
-            rewards,
-            setFormState,
-            updateReward,
-            formState,
-          }}
+          rewards={rewards}
+          setFormState={setFormState}
+          updateReward={updateReward}
+          formState={formState}
         />
       </Box>
       <VStack
@@ -159,11 +158,11 @@ export const ProjectFundingSelectionFormScreen = ({
           <VStack spacing={1.5} alignItems="flex-start" width={'full'}>
             <SectionTitle>Comment</SectionTitle>
 
-            <ProjectPaymentFormFundingComment
+            <ProjectFundingFormCommentField
               comment={formState.comment}
               setTarget={setTarget}
               setFormState={setFormState}
-              width={'full'}
+              width="full"
             />
 
             {formState.rewardsCost && (
diff --git a/src/pages/projectView/projectMainBody/components/FundingFormRewardItem.tsx b/src/pages/projectView/projectMainBody/components/FundingFormRewardItem.tsx
index 231510b9b..8bdc9b4af 100644
--- a/src/pages/projectView/projectMainBody/components/FundingFormRewardItem.tsx
+++ b/src/pages/projectView/projectMainBody/components/FundingFormRewardItem.tsx
@@ -15,7 +15,7 @@ import { ItemCard } from '../../../../components/layouts/ItemCard'
 import { ImageWithReload } from '../../../../components/ui'
 import { IRewardCount } from '../../../../interfaces'
 import { colors } from '../../../../styles'
-import { ProjectReward } from '../../../../types/generated/graphql'
+import { ProjectRewardForCreateUpdateFragment } from '../../../../types/generated/graphql'
 import { toInt } from '../../../../utils'
 
 const useStyles = createUseStyles({
@@ -45,7 +45,7 @@ const useStyles = createUseStyles({
 })
 
 interface IRewardItemProps {
-  item: ProjectReward
+  item: ProjectRewardForCreateUpdateFragment
   updateCount?: (_: IRewardCount) => void
   count?: number
   readOnly?: boolean
diff --git a/src/pages/projectView/projectMainBody/components/ProjectFundingFormCommentField.tsx b/src/pages/projectView/projectMainBody/components/ProjectFundingFormCommentField.tsx
new file mode 100644
index 000000000..1057b751f
--- /dev/null
+++ b/src/pages/projectView/projectMainBody/components/ProjectFundingFormCommentField.tsx
@@ -0,0 +1,207 @@
+import { CloseIcon, SearchIcon } from '@chakra-ui/icons'
+import {
+  Box,
+  Button,
+  HStack,
+  HTMLChakraProps,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  InputRightElement,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  Text,
+  Tooltip,
+  useBoolean,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { GiphyFetch } from '@giphy/js-fetch-api'
+import { IGif } from '@giphy/js-types'
+import { Grid } from '@giphy/react-components'
+import { useCallback, useRef, useState } from 'react'
+
+import { GifIcon } from '../../../../components/icons'
+import { TextArea } from '../../../../components/ui'
+import { VITE_APP_GIPHY_API_KEY } from '../../../../constants'
+import { useAuthContext } from '../../../../context'
+import { useMobileMode } from '../../../../utils'
+import { AvatarElement } from './AvatarElement'
+
+type Props = HTMLChakraProps<'div'> & {
+  comment: string
+  setTarget: (_: any) => void
+  setFormState: any
+}
+
+const giphy = new GiphyFetch(VITE_APP_GIPHY_API_KEY)
+
+export const ProjectFundingFormCommentField = ({
+  comment,
+  setTarget,
+  setFormState,
+  ...rest
+}: Props) => {
+  const isMobile = useMobileMode()
+
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+
+  const {
+    isOpen: isGIFModalOpen,
+    onOpen: onGIFModalOpened,
+    onClose: onGIFModalClosed,
+  } = useDisclosure()
+
+  const onGIFModalOpenClick = () => {
+    textAreaRef.current?.blur()
+    onGIFModalOpened()
+  }
+
+  const [gifSearch, setGifSearch] = useState('bitcoin')
+  const [selectedGIF, setSelectedGIF] = useState<IGif | null>(null)
+
+  const [isHoveringOverGIFButton, setIsHoveringOverGIFButton] =
+    useBoolean(false)
+  const [focus, setFocus] = useState(true)
+
+  const fetchGifs = useCallback(
+    (offset: number) =>
+      giphy.search(gifSearch, { offset, sort: 'relevant', limit: 9 }),
+    [gifSearch],
+  )
+
+  const { isAnonymous, loginOnOpen, user } = useAuthContext()
+
+  return (
+    <Box {...rest}>
+      <HStack width="100%" position="relative">
+        <Box width="100%">
+          <TextArea
+            ref={textAreaRef}
+            pr={16}
+            placeholder="Leave a public message here."
+            fontSize="14px"
+            resize="none"
+            value={comment}
+            maxLength={280}
+            name="comment"
+            pl={10}
+            borderWidth="2px"
+            borderColor="brand.primary500"
+            backgroundColor={'brand.bgWhite'}
+            onChange={setTarget}
+          />
+          <Text pt={1} px={1} fontSize="10px" color="brand.neutral600">
+            Funding as <i>{isAnonymous ? 'anonymous' : user.username}</i>
+          </Text>
+        </Box>
+        {isHoveringOverGIFButton && selectedGIF && (
+          <CloseIcon position="absolute" top="31px" right="29px" />
+        )}
+
+        <Box zIndex="10" position="absolute" left={0.8} top={2}>
+          {isAnonymous ? (
+            <Tooltip
+              shouldWrapChildren
+              label="Funding annonymously. Click to login"
+            >
+              <AvatarElement
+                cursor="pointer"
+                noLink
+                onClick={loginOnOpen}
+                avatarOnly
+              />
+            </Tooltip>
+          ) : (
+            <AvatarElement user={user} avatarOnly />
+          )}
+        </Box>
+
+        <Box zIndex="10" position="absolute" right={2}>
+          {selectedGIF ? (
+            <Image
+              src={selectedGIF.images.preview_webp.url}
+              alt="gif"
+              width="50px"
+              height="50px"
+              cursor="pointer"
+              opacity={isHoveringOverGIFButton ? '0.25' : '1'}
+              onMouseEnter={setIsHoveringOverGIFButton.on}
+              onMouseLeave={setIsHoveringOverGIFButton.off}
+              onClick={() => {
+                setSelectedGIF(null)
+                setIsHoveringOverGIFButton.off()
+              }}
+            />
+          ) : (
+            <Button bg="none" p={0} onClick={onGIFModalOpenClick}>
+              <GifIcon />
+            </Button>
+          )}
+        </Box>
+      </HStack>
+
+      {isGIFModalOpen && (
+        <Modal
+          onClose={() => {
+            setGifSearch('bitcoin')
+            onGIFModalClosed()
+          }}
+          isOpen={isGIFModalOpen}
+          isCentered
+        >
+          <ModalOverlay />
+
+          <ModalContent mt={focus && isMobile ? 100 : 0}>
+            <ModalBody p={2}>
+              <InputGroup mb={2}>
+                <InputLeftElement>
+                  <SearchIcon />
+                </InputLeftElement>
+                <Input
+                  onFocus={() => setFocus(true)}
+                  onBlur={() => setFocus(false)}
+                  placeholder="Search"
+                  variant="filled"
+                  focusBorderColor="brand.primary"
+                  bg="#DDFFF8"
+                  onChange={(e) => setGifSearch(e.target.value)}
+                />
+                <InputRightElement mb={2}>
+                  <ModalCloseButton>
+                    <CloseIcon mb={2} />
+                  </ModalCloseButton>
+                </InputRightElement>
+              </InputGroup>
+
+              <Box height="450px" overflow="auto">
+                <Box
+                  display="flex"
+                  justifyContent="center"
+                  alignItems="center"
+                  cursor="pointer"
+                >
+                  <Grid
+                    width={isMobile ? 350 : 400}
+                    columns={3}
+                    fetchGifs={fetchGifs}
+                    noLink={true}
+                    hideAttribution={true}
+                    onGifClick={(gif: any) => {
+                      setSelectedGIF(gif)
+                      setFormState('media', gif.images.original.webp)
+                      onGIFModalClosed()
+                    }}
+                  />
+                </Box>
+              </Box>
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+      )}
+    </Box>
+  )
+}
diff --git a/src/pages/projectView/projectMainBody/components/ProjectPaymentFormFundingComment.tsx b/src/pages/projectView/projectMainBody/components/ProjectPaymentFormFundingComment.tsx
deleted file mode 100644
index 16e74b848..000000000
--- a/src/pages/projectView/projectMainBody/components/ProjectPaymentFormFundingComment.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { CloseIcon, SearchIcon } from '@chakra-ui/icons'
-import {
-  Box,
-  Button,
-  HStack,
-  HTMLChakraProps,
-  Image,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalOverlay,
-  useBoolean,
-  useDisclosure,
-} from '@chakra-ui/react'
-import { GiphyFetch } from '@giphy/js-fetch-api'
-import { IGif } from '@giphy/js-types'
-import { Grid } from '@giphy/react-components'
-import { useEffect, useRef, useState } from 'react'
-
-import { GifIcon } from '../../../../components/icons'
-import { TextArea } from '../../../../components/ui'
-import { VITE_APP_GIPHY_API_KEY } from '../../../../constants'
-import { useMobileMode } from '../../../../utils'
-
-type Props = HTMLChakraProps<'div'> & {
-  comment: string
-  setTarget: (_: any) => void
-  setFormState: any
-}
-
-export const ProjectPaymentFormFundingComment = ({
-  comment,
-  setTarget,
-  setFormState,
-  ...rest
-}: Props) => {
-  const isMobile = useMobileMode()
-
-  const textAreaRef = useRef<HTMLTextAreaElement>(null)
-
-  const {
-    isOpen: isGIFModalOpen,
-    onOpen: onGIFModalOpened,
-    onClose: onGIFModalClosed,
-  } = useDisclosure()
-
-  const onGIFModalOpenClick = () => {
-    textAreaRef.current?.blur()
-    onGIFModalOpened()
-  }
-
-  const [giphyFetch, setGiphyFetch] = useState<GiphyFetch | any>()
-  const [gifSearch, setGifSearch] = useState('bitcoin')
-  const [selectedGIF, setSelectedGIF] = useState<IGif | null>(null)
-
-  const [isHoveringOverGIFButton, setIsHoveringOverGIFButton] =
-    useBoolean(false)
-  const [focus, setFocus] = useState(true)
-
-  useEffect(() => {
-    if (VITE_APP_GIPHY_API_KEY) {
-      const giphy = new GiphyFetch(VITE_APP_GIPHY_API_KEY)
-      setGiphyFetch(giphy)
-    }
-  }, [])
-
-  const fetchGifs = (offset: number) =>
-    giphyFetch.search(gifSearch, { offset, sort: 'relevant', limit: 9 })
-
-  return (
-    <Box {...rest}>
-      <HStack width="100%" position="relative">
-        <TextArea
-          ref={textAreaRef}
-          pr={16}
-          placeholder="Leave a public message here."
-          fontSize="14px"
-          resize="none"
-          value={comment}
-          maxLength={280}
-          name="comment"
-          borderWidth={'2px'}
-          borderColor={'brand.primary500'}
-          backgroundColor={'brand.bgWhite'}
-          onChange={setTarget}
-        />
-
-        {isHoveringOverGIFButton && selectedGIF && (
-          <CloseIcon position="absolute" top="31px" right="29px" />
-        )}
-
-        <Box zIndex="10" position="absolute" right={2}>
-          {selectedGIF ? (
-            <Image
-              src={`${selectedGIF.images.preview_webp.url}`}
-              alt="gif"
-              width="50px"
-              height="50px"
-              cursor="pointer"
-              opacity={isHoveringOverGIFButton ? '0.25' : '1'}
-              onMouseEnter={setIsHoveringOverGIFButton.on}
-              onMouseLeave={setIsHoveringOverGIFButton.off}
-              onClick={() => {
-                setSelectedGIF(null)
-                setIsHoveringOverGIFButton.off()
-              }}
-            />
-          ) : (
-            <Button bg="none" p={0} onClick={onGIFModalOpenClick}>
-              <GifIcon />
-            </Button>
-          )}
-        </Box>
-      </HStack>
-
-      <Modal
-        onClose={() => {
-          setGifSearch('bitcoin')
-          onGIFModalClosed()
-        }}
-        isOpen={isGIFModalOpen}
-        isCentered
-      >
-        <ModalOverlay />
-
-        <ModalContent mt={focus && isMobile ? 100 : 0}>
-          <ModalBody p={2}>
-            <InputGroup mb={2}>
-              <InputLeftElement>
-                <SearchIcon />
-              </InputLeftElement>
-              <Input
-                onFocus={() => setFocus(true)}
-                onBlur={() => setFocus(false)}
-                placeholder="Search"
-                variant="filled"
-                focusBorderColor="brand.primary"
-                bg="#DDFFF8"
-                onChange={(e) => setGifSearch(e.target.value)}
-              />
-              <ModalCloseButton mt="5px" ml="7px" />
-            </InputGroup>
-
-            <Box height="450px" overflow="auto">
-              <Box
-                display="flex"
-                justifyContent="center"
-                alignItems="center"
-                cursor="pointer"
-              >
-                <Grid
-                  width={isMobile ? 350 : 400}
-                  columns={3}
-                  fetchGifs={fetchGifs}
-                  noLink={true}
-                  hideAttribution={true}
-                  key={gifSearch}
-                  onGifClick={(gif: any) => {
-                    setSelectedGIF(gif)
-                    setFormState('media', gif.images.original.webp)
-                    onGIFModalClosed()
-                  }}
-                />
-              </Box>
-            </Box>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    </Box>
-  )
-}
diff --git a/src/pages/projectView/projectMainBody/components/index.ts b/src/pages/projectView/projectMainBody/components/index.ts
index a0b375757..82116134a 100644
--- a/src/pages/projectView/projectMainBody/components/index.ts
+++ b/src/pages/projectView/projectMainBody/components/index.ts
@@ -11,7 +11,7 @@ export * from './ProjectFundingQRModal'
 export * from './ProjectFundingSummary'
 export * from './ProjectLinks'
 export * from './ProjectMenu'
-export * from './ProjectPaymentFormFundingComment'
+export * from './ProjectFundingFormCommentField'
 export * from './RewardAdditionModal'
 export * from './SummaryInfoLine'
 export * from './TagBox'

From ea62aeb74fc77345b82673602978ade3747c91ab Mon Sep 17 00:00:00 2001
From: J Francisco Rader <franciscorader@gmail.com>
Date: Tue, 9 May 2023 01:23:29 -0300
Subject: [PATCH 2/4] fix: missing deps

---
 src/context/auth.tsx              | 3 ++-
 src/hooks/useFundingFormState.tsx | 8 +++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/context/auth.tsx b/src/context/auth.tsx
index 3005d8a7b..a8e54fb73 100644
--- a/src/context/auth.tsx
+++ b/src/context/auth.tsx
@@ -144,6 +144,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     }
 
     setInitialLoad(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {
@@ -158,7 +159,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     if (initialLoad) {
       setLoading(loadingUser)
     }
-  }, [loadingUser])
+  }, [initialLoad, loadingUser])
 
   return (
     <AuthContext.Provider
diff --git a/src/hooks/useFundingFormState.tsx b/src/hooks/useFundingFormState.tsx
index 42f5a5dcc..b94b562df 100644
--- a/src/hooks/useFundingFormState.tsx
+++ b/src/hooks/useFundingFormState.tsx
@@ -33,16 +33,14 @@ export type UpdateReward = (_: IRewardCount) => void
 
 export interface IFundFormState {
   state: IFundForm
-
   setTarget: (event: any) => void
-
   setState: (name: string, value: any) => void
   updateReward: UpdateReward
   resetForm: () => void
 }
 
 export const useFundingFormState = ({ rewards }: UseFundStateProps) => {
-  const { user } = useContext(AuthContext)
+  const { user, isAnonymous } = useContext(AuthContext)
   const { getUSDCentsAmount } = useBTCConverter()
 
   const initialState: IFundForm = useMemo(
@@ -52,7 +50,7 @@ export const useFundingFormState = ({ rewards }: UseFundStateProps) => {
       comment: '',
       shippingDestination: ShippingDestination.National,
       shippingCost: 0,
-      anonymous: !(user && user.id), // The default user has id 0
+      anonymous: isAnonymous, // The default user has id 0
       funderAvatarURL: user.imageUrl || '',
       funderUsername: user.username,
       email: '',
@@ -60,7 +58,7 @@ export const useFundingFormState = ({ rewards }: UseFundStateProps) => {
       rewardsByIDAndCount: undefined,
       rewardCurrency: RewardCurrency.Usdcent,
     }),
-    [user],
+    [isAnonymous, user.imageUrl, user.username],
   )
 
   const [state, _setState] = useState<IFundForm>(initialState)

From 682646ae01d01936fa83d47b69d322a98c69f7d7 Mon Sep 17 00:00:00 2001
From: J Francisco Rader <franciscorader@gmail.com>
Date: Tue, 9 May 2023 01:28:58 -0300
Subject: [PATCH 3/4] chore: improve setTarget tn

---
 src/hooks/useFundingFormState.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useFundingFormState.tsx b/src/hooks/useFundingFormState.tsx
index b94b562df..69732d6ff 100644
--- a/src/hooks/useFundingFormState.tsx
+++ b/src/hooks/useFundingFormState.tsx
@@ -63,14 +63,10 @@ export const useFundingFormState = ({ rewards }: UseFundStateProps) => {
 
   const [state, _setState] = useState<IFundForm>(initialState)
 
-  const setTarget = useCallback(
-    (event: any) => {
-      const { name, value } = event.target
-      const newState = { ...state, [name]: value }
-      _setState(newState)
-    },
-    [state],
-  )
+  const setTarget = useCallback((event: any) => {
+    const { name, value } = event.target
+    _setState((current) => ({ ...current, [name]: value }))
+  }, [])
 
   const setState = useCallback((name: string, value: any) => {
     _setState((current) => ({ ...current, [name]: value }))

From 68a3e8fbf8a8602370d282231d922f4554c6903b Mon Sep 17 00:00:00 2001
From: Fran <franciscorader@gmail.com>
Date: Fri, 12 May 2023 03:51:46 -0300
Subject: [PATCH 4/4] feat: Implement the left sidebar (#864)

* refactor: make ProjectProvider avoid multiple network-only requests not needed

* feat: add project navigation in left panel

* chore: remove unused hook
---
 .eslintrc.cjs                                 |   2 +-
 src/components/icons/svg/ProjectIcon.tsx      |  22 ++
 src/components/layouts/CardLayout.tsx         |  60 ++--
 src/components/nav/bottomNav/ProjectNav.tsx   |  15 +-
 src/config/routes.tsx                         |   4 +-
 src/config/theme.ts                           |   8 +-
 src/constants/components/id.ts                |   5 -
 src/context/auth.tsx                          |   4 +-
 src/context/project.tsx                       |  63 +++-
 src/graphql/fragments/entries.ts              |  40 ++-
 src/graphql/fragments/user.ts                 |   9 +
 src/graphql/mutations/project.ts              |   3 +
 src/graphql/queries/entries.ts                |  29 +-
 src/hooks/graphqlState/useProjectState.tsx    |  22 +-
 .../graphqlState/useProjectTagsState.tsx      |   8 +-
 src/hooks/useFundingFormState.tsx             |  96 +++---
 .../creation/entry/editor/EntryCreateEdit.tsx |   6 +-
 .../ProjectAdditionalDetails.tsx              |   6 +-
 .../creation/projectCreate/ProjectCreate.tsx  |  72 ++---
 .../ProjectCreationWalletConnectionForm.tsx   |   4 +-
 .../components/ProjectCreateForm.tsx          |   2 +-
 .../components/ProjectPreviewComponent.tsx    |   6 +-
 src/pages/creation/projectCreate/types.ts     |  32 +-
 src/pages/entry/EntryContainer.tsx            |   4 +-
 src/pages/entry/EntryDetails.tsx              |   6 +-
 src/pages/entry/EntryPage.tsx                 | 173 +++++-----
 .../projectDashboard/ProjectContributors.tsx  |  14 +-
 .../projectDashboard/ProjectDashboard.tsx     |  45 +--
 .../projectDashboard/ProjectDashboardPage.tsx |  14 +
 .../projectDashboard/ProjectDescription.tsx   |  19 +-
 src/pages/projectDashboard/ProjectDetails.tsx |   7 +-
 .../ProjectFundingSettings.tsx                |   8 +-
 .../projectDashboard/ProjectSettings.tsx      |  22 +-
 src/pages/projectDashboard/ProjectStats.tsx   |   7 +-
 src/pages/projectDashboard/index.ts           |   1 +
 src/pages/projectView/ProjectContainer.tsx    |  47 +--
 src/pages/projectView/index.tsx               |  71 ++---
 .../components/SuccessImageComponent.tsx      |   4 +
 .../projectActivityPanel/index.tsx            |  11 +-
 .../ProjectFundingInitialInfoScreen.tsx       |  23 +-
 .../components/ProjectBackButton.tsx          |  57 ----
 .../projectView/projectMainBody/index.tsx     | 103 ++++--
 .../projectMainBody/sections/Creator.tsx      |   6 +-
 .../projectMainBody/sections/Entries.tsx      | 288 +++++++++--------
 .../projectMainBody/sections/Milestones.tsx   |  22 +-
 .../projectMainBody/sections/Rewards.tsx      | 300 +++++++++---------
 .../projectMainBody/sections/SectionNav.tsx   |  46 +--
 .../projectMainBody/sections/Summary.tsx      |  12 +-
 .../components/ProjectBackButton.tsx          |  30 ++
 .../components/ProjectMobileNavigation.tsx    |  37 +++
 .../components/ProjectNavigation.tsx          |  82 +++++
 .../hooks/useProjectAnchors.tsx               | 104 ++++++
 src/types/generated/graphql.ts                | 168 ++++++----
 src/utils/validations/checkKeyValueExists.ts  |   2 +-
 54 files changed, 1292 insertions(+), 959 deletions(-)
 create mode 100644 src/components/icons/svg/ProjectIcon.tsx
 create mode 100644 src/graphql/fragments/user.ts
 create mode 100644 src/pages/projectDashboard/ProjectDashboardPage.tsx
 delete mode 100644 src/pages/projectView/projectMainBody/components/ProjectBackButton.tsx
 create mode 100644 src/pages/projectView/projectNavigation/components/ProjectBackButton.tsx
 create mode 100644 src/pages/projectView/projectNavigation/components/ProjectMobileNavigation.tsx
 create mode 100644 src/pages/projectView/projectNavigation/components/ProjectNavigation.tsx
 create mode 100644 src/pages/projectView/projectNavigation/hooks/useProjectAnchors.tsx

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 6128caf06..2b30fd4ac 100644
--- a/.eslintrc.cjs
+++ b/.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,
diff --git a/src/components/icons/svg/ProjectIcon.tsx b/src/components/icons/svg/ProjectIcon.tsx
new file mode 100644
index 000000000..af0c4e72b
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/layouts/CardLayout.tsx b/src/components/layouts/CardLayout.tsx
index 2c0d005d7..d17aca420 100644
--- a/src/components/layouts/CardLayout.tsx
+++ b/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>
+    )
+  },
+)
diff --git a/src/components/nav/bottomNav/ProjectNav.tsx b/src/components/nav/bottomNav/ProjectNav.tsx
index dd42d262f..4a4ca28ba 100644
--- a/src/components/nav/bottomNav/ProjectNav.tsx
+++ b/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
diff --git a/src/config/routes.tsx b/src/config/routes.tsx
index 4c8e17a1b..6db17cbf6 100644
--- a/src/config/routes.tsx
+++ b/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: [
       {
diff --git a/src/config/theme.ts b/src/config/theme.ts
index 8d8566008..3c01e77dc 100644
--- a/src/config/theme.ts
+++ b/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: {
diff --git a/src/constants/components/id.ts b/src/constants/components/id.ts
index 3c499c48d..1fe8f738f 100644
--- a/src/constants/components/id.ts
+++ b/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',
diff --git a/src/context/auth.tsx b/src/context/auth.tsx
index a8e54fb73..977004f62 100644
--- a/src/context/auth.tsx
+++ b/src/context/auth.tsx
@@ -31,7 +31,7 @@ const defaultContext: AuthContextProps = {
   async getAuthToken() {
     return false
   },
-  setUser(user: User) {},
+  setUser() {},
   followedProjects: [],
 }
 
@@ -57,7 +57,7 @@ type AuthContextProps = {
   setIsLoggedIn: Dispatch<SetStateAction<boolean>>
   queryCurrentUser: () => void
   getAuthToken: () => Promise<boolean>
-  setUser: (user: User) => void
+  setUser: Dispatch<SetStateAction<User>>
   followedProjects: Project[]
 }
 
diff --git a/src/context/project.tsx b/src/context/project.tsx
index 4939a7b0d..3d09ed97f 100644
--- a/src/context/project.tsx
+++ b/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}
diff --git a/src/graphql/fragments/entries.ts b/src/graphql/fragments/entries.ts
index 7f5e28499..00bc4fe97 100644
--- a/src/graphql/fragments/entries.ts
+++ b/src/graphql/fragments/entries.ts
@@ -1,6 +1,37 @@
 import { gql } from '@apollo/client'
 
+import { FRAGMENT_USER_FOR_AVATAR } from './user'
+
+export const FRAGMENT_ENTRY = gql`
+  ${FRAGMENT_USER_FOR_AVATAR}
+  fragment Entry on Entry {
+    id
+    title
+    description
+    image
+    published
+    content
+    createdAt
+    updatedAt
+    publishedAt
+    status
+    fundersCount
+    amountFunded
+    type
+    creator {
+      ...UserForAvatar
+    }
+    project {
+      id
+      title
+      name
+      image
+    }
+  }
+`
+
 export const FRAGMENT_ENTRY_FOR_LANDING_PAGE = gql`
+  ${FRAGMENT_USER_FOR_AVATAR}
   fragment EntryForLandingPage on Entry {
     amountFunded
     entryFundersCount: fundersCount
@@ -15,14 +46,13 @@ export const FRAGMENT_ENTRY_FOR_LANDING_PAGE = gql`
       title
     }
     creator {
-      id
-      imageUrl
-      username
+      ...UserForAvatar
     }
   }
 `
 
 export const FRAGMENT_ENTRY_FOR_PROJECT = gql`
+  ${FRAGMENT_USER_FOR_AVATAR}
   fragment EntryForProject on Entry {
     id
     title
@@ -36,9 +66,7 @@ export const FRAGMENT_ENTRY_FOR_PROJECT = gql`
     createdAt
     publishedAt
     creator {
-      id
-      username
-      imageUrl
+      ...UserForAvatar
     }
   }
 `
diff --git a/src/graphql/fragments/user.ts b/src/graphql/fragments/user.ts
new file mode 100644
index 000000000..bf69cfea2
--- /dev/null
+++ b/src/graphql/fragments/user.ts
@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client'
+
+export const FRAGMENT_USER_FOR_AVATAR = gql`
+  fragment UserForAvatar on User {
+    id
+    imageUrl
+    username
+  }
+`
diff --git a/src/graphql/mutations/project.ts b/src/graphql/mutations/project.ts
index dcd4b0f63..7d2426c93 100644
--- a/src/graphql/mutations/project.ts
+++ b/src/graphql/mutations/project.ts
@@ -17,6 +17,9 @@ export const MUTATION_CREATE_PROJECT = gql`
         user {
           id
           ownerOf {
+            owner {
+              id
+            }
             project {
               id
             }
diff --git a/src/graphql/queries/entries.ts b/src/graphql/queries/entries.ts
index 465b7724e..14f44ece2 100644
--- a/src/graphql/queries/entries.ts
+++ b/src/graphql/queries/entries.ts
@@ -1,32 +1,15 @@
 import { gql } from '@apollo/client'
 
-import { FRAGMENT_ENTRY_FOR_LANDING_PAGE } from '../fragments/entries'
+import {
+  FRAGMENT_ENTRY,
+  FRAGMENT_ENTRY_FOR_LANDING_PAGE,
+} from '../fragments/entries'
 
 export const QUERY_ENTRY = gql`
+  ${FRAGMENT_ENTRY}
   query Entry($id: BigInt!) {
     entry(id: $id) {
-      id
-      title
-      description
-      image
-      published
-      content
-      createdAt
-      updatedAt
-      publishedAt
-      status
-      fundersCount
-      type
-      creator {
-        id
-        username
-        imageUrl
-      }
-      project {
-        id
-        title
-        name
-      }
+      ...Entry
     }
   }
 `
diff --git a/src/hooks/graphqlState/useProjectState.tsx b/src/hooks/graphqlState/useProjectState.tsx
index 4a1c58305..d7509328a 100644
--- a/src/hooks/graphqlState/useProjectState.tsx
+++ b/src/hooks/graphqlState/useProjectState.tsx
@@ -21,15 +21,21 @@ export const useProjectState = (
 ) => {
   const { toast } = useNotification()
 
-  const [project, setProject] = useState<ProjectFragment>({} as ProjectFragment)
+  const [project, setProject] = useState<ProjectFragment | null>(null)
   const [baseProject, setBaseProject] = useState<ProjectFragment>(
     {} as ProjectFragment,
   )
 
-  const { loading } = useProjectByNameOrIdQuery({
+  const idType =
+    type === 'name' && typeof projectId === 'string' ? 'name' : 'id'
+
+  const { loading, error } = useProjectByNameOrIdQuery({
     variables: {
-      where: { [type]: type === 'name' ? projectId : toInt(projectId) },
+      where: {
+        [idType]: type === 'name' ? projectId : toInt(projectId),
+      },
     },
+    skip: !projectId,
     ...options,
     onCompleted(data) {
       const { project } = data
@@ -65,10 +71,16 @@ export const useProjectState = (
   }
 
   const updateProject = (value: Partial<ProjectFragment>) => {
-    setProject((current) => ({ ...current, ...value }))
+    setProject((current) =>
+      current ? { ...current, ...value } : (value as ProjectFragment),
+    )
   }
 
   const saveProject = async () => {
+    if (!project) {
+      return
+    }
+
     const [isDiff, diffKeys] = getDiff(project, baseProject, [
       'location',
       'description',
@@ -108,5 +120,5 @@ export const useProjectState = (
     await updateProjectMutation({ variables: { input } })
   }
 
-  return { loading, saving, project, updateProject, saveProject }
+  return { loading, error, saving, project, updateProject, saveProject }
 }
diff --git a/src/hooks/graphqlState/useProjectTagsState.tsx b/src/hooks/graphqlState/useProjectTagsState.tsx
index c44e925b2..f3bc78ac3 100644
--- a/src/hooks/graphqlState/useProjectTagsState.tsx
+++ b/src/hooks/graphqlState/useProjectTagsState.tsx
@@ -18,7 +18,7 @@ export const useProjectTagsState = ({
   project,
   updateProject,
 }: {
-  project: ProjectFragment
+  project: ProjectFragment | null
   updateProject?: (_: Project) => void
 }) => {
   const [tags, setTags] = useState<Tag[]>([])
@@ -26,7 +26,7 @@ export const useProjectTagsState = ({
   const { toast } = useNotification()
 
   useEffect(() => {
-    if (project?.tags?.length > 0) {
+    if (project && project?.tags?.length > 0) {
       setTags(project?.tags)
     }
   }, [project])
@@ -69,6 +69,10 @@ export const useProjectTagsState = ({
   })
 
   const saveTags = async () => {
+    if (!project) {
+      return
+    }
+
     const addTags =
       project?.tags?.length > 0
         ? tags.filter((tag) => !project.tags.some((tag2) => tag.id === tag2.id))
diff --git a/src/hooks/useFundingFormState.tsx b/src/hooks/useFundingFormState.tsx
index 69732d6ff..c8eae6418 100644
--- a/src/hooks/useFundingFormState.tsx
+++ b/src/hooks/useFundingFormState.tsx
@@ -4,7 +4,7 @@ import { AuthContext } from '../context'
 import { useBTCConverter } from '../helpers'
 import { IRewardCount } from '../interfaces'
 import {
-  ProjectReward,
+  ProjectRewardForCreateUpdateFragment,
   RewardCurrency,
   ShippingDestination,
 } from '../types/generated/graphql'
@@ -26,7 +26,7 @@ export interface IFundForm {
 }
 
 type UseFundStateProps = {
-  rewards?: ProjectReward[]
+  rewards?: ProjectRewardForCreateUpdateFragment[]
 }
 
 export type UpdateReward = (_: IRewardCount) => void
@@ -82,57 +82,51 @@ export const useFundingFormState = ({ rewards }: UseFundStateProps) => {
 
   const updateReward = useCallback(
     ({ id, count }: IRewardCount) => {
-      const newRewardsCountInfo = { ...state.rewardsByIDAndCount }
-
-      if (count !== 0) {
-        newRewardsCountInfo[id as unknown as keyof ProjectReward] = count
-      } else if (count === 0) {
-        delete newRewardsCountInfo[id as unknown as keyof ProjectReward]
-      }
-
-      let rewardsCost = 0
-
-      if (rewards) {
-        Object.keys(newRewardsCountInfo).forEach((rewardID: string) => {
-          const id = parseInt(rewardID, 10)
-
-          const reward = rewards.find(
-            (reward: ProjectReward) =>
-              reward.id === id || `${reward.id}` === rewardID,
-          )
-
-          if (reward && reward.id) {
-            const rewardMultiplier =
-              newRewardsCountInfo[rewardID as keyof ProjectReward]
-            if (!rewardMultiplier) {
-              return 0
+      _setState((current) => {
+        const newRewardsCountInfo = { ...current.rewardsByIDAndCount }
+
+        if (count !== 0) {
+          newRewardsCountInfo[id.toString()] = count
+        } else if (count === 0) {
+          delete newRewardsCountInfo[id.toString()]
+        }
+
+        let rewardsCost = 0
+
+        if (rewards) {
+          Object.keys(newRewardsCountInfo).forEach((rewardID: string) => {
+            const id = parseInt(rewardID, 10)
+
+            const reward = rewards.find(
+              (reward) => reward.id === id || `${reward.id}` === rewardID,
+            )
+
+            if (reward && reward.id) {
+              const rewardMultiplier = newRewardsCountInfo[rewardID.toString()]
+              if (!rewardMultiplier) {
+                return 0
+              }
+
+              const cost =
+                current.rewardCurrency === RewardCurrency.Usdcent
+                  ? reward.cost
+                  : // Assume sats if not USD cents
+                    getUSDCentsAmount(reward.cost as Satoshis)
+
+              rewardsCost += cost * rewardMultiplier
             }
-
-            const cost =
-              state.rewardCurrency === RewardCurrency.Usdcent
-                ? reward.cost
-                : // Assume sats if not USD cents
-                  getUSDCentsAmount(reward.cost as Satoshis)
-
-            rewardsCost += cost * rewardMultiplier
-          }
-        })
-      }
-
-      _setState((current) => ({
-        ...current,
-        rewardsByIDAndCount: newRewardsCountInfo,
-        rewardsCost,
-        totalAmount: rewardsCost + state.donationAmount,
-      }))
+          })
+        }
+
+        return {
+          ...current,
+          rewardsByIDAndCount: newRewardsCountInfo,
+          rewardsCost,
+          totalAmount: rewardsCost + current.donationAmount,
+        }
+      })
     },
-    [
-      getUSDCentsAmount,
-      rewards,
-      state.donationAmount,
-      state.rewardCurrency,
-      state.rewardsByIDAndCount,
-    ],
+    [getUSDCentsAmount, rewards],
   )
 
   const resetForm = useCallback(() => {
diff --git a/src/pages/creation/entry/editor/EntryCreateEdit.tsx b/src/pages/creation/entry/editor/EntryCreateEdit.tsx
index d5351520e..728c9950b 100644
--- a/src/pages/creation/entry/editor/EntryCreateEdit.tsx
+++ b/src/pages/creation/entry/editor/EntryCreateEdit.tsx
@@ -100,9 +100,13 @@ export const EntryCreateEdit = () => {
   const debouncedUpdateEntry = useDebounce(entry, 1000)
 
   useEffect(() => {
-    if (debouncedUpdateEntry && entry.status !== EntryStatus.Published) {
+    if (
+      debouncedUpdateEntry &&
+      debouncedUpdateEntry.status !== EntryStatus.Published
+    ) {
       saveEntry()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedUpdateEntry])
 
   useEffect(() => {
diff --git a/src/pages/creation/projectCreate/ProjectAdditionalDetails.tsx b/src/pages/creation/projectCreate/ProjectAdditionalDetails.tsx
index aad38a422..96fb5babb 100644
--- a/src/pages/creation/projectCreate/ProjectAdditionalDetails.tsx
+++ b/src/pages/creation/projectCreate/ProjectAdditionalDetails.tsx
@@ -8,6 +8,7 @@ import { useProjectState } from '../../../hooks/graphqlState'
 import { useProjectTagsState } from '../../../hooks/graphqlState/useProjectTagsState'
 import { useProjectLinksValidation } from '../../../hooks/validations'
 import { toInt, useNotification } from '../../../utils'
+import { truthyFilter } from '../../../utils/array'
 import { ProjectRegion } from './components'
 import { ProjectCreateLayout } from './components/ProjectCreateLayout'
 import { ProjectLinks } from './components/ProjectLinks'
@@ -22,7 +23,6 @@ export const ProjectAdditionalDetails = () => {
   const { loading, project, updateProject, saveProject } = useProjectState(
     toInt(params.projectId),
     {
-      fetchPolicy: 'network-only',
       onError() {
         toast({
           title: 'Error fetching project',
@@ -74,14 +74,14 @@ export const ProjectAdditionalDetails = () => {
       >
         <VStack width="100%" alignItems="flex-start" spacing="40px">
           <ProjectLinks
-            links={project.links as string[]}
+            links={project?.links.filter(truthyFilter) || []}
             setLinks={setLinks}
             linkError={linkError}
           />
           <ProjectTagsCreateEdit tags={tags} updateTags={setTags} />
 
           <ProjectRegion
-            location={project.location}
+            location={project?.location}
             updateProject={updateProject}
           />
 
diff --git a/src/pages/creation/projectCreate/ProjectCreate.tsx b/src/pages/creation/projectCreate/ProjectCreate.tsx
index 01b8b7003..6af232e44 100644
--- a/src/pages/creation/projectCreate/ProjectCreate.tsx
+++ b/src/pages/creation/projectCreate/ProjectCreate.tsx
@@ -1,4 +1,4 @@
-import { useLazyQuery, useMutation } from '@apollo/client'
+import { useLazyQuery } from '@apollo/client'
 import { VStack } from '@chakra-ui/react'
 import { useEffect, useState } from 'react'
 import { createUseStyles } from 'react-jss'
@@ -10,12 +10,14 @@ import { getPath } from '../../../constants'
 import { UserValidations } from '../../../constants/validations'
 import { useAuthContext } from '../../../context'
 import { QUERY_PROJECT_BY_NAME_OR_ID } from '../../../graphql'
-import {
-  MUTATION_CREATE_PROJECT,
-  MUTATION_UPDATE_PROJECT,
-} from '../../../graphql/mutations'
 import { FormError } from '../../../types'
-import { Project } from '../../../types/generated/graphql'
+import {
+  CreateProjectMutation,
+  Project,
+  useCreateProjectMutation,
+  User,
+  useUpdateProjectMutation,
+} from '../../../types/generated/graphql'
 import { toInt, useNotification, validateEmail } from '../../../utils'
 import {
   ProjectCreateForm,
@@ -24,15 +26,7 @@ import {
 import { ProjectCreateLayout } from './components/ProjectCreateLayout'
 import { ProjectFundraisingDeadline } from './components/ProjectFundraisingDeadline'
 import { ProjectPreviewComponent } from './components/ProjectPreviewComponent'
-import { ProjectCreationVariables, ProjectUpdateVariables } from './types'
-
-type CreateProjectMutationResponseData = {
-  createProject: Project | null
-}
-
-type UpdateProjectMutationResponseData = {
-  updateProject: Project | null
-}
+import { ProjectCreationVariables } from './types'
 
 const useStyles = createUseStyles({
   backIcon: {
@@ -69,25 +63,26 @@ export const ProjectCreate = () => {
     FormError<ProjectCreationVariables>
   >({})
 
-  const [createProject, { loading: createLoading }] = useMutation<
-    CreateProjectMutationResponseData,
-    { input: ProjectCreationVariables }
-  >(MUTATION_CREATE_PROJECT, {
+  const [createProject, { loading: createLoading }] = useCreateProjectMutation({
     onCompleted({ createProject: createdProject }) {
       if (createdProject && createdProject.owners[0]) {
-        const newOwnershipInfo = user.ownerOf.concat([
+        const newOwnershipInfo = [
+          ...user.ownerOf,
           {
             project: createdProject,
             owner: createdProject.owners[0],
           },
-        ])
-
-        setUser({
-          ...user,
-          ...{
-            ownerOf: newOwnershipInfo,
-          },
-        })
+        ] satisfies CreateProjectMutation['createProject']['owners'][number]['user']['ownerOf']
+
+        setUser(
+          (current) =>
+            ({
+              ...current,
+              ownerOf: current.ownerOf
+                ? [...current.ownerOf, newOwnershipInfo]
+                : [newOwnershipInfo],
+            } as User),
+        )
 
         navigate(getPath('launchProjectDetails', createdProject.id))
       }
@@ -101,10 +96,7 @@ export const ProjectCreate = () => {
     },
   })
 
-  const [updateProject, { loading: updateLoading }] = useMutation<
-    UpdateProjectMutationResponseData,
-    { input: ProjectUpdateVariables }
-  >(MUTATION_UPDATE_PROJECT, {
+  const [updateProject, { loading: updateLoading }] = useUpdateProjectMutation({
     onCompleted() {
       navigate(getPath('launchProjectDetails', params.projectId || ''))
     },
@@ -136,15 +128,21 @@ export const ProjectCreate = () => {
     },
   })
 
+  useEffect(() => {
+    if (params.projectId) {
+      getProjectById()
+    }
+  }, [getProjectById, params.projectId])
+
   const handleNextButtonTapped = () => {
     const isValid = validateForm()
 
-    if (isValid) {
+    if (data?.project && isValid) {
       if (isEditingExistingProject) {
         updateProject({
           variables: {
             input: {
-              projectId: toInt(data?.project?.id),
+              projectId: toInt(data.project.id),
               title: form.title,
               image: `${form.image}`,
               thumbnailImage: `${form.thumbnailImage}`,
@@ -195,12 +193,6 @@ export const ProjectCreate = () => {
     setForm({ ...form, email: event.target.value })
   }
 
-  useEffect(() => {
-    if (params.projectId) {
-      getProjectById()
-    }
-  }, [params.projectId])
-
   return (
     <ProjectCreateLayout
       handleBack={handleBack}
diff --git a/src/pages/creation/projectCreate/ProjectCreationWalletConnectionForm.tsx b/src/pages/creation/projectCreate/ProjectCreationWalletConnectionForm.tsx
index d15592c31..88bbd3e50 100644
--- a/src/pages/creation/projectCreate/ProjectCreationWalletConnectionForm.tsx
+++ b/src/pages/creation/projectCreate/ProjectCreationWalletConnectionForm.tsx
@@ -47,7 +47,7 @@ import { WalletConnectionOptionInfoBox } from './components/WalletConnectionOpti
 import { TNodeInput } from './types'
 
 type Props = {
-  project: ProjectFragment
+  project: ProjectFragment | null
   onProjectLaunchSelected: (_: CreateWalletInput) => void
   onSaveAsDraftSelected?: (_: CreateWalletInput) => void
   triggerWallet?: boolean
@@ -142,7 +142,7 @@ export const ProjectCreationWalletConnectionForm = ({
       resourceId: number
       resourceType: WalletResourceType
     } = {
-      resourceId: toInt(project.id),
+      resourceId: toInt(project?.id),
       resourceType: WalletResourceType.Project,
     }
 
diff --git a/src/pages/creation/projectCreate/components/ProjectCreateForm.tsx b/src/pages/creation/projectCreate/components/ProjectCreateForm.tsx
index f76c25df8..e62a3dc61 100644
--- a/src/pages/creation/projectCreate/components/ProjectCreateForm.tsx
+++ b/src/pages/creation/projectCreate/components/ProjectCreateForm.tsx
@@ -26,7 +26,7 @@ type ProjectCreate = {
   name?: string
   shortDescription?: string
   description?: string
-  image?: string
+  image?: string | null
   headerImage?: string
 }
 
diff --git a/src/pages/creation/projectCreate/components/ProjectPreviewComponent.tsx b/src/pages/creation/projectCreate/components/ProjectPreviewComponent.tsx
index 0d5078bff..48a721991 100644
--- a/src/pages/creation/projectCreate/components/ProjectPreviewComponent.tsx
+++ b/src/pages/creation/projectCreate/components/ProjectPreviewComponent.tsx
@@ -6,8 +6,8 @@ import { MarkDown, toSmallImageUrl, useMobileMode } from '../../../../utils'
 
 interface ProjectPreviewComponentProps {
   data: {
-    image?: string
-    thumbnailImage?: string
+    image?: string | null
+    thumbnailImage?: string | null
     title?: string
     shortDescription?: string
     description?: string
@@ -32,7 +32,7 @@ export const ProjectPreviewComponent = ({
           <Box height="100px" overflow="hidden" backgroundColor="white">
             <ImageWithReload
               grey
-              src={data.image}
+              src={data.image || ''}
               height="100px"
               width="100%"
               noCacheId={(Math.random() + 1).toString(36).substring(7)}
diff --git a/src/pages/creation/projectCreate/types.ts b/src/pages/creation/projectCreate/types.ts
index 84280f7fa..ba4b8922b 100644
--- a/src/pages/creation/projectCreate/types.ts
+++ b/src/pages/creation/projectCreate/types.ts
@@ -1,5 +1,5 @@
 import {
-  ProjectStatus,
+  Project,
   ProjectType,
   RewardCurrency,
 } from '../../../types/generated/graphql'
@@ -19,20 +19,22 @@ export type ProjectCreationVariables = {
   type?: ProjectType
 }
 
-export type ProjectUpdateVariables = {
-  projectId: number
-  title?: string
-  name?: string
-  image?: string
-  thumbnailImage?: string
-  shortDescription?: string
-  description?: string
-  expiresAt?: string
-  type?: ProjectType
-  rewardCurrency?: RewardCurrency
-  fundingGoal?: number
-  status?: ProjectStatus
-}
+export type ProjectUpdateVariables = Partial<
+  Pick<
+    Project,
+    | 'title'
+    | 'name'
+    | 'image'
+    | 'thumbnailImage'
+    | 'shortDescription'
+    | 'description'
+    | 'expiresAt'
+    | 'type'
+    | 'rewardCurrency'
+    | 'fundingGoal'
+    | 'status'
+  >
+>
 
 export type ProjectRewardCreationVariables = {
   projectId: number
diff --git a/src/pages/entry/EntryContainer.tsx b/src/pages/entry/EntryContainer.tsx
index 1e4c73f05..a601547ab 100644
--- a/src/pages/entry/EntryContainer.tsx
+++ b/src/pages/entry/EntryContainer.tsx
@@ -4,7 +4,7 @@ import { createUseStyles } from 'react-jss'
 
 import { MobileViews, useProjectContext } from '../../context'
 import { fadeOut, slideInLeft } from '../../styles/animations'
-import { Entry } from '../../types/generated/graphql'
+import { EntryFragment } from '../../types/generated/graphql'
 import { useDarkMode, useMobileMode } from '../../utils'
 import { EntryDetails } from './EntryDetails'
 
@@ -45,7 +45,7 @@ const useStyles = createUseStyles<Rules, IStyles>({
 })
 
 interface IActivityProps {
-  entry: Entry
+  entry: EntryFragment
   detailOpen: boolean
 }
 
diff --git a/src/pages/entry/EntryDetails.tsx b/src/pages/entry/EntryDetails.tsx
index 8bac90390..c1680776f 100644
--- a/src/pages/entry/EntryDetails.tsx
+++ b/src/pages/entry/EntryDetails.tsx
@@ -15,11 +15,11 @@ import { ProjectFundersCountIndicator } from '../../components/molecules'
 import { ButtonComponent } from '../../components/ui'
 import { EntryStatusLabel } from '../../components/ui/EntryStatusLabel'
 import { getPath } from '../../constants'
-import { Entry } from '../../types/generated/graphql'
+import { EntryFragment } from '../../types/generated/graphql'
 import { ProjectEntryEditor } from '../creation/entry/editor'
 
 type Props = {
-  entry: Entry
+  entry: EntryFragment
 }
 
 export const EntryDetails = ({ entry }: Props) => {
@@ -31,7 +31,7 @@ export const EntryDetails = ({ entry }: Props) => {
       <ButtonComponent
         size="sm"
         as={Link}
-        to={getPath('project', entry.project!.name)}
+        to={getPath('project', entry.project?.name)}
         leftIcon={<BiLeftArrowAlt fontSize="15px" />}
       >
         View project
diff --git a/src/pages/entry/EntryPage.tsx b/src/pages/entry/EntryPage.tsx
index 0caa4b17d..c0d4b900f 100644
--- a/src/pages/entry/EntryPage.tsx
+++ b/src/pages/entry/EntryPage.tsx
@@ -1,4 +1,4 @@
-import { useLazyQuery } from '@apollo/client'
+import { ApolloError } from '@apollo/client'
 import { Box } from '@chakra-ui/layout'
 import { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router'
@@ -8,17 +8,14 @@ import { ProjectNav } from '../../components/nav'
 import Loader from '../../components/ui/Loader'
 import { Head } from '../../config/Head'
 import { getPath } from '../../constants'
-import { useNavContext } from '../../context'
+import { useProjectContext } from '../../context'
 import { ProjectProvider } from '../../context'
-import { QUERY_PROJECT_BY_NAME_OR_ID } from '../../graphql'
-import { QUERY_ENTRY } from '../../graphql/queries/entries'
 import { useFundingFlow, useFundingFormState } from '../../hooks'
 import {
-  Entry,
+  EntryFragment,
   FundingResourceType,
-  Owner,
-  Project,
-  ProjectReward,
+  ProjectRewardForCreateUpdateFragment,
+  useEntryLazyQuery,
 } from '../../types/generated/graphql'
 import { toInt, useMobileMode } from '../../utils'
 import { compactMap } from '../../utils/formatData/compactMap'
@@ -29,62 +26,77 @@ import { EntryContainer } from './EntryContainer'
 export const EntryPage = () => {
   const { entryId } = useParams<{ entryId: string }>()
   const navigate = useNavigate()
-  const isMobile = useMobileMode()
-
-  const { setNavData } = useNavContext()
 
-  const [detailOpen, setDetailOpen] = useState(true)
-  const fundingFlow = useFundingFlow()
+  const [getEntry, { loading, error, data: entryData }] = useEntryLazyQuery({
+    onCompleted(data) {
+      const { entry } = data
+      if (!entry) {
+        navigate(getPath('notFound'))
+      }
+    },
+    onError(error) {
+      console.error(error)
+      navigate(getPath('notFound'))
+    },
+  })
 
   useEffect(() => {
     if (entryId) {
       getEntry({ variables: { id: toInt(entryId) } })
     }
-  }, [entryId])
-
-  const [getProject, { loading, error: projectError, data: projectData }] =
-    useLazyQuery(QUERY_PROJECT_BY_NAME_OR_ID, {
-      onCompleted(data) {
-        setNavData({
-          projectName: data.project.name,
-          projectTitle: data.project.title,
-          projectPath: getPath('project', data.project.name),
-          projectOwnerIDs:
-            data.project.owners.map((ownerInfo: Owner) => {
-              return Number(ownerInfo.user.id || -1)
-            }) || [],
-        })
-      },
-    })
-
-  const [getEntry, { loading: loadingPosts, error, data: entryData }] =
-    useLazyQuery(QUERY_ENTRY, {
-      fetchPolicy: 'network-only',
-      onCompleted(data) {
-        const { entry } = data
-        if (!entry) {
-          navigate(getPath('notFound'))
-        }
-
-        getProject({ variables: { where: { id: toInt(entry.project.id) } } })
-      },
-      onError(error) {
-        console.error(error)
-        navigate(getPath('notFound'))
-      },
-    })
+  }, [entryId, getEntry])
+
+  return (
+    <ProjectProvider
+      projectId={Number(
+        entryData && entryData.entry && entryData.entry.project?.id,
+      )}
+    >
+      <EntryViewWrapper
+        loading={loading}
+        error={error}
+        entry={entryData?.entry}
+      />
+    </ProjectProvider>
+  )
+}
+
+interface IEntryViewWrapper {
+  entry?: EntryFragment | null
+  loading: boolean
+  error: ApolloError | undefined
+}
+
+const EntryViewWrapper = ({ entry, loading, error }: IEntryViewWrapper) => {
+  const isMobile = useMobileMode()
 
-  if (loadingPosts || loading || !projectData) {
+  const {
+    project,
+    error: projectError,
+    loading: projectLoading,
+  } = useProjectContext()
+
+  const [detailOpen, setDetailOpen] = useState(true)
+
+  const fundingFlow = useFundingFlow()
+
+  const { setFundState } = fundingFlow
+
+  const rewards =
+    (project?.rewards &&
+      compactMap<ProjectRewardForCreateUpdateFragment>(project.rewards)) ||
+    []
+
+  const fundForm = useFundingFormState({ rewards })
+
+  if (loading || projectLoading || !project) {
     return <Loader paddingTop="65px" />
   }
 
-  if (error || !entryData || !entryData.entry || projectError) {
+  if (error || !entry || projectError) {
     return <NotFoundPage />
   }
 
-  const project = projectData && projectData.project
-  const entry = entryData && entryData.entry
-
   return (
     <Box
       display="flex"
@@ -101,53 +113,22 @@ export const EntryPage = () => {
         position="relative"
         bg="brand.bgGrey4"
       >
-        <EntryViewWrapper
-          {...{ project, entry, detailOpen, setDetailOpen, fundingFlow }}
+        <Head
+          title={`${entry.title} - ${project.title}`}
+          description={entry.description}
+          image={entry.image || entry.project?.image || GeyserTempImage}
         />
+        <EntryContainer
+          entry={entry}
+          {...{ detailOpen, setDetailOpen, setFundState }}
+        />
+        <ProjectActivityPanel
+          {...{ detailOpen, setDetailOpen, project, fundingFlow, fundForm }}
+          resourceType={FundingResourceType.Entry}
+          resourceId={entry.id}
+        />
+        {isMobile && <ProjectNav />}
       </Box>
     </Box>
   )
 }
-
-interface IEntryViewWrapper {
-  project: Project
-  entry: Entry
-  detailOpen: boolean
-  fundingFlow: any
-  setDetailOpen: React.Dispatch<React.SetStateAction<boolean>>
-  resourceType?: string
-  resourceId?: number
-}
-
-const EntryViewWrapper = ({
-  project,
-  entry,
-  detailOpen,
-  setDetailOpen,
-  fundingFlow,
-}: IEntryViewWrapper) => {
-  const isMobile = useMobileMode()
-  const rewards =
-    (project.rewards && compactMap<ProjectReward>(project.rewards)) || []
-  const fundForm = useFundingFormState({ rewards })
-  const { setFundState } = fundingFlow
-  return (
-    <ProjectProvider project={project}>
-      <Head
-        title={`${entry.title} - ${project.title}`}
-        description={entry.description}
-        image={entry.image || entry.project?.image || GeyserTempImage}
-      />
-      <EntryContainer
-        entry={entry}
-        {...{ detailOpen, setDetailOpen, setFundState }}
-      />
-      <ProjectActivityPanel
-        {...{ detailOpen, setDetailOpen, project, fundingFlow, fundForm }}
-        resourceType={FundingResourceType.Entry}
-        resourceId={entry.id}
-      />
-      {isMobile && <ProjectNav />}
-    </ProjectProvider>
-  )
-}
diff --git a/src/pages/projectDashboard/ProjectContributors.tsx b/src/pages/projectDashboard/ProjectContributors.tsx
index 3c453f202..daa3da144 100644
--- a/src/pages/projectDashboard/ProjectContributors.tsx
+++ b/src/pages/projectDashboard/ProjectContributors.tsx
@@ -50,8 +50,11 @@ export const ProjectContributors = () => {
   const funders = useQueryWithPagination<Funder>({
     queryName: 'getDashboardFunders',
     itemLimit: 100,
+    options: {
+      skip: !project,
+    },
     query: QUERY_PROJECT_DASHBOARD_FUNDERS,
-    where: { projectId: toInt(project.id), confirmed: true },
+    where: { projectId: toInt(project?.id), confirmed: true },
     orderBy: {
       confirmedAt: 'desc',
     },
@@ -75,7 +78,7 @@ export const ProjectContributors = () => {
         key: 'name',
         render(val: Funder) {
           const funderBadges = computeFunderBadges({
-            creationDateStringOfFundedContent: project.createdAt || '',
+            creationDateStringOfFundedContent: project?.createdAt || '',
             funder: val,
           })
           const isFunderAnonymous = Boolean(val?.user) === false
@@ -247,10 +250,9 @@ export const ProjectContributors = () => {
         <VStack maxWidth="1200px" width="100%" alignItems="center">
           <HStack width="100%" justifyContent="space-between">
             <HStack>
-              <Text
-                fontSize={'16px'}
-                fontWeight={600}
-              >{`${project.fundersCount} Contributors`}</Text>
+              <Text fontSize={'16px'} fontWeight={600}>
+                {project?.fundersCount} Contributors
+              </Text>
               <Text fontSize={'14px'}>
                 {selectedFunders.length > 0
                   ? `( ${selectedFunders.length} selected )`
diff --git a/src/pages/projectDashboard/ProjectDashboard.tsx b/src/pages/projectDashboard/ProjectDashboard.tsx
index 514460698..f39a8bfbf 100644
--- a/src/pages/projectDashboard/ProjectDashboard.tsx
+++ b/src/pages/projectDashboard/ProjectDashboard.tsx
@@ -4,8 +4,7 @@ import { Outlet, useLocation, useNavigate, useParams } from 'react-router'
 
 import Loader from '../../components/ui/Loader'
 import { getPath, PathName } from '../../constants'
-import { ProjectProvider, useAuthContext, useNavContext } from '../../context'
-import { useProjectState } from '../../hooks/graphqlState'
+import { useAuthContext, useProjectContext } from '../../context'
 import { noScrollBar } from '../../styles/common'
 import { useMobileMode } from '../../utils'
 
@@ -26,7 +25,6 @@ export const ProjectDashboard = () => {
   const location = useLocation()
 
   const { user } = useAuthContext()
-  const { setNavData } = useNavContext()
 
   const [activeTab, setActiveTab] = useState<DashboardTabs>()
 
@@ -56,31 +54,13 @@ export const ProjectDashboard = () => {
     return splitValue.replaceAll('/', '') as DashboardTabs
   }
 
-  const { loading, saving, project, updateProject, saveProject } =
-    useProjectState(projectId || '', {
-      fetchPolicy: 'network-only',
-      onError() {
-        navigate(getPath('notFound'))
-      },
-      onCompleted(data) {
-        const { project } = data
-        if (project) {
-          if (project.owners[0]?.user.id !== user.id) {
-            navigate(getPath('notAuthorized'))
-          }
-
-          setNavData({
-            projectName: project.name,
-            projectTitle: project.title,
-            projectPath: `${getPath('project', project.name)}`,
-            projectOwnerIDs:
-              project.owners.map((ownerInfo) => {
-                return Number(ownerInfo.user.id || -1)
-              }) || [],
-          })
-        }
-      },
-    })
+  const { loading, project } = useProjectContext()
+
+  useEffect(() => {
+    if (project && project.owners[0]?.user.id !== user.id) {
+      navigate(getPath('notAuthorized'))
+    }
+  }, [navigate, project, user.id])
 
   if (loading) {
     return <Loader alignItems="flex-start" paddingTop="120px" />
@@ -148,14 +128,7 @@ export const ProjectDashboard = () => {
           {navList.map((nav) => renderButton(nav))}
         </HStack>
       </HStack>
-      <ProjectProvider
-        project={project}
-        updateProject={updateProject}
-        saveProject={saveProject}
-        saving={saving}
-      >
-        <Outlet />
-      </ProjectProvider>
+      <Outlet />
     </Box>
   )
 }
diff --git a/src/pages/projectDashboard/ProjectDashboardPage.tsx b/src/pages/projectDashboard/ProjectDashboardPage.tsx
new file mode 100644
index 000000000..d48bde629
--- /dev/null
+++ b/src/pages/projectDashboard/ProjectDashboardPage.tsx
@@ -0,0 +1,14 @@
+import { useParams } from 'react-router-dom'
+
+import { ProjectProvider } from '../../context'
+import { ProjectDashboard } from './ProjectDashboard'
+
+export const ProjectDashboardPage = () => {
+  const { projectId } = useParams<{ projectId: string }>()
+
+  return (
+    <ProjectProvider projectId={projectId || ''}>
+      <ProjectDashboard />
+    </ProjectProvider>
+  )
+}
diff --git a/src/pages/projectDashboard/ProjectDescription.tsx b/src/pages/projectDashboard/ProjectDescription.tsx
index f75756881..3e765aa56 100644
--- a/src/pages/projectDashboard/ProjectDescription.tsx
+++ b/src/pages/projectDashboard/ProjectDescription.tsx
@@ -24,18 +24,25 @@ export const ProjectDescription = () => {
 
   const [isLargerThan1280] = useMediaQuery('(min-width: 1280px)')
 
-  const [form, setForm] = useState<ProjectUpdateVariables>({
-    projectId: project.id,
+  const [form, setForm] = useState<
+    ProjectUpdateVariables & { projectId: string | number }
+  >({
+    projectId: project?.id || '',
     title: '',
     shortDescription: '',
     description: '',
     image: '',
     thumbnailImage: '',
   })
+
   const { setIsFormDirty } = useBeforeClose()
 
   useEffect(() => {
-    const isDiff = checkDiff(project as Partial<ProjectUpdateVariables>, form, [
+    if (!project) {
+      return
+    }
+
+    const isDiff = checkDiff(project, form, [
       'title',
       'shortDescription',
       'description',
@@ -44,7 +51,7 @@ export const ProjectDescription = () => {
     ])
 
     setIsFormDirty(isDiff)
-  }, [project, form])
+  }, [project, form, setIsFormDirty])
 
   const [formError, setFormError] = useState<FormError<ProjectUpdateVariables>>(
     {},
@@ -86,6 +93,10 @@ export const ProjectDescription = () => {
     }
   }, [project])
 
+  if (!project) {
+    return null
+  }
+
   const handleNext = async () => {
     const isValid = validateForm()
 
diff --git a/src/pages/projectDashboard/ProjectDetails.tsx b/src/pages/projectDashboard/ProjectDetails.tsx
index 606a2bd40..794eee915 100644
--- a/src/pages/projectDashboard/ProjectDetails.tsx
+++ b/src/pages/projectDashboard/ProjectDetails.tsx
@@ -6,6 +6,7 @@ import { useProjectContext } from '../../context'
 import { useProjectTagsState } from '../../hooks/graphqlState/useProjectTagsState'
 import { useProjectLinksValidation } from '../../hooks/validations'
 import { useNotification } from '../../utils'
+import { truthyFilter } from '../../utils/array'
 import { ProjectRegion } from '../creation/projectCreate/components'
 import { ProjectLinks } from '../creation/projectCreate/components/ProjectLinks'
 import { ProjectTagsCreateEdit } from '../creation/projectCreate/components/ProjectTagsCreateEdit'
@@ -68,14 +69,16 @@ export const ProjectDetails = () => {
         >
           <VStack width="100%" alignItems="flex-start" spacing="24px">
             <ProjectRegion
-              location={project.location}
+              location={project?.location}
               updateProject={updateProject}
             />
 
             <ProjectTagsCreateEdit tags={tags} updateTags={setTags} />
 
             <ProjectLinks
-              {...{ links: project.links as string[], setLinks, linkError }}
+              links={project?.links.filter(truthyFilter) || []}
+              setLinks={setLinks}
+              linkError={linkError}
             />
 
             <ButtonComponent
diff --git a/src/pages/projectDashboard/ProjectFundingSettings.tsx b/src/pages/projectDashboard/ProjectFundingSettings.tsx
index 47495f1f7..66f22487c 100644
--- a/src/pages/projectDashboard/ProjectFundingSettings.tsx
+++ b/src/pages/projectDashboard/ProjectFundingSettings.tsx
@@ -30,10 +30,14 @@ export const ProjectFundingSettings = () => {
   const [tiggerWalletOpen, setTriggerWalletOpen] = useState(false)
 
   const projectWallet: Wallet | undefined = useMemo(() => {
-    return project.wallets && project.wallets[0]
-  }, [project.wallets])
+    return project?.wallets && project.wallets[0]
+  }, [project])
 
   const handleProjectLaunch = async () => {
+    if (!project) {
+      return
+    }
+
     navigate(getPath('project', project.name))
     toast({
       status: 'success',
diff --git a/src/pages/projectDashboard/ProjectSettings.tsx b/src/pages/projectDashboard/ProjectSettings.tsx
index cfb9d61a3..203165210 100644
--- a/src/pages/projectDashboard/ProjectSettings.tsx
+++ b/src/pages/projectDashboard/ProjectSettings.tsx
@@ -16,7 +16,7 @@ import { DashboardGridLayout } from './components/DashboardGridLayout'
 type ProjectSettingsForm = {
   expiresAt?: string
   email: string
-  status: ProjectStatus
+  status: ProjectStatus | ''
 }
 
 export const ProjectSettings = () => {
@@ -26,19 +26,21 @@ export const ProjectSettings = () => {
   const { project, updateProject } = useProjectContext()
 
   const [form, setForm] = useState<ProjectSettingsForm>({
-    expiresAt: project.expiresAt as string,
+    expiresAt: project?.expiresAt || '',
     email: '',
-    status: project.status as ProjectStatus,
+    status: project?.status || '',
   })
 
-  const [deactivate, setDeactivate] = useState(
-    !isActive(project.status),
-  )
+  const [deactivate, setDeactivate] = useState(!isActive(project?.status))
   const [formError, setFormError] = useState<FormError<ProjectSettingsForm>>({})
 
   const { setIsFormDirty } = useBeforeClose()
 
   useEffect(() => {
+    if (!project) {
+      return
+    }
+
     const isFormDirty = () => {
       if (
         ((Boolean(form.expiresAt) || Boolean(project.expiresAt)) &&
@@ -53,7 +55,7 @@ export const ProjectSettings = () => {
     }
 
     setIsFormDirty(isFormDirty())
-  }, [project, form, deactivate])
+  }, [project, form, deactivate, setIsFormDirty])
 
   const [updateProjectMutation, { loading: updateLoading }] = useMutation<{
     updateProject: Project
@@ -92,7 +94,7 @@ export const ProjectSettings = () => {
 
     const newForm = form
     newForm.email = user.email || form.email
-    if (isValid) {
+    if (project && isValid) {
       updateProjectMutation({
         variables: {
           input: {
@@ -116,6 +118,10 @@ export const ProjectSettings = () => {
     return isValid
   }
 
+  if (!project) {
+    return null
+  }
+
   return (
     <DashboardGridLayout>
       <GridItem colSpan={6} display="flex" justifyContent="center">
diff --git a/src/pages/projectDashboard/ProjectStats.tsx b/src/pages/projectDashboard/ProjectStats.tsx
index 56023180e..13e3de7e3 100644
--- a/src/pages/projectDashboard/ProjectStats.tsx
+++ b/src/pages/projectDashboard/ProjectStats.tsx
@@ -44,12 +44,17 @@ export const ProjectStats = () => {
   const { loading, data } = useQuery<ResponseData, QueryVariables>(
     QUERY_PROJECT_DASHBOARD_DATA,
     {
-      variables: { where: { id: toInt(project.id) } },
+      skip: !project,
+      variables: { where: { id: toInt(project?.id) } },
     },
   )
 
   const visitorsCount = data?.project?.statistics?.totalVisitors || 0
 
+  if (!project) {
+    return null
+  }
+
   const getFundersToVisitorsPercentage = (): number => {
     if (visitorsCount === 0) {
       return 100
diff --git a/src/pages/projectDashboard/index.ts b/src/pages/projectDashboard/index.ts
index 7a63bb107..eefe47ca6 100644
--- a/src/pages/projectDashboard/index.ts
+++ b/src/pages/projectDashboard/index.ts
@@ -1,5 +1,6 @@
 export * from './ProjectContributors'
 export * from './ProjectDashboard'
+export * from './ProjectDashboardPage'
 export * from './ProjectDescription'
 export * from './ProjectDetails'
 export * from './ProjectFundingSettings'
diff --git a/src/pages/projectView/ProjectContainer.tsx b/src/pages/projectView/ProjectContainer.tsx
index 0d534ec72..26ef93774 100644
--- a/src/pages/projectView/ProjectContainer.tsx
+++ b/src/pages/projectView/ProjectContainer.tsx
@@ -1,52 +1,57 @@
+import { Box } from '@chakra-ui/react'
+
 import { ProjectNav } from '../../components/nav/bottomNav/ProjectNav'
+import Loader from '../../components/ui/Loader'
 import { Head } from '../../config/Head'
-import { ProjectProvider } from '../../context'
+import { useProjectContext } from '../../context'
 import { useFundingFormState } from '../../hooks'
 import {
   FundingResourceType,
-  ProjectFragment,
-  ProjectReward,
+  ProjectRewardForCreateUpdateFragment,
 } from '../../types/generated/graphql'
 import { useMobileMode } from '../../utils'
 import { ProjectActivityPanel } from './projectActivityPanel'
 import { ProjectMainBody } from './projectMainBody'
-import { ProjectBackButton } from './projectMainBody/components/ProjectBackButton'
 
 type Props = {
-  project: ProjectFragment
-  updateProject: (value: Partial<ProjectFragment>) => void
   fundingFlow: any
-  resourceType?: string
-  resourceId?: number
 }
 
-export const ProjectContainer = ({
-  project,
-  updateProject,
-  fundingFlow,
-}: Props) => {
+export const ProjectContainer = ({ fundingFlow }: Props) => {
+  const { project, loading } = useProjectContext()
+
   const fundForm = useFundingFormState({
     /*
      * Passing an empty array as fallback would probably make
      * more sense but I think at the moment most checks look
      * for an undefined value.
      */
-    rewards: (project.rewards as ProjectReward[]) || undefined,
+    rewards: project
+      ? (project.rewards as ProjectRewardForCreateUpdateFragment[])
+      : undefined,
   })
 
   const isMobile = useMobileMode()
 
   const { setFundState, fundState } = fundingFlow
 
+  if (loading) {
+    return (
+      <Box width="100%" display="flex" justifyContent="center">
+        <Loader paddingTop="65px" />
+      </Box>
+    )
+  }
+
   return (
-    <ProjectProvider {...{ project, updateProject }}>
+    <>
       <Head
-        title={project.title}
-        description={project.description}
-        image={project.image || ''}
+        title={project?.title || ''}
+        description={project?.description || ''}
+        image={project?.image || ''}
         type="article"
       />
-      <ProjectBackButton />
+
       <ProjectMainBody
         {...{
           project,
@@ -60,10 +65,10 @@ export const ProjectContainer = ({
         project={project}
         {...{ fundingFlow, fundForm }}
         resourceType={FundingResourceType.Project}
-        resourceId={project.id}
+        resourceId={project?.id}
       />
 
       {isMobile && <ProjectNav fixed />}
-    </ProjectProvider>
+    </>
   )
 }
diff --git a/src/pages/projectView/index.tsx b/src/pages/projectView/index.tsx
index fa938e89d..adb9995eb 100644
--- a/src/pages/projectView/index.tsx
+++ b/src/pages/projectView/index.tsx
@@ -1,72 +1,37 @@
 import { Box } from '@chakra-ui/layout'
-import { useNavigate, useParams } from 'react-router'
+import { useParams } from 'react-router'
 
-import Loader from '../../components/ui/Loader'
-import { getPath } from '../../constants'
-import { useNavContext } from '../../context'
+import { ProjectProvider } from '../../context'
 import { useFundingFlow } from '../../hooks'
-import { useProjectState } from '../../hooks/graphqlState'
 import { useMobileMode } from '../../utils'
 import { ProjectContainer } from './ProjectContainer'
 
 export const ProjectView = () => {
   const { projectId } = useParams<{ projectId: string }>()
-  const navigate = useNavigate()
   const isMobile = useMobileMode()
 
-  const { setNavData } = useNavContext()
-
   const fundingFlow = useFundingFlow()
 
-  const { loading, project, updateProject } = useProjectState(projectId || '', {
-    fetchPolicy: 'network-only',
-
-    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)
-          }) || [],
-      })
-    },
-  })
-
-  if (loading || !project.id) {
-    return <Loader paddingTop="65px" />
-  }
-
   return (
-    <Box
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      height="100%"
-    >
+    <ProjectProvider projectId={projectId || ''}>
       <Box
-        width="100%"
-        height="100%"
         display="flex"
-        overflow="hidden"
-        position="relative"
-        bg="brand.bgGrey4"
-        flexDirection={isMobile ? 'column' : 'row'}
+        justifyContent="center"
+        alignItems="center"
+        height="100%"
       >
-        <ProjectContainer {...{ project, fundingFlow, updateProject }} />
+        <Box
+          width="100%"
+          height="100%"
+          display="flex"
+          overflow="hidden"
+          position="relative"
+          bg="brand.bgGrey4"
+          flexDirection={isMobile ? 'column' : 'row'}
+        >
+          <ProjectContainer fundingFlow={fundingFlow} />
+        </Box>
       </Box>
-    </Box>
+    </ProjectProvider>
   )
 }
diff --git a/src/pages/projectView/projectActivityPanel/components/SuccessImageComponent.tsx b/src/pages/projectView/projectActivityPanel/components/SuccessImageComponent.tsx
index 08fe9874b..5972ca30a 100644
--- a/src/pages/projectView/projectActivityPanel/components/SuccessImageComponent.tsx
+++ b/src/pages/projectView/projectActivityPanel/components/SuccessImageComponent.tsx
@@ -31,6 +31,10 @@ export const SuccessImageComponent = ({
 
   const { project } = useProjectContext()
 
+  if (!project) {
+    return null
+  }
+
   const handleDownload = async () => {
     try {
       const dataUrl = await getDataUrl()
diff --git a/src/pages/projectView/projectActivityPanel/index.tsx b/src/pages/projectView/projectActivityPanel/index.tsx
index 10c1ebefb..a46d256e8 100644
--- a/src/pages/projectView/projectActivityPanel/index.tsx
+++ b/src/pages/projectView/projectActivityPanel/index.tsx
@@ -26,7 +26,7 @@ import { SuccessScreen } from './screens/SuccessScreen'
 import { useStyles } from './styles'
 
 type Props = {
-  project: ProjectFragment
+  project?: ProjectFragment | null
   fundingFlow: UseFundingFlowReturn
   resourceType: FundingResourceType
   resourceId: number
@@ -36,7 +36,6 @@ type Props = {
 type FilteredReward = { id: number; quantity: number }
 
 export const ProjectActivityPanel = ({
-  project,
   fundingFlow,
   fundForm,
   resourceType,
@@ -46,6 +45,7 @@ export const ProjectActivityPanel = ({
 
   const { btcRate } = useBtcContext()
   const isMobile = useMobileMode()
+  const { project } = useProjectContext()
 
   const { mobileView, setMobileView } = useProjectContext()
   // required for knowing the rewards and the funds
@@ -126,7 +126,7 @@ export const ProjectActivityPanel = ({
     } = state
 
     const input: FundingInput = {
-      projectId: toInt(project.id),
+      projectId: toInt(project?.id),
       anonymous,
       ...(donationAmount !== 0 && { donationInput: { donationAmount } }),
       metadataInput: {
@@ -135,7 +135,7 @@ export const ProjectActivityPanel = ({
         ...(comment && { comment }),
       },
       sourceResourceInput: {
-        resourceId: toInt(resourceId) || toInt(project.id),
+        resourceId: toInt(resourceId) || toInt(project?.id),
         resourceType: resourceType || 'project',
       },
     }
@@ -170,7 +170,7 @@ export const ProjectActivityPanel = ({
   }
 
   const renderPanelContent = () => {
-    if (!project || !project.id) {
+    if (!project) {
       return <InfoPageSkeleton />
     }
 
@@ -182,7 +182,6 @@ export const ProjectActivityPanel = ({
               project,
               fundingTx,
               btcRate,
-              test: false,
             }}
           />
         )
diff --git a/src/pages/projectView/projectActivityPanel/screens/ProjectFundingInitialInfoScreen.tsx b/src/pages/projectView/projectActivityPanel/screens/ProjectFundingInitialInfoScreen.tsx
index c93e9222e..169cf59fb 100644
--- a/src/pages/projectView/projectActivityPanel/screens/ProjectFundingInitialInfoScreen.tsx
+++ b/src/pages/projectView/projectActivityPanel/screens/ProjectFundingInitialInfoScreen.tsx
@@ -36,7 +36,6 @@ import { ProjectLeaderboardList } from '../components/ProjectLeaderboardList'
 type Props = {
   project: ProjectFragment
   btcRate: number
-  test?: boolean
   fundingTx: FundingTxFragment
 }
 
@@ -44,7 +43,6 @@ const itemLimit = 50
 
 export const ProjectFundingInitialInfoScreen = ({
   project,
-  test,
   fundingTx,
 }: Props) => {
   const isMobile = useMobileMode()
@@ -112,21 +110,16 @@ export const ProjectFundingInitialInfoScreen = ({
     }
   }, [mobileView])
 
-  if (test) {
-    return <InfoPageSkeleton />
-  }
-
   const renderActivityList = () => {
-    switch (tab) {
-      case 'activity':
-        return (
-          <ProjectContributionList
-            fundingTxs={{ ...fundingTxs, data: aggregatedFundingTxs }}
-          />
-        )
-      default:
-        return <ProjectLeaderboardList project={project} funders={funders} />
+    if (tab === 'activity') {
+      return (
+        <ProjectContributionList
+          fundingTxs={{ ...fundingTxs, data: aggregatedFundingTxs }}
+        />
+      )
     }
+
+    return <ProjectLeaderboardList project={project} funders={funders} />
   }
 
   const contributionButton = () => {
diff --git a/src/pages/projectView/projectMainBody/components/ProjectBackButton.tsx b/src/pages/projectView/projectMainBody/components/ProjectBackButton.tsx
deleted file mode 100644
index 07695dee3..000000000
--- a/src/pages/projectView/projectMainBody/components/ProjectBackButton.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Box, Button, HStack } from '@chakra-ui/react'
-import { BsArrowLeft, BsLightningChargeFill } from 'react-icons/bs'
-import { useLocation, useNavigate } from 'react-router-dom'
-
-import { getPath } from '../../../../constants'
-import { MobileViews, useProjectContext } from '../../../../context'
-import { isActive, useMobileMode } from '../../../../utils'
-
-export const ProjectBackButton = () => {
-  const { mobileView, project, setMobileView } = useProjectContext()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const isMobile = useMobileMode()
-
-  const handleGoBack = () => {
-    if (location.key) {
-      navigate(-1)
-    } else {
-      navigate(getPath('landingPage'))
-    }
-  }
-
-  if (isMobile && mobileView && mobileView !== MobileViews.description) {
-    return null
-  }
-
-  const isFundingDisabled = !isActive(project.status)
-
-  return (
-    <Box>
-      <HStack
-        padding={{ base: '10px 10px 2px 10px', md: '20px 10px 2px 10px' }}
-      >
-        <Button
-          variant="containedClear"
-          size="sm"
-          leftIcon={<BsArrowLeft fontSize="20px" />}
-          onClick={handleGoBack}
-        >
-          back
-        </Button>
-        {isMobile ? (
-          <Button
-            size="sm"
-            flexGrow={1}
-            variant="contained"
-            isDisabled={isFundingDisabled}
-            leftIcon={<BsLightningChargeFill />}
-            onClick={() => setMobileView(MobileViews.funding)}
-          >
-            Contribute
-          </Button>
-        ) : null}
-      </HStack>
-    </Box>
-  )
-}
diff --git a/src/pages/projectView/projectMainBody/index.tsx b/src/pages/projectView/projectMainBody/index.tsx
index 65579f87b..bdb45edca 100644
--- a/src/pages/projectView/projectMainBody/index.tsx
+++ b/src/pages/projectView/projectMainBody/index.tsx
@@ -1,5 +1,6 @@
 import { Box, VStack } from '@chakra-ui/react'
 import classNames from 'classnames'
+import { useRef } from 'react'
 import { createUseStyles } from 'react-jss'
 
 import { IFundingStages } from '../../../constants'
@@ -12,6 +13,9 @@ import {
 import { UpdateReward } from '../../../hooks'
 import { ProjectFragment } from '../../../types/generated/graphql'
 import { useDarkMode, useMobileMode } from '../../../utils'
+import { ProjectMobileNavigation } from '../projectNavigation/components/ProjectMobileNavigation'
+import { ProjectNavigation } from '../projectNavigation/components/ProjectNavigation'
+import { useProjectAnchors } from '../projectNavigation/hooks/useProjectAnchors'
 import { NoWallet } from './components'
 import { Creator, Entries, Summary } from './sections'
 import { Milestones } from './sections/Milestones'
@@ -53,7 +57,7 @@ const useStyles = createUseStyles<Rules, Styles>({
 })
 
 type Props = {
-  project: ProjectFragment
+  project?: ProjectFragment | null
   fundState: IFundingStages
   updateReward: UpdateReward
 }
@@ -68,6 +72,20 @@ export const ProjectMainBody = ({
 
   const { mobileView } = useProjectContext()
 
+  const headerRef = useRef<HTMLDivElement>(null)
+  const entriesRef = useRef<HTMLDivElement>(null)
+  const rewardsRef = useRef<HTMLDivElement>(null)
+  const milestonesRef = useRef<HTMLDivElement>(null)
+
+  const projectAnchors = useProjectAnchors(project, {
+    header: headerRef,
+    entries: entriesRef,
+    rewards: rewardsRef,
+    milestones: milestonesRef,
+  })
+
+  const { entriesLength, rewardsLength, milestonesLength } = projectAnchors
+
   const inView = mobileView === MobileViews.description
 
   const classes = useStyles({ isMobile, inView })
@@ -80,40 +98,57 @@ export const ProjectMainBody = ({
   )
 
   return (
-    <Box
-      className={classNames(classes.container)}
-      backgroundColor={isDark ? 'brand.bgHeavyDarkMode' : 'brand.bgGrey4'}
-      flex={!isMobile ? 3 : undefined}
-      height="100%"
-      w="100%"
-      flexDirection="column"
-      overflow="hidden"
-    >
-      <Box className={classes.detailsContainer} id="project-scroll-container">
-        <VStack alignItems="center" width="100%" flex="1">
-          <VStack
-            spacing="30px"
-            alignItems="left"
-            marginTop={isMobile ? '0px' : '20px'}
-            maxWidth="1000px"
-            w="100%"
-            padding={isMobile ? '10px 10px 50px 10px' : '0px 40px 70px 40px'}
-          >
-            <Summary />
-
-            {isViewerTheProjectOwner && <NoWallet project={project} />}
-            {isViewerTheProjectOwner && <Creator />}
-
-            <SectionNav />
-
-            <Entries />
-
-            <Rewards {...{ fundState, updateReward }} />
-
-            <Milestones />
+    <>
+      {isMobile ? (
+        <ProjectMobileNavigation />
+      ) : (
+        <ProjectNavigation {...projectAnchors} />
+      )}
+      <Box
+        className={classNames(classes.container)}
+        backgroundColor={isDark ? 'brand.bgHeavyDarkMode' : 'brand.bgGrey4'}
+        flex={!isMobile ? 3 : undefined}
+        height="100%"
+        w="100%"
+        flexDirection="column"
+        overflow="hidden"
+      >
+        <Box className={classes.detailsContainer} id="project-scroll-container">
+          <VStack alignItems="center" width="100%" flex="1">
+            <VStack
+              spacing="30px"
+              alignItems="left"
+              marginTop={isMobile ? '0px' : '20px'}
+              maxWidth="1000px"
+              w="100%"
+              padding={isMobile ? '10px 10px 50px 10px' : '0px 40px 70px 40px'}
+            >
+              <Summary ref={headerRef} />
+
+              {project && isViewerTheProjectOwner && (
+                <NoWallet project={project} />
+              )}
+              {isViewerTheProjectOwner && <Creator />}
+
+              <SectionNav {...projectAnchors} />
+
+              <Entries ref={entriesRef} entriesLength={entriesLength} />
+
+              <Rewards
+                ref={rewardsRef}
+                rewardsLength={rewardsLength}
+                fundState={fundState}
+                updateReward={updateReward}
+              />
+
+              <Milestones
+                ref={milestonesRef}
+                milestonesLength={milestonesLength}
+              />
+            </VStack>
           </VStack>
-        </VStack>
+        </Box>
       </Box>
-    </Box>
+    </>
   )
 }
diff --git a/src/pages/projectView/projectMainBody/sections/Creator.tsx b/src/pages/projectView/projectMainBody/sections/Creator.tsx
index a5a75985a..70e55d3f4 100644
--- a/src/pages/projectView/projectMainBody/sections/Creator.tsx
+++ b/src/pages/projectView/projectMainBody/sections/Creator.tsx
@@ -43,6 +43,10 @@ export const Creator = () => {
     onOpen: openMilestoneModal,
   } = useDisclosure()
 
+  if (!project) {
+    return null
+  }
+
   const handleRewardAdd = (addReward: ProjectRewardForCreateUpdateFragment) => {
     const newRewards = project.rewards || []
     updateProject({ rewards: [...newRewards, addReward] })
@@ -109,7 +113,7 @@ export const Creator = () => {
           onClose={onRewardClose}
           onSubmit={handleRewardAdd}
           isSatoshi={false}
-          projectId={parseInt(`${project.id}`, 10)}
+          projectId={parseInt(project.id, 10)}
         />
       )}
       {isMilestoneModalOpen && (
diff --git a/src/pages/projectView/projectMainBody/sections/Entries.tsx b/src/pages/projectView/projectMainBody/sections/Entries.tsx
index f2d7f4a4f..455625cdc 100644
--- a/src/pages/projectView/projectMainBody/sections/Entries.tsx
+++ b/src/pages/projectView/projectMainBody/sections/Entries.tsx
@@ -1,6 +1,6 @@
 import { useMutation } from '@apollo/client'
 import { Center, Text, useDisclosure } from '@chakra-ui/react'
-import { useEffect, useState } from 'react'
+import { forwardRef, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { CardLayout } from '../../../../components/layouts'
@@ -9,7 +9,7 @@ import {
   ProjectEntryCard,
   ProjectSectionBar,
 } from '../../../../components/molecules'
-import { getPath, ID } from '../../../../constants'
+import { getPath } from '../../../../constants'
 import { useProjectContext } from '../../../../context'
 import { MUTATION_DELETE_ENTRY } from '../../../../graphql/mutations'
 import {
@@ -17,159 +17,167 @@ import {
   useProjectUnplublishedEntriesLazyQuery,
 } from '../../../../types'
 import { isActive, isDraft, toInt, useNotification } from '../../../../utils'
+import { truthyFilter } from '../../../../utils/array'
 
-export const Entries = () => {
-  const navigate = useNavigate()
-
-  const { project, isProjectOwner, updateProject } = useProjectContext()
-  const { toast } = useNotification()
-
-  const [selectedEntry, setSelectedEntry] = useState<EntryForProjectFragment>()
-
-  const [deleteEntry] = useMutation(MUTATION_DELETE_ENTRY, {
-    onCompleted() {
-      const newEntries = project.entries.filter(
-        (entry) => entry?.id !== selectedEntry?.id,
-      )
-      updateProject({ entries: newEntries })
-      setSelectedEntry(undefined)
-    },
-  })
-  const [fetchUnpublishedEntries] = useProjectUnplublishedEntriesLazyQuery({
-    variables: {
-      where: { name: project.name },
-    },
-    onCompleted(data) {
-      if (data.project && updateProject) {
-        updateProject({
-          ...data.project,
-          entries: [...project.entries, ...data.project.entries],
-        })
-      }
-    },
-  })
+export const Entries = forwardRef<HTMLDivElement, { entriesLength: number }>(
+  ({ entriesLength }, ref) => {
+    const navigate = useNavigate()
 
-  useEffect(() => {
-    if (isProjectOwner) {
-      fetchUnpublishedEntries()
-    }
-  }, [isProjectOwner])
+    const { project, isProjectOwner, updateProject } = useProjectContext()
+    const { toast } = useNotification()
 
-  const {
-    isOpen: isDeleteEntryOpen,
-    onClose: closeDeleteEntry,
-    onOpen: openDeleteEntry,
-  } = useDisclosure()
+    const [selectedEntry, setSelectedEntry] =
+      useState<EntryForProjectFragment>()
+
+    const [deleteEntry] = useMutation(MUTATION_DELETE_ENTRY, {
+      onCompleted() {
+        const newEntries = project?.entries.filter(
+          (entry) => entry?.id !== selectedEntry?.id,
+        )
+        updateProject({ entries: newEntries })
+        setSelectedEntry(undefined)
+      },
+    })
+    const [fetchUnpublishedEntries] = useProjectUnplublishedEntriesLazyQuery({
+      variables: {
+        where: { name: project?.name },
+      },
+      onCompleted(data) {
+        if (data.project && updateProject) {
+          updateProject({
+            ...data.project,
+            entries: project
+              ? [...project.entries, ...data.project.entries]
+              : data.project.entries,
+          })
+        }
+      },
+    })
 
-  const hasEntries = project.entries && project.entries.length > 0
-  const entriesLength = project.entries ? project.entries.length : 0
+    useEffect(() => {
+      if (isProjectOwner) {
+        fetchUnpublishedEntries()
+      }
+    }, [fetchUnpublishedEntries, isProjectOwner])
 
-  const canCreateEntries: boolean =
-    isProjectOwner && (isActive(project.status) || isDraft(project.status))
+    const {
+      isOpen: isDeleteEntryOpen,
+      onClose: closeDeleteEntry,
+      onOpen: openDeleteEntry,
+    } = useDisclosure()
 
-  const handleEntryEditButtonTapped = (entry: EntryForProjectFragment) => {
-    navigate(getPath('projectEntryDetails', project.name, entry.id))
-  }
+    if (!project) {
+      return null
+    }
 
-  const triggerDeleteEntry = (entry: EntryForProjectFragment) => {
-    setSelectedEntry(entry)
-    openDeleteEntry()
-  }
+    const canCreateEntries: boolean =
+      isProjectOwner && (isActive(project.status) || isDraft(project.status))
 
-  const handleRemoveEntry = async () => {
-    if (!selectedEntry || !selectedEntry.id) {
-      return
+    const handleEntryEditButtonTapped = (entry: EntryForProjectFragment) => {
+      navigate(getPath('projectEntryDetails', project.name, entry.id))
     }
 
-    try {
-      await deleteEntry({
-        variables: { deleteEntryId: toInt(selectedEntry.id) },
-      })
-
-      toast({
-        title: 'Successfully removed entry',
-        status: 'success',
-      })
-    } catch (error) {
-      toast({
-        title: 'Failed to remove entry',
-        description: `${error}`,
-        status: 'error',
-      })
+    const triggerDeleteEntry = (entry: EntryForProjectFragment) => {
+      setSelectedEntry(entry)
+      openDeleteEntry()
     }
 
-    closeDeleteEntry()
-  }
+    const handleRemoveEntry = async () => {
+      if (!selectedEntry || !selectedEntry.id) {
+        return
+      }
+
+      try {
+        await deleteEntry({
+          variables: { deleteEntryId: toInt(selectedEntry.id) },
+        })
 
-  const renderEntries = () => {
-    if (project.entries && project.entries.length > 0) {
-      const sortedEntries =
-        project.entries &&
-        project.entries.sort(
-          (a, b) =>
-            parseInt(b?.createdAt || '', 10) - parseInt(a?.createdAt || '', 10),
-        )
-      return sortedEntries.map((entry) => {
-        if (entry) {
-          const entryWithProject = { ...entry, project }
-          if (isProjectOwner) {
-            return (
-              <ProjectEntryCard
-                entry={entryWithProject}
-                key={entry.id}
-                onEdit={() => handleEntryEditButtonTapped(entry)}
-                onDelete={() => triggerDeleteEntry(entry)}
-              />
+        toast({
+          title: 'Successfully removed entry',
+          status: 'success',
+        })
+      } catch (error) {
+        toast({
+          title: 'Failed to remove entry',
+          description: `${error}`,
+          status: 'error',
+        })
+      }
+
+      closeDeleteEntry()
+    }
+
+    const renderEntries = () => {
+      if (project.entries && project.entries.length > 0) {
+        const sortedEntries =
+          project.entries &&
+          project.entries
+            .filter(truthyFilter)
+            .sort(
+              (a, b) => Number(b.createdAt || '') - Number(a.createdAt || ''),
             )
+        return sortedEntries.map((entry) => {
+          if (entry) {
+            const entryWithProject = { ...entry, project }
+            if (isProjectOwner) {
+              return (
+                <ProjectEntryCard
+                  entry={entryWithProject}
+                  key={entry.id}
+                  onEdit={() => handleEntryEditButtonTapped(entry)}
+                  onDelete={() => triggerDeleteEntry(entry)}
+                />
+              )
+            }
+
+            return <ProjectEntryCard entry={entryWithProject} key={entry.id} />
           }
+        })
+      }
 
-          return <ProjectEntryCard entry={entryWithProject} key={entry.id} />
-        }
-      })
+      return <Text>There are no any entries available </Text>
+    }
+
+    if (!entriesLength) {
+      return null
     }
 
-    return <Text>There are no any entries available </Text>
-  }
-
-  if (!hasEntries) {
-    return null
-  }
-
-  return (
-    <>
-      <CardLayout
-        width="100%"
-        alignItems="flex-start"
-        spacing="20px"
-        id={ID.project.view.entries}
-        flexDirection="column"
-        padding="24px"
-      >
-        <ProjectSectionBar name={'Entries'} number={entriesLength} />
-
-        {renderEntries()}
-
-        {isProjectOwner && Boolean(canCreateEntries) === false && (
-          <Center>
-            <Text
-              textColor={'brand.neutral600'}
-              textAlign="center"
-              paddingX={2}
-            >
-              You cannot publish an entry in an inactive project. Finish the
-              project configuration or re-activate the project to publish this
-              entry.
-            </Text>
-          </Center>
-        )}
-      </CardLayout>
-      <DeleteConfirmModal
-        isOpen={isDeleteEntryOpen}
-        onClose={closeDeleteEntry}
-        title={`Delete reward ${selectedEntry?.title}`}
-        description={'Are you sure you want to remove the entry'}
-        confirm={handleRemoveEntry}
-      />
-    </>
-  )
-}
+    return (
+      <>
+        <CardLayout
+          ref={ref}
+          width="100%"
+          alignItems="flex-start"
+          spacing="20px"
+          flexDirection="column"
+          padding="24px"
+        >
+          <ProjectSectionBar name={'Entries'} number={entriesLength} />
+
+          {renderEntries()}
+
+          {isProjectOwner && Boolean(canCreateEntries) === false && (
+            <Center>
+              <Text
+                textColor={'brand.neutral600'}
+                textAlign="center"
+                paddingX={2}
+              >
+                You cannot publish an entry in an inactive project. Finish the
+                project configuration or re-activate the project to publish this
+                entry.
+              </Text>
+            </Center>
+          )}
+        </CardLayout>
+        <DeleteConfirmModal
+          isOpen={isDeleteEntryOpen}
+          onClose={closeDeleteEntry}
+          title={`Delete reward ${selectedEntry?.title}`}
+          description={'Are you sure you want to remove the entry'}
+          confirm={handleRemoveEntry}
+        />
+      </>
+    )
+  },
+)
diff --git a/src/pages/projectView/projectMainBody/sections/Milestones.tsx b/src/pages/projectView/projectMainBody/sections/Milestones.tsx
index a1e87d2a0..7454a16f0 100644
--- a/src/pages/projectView/projectMainBody/sections/Milestones.tsx
+++ b/src/pages/projectView/projectMainBody/sections/Milestones.tsx
@@ -1,27 +1,31 @@
 import { Text, useDisclosure, VStack } from '@chakra-ui/react'
+import { forwardRef } from 'react'
 import { BiPencil } from 'react-icons/bi'
 
 import { CardLayout } from '../../../../components/layouts'
 import { ProjectSectionBar } from '../../../../components/molecules'
 import { IconButtonComponent } from '../../../../components/ui'
-import { ID } from '../../../../constants'
 import { useProjectContext } from '../../../../context'
 import { Project, ProjectMilestone } from '../../../../types'
 import { defaultMilestone, MilestoneAdditionModal } from '../components'
 import { MilestoneComponent } from '../components/MilestoneComponent'
 
-export const Milestones = () => {
+export const Milestones = forwardRef<
+  HTMLDivElement,
+  { milestonesLength: number }
+>(({ milestonesLength }, ref) => {
   const { project, isProjectOwner, updateProject } = useProjectContext()
 
-  const hasMilestones = project.milestones && project.milestones.length > 0
-  const milestoneLength = project.milestones ? project.milestones.length : 0
-
   const {
     isOpen: isMilestoneModalOpen,
     onClose: onMilestoneModalClose,
     onOpen: openMilestoneModal,
   } = useDisclosure()
 
+  if (!project) {
+    return null
+  }
+
   const handleMilestoneSubmit = (newMilestones: ProjectMilestone[]) => {
     updateProject({ milestones: newMilestones } as Project)
     onMilestoneModalClose()
@@ -47,14 +51,14 @@ export const Milestones = () => {
     return <Text>There are no milestones available.</Text>
   }
 
-  if (!hasMilestones) {
+  if (!milestonesLength) {
     return null
   }
 
   return (
     <>
       <CardLayout
-        id={ID.project.view.milestones}
+        ref={ref}
         flexDirection="column"
         width="100%"
         alignItems="flex-start"
@@ -62,7 +66,7 @@ export const Milestones = () => {
       >
         <ProjectSectionBar
           name={'Milestones'}
-          number={milestoneLength}
+          number={milestonesLength}
           rightSection={
             isProjectOwner && (
               <IconButtonComponent
@@ -94,4 +98,4 @@ export const Milestones = () => {
       ) : null}
     </>
   )
-}
+})
diff --git a/src/pages/projectView/projectMainBody/sections/Rewards.tsx b/src/pages/projectView/projectMainBody/sections/Rewards.tsx
index 679bd78a1..28ab6d3b8 100644
--- a/src/pages/projectView/projectMainBody/sections/Rewards.tsx
+++ b/src/pages/projectView/projectMainBody/sections/Rewards.tsx
@@ -1,13 +1,6 @@
 import { useMutation } from '@apollo/client'
-import {
-  GridItem,
-  HStack,
-  SimpleGrid,
-  Text,
-  useDisclosure,
-  useMediaQuery,
-} from '@chakra-ui/react'
-import { useState } from 'react'
+import { GridItem, HStack, Text, useDisclosure } from '@chakra-ui/react'
+import { forwardRef, useState } from 'react'
 
 import { CardLayout } from '../../../../components/layouts'
 import {
@@ -15,7 +8,7 @@ import {
   ProjectSectionBar,
   RewardCard,
 } from '../../../../components/molecules'
-import { fundingStages, ID, IFundingStages } from '../../../../constants'
+import { fundingStages, IFundingStages } from '../../../../constants'
 import { MobileViews, useProjectContext } from '../../../../context'
 import { MUTATION_UPDATE_PROJECT_REWARD } from '../../../../graphql/mutations'
 import { UpdateReward } from '../../../../hooks'
@@ -30,117 +23,130 @@ import {
   useMobileMode,
   useNotification,
 } from '../../../../utils'
+import { truthyFilter } from '../../../../utils/array'
 import { RewardAdditionModal } from '../components'
 
 type Props = {
+  rewardsLength: number
   updateReward: UpdateReward
   fundState: IFundingStages
 }
 
-export const Rewards = ({ fundState, updateReward }: Props) => {
-  const isMobile = useMobileMode()
-  const { toast } = useNotification()
-
-  const { project, setMobileView, updateProject, isProjectOwner } =
-    useProjectContext()
-  const [isSmallerThan1302] = useMediaQuery('(max-width: 1302px)')
-  const [selectedReward, setSelectedReward] =
-    useState<ProjectRewardForCreateUpdateFragment>()
-
-  const {
-    isOpen: isRewardOpen,
-    onClose: onRewardClose,
-    onOpen: openReward,
-  } = useDisclosure()
-
-  const {
-    isOpen: isRewardDeleteOpen,
-    onClose: onRewardDeleteClose,
-    onOpen: openRewardDelete,
-  } = useDisclosure()
-
-  const [updateRewardMutation] = useMutation(MUTATION_UPDATE_PROJECT_REWARD)
-
-  const rewardsLength = project.rewards ? project.rewards.length : 0
-  const isRewardBased = project?.rewards && project.rewards.length > 0
-
-  const triggerRewardRemoval = (id?: number) => {
-    const currentReward = project?.rewards?.find((reward) => reward?.id === id)
-    if (!currentReward) {
-      return
-    }
+export const Rewards = forwardRef<HTMLDivElement, Props>(
+  ({ fundState, updateReward, rewardsLength }, ref) => {
+    const isMobile = useMobileMode()
+    const { toast } = useNotification()
 
-    setSelectedReward(currentReward)
-    openRewardDelete()
-  }
+    const { project, setMobileView, updateProject, isProjectOwner } =
+      useProjectContext()
+    const [selectedReward, setSelectedReward] =
+      useState<ProjectRewardForCreateUpdateFragment>()
 
-  const handleRewardUpdate = (
-    updateReward: ProjectRewardForCreateUpdateFragment,
-  ) => {
-    const findReward = project.rewards?.find(
-      (reward) => reward?.id === updateReward.id,
-    )
+    const {
+      isOpen: isRewardOpen,
+      onClose: onRewardClose,
+      onOpen: openReward,
+    } = useDisclosure()
 
-    if (findReward) {
-      const newRewards = project.rewards?.map((reward) => {
-        if (reward?.id === updateReward.id) {
-          return updateReward
-        }
+    const {
+      isOpen: isRewardDeleteOpen,
+      onClose: onRewardDeleteClose,
+      onOpen: openRewardDelete,
+    } = useDisclosure()
 
-        return reward
-      })
-      updateProject({ rewards: newRewards } as Project)
-    }
-  }
+    const [updateRewardMutation] = useMutation(MUTATION_UPDATE_PROJECT_REWARD)
 
-  const handleRemoveReward = async (id?: number) => {
-    if (!id) {
-      return
+    if (!project) {
+      return null
     }
 
-    try {
+    const triggerRewardRemoval = (id?: number) => {
       const currentReward = project.rewards?.find((reward) => reward?.id === id)
+      if (!currentReward) {
+        return
+      }
 
-      await updateRewardMutation({
-        variables: {
-          input: {
-            projectRewardId: toInt(id),
-            deleted: true,
-            name: currentReward?.name,
-            cost: currentReward?.cost,
-            costCurrency: RewardCurrency.Usdcent,
+      setSelectedReward(currentReward)
+      openRewardDelete()
+    }
+
+    const handleRewardUpdate = (
+      updateReward: ProjectRewardForCreateUpdateFragment,
+    ) => {
+      const findReward = project.rewards?.find(
+        (reward) => reward?.id === updateReward.id,
+      )
+
+      if (findReward) {
+        const newRewards = project.rewards?.map((reward) => {
+          if (reward?.id === updateReward.id) {
+            return updateReward
+          }
+
+          return reward
+        })
+        updateProject({ rewards: newRewards } as Project)
+      }
+    }
+
+    const handleRemoveReward = async (id?: number) => {
+      if (!id) {
+        return
+      }
+
+      try {
+        const currentReward = project.rewards?.find(
+          (reward) => reward?.id === id,
+        )
+
+        await updateRewardMutation({
+          variables: {
+            input: {
+              projectRewardId: toInt(id),
+              deleted: true,
+              name: currentReward?.name,
+              cost: currentReward?.cost,
+              costCurrency: RewardCurrency.Usdcent,
+            },
           },
-        },
-      })
-      const newRewards = project.rewards?.filter((reward) => reward?.id !== id)
-      updateProject({ rewards: newRewards || [] } as Project)
-
-      onRewardDeleteClose()
-
-      toast({
-        title: 'Successfully removed!',
-        description: `Reward ${currentReward?.name} was successfully removed`,
-        status: 'success',
-      })
-    } catch (error) {
-      toast({
-        title: 'Failed to remove reward',
-        description: `${error}`,
-        status: 'error',
-      })
+        })
+        const newRewards = project.rewards?.filter(
+          (reward) => reward?.id !== id,
+        )
+        updateProject({ rewards: newRewards || [] } as Project)
+
+        onRewardDeleteClose()
+
+        toast({
+          title: 'Successfully removed!',
+          description: `Reward ${currentReward?.name} was successfully removed`,
+          status: 'success',
+        })
+      } catch (error) {
+        toast({
+          title: 'Failed to remove reward',
+          description: `${error}`,
+          status: 'error',
+        })
+      }
     }
-  }
 
-  const renderRewards = () => {
-    if (project.rewards && project.rewards.length > 0) {
-      return project.rewards.map((reward) => {
-        if (reward) {
+    const renderRewards = () => {
+      if (project.rewards && project.rewards.length > 0) {
+        return project.rewards.filter(truthyFilter).map((reward) => {
           return (
-            <GridItem key={reward.id} colSpan={isSmallerThan1302 ? 2 : 1}>
+            <HStack
+              key={reward.id}
+              height="100%"
+              spacing="20px"
+              alignItems="stretch"
+              justifyContent="stretch"
+            >
               <RewardCard
                 maxWidth="350px"
                 key={reward.id}
                 width="100%"
+                mx={2}
                 reward={reward}
                 isSatoshi={false}
                 handleEdit={
@@ -166,62 +172,56 @@ export const Rewards = ({ fundState, updateReward }: Props) => {
                   }
                 }}
               />
-            </GridItem>
+            </HStack>
           )
-        }
-      })
+        })
+      }
+
+      return (
+        <GridItem colSpan={isMobile ? 2 : 1}>
+          <Text>There are no rewards available.</Text>
+        </GridItem>
+      )
+    }
+
+    if (!rewardsLength) {
+      return null
     }
 
     return (
-      <GridItem colSpan={isMobile ? 2 : 1}>
-        <Text>There are no rewards available.</Text>
-      </GridItem>
-    )
-  }
-
-  if (!isRewardBased) {
-    return null
-  }
-
-  return (
-    <>
-      <CardLayout
-        id={ID.project.view.rewards}
-        width="100%"
-        flexDirection="column"
-        alignItems="flex-start"
-        spacing="25px"
-        padding="24px"
-      >
-        <ProjectSectionBar name={'Rewards'} number={rewardsLength} />
-
-        <HStack width="100%" justifyContent="center">
-          <SimpleGrid
-            columns={isSmallerThan1302 ? 1 : 2}
-            spacingX="20px"
-            spacingY="20px"
-          >
+      <>
+        <CardLayout
+          ref={ref}
+          width="100%"
+          flexDirection="column"
+          alignItems="flex-start"
+          spacing="25px"
+          padding="24px"
+        >
+          <ProjectSectionBar name={'Rewards'} number={rewardsLength} />
+
+          <HStack width="100%" justifyContent="center">
             {renderRewards()}
-          </SimpleGrid>
-        </HStack>
-      </CardLayout>
-      {isRewardOpen && (
-        <RewardAdditionModal
-          isOpen={isRewardOpen}
-          onClose={onRewardClose}
-          reward={selectedReward}
-          onSubmit={handleRewardUpdate}
-          isSatoshi={false}
-          projectId={parseInt(`${project.id}`, 10)}
+          </HStack>
+        </CardLayout>
+        {isRewardOpen && (
+          <RewardAdditionModal
+            isOpen={isRewardOpen}
+            onClose={onRewardClose}
+            reward={selectedReward}
+            onSubmit={handleRewardUpdate}
+            isSatoshi={false}
+            projectId={parseInt(`${project.id}`, 10)}
+          />
+        )}
+        <DeleteConfirmModal
+          isOpen={isRewardDeleteOpen}
+          onClose={onRewardDeleteClose}
+          title={`Delete reward ${selectedReward?.name}`}
+          description={'Are you sure you want to remove the reward'}
+          confirm={() => handleRemoveReward(selectedReward?.id)}
         />
-      )}
-      <DeleteConfirmModal
-        isOpen={isRewardDeleteOpen}
-        onClose={onRewardDeleteClose}
-        title={`Delete reward ${selectedReward?.name}`}
-        description={'Are you sure you want to remove the reward'}
-        confirm={() => handleRemoveReward(selectedReward?.id)}
-      />
-    </>
-  )
-}
+      </>
+    )
+  },
+)
diff --git a/src/pages/projectView/projectMainBody/sections/SectionNav.tsx b/src/pages/projectView/projectMainBody/sections/SectionNav.tsx
index a19655fd1..5f4291695 100644
--- a/src/pages/projectView/projectMainBody/sections/SectionNav.tsx
+++ b/src/pages/projectView/projectMainBody/sections/SectionNav.tsx
@@ -1,34 +1,20 @@
 import { Badge, Button, HStack, VStack } from '@chakra-ui/react'
 
-import { ID } from '../../../../constants'
 import { useProjectContext } from '../../../../context'
+import { UseProjectAnchors } from '../../projectNavigation/hooks/useProjectAnchors'
 
-export const SectionNav = () => {
+export const SectionNav = ({
+  entriesLength,
+  rewardsLength,
+  milestonesLength,
+  onEntriesClick,
+  onRewardsClick,
+  onMilestonesClick,
+}: UseProjectAnchors) => {
   const { project } = useProjectContext()
 
-  const entriesLength = project.entries ? project.entries.length : 0
-  const rewardsLength = project.rewards ? project.rewards.length : 0
-  const milestoneLength = project.milestones ? project.milestones.length : 0
-
-  const handleEntriesClick = () => {
-    const entriesElement = document.getElementById(ID.project.view.entries)
-    if (entriesElement) {
-      entriesElement.scrollIntoView({ behavior: 'smooth' })
-    }
-  }
-
-  const handleRewardsClick = () => {
-    const rewardsRef = document.getElementById(ID.project.view.rewards)
-    if (rewardsRef) {
-      rewardsRef.scrollIntoView({ behavior: 'smooth' })
-    }
-  }
-
-  const handleMilestonesClick = () => {
-    const milestonesRef = document.getElementById(ID.project.view.milestones)
-    if (milestonesRef) {
-      milestonesRef.scrollIntoView({ behavior: 'smooth' })
-    }
+  if (!project) {
+    return null
   }
 
   return (
@@ -38,7 +24,7 @@ export const SectionNav = () => {
           <Button
             background="none"
             rightIcon={<Badge>{entriesLength}</Badge>}
-            onClick={handleEntriesClick}
+            onClick={onEntriesClick}
           >
             Entries
           </Button>
@@ -47,16 +33,16 @@ export const SectionNav = () => {
           <Button
             background="none"
             rightIcon={<Badge>{rewardsLength}</Badge>}
-            onClick={handleRewardsClick}
+            onClick={onRewardsClick}
           >
             Rewards
           </Button>
         )}
-        {milestoneLength && (
+        {milestonesLength && (
           <Button
             background="none"
-            rightIcon={<Badge>{milestoneLength}</Badge>}
-            onClick={handleMilestonesClick}
+            rightIcon={<Badge>{milestonesLength}</Badge>}
+            onClick={onMilestonesClick}
           >
             Milestones
           </Button>
diff --git a/src/pages/projectView/projectMainBody/sections/Summary.tsx b/src/pages/projectView/projectMainBody/sections/Summary.tsx
index 2a04108f4..9390d2a2b 100644
--- a/src/pages/projectView/projectMainBody/sections/Summary.tsx
+++ b/src/pages/projectView/projectMainBody/sections/Summary.tsx
@@ -10,7 +10,7 @@ import {
   Wrap,
 } from '@chakra-ui/react'
 import { DateTime } from 'luxon'
-import { useState } from 'react'
+import { forwardRef, useState } from 'react'
 import { AiOutlineCalendar } from 'react-icons/ai'
 import { CgProfile } from 'react-icons/cg'
 import { FiTag } from 'react-icons/fi'
@@ -38,12 +38,17 @@ import {
   TagBox,
 } from '../components'
 
-export const Summary = () => {
+export const Summary = forwardRef<HTMLDivElement>((_props, ref) => {
   const isMobile = useMobileMode()
 
   const { project, isProjectOwner } = useProjectContext()
 
   const [hasCopiedSharingLink, setHasCopiedSharingLink] = useState(false)
+
+  if (!project) {
+    return null
+  }
+
   const owner = project.owners[0]
 
   const handleShareButtonTapped = () => {
@@ -58,6 +63,7 @@ export const Summary = () => {
       <VStack position="relative">
         <Box
           width="100%"
+          ref={ref}
           height="230px"
           overflow="hidden"
           backgroundColor="white"
@@ -271,7 +277,7 @@ export const Summary = () => {
       </VStack>
     </CardLayout>
   )
-}
+})
 
 const greenBorderButtonStyles: ButtonProps = {
   size: 'sm',
diff --git a/src/pages/projectView/projectNavigation/components/ProjectBackButton.tsx b/src/pages/projectView/projectNavigation/components/ProjectBackButton.tsx
new file mode 100644
index 000000000..50a11da46
--- /dev/null
+++ b/src/pages/projectView/projectNavigation/components/ProjectBackButton.tsx
@@ -0,0 +1,30 @@
+import { Button, ButtonProps } from '@chakra-ui/react'
+import { BsArrowLeft } from 'react-icons/bs'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { getPath } from '../../../../constants'
+
+export const ProjectBackButton = (props: ButtonProps) => {
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const handleGoBack = () => {
+    if (location.key) {
+      navigate(-1)
+    } else {
+      navigate(getPath('landingPage'))
+    }
+  }
+
+  return (
+    <Button
+      variant="containedClear"
+      size="sm"
+      leftIcon={<BsArrowLeft fontSize="20px" />}
+      onClick={handleGoBack}
+      {...props}
+    >
+      Back
+    </Button>
+  )
+}
diff --git a/src/pages/projectView/projectNavigation/components/ProjectMobileNavigation.tsx b/src/pages/projectView/projectNavigation/components/ProjectMobileNavigation.tsx
new file mode 100644
index 000000000..a0313d51d
--- /dev/null
+++ b/src/pages/projectView/projectNavigation/components/ProjectMobileNavigation.tsx
@@ -0,0 +1,37 @@
+import { Button, HStack } from '@chakra-ui/react'
+import { BsLightningChargeFill } from 'react-icons/bs'
+
+import { MobileViews, useProjectContext } from '../../../../context'
+import { isActive, useMobileMode } from '../../../../utils'
+import { ProjectBackButton } from './ProjectBackButton'
+
+export const ProjectMobileNavigation = () => {
+  const { mobileView, project, setMobileView } = useProjectContext()
+
+  const isMobile = useMobileMode()
+
+  if (
+    !project ||
+    (isMobile && mobileView && mobileView !== MobileViews.description)
+  ) {
+    return null
+  }
+
+  const isFundingDisabled = !isActive(project.status)
+
+  return (
+    <HStack padding="10px 10px 2px 10px">
+      <ProjectBackButton />
+      <Button
+        size="sm"
+        flexGrow={1}
+        variant="contained"
+        isDisabled={isFundingDisabled}
+        leftIcon={<BsLightningChargeFill />}
+        onClick={() => setMobileView(MobileViews.funding)}
+      >
+        Contribute
+      </Button>
+    </HStack>
+  )
+}
diff --git a/src/pages/projectView/projectNavigation/components/ProjectNavigation.tsx b/src/pages/projectView/projectNavigation/components/ProjectNavigation.tsx
new file mode 100644
index 000000000..74eb0dbff
--- /dev/null
+++ b/src/pages/projectView/projectNavigation/components/ProjectNavigation.tsx
@@ -0,0 +1,82 @@
+import { Button, ButtonProps, VStack } from '@chakra-ui/react'
+import { PropsWithChildren } from 'react'
+
+import { EntryEditIcon, RewardGiftIcon } from '../../../../components/icons'
+import { MilestoneIcon } from '../../../../components/icons/svg'
+import { ProjectIcon } from '../../../../components/icons/svg/ProjectIcon'
+import { CardLayout } from '../../../../components/layouts'
+import { H3 } from '../../../../components/typography'
+import { UseProjectAnchors } from '../hooks/useProjectAnchors'
+import { ProjectBackButton } from './ProjectBackButton'
+
+export const ProjectNavigation = ({
+  entriesLength,
+  rewardsLength,
+  milestonesLength,
+  onProjectClick,
+  onEntriesClick,
+  onRewardsClick,
+  onMilestonesClick,
+}: UseProjectAnchors) => {
+  return (
+    <VStack ml={4} pt={5} pb={2}>
+      <ProjectBackButton width="100%" />
+      <CardLayout>
+        <VStack maxWidth="100%">
+          <ProjectNavigationButton
+            // isActive={inView === 'header'}
+            onClick={onProjectClick}
+            leftIcon={<ProjectIcon />}
+          >
+            Project
+          </ProjectNavigationButton>
+          {Boolean(entriesLength) && (
+            <ProjectNavigationButton
+              // isActive={inView === 'entries'}
+              onClick={onEntriesClick}
+              leftIcon={<EntryEditIcon />}
+            >
+              Entries
+            </ProjectNavigationButton>
+          )}
+          {Boolean(rewardsLength) && (
+            <ProjectNavigationButton
+              // isActive={inView === 'rewards'}
+              onClick={onRewardsClick}
+              leftIcon={<RewardGiftIcon />}
+            >
+              Rewards
+            </ProjectNavigationButton>
+          )}
+          {Boolean(milestonesLength) && (
+            <ProjectNavigationButton
+              // isActive={inView === 'milestones'}
+              onClick={onMilestonesClick}
+              leftIcon={<MilestoneIcon />}
+            >
+              Milestones
+            </ProjectNavigationButton>
+          )}
+        </VStack>
+      </CardLayout>
+    </VStack>
+  )
+}
+
+export const ProjectNavigationButton = ({
+  children,
+  ...props
+}: PropsWithChildren<
+  Pick<ButtonProps, 'leftIcon' | 'onClick' | 'isActive'>
+>) => {
+  return (
+    <Button
+      justifyContent="start"
+      width="100%"
+      variant="transparent"
+      {...props}
+    >
+      <H3 pl={1}>{children}</H3>
+    </Button>
+  )
+}
diff --git a/src/pages/projectView/projectNavigation/hooks/useProjectAnchors.tsx b/src/pages/projectView/projectNavigation/hooks/useProjectAnchors.tsx
new file mode 100644
index 000000000..0fb83c70b
--- /dev/null
+++ b/src/pages/projectView/projectNavigation/hooks/useProjectAnchors.tsx
@@ -0,0 +1,104 @@
+import { RefObject, useCallback, useMemo } from 'react'
+
+// import { useOnScreen } from '../../../../hooks/useOnScreen'
+import { ProjectFragment } from '../../../../types'
+
+export type ProjectAnchorRefs = {
+  header: RefObject<HTMLDivElement>
+  entries: RefObject<HTMLDivElement>
+  rewards: RefObject<HTMLDivElement>
+  milestones: RefObject<HTMLDivElement>
+}
+
+export type UseProjectAnchors = {
+  // inView: keyof ProjectAnchorRefs
+  // refInView: RefObject<HTMLDivElement>
+  entriesLength: number
+  rewardsLength: number
+  milestonesLength: number
+  onProjectClick(): void
+  onEntriesClick(): void
+  onRewardsClick(): void
+  onMilestonesClick(): void
+}
+
+export const useProjectAnchors = (
+  project: Pick<
+    ProjectFragment,
+    'entries' | 'rewards' | 'milestones'
+  > | null = null,
+  refs: ProjectAnchorRefs,
+): UseProjectAnchors => {
+  // const isHeaderView = useOnScreen(refs.header)
+  // const isEntriesView = useOnScreen(refs.entries)
+  // const isRewardsView = useOnScreen(refs.rewards)
+  // const isMilestonesView = useOnScreen(refs.milestones)
+
+  const entriesLength = useMemo(
+    () => (project && project.entries ? project.entries.length : 0),
+    [project],
+  )
+  const rewardsLength = useMemo(
+    () => (project && project.rewards ? project.rewards.length : 0),
+    [project],
+  )
+  const milestonesLength = useMemo(
+    () => (project && project.milestones ? project.milestones.length : 0),
+    [project],
+  )
+
+  const onProjectClick = useCallback(() => {
+    refs.header.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [refs.header])
+
+  const onEntriesClick = useCallback(() => {
+    refs.entries.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [refs.entries])
+
+  const onRewardsClick = useCallback(() => {
+    refs.rewards.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [refs.rewards])
+
+  const onMilestonesClick = useCallback(() => {
+    refs.milestones.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [refs.milestones])
+
+  // const [inView, refInView] = useMemo((): [
+  //   keyof ProjectAnchorRefs,
+  //   RefObject<HTMLDivElement>,
+  // ] => {
+  //   if (isHeaderView) {
+  //     return ['header', refs.header]
+  //   }
+
+  //   if (isEntriesView) {
+  //     return ['entries', refs.entries]
+  //   }
+
+  //   if (isRewardsView) {
+  //     return ['rewards', refs.rewards]
+  //   }
+
+  //   return ['milestones', refs.milestones]
+  // }, [
+  //   isEntriesView,
+  //   isHeaderView,
+  //   isRewardsView,
+  //   refs.entries,
+  //   refs.header,
+  //   refs.milestones,
+  //   refs.rewards,
+  // ])
+
+  return {
+    // inView,
+    // refInView,
+    entriesLength,
+    rewardsLength,
+    milestonesLength,
+    onProjectClick,
+    onEntriesClick,
+    onRewardsClick,
+    onMilestonesClick,
+  }
+}
diff --git a/src/types/generated/graphql.ts b/src/types/generated/graphql.ts
index 9ffd824a0..9cacd2f74 100644
--- a/src/types/generated/graphql.ts
+++ b/src/types/generated/graphql.ts
@@ -315,6 +315,7 @@ export type FunderReward = {
 
 export type FundingCancelInput = {
   address?: InputMaybe<Scalars['String']>
+  failureReason?: InputMaybe<Scalars['String']>
   id?: InputMaybe<Scalars['BigInt']>
   invoiceId?: InputMaybe<Scalars['String']>
 }
@@ -788,6 +789,7 @@ export type Mutation = {
   fundingPend: FundingPendingResponse
   grantApply: GrantApplicant
   projectFollow: Scalars['Boolean']
+  projectStatusUpdate: Project
   projectTagAdd: Array<Tag>
   projectTagRemove: Array<Tag>
   projectUnfollow: Scalars['Boolean']
@@ -879,6 +881,10 @@ export type MutationProjectFollowArgs = {
   input: ProjectFollowMutationInput
 }
 
+export type MutationProjectStatusUpdateArgs = {
+  input: ProjectStatusUpdate
+}
+
 export type MutationProjectTagAddArgs = {
   input: ProjectTagMutationInput
 }
@@ -973,6 +979,8 @@ export type Project = {
   ambassadors: Array<Maybe<Ambassador>>
   /** Total amount raised by the project, in satoshis. */
   balance: Scalars['Int']
+  /** Boolean flag to indicate if the project can be deleted. */
+  canDelete: Scalars['Boolean']
   createdAt: Scalars['String']
   /** Description of the project. */
   description?: Maybe<Scalars['description_String_maxLength_2200']>
@@ -1102,6 +1110,11 @@ export enum ProjectStatus {
   Inactive = 'inactive',
 }
 
+export type ProjectStatusUpdate = {
+  projectId: Scalars['BigInt']
+  status: ProjectStatus
+}
+
 export type ProjectTagMutationInput = {
   projectId: Scalars['BigInt']
   tagId: Scalars['Int']
@@ -1406,7 +1419,10 @@ export type UpdateProjectInput = {
   shortDescription?: InputMaybe<
     Scalars['shortDescription_String_maxLength_500']
   >
-  /** Current status of the project */
+  /**
+   * Current status of the project
+   * @deprecated Use the projectStatusUpdate mutation instead
+   */
   status?: InputMaybe<ProjectStatus>
   /** Project header image. */
   thumbnailImage?: InputMaybe<Scalars['String']>
@@ -1871,6 +1887,7 @@ export type ResolversTypes = {
   ProjectReward: ResolverTypeWrapper<ProjectReward>
   ProjectStatistics: ResolverTypeWrapper<ProjectStatistics>
   ProjectStatus: ProjectStatus
+  ProjectStatusUpdate: ProjectStatusUpdate
   ProjectTagMutationInput: ProjectTagMutationInput
   ProjectType: ProjectType
   ProjectWhereInput: ProjectWhereInput
@@ -2119,6 +2136,7 @@ export type ResolversParentTypes = {
   ProjectRegionsGetResult: ProjectRegionsGetResult
   ProjectReward: ProjectReward
   ProjectStatistics: ProjectStatistics
+  ProjectStatusUpdate: ProjectStatusUpdate
   ProjectTagMutationInput: ProjectTagMutationInput
   ProjectWhereInput: ProjectWhereInput
   ProjectsGetQueryInput: ProjectsGetQueryInput
@@ -2826,6 +2844,12 @@ export type MutationResolvers<
     ContextType,
     RequireFields<MutationProjectFollowArgs, 'input'>
   >
+  projectStatusUpdate?: Resolver<
+    ResolversTypes['Project'],
+    ParentType,
+    ContextType,
+    RequireFields<MutationProjectStatusUpdateArgs, 'input'>
+  >
   projectTagAdd?: Resolver<
     Array<ResolversTypes['Tag']>,
     ParentType,
@@ -2946,6 +2970,7 @@ export type ProjectResolvers<
     ContextType
   >
   balance?: Resolver<ResolversTypes['Int'], ParentType, ContextType>
+  canDelete?: Resolver<ResolversTypes['Boolean'], ParentType, ContextType>
   createdAt?: Resolver<ResolversTypes['String'], ParentType, ContextType>
   description?: Resolver<
     Maybe<ResolversTypes['description_String_maxLength_2200']>,
@@ -3880,6 +3905,31 @@ export type DirectiveResolvers<ContextType = any> = {
   constraint?: ConstraintDirectiveResolver<any, any, ContextType>
 }
 
+export type EntryFragment = {
+  __typename?: 'Entry'
+  id: any
+  title: any
+  description: any
+  image?: string | null
+  published: boolean
+  content?: string | null
+  createdAt: string
+  updatedAt: string
+  publishedAt?: string | null
+  status: EntryStatus
+  fundersCount: number
+  amountFunded: number
+  type: EntryType
+  creator: { __typename?: 'User' } & UserForAvatarFragment
+  project?: {
+    __typename?: 'Project'
+    id: any
+    title: any
+    name: any
+    image?: string | null
+  } | null
+}
+
 export type EntryForLandingPageFragment = {
   __typename?: 'Entry'
   amountFunded: number
@@ -3895,12 +3945,7 @@ export type EntryForLandingPageFragment = {
     thumbnailImage?: string | null
     title: any
   } | null
-  creator: {
-    __typename?: 'User'
-    id: any
-    imageUrl?: string | null
-    username: string
-  }
+  creator: { __typename?: 'User' } & UserForAvatarFragment
 }
 
 export type EntryForProjectFragment = {
@@ -3916,12 +3961,7 @@ export type EntryForProjectFragment = {
   status: EntryStatus
   createdAt: string
   publishedAt?: string | null
-  creator: {
-    __typename?: 'User'
-    id: any
-    username: string
-    imageUrl?: string | null
-  }
+  creator: { __typename?: 'User' } & UserForAvatarFragment
 }
 
 export type FundingTxForLandingPageFragment = {
@@ -4194,6 +4234,13 @@ export type ProjectFragment = {
   }>
 }
 
+export type UserForAvatarFragment = {
+  __typename?: 'User'
+  id: any
+  imageUrl?: string | null
+  username: string
+}
+
 export type UserBadgeAwardMutationVariables = Exact<{
   userBadgeId: Scalars['BigInt']
 }>
@@ -4353,6 +4400,7 @@ export type CreateProjectMutation = {
         id: any
         ownerOf: Array<{
           __typename?: 'OwnerOf'
+          owner?: { __typename?: 'Owner'; id: any } | null
           project?: { __typename?: 'Project'; id: any } | null
         } | null>
       }
@@ -4639,28 +4687,7 @@ export type EntryQueryVariables = Exact<{
 
 export type EntryQuery = {
   __typename?: 'Query'
-  entry?: {
-    __typename?: 'Entry'
-    id: any
-    title: any
-    description: any
-    image?: string | null
-    published: boolean
-    content?: string | null
-    createdAt: string
-    updatedAt: string
-    publishedAt?: string | null
-    status: EntryStatus
-    fundersCount: number
-    type: EntryType
-    creator: {
-      __typename?: 'User'
-      id: any
-      username: string
-      imageUrl?: string | null
-    }
-    project?: { __typename?: 'Project'; id: any; title: any; name: any } | null
-  } | null
+  entry?: ({ __typename?: 'Entry' } & EntryFragment) | null
 }
 
 export type EntryForLandingPageQueryVariables = Exact<{
@@ -5414,6 +5441,40 @@ export type ActivityCreatedSubscription = {
     | ({ __typename?: 'ProjectReward' } & ProjectRewardForLandingPageFragment)
 }
 
+export const UserForAvatarFragmentDoc = gql`
+  fragment UserForAvatar on User {
+    id
+    imageUrl
+    username
+  }
+`
+export const EntryFragmentDoc = gql`
+  fragment Entry on Entry {
+    id
+    title
+    description
+    image
+    published
+    content
+    createdAt
+    updatedAt
+    publishedAt
+    status
+    fundersCount
+    amountFunded
+    type
+    creator {
+      ...UserForAvatar
+    }
+    project {
+      id
+      title
+      name
+      image
+    }
+  }
+  ${UserForAvatarFragmentDoc}
+`
 export const FundingTxWithInvoiceStatusFragmentDoc = gql`
   fragment FundingTxWithInvoiceStatus on FundingTx {
     id
@@ -5481,11 +5542,10 @@ export const EntryForProjectFragmentDoc = gql`
     createdAt
     publishedAt
     creator {
-      id
-      username
-      imageUrl
+      ...UserForAvatar
     }
   }
+  ${UserForAvatarFragmentDoc}
 `
 export const ProjectFragmentDoc = gql`
   fragment Project on Project {
@@ -5613,11 +5673,10 @@ export const EntryForLandingPageFragmentDoc = gql`
       title
     }
     creator {
-      id
-      imageUrl
-      username
+      ...UserForAvatar
     }
   }
+  ${UserForAvatarFragmentDoc}
 `
 export const ProjectForLandingPageFragmentDoc = gql`
   fragment ProjectForLandingPage on Project {
@@ -6290,6 +6349,9 @@ export const CreateProjectDocument = gql`
         user {
           id
           ownerOf {
+            owner {
+              id
+            }
             project {
               id
             }
@@ -7369,30 +7431,10 @@ export type UserBadgesQueryResult = Apollo.QueryResult<
 export const EntryDocument = gql`
   query Entry($id: BigInt!) {
     entry(id: $id) {
-      id
-      title
-      description
-      image
-      published
-      content
-      createdAt
-      updatedAt
-      publishedAt
-      status
-      fundersCount
-      type
-      creator {
-        id
-        username
-        imageUrl
-      }
-      project {
-        id
-        title
-        name
-      }
+      ...Entry
     }
   }
+  ${EntryFragmentDoc}
 `
 
 /**
diff --git a/src/utils/validations/checkKeyValueExists.ts b/src/utils/validations/checkKeyValueExists.ts
index 65b448122..b851b6607 100644
--- a/src/utils/validations/checkKeyValueExists.ts
+++ b/src/utils/validations/checkKeyValueExists.ts
@@ -26,7 +26,7 @@ export const checkKeyValueExists = (
 
 export const checkDiff = <T extends {}>(
   val1: T,
-  val2: T,
+  val2: Partial<T>,
   keys?: (keyof T)[],
 ): boolean => {
   const loopVal =