Landing page's `SeasonCountdownSection` component #368

kpyszkowski · 2024-04-16T21:11:21Z

Goal:

To implement Landing page's SeasonCountdownSection component

Features:

Reusable CountdownTimer component with fancy digits animation
Scroll controlled parallax background animation with dynamic noise
Animated pulse ornament in Live tag element

Adjusted section's background, added additional theme spacing values, adjusted Tag component theme, fixed potential memory leak in background dynamic noise seed.

netlify · 2024-04-16T21:11:42Z

✅ Deploy Preview for acre-dapp-testnet ready!

Name	Link
🔨 Latest commit	`a4ba563`
🔍 Latest deploy log	https://app.netlify.com/sites/acre-dapp-testnet/deploys/661f976820d1c500093f6d82
😎 Deploy Preview	https://deploy-preview-368--acre-dapp-testnet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

dapp/src/assets/images/season-countdown-section-foreground.png

dapp/src/pages/LandingPage/SeasonCountdownSection.tsx

dapp/src/pages/LandingPage/index.tsx

dapp/src/theme/Tag.ts

ioay

Please add information about the number of the closed task in PR description:
Closes: #368

kpyszkowski · 2024-04-17T09:40:38Z

@ioay
Ref: #368 (review)
It's redundant, merging the referencing pull request also closes the referenced pull request.

ioay · 2024-04-17T10:14:47Z

@ioay Ref: #368 (review) It's redundant, merging the referencing pull request also closes the referenced pull request.

