Merge branch 'main' into gas-station-add-logos

src/components/DataRoom/AssetsSecured/SlidingContent.tsx

@@ -1,19 +1,18 @@
+import React, { type RefObject } from 'react'
 import type { BaseBlock } from '@/components/Home/types'
-import { useTransform } from 'framer-motion'
-import css from './styles.module.css'
-import type { RefObject } from 'react'
-import { motion } from 'framer-motion'
+import { motion, useTransform } from 'framer-motion'
 import { Typography } from '@mui/material'
-import { Cex, type CEX } from './Cex'
 import { useSafeDataRoomStats } from '@/hooks/useSafeDataRoomStats'
 import { getNormalizationFactor } from './utils/getNormalizationFactor'
 import { formatDate } from '@/lib/formatDate'
 import { useIsMediumScreen } from '@/hooks/useMaxWidth'
 import { formatValue } from '@/lib/formatValue'
 import useContainerSize from '@/hooks/useContainerSize'
 import useScrollProgress from '@/hooks/useScrollProgress'
+import { ComparisonType, TvlComparison, type TvlComparisonProps } from '@/components/DataRoom/TvlComparison'
+import { LAST_UPDATED_FALLBACK } from '@/components/DataRoom/IndustryComparison'
+import css from './styles.module.css'
 
-const LAST_UPDATED_FALLBACK = 1722946836.34
 const MOBILE_VIEWPORT_FRACTION = 0.8
 const DESKTOP_VIEWPORT_FRACTION = 0.4
 
