dApp: Hide <CurrentSeasonCard /> component behind feature flag

dapp/.env

@@ -25,4 +25,5 @@ VITE_FEATURE_FLAG_WITHDRAWALS_ENABLED="false"
 VITE_FEATURE_FLAG_OKX_WALLET_ENABLED="false"
 VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED="false"
 VITE_FEATURE_FLAG_BEEHIVE_COMPONENT_ENABLED="false"
+VITE_FEATURE_FLAG_TVL_ENABLED="false"
 

dapp/src/components/AcrePointsClaimModal/ArrowAnimatedBackground.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useRef } from "react"
+import { BoxProps, Box } from "@chakra-ui/react"
+
+type Point = {
+  x: number
+  y: number
+}
+type Arrow = Point & {
+  opacity: number
+  direction: number
+}
+
+class ArrowBackgroundAnimation {
+  readonly ctx: CanvasRenderingContext2D
+
+  readonly arrows: Arrow[]
+
+  readonly points: Point[]
+
+  readonly cols: number
+
+  readonly rows: number
+
+  constructor(
+    ctx: CanvasRenderingContext2D,
+    options: { speedFactor: number; maxDeviation: number } = {
+      speedFactor: 0.05,
+      maxDeviation: 50,
+    },
+  ) {
+    this.ctx = ctx
+
+    // const arrowPath = new Path2D("M8 2V16M8 2L14 8M8 2L2 8")
+    const gridWidth = 24
+    const gridHeight = 27
+
+    this.cols = Math.floor(this.ctx.canvas.width / gridWidth)
+    this.rows = Math.floor(this.ctx.canvas.height / gridHeight)
+
+    this.arrows = []
+    for (let i = 0; i < this.cols; i + 1) {
+      for (let j = 0; j < this.rows; j + 1) {
+        this.arrows.push({
+          x: i * gridWidth,
+          y: j * gridHeight,
+          opacity: Math.random(),
+          direction: Math.random() > 0.5 ? 1 : -1,
+        })
+      }
+    }
+
+    this.points = []
+    let lastY = this.ctx.canvas.height / 3
+    for (let k = 0; k <= this.cols; k + 1) {
+      const nextY = lastY + (Math.random() - 0.5) * options.maxDeviation
+      this.points.push({
+        x: k * gridWidth,
+        y: Math.min(this.ctx.canvas.height / 2, Math.max(50, nextY)),
+      })
+      lastY = nextY
+    }
+  }
+
+  clearFrame() {
+    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
+  }
+
+  private updateCurve() {
+    this.points.forEach((point) => {
+      point.y += (Math.random() - 0.5) * 2
+    })
+  }
+
+  private drawCurve() {
+    this.ctx.beginPath()
+    this.ctx.moveTo(this.points[0].x, this.points[0].y)
+    for (let i = 1; i < this.points.length - 2; i + 1) {
+      const xc = (this.points[i].x + this.points[i + 1].x) / 2
+      const yc = (this.points[i].y + this.points[i + 1].y) / 2
+      this.ctx.quadraticCurveTo(this.points[i].x, this.points[i].y, xc, yc)
+    }
+    this.ctx.quadraticCurveTo(
+      this.points[this.points.length - 2].x,
+      this.points[this.points.length - 2].y,
+      this.points[this.points.length - 1].x,
+      this.points[this.points.length - 1].y,
+    )
+    this.ctx.lineTo(this.ctx.canvas.width, this.ctx.canvas.height)
+    this.ctx.lineTo(0, this.ctx.canvas.height)
+    this.ctx.closePath()
+    this.ctx.fillStyle = "rgba(255, 255, 255, 0.1)"
+    this.ctx.fill()
+  }
+
+  private updateArrows() {}
+
+  private drawArrows() {}
+
+  animate() {
+    this.clearFrame()
+    this.updateCurve()
+    this.drawCurve()
+    this.updateArrows()
+    this.drawArrows()
+    requestAnimationFrame(this.animate.bind(this))
+  }
+}
+
+type ArrowAnimatedBackgroundProps = BoxProps
+
+function ArrowAnimatedBackground(props: ArrowAnimatedBackgroundProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const canvasElement = canvasRef.current
+    const ctx = canvasElement?.getContext("2d")
+
+    if (!ctx) return
+
+    const animation = new ArrowBackgroundAnimation(ctx)
+
+    animation.animate()
+  }, [])
+
+  return <Box as="canvas" ref={canvasRef} {...props} />
+}
+
+export default ArrowAnimatedBackground

