cat21-mint: live stats + latest cats; genesis $getBlock fix; misc

- cat21-mint: dynamic stats block (totalCats / proofOfCatWork) and a
  2-row grid of the 6 latest cats linking to cat21.space, fed by
  Cat21ApiService.getStatus / getLatestCatNumbers. Intro copy uses
  the whitepaper's reveal language.

- backend $getBlock: short-circuit genesis hashes (mainnet/test3/test4/
  signet/regtest) to bypass \$indexBlock. Bitcoin Core's getrawtransaction
  hardcoded-rejects the genesis coinbase, so the standard index path
  ends as 404. Return the bare block via bitcoinCoreApi.

- block.component: no previous-block arrow on block 1. Our electrs runs
  lightmode and can't serve the genesis tx; without this, navigating
  back from block 1 dead-ends in a 404.

- block-ordpool-stats: status-detail wraps at 70ch (display: block,
  max-width: 70ch) so the cell content stays inside the layout.

Author: hans-crypto

backend/src/api/blocks.ts

@@ -22,6 +22,17 @@ import { DigitalArtifactAnalyserService, getFirstInscriptionHeight } from 'ordpo
 // HACK: force a given block for debugging reasons
 // const debugBlock = 839999;
 const debugBlock = null;
+
+// HACK -- Ordpool: genesis hashes for the supported Bitcoin networks. Used
+// to short-circuit $getBlock for genesis (Core can't getrawtransaction the
+// genesis coinbase, so the standard index path 404s).
+const BLOCK_GENESIS_HASHES = [
+  '000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f', // mainnet
+  '000000000933ea01ad0ee984209779baaec3ced90fa3f408719526f8d77f4943', // testnet3
+  '00000000da84f2bafbbc53dee25a72ae507ff4914b867c565be350b0da8bf043', // testnet4
+  '00000008819873e925422c1ff0f99f7cc9bbb232af63a077a480a3633bee1ef6', // signet
+  '0f9188f13cb7b2c71f2a335e3a4fc328bf5beb436012afca590b1a11466e2206', // regtest
+];
 import BlocksSummariesRepository from '../repositories/BlocksSummariesRepository';
 import BlocksAuditsRepository from '../repositories/BlocksAuditsRepository';
 import cpfpRepository from '../repositories/CpfpRepository';
@@ -1518,6 +1529,14 @@ class Blocks {
       return await bitcoinCoreApi.$getBlock(hash);
     }
 
+    // HACK -- Ordpool: short-circuit genesis. Bitcoin Core treats the genesis
+    // coinbase tx as non-standard (getrawtransaction fails), so $indexBlock's
+    // call to $getTransactionsExtended throws and the route ends up as 404.
+    // Return the bare block from bitcoinCoreApi without trying to extend txs.
+    if (BLOCK_GENESIS_HASHES.includes(hash)) {
+      return await bitcoinCoreApi.$getBlock(hash);
+    }
+
     // Bitcoin network, add our custom data on top
     return await this.$indexBlock(hash);
   }

frontend/src/app/components/_ordpool/cat21-mint/cat21-mint.component.html

@@ -8,16 +8,33 @@ <h2 class="mt-2 mb-4">Mint a CAT-21 Ordinal</h2>
 
       <p class="mx-auto" style="max-width: 800px;">
 
-        Did you know? Every Bitcoin transaction can mint a hidden cat.
-        Rescue the cats and be part of the movement!
+        Did you know? Every Bitcoin transaction can reveal a hidden cat.
+        Mint the cats and be part of the movement!
+        CAT-21 is a meme protocol from the creator of Ordpool.
+        Minting is free; you pay only the network fee.
+        Cats bring joy. Reveal yours.
 
-        <!-- <a href="https://cat21.space/" target="_blank" style="color:#FF9900; text-decoration: underline;">CAT-21</a> -->
-        CAT-21 is a new meme protocol from the creator of Ordpool.
-        The minting process is completely free.
-        So take your chance while fees are low and rescue as many cats as you can!
+      </p>
 
-        And while you're here, you might also want to <a href="https://github.com/ordpool-space/cat-21" target="_blank" style="color:#FF9900; text-decoration: underline;">read the whitepaper</a>.
+      <ng-container *ngIf="latestCatNumbers$ | async as latest">
+        <div *ngIf="latest.length"
+             class="cat-grid mx-auto"
+             style="max-width: 800px; margin-top: 16px;">
+          <a *ngFor="let n of latest"
+             [href]="'https://cat21.space/cat/' + n"
+             target="_blank"
+             rel="noopener"
+             [title]="'Cat #' + n">
+            <img [src]="catImageUrl(n)"
+                 [alt]="'Cat #' + n"
+                 loading="lazy">
+          </a>
+        </div>
+      </ng-container>
 
+      <p class="text-center text-muted" style="margin-top: 16px;">
+        Wanna see more? Every revealed cat lives at
+        <a href="https://cat21.space/" target="_blank" style="color:#FF9900; text-decoration: underline;">cat21.space</a>.
       </p>
 
     </div>
@@ -232,6 +249,13 @@ <h2 class="mt-2 mb-4">Mint a CAT-21 Ordinal</h2>
 
     </ng-container>
   </div>