@@ -22,7 +21,7 @@ export default function SlidingContent({
   caption,
   cexes,
   containerRef,
-}: Omit<BaseBlock, 'text'> & { cexes: CEX[]; containerRef: RefObject<HTMLDivElement> }) {
+}: Omit<BaseBlock, 'text'> & { cexes: TvlComparisonProps[]; containerRef: RefObject<HTMLDivElement> }) {
   const { tvlRobinhoodCEX, tvlOKX, tvlBinance, tvlSafe, lastUpdated } = useSafeDataRoomStats()
   const { width: viewportWidth } = useContainerSize(containerRef)
 
@@ -55,10 +54,10 @@ export default function SlidingContent({
 
   const squareRatio = formatValue(normalizationFactor)
 
-  const transformLTR = useTransform(scrollYProgress, [0.5, 0.75], ['0%', '100%'])
-  const transformRTL = useTransform(scrollYProgress, [0.5, 0.75], ['0', '-100%'])
-  const opacityLTR = useTransform(scrollYProgress, [0.25, 0.35, 0.5, 0.75], [0, 1, 1, 0])
-  const opacityRTL = useTransform(scrollYProgress, [0.1, 0.35, 0.5, 0.75], [0, 1, 1, 0])
+  const transformLTR = useTransform(scrollYProgress, [0.5, 1.0], ['0%', '100%'])
+  const transformRTL = useTransform(scrollYProgress, [0.5, 1.0], ['0', '-100%'])
+  const opacityLTR = useTransform(scrollYProgress, [0.25, 0.35, 0.5, 1.0], [0, 1, 1, 0])
+  const opacityRTL = useTransform(scrollYProgress, [0.1, 0.35, 0.5, 1.0], [0, 1, 1, 0])
 
   return (
     <>
@@ -72,14 +71,17 @@ export default function SlidingContent({
       >
         <div className={css.label}>
           <Typography variant="h5">{caption}</Typography>
-          <Typography variant="h5">1 square - ${squareRatio}</Typography>
+          <Typography variant="h5" sx={{ fontSize: '18px' }}>
+            1 square - ${squareRatio}
+          </Typography>
         </div>
 
         {cexes.map((cex, index) => {
           const tvl = dynamicTvl.find((item) => item.name === cex.name)?.tvl || cex.tvl
 
           return (
-            <Cex
+            <TvlComparison
+              type={ComparisonType.CEX}
               key={index}
               tvl={tvl}
               boxColor={cex.boxColor}

src/components/DataRoom/AssetsSecured/index.tsx

@@ -1,12 +1,12 @@
 import type { BaseBlock } from '@/components/Home/types'
 import dynamic from 'next/dynamic'
 import { useRef } from 'react'
-import { type CEX } from './Cex'
+import type { TvlComparisonProps } from '@/components/DataRoom/TvlComparison'
 import css from './styles.module.css'
 
 const SlidingContent = dynamic(() => import('./SlidingContent'))
 
-const Cexes = ({ title, caption, cexes }: BaseBlock & { cexes: CEX[] }) => {
+const Cexes = ({ title, caption, cexes }: BaseBlock & { cexes: TvlComparisonProps[] }) => {
   const backgroundRef = useRef<HTMLDivElement>(null)
 
   return (

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

@@ -34,44 +34,6 @@
   gap: 32px;
 }
 
-.cexEntry {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 22px;
-}
-
-.squareGrid {
-  display: flex;
-  flex-direction: row;
-  column-gap: 8px;
-  align-items: center;
-}
-
-.gridItem {
-  width: 16px;
-  height: 16px;
-  border-radius: 3px;
-  background-color: var(--mui-palette-primary-light);
-}
-
-.gridItemMain {
-  background-color: var(--mui-palette-primary-main);
-}
-
-.labelContainer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 22px;
-}
-
-.labelCaption {
-  white-space: nowrap;
-  color: var(--mui-palette-primary-light);
-}
-
 @media (max-width: 1000px) {
   .sectionContainer {
     height: 200lvh;
@@ -98,20 +60,6 @@
     padding-bottom: 12px;
   }
 
-  .labelCaption {
-    font-size: 18px;
-  }
-
-  .labelContainer {
-    gap: 12px;
-  }
-
-  .cexEntry {
-    flex-direction: column;
-    align-items: start;
-    gap: 8px;
-  }
-
   .title {
     margin-top: 40px;
     text-align: left;

src/components/DataRoom/CategoryLeaders/Content.tsx

@@ -0,0 +1,85 @@
+import { useTransform } from 'framer-motion'
+import type { RefObject } from 'react'
+import { motion } from 'framer-motion'
+import { Typography } from '@mui/material'
+import { ComparisonType, type TvlComparisonProps } from '@/components/DataRoom/TvlComparison'
+import { useSafeDataRoomStats } from '@/hooks/useSafeDataRoomStats'
+import { useIsMediumScreen } from '@/hooks/useMaxWidth'
+import { formatValue } from '@/lib/formatValue'
+import useScrollProgress from '@/hooks/useScrollProgress'
+import { TvlComparison } from '@/components/DataRoom/TvlComparison'
+import { formatDate } from '@/lib/formatDate'
+import { LAST_UPDATED_FALLBACK } from '@/components/DataRoom/IndustryComparison'
+import type { BaseBlock } from '@/components/Home/types'
+import css from './styles.module.css'
+
+export default function Content({
+  title,
+  leaders,
+  containerRef,
+}: Omit<BaseBlock, 'text'> & { leaders: TvlComparisonProps[]; containerRef: RefObject<HTMLDivElement> }) {
+  const { tvlLido, tvlEigenLayer, tvlUniswap, tvlAAVE, tvlSafe, lastUpdated } = useSafeDataRoomStats()
+
+  const isMobile = useIsMediumScreen()
+  const { scrollYProgress } = useScrollProgress(containerRef)
+
+  // Create a mapping object for TVL values
+  const tvlMapping: Record<string, number | null> = {
+    tvlLido,
+    tvlUniswap,
+    tvlSafe,
+    tvlEigenLayer,
+    tvlAAVE,
+  }
+
+  // Get the TVL values for each LEADER
+  const dynamicTvl = leaders.map(({ name, tvl: tvlFallback }) => {
+    // get the varibale name of the dynamic TVL
+    const dynamicTvlString = `tvl${name.split(' ')[0]}`
+
+    return { name, tvl: tvlMapping[dynamicTvlString] || tvlFallback }
+  })
+
+  const timestamp = lastUpdated || LAST_UPDATED_FALLBACK
+  const formattedDate = formatDate(timestamp)
+
+  const normalizationFactor = 1_000_000_000 // 1 billion
+  const squareRatio = formatValue(normalizationFactor)
+
+  const opacity = useTransform(scrollYProgress, isMobile ? [0, 0.35, 0.5, 1.0] : [0.1, 0.35, 0.5, 0.75], [0, 1, 1, 0])
+
+  return (
+    <motion.div
+      style={{
+        opacity,
+      }}
+      className={css.leadersContainer}
+    >
+      <Typography className={css.title} variant="h1">
+        {title}
+      </Typography>
+
+      <Typography className={css.label} color="primary.light">
+        1 square - ${squareRatio}
+        <span>as of {formattedDate}</span>
+      </Typography>
+
+      <div className={css.columnsGrid}>
+        {[[0, 1], [2], [3, 4]].map((column, columnIndex) => (
+          <div key={columnIndex} className={css.leaderColumn}>
+            {column.map((index) => (
+              <TvlComparison
+                type={ComparisonType.LEADER}
+                key={index}
+                tvl={dynamicTvl.find((item) => item.name === leaders[index].name)?.tvl || leaders[index].tvl}
+                boxColor={leaders[index].boxColor}
+                name={leaders[index].name}
+                normalizationFactor={normalizationFactor}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </motion.div>
+  )
+}

src/components/DataRoom/CategoryLeaders/index.tsx

@@ -0,0 +1,21 @@
+import { useRef } from 'react'
+import dynamic from 'next/dynamic'
+import type { BaseBlock } from '@/components/Home/types'
+import type { TvlComparisonProps } from '@/components/DataRoom/TvlComparison'
+import css from './styles.module.css'
+
+const Content = dynamic(() => import('./Content'))
+
+const Leaders = ({ title, leaders }: BaseBlock & { leaders: TvlComparisonProps[] }) => {
+  const backgroundRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <div ref={backgroundRef} className={css.sectionContainer}>
+      <div className={css.stickyContainer}>
+        <Content title={title} leaders={leaders} containerRef={backgroundRef} />
+      </div>
+    </div>
+  )
+}
+
+export default Leaders

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

@@ -0,0 +1,82 @@
+.sectionContainer {
+  height: 200vh;
+  display: flex;
+}
+
+.stickyContainer {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  padding: 100px 128px;
+  overflow: hidden;
+}
+
+.leadersContainer {
+  position: relative;
+}
+
+.label {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 18px;
+  font-weight: 400;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.columnsGrid {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 100px;
+}
+
+.leaderColumn {
+  display: flex;
+  flex-direction: column;
+  width: 30%;
+  gap: 100px;
+}
+
+@media (max-width: 1000px) {
+  .sectionContainer {
+    height: 200lvh;
+  }
+
+  .stickyContainer {
+    padding: 72px 30px 30px;
+    height: 100lvh;
+    justify-content: space-between;
+  }
+
+  .leadersContainer {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: space-between;
+  }
+
+  .columnsGrid {
+    flex-direction: column;
+    margin-top: 12px;
+    gap: 18px;
+  }
+
+  .leaderColumn {
+    width: 100%;
+    gap: 18px;
+    justify-items: flex-start;
+  }
+
+  .title {
+    margin-top: 0px;
+    text-align: left;
+    font-size: 40px;
+    line-height: 48px;
+  }
+}

src/components/DataRoom/IndustryComparison/index.tsx

@@ -5,6 +5,8 @@ import css from './styles.module.css'
 
 const Content = dynamic(() => import('./Content'))
 
+export const LAST_UPDATED_FALLBACK = 1722946836.34
+
 const IndustryComparison = ({ title }: BaseBlock) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const gridContainerRef = useRef<HTMLDivElement>(null)