From be7fa407f5b79985db42006c341d888441a91762 Mon Sep 17 00:00:00 2001
From: Adam Azad <adam@adamazad.com>
Date: Wed, 1 Feb 2023 22:47:54 +0000
Subject: [PATCH] fix: csr hydration

---
 src/api/RestAPI/utils.ts                      |  2 +-
 src/components/Container/index.tsx            |  1 +
 src/components/CreateNimi/CreateNimi.tsx      |  9 ++-
 .../NimiPreviewCard/NimiPreviewCard.tsx       | 15 +---
 src/layout/AppWrapper.tsx                     | 62 ----------------
 src/layout/PageLayout.tsx                     | 70 +++++++++++++++++++
 src/layout/index.ts                           |  2 +-
 .../components/RecentPOAPs.tsx                |  2 +-
 .../components/ReorderItem.tsx                |  2 +-
 src/pages/domains/[domain]/index.tsx          |  8 ++-
 src/pages/domains/index.tsx                   |  5 +-
 src/types/Theme.ts                            |  4 +-
 12 files changed, 93 insertions(+), 89 deletions(-)
 delete mode 100644 src/layout/AppWrapper.tsx
 create mode 100644 src/layout/PageLayout.tsx

diff --git a/src/api/RestAPI/utils.ts b/src/api/RestAPI/utils.ts
index 9091537d..2743c256 100644
--- a/src/api/RestAPI/utils.ts
+++ b/src/api/RestAPI/utils.ts
@@ -1,4 +1,4 @@
-import { NimiLinkBaseDetails } from '@nimi.io/card';
+import { NimiLinkBaseDetails } from '@nimi.io/card/types';
 import axios from 'axios';
 import { CID } from 'multiformats/cid';
 
diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx
index cea9f1ad..9a381f17 100644
--- a/src/components/Container/index.tsx
+++ b/src/components/Container/index.tsx
@@ -7,4 +7,5 @@ export const Container = styled.div`
   margin-right: auto;
   max-width: ${MEDIA_WIDTHS.upToMedium}px;
   width: 100%;
+  padding: 0 1rem;
 `;
diff --git a/src/components/CreateNimi/CreateNimi.tsx b/src/components/CreateNimi/CreateNimi.tsx
index fd5480d1..390b68ad 100644
--- a/src/components/CreateNimi/CreateNimi.tsx
+++ b/src/components/CreateNimi/CreateNimi.tsx
@@ -5,6 +5,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { Nimi, NimiImageType, NimiLinkType, NimiWidget, NimiWidgetType } from '@nimi.io/card/types';
 import { nimiValidator } from '@nimi.io/card/validators';
 import createDebugger from 'debug';
+import dynamic from 'next/dynamic';
 import { KeyboardEventHandler, useState } from 'react';
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -34,7 +35,6 @@ import { Card, CardBody } from '../Card';
 import { FormGroup, Label, TextArea } from '../form';
 import { FormWrapper } from '../form/FormGroup';
 import { NimiBlockchainField, ReorderInput } from '../Input';
-import { NimiPreview } from '../NimiPreview';
 import { PreviewMobileButton } from '../PreviewMobileButton';
 import { ProfileSettings } from '../ProfileSettings';
 import { PublishNimiButton } from '../PublishNimiButton';
@@ -42,6 +42,13 @@ import { ReorderGroup } from '../ReorderGroup';
 
 const debug = createDebugger('Nimi:CreateNimi');
 
