Add WorldGDP Section (#418)

* feat: 🎸 Add WorldGDP Section

* feat: 🎸 update video

* feat: 🎸 integrate live dune data

* fix: 🐛 update fallback

* fix: 🐛 update LinksWrapper and Fallback values

* fix: 🐛 address PR comments

* fix: 🐛 address PR comments

src/components/DataRoom/USDCStorage/index.tsx

@@ -5,7 +5,7 @@ import MatterCanvas from './MatterCanvas'
 import { useRef } from 'react'
 import LinksWrapper from '../LinksWrapper'
 import css from './styles.module.css'
-import MotionTypography from './MotionTypography'
+import MotionTypography from '@/components/common/MotionTypography'
 import { useIsMediumScreen } from '@/hooks/useMaxWidth'
 import { useSafeDataRoomStats } from '@/hooks/useSafeDataRoomStats'
 
@@ -48,10 +48,10 @@ const USDCStorage = ({ title, text, link, image }: BaseBlock) => {
           }}
           className={css.content}
         >
-          <MotionTypography customDelay={0.5}>
+          <MotionTypography animateYFrom={50} customDelay={0.5}>
             <Typography variant="h2">{title}</Typography>
           </MotionTypography>
-          <MotionTypography customDelay={1.5}>
+          <MotionTypography animateYFrom={50} customDelay={1.5}>
             <Typography className={css.usdcPercentage}>
               <b>{displayValue}</b>
             </Typography>

src/components/DataRoom/WorldGDP/index.tsx

@@ -0,0 +1,54 @@
+import { Typography } from '@mui/material'
+import type { BaseBlock } from '@/components/Home/types'
+import LinksWrapper from '@/components/DataRoom/LinksWrapper'
+import css from './styles.module.css'
+import { useSafeDataRoomStats } from '@/hooks/useSafeDataRoomStats'
+import { formatCurrency } from '@/lib/formatCurrency'
+import MotionTypography from '@/components/common/MotionTypography'
+
+const VALUE_LOCKED_FALLBACK = 68_583_703_689
+const PERCENTAGE_FALLBACK = 0.000679
+
+const WorldGDP = ({ title, subtitle, link }: BaseBlock & { subtitle: string }) => {
+  const { tvlToGDPPercentage, totalValueLocked } = useSafeDataRoomStats()
+  const valueLocked = totalValueLocked || VALUE_LOCKED_FALLBACK
+  const percentageValue = tvlToGDPPercentage || PERCENTAGE_FALLBACK
+
+  const displayTVLValue = formatCurrency(valueLocked, 0)
+  const percentageToDisplay = '~' + (percentageValue * 100).toFixed(2) + '%'
+
+  return (
+    <div className={css.sectionContainer}>
+      <div className={css.stickyContainer}>
+        {/* This element is commented out as we are waiting on the final copy*/}
+        {/* <Typography className={css.text}>{text}</Typography> */}
+
+        <div className={css.contentContainer}>
+          <MotionTypography animateYFrom={-30} customDelay={0.2}>
+            <div>
+              <video className={css.video} src="/videos/DataRoom/SafeGlobe.mp4" autoPlay muted loop />
+            </div>
+          </MotionTypography>
+
+          <MotionTypography animateYFrom={-30} customDelay={0.5}>
+            <div className={css.percentContainer}>
+              <Typography variant="h2" align="center">
+                {title} {percentageToDisplay} {subtitle}
+              </Typography>
+            </div>
+          </MotionTypography>
+
+          <MotionTypography animateYFrom={-30} customDelay={0.7}>
+            <Typography variant="h1" color="primary.main">
+              {displayTVLValue}
+            </Typography>
+          </MotionTypography>
+        </div>
+
+        <div className={css.linksContainer}>{link && <LinksWrapper link={link} />}</div>
+      </div>
+    </div>
+  )
+}
+
+export default WorldGDP

src/components/DataRoom/WorldGDP/styles.module.css

