feat: Data room landing page (#387)

* feat: create dataroom page and sections placeholders (#386)

* feat: section Dune links (#389)

* feat: Dune boards

* styles: ExternalLinkCard

* styles: sync card hover transitions

* styles: reorder CSS properties

* styles: mobile responsiveness

* feat: External Reports section (#390)

* fix: card link height

* feat: External reports

* feat: move DataRoom content to JSON file

* feat: Links component (#391)

* feat: LinksWrapper - Dune dashboard

* add Social icons

* Add Cryptopunks Component (#395)

* feat: 🎸 Add Cryptopunks Component

* refactor: 💡 Change inline calculations to functions

* Update function to const

Co-authored-by: Diogo Soares <[email protected]>

* fix: 🐛 updates as PR comments

* refactor: 💡 update css class names to be lowercase

* refactor: 💡 update const names as per PR comments

---------

Co-authored-by: Diogo Soares <[email protected]>

* fix: use SVG import (#396)

* Add USDCStorage Section With MatterJS (#392)

* feat: 🎸 Add USDCStorage Section With MatterJS

* fix: 🐛 Overflow Bug

* refactor: 💡 remove redundant function

* refactor: 💡 Update comments and remove dead code

* refactor: 💡 update based on PR comments

* refactor: 💡 Updates based on PR  comments

* refactor: 💡 extract functions to MatterJSUtils

* Add Volume Transferred Component (#393)

* feat: 🎸 Add Component Volume Transferred

* fix: 🐛 updates based on PR comments

* Update src/components/DataRoom/VolumeTransferred/styles.module.css

---------

Co-authored-by: Diogo Soares <[email protected]>

* Add Transactions On Chain Component (#394)

* feat: 🎸 Add Transactions On Chain Component

* refactor: 💡 update as per PR comments

* refactor: 💡 updates based on PR comments

* fix: lint

* Add mobile support for cryptopunks component (#402)

* feat: 🎸 add mobile support for cryptopunks component

* fix: 🐛 update breakpoint

* fix: 🐛 update breakpoint

* fix: 🐛 updates based on PR comments

* fix: 🐛 update line-height to use px

* Update isMobile Hook

Co-authored-by: Diogo Soares <[email protected]>

* fix: 🐛 update import for useIsMediumScreen

---------

Co-authored-by: Diogo Soares <[email protected]>

* Add mobile support for volume transferred component (#400)

* feat: 🎸 add mobile support for volume transferred component

* fix: 🐛 update breakpoint

* style: 💄 reduce font size for volume amount

* Add mobile support for transactions on chain component (#401)

* feat: 🎸 add mobile support for transactions on chain component

* fix: 🐛 update breakpoint

* fix: 🐛 update breakpoint to use useIsMediumScreen

* fix: 🐛 update consts

* Add mobile layout for USDC storage component (#403)

* feat: 🎸 Add mobile layout for USDC storage component

* fix: 🐛 update based on PR comments

* refactor: 💡 separate out utils

* fix: 🐛 imports

* fix: remove sections that won't make it to v1

* fix: use flex- prefix in CSS

* chore: replace logos for SVGs

* refactor: delete redundant component

* refactor: move utils functions inside a /utils folder

* chore: update meta data

* chore: remove unused section component

* Apply suggestions from code review

Co-authored-by: Aaron Cook <[email protected]>

* fix: use consts for thresholds

* fix: address PR comments

---------

Co-authored-by: Malay Vasa <[email protected]>
Co-authored-by: Aaron Cook <[email protected]>

package.json

@@ -31,6 +31,7 @@
     "fuse.js": "^6.6.2",
     "isomorphic-dompurify": "^1.0.0",
     "lodash": "^4.17.21",
+    "matter-js": "^0.20.0",
     "next": "13.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -46,6 +47,7 @@
     "@types/dompurify": "^2.4.0",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.191",
+    "@types/matter-js": "^0.19.6",
     "@types/node": "18.11.18",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",

src/components/DataRoom/CryptoPunks/index.tsx

@@ -0,0 +1,133 @@
+import { Typography } from '@mui/material'
+import type { BaseBlock } from '@/components/Home/types'
+import { useRef } from 'react'
+import { useScroll, motion, useTransform } from 'framer-motion'
+import type { ReactNode } from 'react'
+import type { MotionValue } from 'framer-motion'
+import css from './styles.module.css'
+import LinksWrapper from '../LinksWrapper'
+import { getRandomColor } from '@/components/DataRoom/CryptoPunks/utils/getRandomColor'
+import CryptoPunk from '@/public/images/DataRoom/cryptopunk-silhouette.svg'
+import { useIsMediumScreen } from '@/hooks/useMaxWidth'
+
+const CRYPTOPUNKS_PERCENTAGE = '14%'
+const CRYPTOPUNKS_FRACTION = '1369/10,000'
+
+const CRYPTOPUNK_ROWS_NR = 8
+const CRYPTOPUNK_COLUMNS_NR = 24
+
+const CryptoPunks = ({ title, text, link }: BaseBlock) => {
+  const backgroundRef = useRef<HTMLDivElement>(null)
+  const isMobile = useIsMediumScreen()
+  const { scrollYProgress } = useScroll({
+    target: backgroundRef,
+    offset: ['start end', 'end start'],
+  })
+
+  return (
+    <div ref={backgroundRef} className={css.sectionContainer}>
+      <div className={css.stickyContainer}>
+        <LeftPanel scrollYProgress={scrollYProgress} isMobile={isMobile} />
+
+        <RightPanel scrollYProgress={scrollYProgress} isMobile={isMobile}>
+          <Typography variant="h2" className={css.text}>
+            {text}
+          </Typography>
+
+          <Typography variant="h2">{title}</Typography>
+
+          <div className={css.statsContainer}>
+            <Typography variant="h1" className={css.percentage}>
+              {CRYPTOPUNKS_PERCENTAGE}
+            </Typography>
+
+            <Typography variant="h2" className={css.fraction}>
+              {CRYPTOPUNKS_FRACTION}
+            </Typography>
+          </div>
+
+          {link && <LinksWrapper {...link} />}
+        </RightPanel>
+      </div>
+    </div>
+  )
+}
+
+const LeftPanel = ({ scrollYProgress, isMobile }: { scrollYProgress: MotionValue<number>; isMobile: boolean }) => {
+  const translateParams = isMobile ? [0, 1] : [0.25, 0.75]
+  const opacity = useTransform(scrollYProgress, [0, 0.25, 0.7, 0.75], [0, 1, 1, 0])
+  const translateLTR = useTransform(scrollYProgress, translateParams, ['-50%', '0%'])
+  const translateRTL = useTransform(scrollYProgress, translateParams, ['0%', '-50%'])
+
+  const translateDirection = (index: number) => (index % 2 === 1 ? translateLTR : translateRTL)
+
+  return (
+    <motion.div
+      style={{
+        opacity,
+      }}
+      className={css.leftPanelContainer}
+    >
+      {Array.from({ length: CRYPTOPUNK_ROWS_NR }).map((_, outerIndex) => (
+        <motion.div
+          style={{ translateX: translateDirection(outerIndex) }}
+          className={css.cryptoPunkColumns}
+          key={outerIndex}
+        >
+          {Array.from({ length: CRYPTOPUNK_COLUMNS_NR }).map((_, innerIndex) => (
+            <motion.div
+              key={innerIndex}
+              initial={{ opacity: 0, scale: 0.5 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              transition={{
+                duration: 0.3,
+              }}
+              style={{
+                transformOrigin: 'center',
+                color: getRandomColor(),
+              }}
+            >
+              <CryptoPunk className={css.cryptopunk} />
+            </motion.div>
+          ))}
+        </motion.div>
+      ))}
+    </motion.div>
+  )
+}
+
+const RightPanel = ({
+  scrollYProgress,
+  children,
+  isMobile,
+}: {
+  scrollYProgress: MotionValue<number>
+  children: ReactNode
+  isMobile: boolean
+}) => {
+  const opacityParams = isMobile ? [0.4, 0.45, 0.65, 0.66] : [0.25, 0.35, 0.65, 0.7]
+  const translateParams = isMobile ? [0.4, 0.45, 0.65, 0.7] : [0.25, 0.35, 0.65, 0.75]
+  const opacity = useTransform(scrollYProgress, opacityParams, [0, 1, 1, 0])
+  const bgTranslate = useTransform(scrollYProgress, translateParams, ['100%', '0%', '0%', '100%'])
+
+  return (
+    <div className={css.rightPanelContainer}>
+      <motion.div
+        className={css.rightPanelContent}
+        style={{
+          opacity,
+        }}
+      >
+        {children}
+      </motion.div>
+      <motion.div
+        className={css.rightPanelBG}
+        style={{
+          translateX: bgTranslate,
+        }}
+      ></motion.div>
+    </div>
+  )
+}
+
+export default CryptoPunks

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

@@ -0,0 +1,137 @@
+.sectionContainer {
+  height: 300vh;
+  display: flex;
+}
+
+.stickyContainer {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  height: 100dvh;
+  display: flex;
+}
+
+.rightPanelContainer {
+  width: 50%;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  color: var(--mui-palette-text-dark);
+  overflow-x: hidden;
+  display: flex;
+  align-items: flex-end;
+  padding-top: 64px;
+}
+
+.rightPanelContent {
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 64px;
+  height: 100%;
+  gap: 30px;
+}
+
+.rightPanelBG {
+  position: absolute;
+  inset: 0;
+  background-color: var(--mui-palette-primary-main);
+  z-index: 10;
+  margin-top: 72px;
+}
+
+.percentage {
+  font-size: 120px;
+  line-height: 120px;
+}
+
+.text {
+  font-size: 16px;
+  line-height: 24px;
+  align-self: flex-start;
+  margin-bottom: auto;
+}
+
+.fraction {
+  font-size: 32px;
+  line-height: 32px;
+}
+
+.statsContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.leftPanelContainer {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  color: var(--mui-palette-border-light);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  gap: 12px;
+  padding-top: 80px;
+}
+
+.cryptopunk {
+  width: 80px;
+}
+
+.cryptoPunkColumns {
+  display: flex;
+  gap: 24px;
+}
+
+@media (max-width: 900px) {
+  .sectionContainer {
+    height: 400dvh;
+  }
+  .stickyContainer {
+    flex-direction: column-reverse;
+  }
+
+  .leftPanelContainer {
+    padding-top: 72px;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanelContainer {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .rightPanelContent {
+    justify-content: end;
+    padding: 30px;
+    gap: 30px;
+  }
+
+  .rightPanelBG {
+    margin-top: 64px;
+  }
+
+  .statsContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  .leftPanelContainer {
+    overflow: hidden;
+  }
+
+  .cryptopunk {
+    width: 60px;
+  }
+
+  .cryptoPunkColumns {
+    gap: 12px;
+  }
+}

src/components/DataRoom/CryptoPunks/utils/getRandomColor.ts

@@ -0,0 +1,21 @@
+/**
+ * Generates a random color code based on predefined probabilities.
+ *
+ * The function selects a color based on a random chance. The colors and their associated
+ * probabilities are as follows:
+ * - Green (#12FF80) with a 14% chance,
+ * - Dark Green (#12A154) with a 3% chance,
+ * - Darker Green (#124228) with a 3% chance.
+ * If none of these conditions are met, it defaults to the 'currentColor'.
+ *
+ * @returns {string} A string representing the color code or 'currentColor'.
+ */
+export function getRandomColor() {
+  const chance = Math.random()
+
+  if (chance <= 0.24) return '#12FF80' // Green (14% CHANCE)
+  if (chance <= 0.17) return '#12A154' // Dark Green (3% CHANCE)
+  if (chance <= 0.2) return '#124228' // Darker Green (3% CHANCE)
+
+  return 'currentColor'
+}