feat: storage proof blog post (#74)

* feat: storage proof blog post * feat: add public key * fix: flickering * fix: flickering (#2) * fix: metadata --------- Co-authored-by: 0xParticle <particle@defi.sucks>
defi-wonderland · Dec 6, 2023 · f5bf929 · f5bf929
1 parent 0bcbfa3
commit f5bf929
Show file tree

Hide file tree

Showing 14 changed files with 532 additions and 190 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@ The app should be live at [http://localhost:5173/](http://localhost:5173/)
 
 ```
 yarn build
-yarn preview
+yarn start
 ```
 
 The app should be live at [http://localhost:4173/](http://localhost:4173/)

diff --git a/public/blog-posts/current-state-of-storage-proofs.md b/public/blog-posts/current-state-of-storage-proofs.md
diff --git a/src/components/ContentContainer.tsx b/src/components/ContentContainer.tsx
@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+
+interface Props {
+  children: React.ReactNode;
+}
+export const ContentContainer = ({ children }: Props) => {
+  const [showContent, setShowContent] = useState(false);
+
+  useEffect(() => {
+    setShowContent(true);
+  }, []);
+
+  return <>{showContent && children}</>;
+};
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -2,6 +2,7 @@ export * from './AnimatedTitle';
 export * from './AnimationIn';
 export * from './Ball';
 export * from './Button';
+export * from './ContentContainer';
 export * from './DisplayText';
 export * from './GradientTitle';
 export * from './Link';

diff --git a/src/containers/Footer.tsx b/src/containers/Footer.tsx
@@ -12,52 +12,55 @@ import {
   SLink,
   MOBILE_MAX_WIDTH,
   SectionBackground,
+  ContentContainer,
 } from '~/components';
 
 const Footer = () => (
-  <Container>
-    {/* Background */}
-    <BgContainer>
-      <BackgroundImage type='2' align='center' />
-    </BgContainer>
-
-    {/* Card */}
-    <StyledFooter>
-      <FooterHeader>
-        <Star src={StarIcon.src} alt='' />
-        <WonderLogoText src={WonderLogoIcon.src} alt='Wonderland logo text' />
-        <Star src={StarIcon.src} alt='' />
-      </FooterHeader>
-
-      <FooterActions>
-        <FooterTitle>We&apos;re all mad here</FooterTitle>
-        <ButtonsContainer>
-          <SLink to='https://docs.google.com/forms/d/1n70jsL4sFkOwPNBTdciPqlWF2RirgQwejjztpS4-2L8/viewform' external>
-            <Button>Join us</Button>
-          </SLink>
-        </ButtonsContainer>
-      </FooterActions>
-
-      <FooterSocial>
-        <span>
-          <span>© 2023. Wonder LTD. </span>
-          <span>All Rights Reserved</span>
-        </span>
-
-        <SocialIcons>
-          <SocialIcon to='https://twitter.com/defi_wonderland' external>
-            <img src={TwitterIcon.src} alt='Twitter icon' loading='lazy' />
-          </SocialIcon>
-          <SocialIcon to='https://github.com/defi-wonderland' external>
-            <img src={GithubIcon.src} alt='Github icon' loading='lazy' />
-          </SocialIcon>
-        </SocialIcons>
-
-        <span></span>
-        {/* <span>Privacy Policy</span> */}
-      </FooterSocial>
-    </StyledFooter>
-  </Container>
+  <ContentContainer>
+    <Container>
+      {/* Background */}
+      <BgContainer>
+        <BackgroundImage type='2' align='center' />
+      </BgContainer>
+
+      {/* Card */}
+      <StyledFooter>
+        <FooterHeader>
+          <Star src={StarIcon.src} alt='' />
+          <WonderLogoText src={WonderLogoIcon.src} alt='Wonderland logo text' />
+          <Star src={StarIcon.src} alt='' />
+        </FooterHeader>
+
+        <FooterActions>
+          <FooterTitle>We&apos;re all mad here</FooterTitle>
+          <ButtonsContainer>
+            <SLink to='https://docs.google.com/forms/d/1n70jsL4sFkOwPNBTdciPqlWF2RirgQwejjztpS4-2L8/viewform' external>
+              <Button>Join us</Button>
+            </SLink>
+          </ButtonsContainer>
+        </FooterActions>
+
+        <FooterSocial>
+          <span>
+            <span>© 2023. Wonder LTD. </span>
+            <span>All Rights Reserved</span>
+          </span>
+
+          <SocialIcons>
+            <SocialIcon to='https://twitter.com/defi_wonderland' external>
+              <img src={TwitterIcon.src} alt='Twitter icon' loading='lazy' />
+            </SocialIcon>
+            <SocialIcon to='https://github.com/defi-wonderland' external>
+              <img src={GithubIcon.src} alt='Github icon' loading='lazy' />
+            </SocialIcon>
+          </SocialIcons>
+
+          <span></span>
+          {/* <span>Privacy Policy</span> */}
+        </FooterSocial>
+      </StyledFooter>
+    </Container>
+  </ContentContainer>
 );
 
 export default Footer;

diff --git a/src/containers/Navbar.tsx b/src/containers/Navbar.tsx
@@ -4,7 +4,15 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
 
-import { FONT_SIZE_20, SLink, MOBILE_MAX_WIDTH, NAVBAR_HEIGHT, NAVBAR_INDEX, TABLET_MAX_WIDTH } from '~/components';
+import {
+  FONT_SIZE_20,
+  SLink,
+  MOBILE_MAX_WIDTH,
+  NAVBAR_HEIGHT,
+  NAVBAR_INDEX,
+  TABLET_MAX_WIDTH,
+  ContentContainer,
+} from '~/components';
 
 import wonderLogo from '~/public/img/wonder-logo.svg';
 import menuIcon from '~/assets/menu_icon.svg';
@@ -77,33 +85,35 @@ const Navbar = ({ className, pathname }: NavbarProps) => {
   }, [pathname]);
 
   return (
-    <StyledNavbar id={showNavbar ? 'show' : ''} className={className}>
-      <LogoContainer
-        onClick={() => {
-          setNavLink(resetValues());
-        }}
-      >
-        <WonderLogo to='/landing'>
-          <Image src={wonderLogo.src} alt='Wonderland logo' width='64' height='64' />
-        </WonderLogo>
-        <MenuButton onClick={() => setShowNavbar(!showNavbar)}>
-          <Image src={menuIcon.src} alt='menu icon' id='menu-icon' width='32' height='32' />
-        </MenuButton>
-      </LogoContainer>
-
-      {navLink.map((link, i) => (
-        <NavLinkContainer order={i + 1} key={link.name + i}>
-          <NavLink
-            to={link.url}
-            key={link.name}
-            disabled={link.disabled && pathname?.includes('/insights/')}
-            className={link.disabled ? 'gradient' : ''}
-          >
-            <div id={showNavbar ? '' : 'hide'}>{link.name}</div>
-          </NavLink>
-        </NavLinkContainer>
-      ))}
-    </StyledNavbar>
+    <ContentContainer>
+      <StyledNavbar id={showNavbar ? 'show' : ''} className={className}>
+        <LogoContainer
+          onClick={() => {
+            setNavLink(resetValues());
+          }}
+        >
+          <WonderLogo to='/landing'>
+            <Image src={wonderLogo.src} alt='Wonderland logo' width='64' height='64' />
+          </WonderLogo>
+          <MenuButton onClick={() => setShowNavbar(!showNavbar)}>
+            <Image src={menuIcon.src} alt='menu icon' id='menu-icon' width='32' height='32' />
+          </MenuButton>
+        </LogoContainer>
+
+        {navLink.map((link, i) => (
+          <NavLinkContainer order={i + 1} key={link.name + i}>
+            <NavLink
+              to={link.url}
+              key={link.name}
+              disabled={link.disabled && pathname?.includes('/insights/')}
+              className={link.disabled ? 'gradient' : ''}
+            >
+              <div id={showNavbar ? '' : 'hide'}>{link.name}</div>
+            </NavLink>
+          </NavLinkContainer>
+        ))}
+      </StyledNavbar>
+    </ContentContainer>
   );
 };
 

diff --git a/src/data/blog.json b/src/data/blog.json
@@ -1,6 +1,16 @@
 [
+  {
+    "id": "current-state-of-storage-proofs",
+    "public": true,
+    "name": "The current state of storage proofs",
+    "description": "The current status of on-chain storage proofs",
+    "date": "12/05/23",
+    "tags": ["Cryptography", "Verification", "Cross-chain"],
+    "image": "/img/blog-posts/liveness-2-and-beyond/cover.jpg"
+  },
   {
     "id": "liveness-2-and-beyond",
+    "public": false,
     "name": "Liveness 2 and beyond",
     "description": "The current status of on-chain storage proofs",
     "date": "11/17/23",
@@ -9,6 +19,7 @@
   },
   {
     "id": "a-mev-racing-story",
+    "public": true,
     "name": "A (MEV) racing story",
     "description": "What do we know about the dark forest 2.0?",
     "date": "05/04/23",
@@ -17,6 +28,7 @@
   },
   {
     "id": "oracle-manipulation-101",
+    "public": true,
     "name": "Oracle Manipulation 101",
     "description": "What does a Uniswap v3 oracle manipulation look like?",
     "date": "12/26/22",
@@ -25,6 +37,7 @@
   },
   {
     "id": "oracle-manipulation-101-math-edition",
+    "public": true,
     "name": "Oracle Manipulation 101 (Math edition)",
     "description": "What does a Uniswap v3 oracle manipulation look like?",
     "date": "12/26/22",
@@ -33,6 +46,7 @@
   },
   {
     "id": "rip-oracles",
+    "public": true,
     "name": "RIP, Oracles",
     "description": "Status quo: Current hazards and how to solve them",
     "date": "12/26/22",

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -12,6 +12,7 @@ import { useRouter } from 'next/router';
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   const router = useRouter();
+
   return (
     <StyledPageView>
       <StarsBackground />

diff --git a/src/pages/creations/index.tsx b/src/pages/creations/index.tsx
@@ -4,6 +4,7 @@ import {
   AnimatedTitle,
   Ball,
   CONTENT_INDEX,
+  ContentContainer,
   GradientTitle,
   MOBILE_MAX_WIDTH,
   SectionBackground,
@@ -21,37 +22,40 @@ export default function Creations() {
   return (
     <>
       <CustomHead title='Creations' />
-      <Container>
-        <BackgroundContainer>
-          <BG_1 type='2' align='center' />
-          <BG_2 type='1' align='left' />
-          <BG_3 type='2' align='right' />
-        </BackgroundContainer>
-        <HeroDivider>
-          <TitleVideo>
-            <AnimatedTitle chromeSrc={VIDEO_CHROME} safariSrc={VIDEO_SAFARI} />
-          </TitleVideo>
-          <Ball_1 />
-          <Ball_2 />
-          <Ball_3 />
-        </HeroDivider>
-
-        <TitleContainer>
-          <ProjectTitle title='Partner projects' />
-        </TitleContainer>
-        <ProjectsContainer>
-          <Divider />
-          <ProjectsList projects={partnerProjects} />
-        </ProjectsContainer>
-
-        <TitleContainer>
-          <ProjectTitle title='Public goods' />
-        </TitleContainer>
-        <ProjectsContainer>
-          <Divider />
-          <ProjectsList projects={publicGoods} />
-        </ProjectsContainer>
-      </Container>
+
+      <ContentContainer>
+        <Container>
+          <BackgroundContainer>
+            <BG_1 type='2' align='center' />
+            <BG_2 type='1' align='left' />
+            <BG_3 type='2' align='right' />
+          </BackgroundContainer>
+          <HeroDivider>
+            <TitleVideo>
+              <AnimatedTitle chromeSrc={VIDEO_CHROME} safariSrc={VIDEO_SAFARI} />
+            </TitleVideo>
+            <Ball_1 />
+            <Ball_2 />
+            <Ball_3 />
+          </HeroDivider>
+
+          <TitleContainer>
+            <ProjectTitle title='Partner projects' />
+          </TitleContainer>
+          <ProjectsContainer>
+            <Divider />
+            <ProjectsList projects={partnerProjects} />
+          </ProjectsContainer>
+
+          <TitleContainer>
+            <ProjectTitle title='Public goods' />
+          </TitleContainer>
+          <ProjectsContainer>
+            <Divider />
+            <ProjectsList projects={publicGoods} />
+          </ProjectsContainer>
+        </Container>
+      </ContentContainer>
     </>
   );
 }