Dashboard: PageLayout component

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

@@ -0,0 +1,54 @@
+import React from "react"
+import { Grid, GridProps, Box } from "@chakra-ui/react"
+import PageLayoutSidebar from "./PageLayoutSidebar"
+
+type PageLayoutProps = Omit<GridProps, "children"> & {
+  children: React.ReactNode
+  leftSidebar?: React.ReactNode
+  rightSidebar?: React.ReactNode
+}
+
+function PageLayout(props: PageLayoutProps) {
+  const { children, leftSidebar, rightSidebar, ...restProps } = props
+  const isSidebarPropsInvalid = [leftSidebar, rightSidebar]
+    .filter(Boolean)
+    .some(
+      (value) =>
+        !React.isValidElement(value) || value.type !== PageLayoutSidebar,
+    )
+
+  if (isSidebarPropsInvalid) {
+    throw new Error("Sidebar content must be wrapped with `PageLayoutSidebar`.")
+  }
+
+  return (
+    <Grid
+      px={10}
+      py={9}
+      gap={8}
+      alignItems="start"
+      gridTemplateColumns={{
+        base: "1fr",
+        md: "repeat(2, 1fr)",
+        xl: "0.76fr auto",
+        "2.5xl":
+          "minmax(358px, 0.25fr) minmax(748px, 1fr) minmax(358px, 0.25fr)",
+      }}
+      {...restProps}
+    >
+      <Box
+        gridArea={{
+          xl: "1 / 1 / 3 / 2",
+          "2.5xl": "1 / 2 / -1 / 3",
+          base: "1 / 1 / -1 / -1",
+        }}
+      >
+        {children}
+      </Box>
+      {leftSidebar}
+      {rightSidebar}
+    </Grid>
+  )
+}
+
+export default PageLayout

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

@@ -0,0 +1,8 @@
+import React from "react"
+import { StackProps, VStack } from "@chakra-ui/react"
+
+function PageLayoutSidebar(props: StackProps) {
+  return <VStack spacing={4} align="stretch" {...props} />
+}
+
+export default PageLayoutSidebar

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

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

dapp/src/pages/DashboardPage/index.tsx

@@ -1,42 +1,22 @@
 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 { useWallet } from "#/hooks"
+import { PageLayout, PageLayoutSidebar } from "./PageLayout"
+import DashboardCard from "./DashboardCard"
+import GrantedSeasonPassCard from "./GrantedSeasonPassCard"
 
 export default function DashboardPage() {
-  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>
+  const { bitcoin } = useWallet()
+  const bitcoinWalletBalance = bitcoin.account?.balance.toString() ?? "0"
 
-      <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>
+  return (
+    <PageLayout
+      leftSidebar={
+        <PageLayoutSidebar>
+          <GrantedSeasonPassCard heading="Season 2. Pre-launch staking" />
+        </PageLayoutSidebar>
+      }
+    >
+      <DashboardCard bitcoinAmount={bitcoinWalletBalance} />
+    </PageLayout>
   )
 }

dapp/src/theme/index.ts

@@ -45,6 +45,9 @@ const defaultTheme = {
   zIndices,
   semanticTokens,
   styles,
+  breakpoints: {
+    "2.5xl": "100.5rem", // 1608px
+  },
   space: {
     13: "3.25rem",
     15: "3.75rem",