Dashboard: PageLayout component

dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx

@@ -23,7 +23,7 @@ function ActivitiesList(props: ListProps) {
     setDismissedActivities((prev) => [...prev, txHash])
   }
 
-  return (
+  return activities.length > 0 ? (
     <MotionList pos="relative" {...props}>
       {activities.map((item) => (
         <AnimatePresence mode="popLayout">
@@ -47,7 +47,7 @@ function ActivitiesList(props: ListProps) {
         </AnimatePresence>
       ))}
     </MotionList>
-  )
+  ) : null
 }
 
 export default ActivitiesList

dapp/src/pages/DashboardPage/GrantedSeasonPassCard.tsx

@@ -10,19 +10,11 @@ import {
 import { IconDiscountCheckFilled, IconLock } from "@tabler/icons-react"
 import { TextMd } from "#/components/shared/Typography"
 
-type GrantedSeasonPassCardProps = CardProps & {
-  heading: string
-}
-
-export default function GrantedSeasonPassCard(
-  props: GrantedSeasonPassCardProps,
-) {
-  const { heading, ...restProps } = props
-
+export default function GrantedSeasonPassCard(props: CardProps) {
   return (
-    <Card size="md" px={5} py={4} gap={4} {...restProps}>
+    <Card size="md" px={5} py={4} gap={4} {...props}>
       <CardHeader as={HStack} spacing={1} alignItems="normal" p={0}>
-        <TextMd fontWeight="bold">{heading}</TextMd>
+        <TextMd fontWeight="bold">Season 2. Pre-launch staking</TextMd>
         <Icon as={IconLock} boxSize={5} />
       </CardHeader>
       <CardBody

dapp/src/pages/DashboardPage/PageLayout/PageLayout.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { Grid, GridProps } from "@chakra-ui/react"
+
+function PageLayout(props: GridProps) {
+  const { children, ...restProps } = props
+
+  return (
+    <Grid
+      px={10}
+      py={9}
+      gap={8}
+      alignItems="start"
+      gridTemplateColumns={{
+        base: "1fr",
+        md: "repeat(2, 1fr)",
+        lg: "1fr 0.5fr",
+        xl: "minmax(358px, auto) 1fr minmax(358px, auto)",
+      }}
+      {...restProps}
+    >
+      {children}
+    </Grid>
+  )
+}
+
+export default PageLayout

dapp/src/pages/DashboardPage/PageLayout/PageLayoutColumn.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { StackProps, VStack } from "@chakra-ui/react"
+
+type PageLayoutColumnProps = StackProps & {
+  isMain?: boolean
+}
+
+function PageLayoutColumn(props: PageLayoutColumnProps) {
+  const { isMain = false, ...restProps } = props
+
+  return (
+    <VStack
+      spacing={4}
+      gridArea={
+        isMain
+          ? {
+              base: "1 / 1 / -1 / -1",
+              lg: "1 / 1 / 3 / 2",
+              xl: "1 / 2 / -1 / 3",
+            }
+          : undefined
+      }
+      align="stretch"
+      {...restProps}
+    />
+  )
+}
+
+export default PageLayoutColumn

dapp/src/pages/DashboardPage/PageLayout/index.ts

@@ -0,0 +1,2 @@
+export { default as PageLayout } from "./PageLayout"
+export { default as PageLayoutColumn } from "./PageLayoutColumn"

dapp/src/pages/DashboardPage/index.tsx

@@ -1,42 +1,48 @@
 import React from "react"
-import { Flex, Grid, HStack, Switch } from "@chakra-ui/react"
-import { TextSm } from "#/components/shared/Typography"
-import { USD } from "#/constants"
-import { chakraUnitToPx } from "#/theme/utils"
-import PositionDetails from "./PositionDetails"
-import Statistics from "./Statistics"
-import TransactionHistory from "./TransactionHistory"
-import { DocsCard } from "./DocsCard"
-import { ActivityCarousel } from "./ActivityCarousel"
+import { useEstimatedBTCBalance } from "#/hooks"
+import { Icon, Image, VStack } from "@chakra-ui/react"
+import gamificationPlaceholderImage from "#/assets/images/gamification-placeholder.svg"
+import { AcreLogo } from "#/assets/icons"
+import { TextMd } from "#/components/shared/Typography"
+import { PageLayout, PageLayoutColumn } from "./PageLayout"
+import DashboardCard from "./DashboardCard"
+import GrantedSeasonPassCard from "./GrantedSeasonPassCard"
+import { CurrentSeasonCard } from "./CurrentSeasonCard"
+
+// TODO: Remove placeholder image and replace with actual gamification content
 
 export default function DashboardPage() {
+  const bitcoinWalletBalance = useEstimatedBTCBalance()
+
   return (
-    <Flex direction="column" p={6}>
-      <HStack pb={3.5}>
-        {/* TODO: Handle click actions */}
-        <Switch size="sm" />
-        <TextSm fontWeight="bold">Show values in {USD.symbol}</TextSm>
-      </HStack>
+    <PageLayout>
+      <PageLayoutColumn isMain>
+        <DashboardCard bitcoinAmount={bitcoinWalletBalance} />
+      </PageLayoutColumn>
+
+      <PageLayoutColumn>
+        <CurrentSeasonCard showSeasonStats={false} />
+        <GrantedSeasonPassCard />
+      </PageLayoutColumn>
 
-      <Grid
-        templateAreas={'"activity-carousel docs-card"'}
-        gridTemplateColumns={`calc(100% - ${chakraUnitToPx(64)}px) auto`}
-      >
-        <ActivityCarousel gridArea="activity-carousel" />
-        <DocsCard gridArea="docs-card" />
-      </Grid>
-      <Grid
-        templateAreas={`"position-details statistics"
-                        "transaction-history transaction-history"`}
-        gridTemplateColumns={{ base: "30% 1fr", xl: "20% 1fr" }}
-        gridTemplateRows={{ base: "55% 1fr", xl: "45% 1fr" }}
-        h="80vh"
-        gap={6}
-      >
-        <PositionDetails gridArea="position-details" />
-        <Statistics gridArea="statistics" />
-        <TransactionHistory gridArea="transaction-history" />
-      </Grid>
-    </Flex>
+      <PageLayoutColumn position="relative">
+        <VStack py={10}>
+          <Icon as={AcreLogo} w={20} h={12} />
+          <TextMd>Coming soon...</TextMd>
+        </VStack>
+        <Image
+          width="full"
+          zIndex={-1}
+          position="absolute"
+          inset={0}
+          src={gamificationPlaceholderImage}
+          alt="Gamification placeholder"
+          filter="auto"
+          blur="6px"
+          contrast={1.05}
+          opacity={0.5}
+        />
+      </PageLayoutColumn>
+    </PageLayout>
   )
 }