feat: addressing testing session feedback

hirosystems · Jan 16, 2025 · 90ae3e0 · 90ae3e0
1 parent d0ea8c7
commit 90ae3e0
Show file tree

Hide file tree

Showing 20 changed files with 121 additions and 112 deletions.
diff --git a/src/app/_components/BlockList/BlockCount.tsx b/src/app/_components/BlockList/BlockCount.tsx
@@ -43,6 +43,7 @@ export const BlockCount = memo(function ({
         display="flex"
         color={canLoadMore ? 'blockList.blockCount.text' : 'text'}
         fontSize="xs"
+        fontWeight="semibold"
         alignItems="center"
         gap={1}
         _groupHover={

diff --git a/src/app/_components/BlockList/Controls.tsx b/src/app/_components/BlockList/Controls.tsx
@@ -19,7 +19,7 @@ export function ControlsLayout({
   children: ReactNode;
 } & FlexProps) {
   return (
-    <Flex direction={horizontal ? ['column', 'row'] : 'column'} gap={3} {...rest} py={5}>
+    <Flex direction={horizontal ? ['column', 'row'] : 'column'} gap={3} {...rest}>
       {children}
     </Flex>
   );

diff --git a/src/app/_components/BlockList/HomePage/HomePageBlockList.tsx b/src/app/_components/BlockList/HomePage/HomePageBlockList.tsx
@@ -50,7 +50,6 @@ export function HomePageControlsLayout({
       pb={6}
       marginX={-6}
       px={6}
-      py={5}
       borderBottom={liveUpdates ? '1px solid var(--stacks-colors-border-secondary)' : 'none'}
     >
       {children}
@@ -76,7 +75,7 @@ function HomePageBlockListBase() {
   return (
     <HomePageBlockListLayout>
       <HomePageControlsLayout liveUpdates={liveUpdates}>
-        <Text fontWeight="medium">Recent Blocks</Text>
+        <Text fontWeight="medium" py={2}>Recent Blocks</Text>
         <Controls
           groupByBtc={{
             onChange: () => {

diff --git a/src/app/_components/NavBar/DesktopNav.tsx b/src/app/_components/NavBar/DesktopNav.tsx
@@ -16,7 +16,12 @@ export const DesktopNav: FC<{ navItems: NavItem[] }> = ({ navItems }) => {
     <Flex gap={6}>
       {navItems.map(navItem => (
         <Flex key={navItem.id} alignItems={'center'}>
-          <HoverCardRoot positioning={{ placement: 'bottom-start' }} lazyMount id={navItem.id}>
+          <HoverCardRoot
+            positioning={{ placement: 'bottom-start' }}
+            lazyMount
+            id={navItem.id}
+            openDelay={300}
+          >
             <HoverCardTrigger>
               <Flex
                 gap={1.5}

diff --git a/src/app/_components/NavBar/index.tsx b/src/app/_components/NavBar/index.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { IconButton, useDisclosure } from '@chakra-ui/react';
-import { Box, Flex, Icon } from '@chakra-ui/react';
+import { Box, Flex, Icon, IconButton, useDisclosure } from '@chakra-ui/react';
 import { List, Plus } from '@phosphor-icons/react';
 import { useMemo } from 'react';
 
@@ -14,7 +13,6 @@ 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 { BtcStxPrice } from './BtcStxPrice';
 import { DesktopColorModeButton } from './DesktopColorModeButton';
 import { DesktopNav } from './DesktopNav';
 import { Logo } from './Logo';
@@ -23,6 +21,7 @@ import { NavLabel } from './NavLabel';
 import { NetworkLabel } from './NetworkLabel';
 import { NetworkModeBanner } from './NetworkModeBanner';
 import { NavItem } from './types';
+import { BtcStxPrice } from './BtcStxPrice';
 
 export function NavBar({ tokenPrice }: { tokenPrice: TokenPrice }) {
   const { open, onToggle } = useDisclosure();
@@ -106,8 +105,10 @@ export function NavBar({ tokenPrice }: { tokenPrice: TokenPrice }) {
         <Flex hideBelow="lg" gap={3} alignItems="center">
           <DesktopColorModeButton aria-label={'Change color mode'} />
           <DesktopNav navItems={navItems} />
-          <BtcStxPrice tokenPrice={tokenPrice} />
         </Flex>
+        <Box hideBelow="lg">
+          <BtcStxPrice tokenPrice={tokenPrice} />
+        </Box>
         <Flex hideFrom="lg">
           <IconButton onClick={onToggle} variant={'ghost'} aria-label={'Toggle Navigation'}>
             <Icon w={6} h={6} color={'white'}>

diff --git a/src/app/_components/PageWrapper.tsx b/src/app/_components/PageWrapper.tsx
@@ -93,7 +93,7 @@ export function PageWrapper({
         <Stack mx="auto" width="full" maxWidth="breakpoint-xl" p={6} minHeight={'100vh'}>
           <NavBar tokenPrice={tokenPrice} />
           <Stack
-            mt={10}
+            marginTop={'120px'} // TODO: setting this to 30 doesn't work. fix this
             mb={8}
             gap={7} // TODO: not sure I like putting these spacing styles here. This forces all pages to use fragments. This gap creates the space between the major components on the page.
           >

diff --git a/src/app/_components/StatusBar/IncidentsStatusBar.tsx b/src/app/_components/StatusBar/IncidentsStatusBar.tsx
@@ -1,4 +1,4 @@
-import { Stack, StackProps } from '@chakra-ui/react';
+import { Flex, Stack, StackProps } from '@chakra-ui/react';
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
 import { useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -27,28 +27,21 @@ function IncidentsStatusBar(props: StackProps) {
             ref={statusBarRef}
             impact={impact}
             content={
-              <Stack gap={2} flexGrow={1}>
+              <Flex flexWrap="wrap" flexGrow={1}>
                 <Text fontSize="xs" display="inline">
-                  {name}
-                  {name.endsWith('.') ? '' : '.'}
-                  <Text fontSize="xs" display="inline">
-                    {' '}
-                    More information on the{' '}
-                    <TextLink
-                      href="https://status.hiro.so/"
-                      target="_blank"
-                      color={getColor(impact)}
-                      css={{
-                        display: 'inline',
-                        textDecoration: 'underline',
-                      }}
-                    >
-                      Hiro status page
-                    </TextLink>
-                    .
-                  </Text>
+                  {`${name}${name.endsWith('.') ? '' : '.'} More information on the`}&nbsp;
+                  <TextLink
+                    href="https://status.hiro.so/"
+                    target="_blank"
+                    color={getColor(impact)}
+                    display="inline"
+                    textDecoration="underline"
+                  >
+                    Hiro status page
+                  </TextLink>
+                  .
                 </Text>
-              </Stack>
+              </Flex>
             }
           />
         );

diff --git a/src/app/_components/time-filter/DateInput.tsx b/src/app/_components/time-filter/DateInput.tsx
@@ -11,6 +11,7 @@ export const DateInput = forwardRef<HTMLInputElement, InputProps>((props, ref) =
         color: 'textSubdued',
       },
     }}
+    border="1px solid var(--stacks-colors-border)"
     ref={ref}
     {...props}
   />

diff --git a/src/app/search/filters/DateInput.tsx b/src/app/search/filters/DateInput.tsx
@@ -11,6 +11,7 @@ export const DateInput = forwardRef<HTMLInputElement, InputProps>((inputProps, r
         color: 'textSubdued',
       },
     }}
+    border="1px solid var(--stacks-colors-border)"
     ref={ref}
     {...inputProps}
   />

diff --git a/src/app/token/[tokenId]/TokenInfo/Supply.tsx b/src/app/token/[tokenId]/TokenInfo/Supply.tsx
@@ -16,7 +16,7 @@ export const Supply: FC<
       bodyMainText={circulatingSupply ? abbreviateNumber(circulatingSupply) : <>N/A</>}
       bodySecondaryText={null}
       caption={
-        <Flex fontSize={3} color={'textTitle'} fontWeight="500" alignItems={'center'}>
+        <Flex fontSize={'xs'} color={'textSubdued'} fontWeight="medium" alignItems={'center'}>
           Total Supply: {totalSupply ? abbreviateNumber(totalSupply) : 'N/A'}
         </Flex>
       }

diff --git a/src/app/token/[tokenId]/TokenInfo/Transaction.tsx b/src/app/token/[tokenId]/TokenInfo/Transaction.tsx
@@ -3,6 +3,7 @@ import { FC } from 'react';
 
 import { TxLink } from '../../../../common/components/ExplorerLinks';
 import { StatSection } from '../../../_components/Stats/StatSection';
+import { truncateMiddle } from '@/common/utils/utils';
 
 export const Transaction: FC<
   StackProps & { txId: string; marketCapRank: number | null | undefined }
@@ -18,7 +19,7 @@ export const Transaction: FC<
           color={'text'}
           _hover={{ textDecoration: 'underline' }}
         >
-          <TxLink txId={txId}>{txId}</TxLink>
+          <TxLink txId={txId}>{truncateMiddle(txId, 4)}</TxLink>
         </Box>
       }
       bodySecondaryText={null}

diff --git a/src/app/transactions/MempoolFeePieChart.tsx b/src/app/transactions/MempoolFeePieChart.tsx
@@ -1,7 +1,5 @@
 import { Cell, Pie, PieChart } from 'recharts';
 
-import { system } from '../../ui/theme/theme';
-
 const pieChartWidth = 215;
 const pieChartHeight = 200;
 
@@ -11,7 +9,6 @@ const renderCustomizedLabel = ({
   cy,
   midAngle,
   outerRadius,
-  color,
 }: {
   percent: number;
   x: number;
@@ -20,7 +17,6 @@ const renderCustomizedLabel = ({
   cy: number;
   midAngle: number;
   outerRadius: number;
-  color: string;
 }) => {
   if (!percent) return null; // Don't show zeros
   const RADIAN = Math.PI / 180;
@@ -31,10 +27,12 @@ const renderCustomizedLabel = ({
     <text
       x={newX}
       y={newY}
-      fill={color}
-      fontSize="var(--stacks-fontSizes-xs)"
       textAnchor="middle"
       dominantBaseline="central"
+      style={{
+        fill: 'var(--stacks-colors-text-subdued)',
+        fontSize: 'var(--stacks-font-sizes-xs)',
+      }}
     >
       {percent * 100 < 1 ? '<1%' : `${(percent * 100).toFixed(0)}%`}
     </text>
@@ -45,12 +43,10 @@ const renderCenterCustomizedLabel = ({
   label,
   cx,
   cy,
-  color,
 }: {
   label: string;
   cx: number;
   cy: number;
-  color: string;
 }) => {
   return (
     <text
@@ -59,9 +55,9 @@ const renderCenterCustomizedLabel = ({
       textAnchor="middle"
       dominantBaseline="central"
       style={{
-        fill: color,
-        fontSize: 'var(--stacks-fontSizes-xl)',
-        fontWeight: 'var(--stacks-fontWeights-medium)',
+        fill: 'var(--stacks-colors-text)',
+        fontSize: 'var(--stacks-font-sizes-xl)',
+        fontWeight: 'var(--stacks-font-weights-medium)',
       }}
     >
       {label}
@@ -112,7 +108,6 @@ export function MempoolFeePieChart({
         label={props =>
           renderCustomizedLabel({
             ...props,
-            color: system.token('transactions.mempoolFeePieChart.label'),
           })
         }
         innerRadius={60}
@@ -126,7 +121,6 @@ export function MempoolFeePieChart({
         label: `${totalTxCount} tx`,
         cx: pieChartWidth / 2,
         cy: pieChartHeight / 2,
-        color: system.token('colors.text'),
       })}
     </PieChart>
   );

diff --git a/src/app/txid/[txId]/TxDetails/Recipient.tsx b/src/app/txid/[txId]/TxDetails/Recipient.tsx
@@ -21,7 +21,7 @@ export const Recipient: FC<{ tx: TokenTransferTransaction | MempoolTokenTransfer
           <ArrowDownRight />
         </Icon>
         <ExplorerLink
-          fontSize={'14px'}
+          fontSize={'xs'}
           fontWeight={'medium'}
           href={`/address/${encodeURIComponent(tx.token_transfer.recipient_address)}`}
         >

diff --git a/src/app/txid/[txId]/TxPage.tsx b/src/app/txid/[txId]/TxPage.tsx
@@ -58,10 +58,10 @@ export const TxPage: React.FC<{
       <PageTitleWithTags
         tags={
           <>
-            <Tag startElement={<Icon>{getTxTypeIcon(tx.tx_type)}</Icon>}>
+            <Tag startElement={<Icon h={3.5} w={3.5}>{getTxTypeIcon(tx.tx_type)}</Icon>}>
               {txTypeNamesMap[tx.tx_type]}
             </Tag>
-            <Tag startElement={<Icon>{txStatusIconMap[getTransactionStatus(tx)]}</Icon>}>
+            <Tag startElement={<Icon h={3.5} w={3.5}>{txStatusIconMap[getTransactionStatus(tx)]}</Icon>}>
               {txStatusLabelMap[getTransactionStatus(tx)]}
             </Tag>
           </>

diff --git a/src/common/components/StxPriceButton/index.tsx b/src/common/components/StxPriceButton/index.tsx
@@ -13,7 +13,7 @@ import { useStxPriceForTx } from './useStxPriceForTx';
 
 const initialTooltipContent = 'Displaying current value; Click to show value on day of txn';
 
-const tooltipContent = ['Current value', 'Estimated value on day of txn'];
+const tooltipContent = ['Current value', 'Estimated value on day of txn']; // TODO: add historical value
 
 interface StxPriceButtonProps {
   tx: Transaction | MempoolTransaction;

diff --git a/src/features/txs-list/AddressConfirmedTxsList.tsx b/src/features/txs-list/AddressConfirmedTxsList.tsx
@@ -21,7 +21,7 @@ export const AddressConfirmedTxsList: FC<{ address: string }> = memo(({ address
 
   return (
     <>
-      <AccordionRoot multiple>
+      <AccordionRoot multiple lazyMount>
         <FilteredTxs txs={addressTxs} TxListItem={TxWithTransferListItem} address={address} />
       </AccordionRoot>
       <ListFooter

diff --git a/src/ui/theme/fonts.ts b/src/ui/theme/fonts.ts
@@ -1,13 +1,59 @@
+import { Instrument_Sans, Inter } from 'next/font/google';
+import localFont from 'next/font/local';
+
+export const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+});
+
+export const instrumentSans = Instrument_Sans({
+  subsets: ['latin'],
+  display: 'swap',
+});
+
+export const openSauce = localFont({
+  src: [
+    {
+      path: './fonts/opensaucesans-medium-webfont.woff2',
+      weight: '500',
+    },
+    {
+      path: './fonts/opensaucesans-regular-webfont.woff2',
+      weight: '400',
+    },
+  ],
+});
+
+export const matterRegular = localFont({
+  src: [
+    {
+      path: './fonts/matter-regular.woff',
+      weight: '500',
+    },
+    {
+      path: './fonts/matter-regular.woff2',
+      weight: '400',
+    },
+  ],
+});
+
+export const matterMonoRegular = localFont({
+  src: [
+    {
+      path: './fonts/matter-mono-regular.woff',
+      weight: '500',
+    },
+    {
+      path: './fonts/matter-mono-regular.woff2',
+      weight: '400',
+    },
+  ],
+});
+
 export const FONTS = {
-  // TODO: this might not work
-  body: { value: 'Inter, sans-serif' },
-  //   body: inter.style.fontFamily,
-  heading: { value: 'Open Sauce, sans-serif' },
-  //   heading: openSauce.style.fontFamily,
-  matter: { value: 'Matter, sans-serif' },
-  //   matter: matterRegular.style.fontFamily,
-  matterMono: { value: 'Matter Mono, sans-serif' },
-  //   matterMono: matterMonoRegular.style.fontFamily,
-  instrument: { value: 'Instrument Sans, sans-serif' },
-  //   instrument: instrumentSans.style.fontFamily,
+  body: inter.style.fontFamily,
+  heading: openSauce.style.fontFamily,
+  matter: matterRegular.style.fontFamily,
+  matterMono: matterMonoRegular.style.fontFamily,
+  instrument: instrumentSans.style.fontFamily,
 };