@@ -0,0 +1,71 @@
+.sectionContainer {
+  height: 150vh;
+  position: relative;
+}
+
+.stickyContainer {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  padding: 108px 36px 0;
+}
+
+.video {
+  width: 400px;
+  opacity: 0.8;
+}
+
+.text {
+  font-size: 16px;
+  line-height: 24px;
+  align-self: flex-start;
+}
+
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.percentContainer {
+  margin-top: 24px;
+  display: flex;
+  gap: 12px;
+}
+
+.linksContainer {
+  position: absolute;
+  top: 108px;
+  right: 36px;
+}
+
+@media (max-width: 900px) {
+  .contentContainer {
+    flex-grow: 1;
+  }
+
+  .stickyContainer {
+    padding: 72px 30px 0;
+    align-items: center;
+  }
+
+  .linksContainer {
+    position: static;
+    margin: 0;
+    align-self: flex-start;
+  }
+
+  .percentContainer {
+    margin-top: 12px;
+    flex-direction: column;
+    gap: 0px;
+  }
+
+  .video {
+    width: 300px;
+  }
+}

src/components/DataRoom/USDCStorage/MotionTypography.tsx → src/components/common/MotionTypography/index.tsx

@@ -1,12 +1,20 @@
 import React from 'react'
 import { motion } from 'framer-motion'
 
-const MotionTypography = ({ customDelay, children }: { customDelay: number; children: React.ReactNode }) => {
+const MotionTypography = ({
+  customDelay,
+  children,
+  animateYFrom,
+}: {
+  customDelay: number
+  children: React.ReactNode
+  animateYFrom: number
+}) => {
   // Define Animation Variants For Content
   const variants = {
     initial: {
       opacity: 0,
-      y: 50,
+      y: animateYFrom,
     },
     animate: (custom: number) => ({
       opacity: 1,
@@ -16,13 +24,7 @@ const MotionTypography = ({ customDelay, children }: { customDelay: number; chil
   }
 
   return (
-    <motion.div
-      variants={variants}
-      initial="initial"
-      custom={customDelay}
-      whileInView="animate"
-      viewport={{ once: true }}
-    >
+    <motion.div variants={variants} initial="initial" custom={customDelay} whileInView="animate">
       {children}
     </motion.div>
   )

src/content/dataroom.json

@@ -10,6 +10,16 @@
     "title": "Welcome to Safe Data Room",
     "text": "Explore Mind Bending Sats from Safe Universe"
   },
+  {
+    "component": "DataRoom/WorldGDP",
+    "title": "<b><em>Safe</em> TVL</b> is",
+    "subtitle": "of World GDP at",
+    "text": "Some text thats changing<br/>Confirming the sources of the data<br/>Any other info regarding the stats",
+    "link": {
+      "title": "Dune dashboard",
+      "href": "https://dune.com/queries/3710102/6242478"
+    }
+  },
   {
     "component": "DataRoom/USDCStorage",
     "title": "We store...<br/>",

src/contexts/SafeDataRoomContext.ts

@@ -1,6 +1,7 @@
 import { createContext } from 'react'
 
 type SafeDataRoomStats = {
+  totalValueLocked: number | null
   tvlToGDPPercentage: number | null
   usdcPercentageStored: number | null
   cryptoPunksStoredPercentage: number | null
@@ -9,6 +10,7 @@ type SafeDataRoomStats = {
 }
 
 const SafeDataRoomContext = createContext<SafeDataRoomStats>({
+  totalValueLocked: null,
   tvlToGDPPercentage: null,
   usdcPercentageStored: null,
   cryptoPunksStoredPercentage: null,

src/pages/dataroom.tsx

@@ -11,13 +11,20 @@ export async function getStaticProps() {
 
   if (!dataRoomStats) return null
 
-  const { tvl_perc_world_gdp, total_usdc_share, crypto_punks_perc, total_transfer_volume, transaction_share } =
-    dataRoomStats
+  const {
+    tvl_perc_world_gdp,
+    total_usdc_share,
+    crypto_punks_perc,
+    safe_tvl,
+    total_transfer_volume,
+    transaction_share,
+  } = dataRoomStats
 
   return {
     props: {
       safeDataRoomStats: {
         tvlToGDPPercentage: tvl_perc_world_gdp,
+        totalValueLocked: safe_tvl,
         usdcPercentageStored: total_usdc_share,
         // This is a temp workaround. The received value should be a number.
         cryptoPunksStoredPercentage: Number(crypto_punks_perc),