From 47628b9d68c07a01b4db5a32c74e759e0a51cf13 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 21 Aug 2024 11:00:32 +0200 Subject: [PATCH 1/6] Hide season card component behind feature flag --- dapp/.env | 1 + dapp/src/constants/featureFlags.ts | 4 ++++ dapp/src/pages/DashboardPage/index.tsx | 4 +++- dapp/src/vite-env.d.ts | 1 + 4 files changed, 9 insertions(+), 1 deletion(-) diff --git a/dapp/.env b/dapp/.env index 686f286e9..06e26af9d 100644 --- a/dapp/.env +++ b/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_SEASON_CARD_COMPONENT_ENABLED="false" diff --git a/dapp/src/constants/featureFlags.ts b/dapp/src/constants/featureFlags.ts index ba55436f9..ff11105d2 100644 --- a/dapp/src/constants/featureFlags.ts +++ b/dapp/src/constants/featureFlags.ts @@ -13,12 +13,16 @@ const WITHDRAWALS_ENABLED = const BEEHIVE_COMPONENT_ENABLED = import.meta.env.VITE_FEATURE_FLAG_BEEHIVE_COMPONENT_ENABLED === "true" +const SEASON_CARD_COMPONENT_ENABLED = + import.meta.env.VITE_FEATURE_FLAG_SEASON_CARD_COMPONENT_ENABLED === "true" + const featureFlags = { GAMIFICATION_ENABLED, OKX_WALLET_ENABLED, XVERSE_WALLET_ENABLED, WITHDRAWALS_ENABLED, BEEHIVE_COMPONENT_ENABLED, + SEASON_CARD_COMPONENT_ENABLED, } export default featureFlags diff --git a/dapp/src/pages/DashboardPage/index.tsx b/dapp/src/pages/DashboardPage/index.tsx index 2453b6012..0a6103ecf 100644 --- a/dapp/src/pages/DashboardPage/index.tsx +++ b/dapp/src/pages/DashboardPage/index.tsx @@ -28,7 +28,9 @@ export default function DashboardPage() { - + {featureFlags.SEASON_CARD_COMPONENT_ENABLED && ( + + )} {/* TODO: Uncomment in post-launch phases */} {/* */} {featureFlags.BEEHIVE_COMPONENT_ENABLED && } diff --git a/dapp/src/vite-env.d.ts b/dapp/src/vite-env.d.ts index fdc08aae7..eb180ce22 100644 --- a/dapp/src/vite-env.d.ts +++ b/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_SEASON_CARD_COMPONENT_ENABLED: string readonly VITE_SUBGRAPH_API_KEY: string readonly VITE_MEZO_PORTAL_API_KEY: string readonly VITE_LATEST_COMMIT_HASH: string From 7b2d2207d02e9a12947e7d44aaf35b5e021d70c5 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 21 Aug 2024 14:43:50 +0200 Subject: [PATCH 2/6] Rephrase env variable, add landing page progress --- dapp/.env | 2 +- .../ArrowAnimatedBackground.tsx | 128 ++++++++++++++++++ dapp/src/constants/featureFlags.ts | 5 +- dapp/src/pages/DashboardPage/index.tsx | 2 +- .../components/CurrentSeasonSection.tsx | 103 +++++++------- dapp/src/vite-env.d.ts | 2 +- 6 files changed, 186 insertions(+), 56 deletions(-) create mode 100644 dapp/src/components/AcrePointsClaimModal/ArrowAnimatedBackground.tsx diff --git a/dapp/.env b/dapp/.env index 06e26af9d..750d2de79 100644 --- a/dapp/.env +++ b/dapp/.env @@ -25,5 +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_SEASON_CARD_COMPONENT_ENABLED="false" +VITE_FEATURE_FLAG_TVL_ENABLED="false" diff --git a/dapp/src/components/AcrePointsClaimModal/ArrowAnimatedBackground.tsx b/dapp/src/components/AcrePointsClaimModal/ArrowAnimatedBackground.tsx new file mode 100644 index 000000000..17fe07b8d --- /dev/null +++ b/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(null) + + useEffect(() => { + const canvasElement = canvasRef.current + const ctx = canvasElement?.getContext("2d") + + if (!ctx) return + + const animation = new ArrowBackgroundAnimation(ctx) + + animation.animate() + }, []) + + return +} + +export default ArrowAnimatedBackground diff --git a/dapp/src/constants/featureFlags.ts b/dapp/src/constants/featureFlags.ts index ff11105d2..c833e2f63 100644 --- a/dapp/src/constants/featureFlags.ts +++ b/dapp/src/constants/featureFlags.ts @@ -13,8 +13,7 @@ const WITHDRAWALS_ENABLED = const BEEHIVE_COMPONENT_ENABLED = import.meta.env.VITE_FEATURE_FLAG_BEEHIVE_COMPONENT_ENABLED === "true" -const SEASON_CARD_COMPONENT_ENABLED = - import.meta.env.VITE_FEATURE_FLAG_SEASON_CARD_COMPONENT_ENABLED === "true" +const TVL_ENABLED = import.meta.env.VITE_FEATURE_FLAG_TVL_ENABLED === "true" const featureFlags = { GAMIFICATION_ENABLED, @@ -22,7 +21,7 @@ const featureFlags = { XVERSE_WALLET_ENABLED, WITHDRAWALS_ENABLED, BEEHIVE_COMPONENT_ENABLED, - SEASON_CARD_COMPONENT_ENABLED, + TVL_ENABLED, } export default featureFlags diff --git a/dapp/src/pages/DashboardPage/index.tsx b/dapp/src/pages/DashboardPage/index.tsx index 0a6103ecf..fde718cb5 100644 --- a/dapp/src/pages/DashboardPage/index.tsx +++ b/dapp/src/pages/DashboardPage/index.tsx @@ -28,7 +28,7 @@ export default function DashboardPage() { - {featureFlags.SEASON_CARD_COMPONENT_ENABLED && ( + {featureFlags.TVL_ENABLED && ( )} {/* TODO: Uncomment in post-launch phases */} diff --git a/dapp/src/pages/LandingPage/components/CurrentSeasonSection.tsx b/dapp/src/pages/LandingPage/components/CurrentSeasonSection.tsx index b24b4f26a..adf54df95 100644 --- a/dapp/src/pages/LandingPage/components/CurrentSeasonSection.tsx +++ b/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 ( @@ -78,52 +78,55 @@ export default function CurrentSeasonSection() { Season 1 stakers will soon be able to earn Acre and Mezo points. - {/* TODO: Uncomment when TVL is higher */} - {/* - Total value locked - + {featureFlags.TVL_ENABLED && ( + <> + + Total value locked + - - - + + + - - Season 1 cap{" "} - - */} + + Season 1 cap{" "} + + + + )} {/* TODO: Uncomment in post-launch phases */} {/* Date: Wed, 21 Aug 2024 14:59:07 +0200 Subject: [PATCH 3/6] Add docs points button --- .../pages/DashboardPage/AcrePointsCard.tsx | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard.tsx index edb57de64..83b64fc6b 100644 --- a/dapp/src/pages/DashboardPage/AcrePointsCard.tsx +++ b/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) { Stake now to secure your spot + {/* TODO: Update `ButtonLink` component and 'link' Button theme variant */} + From 8417c042276381b85ecf6be0e1af36ebacc4866a Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 21 Aug 2024 15:51:06 +0200 Subject: [PATCH 4/6] Revert "Add docs points button" This reverts commit 4742aa433fb5df17344bc2ade88cbd3b62c960ae. --- .../pages/DashboardPage/AcrePointsCard.tsx | 24 +------------------ 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard.tsx index 83b64fc6b..edb57de64 100644 --- a/dapp/src/pages/DashboardPage/AcrePointsCard.tsx +++ b/dapp/src/pages/DashboardPage/AcrePointsCard.tsx @@ -1,24 +1,17 @@ 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 { - IconArrowUpRight, - IconPlayerTrackNextFilled, -} from "@tabler/icons-react" -import { EXTERNAL_HREF } from "#/constants" +import { IconPlayerTrackNextFilled } from "@tabler/icons-react" export default function AcrePointsCard(props: CardProps) { return ( @@ -58,21 +51,6 @@ export default function AcrePointsCard(props: CardProps) { Stake now to secure your spot - {/* TODO: Update `ButtonLink` component and 'link' Button theme variant */} - From 4c0901ea4b46614629cb033bb46384cc1fa02515 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 21 Aug 2024 15:53:54 +0200 Subject: [PATCH 5/6] Remove accidentially pushed file --- .../ArrowAnimatedBackground.tsx | 128 ------------------ 1 file changed, 128 deletions(-) delete mode 100644 dapp/src/components/AcrePointsClaimModal/ArrowAnimatedBackground.tsx diff --git a/dapp/src/components/AcrePointsClaimModal/ArrowAnimatedBackground.tsx b/dapp/src/components/AcrePointsClaimModal/ArrowAnimatedBackground.tsx deleted file mode 100644 index 17fe07b8d..000000000 --- a/dapp/src/components/AcrePointsClaimModal/ArrowAnimatedBackground.tsx +++ /dev/null @@ -1,128 +0,0 @@ -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(null) - - useEffect(() => { - const canvasElement = canvasRef.current - const ctx = canvasElement?.getContext("2d") - - if (!ctx) return - - const animation = new ArrowBackgroundAnimation(ctx) - - animation.animate() - }, []) - - return -} - -export default ArrowAnimatedBackground From fd1a952da73172bd91f18863c59fc7e570d5248e Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 21 Aug 2024 15:58:13 +0200 Subject: [PATCH 6/6] Update deprecated props --- dapp/src/pages/LandingPage/components/CurrentSeasonSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/pages/LandingPage/components/CurrentSeasonSection.tsx b/dapp/src/pages/LandingPage/components/CurrentSeasonSection.tsx index adf54df95..6d4a0698b 100644 --- a/dapp/src/pages/LandingPage/components/CurrentSeasonSection.tsx +++ b/dapp/src/pages/LandingPage/components/CurrentSeasonSection.tsx @@ -99,7 +99,7 @@ export default function CurrentSeasonSection() { base: "greater-balance-md", md: "greater-balance-xl", }} - symbolFontWeight="black" + symbolTextProps={{ fontWeight: "black" }} desiredDecimals={2} // TODO: Refactor `CurrencyBalance` to make font styles truely adjustable />