+const NimiPreview = dynamic(
+  async () => {
+    return import('../NimiPreview').then((mod) => mod.NimiPreview);
+  },
+  { ssr: false }
+);
+
 export interface CreateNimiProps {
   ensAddress: string;
   ensName: string;
diff --git a/src/components/CreateNimi/partials/NimiPreviewCard/NimiPreviewCard.tsx b/src/components/CreateNimi/partials/NimiPreviewCard/NimiPreviewCard.tsx
index f1c1575c..c0fc48d9 100644
--- a/src/components/CreateNimi/partials/NimiPreviewCard/NimiPreviewCard.tsx
+++ b/src/components/CreateNimi/partials/NimiPreviewCard/NimiPreviewCard.tsx
@@ -1,22 +1,11 @@
-import { Nimi } from '@nimi.io/card/types';
+import { Nimi, NimiCard } from '@nimi.io/card';
 import { validateNimi } from '@nimi.io/card/validators';
-import dynamic from 'next/dynamic';
 import Frame, { FrameContextConsumer } from 'react-frame-component';
 import styled, { StyleSheetManager } from 'styled-components';
 
 import { FixedGlobalStyle, ThemeProvider } from '../../../../theme';
 import { Card as CardBase } from '../../../Card';
 
-// document.body is undefined in SSR
-const NimiCardApp = dynamic(
-  async () => {
-    const NimiCardModule = await import('@nimi.io/card');
-
-    return NimiCardModule.NimiCard;
-  },
-  { ssr: false }
-);
-
 export interface NimiPreviewCardProps {
   nimi: Nimi;
 }
@@ -65,7 +54,7 @@ export function NimiPreviewCard({ nimi }: NimiPreviewCardProps) {
                 </style>
                 <FixedGlobalStyle />
                 <ThemeProvider>
-                  <NimiCardApp nimi={filteredNimi} isApp={false} />
+                  <NimiCard nimi={filteredNimi} isApp={false} />
                 </ThemeProvider>
               </>
             </StyleSheetManager>
diff --git a/src/layout/AppWrapper.tsx b/src/layout/AppWrapper.tsx
deleted file mode 100644
index 5af04333..00000000
--- a/src/layout/AppWrapper.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-
-import { Footer } from '../components/Footer';
-import { Header } from '../components/Header';
-import { Heading } from '../components/Heading';
-import { Spinner } from '../components/Spinner';
-import { ENV_SUPPORTED_CHAIN_IDS } from '../constants';
-import { useRainbow } from '../hooks/useRainbow';
-import { useUserInterface } from '../services/useUserInterface';
-import { FOOTER_HEIGHT, HEADER_HEIGHT, MEDIA_WIDTHS } from '../theme';
-
-export function PageLayout({ children }: PropsWithChildren) {
-  const { chainId } = useRainbow();
-  const { t } = useTranslation(['common', 'landing']);
-  const { isSpinnerShown } = useUserInterface();
-
-  return (
-    <Container>
-      <Header />
-      <Content>
-        {(() => {
-          if (!ENV_SUPPORTED_CHAIN_IDS.includes(chainId as number))
-            return (
-              <ErrorContainer>
-                <Heading>{t('error.unsupportedNetwork')}</Heading>
-                <Heading type="sub" color="#000">
-                  Please change your network by clicking the account button on the top right.
-                </Heading>
-              </ErrorContainer>
-            );
-          return children;
-        })()}
-      </Content>
-      {isSpinnerShown && <Spinner />}
-      <Footer />
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  width: 100%;
-  background-color: ${({ theme }) => theme.mainBackgoround};
-  overflow: hidden;
-`;
-
-const Content = styled.main`
-  max-width: ${MEDIA_WIDTHS.upToMedium}px;
-  width: 100%;
-  min-height: calc(100vh - (${HEADER_HEIGHT} + ${FOOTER_HEIGHT}));
-  padding: 40px 20px 0;
-  margin: 0 auto;
-`;
-
-const ErrorContainer = styled.div`
-  width: 100%;
-  text-align: center;
-`;
diff --git a/src/layout/PageLayout.tsx b/src/layout/PageLayout.tsx
new file mode 100644
index 00000000..81924a9f
--- /dev/null
+++ b/src/layout/PageLayout.tsx
@@ -0,0 +1,70 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+
+import { Footer } from '../components/Footer';
+import { Header } from '../components/Header';
+import { Heading } from '../components/Heading';
+import { ENV_SUPPORTED_CHAIN_IDS } from '../constants';
+import { useRainbow } from '../hooks/useRainbow';
+import { FOOTER_HEIGHT, HEADER_HEIGHT } from '../theme';
+
+export function PageLayout({
+  children,
+  flexContainer,
+}: PropsWithChildren<{
+  flexContainer?: boolean;
+}>) {
+  const { chainId } = useRainbow();
+  const { t } = useTranslation(['common', 'landing']);
+  const [isNetworkSupported, setIsNetworkSupported] = useState(false);
+
+  useEffect(() => {
+    setIsNetworkSupported(ENV_SUPPORTED_CHAIN_IDS.includes(chainId as number));
+  }, [chainId]);
+
+  return (
+    <Container>
+      <Header />
+      <Content flexContainer={flexContainer}>
+        {isNetworkSupported ? (
+          children
+        ) : (
+          <ErrorContainer>
+            <Heading>{t('error.unsupportedNetwork')}</Heading>
+            <Heading type="sub" color="#000">
+              Please change your network by clicking the account button on the top right.
+            </Heading>
+          </ErrorContainer>
+        )}
+      </Content>
+      <Footer />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+  background-color: ${({ theme }) => theme.mainBackgoround};
+  overflow: hidden;
+`;
+
+const Content = styled.main<{
+  flexContainer?: boolean;
+}>(
+  (props) => `
+  width: 100%;
+  min-height: calc(100vh - (${HEADER_HEIGHT} + ${FOOTER_HEIGHT}));
+  flex: 1; /* to fill the remaining space */
+  margin: 0 auto;
+  ${props.flexContainer ? 'display: flex; flex-direction: column' : ''}
+`
+);
+
+const ErrorContainer = styled.div`
+  width: 100%;
+  text-align: center;
+`;
diff --git a/src/layout/index.ts b/src/layout/index.ts
index e4732068..a0535228 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -1 +1 @@
-export * from './AppWrapper';
+export * from './PageLayout';
diff --git a/src/modals/ConfigurePOAPsModal/components/RecentPOAPs.tsx b/src/modals/ConfigurePOAPsModal/components/RecentPOAPs.tsx
index 62c57bb4..fc59d174 100644
--- a/src/modals/ConfigurePOAPsModal/components/RecentPOAPs.tsx
+++ b/src/modals/ConfigurePOAPsModal/components/RecentPOAPs.tsx
@@ -1,4 +1,4 @@
-import { POAPToken } from '@nimi.io/card';
+import { POAPToken } from '@nimi.io/card/types';
 
 import { AnimatedSection } from './AnimatedSection';
 import { StaticPOAP } from './POAPs';
diff --git a/src/modals/ConfigurePOAPsModal/components/ReorderItem.tsx b/src/modals/ConfigurePOAPsModal/components/ReorderItem.tsx
index c2267522..a9022a59 100644
--- a/src/modals/ConfigurePOAPsModal/components/ReorderItem.tsx
+++ b/src/modals/ConfigurePOAPsModal/components/ReorderItem.tsx
@@ -1,4 +1,4 @@
-import { POAPToken } from '@nimi.io/card';
+import { POAPToken } from '@nimi.io/card/types';
 import { Reorder, useDragControls } from 'framer-motion';
 import { useState } from 'react';
 import styled from 'styled-components';
diff --git a/src/pages/domains/[domain]/index.tsx b/src/pages/domains/[domain]/index.tsx
index 7a8c558e..09e48541 100644
--- a/src/pages/domains/[domain]/index.tsx
+++ b/src/pages/domains/[domain]/index.tsx
@@ -2,7 +2,7 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 
 import { CreateNimi } from '../../../components/CreateNimi';
-import { Loader } from '../../../components/Loader';
+import { Loader, LoaderWrapper } from '../../../components/Loader';
 import { useAvaliableThemesFromPoaps } from '../../../hooks/useAvaliableThemesFromPoaps';
 import { useInitialtNimiData } from '../../../hooks/useDefaultNimiData';
 import { useRainbow } from '../../../hooks/useRainbow';
@@ -27,9 +27,11 @@ export default function CreateNimiPage() {
       <Head>
         <title>Create Nimi for {domain}</title>
       </Head>
-      <PageLayout>
+      <PageLayout flexContainer>
         {initialNimiLoading || initialNimi === undefined || isThemeLoading ? (
-          <Loader />
+          <LoaderWrapper>
+            <Loader />
+          </LoaderWrapper>
         ) : (
           <CreateNimi
             ensAddress={account as string}
diff --git a/src/pages/domains/index.tsx b/src/pages/domains/index.tsx
index 08f42df5..3e751cae 100644
--- a/src/pages/domains/index.tsx
+++ b/src/pages/domains/index.tsx
@@ -3,6 +3,7 @@ import { ChangeEvent, useState } from 'react';
 import styled from 'styled-components';
 
 import { DottedBorder } from '../../components/Button/styled';
+import { Container } from '../../components/Container';
 import { DomainItem } from '../../components/DomainItem';
 import { ControlBar } from '../../components/domains/ControlBar';
 import { NoENSBanner } from '../../components/domains/NoENSBanner';
@@ -52,10 +53,6 @@ export default function DomainsHomePage() {
   );
 }
 
-const Container = styled.div`
-  width: 100%;
-`;
-
 const DomainsContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
diff --git a/src/types/Theme.ts b/src/types/Theme.ts
index 347dfa64..24fbb118 100644
--- a/src/types/Theme.ts
+++ b/src/types/Theme.ts
@@ -1,4 +1,4 @@
-import { NimiThemeType } from "@nimi.io/card";
+import { NimiThemeType } from "@nimi.io/card/types";
 
 export type NimiCuratedTheme = Exclude<NimiThemeType, NimiThemeType.INFINITE>;
 export interface ThemeAssets {
@@ -6,5 +6,5 @@ export interface ThemeAssets {
     logoImage: string;
     logoText: string;
     preview: string;
-  
+
 };
\ No newline at end of file