Asset info

Rigidity · Rigidity · commit 1264028d122f · 2025-07-29T19:55:50.000-04:00
diff --git a/explorer/src/contexts/DexieContext.tsx b/explorer/src/contexts/DexieContext.tsx
@@ -9,7 +9,7 @@ export interface Token {
 }
 
 export interface DexieContextType {
-  tokens: Record<string, Token>;
+  getToken: (id: string) => Token | null;
 }
 
 // eslint-disable-next-line react-refresh/only-export-components
@@ -42,7 +42,11 @@ export function DexieProvider({ children }: { children: ReactNode }) {
       });
   }, []);
 
+  const getToken = (id: string) => tokens[id.replace('0x', '')] ?? null;
+
   return (
-    <DexieContext.Provider value={{ tokens }}>{children}</DexieContext.Provider>
+    <DexieContext.Provider value={{ getToken }}>
+      {children}
+    </DexieContext.Provider>
   );
 }
diff --git a/explorer/src/contexts/MintGardenContext.tsx b/explorer/src/contexts/MintGardenContext.tsx
@@ -14,7 +14,7 @@ export interface Nft {
 }
 
 export interface MintGardenContextType {
-  fetchNft: (launcherId: string) => Promise<Nft>;
+  fetchNft: (launcherId: string) => Promise<Nft | null>;
 }
 
 // eslint-disable-next-line react-refresh/only-export-components
@@ -31,13 +31,23 @@ export function MintGardenProvider({ children }: { children: ReactNode }) {
         return nfts[launcherId];
       }
 
-      const bech32 = toAddress(launcherId, 'nft');
-      const response = await fetch(`https://api.mintgarden.io/nfts/${bech32}`);
-      const nft: Nft = await response.json();
+      try {
+        const bech32 = launcherId.startsWith('nft')
+          ? launcherId
+          : toAddress(launcherId, 'nft');
+        const response = await fetch(
+          `https://api.mintgarden.io/nfts/${bech32}`,
+        );
+        const nft: Nft = await response.json();
 
-      setNfts((prev) => ({ ...prev, [launcherId]: nft }));
+        setNfts((prev) => ({ ...prev, [launcherId]: nft }));
 
-      return nft;
+        return nft;
+      } catch (error) {
+        console.error(error);
+
+        return null;
+      }
     },
     [nfts, setNfts],
   );
diff --git a/explorer/src/lib/parser/coinSpend.ts b/explorer/src/lib/parser/coinSpend.ts
@@ -1,4 +1,5 @@
-import { bytesEqual, Constants, toHex } from 'chia-wallet-sdk-wasm';
+import { bytesEqual, Constants, Puzzle, toHex } from 'chia-wallet-sdk-wasm';
+import { toAddress } from '../conversions';
 import { parseCoin, ParsedCoin } from './coin';
 import { parseCondition, ParsedCondition } from './conditions';
 import { ParserContext } from './context';
@@ -13,6 +14,15 @@ export interface ParsedCoinSpend {
   cost: string;
   conditions: ParsedCondition[];
   layer: ParsedLayer;
+  assetType: AssetType;
+  assetId: string;
+}
+
+export enum AssetType {
+  Token,
+  Nft,
+  Did,
+  Singleton,
 }
 
 export function parseCoinSpend(
@@ -88,6 +98,11 @@ export function parseCoinSpend(
     }
   }
 
+  const cat = puzzle.parseCat();
+  const nft = puzzle.parseNft();
+  const did = puzzle.parseDid();
+  const singleton = parseSingleton(puzzle);
+
   return {
     coin: parseCoin(coinSpend.coin),
     puzzleReveal: toHex(coinSpend.puzzleReveal),
@@ -97,5 +112,33 @@ export function parseCoinSpend(
       parseCondition(coinSpend.coin, condition, ctx, isFastForwardable),
     ),
     layer: parseLayer(puzzle),
+    assetId: cat
+      ? `0x${toHex(cat.info.assetId)}`
+      : nft
+        ? toAddress(toHex(nft.info.launcherId), 'nft')
+        : did
+          ? toAddress(toHex(did.info.launcherId), 'did:chia:')
+          : singleton
+            ? toAddress(toHex(singleton), 'vault')
+            : 'xch',
+    assetType: nft
+      ? AssetType.Nft
+      : did
+        ? AssetType.Did
+        : singleton
+          ? AssetType.Singleton
+          : AssetType.Token,
   };
 }
