feat: wp

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

Hide file tree

Showing 90 changed files with 277 additions and 514 deletions.
diff --git a/src/app/_components/BlockList/BlockCount.tsx b/src/app/_components/BlockList/BlockCount.tsx
@@ -3,8 +3,7 @@ import pluralize from 'pluralize';
 import { memo } from 'react';
 
 import { Button } from '../../../ui/Button';
-import { Icon } from '../../../ui/Icon';
-import { Text } from '../../../ui/Text';
+import { Icon, Text} from '@chakra-ui/react';
 
 export const BlockCount = memo(function ({
   count,
@@ -55,7 +54,7 @@ export const BlockCount = memo(function ({
       >
         +{count} {pluralize('block', count)}
         {canLoadMore ? (
-          <Icon size={2.5} color={'blockList.blockCount.icon'}>
+          <Icon h={2.5} w={2.5} color={'blockList.blockCount.icon'}>
             <CaretDown />
           </Icon>
         ) : null}

diff --git a/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx b/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx
@@ -1,3 +1,4 @@
+import { Box, Flex, Grid, HStack, Icon, Stack, Text } from '@chakra-ui/react';
 import { ArrowElbowLeftDown } from '@phosphor-icons/react';
 import React, { ReactNode, useCallback, useMemo, useState } from 'react';
 
@@ -8,13 +9,6 @@ import { Timestamp } from '../../../../common/components/Timestamp';
 import { useInfiniteQueryResult } from '../../../../common/hooks/useInfiniteQueryResult';
 import { useBlocksByBurnBlock } from '../../../../common/queries/useBlocksByBurnBlock';
 import { truncateMiddle } from '../../../../common/utils/utils';
-import { Box } from '../../../../ui/Box';
-import { Flex } from '../../../../ui/Flex';
-import { Grid } from '../../../../ui/Grid';
-import { HStack } from '../../../../ui/HStack';
-import { Icon } from '../../../../ui/Icon';
-import { Stack } from '../../../../ui/Stack';
-import { Text } from '../../../../ui/Text';
 import BitcoinIcon from '../../../../ui/icons/BitcoinIcon';
 import StxIcon from '../../../../ui/icons/StxIcon';
 import { Caption } from '../../../../ui/typography';
@@ -68,7 +62,7 @@ const StxBlockRow = ({
   isLast?: boolean;
 }) => {
   const icon = isFirst ? (
-    <Icon size={2.5} color={'white'}>
+    <Icon h={2.5} w={2.5} color={'white'}>
       <StxIcon />
     </Icon>
   ) : undefined;
@@ -265,10 +259,10 @@ function BitcoinHeader({
       flexWrap={'wrap'}
     >
       <Flex alignItems={'center'} gap={1.5} flexWrap={'nowrap'}>
-        <Icon size={3.5} color="textSubdued">
+        <Icon h={3.5} w={3.5} color="textSubdued">
           <ArrowElbowLeftDown />
         </Icon>
-        <Icon size={4.5}>
+        <Icon h={4.5} w={4.5}>
           <BitcoinIcon />
         </Icon>
         <Flex height="full" alignItems="center">

diff --git a/src/app/_components/BlockList/Ungrouped/BlockListUngrouped.tsx b/src/app/_components/BlockList/Ungrouped/BlockListUngrouped.tsx
@@ -1,3 +1,4 @@
+import { Box, Flex, FlexProps, Grid, HStack, Icon, Stack, Text } from '@chakra-ui/react';
 import { ArrowBendDownLeft, Clock } from '@phosphor-icons/react';
 import React, { ReactNode, useCallback, useMemo, useState } from 'react';
 
@@ -8,13 +9,6 @@ import { Timestamp } from '../../../../common/components/Timestamp';
 import { useInfiniteQueryResult } from '../../../../common/hooks/useInfiniteQueryResult';
 import { useBlocksByBurnBlock } from '../../../../common/queries/useBlocksByBurnBlock';
 import { truncateMiddle } from '../../../../common/utils/utils';
-import { Box } from '../../../../ui/Box';
-import { Flex, FlexProps } from '../../../../ui/Flex';
-import { Grid } from '../../../../ui/Grid';
-import { HStack } from '../../../../ui/HStack';
-import { Icon } from '../../../../ui/Icon';
-import { Stack } from '../../../../ui/Stack';
-import { Text } from '../../../../ui/Text';
 import BitcoinIcon from '../../../../ui/icons/BitcoinIcon';
 import StxIcon from '../../../../ui/icons/StxIcon';
 import { Caption } from '../../../../ui/typography';
@@ -56,14 +50,15 @@ export function BtcBlockRowContent({ timestamp, height, hash, isFirst }: BtcBloc
       <HStack gap={1.5}>
         <Icon
           transform={'rotate(90deg)'}
-          size={2.5}
+          h={2.5}
+          w={2.5}
           color={'blockList.btcBlockRowIcon'}
           position={'relative'}
           bottom={'1px'}
         >
           <ArrowBendDownLeft />
         </Icon>
-        <Icon size={18} position={'relative'} bottom={'1px'}>
+        <Icon h={18} w={18} position={'relative'} bottom={'1px'}>
           <BitcoinIcon />
         </Icon>
         {isFirst ? (
@@ -79,7 +74,7 @@ export function BtcBlockRowContent({ timestamp, height, hash, isFirst }: BtcBloc
       <Box>
         {isFirst ? (
           <Flex gap={1} alignItems="center">
-            <Icon size={4} color="iconSubdued">
+            <Icon h={4} w={4} color="iconSubdued">
               <Clock />
             </Icon>
             <Text color="textSubdued" fontSize="xs">
@@ -164,7 +159,7 @@ function StxBlockRow({
   isLast?: boolean;
 }) {
   const icon = isFirst ? (
-    <Icon size={2.5} color={'white'}>
+    <Icon h={2.5} w={2.5} color={'white'}>
       <StxIcon />
     </Icon>
   ) : null;

diff --git a/src/app/_components/BlockList/Ungrouped/skeleton.tsx b/src/app/_components/BlockList/Ungrouped/skeleton.tsx
@@ -2,11 +2,7 @@ import { Circle } from '@phosphor-icons/react';
 import React from 'react';
 
 import { SkeletonText } from '../../../../components/ui/skeleton';
-import { Box } from '../../../../ui/Box';
-import { Flex } from '../../../../ui/Flex';
-import { HStack } from '../../../../ui/HStack';
-import { Icon } from '../../../../ui/Icon';
-import { Stack } from '../../../../ui/Stack';
+import { Icon, HStack, Flex, Box, Stack } from '@chakra-ui/react';
 import { Caption } from '../../../../ui/typography';
 import { BlockListGridHeaderRowSkeleton } from '../Grouped/skeleton';
 import { LineAndNode } from '../LineAndNode';
@@ -22,7 +18,7 @@ export function BlockListRowSkeleton({
   isFirst?: boolean;
 }) {
   const icon = isFirst ? (
-    <Icon size={2.5} fill="borderPrimary">
+    <Icon h={2.5} w={2.5} fill="borderPrimary">
       <Circle />
     </Icon>
   ) : null;

diff --git a/src/app/_components/BlockList/UpdateBar.tsx b/src/app/_components/BlockList/UpdateBar.tsx
@@ -1,11 +1,9 @@
+import { Flex, FlexProps, Icon, Text } from '@chakra-ui/react';
 import { ArrowCounterClockwise } from '@phosphor-icons/react';
 import { ReactNode, Suspense, useCallback, useRef } from 'react';
 
 import RelativeTimeDisplay from '../../../common/components/RelativeTimeDisplay';
 import { Button } from '../../../components/ui/button';
-import { Flex, FlexProps } from '../../../ui/Flex';
-import { Icon } from '../../../ui/Icon';
-import { Text } from '../../../ui/Text';
 import { useBlockListContext } from './BlockListContext';
 import { UpdateBarSkeleton } from './Grouped/skeleton';
 import { getFadeAnimationStyle } from './consts';
@@ -80,7 +78,7 @@ export function UpdateBarBase({
       </Text>
       <Button onClick={update} variant="text">
         <Flex alignItems={'center'} gap={1.5}>
-          <Icon color="buttonText" size={3} transform={'rotate(0deg) scaleX(-1)'}>
+          <Icon color="buttonText" h={3} w={3} transform={'rotate(0deg) scaleX(-1)'}>
             <ArrowCounterClockwise />
           </Icon>
           Update

diff --git a/src/app/_components/ErrorBox.tsx b/src/app/_components/ErrorBox.tsx
@@ -4,9 +4,7 @@ import { useGlobalContext } from '../../common/context/useGlobalContext';
 import { buildUrl } from '../../common/utils/buildUrl';
 import { Button } from '../../ui/Button';
 import { ButtonLink } from '../../ui/ButtonLink';
-import { Flex, FlexProps } from '../../ui/Flex';
-import { Icon } from '../../ui/Icon';
-import { Text } from '../../ui/Text';
+import { Icon, Flex, FlexProps, Text } from '@chakra-ui/react';
 
 export function ErrorBox({
   error,
@@ -34,7 +32,7 @@ export function ErrorBox({
       padding="10px"
       {...flexProps}
     >
-      <Icon size={6}>
+      <Icon h={6} w={6}>
         <XCircle />
       </Icon>
       <Flex direction={'column'} alignItems={'center'} gap={'4px'}>

diff --git a/src/app/_components/NavBar/BtcStxPrice.tsx b/src/app/_components/NavBar/BtcStxPrice.tsx
@@ -5,8 +5,7 @@ import { ReactNode } from 'react';
 import { Circle } from '../../../common/components/Circle';
 import { TokenPrice } from '../../../common/types/tokenPrice';
 import { usdFormatter } from '../../../common/utils/utils';
-import { Flex, FlexProps } from '../../../ui/Flex';
-import { Icon } from '../../../ui/Icon';
+import { Icon, Flex, FlexProps } from '@chakra-ui/react';
 import BitcoinIcon from '../../../ui/icons/BitcoinIcon';
 import StxIcon from '../../../ui/icons/StxIcon';
 import { ExplorerErrorBoundary } from '../ErrorBoundary';
@@ -33,7 +32,7 @@ function BtcStxPriceBase({ tokenPrice }: { tokenPrice: TokenPrice }) {
     <Flex gap={6} minWidth={'172px'}>
       <PriceContainer
         icon={
-          <Icon size={4.5}>
+          <Icon h={4.5} w={4.5}>
             <BitcoinIcon />
           </Icon>
         }
@@ -45,7 +44,7 @@ function BtcStxPriceBase({ tokenPrice }: { tokenPrice: TokenPrice }) {
       <PriceContainer
         icon={
           <Circle size={'18px'} bg="brand" border={'none'}>
-            <Icon size={'10px'} color="white">
+            <Icon h={2.5} w={2.5} color="white">
               <StxIcon />
             </Icon>
           </Circle>

diff --git a/src/app/_components/NavBar/DesktopNav.tsx b/src/app/_components/NavBar/DesktopNav.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@chakra-ui/react';
+import { Box, Flex, Icon } from '@chakra-ui/react';
 import { CaretDown } from '@phosphor-icons/react';
 import { FC } from 'react';
 
@@ -7,8 +7,6 @@ import {
   HoverCardRoot,
   HoverCardTrigger,
 } from '../../../components/ui/hover-card';
-import { Flex } from '../../../ui/Flex';
-import { Icon } from '../../../ui/Icon';
 import { Link } from '../../../ui/Link';
 import { LabelWrapper } from './LabelWrapper';
 import { NavItem } from './types';
@@ -46,7 +44,7 @@ export const DesktopNav: FC<{ navItems: NavItem[] }> = ({ navItems }) => {
                   {navItem.label}
                 </Link>
                 {navItem.children && (
-                  <Icon size={3.5} color={'white'}>
+                  <Icon h={3.5} w={3.5} color={'white'}>
                     <CaretDown />
                   </Icon>
                 )}

diff --git a/src/app/_components/NavBar/Logo.tsx b/src/app/_components/NavBar/Logo.tsx
@@ -1,11 +1,11 @@
 import { ExplorerLink } from '../../../common/components/ExplorerLinks';
-import { Icon, IconProps } from '../../../ui/Icon';
+import { Icon, IconProps } from '@chakra-ui/react';
 import StxIcon from '../../../ui/icons/StxIcon';
 
 export function Logo({ ...iconProps }: IconProps) {
   return (
     <ExplorerLink href={'/'} title="Stacks Explorer">
-      <Icon size={6} color="white" flexShrink={0} aria-label="Homepage" {...iconProps}>
+      <Icon h={6} w={6} color="white" flexShrink={0} aria-label="Homepage" {...iconProps}>
         <StxIcon />
       </Icon>
     </ExplorerLink>

diff --git a/src/app/_components/NavBar/MobileNav.tsx b/src/app/_components/NavBar/MobileNav.tsx
@@ -1,10 +1,8 @@
-import { Separator } from '@chakra-ui/react';
+import { Flex, Icon, Separator } from '@chakra-ui/react';
 import { X } from '@phosphor-icons/react';
 import { useEffect } from 'react';
 
 import { TokenPrice } from '../../../common/types/tokenPrice';
-import { Flex } from '../../../ui/Flex';
-import { Icon } from '../../../ui/Icon';
 import { IconButton } from '../../../ui/IconButton';
 import { Stack } from '../../../ui/Stack';
 import { BtcStxPrice } from './BtcStxPrice';
@@ -62,7 +60,7 @@ export function MobileNav({
       <Flex justifyContent={'space-between'} alignItems={'center'} height={10}>
         <Logo color="surfaceOpposite" />
         <IconButton onClick={close} aria-label={'Close menu'}>
-          <Icon size={6} color="surfaceOpposite">
+          <Icon h={6} w={6} color="surfaceOpposite">
             <X />
           </Icon>
         </IconButton>

diff --git a/src/app/_components/NavBar/NetworkLabel.tsx b/src/app/_components/NavBar/NetworkLabel.tsx
@@ -8,11 +8,9 @@ import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { useCustomNetworkApiInfo } from '../../../common/queries/useCustomNetworkApiInfo';
 import { Network } from '../../../common/types/network';
 import { buildUrl } from '../../../common/utils/buildUrl';
-import { Flex } from '../../../ui/Flex';
-import { Icon } from '../../../ui/Icon';
+import { Icon, Flex, Stack } from '@chakra-ui/react';
 import { IconButton } from '../../../ui/IconButton';
-import { Stack } from '../../../ui/Stack';
-import { Tooltip } from '../../../ui/Tooltip';
+import { Tooltip } from '../../../components/ui/tooltip';
 import { Caption, Title } from '../../../ui/typography';
 
 const ellipsisStyle: React.CSSProperties = {
@@ -133,13 +131,13 @@ export const NetworkLabel: FC<{ network: Network }> = ({ network }) => {
               aria-label={'Remove network'}
               _hover={{ bg: 'whiteAlpha.400' }}
             >
-              <Icon size={4}>
+              <Icon h={4} w={4}>
                 <Trash />
               </Icon>
             </IconButton>
           </Tooltip>
         ) : isActive ? (
-          <Icon color={'icon'} size={4}>
+          <Icon color={'icon'} h={4} w={4}>
             <Check />
           </Icon>
         ) : null}

diff --git a/src/app/_components/NavBar/NetworkModeBanner.tsx b/src/app/_components/NavBar/NetworkModeBanner.tsx
@@ -1,22 +1,20 @@
 'use client';
 
+import { Flex, Icon, Text } from '@chakra-ui/react';
 import { Flask } from '@phosphor-icons/react';
 import { FC } from 'react';
 
 import { Badge } from '../../../common/components/Badge';
 import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { capitalize } from '../../../common/utils/utils';
-import { Flex } from '../../../ui/Flex';
-import { Icon } from '../../../ui/Icon';
-import { Text } from '../../../ui/Text';
 
 export const NetworkModeBanner: FC = () => {
   const networkMode = useGlobalContext().activeNetwork.mode;
   if (networkMode !== 'testnet') return null;
   return (
     <Badge bg="white" border={'none'}>
       <Flex alignItems="center" as={'span'}>
-        <Icon color={'black'} size={4}>
+        <Icon color={'black'} h={4} w={4}>
           <Flask />
         </Icon>
         <Text color={'black'} whiteSpace={'nowrap'} as={'span'}>

diff --git a/src/app/_components/NavBar/index.tsx b/src/app/_components/NavBar/index.tsx
@@ -13,9 +13,7 @@ import { TokenPrice } from '../../../common/types/tokenPrice';
 import { buildUrl } from '../../../common/utils/buildUrl';
 import { capitalize } from '../../../common/utils/utils';
 import { Search } from '../../../features/search/Search';
-import { Box } from '../../../ui/Box';
-import { Flex } from '../../../ui/Flex';
-import { Icon } from '../../../ui/Icon';
+import { Icon, Flex, Box } from '@chakra-ui/react';
 import { BtcStxPrice } from './BtcStxPrice';
 import { DesktopColorModeButton } from './DesktopColorModeButton';
 import { DesktopNav } from './DesktopNav';
@@ -79,7 +77,7 @@ export function NavBar({ tokenPrice }: { tokenPrice: TokenPrice }) {
             label: (
               <NavLabel
                 icon={
-                  <Icon size={4} color={'text'}>
+                  <Icon h={4} w={4} color={'text'}>
                     <Plus />
                   </Icon>
                 }

diff --git a/src/app/_components/Stats/CurrentStackingCycle/index.tsx b/src/app/_components/Stats/CurrentStackingCycle/index.tsx
@@ -3,10 +3,7 @@
 import { Info } from '@phosphor-icons/react';
 import { useMemo } from 'react';
 
-import { Flex } from '../../../../ui/Flex';
-import { GridProps } from '../../../../ui/Grid';
-import { Icon } from '../../../../ui/Icon';
-import { Text } from '../../../../ui/Text';
+import { Flex, GridProps, Icon, Text } from '@chakra-ui/react';
 import { Tooltip } from '../../../../ui/Tooltip';
 import { ExplorerErrorBoundary } from '../../ErrorBoundary';
 import { StackingCycle } from '../StackingCycle';
@@ -30,7 +27,7 @@ function CurrentStackingCycleBase(props: GridProps) {
           <Flex alignItems={'center'}>
             {approximateDaysTilNextCycle} day{approximateDaysTilNextCycle !== 1 ? 's' : ''}
             &nbsp;
-            <Icon size={3}>
+            <Icon h={3} w={3}>
               <Info />
             </Icon>
           </Flex>

diff --git a/src/app/_components/Stats/LastBlock/index.tsx b/src/app/_components/Stats/LastBlock/index.tsx
@@ -1,11 +1,8 @@
 'use client';
 
-import { FlexProps } from '@chakra-ui/react';
+import { Box, Flex, FlexProps, Icon } from '@chakra-ui/react';
 
 import { useSuspenseBlockListInfinite } from '../../../../common/queries/useBlockListInfinite';
-import { Box } from '../../../../ui/Box';
-import { Flex } from '../../../../ui/Flex';
-import { Icon } from '../../../../ui/Icon';
 import BitcoinIcon from '../../../../ui/icons/BitcoinIcon';
 import { ExplorerErrorBoundary } from '../../ErrorBoundary';
 import { StatSection } from '../StatSection';
@@ -29,7 +26,7 @@ function LastBlockBase(props: FlexProps) {
           top={0.5}
           gap={1.5}
         >
-          <Icon size={4.5}>
+          <Icon h={4.5} w={4.5}>
             <BitcoinIcon />
           </Icon>
           #{lastBurnBlockHeight}