peeldao · wraeth-eth · Nov 10, 2023
diff --git a/src/app/_components/ClientRootComponents.tsx b/src/app/_components/ClientRootComponents.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import { Toaster } from '@/components/ui/Toaster'
+import { useInstallJuicecrowdWindowObject } from '@/hooks/useInstallJuicecrowdWindowObject'
+
+/**
+ * Root components that are only rendered on the client.
+ */
+export const ClientRootComponents = () => {
+  useInstallJuicecrowdWindowObject()
+  return <Toaster />
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,20 @@
+import { fonts } from '@/lib/fonts'
+import '../styles/globals.scss'
+import { ClientRootComponents } from './_components/ClientRootComponents'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body
+        className={`${fonts.beatrice.variable} ${fonts.agrandir.variable} ${fonts.agrandirWide.variable} font-body text-base md:text-sm`}
+      >
+        {children}
+        <ClientRootComponents />
+      </body>
+    </html>
+  )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -0,0 +1,10 @@
+import { LandingPage } from '@/components/Landing'
+import { Layout } from '@/components/layout'
+
+export default function Page() {
+  return (
+    <Layout>
+      <LandingPage />
+    </Layout>
+  )
+}
diff --git a/src/components/ConnectKitButton.tsx b/src/components/ConnectKitButton.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { ConnectKitButton as _ConnectKitButton } from 'connectkit'
 import { Button, buttonVariants } from './ui/Button'
 import { VariantProps } from 'class-variance-authority'

diff --git a/src/components/Landing/components/JuicecrowdCTA.tsx b/src/components/Landing/components/JuicecrowdCTA.tsx
@@ -1,14 +1,13 @@
+'use client'
+
 import { Link } from '@/components/Link'
 import { EthereumIconFilled } from '@/components/icon/EthereumIconFilled'
 import { Button } from '@/components/ui/Button'
 import {
   JC01SubmissionsClosed,
-  JC01_DATES,
   JC01_DATE_STRINGS,
 } from '@/lib/constants/crowds'
-import { dateToCountdownString } from '@/lib/date/format'
 import Image from 'next/image'
-import { useEffect, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 export type JuicecrowdCTAProps = {

diff --git a/src/components/Landing/components/StayInLoopSection.tsx b/src/components/Landing/components/StayInLoopSection.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useState } from 'react'
 import { Input } from '@/components/Input'
 import { twMerge } from 'tailwind-merge'

diff --git a/src/components/layout/AppProvider.tsx b/src/components/layout/AppProvider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import {
   JBProjectMetadataProvider,
   _JBProjectMetadata,

diff --git a/src/components/layout/Navbar/components/MinimalNavbar.tsx b/src/components/layout/Navbar/components/MinimalNavbar.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { ConnectKitButton } from '@/components/ConnectKitButton'
 import { Button } from '@/components/ui/Button'
 import { useJbProject } from '@/hooks/useJbProject'

diff --git a/src/components/layout/Navbar/components/MobileNavbar.tsx b/src/components/layout/Navbar/components/MobileNavbar.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { Link } from '@/components/Link'
 import Logo from '@/components/Logo'
 import { CoinLogo } from '@/components/icon/CoinLogo'

diff --git a/src/hooks/useInstallJuicecrowdWindowObject.ts b/src/hooks/useInstallJuicecrowdWindowObject.ts
@@ -0,0 +1,10 @@
+'use client'
+
+import { installJuicecrowdWindowObject } from '@/lib/featureFlags'
+import { useEffect } from 'react'
+
+export const useInstallJuicecrowdWindowObject = () => {
+  useEffect(() => {
+    installJuicecrowdWindowObject()
+  }, [])
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx