Merge pull request #3437 from Giveth/fix-hydration-error

fix torus banner hydration error
Giveth · Nov 29, 2023 · bb28673 · bb28673
2 parents 1f348a6 + 4173577
commit bb28673
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/src/components/views/homepage/HomeIndex.tsx b/src/components/views/homepage/HomeIndex.tsx
@@ -17,10 +17,9 @@ import { useAppSelector } from '@/features/hooks';
 import { client } from '@/apollo/apolloClient';
 import { FETCH_HOMEPAGE_DATA } from '@/apollo/gql/gqlHomePage';
 import { LatestUpdatesBlock } from './latestUpdates/LatestUpdatesBlock';
-import TorusBanner from '@/components/views/homepage/TorusBanner';
 import StorageLabel from '@/lib/localStorage';
-import { isSSRMode } from '@/lib/helpers';
 import GitcoinGrantsBanner from '@/components/views/homepage/GitcoinGrantsBanner';
+import TorusBanner from './TorusBanner';
 
 const HomeIndex: FC<IHomeRoute> = props => {
 	const {
@@ -30,6 +29,7 @@ const HomeIndex: FC<IHomeRoute> = props => {
 		...rest
 	} = props;
 	const [campaigns, setCampaigns] = useState(campaignsFromServer);
+	const [showTorusBanner, setShowTorusBanner] = useState(false);
 	const [featuredProjects, setFeaturedProjects] = useState(
 		featuredProjectsFromServer,
 	);
@@ -58,9 +58,11 @@ const HomeIndex: FC<IHomeRoute> = props => {
 		}
 		fetchFeaturedUpdateProjects();
 	}, [userData?.id]);
-
-	const showTorusBanner =
-		!isSSRMode && !localStorage.getItem(StorageLabel.TORUS_BANNER_VIEWED);
+	useEffect(() => {
+		setShowTorusBanner(
+			!localStorage.getItem(StorageLabel.TORUS_BANNER_VIEWED),
+		);
+	}, []);
 
 	return (
 		<Wrapper>