feat: use new block list for nakamoto testnet

package.json

@@ -16,6 +16,7 @@
     "typecheck": "tsc --noEmit",
     "test:e2e": "playwright test",
     "test": "jest --env=jsdom",
+    "test:update-snapshots": "jest --updateSnapshot --env=jsdom",
     "test:unit": "jest --forceExit ./src",
     "prepare": "husky install"
   },

src/app/_components/BlockList/BlocksPage/BlocksPageHeaders.tsx

@@ -6,6 +6,7 @@ import { BurnBlock, NakamotoBlock } from '@stacks/blockchain-api-client';
 
 import { Card } from '../../../../common/components/Card';
 import { useSuspenseInfiniteQueryResult } from '../../../../common/hooks/useInfiniteQueryResult';
+import { useRenderNewBlockList } from '../../../../common/hooks/useIsNakamoto';
 import { useSuspenseBlocksByBurnBlock } from '../../../../common/queries/useBlocksByBurnBlock';
 import { useSuspenseBurnBlocks } from '../../../../common/queries/useBurnBlocksInfinite';
 import { Flex } from '../../../../ui/Flex';
@@ -114,6 +115,10 @@ export function BlocksPageHeaderLayout({
   averageStacksBlockTimeCard: ReactNode;
   lastConfirmedBitcoinBlockCard: ReactNode;
 } & React.ComponentProps<typeof Card>) {
+  const renderNewBlockList = useRenderNewBlockList();
+  if (renderNewBlockList) {
+    return null;
+  }
   return (
     <Card
       width="full"

src/app/_components/BlockList/LayoutA/__tests__/__snapshots__/BlockListWithControls.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`BlockListWithControls renders correctly 1`] = `
         class="css-1gdm77d"
       >
         <div
-          class="css-1pyx7hi"
+          class="css-1lfnhv6"
         >
           <div
             class="chakra-form-control css-8ghjt3"

src/app/_components/NavBar/NetworkLabel.tsx

@@ -95,15 +95,29 @@ export const NetworkLabel: FC<{ network: Network }> = ({ network }) => {
             title={network.label}
             maxWidth="100%"
           >
-            {network.label === 'https://api.nakamoto.testnet.hiro.so'
-              ? 'Nakamoto Testnet'
-              : network.label}
+            {network.label}
           </Title>
           {network.isSubnet ? (
             <Badge bg={`bg4.${colorMode}`} ml="8px" color={`textCaption.${colorMode}`}>
               subnet
             </Badge>
-          ) : network.label === 'Stacks Testnet (Primary)' ? null : (
+          ) : network.label === 'Stacks Testnet (Primary)' ? null : network.label ===
+            'Nakamoto Testnet' ? (
+            <Badge
+              color={purpleBadgeColor}
+              bg={purpleBadgeBg}
+              px={'2'}
+              py={'1'}
+              fontSize={'xs'}
+              rounded={'full'}
+              border={'1px'}
+              borderColor={badgeBorder}
+              fontWeight={'medium'}
+              ml="8px"
+            >
+              Nakamoto 3.0
+            </Badge>
+          ) : (
             <Badge
               color={purpleBadgeColor}
               bg={purpleBadgeBg}

src/common/components/modals/Nakamoto.tsx

@@ -20,22 +20,21 @@ export function NakamotoModal() {
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
-    const nakamotoModalShown = localStorage.getItem('nakamoto25ModalShown');
+    const nakamotoModalShown = localStorage.getItem('nakamoto3ModalShown');
     try {
       const dismissQueryParam = new URLSearchParams(window.location.search).get('dismiss');
       // to run performance testing without the modal
       if (dismissQueryParam === 'nakamoto') {
         return;
       }
     } catch (e) {}
-    // TODO: temporarily disable the modal
-    // if (!nakamotoModalShown || nakamotoModalShown === 'false') {
-    //   setIsOpen(true);
-    // }
+    if (!nakamotoModalShown || nakamotoModalShown === 'false') {
+      setIsOpen(true);
+    }
   }, []);
 
   const handleClose = () => {
-    localStorage.setItem('nakamoto25ModalShown', 'true');
+    localStorage.setItem('nakamoto3ModalShown', 'true');
     setIsOpen(false);
   };
 
@@ -66,28 +65,28 @@ export function NakamotoModal() {
               NAKAMOTO UPGRADE
             </Badge>
             <Text fontSize={'4xl'} textAlign={'center'}>
-              Nakamoto 2.5 is live on Mainnet! 🎉
+              Nakamoto 3.0 is live on Nakamoto Testnet
             </Text>
             <Image src={'/nakamoto.png'} alt={'Nakamoto'} />
             <ButtonLink
               variant={'primary'}
-              href={'/?chain=mainnet'}
+              href={'/?chain=testnet&api=https://api.nakamoto.testnet.hiro.so'}
               onClick={() => {
                 handleClose();
                 void queryClient.clear();
               }}
               _hover={{ textDecoration: 'none' }}
             >
-              Explore Nakamoto
+              Explore Nakamoto 3.0
             </ButtonLink>
             <ModalFooter borderTop={'1px'} width={'full'} justifyContent={'center'}>
               <TextLink
                 color={'purple.600'}
-                href={'https://docs.hiro.so/nakamoto'}
+                href={'https://stacks.org/nakamoto-hard-fork-block'}
                 fontSize={'sm'}
                 target={'_blank'}
               >
-                Learn more about Nakamoto ↗
+                Learn more about Nakamoto 3.0 ↗
               </TextLink>
             </ModalFooter>
           </Flex>

src/common/hooks/useIsNakamoto.ts

@@ -5,7 +5,6 @@ export function useRenderNewBlockList() {
 
   const isMainnet = activeNetworkKey === 'https://api.hiro.so';
   const isTestnet = activeNetworkKey === 'https://api.testnet.hiro.so';
-  const isNakamotoTestnet = activeNetworkKey === 'https://api.nakamoto.testnet.hiro.so';
 
-  return !isMainnet && !isTestnet && !isNakamotoTestnet;
+  return !isMainnet && !isTestnet;
 }