feat: wp

hirosystems · Jan 1, 2025 · 19f83a2 · 19f83a2
1 parent a3ba264
commit 19f83a2
Show file tree

Hide file tree

Showing 32 changed files with 175 additions and 285 deletions.
diff --git a/package.json b/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",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/_components/BlockList/BlockCount.tsx b/src/app/_components/BlockList/BlockCount.tsx
@@ -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}

diff --git a/src/app/_components/BlockList/UpdateBar.tsx b/src/app/_components/BlockList/UpdateBar.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'}

diff --git a/src/app/_components/ListHeader.tsx b/src/app/_components/ListHeader.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'}

diff --git a/src/app/_components/StatusBar/IncidentsStatusBar.tsx b/src/app/_components/StatusBar/IncidentsStatusBar.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 }) => (

diff --git a/src/app/_components/StatusBar/StatusBarBase.tsx b/src/app/_components/StatusBar/StatusBarBase.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'}>

diff --git a/src/app/block/[hash]/PageClient.tsx b/src/app/block/[hash]/PageClient.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>
                   }
                 />

diff --git a/src/app/sandbox/Wrapper.tsx b/src/app/sandbox/Wrapper.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 />}

diff --git a/src/app/sandbox/components/Argument/ListArgumentInput.tsx b/src/app/sandbox/components/Argument/ListArgumentInput.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}

diff --git a/src/app/sandbox/components/ContractCall/PostConditionForm.tsx b/src/app/sandbox/components/ContractCall/PostConditionForm.tsx
@@ -1,4 +1,3 @@
-import { Menu } from '@chakra-ui/react';
 import { CaretDown } from '@phosphor-icons/react';
 import { Field, FormikErrors } from 'formik';
 import { useMemo, useState } from 'react';
@@ -21,6 +20,7 @@ import {
 } from '@stacks/transactions';
 
 import { isUint128 } from '../../../../common/utils/number-utils';
+import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../../../../components/ui/menu';
 import { Box } from '../../../../ui/Box';
 import { Flex } from '../../../../ui/Flex';
 import { Icon } from '../../../../ui/Icon';
@@ -296,8 +296,8 @@ export function PostConditionConditionCodeMenu({
   const options = getPostConditionConditionCodeOptions(postConditionType);
 
   return (
-    <Menu.Root>
-      <Menu.Trigger
+    <MenuRoot>
+      <MenuTrigger
         type="button"
         onClick={e => {
           e.stopPropagation();
@@ -309,10 +309,10 @@ export function PostConditionConditionCodeMenu({
             <CaretDown />
           </Icon>
         </Flex>
-      </Menu.Trigger>
-      <Menu.Content>
+      </MenuTrigger>
+      <MenuContent>
         {options.map(option => (
-          <Menu.Item
+          <MenuItem
             key={option.label}
             onClick={e => {
               e.stopPropagation();
@@ -322,10 +322,10 @@ export function PostConditionConditionCodeMenu({
             value={option.label}
           >
             {option.label}
-          </Menu.Item>
+          </MenuItem>
         ))}
-      </Menu.Content>
-    </Menu.Root>
+      </MenuContent>
+    </MenuRoot>
   );
 }
 
@@ -344,9 +344,9 @@ export function PostConditionTypeMenu({ onChange }: { onChange: (option: any) =>
   );
 
   return (
-    <Menu.Root>
+    <MenuRoot>
       <Flex gap={2} alignItems="center">
-        <Menu.Trigger
+        <MenuTrigger
           type="button"
           onClick={e => {
             e.stopPropagation();
@@ -358,11 +358,11 @@ export function PostConditionTypeMenu({ onChange }: { onChange: (option: any) =>
               <CaretDown />
             </Icon>
           </Flex>
-        </Menu.Trigger>
+        </MenuTrigger>
       </Flex>
-      <Menu.Content>
+      <MenuContent>
         {options.map(option => (
-          <Menu.Item
+          <MenuItem
             key={option.label}
             onClick={e => {
               e.stopPropagation();
@@ -372,10 +372,10 @@ export function PostConditionTypeMenu({ onChange }: { onChange: (option: any) =>
             value={option.label}
           >
             {option.label}
-          </Menu.Item>
+          </MenuItem>
         ))}
-      </Menu.Content>
-    </Menu.Root>
+      </MenuContent>
+    </MenuRoot>
   );
 }
 

diff --git a/src/app/sandbox/components/TransactionsPanel.tsx b/src/app/sandbox/components/TransactionsPanel.tsx
@@ -258,7 +258,6 @@ export function TransactionsPanel() {
           <Flex gap={1.5}>
             <TxListItemMini tx={tx} />
             <AccordionItemTrigger
-              // TODO: upgrade v3. This may be broken
               flexGrow={0}
               flexShrink={0}
               width={'30px'}

diff --git a/src/app/sandbox/deploy/LeftSection.tsx b/src/app/sandbox/deploy/LeftSection.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Box, Button, Flex, Stack, Text } from '@chakra-ui/react';
 import { ArrowSquareOut, Toolbox, X } from '@phosphor-icons/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useCallback, useState } from 'react';
@@ -11,16 +12,11 @@ import { useRandomName } from '../../../common/hooks/useRandomName';
 import { useStacksNetwork } from '../../../common/hooks/useStacksNetwork';
 import { useAppDispatch, useAppSelector } from '../../../common/state/hooks';
 import { InputGroup } from '../../../components/ui/input-group';
-import { Box } from '../../../ui/Box';
-import { Button } from '../../../ui/Button';
-import { Flex } from '../../../ui/Flex';
 import { Icon } from '../../../ui/Icon';
 import { IconButton } from '../../../ui/IconButton';
 import { Input } from '../../../ui/Input';
-import { Stack } from '../../../ui/Stack';
-import { Text } from '../../../ui/Text';
 import { TextLink } from '../../../ui/TextLink';
-import { Tooltip } from '../../../ui/Tooltip';
+import { Tooltip } from '../../../components/ui/tooltip';
 import { Caption, Title } from '../../../ui/typography';
 import { useUser } from '../hooks/useUser';
 import { selectCodeBody, setUserData, toggleCodeToolbar } from '../sandbox-slice';