I mean using a link to a task related to this PR (#368), not to an epic (#355) :)

kpyszkowski · 2024-04-17T11:22:15Z

I mean using a link to a task related to this PR (#368), not to an epic (#355) :)

I don't see any problems. I indicated the issue #355 (not epic) as a reference to this PR.
I don't want to close the issue by merging this PR because there are many PRs yet to be merged in order to complete this issue. After all the issue will be closed. 🙂

ioay · 2024-04-17T16:43:03Z

I mean using a link to a task related to this PR (#368), not to an epic (#355) :)

I don't see any problems. I indicated the issue #355 (not epic) as a reference to this PR. I don't want to close the issue by merging this PR because there are many PRs yet to be merged in order to complete this issue. After all the issue will be closed. 🙂

Ahh, I assumed that every PR created refers to a subtask created in #355 :) In the future, let's try to create PR per task, and provide the division you used in separate commits 👍🏻

ioay · 2024-04-17T16:54:43Z

Screen.Recording.2024-04-17.at.18.52.16.mov

Let's update the cursor type to default on hover.

ioay · 2024-04-22T15:57:27Z

Let's handle dates from the past and instead of displaying NaN values we should use 0:

kpyszkowski · 2024-04-22T16:45:53Z

Let's handle dates from the past and instead of displaying NaN values we should use 0

Ref commit: b876889

ioay · 2024-04-23T10:07:26Z

We should catch these glitches on window resize (useSize hook should be helpful):

Screen.Recording.2024-04-23.at.12.02.40.mov

kpyszkowski · 2024-04-23T13:10:15Z

We should catch these glitches on window resize (useSize hook should be helpful)

Resolved the issue. Used useSize hook provided by Chakra. Perhaps it should be considered to remove the hook you propose in favor of existing solution.
There is still a little glitch as a value changes (right edge of SVG updates with a slight delay). Not a blocker. Could be resolved in the future. Left todo comment.

Ref commit: 32db87b

Applied adjustments accordingly to Figma updates

r-czajkowski

Left few non-blocking comments overall the code LGTM.

r-czajkowski · 2024-04-25T16:40:48Z

dapp/src/components/shared/SeasonCountdownSection/index.ts

I would consider moving the SeasonCountdownSection dir to the pages/LandingPages/components because it is rather not a shared component but specific for landing page.

Ref commit: a26e6ea

I agree that it should be in the pages/LandingPages directory but I am not convinced about nesting it in the components directory. More info here.

r-czajkowski · 2024-04-25T16:44:45Z

dapp/src/components/shared/SeasonCountdownSection/SeasonCountdownSectionBackground.tsx

+      <Box
+        as="rect"
+        mixBlendMode="soft-light"
+        // TOOD: Investigate width update delay


Are we going to address it in a separate PR? Or maybe it's already addressed?

It's a barely noticeable issue. Most of ppl won't even notice.
I gave it a shot and it looks like we can't do much with it. It's browser specific and depends on how the browser (Chromium in Ledger Live's case) processes SVG transformations.
Let's leave it for possible future consideration.

If we want to spend more time on the investigation in the future let's create an issue and add it to the list at #154 EPIC.
If there is nothing more we can do let's live with it and remove the TODO.

Moved to `components` subdirectory

r-czajkowski · 2024-04-26T16:36:19Z

I still see NaN (on preview link https://deploy-preview-368--acre-dapp-testnet.netlify.app/)

Also, there is a weird scroll effect lot of space at the bottom. Not sure if this is intentional.

Nagranie.z.ekranu.2024-04-26.o.18.29.07.mov

There was a bug where the negative values returned by `useCountdown` hook were parsed incorrectly. This commit simplifies the approach leveraging `reduce` array method. Also added new type definition - Tuple

kpyszkowski · 2024-04-29T14:09:50Z

@r-czajkowski

I still see NaN (on preview link https://deploy-preview-368--acre-dapp-testnet.netlify.app/)

There is an issue with preview deployment target branch resolution as discussed on weekly call.
The preview is stale. Please checkout on the branch locally in order to perform tests.

Nevertheless by deeper analysis of NaN values issue I discovered one more bug caused by the way the useCountdown is designed. When the timestamp is passed, time units returned by the hook are negative values instead of 0 (counter intuitive, perhaps bug of the hook ???).

I resolved it on the level of component. Perhaps we'd like to resolve it globally on the level of hook. Not sure if negative values is expected behaviour. As i said - counter intuitive to me.

Ref commit: 99ba8fb

kkosiorowska · 2024-05-01T10:42:03Z

dapp/src/theme/Tag.ts

+  defaultProps: { variant: "outline" },
+  baseStyle: {
+    container: containerStyle,
+  },
+  variants: {
+    solid: {
+      container: {
+        borderWidth: 0,
+      },
+    },
+    outline: {
+      container: {
+        borderColor: "white",
+        borderWidth: 1,
+      },
+    },
+  },


I would like to avoid this approach. I feel that this makes the theme less readable. What do you think about it? Chakra does it similarly see here.

const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys) const baseStyleContainer = defineStyle({ borderRadius: "full", w: "fit-content", bg: "gold.100", paddingX: 4, paddingY: 2.5, shadow: "none", }) const baseStyle = multiStyleConfig.definePartsStyle({ container: baseStyleContainer, }) const variantSolid = multiStyleConfig.definePartsStyle({ container: { borderWidth: 0, }, }) const variantOutline = multiStyleConfig.definePartsStyle({ container: { borderColor: "white", borderWidth: 1, }, }) const variants = { solid: variantSolid, outline: variantOutline, } export const tagTheme = multiStyleConfig.defineMultiStyleConfig({ defaultProps: { variant: "outline" }, baseStyle, variants, })

kkosiorowska · 2024-05-01T11:08:45Z

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

+        <Heading fontSize="5xl" fontWeight="bold" mb={4}>
+          Season 1. Pre-launch staking
+        </Heading>


We would probably want to use an already prepared component for this. I know that style guide is not yet ready but I believe that it will make it easier for us to standardize later.

Suggested change

<Heading fontSize="5xl" fontWeight="bold" mb={4}>

Season 1. Pre-launch staking

</Heading>

<H3 fontWeight="bold" mb={4}>

Season 1. Pre-launch staking

</H3>

kkosiorowska · 2024-05-01T11:12:31Z

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

+        <Text fontSize="lg" fontWeight="medium" mb={10}>
+          Season 1 users that stake bitcoin before Acre launches earn the <br />
+          highest rewards and first access to upcoming Seasons.
+        </Text>


Similar situation as above.

Suggested change

<Text fontSize="lg" fontWeight="medium" mb={10}>

Season 1 users that stake bitcoin before Acre launches earn the <br />

highest rewards and first access to upcoming Seasons.

</Text>

<TextLg mb={10}>

Season 1 users that stake bitcoin before Acre launches earn the <br />

highest rewards and first access to upcoming Seasons.

</TextLg>

kkosiorowska · 2024-05-01T11:31:54Z

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

+  CountdownTimer,
+} from "#/components/shared/SeasonCountdownSection"
+
+const MOCK_SEASON_DUE_TIMESTAMP = new Date(2024, 3, 30).getTime() / 1000


We can do it later but just flagging. We would probably want to save this as an env variable. Then save this value in constants.

VITE_SEASON_START_DATE="2024-03-30"

Example solution for VITE_REFERRAL:

acre/dapp/src/constants/staking.ts

Line 1 in efcb6ed

export const REFERRAL = import.meta.env.VITE_REFERRAL

kkosiorowska · 2024-05-01T11:50:20Z

dapp/src/pages/LandingPage/index.tsx

-      px={10}
+      px={16} // 40px + 24px
      pb={10}
-      maxW="100.625rem"
+      maxW="87.25rem" // 1268px + 2 * (40px + 24px)
      mx="auto"
    >
      <HeroSection />
+      <SeasonCountdownSection />
    </Flex>


I don't quite understand what's going on here. 😅 I don't quite understand why we set maxW.

Why can't we do it like this? 🤔

<Flex flexDirection="column"> <HeroSection /> <SeasonCountdownSection /> </Flex>

kkosiorowska · 2024-05-01T12:21:16Z

dapp/src/components/shared/SeasonCountdownSection/index.ts

I would suggest to change the name of this directory. More information here. SeasonCountdownSection as a directory has no exports and likely will never export a component with this name. If we can let's use lowercasing directory names like this that are purely categorical.

kkosiorowska · 2024-05-01T12:32:21Z

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

I think we don't need to nest these components in the components directory. I have a feeling that this may cause some confusion. Please check this thread. I believe that if the LandingPage folder grows we will think about some refactoring on structure.

kkosiorowska

I don't want to block this PR. Overall, it looks good. I left some comments/suggestions for improvements later. 🚀

Closes: #363 ## Goal: To implement Landing Page This PR aggregates all component PRs to finally complete the implementation of landing page ## Component PRs: The list of PRs is given in the issue's description. Each component PR merges to this PR. - #357 - #358 - #364 - #368 - #369 ## Designs: <img width="1205" alt="image" src="https://github.com/thesis/acre/assets/11503879/be6b6ed2-a808-483e-9daf-43d2c042cba4">

kpyszkowski added 3 commits April 16, 2024 14:39

Implement SeasonCountdownSection background

ea11fbb

Implement SeasonCountdownSection's typography

322644a

Implement CountdownTimer component

ff59bb6

Adjusted section's background, added additional theme spacing values, adjusted Tag component theme, fixed potential memory leak in background dynamic noise seed.

kpyszkowski requested review from ioay and r-czajkowski April 16, 2024 21:11

kpyszkowski mentioned this pull request Apr 16, 2024

dApp Landing Page MVP #355

Closed

kpyszkowski self-assigned this Apr 16, 2024

Update export directive

61a9503

ioay reviewed Apr 16, 2024

View reviewed changes

kpyszkowski added 4 commits April 17, 2024 00:38

Adjust CountdownTimer animation`

f60dfb8

Adjust background parallax offset boundaries

076d2ce

Remove Tag shadow

e962925

Recompose component structure

a4ba563

kpyszkowski mentioned this pull request Apr 17, 2024

Landing page's HeroSection component #364

Merged

kpyszkowski changed the base branch from main to landing-page April 18, 2024 12:04

Merge branch 'landing-page' into landing-season-countdown-section

e958c8e

kpyszkowski force-pushed the landing-season-countdown-section branch from 7736be0 to e958c8e Compare April 18, 2024 12:09

kpyszkowski and others added 4 commits April 18, 2024 14:11

Merge branch 'landing-page' into landing-season-countdown-section

102a2d8

Adjust spacing and height

2df35a3

Merge branch 'landing-page' into landing-season-countdown-section

d87bc51

Disable text selection on timer component

7f39cce

Fix timer NaN value when timestamp expires

b876889

Resolve resize glitch

32db87b

kpyszkowski and others added 4 commits April 23, 2024 15:12

Merge branch 'landing-page' into landing-season-countdown-section

bff469a

Resolve Eslint error

1087104

Adjust width and horizontal content flow

789bcac

Applied adjustments accordingly to Figma updates

Resolve Eslint error

eb3cb02

kpyszkowski requested a review from ioay April 25, 2024 10:08

r-czajkowski reviewed Apr 25, 2024

View reviewed changes

kpyszkowski added 2 commits April 26, 2024 00:12

Restructure LandingPage's components

a26e6ea

Moved to `components` subdirectory

Resolve ESLint error

5796c8b

r-czajkowski approved these changes Apr 26, 2024

View reviewed changes

Resolve CountdownTimer component bug

99ba8fb

There was a bug where the negative values returned by `useCountdown` hook were parsed incorrectly. This commit simplifies the approach leveraging `reduce` array method. Also added new type definition - Tuple

kkosiorowska reviewed May 1, 2024

View reviewed changes

nkuba mentioned this pull request May 3, 2024

Implement Landing Page #370

Merged

kkosiorowska approved these changes May 3, 2024

View reviewed changes

kkosiorowska merged commit ce6e2f2 into landing-page May 3, 2024
20 checks passed

kkosiorowska deleted the landing-season-countdown-section branch May 3, 2024 07:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Landing page's `SeasonCountdownSection` component #368

Landing page's `SeasonCountdownSection` component #368

kpyszkowski commented Apr 16, 2024

netlify bot commented Apr 16, 2024 •

edited

Loading

ioay left a comment

kpyszkowski commented Apr 17, 2024

ioay commented Apr 17, 2024

kpyszkowski commented Apr 17, 2024

ioay commented Apr 17, 2024

ioay commented Apr 17, 2024

ioay commented Apr 22, 2024

kpyszkowski commented Apr 22, 2024

ioay commented Apr 23, 2024 •

edited

Loading

kpyszkowski commented Apr 23, 2024 •

edited

Loading

r-czajkowski left a comment •

edited

Loading

r-czajkowski Apr 25, 2024

kpyszkowski Apr 25, 2024

kkosiorowska May 1, 2024 •

edited

Loading

r-czajkowski Apr 25, 2024

kpyszkowski Apr 25, 2024

nkuba Apr 26, 2024

kpyszkowski Apr 26, 2024

r-czajkowski commented Apr 26, 2024

kpyszkowski commented Apr 29, 2024 •

edited

Loading

kkosiorowska May 1, 2024

kkosiorowska May 1, 2024

kkosiorowska May 1, 2024

kkosiorowska May 1, 2024

kkosiorowska May 1, 2024

kkosiorowska May 1, 2024

kkosiorowska May 1, 2024

kkosiorowska left a comment

Landing page's SeasonCountdownSection component #368

Landing page's SeasonCountdownSection component #368

Conversation

kpyszkowski commented Apr 16, 2024

Goal:

Features:

netlify bot commented Apr 16, 2024 • edited Loading

✅ Deploy Preview for acre-dapp-testnet ready!

ioay left a comment

Choose a reason for hiding this comment

kpyszkowski commented Apr 17, 2024

ioay commented Apr 17, 2024

kpyszkowski commented Apr 17, 2024

ioay commented Apr 17, 2024

ioay commented Apr 17, 2024

ioay commented Apr 22, 2024

kpyszkowski commented Apr 22, 2024

ioay commented Apr 23, 2024 • edited Loading

kpyszkowski commented Apr 23, 2024 • edited Loading

r-czajkowski left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kkosiorowska May 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

r-czajkowski commented Apr 26, 2024

kpyszkowski commented Apr 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kkosiorowska left a comment

Choose a reason for hiding this comment

Landing page's `SeasonCountdownSection` component #368

Landing page's `SeasonCountdownSection` component #368

netlify bot commented Apr 16, 2024 •

edited

Loading

ioay commented Apr 23, 2024 •

edited

Loading

kpyszkowski commented Apr 23, 2024 •

edited

Loading

r-czajkowski left a comment •

edited

Loading

kkosiorowska May 1, 2024 •

edited

Loading

kpyszkowski commented Apr 29, 2024 •

edited

Loading