View entire block

Author: Rigidity

crates/api/src/routes.rs

@@ -32,7 +32,8 @@ pub fn router(app: App) -> Router {
         .route("/coins/block/{hash}", get(coins_by_block))
         .route("/coins/children/{coin_id}", get(coins_by_parent))
         .route("/coins/id/{coin_id}", get(coin_by_id))
-        .route("/spend/{coin_id}", get(spend_by_coin_id))
+        .route("/spends/block/{hash}", get(spends_by_block))
+        .route("/spends/id/{coin_id}", get(spend_by_id))
         .with_state(app)
         .layer(cors)
 }
@@ -220,12 +221,52 @@ async fn coin_by_id(
     }))
 }
 
+#[derive(Serialize)]
+pub struct SpendsResponse {
+    pub spends: Vec<CoinSpendRecord>,
+}
+
+async fn spends_by_block(
+    State(app): State<App>,
+    Path(hash): Path<Bytes32>,
+) -> Result<Json<SpendsResponse>, StatusCode> {
+    let Some(height) = app.db.block_height(hash).unwrap() else {
+        return Err(StatusCode::NOT_FOUND);
+    };
+
+    let mut spends = IndexMap::new();
+
+    for coin_id in app.db.coins_by_height(height).unwrap() {
+        if spends.contains_key(&coin_id) {
+            continue;
+        }
+
+        let Some(coin) = app.db.coin(coin_id).unwrap() else {
+            continue;
+        };
+
+        if coin.spent_height != Some(height) {
+            continue;
+        }
+
+        let Some(spend) = app.db.coin_spend(coin_id).unwrap() else {
+            continue;
+        };
+
+        spends.insert(coin_id, spend);
+    }
+
+    Ok(Json(SpendsResponse {
+        spends: spends.into_values().collect_vec(),
+    }))
+}
+
 #[derive(Serialize)]
 pub struct SpendResponse {
     pub spend: CoinSpendRecord,
 }
 
-async fn spend_by_coin_id(
+async fn spend_by_id(
     State(app): State<App>,
     Path(coin_id): Path<Bytes32>,
 ) -> Result<Json<SpendResponse>, StatusCode> {

explorer/src/App.tsx

@@ -17,6 +17,7 @@ const router = createBrowserRouter(
     <>
       <Route path='/' element={<Home />} />
       <Route path='/tools' element={<Tools />} />
+      <Route path='/tools/:hash' element={<Tools />} />
       <Route path='/block/:hash' element={<Block />} />
       <Route path='/coin/:id' element={<Coin />} />
     </>,

explorer/src/lib/api.ts

@@ -107,6 +107,10 @@ export interface CoinSpendResponse {
   spend: CoinSpend | null;
 }
 
+export interface CoinSpendsResponse {
+  spends: CoinSpend[];
+}
+
 export async function getBlocks() {
   const response = await get<BlocksResponse>('/blocks?reverse=true&limit=50');
   return response.blocks;
@@ -133,6 +137,11 @@ export async function getCoin(id: string) {
 }
 
 export async function getCoinSpend(id: string) {
-  const response = await get<CoinSpendResponse>(`/spend/${id}`);
+  const response = await get<CoinSpendResponse>(`/spends/id/${id}`);
   return response.spend;
 }
+
+export async function getCoinSpends(hash: string) {
+  const response = await get<CoinSpendsResponse>(`/spends/block/${hash}`);
+  return response.spends;
+}

explorer/src/pages/Block.tsx

@@ -2,19 +2,28 @@ import { External } from '@/components/External';
 import { Layout } from '@/components/Layout';
 import { Truncated } from '@/components/Truncated';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
 import { Nft } from '@/contexts/MintGardenContext';
 import { useDexie } from '@/hooks/useDexie';
 import { useMintGarden } from '@/hooks/useMintGarden';
 import { BlockRecord, CoinRecord, getBlock, getCoins } from '@/lib/api';
 import { Precision, toAddress, toDecimal } from '@/lib/conversions';
 import { intlFormat } from 'date-fns';
-import { CoinsIcon, DatabaseIcon, HashIcon, LayersIcon } from 'lucide-react';
+import {
+  CoinsIcon,
+  DatabaseIcon,
+  EyeIcon,
+  HashIcon,
+  LayersIcon,
+} from 'lucide-react';
 import { PropsWithChildren, useEffect, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 
 export function Block() {
   const { hash } = useParams();
 
+  const navigate = useNavigate();
+
   const [block, setBlock] = useState<BlockRecord | null>(null);
   const [coins, setCoins] = useState<CoinRecord[]>([]);
 
@@ -119,6 +128,14 @@ export function Block() {
                     <div className='text-lg text-red-600'>
                       -{block.transaction_info.removals}
                     </div>
+                    <Button
+                      variant='outline'
+                      size='sm'
+                      onClick={() => navigate(`/tools/${block.header_hash}`)}
+                    >
+                      <EyeIcon className='w-4 h-4' />
+                      View
+                    </Button>
                   </div>
                   <div className='space-y-2'>
                     {coins

explorer/src/pages/Tools.tsx

@@ -5,6 +5,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Nft } from '@/contexts/MintGardenContext';
 import { useDexie } from '@/hooks/useDexie';
 import { useMintGarden } from '@/hooks/useMintGarden';
+import { getCoinSpends } from '@/lib/api';
 import { Precision, toDecimal } from '@/lib/conversions';
 import { parseJson } from '@/lib/json';
 import {
@@ -26,11 +27,22 @@ import {
 } from 'chia-wallet-sdk-wasm';
 import { CoinsIcon, TriangleAlertIcon } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import { useLocalStorage } from 'usehooks-ts';
 
 export function Tools() {
+  const { hash } = useParams();
+
   const [value, setValue] = useLocalStorage('tools-bundle', '');
 
+  useEffect(() => {
+    if (!hash) return;
+
+    getCoinSpends(hash).then((coinSpends) => {
+      setValue(JSON.stringify(coinSpends));
+    });
+  }, [hash, setValue]);
+
   const parsedSpendBundle = useMemo(() => {
     if (!value) return null;