+
+function parseSingleton(puzzle: Puzzle) {
+  if (!bytesEqual(puzzle.modHash, Constants.singletonTopLayerV11Hash())) {
+    return undefined;
+  }
+
+  const singletonStruct = puzzle.program.uncurry()?.args[0];
+  const pair = singletonStruct?.toPair()?.rest.toPair();
+  const launcherId = pair?.first.toAtom();
+
+  return launcherId;
+}
diff --git a/explorer/src/lib/parser/layers.ts b/explorer/src/lib/parser/layers.ts
@@ -48,6 +48,18 @@ export function parseLayer(puzzle: Puzzle): ParsedLayer {
       value: publicKey && `0x${toHex(publicKey)}`,
       type: ArgType.Copiable,
     };
+  } else if (bytesEqual(puzzle.modHash, Constants.catPuzzleHash())) {
+    name = 'CAT_V2';
+
+    const assetId = arg(1)?.toAtom();
+    const innerPuzzle = arg(2);
+
+    args.asset_id = {
+      value: assetId && `0x${toHex(assetId)}`,
+      type: ArgType.Copiable,
+    };
+
+    if (innerPuzzle) children.inner_puzzle = parseLayer(innerPuzzle.puzzle());
   } else if (bytesEqual(puzzle.puzzleHash, Constants.settlementPaymentHash())) {
     name = 'SETTLEMENT_PAYMENT';
   } else if (bytesEqual(puzzle.puzzleHash, Constants.singletonLauncherHash())) {
diff --git a/explorer/src/pages/Block.tsx b/explorer/src/pages/Block.tsx
@@ -196,7 +196,7 @@ interface CoinCardProps {
 }
 
 function CoinCard({ coinRecord, block }: CoinCardProps) {
-  const { tokens } = useDexie();
+  const { getToken } = useDexie();
   const { fetchNft } = useMintGarden();
   const [nft, setNft] = useState<Nft | null>(null);
   const isCreated = coinRecord.created_height === block?.height;
@@ -210,9 +210,9 @@ function CoinCard({ coinRecord, block }: CoinCardProps) {
 
   const token =
     coinRecord.type === 'cat' && 'asset_id' in coinRecord
-      ? tokens[coinRecord.asset_id.replace('0x', '')]
+      ? getToken(coinRecord.asset_id)
       : coinRecord.type === 'unknown' || coinRecord.type === 'reward'
-        ? tokens['xch']
+        ? getToken('xch')
         : null;
 
   return (
diff --git a/explorer/src/pages/Coin.tsx b/explorer/src/pages/Coin.tsx
@@ -20,7 +20,7 @@ import { useParams } from 'react-router-dom';
 
 export function Coin() {
   const { id } = useParams();
-  const { tokens } = useDexie();
+  const { getToken } = useDexie();
   const { fetchNft } = useMintGarden();
 
   const [coin, setCoin] = useState<CoinRecord | null>(null);
@@ -49,9 +49,9 @@ export function Coin() {
 
   const token = coin
     ? coin.type === 'cat'
-      ? tokens[coin.asset_id.replace('0x', '')]
+      ? getToken(coin.asset_id)
       : coin.type === 'reward'
-        ? tokens['xch']
+        ? getToken('xch')
         : null
     : null;
 
diff --git a/explorer/src/pages/Tools.tsx b/explorer/src/pages/Tools.tsx
@@ -2,10 +2,13 @@ import { DropdownSelector } from '@/components/DropdownSelector';
 import { Layout } from '@/components/Layout';
 import { Truncated } from '@/components/Truncated';
 import { Textarea } from '@/components/ui/textarea';
+import { Nft } from '@/contexts/MintGardenContext';
 import { useDexie } from '@/hooks/useDexie';
+import { useMintGarden } from '@/hooks/useMintGarden';
 import { Precision, toDecimal } from '@/lib/conversions';
 import { parseJson } from '@/lib/json';
 import {
+  AssetType,
   ConditionType,
   ParsedCoinSpend,
   ParsedCondition,
@@ -22,7 +25,7 @@ import {
   SpendBundle,
 } from 'chia-wallet-sdk-wasm';
 import { CoinsIcon, TriangleAlertIcon } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useLocalStorage } from 'usehooks-ts';
 
 export function Tools() {
@@ -79,7 +82,90 @@ function BundleViewer({ bundle }: BundleViewerProps) {
   const [selectedSpend, setSelectedSpend] = useState<ParsedCoinSpend | null>(
     bundle.coinSpends[0] ?? null,
   );
-  const { tokens } = useDexie();
+  const { getToken } = useDexie();
+  const { fetchNft } = useMintGarden();
+
+  const [nfts, setNfts] = useState<Record<string, Nft | null>>({});
+
+  useEffect(() => {
+    // Fetch NFT data for all NFT spends
+    bundle.coinSpends.forEach((spend) => {
+      if (spend.assetType === AssetType.Nft) {
+        const launcherId = spend.assetId;
+        if (!nfts[launcherId]) {
+          fetchNft(launcherId).then((nft) => {
+            setNfts((prev) => ({ ...prev, [launcherId]: nft }));
+          });
+        }
+      }
+    });
+  }, [bundle.coinSpends, fetchNft, nfts]);
+
+  const renderCoinInfo = (spend: ParsedCoinSpend) => {
+    const nft = spend.assetType === AssetType.Nft ? nfts[spend.assetId] : null;
+    const token =
+      spend.assetType === AssetType.Token ? getToken(spend.assetId) : null;
+
+    console.log(nft);
+
+    return (
+      <div className='flex items-center gap-2 w-full'>
+        {nft ? (
+          <img
+            src={nft.data?.thumbnail_uri}
+            alt={nft.data?.metadata_json?.name ?? 'Unnamed'}
+            className='w-6 h-6 rounded flex-shrink-0 object-cover'
+          />
+        ) : token?.icon ? (
+          <img
+            src={token.icon}
+            alt={token.name}
+            className='w-6 h-6 rounded-full flex-shrink-0'
+          />
+        ) : (
+          <div className='w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0'>
+            <CoinsIcon className='w-3.5 h-3.5 text-primary' />
+          </div>
+        )}
+        <div className='flex flex-col min-w-0'>
+          <div className='font-medium flex flex-wrap items-center gap-1.5'>
+            {nft ? (
+              <span className='break-all'>
+                {nft.data?.metadata_json?.name ?? 'Unnamed'}
+              </span>
+            ) : (
+              <>
+                <span className='break-all'>
+                  {toDecimal(
+                    spend.coin.amount,
+                    spend.assetType === AssetType.Token
+                      ? spend.assetId === 'xch'
+                        ? Precision.Xch
+                        : Precision.Cat
+                      : Precision.Singleton,
+                  )}
+                </span>
+                <span className='text-muted-foreground font-normal'>
+                  {spend.assetType === AssetType.Token
+                    ? token?.code || (spend.assetId === 'xch' ? 'XCH' : 'CAT')
+                    : spend.assetType === AssetType.Nft
+                      ? 'NFT'
+                      : spend.assetType === AssetType.Did
+                        ? 'DID'
+                        : spend.assetType === AssetType.Singleton
+                          ? 'VAULT'
+                          : ''}
+                </span>
+              </>
+            )}
+          </div>
+          <div className='font-mono text-xs text-muted-foreground truncate'>
+            <Truncated value={spend.coin.coinId} disableCopy />
+          </div>
+        </div>
+      </div>
+    );
+  };
 
   return (
     <div className='flex flex-col gap-4 mt-4'>
@@ -108,64 +194,12 @@ function BundleViewer({ bundle }: BundleViewerProps) {
           <DropdownSelector
             loadedItems={bundle.coinSpends}
             onSelect={setSelectedSpend}
-            renderItem={(spend) => (
-              <div className='flex items-center gap-2 w-full'>
-                {tokens?.xch?.icon ? (
-                  <img
-                    src={tokens.xch.icon}
-                    alt='XCH'
-                    className='w-6 h-6 rounded-full flex-shrink-0'
-                  />
-                ) : (
-                  <div className='w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0'>
-                    <CoinsIcon className='w-3.5 h-3.5 text-primary' />
-                  </div>
-                )}
-                <div className='flex flex-col min-w-0'>
-                  <div className='font-medium flex flex-wrap items-center gap-1.5'>
-                    <span className='break-all'>
-                      {toDecimal(spend.coin.amount, Precision.Xch)}
-                    </span>
-                    <span className='text-muted-foreground font-normal'>
-                      XCH
-                    </span>
-                  </div>
-                  <div className='font-mono text-xs text-muted-foreground truncate'>
-                    <Truncated value={spend.coin.coinId} disableCopy />
-                  </div>
-                </div>
-              </div>
-            )}
+            renderItem={(spend) => renderCoinInfo(spend)}
             width='w-[350px]'
             className='rounded-b-none'
           >
             {selectedSpend ? (
-              <div className='flex items-center gap-2 min-w-0'>
-                {tokens?.xch?.icon ? (
-                  <img
-                    src={tokens.xch.icon}
-                    alt='XCH'
-                    className='w-6 h-6 rounded-full flex-shrink-0'
-                  />
-                ) : (
-                  <div className='w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0'>
-                    <CoinsIcon className='w-3.5 h-3.5 text-primary' />
-                  </div>
-                )}
-                <div className='flex flex-col min-w-0'>
-                  <div className='font-medium flex flex-wrap items-center gap-1.5'>
-                    <span className='break-all'>
-                      {toDecimal(selectedSpend.coin.amount, Precision.Xch)}
-                    </span>
-                    <span className='text-muted-foreground font-normal'>
-                      XCH
-                    </span>
-                  </div>
-                  <div className='font-mono text-xs text-muted-foreground truncate'>
-                    <Truncated value={selectedSpend.coin.coinId} disableCopy />
-                  </div>
-                </div>
-              </div>
+              renderCoinInfo(selectedSpend)
             ) : (
               <div className='text-muted-foreground'>
                 Select a spend to view
@@ -226,6 +260,10 @@ function SpendViewer({ spend }: SpendViewerProps) {
             <div className='text-muted-foreground'>Cost</div>
             <div>{spend.cost}</div>
           </div>
+          <div className='flex flex-col'>
+            <div className='text-muted-foreground'>Asset ID</div>
+            <Truncated value={spend.assetId} />
+          </div>
         </div>
       </div>
 

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ export interface Token {`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`export interface DexieContextType {`
`12`		`- tokens: Record<string, Token>;`
	`12`	`+ getToken: (id: string) => Token \| null;`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`// eslint-disable-next-line react-refresh/only-export-components`
`@@ -42,7 +42,11 @@ export function DexieProvider({ children }: { children: ReactNode }) {`
`42`	`42`	`});`
`43`	`43`	`}, []);`
`44`	`44`
	`45`	`+ const getToken = (id: string) => tokens[id.replace('0x', '')] ?? null;`
	`46`	`+`
`45`	`47`	`return (`
`46`		`- <DexieContext.Provider value={{ tokens }}>{children}</DexieContext.Provider>`
	`48`	`+ <DexieContext.Provider value={{ getToken }}>`
	`49`	`+ {children}`
	`50`	`+ </DexieContext.Provider>`
`47`	`51`	`);`
`48`	`52`	`}`