From 52abba5f4fd7ff09eca11623293367e78d0c4fe8 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Thu, 15 Feb 2024 22:34:00 -0500
Subject: [PATCH] remove ClientOnly

---
 app/create/page.tsx                           |  13 +-
 app/daos/[daoAddress]/hierarchy/page.tsx      |   5 +-
 app/daos/[daoAddress]/layout.tsx              |   7 +-
 app/daos/[daoAddress]/new/page.tsx            |  15 +-
 app/daos/[daoAddress]/page.tsx                |   6 +-
 .../proposal-templates/new/page.tsx           | 223 +++++++-------
 .../[daoAddress]/proposal-templates/page.tsx  |   5 +-
 .../proposals/[proposalId]/page.tsx           |   5 +-
 app/daos/[daoAddress]/proposals/new/page.tsx  | 203 +++++++------
 app/daos/[daoAddress]/proposals/page.tsx      |   5 +-
 app/daos/[daoAddress]/settings/page.tsx       |   7 +-
 app/daos/[daoAddress]/treasury/page.tsx       |   7 +-
 app/page.tsx                                  | 283 +++++++++---------
 src/components/ui/utils/ClientOnly.tsx        |  19 --
 14 files changed, 381 insertions(+), 422 deletions(-)
 delete mode 100644 src/components/ui/utils/ClientOnly.tsx

diff --git a/app/create/page.tsx b/app/create/page.tsx
index 2fe1bd9925..37dd6c358a 100644
--- a/app/create/page.tsx
+++ b/app/create/page.tsx
@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import DaoCreator from '../../src/components/DaoCreator';
 import { DAOCreateMode } from '../../src/components/DaoCreator/formComponents/EstablishEssentials';
-import ClientOnly from '../../src/components/ui/utils/ClientOnly';
 import { BASE_ROUTES, DAO_ROUTES } from '../../src/constants/routes';
 import { useAccountFavorites } from '../../src/hooks/DAO/loaders/useFavorites';
 import useDeployDAO from '../../src/hooks/DAO/useDeployDAO';
@@ -55,12 +54,10 @@ export default function DaoCreatePage() {
   };
 
   return (
-    <ClientOnly>
-      <DaoCreator
-        pending={pending || redirectPending}
-        deployDAO={deployDAO}
-        mode={DAOCreateMode.ROOTDAO}
-      />
-    </ClientOnly>
+    <DaoCreator
+      pending={pending || redirectPending}
+      deployDAO={deployDAO}
+      mode={DAOCreateMode.ROOTDAO}
+    />
   );
 }
diff --git a/app/daos/[daoAddress]/hierarchy/page.tsx b/app/daos/[daoAddress]/hierarchy/page.tsx
index c148044bcb..6e66e5d7af 100644
--- a/app/daos/[daoAddress]/hierarchy/page.tsx
+++ b/app/daos/[daoAddress]/hierarchy/page.tsx
@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import { DaoNode } from '../../../../src/components/pages/DaoHierarchy/DaoNode';
 import { BarLoader } from '../../../../src/components/ui/loaders/BarLoader';
 import PageHeader from '../../../../src/components/ui/page/Header/PageHeader';
-import ClientOnly from '../../../../src/components/ui/utils/ClientOnly';
 import { HEADER_HEIGHT } from '../../../../src/constants/common';
 import { useFractal } from '../../../../src/providers/App/AppProvider';
 
