feat: wp

Author: BLuEScioN

package.json

@@ -107,7 +107,6 @@
     "react-redux": "8.1.2",
     "react-simple-code-editor": "0.13.1",
     "react-ssr-prepass": "npm:preact-ssr-prepass",
-    "react-textarea-autosize": "^8.5.5",
     "recharts": "2.12.7",
     "schema-inspector": "2.0.3",
     "server-only": "0.0.1",

pnpm-lock.yaml

@@ -27,35 +27,35 @@ export const BlockCount = memo(function ({
       px={2}
       width="fit-content"
       height={8}
-      bg={'blockCountBackground'}
+      bg={'blockList.blockCount.background'}
       rounded="full"
       _hover={
         canLoadMore
           ? {
-              bg: 'blockCountBackgroundHover',
+              bg: 'blockList.blockCount.backgroundHover',
             }
           : {
-              bg: 'blockCountBackground',
+              bg: 'blockList.blockCount.background',
             }
       }
     >
       <Text
         display="flex"
-        color={canLoadMore ? 'blockCountText' : 'text'}
+        color={canLoadMore ? 'blockList.blockCount.text' : 'text'}
         fontSize="xs"
         alignItems="center"
         gap={1}
         _groupHover={
           canLoadMore
             ? {
-                textDecorationColor: 'blockCountText',
+                textDecorationColor: 'blockList.blockCount.text',
               }
             : {}
         }
       >
         +{count} {pluralize('block', count)}
         {canLoadMore ? (
-          <Icon size={2.5} color={'blockCountIcon'}>
+          <Icon size={2.5} color={'blockList.blockCount.icon'}>
             <CaretDown />
           </Icon>
         ) : null}

src/app/_components/BlockList/BlockCount.tsx

@@ -15,7 +15,7 @@ export function UpdateBarLayout({ children, ...rest }: { children: ReactNode })
   return (
     <Flex
       justifyContent="space-between"
-      backgroundColor={'updateBarBackground'}
+      backgroundColor={'blockList.updateBar.background'}
       mx={-6}
       px={6}
       py={2.5}
@@ -68,7 +68,7 @@ export function UpdateBarBase({
     <UpdateBarLayout {...rest}>
       <Text
         fontSize={'sm'}
-        color={'updateBarText'}
+        color={'blockList.updateBar.text'}
         textOverflow={'ellipsis'}
         overflow={'hidden'}
         whiteSpace={'nowrap'}

src/app/_components/BlockList/UpdateBar.tsx

@@ -7,8 +7,8 @@ export function ListHeader({ children, ...textProps }: { children: ReactNode } &
     <Text
       py={2}
       px={2.5}
-      color="tableHeaderText"
-      bg="tableHeaderBackground"
+      color="table.header.text"
+      bg="table.header.background"
       fontSize={'xs'}
       rounded={'md'}
       whiteSpace={'nowrap'}

src/app/_components/ListHeader.tsx

@@ -1,29 +1,28 @@
-import { Stack } from '@chakra-ui/react';
+import { Stack, StackProps, Text } from '@chakra-ui/react';
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
 import { useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useUnresolvedIncidents } from '../../../common/queries/useUnresolvedIncidents';
-import { Flex, FlexProps } from '../../../ui/Flex';
-import { Text } from '../../../ui/Text';
 import { TextLink } from '../../../ui/TextLink';
 import { StatusBarBase } from './StatusBarBase';
 import { getColor } from './utils';
 
-function IncidentsStatusBar(props: FlexProps) {
+function IncidentsStatusBar(props: StackProps) {
   const isTestnet = useGlobalContext().activeNetwork.mode === 'testnet';
   const { data: unresolvedIncidentsResponse, isFetching } = useUnresolvedIncidents();
   const incidents = unresolvedIncidentsResponse?.incidents;
   const statusBarRef = useRef<HTMLDivElement | null>(null);
 
   return (
-    <Flex direction={'column'} {...props}>
+    <Stack {...props}>
       {incidents?.map(({ name, impact }) => {
         const isTestnetUpdate = name.includes('Testnet Update:');
         if (isTestnetUpdate && !isTestnet) return null;
         return (
           <StatusBarBase
+            key={name}
             ref={statusBarRef}
             impact={impact}
             content={
@@ -53,11 +52,11 @@ function IncidentsStatusBar(props: FlexProps) {
           />
         );
       })}
-    </Flex>
+    </Stack>
   );
 }
 
-export function IncidentsStatusBarWithErrorBoundary(props: FlexProps) {
+export function IncidentsStatusBarWithErrorBoundary(props: StackProps) {
   return (
     <QueryErrorResetBoundary>
       {({ reset }) => (

src/app/_components/StatusBar/IncidentsStatusBar.tsx

@@ -20,7 +20,6 @@ export const StatusBarBase = forwardRef<
         <Warning />
       </Icon>
     );
-  console.log({ icon, content, impact });
   return (
     <Box ref={ref} borderTop={'1px solid'} borderColor={'statusPage.border'} py={3} {...boxProps}>
       <Box width={'100%'} display={'flex'} alignItems={'center'} justifyContent={'center'}>

src/app/_components/StatusBar/StatusBarBase.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Dialog, useDisclosure } from '@chakra-ui/react';
+import { useDisclosure } from '@chakra-ui/react';
 import { Question, X } from '@phosphor-icons/react';
 import dynamic from 'next/dynamic';
 
@@ -11,6 +11,7 @@ import { Timestamp } from '../../../common/components/Timestamp';
 import { Value } from '../../../common/components/Value';
 import '../../../common/components/loaders/skeleton-text';
 import { useSuspenseBlockByHeightOrHash } from '../../../common/queries/useBlockByHash';
+import { DialogBackdrop, DialogContent, DialogRoot } from '../../../components/ui/dialog';
 import { SkeletonTxsList } from '../../../features/txs-list/SkeletonTxsList';
 import { Box } from '../../../ui/Box';
 import { Flex } from '../../../ui/Flex';
@@ -73,9 +74,9 @@ export default function BlockPage({ params: { hash } }: any) {
                       <Icon size={4} color="iconSubdued" onClick={onToggle}>
                         <Question />
                       </Icon>
-                      <Dialog.Root open={open} placement="center">
-                        <Dialog.Backdrop />
-                        <Dialog.Content>
+                      <DialogRoot open={open} placement="center">
+                        <DialogBackdrop />
+                        <DialogContent>
                           <Flex flexDirection="column" p={6} gap={4}>
                             <Flex justifyContent="space-between">
                               <Flex gap={2} alignItems="center">
@@ -109,8 +110,8 @@ export default function BlockPage({ params: { hash } }: any) {
                               </Stack>
                             </Box>
                           </Flex>
-                        </Dialog.Content>
-                      </Dialog.Root>
+                        </DialogContent>
+                      </DialogRoot>
                     </Flex>
                   }
                 />

src/app/block/[hash]/PageClient.tsx

@@ -93,7 +93,7 @@ export function Wrapper({ children }: { children: ReactNode }) {
         <Grid
           gridTemplateColumns={'var(--stacks-sizes-16) minmax(0, 1fr)'}
           gap={0}
-          minHeight={'container.md'}
+          minHeight={'768px'}
         >
           <SideNav />
           {isConnected ? children : <ConnectToStacks />}

src/app/sandbox/Wrapper.tsx

@@ -41,7 +41,7 @@ export const ListArgumentInput: FC<
             fontWeight="500"
             display="block"
             as={'label'}
-            htmlFor={name} // TODO: upgrade to v3. this may be broken
+            htmlFor={name}
             mb="8px"
           >
             {name}