feat: fixed signer id page

Author: BLuEScioN

next.config.js

@@ -30,6 +30,9 @@ const nextConfig = {
   experimental: {
     optimizePackageImports: ['@chakra-ui/react'],
   },
+  images: {
+    domains: ['assets.hiro.so'],
+  },
 };
 
 module.exports = withSentryConfig(withBundleAnalyzer(nextConfig), {

package.json

@@ -25,8 +25,8 @@
   "version": "1.0.0",
   "author": "Hiro Systems PBC (formerly Blockstack PBC)",
   "dependencies": {
-    "@chakra-ui/anatomy": "2.2.2",
-    "@chakra-ui/react": "latest",
+    "@chakra-ui/anatomy": "2.3.4",
+    "@chakra-ui/react": "3.2.3",
     "@chakra-ui/theme-tools": "2.1.2",
     "@contentful/rich-text-react-renderer": "15.21.2",
     "@contentful/rich-text-types": "16.5.2",

pnpm-lock.yaml

@@ -50,7 +50,7 @@ export function HomePageLayout({
 
 const Home: NextPage = () => {
   const { activeNetwork } = useGlobalContext();
-  
+
   return (
     <HomePageLayout
       title={<PageTitle data-test="homepage-title">Stacks Explorer</PageTitle>}

src/app/PageClient.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Box } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 import toast from 'react-hot-toast';
 
@@ -9,7 +10,6 @@ import { useAppSelector } from '../../common/state/hooks';
 import { NetworkMode } from '../../common/types/network';
 import { Text } from '../../ui/Text';
 import { selectUserSession } from '../sandbox/sandbox-slice';
-import { Box } from '@chakra-ui/react';
 
 export const AppConfig: React.FC<{
   queryNetworkMode: NetworkMode;

src/app/_components/AppConfig.tsx

@@ -212,7 +212,10 @@ export function BurnBlockGroupGrid({
               isLast={i === stxBlocksToDisplay.length - 1 && numStxBlocksNotDisplayed <= 0}
             />
             {i < stxBlocksToDisplay.length - 1 && (
-              <Box gridColumn={'1/5'} borderBottom={'1px solid var(--stacks-colors-border-secondary)'}></Box>
+              <Box
+                gridColumn={'1/5'}
+                borderBottom={'1px solid var(--stacks-colors-border-secondary)'}
+              ></Box>
             )}
           </React.Fragment>
         ))}

src/app/_components/BlockList/Grouped/BlockListGrouped.tsx

@@ -179,7 +179,8 @@ export function UpdateBarSkeleton() {
 }
 
 export function BlocksPageBlockListSkeleton() {
-  return ( // TODO: fix this loading state
+  return (
+    // TODO: fix this loading state
     <BlocksPageBlockListLayout>
       <BlocksPageControlsSkeleton horizontal />
       <UpdateBarSkeleton />

src/app/_components/BlockList/Grouped/skeleton.tsx

@@ -45,7 +45,14 @@ export function HomePageControlsLayout({
   children: ReactNode;
 }) {
   return (
-    <Stack gap={3} pb={6} marginX={-6} px={6} py={5} borderBottom={liveUpdates ? '1px solid var(--stacks-colors-border-secondary)' : 'none'}>
+    <Stack
+      gap={3}
+      pb={6}
+      marginX={-6}
+      px={6}
+      py={5}
+      borderBottom={liveUpdates ? '1px solid var(--stacks-colors-border-secondary)' : 'none'}
+    >
       {children}
     </Stack>
   );

src/app/_components/BlockList/HomePage/HomePageBlockList.tsx

@@ -5,10 +5,10 @@ import { Suspense, useMemo } from 'react';
 
 import { ListFooter } from '../../../../common/components/ListFooter';
 import { useBlockListContext } from '../BlockListContext';
+import { BlockListUngrouped } from '../Ungrouped/BlockListUngrouped';
 import { HomePageBlockListUngroupedSkeleton } from '../Ungrouped/skeleton';
 import { UpdateBar } from '../UpdateBar';
 import { useHomePageBlockList } from '../data/useHomePageBlockList';
-import { BlockListUngrouped } from '../Ungrouped/BlockListUngrouped';
 
 function HomePageBlockListUngroupedBase() {
   const { liveUpdates } = useBlockListContext();

src/app/_components/BlockList/HomePage/HomePageBlockListUngrouped.tsx

@@ -310,7 +310,10 @@ function StxBlocksGrid({
               isLast={i === stxBlocksToDisplay.length - 1 && numStxBlocksNotDisplayed <= 0}
             />
             {i < stxBlocksToDisplay.length - 1 && (
-              <Box gridColumn={'1/5'} borderBottom={`1px solid var(--stacks-colors-border-secondary)`}></Box>
+              <Box
+                gridColumn={'1/5'}
+                borderBottom={`1px solid var(--stacks-colors-border-secondary)`}
+              ></Box>
             )}
           </React.Fragment>
         ))}