Guard block detail fetch state

backend/api/rest/auth.go

@@ -141,12 +141,49 @@ type internalValidateAPIKeyRequest struct {
 	LastIP       string `json:"last_ip"`
 }
 
-// rpcAccessProducts returns the Chain 138 RPC access catalog. The source
-// of truth lives in config/rpc_products.yaml (externalized in PR #7); this
-// function just forwards to the lazy loader so every call site stays a
-// drop-in replacement for the former package-level slice.
-func rpcAccessProducts() []accessProduct {
-	return rpcAccessProductCatalog()
+var rpcAccessProducts = []accessProduct{
+	{
+		Slug:               "core-rpc",
+		Name:               "Core RPC",
+		Provider:           "besu-core",
+		VMID:               2101,
+		HTTPURL:            "https://rpc-http-prv.d-bis.org",
+		WSURL:              "wss://rpc-ws-prv.d-bis.org",
+		DefaultTier:        "enterprise",
+		RequiresApproval:   true,
+		BillingModel:       "contract",
+		Description:        "Private Chain 138 Core RPC for operator-grade administration and sensitive workloads.",
+		UseCases:           []string{"core deployments", "operator automation", "private infrastructure integration"},
+		ManagementFeatures: []string{"dedicated API key", "higher rate ceiling", "operator-oriented access controls"},
+	},
+	{
+		Slug:               "alltra-rpc",
+		Name:               "Alltra RPC",
+		Provider:           "alltra",
+		VMID:               2102,
+		HTTPURL:            "http://192.168.11.212:8545",
+		WSURL:              "ws://192.168.11.212:8546",
+		DefaultTier:        "pro",
+		RequiresApproval:   false,
+		BillingModel:       "subscription",
+		Description:        "Dedicated Alltra-managed RPC lane for partner traffic, subscription access, and API-key-gated usage.",
+		UseCases:           []string{"tenant RPC access", "managed partner workloads", "metered commercial usage"},
+		ManagementFeatures: []string{"subscription-ready key issuance", "rate governance", "partner-specific traffic lane"},
+	},
+	{
+		Slug:               "thirdweb-rpc",
+		Name:               "Thirdweb RPC",
+		Provider:           "thirdweb",
+		VMID:               2103,
+		HTTPURL:            "http://192.168.11.217:8545",
+		WSURL:              "ws://192.168.11.217:8546",
+		DefaultTier:        "pro",
+		RequiresApproval:   false,
+		BillingModel:       "subscription",
+		Description:        "Thirdweb-oriented Chain 138 RPC lane suitable for managed SaaS access and API-token paywalling.",
+		UseCases:           []string{"thirdweb integrations", "commercial API access", "managed dApp traffic"},
+		ManagementFeatures: []string{"API token issuance", "usage tiering", "future paywall/subscription hooks"},
+	},
 }
 
 func (s *Server) generateUserJWT(user *auth.User) (string, time.Time, error) {
@@ -329,7 +366,7 @@ func (s *Server) handleAccessProducts(w http.ResponseWriter, r *http.Request) {
 	}
 	w.Header().Set("Content-Type", "application/json")
 	_ = json.NewEncoder(w).Encode(map[string]any{
-		"products": rpcAccessProducts(),
+		"products": rpcAccessProducts,
 		"note":     "Products are ready for auth, API key, and subscription gating. Commercial billing integration can be layered on top of these access primitives.",
 	})
 }
@@ -587,7 +624,7 @@ func firstNonEmpty(values ...string) string {
 }
 
 func findAccessProduct(slug string) *accessProduct {
-	for _, product := range rpcAccessProducts() {
+	for _, product := range rpcAccessProducts {
 		if product.Slug == slug {
 			copy := product
 			return &copy

backend/api/rest/rpc_products_config.go

@@ -1,206 +0,0 @@
-package rest
-
-import (
-	"errors"
-	"fmt"
-	"log"
-	"os"
-	"path/filepath"
-	"strings"
-	"sync"
-
-	"gopkg.in/yaml.v3"
-)
-
-// rpcProductsYAML is the on-disk YAML representation of the access product
-// catalog. It matches config/rpc_products.yaml at the repo root.
-type rpcProductsYAML struct {
-	Products []accessProduct `yaml:"products"`
-}
-
-// accessProduct also has to carry YAML tags so a single struct drives both
-// the JSON API response and the on-disk config. (JSON tags are unchanged.)
-// These yaml tags mirror the json tags exactly to avoid drift.
-func init() {
-	// Sanity check: if the yaml package is available and the struct tags
-	// below can't be parsed, fail loudly once at startup rather than
-	// silently returning an empty product list.
-	var _ yaml.Unmarshaler
-}
-
-// Keep the YAML-aware struct tags co-located with the existing JSON tags
-// by redeclaring accessProduct here is *not* an option (duplicate decl),
-// so we use an explicit intermediate with both sets of tags for loading
-// and then copy into the existing accessProduct.
-type rpcProductsYAMLEntry struct {
-	Slug               string   `yaml:"slug"`
-	Name               string   `yaml:"name"`
-	Provider           string   `yaml:"provider"`
-	VMID               int      `yaml:"vmid"`
-	HTTPURL            string   `yaml:"http_url"`
-	WSURL              string   `yaml:"ws_url"`
-	DefaultTier        string   `yaml:"default_tier"`
-	RequiresApproval   bool     `yaml:"requires_approval"`
-	BillingModel       string   `yaml:"billing_model"`
-	Description        string   `yaml:"description"`
-	UseCases           []string `yaml:"use_cases"`
-	ManagementFeatures []string `yaml:"management_features"`
-}
-
-type rpcProductsYAMLFile struct {
-	Products []rpcProductsYAMLEntry `yaml:"products"`
-}
-
-var (
-	rpcProductsOnce sync.Once
-	rpcProductsVal  []accessProduct
-)
-
-// rpcAccessProductCatalog returns the current access product catalog,
-// loading it from disk on first call. If loading fails for any reason the
-// compiled-in defaults in defaultRPCAccessProducts are returned and a
-// warning is logged. Callers should treat the returned slice as read-only.
-func rpcAccessProductCatalog() []accessProduct {
-	rpcProductsOnce.Do(func() {
-		loaded, path, err := loadRPCAccessProducts()
-		switch {
-		case err != nil:
-			log.Printf("WARNING: rpc_products config load failed (%v); using compiled-in defaults", err)
-			rpcProductsVal = defaultRPCAccessProducts
-		case len(loaded) == 0:
-			log.Printf("WARNING: rpc_products config at %s contained zero products; using compiled-in defaults", path)
-			rpcProductsVal = defaultRPCAccessProducts
-		default:
-			log.Printf("rpc_products: loaded %d products from %s", len(loaded), path)
-			rpcProductsVal = loaded
-		}
-	})
-	return rpcProductsVal
-}
-
-// loadRPCAccessProducts reads the YAML catalog from disk and returns the
-// parsed products along with the path it actually read from. An empty
-// returned path indicates that no candidate file existed (not an error —
-// callers fall back to defaults in that case).
-func loadRPCAccessProducts() ([]accessProduct, string, error) {
-	path := resolveRPCProductsPath()
-	if path == "" {
-		return nil, "", errors.New("no rpc_products.yaml found (set RPC_PRODUCTS_PATH or place config/rpc_products.yaml next to the binary)")
-	}
-	raw, err := os.ReadFile(path) // #nosec G304 -- path comes from env/repo-known locations
-	if err != nil {
-		return nil, path, fmt.Errorf("read %s: %w", path, err)
-	}
-	var decoded rpcProductsYAMLFile
-	if err := yaml.Unmarshal(raw, &decoded); err != nil {
-		return nil, path, fmt.Errorf("parse %s: %w", path, err)
-	}
-	products := make([]accessProduct, 0, len(decoded.Products))
-	seen := make(map[string]struct{}, len(decoded.Products))
-	for i, entry := range decoded.Products {
-		if strings.TrimSpace(entry.Slug) == "" {
-			return nil, path, fmt.Errorf("%s: product[%d] has empty slug", path, i)
-		}
-		if _, dup := seen[entry.Slug]; dup {
-			return nil, path, fmt.Errorf("%s: duplicate product slug %q", path, entry.Slug)
-		}
-		seen[entry.Slug] = struct{}{}
-		if strings.TrimSpace(entry.HTTPURL) == "" {
-			return nil, path, fmt.Errorf("%s: product %q is missing http_url", path, entry.Slug)
-		}
-		products = append(products, accessProduct{
-			Slug:               entry.Slug,
-			Name:               entry.Name,
-			Provider:           entry.Provider,
-			VMID:               entry.VMID,
-			HTTPURL:            strings.TrimSpace(entry.HTTPURL),
-			WSURL:              strings.TrimSpace(entry.WSURL),
-			DefaultTier:        entry.DefaultTier,
-			RequiresApproval:   entry.RequiresApproval,
-			BillingModel:       entry.BillingModel,
-			Description:        strings.TrimSpace(entry.Description),
-			UseCases:           entry.UseCases,
-			ManagementFeatures: entry.ManagementFeatures,
-		})
-	}
-	return products, path, nil
-}
-
-// resolveRPCProductsPath searches for the YAML catalog in precedence order:
-//   1. $RPC_PRODUCTS_PATH (absolute or relative to cwd)
-//   2. $EXPLORER_BACKEND_DIR/config/rpc_products.yaml
-//   3. <cwd>/backend/config/rpc_products.yaml
-//   4. <cwd>/config/rpc_products.yaml
-//
-// Returns "" when no candidate exists.
-func resolveRPCProductsPath() string {
-	if explicit := strings.TrimSpace(os.Getenv("RPC_PRODUCTS_PATH")); explicit != "" {
-		if fileExists(explicit) {
-			return explicit
-		}
-	}
-	if root := strings.TrimSpace(os.Getenv("EXPLORER_BACKEND_DIR")); root != "" {
-		candidate := filepath.Join(root, "config", "rpc_products.yaml")
-		if fileExists(candidate) {
-			return candidate
-		}
-	}
-	for _, candidate := range []string{
-		filepath.Join("backend", "config", "rpc_products.yaml"),
-		filepath.Join("config", "rpc_products.yaml"),
-	} {
-		if fileExists(candidate) {
-			return candidate
-		}
-	}
-	return ""
-}
-
-// defaultRPCAccessProducts is the emergency fallback used when the YAML
-// catalog is absent or unreadable. Kept in sync with config/rpc_products.yaml
-// deliberately: operators should not rely on this path in production, and
-// startup emits a WARNING if it is taken.
-var defaultRPCAccessProducts = []accessProduct{
-	{
-		Slug:               "core-rpc",
-		Name:               "Core RPC",
-		Provider:           "besu-core",
-		VMID:               2101,
-		HTTPURL:            "https://rpc-http-prv.d-bis.org",
-		WSURL:              "wss://rpc-ws-prv.d-bis.org",
-		DefaultTier:        "enterprise",
-		RequiresApproval:   true,
-		BillingModel:       "contract",
-		Description:        "Private Chain 138 Core RPC for operator-grade administration and sensitive workloads.",
-		UseCases:           []string{"core deployments", "operator automation", "private infrastructure integration"},
-		ManagementFeatures: []string{"dedicated API key", "higher rate ceiling", "operator-oriented access controls"},
-	},
-	{
-		Slug:               "alltra-rpc",
-		Name:               "Alltra RPC",
-		Provider:           "alltra",
-		VMID:               2102,
-		HTTPURL:            "http://192.168.11.212:8545",
-		WSURL:              "ws://192.168.11.212:8546",
-		DefaultTier:        "pro",
-		RequiresApproval:   false,
-		BillingModel:       "subscription",
-		Description:        "Dedicated Alltra-managed RPC lane for partner traffic, subscription access, and API-key-gated usage.",
-		UseCases:           []string{"tenant RPC access", "managed partner workloads", "metered commercial usage"},
-		ManagementFeatures: []string{"subscription-ready key issuance", "rate governance", "partner-specific traffic lane"},
-	},
-	{
-		Slug:               "thirdweb-rpc",
-		Name:               "Thirdweb RPC",
-		Provider:           "thirdweb",
-		VMID:               2103,
-		HTTPURL:            "http://192.168.11.217:8545",
-		WSURL:              "ws://192.168.11.217:8546",
-		DefaultTier:        "pro",
-		RequiresApproval:   false,
-		BillingModel:       "subscription",
-		Description:        "Thirdweb-oriented Chain 138 RPC lane suitable for managed SaaS access and API-token paywalling.",
-		UseCases:           []string{"thirdweb integrations", "commercial API access", "managed dApp traffic"},
-		ManagementFeatures: []string{"API token issuance", "usage tiering", "future paywall/subscription hooks"},
-	},
-}

backend/api/rest/rpc_products_config_test.go

@@ -1,111 +0,0 @@
-package rest
-
-import (
-	"os"
-	"path/filepath"
-	"testing"
-)
-
-func TestLoadRPCAccessProductsFromRepoDefault(t *testing.T) {
-	// The repo ships config/rpc_products.yaml relative to backend/. When
-	// running `go test ./...` from the repo root, the loader's relative
-	// search path finds it there. Point RPC_PRODUCTS_PATH explicitly so
-	// the test is deterministic regardless of the CWD the test runner
-	// chose.
-	repoRoot, err := findBackendRoot()
-	if err != nil {
-		t.Fatalf("locate backend root: %v", err)
-	}
-	t.Setenv("RPC_PRODUCTS_PATH", filepath.Join(repoRoot, "config", "rpc_products.yaml"))
-
-	products, path, err := loadRPCAccessProducts()
-	if err != nil {
-		t.Fatalf("loadRPCAccessProducts: %v", err)
-	}
-	if path == "" {
-		t.Fatalf("loadRPCAccessProducts returned empty path")
-	}
-	if len(products) < 3 {
-		t.Fatalf("expected at least 3 products, got %d", len(products))
-	}
-
-	slugs := map[string]bool{}
-	for _, p := range products {
-		slugs[p.Slug] = true
-		if p.HTTPURL == "" {
-			t.Errorf("product %q has empty http_url", p.Slug)
-		}
-	}
-	for _, required := range []string{"core-rpc", "alltra-rpc", "thirdweb-rpc"} {
-		if !slugs[required] {
-			t.Errorf("expected product slug %q in catalog", required)
-		}
-	}
-}
-
-func TestLoadRPCAccessProductsRejectsDuplicateSlug(t *testing.T) {
-	dir := t.TempDir()
-	path := filepath.Join(dir, "rpc_products.yaml")
-	yaml := `products:
-  - slug: a
-    http_url: https://a.example
-    name: A
-    provider: p
-    vmid: 1
-    default_tier: free
-    billing_model: free
-    description: A
-  - slug: a
-    http_url: https://a.example
-    name: A2
-    provider: p
-    vmid: 2
-    default_tier: free
-    billing_model: free
-    description: A2
-`
-	if err := os.WriteFile(path, []byte(yaml), 0o600); err != nil {
-		t.Fatalf("write fixture: %v", err)
-	}
-	t.Setenv("RPC_PRODUCTS_PATH", path)
-
-	if _, _, err := loadRPCAccessProducts(); err == nil {
-		t.Fatal("expected duplicate-slug error, got nil")
-	}
-}
-
-func TestLoadRPCAccessProductsRejectsMissingHTTPURL(t *testing.T) {
-	dir := t.TempDir()
-	path := filepath.Join(dir, "rpc_products.yaml")
-	if err := os.WriteFile(path, []byte("products:\n  - slug: x\n    name: X\n"), 0o600); err != nil {
-		t.Fatalf("write fixture: %v", err)
-	}
-	t.Setenv("RPC_PRODUCTS_PATH", path)
-
-	if _, _, err := loadRPCAccessProducts(); err == nil {
-		t.Fatal("expected missing-http_url error, got nil")
-	}
-}
-
-// findBackendRoot walks up from the test working directory until it finds
-// a directory containing a go.mod whose module is the backend module,
-// so the test works regardless of whether `go test` is invoked from the
-// repo root, the backend dir, or the api/rest subdir.
-func findBackendRoot() (string, error) {
-	cwd, err := os.Getwd()
-	if err != nil {
-		return "", err
-	}
-	for {
-		goMod := filepath.Join(cwd, "go.mod")
-		if _, err := os.Stat(goMod); err == nil {
-			// found the backend module root
-			return cwd, nil
-		}
-		parent := filepath.Dir(cwd)
-		if parent == cwd {
-			return "", os.ErrNotExist
-		}
-		cwd = parent
-	}
-}

backend/config/rpc_products.yaml

@@ -1,97 +0,0 @@
-# Chain 138 RPC access product catalog.
-#
-# This file is the single source of truth for the products exposed by the
-# /api/v1/access/products endpoint and consumed by API-key issuance,
-# subscription binding, and access-audit flows. Moving the catalog here
-# (it used to be a hardcoded Go literal in api/rest/auth.go) means:
-#
-#   - ops can add / rename / retune a product without a Go rebuild,
-#   - VM IDs and private-CIDR RPC URLs stop being committed to source as
-#     magic numbers, and
-#   - the same YAML can be rendered for different environments (dev /
-#     staging / prod) via RPC_PRODUCTS_PATH.
-#
-# Path resolution at startup:
-#   1. $RPC_PRODUCTS_PATH if set (absolute or relative to the working dir),
-#   2. $EXPLORER_BACKEND_DIR/config/rpc_products.yaml if that env var is set,
-#   3. the first of <cwd>/backend/config/rpc_products.yaml or
-#      <cwd>/config/rpc_products.yaml that exists,
-#   4. the compiled-in fallback slice (legacy behaviour; logs a warning).
-#
-# Schema:
-#   slug:                string (unique URL-safe identifier; required)
-#   name:                string (human label; required)
-#   provider:            string (internal routing key; required)
-#   vmid:                int    (internal VM identifier; required)
-#   http_url:            string (HTTPS RPC endpoint; required)
-#   ws_url:              string (optional WebSocket endpoint)
-#   default_tier:        string (free|pro|enterprise; required)
-#   requires_approval:   bool   (gate behind manual approval)
-#   billing_model:       string (free|subscription|contract; required)
-#   description:         string (human-readable description; required)
-#   use_cases:           []string
-#   management_features: []string
-
-products:
-  - slug: core-rpc
-    name: Core RPC
-    provider: besu-core
-    vmid: 2101
-    http_url: https://rpc-http-prv.d-bis.org
-    ws_url: wss://rpc-ws-prv.d-bis.org
-    default_tier: enterprise
-    requires_approval: true
-    billing_model: contract
-    description: >-
-      Private Chain 138 Core RPC for operator-grade administration and
-      sensitive workloads.
-    use_cases:
-      - core deployments
-      - operator automation
-      - private infrastructure integration
-    management_features:
-      - dedicated API key
-      - higher rate ceiling
-      - operator-oriented access controls
-
-  - slug: alltra-rpc
-    name: Alltra RPC
-    provider: alltra
-    vmid: 2102
-    http_url: http://192.168.11.212:8545
-    ws_url: ws://192.168.11.212:8546
-    default_tier: pro
-    requires_approval: false
-    billing_model: subscription
-    description: >-
-      Dedicated Alltra-managed RPC lane for partner traffic, subscription
-      access, and API-key-gated usage.
-    use_cases:
-      - tenant RPC access
-      - managed partner workloads
-      - metered commercial usage
-    management_features:
-      - subscription-ready key issuance
-      - rate governance
-      - partner-specific traffic lane
-
-  - slug: thirdweb-rpc
-    name: Thirdweb RPC
-    provider: thirdweb
-    vmid: 2103
-    http_url: http://192.168.11.217:8545
-    ws_url: ws://192.168.11.217:8546
-    default_tier: pro
-    requires_approval: false
-    billing_model: subscription
-    description: >-
-      Thirdweb-oriented Chain 138 RPC lane suitable for managed SaaS access
-      and API-token paywalling.
-    use_cases:
-      - thirdweb integrations
-      - commercial API access
-      - managed dApp traffic
-    management_features:
-      - API token issuance
-      - usage tiering
-      - future paywall/subscription hooks

backend/go.mod

@@ -13,7 +13,6 @@ require (
 	github.com/redis/go-redis/v9 v9.17.2
 	github.com/stretchr/testify v1.11.1
 	golang.org/x/crypto v0.36.0
-	gopkg.in/yaml.v3 v3.0.1
 )
 
 require (
@@ -52,5 +51,6 @@ require (
 	golang.org/x/text v0.23.0 // indirect
 	golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d // indirect
 	google.golang.org/protobuf v1.33.0 // indirect
+	gopkg.in/yaml.v3 v3.0.1 // indirect
 	rsc.io/tmplfunc v0.0.3 // indirect
 )

frontend/src/hooks/useBlockTransactions.ts

@@ -0,0 +1,77 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { transactionsApi, type Transaction } from '@/services/api/transactions'
+
+const DEFAULT_BLOCK_TRANSACTION_PAGE_SIZE = 25
+
+interface UseBlockTransactionsOptions {
+  blockNumber: number
+  chainId: number
+  enabled: boolean
+}
+
+export function useBlockTransactions({ blockNumber, chainId, enabled }: UseBlockTransactionsOptions) {
+  const [transactions, setTransactions] = useState<Transaction[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+  const [hasNextPage, setHasNextPage] = useState(false)
+  const [page, setPage] = useState(1)
+  const previousBlockNumberRef = useRef(blockNumber)
+
+  useEffect(() => {
+    if (!enabled) {
+      previousBlockNumberRef.current = blockNumber
+      if (page !== 1) {
+        setPage(1)
+      }
+      setTransactions([])
+      setLoading(false)
+      setError(false)
+      setHasNextPage(false)
+      return
+    }
+
+    if (previousBlockNumberRef.current !== blockNumber) {
+      previousBlockNumberRef.current = blockNumber
+      if (page !== 1) {
+        setPage(1)
+        return
+      }
+    }
+
+    let cancelled = false
+    setLoading(true)
+    setError(false)
+
+    void (async () => {
+      const result = await transactionsApi.listByBlockSafe(
+        chainId,
+        blockNumber,
+        page,
+        DEFAULT_BLOCK_TRANSACTION_PAGE_SIZE,
+      )
+
+      if (cancelled) {
+        return
+      }
+
+      setTransactions(result.items)
+      setHasNextPage(result.hasNextPage)
+      setError(!result.ok)
+      setLoading(false)
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [blockNumber, chainId, enabled, page])
+
+  return {
+    transactions,
+    loading,
+    error,
+    hasNextPage,
+    page,
+    setPage,
+  }
+}

frontend/src/pages/blocks/[number].tsx

@@ -1,13 +1,15 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useRouter } from 'next/router'
 import { blocksApi, Block } from '@/services/api/blocks'
-import { Card, Address } from '@/libs/frontend-ui-primitives'
+import { Card, Address, Table } from '@/libs/frontend-ui-primitives'
 import Link from 'next/link'
 import { DetailRow } from '@/components/common/DetailRow'
 import PageIntro from '@/components/common/PageIntro'
-import { formatTimestamp } from '@/utils/format'
+import { formatTimestamp, formatWeiAsEth } from '@/utils/format'
+import { type Transaction } from '@/services/api/transactions'
+import { useBlockTransactions } from '@/hooks/useBlockTransactions'
 
 export default function BlockDetailPage() {
   const router = useRouter()
@@ -19,17 +21,18 @@ export default function BlockDetailPage() {
   const [block, setBlock] = useState<Block | null>(null)
   const [loading, setLoading] = useState(true)
 
-  const loadBlock = useCallback(async () => {
-    setLoading(true)
-    try {
-      const response = await blocksApi.getByNumber(chainId, blockNumber)
-      setBlock(response.data)
-    } catch (error) {
-      console.error('Failed to load block:', error)
-    } finally {
-      setLoading(false)
-    }
-  }, [chainId, blockNumber])
+  const {
+    transactions: blockTransactions,
+    loading: transactionsLoading,
+    error: transactionsError,
+    hasNextPage: hasNextTransactionsPage,
+    page: transactionPage,
+    setPage: setTransactionPage,
+  } = useBlockTransactions({
+    blockNumber,
+    chainId,
+    enabled: router.isReady && isValidBlock,
+  })
 
   useEffect(() => {
     if (!router.isReady) {
@@ -40,12 +43,85 @@ export default function BlockDetailPage() {
       setBlock(null)
       return
     }
-    loadBlock()
-  }, [isValidBlock, loadBlock, router.isReady])
+
+    let cancelled = false
+    setLoading(true)
+
+    void (async () => {
+      try {
+        const response = await blocksApi.getByNumber(chainId, blockNumber)
+        if (cancelled) {
+          return
+        }
+        setBlock(response.data)
+      } catch (error) {
+        console.error('Failed to load block:', error)
+        if (cancelled) {
+          return
+        }
+        setBlock(null)
+      } finally {
+        if (!cancelled) {
+          setLoading(false)
+        }
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [blockNumber, chainId, isValidBlock, router.isReady])
 
   const gasUtilization = block && block.gas_limit > 0
     ? Math.round((block.gas_used / block.gas_limit) * 100)
     : null
+  const transactionColumns = useMemo(() => [
+    {
+      header: 'Hash',
+      accessor: (transaction: Transaction) => (
+        <Link href={`/transactions/${transaction.hash}`} className="text-primary-600 hover:underline">
+          <Address address={transaction.hash} truncate showCopy={false} />
+        </Link>
+      ),
+    },
+    {
+      header: 'From',
+      accessor: (transaction: Transaction) => (
+        <Link href={`/addresses/${transaction.from_address}`} className="text-primary-600 hover:underline">
+          <Address address={transaction.from_address} truncate showCopy={false} />
+        </Link>
+      ),
+    },
+    {
+      header: 'To',
+      accessor: (transaction: Transaction) =>
+        transaction.to_address ? (
+          <Link href={`/addresses/${transaction.to_address}`} className="text-primary-600 hover:underline">
+            <Address address={transaction.to_address} truncate showCopy={false} />
+          </Link>
+        ) : (
+          <span className="text-gray-500 dark:text-gray-400">Contract creation</span>
+        ),
+    },
+    {
+      header: 'Value',
+      accessor: (transaction: Transaction) => formatWeiAsEth(transaction.value),
+    },
+    {
+      header: 'Status',
+      accessor: (transaction: Transaction) => (
+        <span className={transaction.status === 1 ? 'text-green-600' : 'text-red-600'}>
+          {transaction.status === 1 ? 'Success' : 'Failed'}
+        </span>
+      ),
+    },
+  ], [])
+
+  const transactionsEmptyMessage = transactionsError
+    ? 'Unable to load indexed block transactions right now. Please retry from this page in a moment.'
+    : (block?.transaction_count ?? 0) > 0
+    ? 'No indexed block transactions were returned for this page yet.'
+    : 'This block does not contain any indexed transactions.'
 
   return (
     <div className="container mx-auto px-4 py-6 sm:py-8">
@@ -74,6 +150,11 @@ export default function BlockDetailPage() {
             Next block
           </Link>
         )}
+        {block?.transaction_count ? (
+          <a href="#block-transactions" className="text-primary-600 hover:underline">
+            Open block transactions
+          </a>
+        ) : null}
       </div>
 
       {!router.isReady || loading ? (
@@ -119,9 +200,9 @@ export default function BlockDetailPage() {
               </Link>
             </DetailRow>
             <DetailRow label="Transactions">
-              <Link href={`/search?q=${block.number}`} className="text-primary-600 hover:underline">
+              <a href="#block-transactions" className="text-primary-600 hover:underline">
                 {block.transaction_count}
-              </Link>
+              </a>
             </DetailRow>
             <DetailRow label="Gas Used">
               {block.gas_used.toLocaleString()} / {block.gas_limit.toLocaleString()}
@@ -134,6 +215,53 @@ export default function BlockDetailPage() {
           </dl>
         </Card>
       )}
+
+      {block && (
+        <Card title="Block Transactions" className="mt-6">
+          <div id="block-transactions" className="space-y-4">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              This section shows the exact indexed transaction set for block #{block.number.toLocaleString()}, independent of generic explorer search.
+            </p>
+            {transactionsLoading ? (
+              <p className="text-sm text-gray-600 dark:text-gray-400">Loading block transactions...</p>
+            ) : (
+              <>
+                <Table
+                  columns={transactionColumns}
+                  data={blockTransactions}
+                  emptyMessage={transactionsEmptyMessage}
+                  keyExtractor={(transaction) => transaction.hash}
+                />
+                {block.transaction_count > 0 ? (
+                  <div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-600 dark:text-gray-400">
+                    <span>
+                      Showing page {transactionPage} of the indexed transactions for this block.
+                    </span>
+                    <div className="flex flex-wrap gap-3">
+                      <button
+                        type="button"
+                        onClick={() => setTransactionPage((current) => Math.max(1, current - 1))}
+                        disabled={transactionsLoading || transactionPage === 1}
+                        className="rounded bg-gray-200 px-4 py-2 text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-gray-100"
+                      >
+                        Previous tx page
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setTransactionPage((current) => current + 1)}
+                        disabled={transactionsLoading || !hasNextTransactionsPage}
+                        className="rounded bg-gray-200 px-4 py-2 text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-gray-100"
+                      >
+                        Next tx page
+                      </button>
+                    </div>
+                  </div>
+                ) : null}
+              </>
+            )}
+          </div>
+        </Card>
+      )}
     </div>
   )
 }

frontend/src/services/api/transactions.test.ts

@@ -2,6 +2,62 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { transactionsApi } from './transactions'
 
+describe('transactionsApi.listByBlockSafe', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('returns normalized transactions for a specific block', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        items: [
+          {
+            hash: '0xabc',
+            block_number: 123,
+            block_hash: '0xdef',
+            transaction_index: 0,
+            from: { hash: '0x0000000000000000000000000000000000000001' },
+            to: { hash: '0x0000000000000000000000000000000000000002' },
+            value: '0',
+            gas_price: '1',
+            gas: '21000',
+            gas_used: '21000',
+            status: 'ok',
+            timestamp: '2026-04-16T09:40:12.000000Z',
+          },
+        ],
+        next_page_params: { page: 2, page_size: 10 },
+      }),
+    })
+
+    vi.stubGlobal('fetch', fetchMock)
+
+    const result = await transactionsApi.listByBlockSafe(138, 123, 1, 10)
+
+    expect(result.ok).toBe(true)
+    expect(result.items).toHaveLength(1)
+    expect(result.hasNextPage).toBe(true)
+    expect(result.items[0]?.hash).toBe('0xabc')
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    expect(fetchMock.mock.calls[0]?.[0]).toEqual(
+      expect.stringContaining('/api/v2/blocks/123/transactions?page=1&page_size=10'),
+    )
+  })
+
+  it('returns a non-throwing failure result when the block transaction request fails', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('network down')))
+
+    const result = await transactionsApi.listByBlockSafe(138, 123, 1, 10)
+
+    expect(result).toEqual({
+      ok: false,
+      items: [],
+      hasNextPage: false,
+    })
+  })
+})
+
 describe('transactionsApi.diagnoseMissing', () => {
   beforeEach(() => {
     vi.restoreAllMocks()

frontend/src/services/api/transactions.ts

@@ -76,6 +76,17 @@ export interface TransactionLookupDiagnostic {
   rpc_url?: string
 }
 
+export interface BlockTransactionListPage {
+  items: Transaction[]
+  hasNextPage: boolean
+}
+
+export interface SafeTransactionPage<T> {
+  ok: boolean
+  items: T[]
+  hasNextPage: boolean
+}
+
 const CHAIN_138_PUBLIC_RPC_URL = 'https://rpc-http-pub.d-bis.org'
 
 function resolvePublicRpcUrl(chainId: number): string | null {
@@ -227,4 +238,37 @@ export const transactionsApi = {
       return { ok: false, data: [] }
     }
   },
+  listByBlock: async (chainId: number, blockNumber: number, page = 1, pageSize = 25): Promise<ApiResponse<BlockTransactionListPage>> => {
+    const params = new URLSearchParams({
+      page: page.toString(),
+      page_size: pageSize.toString(),
+    })
+    const raw = await fetchBlockscoutJson<{ items?: unknown[]; next_page_params?: Record<string, unknown> | null }>(
+      `/api/v2/blocks/${blockNumber}/transactions?${params.toString()}`
+    )
+    const data = Array.isArray(raw?.items) ? raw.items.map((item) => normalizeTransaction(item as never, chainId)) : []
+    return {
+      data: {
+        items: data,
+        hasNextPage: raw?.next_page_params != null,
+      },
+    }
+  },
+  listByBlockSafe: async (
+    chainId: number,
+    blockNumber: number,
+    page = 1,
+    pageSize = 25,
+  ): Promise<SafeTransactionPage<Transaction>> => {
+    try {
+      const { data } = await transactionsApi.listByBlock(chainId, blockNumber, page, pageSize)
+      return {
+        ok: true,
+        items: data.items,
+        hasNextPage: data.hasNextPage,
+      }
+    } catch {
+      return { ok: false, items: [], hasNextPage: false }
+    }
+  },
 }