+
+  <p class="text-center mt-4 mx-auto" style="max-width: 800px;" *ngIf="mintStatus$ | async as s">
+    So far, <strong>{{ s.totalCats | number }} cats</strong> have been revealed.<br>
+    <strong>Proof of Cat Work:</strong>
+    {{ s.proofOfCatWork | number }} sats
+    (≈ {{ s.proofOfCatWork / 1e8 | number:'1.2-2' }} BTC).
+  </p>
 </div>
 
 <div class="container-xl pl-5 pr-5" *ngIf="!enableCat21Mint">

frontend/src/app/components/_ordpool/cat21-mint/cat21-mint.component.scss

@@ -9,3 +9,28 @@
     background-color: #276134;
 
 }
+
+// Always exactly 2 rows of cat thumbnails.
+// Column count adapts to breakpoint; we fetch 12 cats and clip the rest with
+// overflow:hidden so the row count stays at 2 regardless of viewport width.
+.cat-grid {
+  display: grid;
+  gap: 8px;
+  justify-content: center;
+  overflow: hidden;
+  max-height: 200px; // 96*2 + 8 gap → exactly 2 rows at 96px
+
+  // Cells are always 96px; the column count adapts to keep 2 rows.
+  grid-template-columns: repeat(3, 96px); // xs: 3 × 2 = 6 cats
+  @media (min-width: 576px) { grid-template-columns: repeat(4, 96px); } // sm: 4 × 2 = 8
+  @media (min-width: 768px) { grid-template-columns: repeat(5, 96px); } // md: 5 × 2 = 10
+  @media (min-width: 992px) { grid-template-columns: repeat(6, 96px); } // lg+: 6 × 2 = 12
+
+  > a > img {
+    width: 96px;
+    height: 96px;
+    image-rendering: pixelated;
+    border-radius: 4px;
+    display: block;
+  }
+}

frontend/src/app/components/_ordpool/cat21-mint/cat21-mint.component.ts

@@ -37,6 +37,15 @@ export class Cat21MintComponent implements OnInit {
   connectedWallet$ = this.walletService.connectedWallet$;
   selectedFeeRate$ = new BehaviorSubject<number>(0);
 
+  mintStatus$ = this.cat21ApiService.getStatus().pipe(
+    catchError(() => of(null))
+  );
+  latestCatNumbers$ = this.cat21ApiService.getLatestCatNumbers(12).pipe(
+    map(r => r.catNumbers),
+    catchError(() => of([] as number[]))
+  );
+  catImageUrl = (n: number) => this.cat21ApiService.getCatImageUrl(n);
+
   selectedPaymentOutput: {
     simulation: SimulateTransactionResult;
     paymentOutput: TxnOutput;

frontend/src/app/components/_ordpool/ordpool-stats/block-ordpool-stats.component.scss

@@ -51,4 +51,6 @@ small {
 .status-detail {
   color: var(--transparent-fg);
   font-size: 0.9em;
+  display: block;
+  max-width: 70ch;
 }

frontend/src/app/components/block/block.component.ts

@@ -564,7 +564,11 @@ export class BlockComponent implements OnInit, OnDestroy {
 
   setNextAndPreviousBlockLink(): void {
     if (this.latestBlock) {
-      if (!this.blockHeight){
+      // HACK -- Ordpool: also hide prev-arrow on block 1.
+      // ordpool-backend can't index genesis (Bitcoin Core treats the genesis
+      // coinbase tx specially, $getTransactionsExtended fails), so navigating
+      // to block 0 returns 404. Don't offer that link.
+      if (!this.blockHeight || this.blockHeight === 1){
         this.showPreviousBlocklink = false;
       } else {
         this.showPreviousBlocklink = true;

frontend/src/app/services/ordinals/cat21-api.service.ts

@@ -1,15 +1,21 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
-import { Observable, interval, startWith, switchMap, takeWhile } from 'rxjs';
+import { Observable, interval, shareReplay, startWith, switchMap, takeWhile } from 'rxjs';
 
 import { environment } from '../../../environments/environment';
 import { WalletService } from './wallet.service';
 
 export interface StatusResult {
-  network: string;
-  indexedCats: number;
-  lastSuccessfulExecution: string;
-  uptime: number;
+  totalCats: number;
+  lastSyncedCatNumber: number;
+  proofOfCatWork: number;
+}
+
+export interface CatNumbersResult {
+  catNumbers: number[];
+  total: number;
+  currentPage: number;
+  itemsPerPage: number;
 }
 
 export interface Cat21 {
@@ -112,6 +118,22 @@ export class Cat21ApiService {
     return this.http.get<WhitelistStatusResult>(`${this.baseUrl}/whitelist/status/${walletAddress}`);
   }
 
+  getStatus(): Observable<StatusResult> {
+    return this.http.get<StatusResult>(`${this.baseUrl}/api/status`).pipe(
+      shareReplay({ bufferSize: 1, refCount: true })
+    );
+  }
+
+  getLatestCatNumbers(itemsPerPage: number): Observable<CatNumbersResult> {
+    return this.http.get<CatNumbersResult>(`${this.baseUrl}/api/cats/numbers/${itemsPerPage}/1`).pipe(
+      shareReplay({ bufferSize: 1, refCount: true })
+    );
+  }
+
+  getCatImageUrl(catNumber: number): string {
+    return `${this.baseUrl}/api/cat/${catNumber}/image.webp`;
+  }
+
   /*
   getWhitelistStatusPolled(walletAddress: string): Observable<WhitelistStatusResult> {
     return interval(10000).pipe(