dapp/src/constants/featureFlags.ts

@@ -13,12 +13,15 @@ const WITHDRAWALS_ENABLED =
 const BEEHIVE_COMPONENT_ENABLED =
   import.meta.env.VITE_FEATURE_FLAG_BEEHIVE_COMPONENT_ENABLED === "true"
 
+const TVL_ENABLED = import.meta.env.VITE_FEATURE_FLAG_TVL_ENABLED === "true"
+
 const featureFlags = {
   GAMIFICATION_ENABLED,
   OKX_WALLET_ENABLED,
   XVERSE_WALLET_ENABLED,
   WITHDRAWALS_ENABLED,
   BEEHIVE_COMPONENT_ENABLED,
+  TVL_ENABLED,
 }
 
 export default featureFlags

dapp/src/pages/DashboardPage/AcrePointsCard.tsx

@@ -1,17 +1,24 @@
 import React from "react"
 import { TextLg, TextMd, TextSm } from "#/components/shared/Typography"
 import {
+  Button,
   Card,
   CardBody,
   CardHeader,
   CardProps,
+  Icon,
+  Link,
   Tag,
   TagLeftIcon,
   VStack,
 } from "@chakra-ui/react"
 import acrePointsCardPlaceholderSrc from "#/assets/images/acre-points-card-placeholder.png"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
