feat: got stacking page rendering

hirosystems · Feb 7, 2025 · b70d8ee · b70d8ee
1 parent f9bdd77
commit b70d8ee
Show file tree

Hide file tree

Showing 17 changed files with 118 additions and 101 deletions.
diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
     "eslint-plugin-import": "2.29.0",
     "express": "4.19.2",
     "formik": "2.4.3",
+    "gsap": "^3.12.7",
     "http-status-codes": "2.3.0",
     "husky": "8.0.3",
     "ioredis": "5.3.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/block/[hash]/BlockBtcAnchorBlockCard.tsx b/src/app/block/[hash]/BlockBtcAnchorBlockCard.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { useBlockByHash } from '../../../common/queries/useBlockByHash';
+import { useBlockByHeightOrHash } from '../../../common/queries/useBlockByHash';
 import { BtcAnchorBlockCardBase } from '../../_components/BtcAnchorBlockCard';
 import { ExplorerErrorBoundary } from '../../_components/ErrorBoundary';
 import { useParamsBlockHash } from './useParamsBlockHash';
 
 function BlockBtcAnchorBlockCardBase() {
-  const { data: block } = useBlockByHash(useParamsBlockHash(), {
+  const { data: block } = useBlockByHeightOrHash(useParamsBlockHash(), {
     refetchOnWindowFocus: true,
   });
   return <BtcAnchorBlockCardBase block={block} />;

diff --git a/src/app/stacking/CycleInformation.tsx b/src/app/stacking/CycleInformation.tsx
@@ -1,10 +1,9 @@
-import { Box, Stack, Flex, Icon } from '@chakra-ui/react';
+import { Text } from '@/ui/Text';
+import { Box, Flex, Icon, Stack } from '@chakra-ui/react';
 import { ArrowRight } from '@phosphor-icons/react';
 import gsap from 'gsap';
 import { useEffect, useRef } from 'react';
 
-import { Text } from '@/ui/Text';
-
 function CountdownBadge({ daysLeft }: { daysLeft: number }) {
   const outerDotRef = useRef<HTMLDivElement>(null);
   const middleDotRef = useRef<HTMLDivElement>(null);
@@ -96,7 +95,9 @@ export const CycleInformation = ({
           <Text fontSize={40} fontWeight="400">
             {id}
           </Text>
-          <Icon as={ArrowRight} size={6} weight="bold" />
+          <Icon h={6} w={6} color="iconPrimary">
+            <ArrowRight weight="bold" />
+          </Icon>
         </Flex>
         <StackedStxMetric stxStacked={stxStacked} />
       </Stack>
@@ -113,7 +114,7 @@ const StackedStxMetric = ({ stxStacked }: { stxStacked: number }) => {
         {`${stackedStxString} STX`}
       </Text>
       &nbsp;
-      <Text as="span" fontSize="xl" fontWeight="bold" color="textSubdued" whiteSpace="nowrap">
+      <Text fontSize="xl" fontWeight="bold" color="textSubdued" whiteSpace="nowrap">
         ($124.3M)
       </Text>
       &nbsp;

diff --git a/src/app/stacking/PoxCycleDiagram.tsx b/src/app/stacking/PoxCycleDiagram.tsx
@@ -1,24 +1,14 @@
-import { useBreakpointValue } from '../../ui/hooks/useBreakpointValue';
 import { VerticalPoxCycleDiagram } from './VerticalPoxCycleDiagram';
 import { HorizontalPoxCycleDiagram } from './horizontal-pox-cycle-diagram/HorizontalPoxCycleDiagram';
 import { usePoxCycle } from './usePoxCycle';
 
 export const PoxCycleDiagram = () => {
   const poxCycleData = usePoxCycle();
 
-  const poxCycleDiagram = useBreakpointValue(
-    {
-      lg: <HorizontalPoxCycleDiagram data={poxCycleData} />,
-      md: <VerticalPoxCycleDiagram data={poxCycleData} />,
-      sm: <VerticalPoxCycleDiagram data={poxCycleData} />,
-      xs: <VerticalPoxCycleDiagram data={poxCycleData} />,
-      base: <VerticalPoxCycleDiagram data={poxCycleData} />,
-    },
-    {
-      fallback: 'lg',
-      ssr: false,
-    }
+  return (
+    <>
+      <HorizontalPoxCycleDiagram data={poxCycleData} hideBelow="lg" />
+      <VerticalPoxCycleDiagram data={poxCycleData} hideFrom="lg" />
+    </>
   );
-
-  return poxCycleDiagram ?? null;
 };
diff --git a/src/app/stacking/PreviousCyclesTable.tsx b/src/app/stacking/PreviousCyclesTable.tsx
@@ -61,11 +61,15 @@ export function PreviousCyclesTable() {
           return (
             <Flex gap={2}>
               <Flex gap={1} alignItems="center">
-                <Icon as={BitcoinIcon} size={2} />
+                <Icon h={2} w={2}>
+                  <BitcoinIcon />
+                </Icon>
                 <Text fontSize="sm">{val.bitcoin}</Text>
               </Flex>
               <Flex gap={1} alignItems="center">
-                <Icon as={StxIcon} size={2} />
+                <Icon h={2} w={2}>
+                  <StxIcon />
+                </Icon>
                 <Text fontSize="sm">{val.stx}</Text>
               </Flex>
             </Flex>
@@ -81,11 +85,15 @@ export function PreviousCyclesTable() {
           return (
             <Flex gap={2}>
               <Flex gap={1} alignItems="center">
-                <Icon as={BitcoinIcon} size={2} />
+                <Icon  h={2} w={2}>
+                  <BitcoinIcon />
+                </Icon>
                 <Text fontSize="sm">{val.bitcoin}</Text>
               </Flex>
               <Flex gap={1} alignItems="center">
-                <Icon as={StxIcon} size={2} />
+                <Icon  h={2} w={2}>
+                  <StxIcon />
+                </Icon>
                 <Text fontSize="sm">{val.stx}</Text>
               </Flex>
             </Flex>

diff --git a/src/app/stacking/ReverseAccordion.tsx b/src/app/stacking/ReverseAccordion.tsx
@@ -1,9 +1,9 @@
-import { Plus, X } from '@phosphor-icons/react';
-import { RefObject, createRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
 import { Button } from '@/ui/Button';
 import { Text } from '@/ui/Text';
 import { Box, Flex, Icon, Stack } from '@chakra-ui/react';
+import { Plus, X } from '@phosphor-icons/react';
+import { RefObject, createRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
 import useResizeObserver from './useResizeObserver';
 
 const cardPaddingY = 3;
@@ -102,11 +102,9 @@ function ReverseAccordionItem({
             w="full"
           >
             <Text fontWeight="medium">{title}</Text>
-            <Icon
-              as={isExpanded ? X : Plus}
-              onClick={() => (isExpanded ? setIsExpanded(index, false) : null)}
-              size={4}
-            />
+            <Icon onClick={() => (isExpanded ? setIsExpanded(index, false) : null)} h={4} w={4}>
+              {isExpanded ? <X /> : <Plus />}
+            </Icon>
           </Flex>
         </Flex>
         <Flex ref={contentRef} height="fit-content" flexDirection="column" gap={4} px={3} pb={3}>

diff --git a/src/app/stacking/StackersEarnings.tsx b/src/app/stacking/StackersEarnings.tsx
@@ -1,44 +1,42 @@
 import { Card } from '@/common/components/Card';
 import { Text } from '@/ui/Text';
-import { Box, Flex, Stack, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import { Box, Flex, Stack, Tabs } from '@chakra-ui/react';
 
-function CustomTab({ children }: { children: React.ReactNode }) {
+function CustomTab({ children, value }: { children: React.ReactNode; value: string }) {
   return (
-    <Tab>
+    <Tabs.Trigger value={value}>
       <Box py={2} px={4} bg="sand.150" borderRadius="full">
         {children}
       </Box>
-    </Tab>
+    </Tabs.Trigger>
   );
 }
 
 export function StackersEarnings() {
   return (
     <Card p={5} bg="sand.50" border="1px solid var(--stacks-colors-sand-150)" w="full">
       <Flex>
-        <Tabs>
-          <TabList mb={4} p={0} border="none">
-            <Tab>All Time</Tab>
-            <Tab>Last Cycle</Tab>
-          </TabList>
-          <TabPanels>
-            <TabPanel gap={0}>
-              <Stack gap={2}>
-                <Text fontSize={20}>Stackers have earned</Text>
-                <Flex alignItems="self-end" gap={1}>
-                  <Text fontSize={30} fontWeight="semi-bold">
-                    142,532 BTC
-                  </Text>
-                  <Text fontSize={20} color="textSubdued">
-                    ($8.4M)
-                  </Text>
-                </Flex>
-                <Text fontSize={20}>in rewards ✨</Text>
-              </Stack>
-            </TabPanel>
-            <TabPanel gap={0}></TabPanel>
-          </TabPanels>
-        </Tabs>
+        <Tabs.Root>
+          <Tabs.List mb={4} p={0} border="none">
+            <Tabs.Trigger value="all-time">All Time</Tabs.Trigger>
+            <Tabs.Trigger value="last-cycle">Last Cycle</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="all-time" gap={0}>
+            <Stack gap={2}>
+              <Text fontSize={20}>Stackers have earned</Text>
+              <Flex alignItems="self-end" gap={1}>
+                <Text fontSize={30} fontWeight="semi-bold">
+                  142,532 BTC
+                </Text>
+                <Text fontSize={20} color="textSubdued">
+                  ($8.4M)
+                </Text>
+              </Flex>
+              <Text fontSize={20}>in rewards ✨</Text>
+            </Stack>
+          </Tabs.Content>
+          <Tabs.Content value="last-cycle" gap={0}></Tabs.Content>
+        </Tabs.Root>
       </Flex>
     </Card>
   );

diff --git a/src/app/stacking/VerticalPoxCycleDiagram.tsx b/src/app/stacking/VerticalPoxCycleDiagram.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { Text } from '@/ui/Text';
-import { Box, Flex, Stack } from '@chakra-ui/react';
+import { Box, Flex, Stack, StackProps } from '@chakra-ui/react';
 import { CycleInformation } from './CycleInformation';
 import { PoxCycleInfo } from './usePoxCycle';
 
-export const VerticalPoxCycleDiagram = ({ data }: { data: PoxCycleInfo }) => {
+export const VerticalPoxCycleDiagram = ({ data, ...stackProps }: { data: PoxCycleInfo } & StackProps) => {
   const {
     currentCycleId,
     currentCycleStackedStx,
@@ -21,7 +21,7 @@ export const VerticalPoxCycleDiagram = ({ data }: { data: PoxCycleInfo }) => {
   } = data;
 
   return (
-    <Stack bg="sand.150" w="full" alignItems="center" borderRadius="2xl" pl={8} py={6}>
+    <Stack bg="sand.150" w="full" alignItems="center" borderRadius="2xl" pl={8} py={6} {...stackProps}>
       <Box w="full">
         <Flex pb={6} pr={8} justifyContent="space-between">
           <CycleInformation

diff --git a/src/app/stacking/horizontal-pox-cycle-diagram/HorizontalPoxCycleDiagram.tsx b/src/app/stacking/horizontal-pox-cycle-diagram/HorizontalPoxCycleDiagram.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { Box, Flex, Grid, Stack } from '@chakra-ui/react';
+import { Box, Flex, Grid, GridProps, Stack } from '@chakra-ui/react';
 import { CycleInformation } from '../CycleInformation';
 import { PoxCycleInfo } from '../usePoxCycle';
 import { useResizeObserver } from '../useResizeObserver';
@@ -11,7 +11,7 @@ const sizePadding = 4;
 const progressBarSize = 2 + 2 + 2 + 15 + 4;
 const size = sizePadding * 2 + progressBarSize;
 
-export const HorizontalPoxCycleDiagram = ({ data }: { data: PoxCycleInfo }) => {
+export const HorizontalPoxCycleDiagram = ({ data, ...gridProps }: { data: PoxCycleInfo } & GridProps) => {
   const {
     currentCycleId,
     prepareCycleProgress,
@@ -53,7 +53,7 @@ export const HorizontalPoxCycleDiagram = ({ data }: { data: PoxCycleInfo }) => {
   console.log({ progressBarBottom });
 
   return (
-    <Grid templateColumns="2fr 1fr" w="full" h="full" className="pox-cycle-diagram">
+    <Grid templateColumns="2fr 1fr" w="full" h="full" className="pox-cycle-diagram" {...gridProps}>
       <Stack bg="sand.150" w="full" alignItems="center" borderRadius="2xl" pl={8} py={6}>
         <Stack w="full" h="full" className="cycle-section-container">
           <Flex pr={8}>

diff --git a/src/app/stacking/horizontal-pox-cycle-diagram/NextCycleProgressBar.tsx b/src/app/stacking/horizontal-pox-cycle-diagram/NextCycleProgressBar.tsx
@@ -119,7 +119,9 @@ export function NextCycleProgressBar({
           </Text>
         </Box>
         <Flex gap={1}>
-          <Icon as={BitcoinIcon} size={4} position={'relative'} bottom={'1px'} />
+          <Icon  h={4} w={4} position={'relative'} bottom={'1px'}>
+            <BitcoinIcon />
+          </Icon>
           <Text whiteSpace="nowrap" fontSize="xs">
             #{start.bitcoinBlockNumber}
           </Text>
@@ -128,7 +130,9 @@ export function NextCycleProgressBar({
           Bitcoin block {start.bitcoinBlockNumber}
         </Text> */}
         <Flex gap={1}>
-          <Icon as={StxIcon} size={4} position={'relative'} bottom={'1px'} />
+          <Icon  h={4} w={4} position={'relative'} bottom={'1px'}>
+            <StxIcon />
+          </Icon>
           <Text whiteSpace="nowrap" fontSize="xs">
             #{start.stacksBlockNumber}
           </Text>

diff --git a/src/app/stacking/usePoxCycle.tsx b/src/app/stacking/usePoxCycle.tsx
@@ -1,5 +1,5 @@
 import { NUM_SECONDS_IN_TEN_MINUTES } from '../../common/constants/constants';
-import { useBlockByHeight } from '../../common/queries/useBlockByHeight';
+import { useBlockByHeightOrHash } from '../../common/queries/useBlockByHash';
 import { useSuspensePoxInfoRaw } from '../../common/queries/usePoxInforRaw';
 
 export interface PoxCycleInfo {
@@ -33,7 +33,7 @@ export function usePoxCycle(): PoxCycleInfo {
   const { data: poxInfo } = useSuspensePoxInfoRaw();
 
   const currentBurnChainBlockHeight = poxInfo.current_burnchain_block_height;
-  const { data: currentBlockData } = useBlockByHeight(currentBurnChainBlockHeight);
+  const { data: currentBlockData } = useBlockByHeightOrHash(currentBurnChainBlockHeight.toString());
   const currentBlockDate = currentBlockData?.block_time_iso
     ? new Date(currentBlockData.block_time_iso)
     : undefined;

diff --git a/src/app/txid/[txId]/useTxBlock.ts b/src/app/txid/[txId]/useTxBlock.ts
@@ -1,8 +1,8 @@
 import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types';
 
-import { useBlockByHash } from '../../../common/queries/useBlockByHash';
+import { useBlockByHeightOrHash } from '../../../common/queries/useBlockByHash';
 
 export function useTxBlock(tx: Transaction | MempoolTransaction) {
   const hash = 'block_hash' in tx && tx.block_hash !== '0x' ? tx.block_hash : undefined;
-  return useBlockByHash(hash);
+  return useBlockByHeightOrHash(hash);
 }