fix: csr hydration

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';
 

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;
 `;

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,14 +35,20 @@ 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';
 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;

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>

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;
+`;

src/layout/index.ts

@@ -1 +1 @@
-export * from './AppWrapper';
+export * from './PageLayout';

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';

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';

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}

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,9 +53,7 @@ export default function DomainsHomePage() {
   );
 }
 
-const Container = styled.div`
-  width: 100%;
-`;
+
 
 const DomainsContainer = styled.div`
   display: flex;

src/types/Theme.ts

@@ -1,10 +1,10 @@
-import { NimiThemeType } from "@nimi.io/card";
+import { NimiThemeType } from "@nimi.io/card/types";
 
 export type NimiCuratedTheme = Exclude<NimiThemeType, NimiThemeType.INFINITE>;
 export interface ThemeAssets {
     type: NimiThemeType;
     logoImage: string;
     logoText: string;
     preview: string;
-  
+
 };