-import { IconPlayerTrackNextFilled } from "@tabler/icons-react"
+import {
+  IconArrowUpRight,
+  IconPlayerTrackNextFilled,
+} from "@tabler/icons-react"
+import { EXTERNAL_HREF } from "#/constants"
 
 export default function AcrePointsCard(props: CardProps) {
   return (
@@ -51,6 +58,21 @@ export default function AcrePointsCard(props: CardProps) {
             <TextMd color="grey.500" fontWeight="medium">
               Stake now to secure your spot
             </TextMd>
+            {/* TODO: Update `ButtonLink` component and 'link' Button theme variant */}
+            <Button
+              as={Link}
+              href={`${EXTERNAL_HREF.DOCS}/acre-points-program`}
+              isExternal
+              variant="ghost"
+              color="brand.400"
+              iconSpacing={1}
+              rightIcon={
+                <Icon as={IconArrowUpRight} boxSize={4} color="brand.400" />
+              }
+              mt={4}
+            >
+              Read documentation
+            </Button>
           </VStack>
         </UserDataSkeleton>
       </CardBody>

dapp/src/pages/DashboardPage/index.tsx

@@ -28,7 +28,9 @@ export default function DashboardPage() {
       </PageLayoutColumn>
 
       <PageLayoutColumn>
-        <CurrentSeasonCard showSeasonStats={false} />
+        {featureFlags.TVL_ENABLED && (
+          <CurrentSeasonCard showSeasonStats={false} />
+        )}
         {/* TODO: Uncomment in post-launch phases */}
         {/* <GrantedSeasonPassCard /> */}
         {featureFlags.BEEHIVE_COMPONENT_ENABLED && <BeehiveCard />}

dapp/src/pages/LandingPage/components/CurrentSeasonSection.tsx

@@ -7,18 +7,18 @@ import {
   CardBody,
   Image,
 } from "@chakra-ui/react"
-// import ProgressBar from "#/components/shared/ProgressBar"
-// import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
+import ProgressBar from "#/components/shared/ProgressBar"
+import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import { H3, TextMd } from "#/components/shared/Typography"
-// import { SEASON_CAP } from "#/constants"
+import { featureFlags, SEASON_CAP } from "#/constants"
 import { LiveTag } from "#/components/shared/LiveTag"
 import { SeasonSectionBackground } from "#/components/shared/SeasonSectionBackground"
-// import { useSeasonProgress } from "#/hooks"
+import { useSeasonProgress } from "#/hooks"
 import { mezoLogoColor } from "#/assets/images/partner-logos"
 
 export default function CurrentSeasonSection() {
-  // const { progress: seasonProgress, value: seasonTotalAssets } =
-  //   useSeasonProgress()
+  const { progress: seasonProgress, value: seasonTotalAssets } =
+    useSeasonProgress()
 
   return (
     <Box position="relative" mb={5}>
@@ -78,52 +78,55 @@ export default function CurrentSeasonSection() {
           Season 1 stakers will soon be able to earn Acre and Mezo points.
         </TextMd>
 
-        {/* TODO: Uncomment when TVL is higher */}
-        {/* <TextMd fontWeight="semibold" mb={4}>
-          Total value locked
-        </TextMd>
+        {featureFlags.TVL_ENABLED && (
+          <>
+            <TextMd fontWeight="semibold" mb={4}>
+              Total value locked
+            </TextMd>
 
-        <ProgressBar
-          size={{
-            base: "xl",
-            md: "2xl",
-          }}
-          value={seasonProgress}
-          maxW="50rem" // 800px
-        >
-          <CurrencyBalance
-            amount={seasonTotalAssets}
-            currency="bitcoin"
-            variant={{
-              base: "greater-balance-md",
-              md: "greater-balance-xl",
-            }}
-            symbolFontWeight="black"
-            desiredDecimals={2}
-            // TODO: Refactor `CurrencyBalance` to make font styles truely adjustable
-          />
-        </ProgressBar>
+            <ProgressBar
+              size={{
+                base: "xl",
+                md: "2xl",
+              }}
+              value={seasonProgress}
+              maxW="50rem" // 800px
+            >
+              <CurrencyBalance
+                amount={seasonTotalAssets}
+                currency="bitcoin"
+                variant={{
+                  base: "greater-balance-md",
+                  md: "greater-balance-xl",
+                }}
+                symbolFontWeight="black"
+                desiredDecimals={2}
+                // TODO: Refactor `CurrencyBalance` to make font styles truely adjustable
+              />
+            </ProgressBar>
 
-        <TextMd
-          fontSize={{ md: "xl" }}
-          lineHeight={{ md: "xl" }}
-          display="flex"
-          whiteSpace="pre"
-          mt={2}
-          mb={{
-            base: 10,
-            md: "7.5rem", // 120px
-          }}
-        >
-          Season 1 cap{" "}
-          <CurrencyBalance
-            as="span"
-            size={{ base: "", md: "xl" }}
-            amount={SEASON_CAP}
-            currency="bitcoin"
-            desiredDecimals={0}
-          />
-        </TextMd> */}
+            <TextMd
+              fontSize={{ md: "xl" }}
+              lineHeight={{ md: "xl" }}
+              display="flex"
+              whiteSpace="pre"
+              mt={2}
+              mb={{
+                base: 10,
+                md: "7.5rem", // 120px
+              }}
+            >
+              Season 1 cap{" "}
+              <CurrencyBalance
+                as="span"
+                size={{ base: "", md: "xl" }}
+                amount={SEASON_CAP}
+                currency="bitcoin"
+                desiredDecimals={0}
+              />
+            </TextMd>
+          </>
+        )}
 
         {/* TODO: Uncomment in post-launch phases */}
         {/*  <Flex

dapp/src/vite-env.d.ts

@@ -12,6 +12,7 @@ interface ImportMetaEnv {
   readonly VITE_FEATURE_FLAG_OKX_WALLET_ENABLED: string
   readonly VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED: string
   readonly VITE_FEATURE_FLAG_BEEHIVE_COMPONENT_ENABLED: string
+  readonly VITE_FEATURE_FLAG_TVL_ENABLED: string
   readonly VITE_SUBGRAPH_API_KEY: string
   readonly VITE_MEZO_PORTAL_API_KEY: string
   readonly VITE_LATEST_COMMIT_HASH: string