@@ -24,7 +23,7 @@ export default function HierarchyPage() {
   }
 
   return (
-    <ClientOnly>
+    <>
       <PageHeader
         title={t('headerTitle', {
           daoName,
@@ -41,6 +40,6 @@ export default function HierarchyPage() {
         daoAddress={nodeHierarchy.parentAddress || daoAddress}
         depth={0}
       />
-    </ClientOnly>
+    </>
   );
 }
diff --git a/app/daos/[daoAddress]/layout.tsx b/app/daos/[daoAddress]/layout.tsx
index 4f0f1a59f8..cf9577d046 100644
--- a/app/daos/[daoAddress]/layout.tsx
+++ b/app/daos/[daoAddress]/layout.tsx
@@ -1,12 +1,11 @@
 'use client';
 
-import { Button, Center, Text, VStack, ChakraProvider, extendTheme } from '@chakra-ui/react';
+import { Button, Center, Text, VStack, ChakraProvider, extendTheme, Box } from '@chakra-ui/react';
 import { theme } from '@decent-org/fractal-ui';
 import Script from 'next/script';
 import { ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useChainId, useClient } from 'wagmi';
-import ClientOnly from '../../../src/components/ui/utils/ClientOnly';
 import { APP_NAME } from '../../../src/constants/common';
 import useDAOController from '../../../src/hooks/DAO/useDAOController';
 import useDAOMetadata from '../../../src/hooks/DAO/useDAOMetadata';
@@ -125,7 +124,7 @@ export default function DaoPageLayout({
   }
 
   return (
-    <ClientOnly>
+    <Box>
       <title>{node?.daoName ? `${node.daoName} | ${APP_NAME}` : APP_NAME}</title>
       {node && node.daoAddress === '0x167bE4073f52aD2Aa0D6d6FeddF0F1f79a82B98e' && (
         <Script
@@ -143,6 +142,6 @@ export default function DaoPageLayout({
         </Script>
       )}
       {display}
-    </ClientOnly>
+    </Box>
   );
 }
diff --git a/app/daos/[daoAddress]/new/page.tsx b/app/daos/[daoAddress]/new/page.tsx
index 3ad9324976..0d72240327 100644
--- a/app/daos/[daoAddress]/new/page.tsx
+++ b/app/daos/[daoAddress]/new/page.tsx
@@ -4,7 +4,6 @@ import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import DaoCreator from '../../../../src/components/DaoCreator';
 import { DAOCreateMode } from '../../../../src/components/DaoCreator/formComponents/EstablishEssentials';
-import ClientOnly from '../../../../src/components/ui/utils/ClientOnly';
 import { DAO_ROUTES } from '../../../../src/constants/routes';
 import { useCreateSubDAOProposal } from '../../../../src/hooks/DAO/useCreateSubDAOProposal';
 import { useFractal } from '../../../../src/providers/App/AppProvider';
@@ -30,13 +29,11 @@ export default function SubDaoCreate() {
   };
 
   return (
-    <ClientOnly>
-      <DaoCreator
-        pending={pendingCreateTx || redirectPending}
-        deployDAO={proposeSubDAO}
-        isSubDAO={true}
-        mode={DAOCreateMode.SUBDAO}
-      />
-    </ClientOnly>
+    <DaoCreator
+      pending={pendingCreateTx || redirectPending}
+      deployDAO={proposeSubDAO}
+      isSubDAO={true}
+      mode={DAOCreateMode.SUBDAO}
+    />
   );
 }
diff --git a/app/daos/[daoAddress]/page.tsx b/app/daos/[daoAddress]/page.tsx
index e1054d30d3..6b27dd6dcb 100644
--- a/app/daos/[daoAddress]/page.tsx
+++ b/app/daos/[daoAddress]/page.tsx
@@ -1,10 +1,10 @@
 'use client';
 
+import { Box } from '@chakra-ui/react';
 import { Activities } from '../../../src/components/pages/DaoDashboard/Activities';
 import { ERCO20Claim } from '../../../src/components/pages/DaoDashboard/ERC20Claim';
 import { Info } from '../../../src/components/pages/DaoDashboard/Info';
 import InfoHeader from '../../../src/components/pages/DaoDashboard/Info/InfoHeader';
-import ClientOnly from '../../../src/components/ui/utils/ClientOnly';
 import useDAOMetadata from '../../../src/hooks/DAO/useDAOMetadata';
 
 export default function DaoDashboardPage() {
@@ -13,11 +13,11 @@ export default function DaoDashboardPage() {
   return (
     <>
       <InfoHeader />
-      <ClientOnly mt={!!daoMetadata ? 40 : 12}>
+      <Box mt={!!daoMetadata ? 40 : 12}>
         <Info />
         <ERCO20Claim />
         <Activities />
-      </ClientOnly>
+      </Box>
     </>
   );
 }
diff --git a/app/daos/[daoAddress]/proposal-templates/new/page.tsx b/app/daos/[daoAddress]/proposal-templates/new/page.tsx
index 87bfd7d7b8..5d009a43f7 100644
--- a/app/daos/[daoAddress]/proposal-templates/new/page.tsx
+++ b/app/daos/[daoAddress]/proposal-templates/new/page.tsx
@@ -13,7 +13,6 @@ import ProposalTemplateTransactionsForm from '../../../../../src/components/Crea
 import { DEFAULT_PROPOSAL_TEMPLATE } from '../../../../../src/components/CreateProposalTemplate/constants';
 import { CustomNonceInput } from '../../../../../src/components/ui/forms/CustomNonceInput';
 import PageHeader from '../../../../../src/components/ui/page/Header/PageHeader';
-import ClientOnly from '../../../../../src/components/ui/utils/ClientOnly';
 import { BACKGROUND_SEMI_TRANSPARENT } from '../../../../../src/constants/common';
 import { BASE_ROUTES, DAO_ROUTES } from '../../../../../src/constants/routes';
 import { logError } from '../../../../../src/helpers/errorLogging';
@@ -96,123 +95,121 @@ export default function CreateProposalTemplatePage() {
   }, [defaultProposalTemplatesHash, defaultProposalTemplateIndex, ipfsClient]);
 
   return (
-    <ClientOnly>
-      <Formik<CreateProposalTemplateForm>
-        validationSchema={createProposalTemplateValidation}
-        initialValues={initialProposalTemplate}
-        enableReinitialize
-        onSubmit={async values => {
-          if (canUserCreateProposal) {
-            const proposalData = await prepareProposalTemplateProposal(values);
-            if (proposalData) {
-              submitProposal({
-                proposalData,
-                nonce: values?.nonce,
-                pendingToastMessage: t('proposalCreatePendingToastMessage', { ns: 'proposal' }),
-                successToastMessage: t('proposalCreateSuccessToastMessage', { ns: 'proposal' }),
-                failedToastMessage: t('proposalCreateFailureToastMessage', { ns: 'proposal' }),
-                successCallback,
-              });
-            }
+    <Formik<CreateProposalTemplateForm>
+      validationSchema={createProposalTemplateValidation}
+      initialValues={initialProposalTemplate}
+      enableReinitialize
+      onSubmit={async values => {
+        if (canUserCreateProposal) {
+          const proposalData = await prepareProposalTemplateProposal(values);
+          if (proposalData) {
+            submitProposal({
+              proposalData,
+              nonce: values?.nonce,
+              pendingToastMessage: t('proposalCreatePendingToastMessage', { ns: 'proposal' }),
+              successToastMessage: t('proposalCreateSuccessToastMessage', { ns: 'proposal' }),
+              failedToastMessage: t('proposalCreateFailureToastMessage', { ns: 'proposal' }),
+              successCallback,
+            });
           }
-        }}
-      >
-        {(formikProps: FormikProps<CreateProposalTemplateForm>) => {
-          const { handleSubmit } = formikProps;
+        }
+      }}
+    >
+      {(formikProps: FormikProps<CreateProposalTemplateForm>) => {
+        const { handleSubmit } = formikProps;
 
-          return (
-            <form onSubmit={handleSubmit}>
-              <Box>
-                <PageHeader
-                  title={t('createProposalTemplate')}
-                  breadcrumbs={[
-                    {
-                      terminus: t('proposalTemplates', { ns: 'breadcrumbs' }),
-                      path: DAO_ROUTES.proposalTemplates.relative(daoAddress),
-                    },
-                    {
-                      terminus: t('proposalTemplateNew', { ns: 'breadcrumbs' }),
-                      path: '',
-                    },
-                  ]}
-                  ButtonIcon={Trash}
-                  buttonVariant="secondary"
-                  buttonClick={() =>
-                    push(
-                      daoAddress
-                        ? DAO_ROUTES.proposalTemplates.relative(daoAddress)
-                        : BASE_ROUTES.landing
-                    )
-                  }
-                  isButtonDisabled={pendingCreateTx}
-                />
-                <Grid
-                  gap={4}
-                  templateColumns={{ base: '1fr', lg: '2fr 1fr' }}
-                  gridTemplateRows={{ base: '1fr', lg: '5.1em 1fr' }}
-                  templateAreas={{
-                    base: templateAreaSingleCol,
-                    lg: templateAreaTwoCol,
-                  }}
-                >
-                  <GridItem area="content">
-                    <Flex
-                      flexDirection="column"
-                      align="left"
+        return (
+          <form onSubmit={handleSubmit}>
+            <Box>
+              <PageHeader
+                title={t('createProposalTemplate')}
+                breadcrumbs={[
+                  {
+                    terminus: t('proposalTemplates', { ns: 'breadcrumbs' }),
+                    path: DAO_ROUTES.proposalTemplates.relative(daoAddress),
+                  },
+                  {
+                    terminus: t('proposalTemplateNew', { ns: 'breadcrumbs' }),
+                    path: '',
+                  },
+                ]}
+                ButtonIcon={Trash}
+                buttonVariant="secondary"
+                buttonClick={() =>
+                  push(
+                    daoAddress
+                      ? DAO_ROUTES.proposalTemplates.relative(daoAddress)
+                      : BASE_ROUTES.landing
+                  )
+                }
+                isButtonDisabled={pendingCreateTx}
+              />
+              <Grid
+                gap={4}
+                templateColumns={{ base: '1fr', lg: '2fr 1fr' }}
+                gridTemplateRows={{ base: '1fr', lg: '5.1em 1fr' }}
+                templateAreas={{
+                  base: templateAreaSingleCol,
+                  lg: templateAreaTwoCol,
+                }}
+              >
+                <GridItem area="content">
+                  <Flex
+                    flexDirection="column"
+                    align="left"
+                  >
+                    <Box
+                      marginBottom="2rem"
+                      rounded="lg"
+                      p="1rem"
+                      bg={BACKGROUND_SEMI_TRANSPARENT}
                     >
-                      <Box
-                        marginBottom="2rem"
-                        rounded="lg"
-                        p="1rem"
-                        bg={BACKGROUND_SEMI_TRANSPARENT}
-                      >
-                        {formState === CreateProposalTemplateFormState.METADATA_FORM ? (
-                          <ProposalTemplateMetadata
+                      {formState === CreateProposalTemplateFormState.METADATA_FORM ? (
+                        <ProposalTemplateMetadata
+                          setFormState={setFormState}
+                          {...formikProps}
+                        />
+                      ) : (
+                        <>
+                          <Flex
+                            alignItems="center"
+                            justifyContent="space-between"
+                          >
+                            <Text
+                              textStyle="text-xl-mono-medium"
+                              mb={4}
+                            >
+                              {formikProps.values.proposalTemplateMetadata.title}
+                            </Text>
+                            <CustomNonceInput
+                              nonce={formikProps.values.nonce}
+                              onChange={newNonce => formikProps.setFieldValue('nonce', newNonce)}
+                              align="end"
+                            />
+                          </Flex>
+                          <ProposalTemplateTransactionsForm
                             setFormState={setFormState}
+                            canUserCreateProposal={canUserCreateProposal}
+                            pendingTransaction={pendingCreateTx}
+                            safeNonce={safe?.nonce}
                             {...formikProps}
                           />
-                        ) : (
-                          <>
-                            <Flex
-                              alignItems="center"
-                              justifyContent="space-between"
-                            >
-                              <Text
-                                textStyle="text-xl-mono-medium"
-                                mb={4}
-                              >
-                                {formikProps.values.proposalTemplateMetadata.title}
-                              </Text>
-                              <CustomNonceInput
-                                nonce={formikProps.values.nonce}
-                                onChange={newNonce => formikProps.setFieldValue('nonce', newNonce)}
-                                align="end"
-                              />
-                            </Flex>
-                            <ProposalTemplateTransactionsForm
-                              setFormState={setFormState}
-                              canUserCreateProposal={canUserCreateProposal}
-                              pendingTransaction={pendingCreateTx}
-                              safeNonce={safe?.nonce}
-                              {...formikProps}
-                            />
-                          </>
-                        )}
-                      </Box>
-                    </Flex>
-                  </GridItem>
-                  <GridItem
-                    area="details"
-                    w="100%"
-                  >
-                    <ProposalTemplateDetails {...formikProps} />
-                  </GridItem>
-                </Grid>
-              </Box>
-            </form>
-          );
-        }}
-      </Formik>
-    </ClientOnly>
+                        </>
+                      )}
+                    </Box>
+                  </Flex>
+                </GridItem>
+                <GridItem
+                  area="details"
+                  w="100%"
+                >
+                  <ProposalTemplateDetails {...formikProps} />
+                </GridItem>
+              </Grid>
+            </Box>
+          </form>
+        );
+      }}
+    </Formik>
   );
 }
diff --git a/app/daos/[daoAddress]/proposal-templates/page.tsx b/app/daos/[daoAddress]/proposal-templates/page.tsx
index 963221cd99..3b41b9543c 100644
--- a/app/daos/[daoAddress]/proposal-templates/page.tsx
+++ b/app/daos/[daoAddress]/proposal-templates/page.tsx
@@ -6,7 +6,6 @@ import Link from 'next/link';
 import { useTranslation } from 'react-i18next';
 import ProposalTemplates from '../../../../src/components/ProposalTemplates';
 import PageHeader from '../../../../src/components/ui/page/Header/PageHeader';
-import ClientOnly from '../../../../src/components/ui/utils/ClientOnly';
 import { DAO_ROUTES } from '../../../../src/constants/routes';
 import useSubmitProposal from '../../../../src/hooks/DAO/proposal/useSubmitProposal';
 import { useFractal } from '../../../../src/providers/App/AppProvider';
@@ -19,7 +18,7 @@ export default function ProposalTemplatesPage() {
   const { canUserCreateProposal } = useSubmitProposal();
 
   return (
-    <ClientOnly>
+    <>
       <PageHeader
         title={t('proposalTemplates', { ns: 'breadcrumbs' })}
         breadcrumbs={[
@@ -39,6 +38,6 @@ export default function ProposalTemplatesPage() {
         )}
       </PageHeader>
       <ProposalTemplates />
-    </ClientOnly>
+    </>
   );
 }
diff --git a/app/daos/[daoAddress]/proposals/[proposalId]/page.tsx b/app/daos/[daoAddress]/proposals/[proposalId]/page.tsx
index 3a86f14b33..d15efa019c 100644
--- a/app/daos/[daoAddress]/proposals/[proposalId]/page.tsx
+++ b/app/daos/[daoAddress]/proposals/[proposalId]/page.tsx
@@ -8,7 +8,6 @@ import SnapshotProposalDetails from '../../../../../src/components/Proposals/Sna
 import { EmptyBox } from '../../../../../src/components/ui/containers/EmptyBox';
 import { InfoBoxLoader } from '../../../../../src/components/ui/loaders/InfoBoxLoader';
 import PageHeader from '../../../../../src/components/ui/page/Header/PageHeader';
-import ClientOnly from '../../../../../src/components/ui/utils/ClientOnly';
 import { DAO_ROUTES } from '../../../../../src/constants/routes';
 import useSnapshotProposal from '../../../../../src/hooks/DAO/loaders/snapshot/useSnapshotProposal';
 import { useGetMetadata } from '../../../../../src/hooks/DAO/proposal/useGetMetadata';
@@ -54,7 +53,7 @@ export default function ProposalDetailsPage({
   }, [proposals, proposalId, isSnapshotProposal]);
 
   return (
-    <ClientOnly>
+    <>
       <PageHeader
         title={t('proposalOverview')}
         breadcrumbs={[
@@ -83,6 +82,6 @@ export default function ProposalDetailsPage({
       ) : (
         <MultisigProposalDetails proposal={proposal} />
       )}
-    </ClientOnly>
+    </>
   );
 }
diff --git a/app/daos/[daoAddress]/proposals/new/page.tsx b/app/daos/[daoAddress]/proposals/new/page.tsx
index c8c7b0f7dc..82ec3796f1 100644
--- a/app/daos/[daoAddress]/proposals/new/page.tsx
+++ b/app/daos/[daoAddress]/proposals/new/page.tsx
@@ -13,7 +13,6 @@ import TransactionsForm from '../../../../../src/components/ProposalCreate/Trans
 import { DEFAULT_PROPOSAL } from '../../../../../src/components/ProposalCreate/constants';
 import { BarLoader } from '../../../../../src/components/ui/loaders/BarLoader';
 import PageHeader from '../../../../../src/components/ui/page/Header/PageHeader';
-import ClientOnly from '../../../../../src/components/ui/utils/ClientOnly';
 import { BACKGROUND_SEMI_TRANSPARENT, HEADER_HEIGHT } from '../../../../../src/constants/common';
 import { DAO_ROUTES } from '../../../../../src/constants/routes';
 import { usePrepareProposal } from '../../../../../src/hooks/DAO/proposal/usePrepareProposal';
@@ -59,109 +58,107 @@ export default function ProposalCreatePage() {
   }
 
   return (
-    <ClientOnly>
-      <Formik<CreateProposalForm>
-        validationSchema={createProposalValidation}
-        initialValues={{ ...DEFAULT_PROPOSAL, nonce: safe.nonce }}
-        onSubmit={async values => {
-          const { nonce } = values;
-          const proposalData = await prepareProposal(values);
-          submitProposal({
-            proposalData,
-            nonce,
-            pendingToastMessage: t('proposalCreatePendingToastMessage'),
-            successToastMessage: t('proposalCreateSuccessToastMessage'),
-            failedToastMessage: t('proposalCreateFailureToastMessage'),
-            successCallback,
-            safeAddress: daoAddress,
-          });
-        }}
-        validateOnMount
-        isInitialValid={false}
-      >
-        {(formikProps: FormikProps<CreateProposalForm>) => {
-          const { handleSubmit, setFieldValue, values } = formikProps;
-          return (
-            <form onSubmit={handleSubmit}>
-              <Box>
-                <PageHeader
-                  title={t('createProposal')}
-                  breadcrumbs={[
-                    {
-                      terminus: t('proposals', { ns: 'breadcrumbs' }),
-                      path: DAO_ROUTES.proposals.relative(daoAddress),
-                    },
-                    {
-                      terminus: t('proposalNew', { ns: 'breadcrumbs' }),
-                      path: '',
-                    },
-                  ]}
-                  ButtonIcon={Trash}
-                  buttonVariant="secondary"
-                  buttonClick={() => push(DAO_ROUTES.proposals.relative(daoAddress))}
-                  isButtonDisabled={pendingCreateTx}
-                />
-                <Grid
-                  gap={4}
-                  templateColumns={{ base: '1fr', lg: '2fr 1fr' }}
-                  gridTemplateRows={{ base: '1fr', lg: '5.1em 1fr' }}
-                  templateAreas={{
-                    base: templateAreaSingleCol,
-                    lg: templateAreaTwoCol,
-                  }}
-                >
-                  <GridItem area="content">
-                    <Flex
-                      flexDirection="column"
-                      align="left"
+    <Formik<CreateProposalForm>
+      validationSchema={createProposalValidation}
+      initialValues={{ ...DEFAULT_PROPOSAL, nonce: safe.nonce }}
+      onSubmit={async values => {
+        const { nonce } = values;
+        const proposalData = await prepareProposal(values);
+        submitProposal({
+          proposalData,
+          nonce,
+          pendingToastMessage: t('proposalCreatePendingToastMessage'),
+          successToastMessage: t('proposalCreateSuccessToastMessage'),
+          failedToastMessage: t('proposalCreateFailureToastMessage'),
+          successCallback,
+          safeAddress: daoAddress,
+        });
+      }}
+      validateOnMount
+      isInitialValid={false}
+    >
+      {(formikProps: FormikProps<CreateProposalForm>) => {
+        const { handleSubmit, setFieldValue, values } = formikProps;
+        return (
+          <form onSubmit={handleSubmit}>
+            <Box>
+              <PageHeader
+                title={t('createProposal')}
+                breadcrumbs={[
+                  {
+                    terminus: t('proposals', { ns: 'breadcrumbs' }),
+                    path: DAO_ROUTES.proposals.relative(daoAddress),
+                  },
+                  {
+                    terminus: t('proposalNew', { ns: 'breadcrumbs' }),
+                    path: '',
+                  },
+                ]}
+                ButtonIcon={Trash}
+                buttonVariant="secondary"
+                buttonClick={() => push(DAO_ROUTES.proposals.relative(daoAddress))}
+                isButtonDisabled={pendingCreateTx}
+              />
+              <Grid
+                gap={4}
+                templateColumns={{ base: '1fr', lg: '2fr 1fr' }}
+                gridTemplateRows={{ base: '1fr', lg: '5.1em 1fr' }}
+                templateAreas={{
+                  base: templateAreaSingleCol,
+                  lg: templateAreaTwoCol,
+                }}
+              >
+                <GridItem area="content">
+                  <Flex
+                    flexDirection="column"
+                    align="left"
+                  >
+                    <Box
+                      marginBottom="2rem"
+                      rounded="lg"
+                      p="1rem"
+                      bg={BACKGROUND_SEMI_TRANSPARENT}
                     >
-                      <Box
-                        marginBottom="2rem"
-                        rounded="lg"
-                        p="1rem"
-                        bg={BACKGROUND_SEMI_TRANSPARENT}
-                      >
-                        <ProposalHeader
-                          isAzorius={isAzorius}
-                          metadataTitle={
-                            formState === CreateProposalState.TRANSACTIONS_FORM &&
-                            !!values.proposalMetadata.title
-                              ? values.proposalMetadata.title
-                              : undefined
-                          }
-                          nonce={values.nonce}
-                          setNonce={(nonce?: number) => {
-                            setFieldValue('nonce', nonce);
-                          }}
-                        />
+                      <ProposalHeader
+                        isAzorius={isAzorius}
+                        metadataTitle={
+                          formState === CreateProposalState.TRANSACTIONS_FORM &&
+                          !!values.proposalMetadata.title
+                            ? values.proposalMetadata.title
+                            : undefined
+                        }
+                        nonce={values.nonce}
+                        setNonce={(nonce?: number) => {
+                          setFieldValue('nonce', nonce);
+                        }}
+                      />
 
-                        <ProposalMetadata
-                          isVisible={formState === CreateProposalState.METADATA_FORM}
-                          setFormState={setFormState}
-                          {...formikProps}
-                        />
-                        <TransactionsForm
-                          isVisible={formState === CreateProposalState.TRANSACTIONS_FORM}
-                          setFormState={setFormState}
-                          pendingTransaction={pendingCreateTx}
-                          canUserCreateProposal={canUserCreateProposal}
-                          {...formikProps}
-                        />
-                      </Box>
-                    </Flex>
-                  </GridItem>
-                  <GridItem
-                    area="details"
-                    w="100%"
-                  >
-                    <ProposalDetails />
-                  </GridItem>
-                </Grid>
-              </Box>
-            </form>
-          );
-        }}
-      </Formik>
-    </ClientOnly>
+                      <ProposalMetadata
+                        isVisible={formState === CreateProposalState.METADATA_FORM}
+                        setFormState={setFormState}
+                        {...formikProps}
+                      />
+                      <TransactionsForm
+                        isVisible={formState === CreateProposalState.TRANSACTIONS_FORM}
+                        setFormState={setFormState}
+                        pendingTransaction={pendingCreateTx}
+                        canUserCreateProposal={canUserCreateProposal}
+                        {...formikProps}
+                      />
+                    </Box>
+                  </Flex>
+                </GridItem>
+                <GridItem
+                  area="details"
+                  w="100%"
+                >
+                  <ProposalDetails />
+                </GridItem>
+              </Grid>
+            </Box>
+          </form>
+        );
+      }}
+    </Formik>
   );
 }
diff --git a/app/daos/[daoAddress]/proposals/page.tsx b/app/daos/[daoAddress]/proposals/page.tsx
index a62a32f0f9..dbe0ebbab2 100644
--- a/app/daos/[daoAddress]/proposals/page.tsx
+++ b/app/daos/[daoAddress]/proposals/page.tsx
@@ -9,7 +9,6 @@ import Proposals from '../../../../src/components/Proposals';
 import { ModalType } from '../../../../src/components/ui/modals/ModalProvider';
 import { useFractalModal } from '../../../../src/components/ui/modals/useFractalModal';
 import PageHeader from '../../../../src/components/ui/page/Header/PageHeader';
-import ClientOnly from '../../../../src/components/ui/utils/ClientOnly';
 import { DAO_ROUTES } from '../../../../src/constants/routes';
 import useSubmitProposal from '../../../../src/hooks/DAO/proposal/useSubmitProposal';
 import { useFractal } from '../../../../src/providers/App/AppProvider';
@@ -43,7 +42,7 @@ export default function ProposalsPage() {
     !azoriusGovernance.votesToken.balance.isZero();
 
   return (
-    <ClientOnly>
+    <>
       <PageHeader
         breadcrumbs={[
           {
@@ -104,6 +103,6 @@ export default function ProposalsPage() {
         )}
       </PageHeader>
       <Proposals />
-    </ClientOnly>
+    </>
   );
 }
diff --git a/app/daos/[daoAddress]/settings/page.tsx b/app/daos/[daoAddress]/settings/page.tsx
index cc21aafe32..d9d29a81a4 100644
--- a/app/daos/[daoAddress]/settings/page.tsx
+++ b/app/daos/[daoAddress]/settings/page.tsx
@@ -1,11 +1,10 @@
 'use client';
 
-import { Center } from '@chakra-ui/react';
+import { Box, Center } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { Settings } from '../../../../src/components/pages/DaoSettings';
 import { BarLoader } from '../../../../src/components/ui/loaders/BarLoader';
 import PageHeader from '../../../../src/components/ui/page/Header/PageHeader';
-import ClientOnly from '../../../../src/components/ui/utils/ClientOnly';
 import { HEADER_HEIGHT } from '../../../../src/constants/common';
 import { useFractal } from '../../../../src/providers/App/AppProvider';
 
@@ -23,7 +22,7 @@ export default function SettingsPage() {
     );
   }
   return (
-    <ClientOnly mt={12}>
+    <Box mt={12}>
       <PageHeader
         title={t('headerTitle', {
           daoName,
@@ -37,6 +36,6 @@ export default function SettingsPage() {
         ]}
       />
       <Settings />
-    </ClientOnly>
+    </Box>
   );
 }
diff --git a/app/daos/[daoAddress]/treasury/page.tsx b/app/daos/[daoAddress]/treasury/page.tsx
index 12450364bc..560b5fcb9a 100644
--- a/app/daos/[daoAddress]/treasury/page.tsx
+++ b/app/daos/[daoAddress]/treasury/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Flex } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { Assets } from '../../../../src/components/pages/DAOTreasury/components/Assets';
 import { Transactions } from '../../../../src/components/pages/DAOTreasury/components/Transactions';
@@ -9,7 +9,6 @@ import { TitledInfoBox } from '../../../../src/components/ui/containers/TitledIn
 import { ModalType } from '../../../../src/components/ui/modals/ModalProvider';
 import { useFractalModal } from '../../../../src/components/ui/modals/useFractalModal';
 import PageHeader from '../../../../src/components/ui/page/Header/PageHeader';
-import ClientOnly from '../../../../src/components/ui/utils/ClientOnly';
 import useSubmitProposal from '../../../../src/hooks/DAO/proposal/useSubmitProposal';
 import { useFractal } from '../../../../src/providers/App/AppProvider';
 
@@ -23,7 +22,7 @@ export default function Treasury() {
   const showButton = canUserCreateProposal && !treasuryTotal.isZero();
 
   return (
-    <ClientOnly>
+    <Box>
       <PageHeader
         title={t('headerTitle', {
           ns: 'breadcrumbs',
@@ -62,6 +61,6 @@ export default function Treasury() {
           <Assets />
         </TitledInfoBox>
       </Flex>
-    </ClientOnly>
+    </Box>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 2a4acb85ae..076df9b23e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,7 +11,6 @@ import { CTABox } from '../src/components/pages/AppHome/CTABox';
 import FeaturedDAOCard from '../src/components/pages/AppHome/FeaturedDAOCard';
 import ValueProposition from '../src/components/pages/AppHome/ValueProposition';
 import ExternalLink from '../src/components/ui/links/ExternalLink';
-import ClientOnly from '../src/components/ui/utils/ClientOnly';
 import { BASE_ROUTES } from '../src/constants/routes';
 import { URL_DOCS } from '../src/constants/url';
 import ethLizardsLogo from '../src/metadata/lizzardsDAO/assets/logo.png';
@@ -114,153 +113,151 @@ export default function HomePage() {
   const features = FEATURED_DAOS.get(client ? client.chain.id : disconnectedChain.id);
 
   return (
-    <ClientOnly>
-      <Center>
-        <VStack
-          maxW={{ md: '80%', sm: '95%' }}
-          alignItems="start"
-          paddingTop="6.25rem"
-          paddingBottom="6.25rem"
+    <Center>
+      <VStack
+        maxW={{ md: '80%', sm: '95%' }}
+        alignItems="start"
+        paddingTop="6.25rem"
+        paddingBottom="6.25rem"
+      >
+        <Text
+          paddingBottom="1.5rem"
+          textStyle={{
+            base: 'text-2xl-mono-regular',
+            sm: 'text-4xl-mono-regular',
+            md: 'text-6xl-mono-regular',
+          }}
+          color="grayscale.100"
         >
-          <Text
-            paddingBottom="1.5rem"
-            textStyle={{
-              base: 'text-2xl-mono-regular',
-              sm: 'text-4xl-mono-regular',
-              md: 'text-6xl-mono-regular',
-            }}
-            color="grayscale.100"
-          >
-            {t('homeTitle')}
-          </Text>
-          <Center>
-            <Flex
-              paddingBottom="2rem"
-              alignItems="center"
-              flexWrap="wrap"
-            >
-              <Text
-                width={{ md: '100%', lg: '65%' }}
-                textStyle="text-lg-mono-regular"
-                color="grayscale.300"
-                paddingEnd="1rem"
-                marginBottom="2rem"
-              >
-                {t('homeDesc')}
-              </Text>
-              <Button
-                width={{ md: '100%', lg: '35%' }}
-                h="3.5rem"
-                onClick={createDAO}
-                variant="tertiary"
-                marginBottom="2rem"
-              >
-                {t('createButton')}
-              </Button>
-            </Flex>
-          </Center>
+          {t('homeTitle')}
+        </Text>
+        <Center>
           <Flex
             paddingBottom="2rem"
+            alignItems="center"
             flexWrap="wrap"
           >
-            {VALUE_PROPS.map((daoAction, index) => {
-              return (
-                <ValueProposition
-                  paddingBottom="2rem"
-                  width={{ md: '100%', lg: '33%' }}
-                  key={daoAction.titleKey}
-                  iconSrc={daoAction.iconSrc}
-                  title={t(daoAction.titleKey)}
-                  desc={t(daoAction.descKey)}
-                  paddingEnd={index !== VALUE_PROPS.length - 1 ? '2rem' : '0rem'}
-                />
-              );
-            })}
+            <Text
+              width={{ md: '100%', lg: '65%' }}
+              textStyle="text-lg-mono-regular"
+              color="grayscale.300"
+              paddingEnd="1rem"
+              marginBottom="2rem"
+            >
+              {t('homeDesc')}
+            </Text>
+            <Button
+              width={{ md: '100%', lg: '35%' }}
+              h="3.5rem"
+              onClick={createDAO}
+              variant="tertiary"
+              marginBottom="2rem"
+            >
+              {t('createButton')}
+            </Button>
           </Flex>
-          <CTABox
-            leftSlot={
-              <ExternalLink href={URL_DOCS}>
-                <Button>{t('getStartedButton')}</Button>
-              </ExternalLink>
-            }
-            rightSlot={
-              <Text
-                textStyle="text-xl-mono-bold"
-                color="chocolate.100"
-              >
-                {t('learnCTA')}
-              </Text>
-            }
-          />
-          {features ? (
-            <>
-              <Text
-                paddingTop="3.5rem"
-                textStyle="text-lg-mono-bold"
-                color="grayscale.100"
-              >
-                {t('featuredTitle')}
-              </Text>
-              <Text
-                color="grayscale.500"
-                paddingBottom="1.5rem"
-              >
-                {t('featuredDesc')}
-              </Text>
-              <Flex
-                flexWrap="wrap"
-                paddingBottom="1.5rem"
-              >
-                {features.map((feature, index) => {
-                  if (
-                    typeof location !== 'undefined' &&
-                    location.pathname === 'app.fractalframework.xyz'
-                  ) {
-                    return null;
-                  }
-                  return (
-                    <FeaturedDAOCard
-                      width={{ sm: '100%', lg: '50%' }}
-                      key={feature.titleKey}
-                      iconSrc={feature.iconSrc}
-                      title={t(feature.titleKey)}
-                      desc={t(feature.descKey)}
-                      address={feature.address}
-                      marginBottom="2rem"
-                      paddingEnd={{ sm: '0rem', lg: index === 0 ? '0.56rem' : '0rem' }}
-                      paddingStart={{ sm: '0rem', lg: index === 1 ? '0.56rem' : '0rem' }}
-                    />
-                  );
-                })}
-              </Flex>
-            </>
-          ) : (
-            // if there are no features just show padding
-            <Box h="2rem"></Box>
-          )}
-          <CTABox
-            leftSlot={
-              <Text
-                textStyle="text-xl-mono-bold"
-                color="chocolate.100"
-              >
-                {t('readyCTA')}
-              </Text>
-            }
-            rightSlot={
-              <Button
-                data-testid="home-linkCreate"
-                h="3.5rem"
-                onClick={createDAO}
-                variant="tertiary"
-              >
-                {t('createButton')}
-              </Button>
-            }
-          />
-          <AppFooter />
-        </VStack>
-      </Center>
-    </ClientOnly>
+        </Center>
+        <Flex
+          paddingBottom="2rem"
+          flexWrap="wrap"
+        >
+          {VALUE_PROPS.map((daoAction, index) => {
+            return (
+              <ValueProposition
+                paddingBottom="2rem"
+                width={{ md: '100%', lg: '33%' }}
+                key={daoAction.titleKey}
+                iconSrc={daoAction.iconSrc}
+                title={t(daoAction.titleKey)}
+                desc={t(daoAction.descKey)}
+                paddingEnd={index !== VALUE_PROPS.length - 1 ? '2rem' : '0rem'}
+              />
+            );
+          })}
+        </Flex>
+        <CTABox
+          leftSlot={
+            <ExternalLink href={URL_DOCS}>
+              <Button>{t('getStartedButton')}</Button>
+            </ExternalLink>
+          }
+          rightSlot={
+            <Text
+              textStyle="text-xl-mono-bold"
+              color="chocolate.100"
+            >
+              {t('learnCTA')}
+            </Text>
+          }
+        />
+        {features ? (
+          <>
+            <Text
+              paddingTop="3.5rem"
+              textStyle="text-lg-mono-bold"
+              color="grayscale.100"
+            >
+              {t('featuredTitle')}
+            </Text>
+            <Text
+              color="grayscale.500"
+              paddingBottom="1.5rem"
+            >
+              {t('featuredDesc')}
+            </Text>
+            <Flex
+              flexWrap="wrap"
+              paddingBottom="1.5rem"
+            >
+              {features.map((feature, index) => {
+                if (
+                  typeof location !== 'undefined' &&
+                  location.pathname === 'app.fractalframework.xyz'
+                ) {
+                  return null;
+                }
+                return (
+                  <FeaturedDAOCard
+                    width={{ sm: '100%', lg: '50%' }}
+                    key={feature.titleKey}
+                    iconSrc={feature.iconSrc}
+                    title={t(feature.titleKey)}
+                    desc={t(feature.descKey)}
+                    address={feature.address}
+                    marginBottom="2rem"
+                    paddingEnd={{ sm: '0rem', lg: index === 0 ? '0.56rem' : '0rem' }}
+                    paddingStart={{ sm: '0rem', lg: index === 1 ? '0.56rem' : '0rem' }}
+                  />
+                );
+              })}
+            </Flex>
+          </>
+        ) : (
+          // if there are no features just show padding
+          <Box h="2rem"></Box>
+        )}
+        <CTABox
+          leftSlot={
+            <Text
+              textStyle="text-xl-mono-bold"
+              color="chocolate.100"
+            >
+              {t('readyCTA')}
+            </Text>
+          }
+          rightSlot={
+            <Button
+              data-testid="home-linkCreate"
+              h="3.5rem"
+              onClick={createDAO}
+              variant="tertiary"
+            >
+              {t('createButton')}
+            </Button>
+          }
+        />
+        <AppFooter />
+      </VStack>
+    </Center>
   );
 }
diff --git a/src/components/ui/utils/ClientOnly.tsx b/src/components/ui/utils/ClientOnly.tsx
deleted file mode 100644
index bfe9d47874..0000000000
--- a/src/components/ui/utils/ClientOnly.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-
-import { Box, BoxProps } from '@chakra-ui/react';
-import React, { useState, useEffect } from 'react';
-
-export default function ClientOnly({ children, ...rest }: BoxProps) {
-  // State / Props
-  const [hasMounted, setHasMounted] = useState(false);
-
-  // Hooks
-  useEffect(() => {
-    setHasMounted(true);
-  }, []);
-
-  // Render
-  if (!hasMounted) return null;
-
-  return <Box {...rest}>{children}</Box>;
-}