feat: resolve token batch inner instructions in inspector

Author: askov

app/components/inspector/InspectorPage.tsx

@@ -9,7 +9,14 @@ import { useFetchAccountInfo } from '@providers/accounts';
 import { FetchStatus } from '@providers/cache';
 import { useFetchRawTransaction, useRawTransactionDetails } from '@providers/transactions/raw';
 import usePrevious from '@react-hook/previous';
-import { Connection, MessageV0, PACKET_DATA_SIZE, PublicKey, VersionedMessage } from '@solana/web3.js';
+import {
+    type CompiledInnerInstruction,
+    Connection,
+    MessageV0,
+    PACKET_DATA_SIZE,
+    PublicKey,
+    VersionedMessage,
+} from '@solana/web3.js';
 import { generated, PROGRAM_ADDRESS as SQUADS_V4_PROGRAM_ADDRESS } from '@sqds/multisig';
 import { useClusterPath } from '@utils/url';
 import bs58 from 'bs58';
@@ -37,6 +44,7 @@ export type TransactionData = {
         preBalances: number[];
         postBalances: number[];
     };
+    compiledInnerInstructions?: CompiledInnerInstruction[];
 };
 
 export type SquadsProposalAccountData = {
@@ -396,6 +404,7 @@ function PermalinkView({
     const { message, signatures, meta } = transaction;
     const tx = {
         accountBalances: meta,
+        compiledInnerInstructions: meta?.innerInstructions,
         message,
         rawMessage: message.serialize(),
         signatures,
@@ -412,7 +421,7 @@ function LoadedView({
     onClear: () => void;
     showTokenBalanceChanges: boolean;
 }) {
-    const { message, rawMessage, signatures, accountBalances } = transaction;
+    const { message, rawMessage, signatures, accountBalances, compiledInnerInstructions } = transaction;
 
     const fetchAccountInfo = useFetchAccountInfo();
     React.useEffect(() => {
@@ -432,7 +441,7 @@ function LoadedView({
             {signatures && <TransactionSignatures message={message} signatures={signatures} rawMessage={rawMessage} />}
             <AccountsCard message={message} />
             <AddressTableLookupsCard message={message} />
-            <InstructionsSection message={message} />
+            <InstructionsSection message={message} compiledInnerInstructions={compiledInnerInstructions} />
         </>
     );
 }

app/components/inspector/InstructionsSection.tsx

@@ -4,6 +4,7 @@ import { useCluster } from '@providers/cluster';
 import { ASSOCIATED_TOKEN_PROGRAM_ID, TOKEN_PROGRAM_ID } from '@solana/spl-token';
 import {
     AddressLookupTableAccount,
+    type CompiledInnerInstruction,
     ComputeBudgetProgram,
     SystemProgram,
     TransactionInstruction,
@@ -15,6 +16,7 @@ import { getProgramName } from '@utils/tx';
 import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
+import { isTokenBatchInstruction, resolveInnerBatchInstructions, TokenBatchCard } from '@/app/features/token-batch';
 import { useAddressLookupTables } from '@/app/providers/accounts';
 import { FetchStatus } from '@/app/providers/cache';
 
@@ -29,7 +31,15 @@ import { AssociatedTokenDetailsCard } from './associated-token/AssociatedTokenDe
 import { intoParsedInstruction, intoParsedTransaction } from './into-parsed-data';
 import { UnknownDetailsCard } from './UnknownDetailsCard';
 
-export function InstructionsSection({ message }: { message: VersionedMessage }) {
+const INSPECTOR_RESULT = { err: null };
+
+export function InstructionsSection({
+    message,
+    compiledInnerInstructions,
+}: {
+    message: VersionedMessage;
+    compiledInnerInstructions?: CompiledInnerInstruction[];
+}) {
     // Fetch all address lookup tables
     const hydratedTables = useAddressLookupTables(
         message.addressTableLookups.map(lookup => lookup.accountKey.toString()),
@@ -59,10 +69,32 @@ export function InstructionsSection({ message }: { message: VersionedMessage })
     );
     const transactionMessage = TransactionMessage.decompile(message, { addressLookupTableAccounts });
 
+    const batchByIndex = compiledInnerInstructions
+        ? resolveInnerBatchInstructions(
+              compiledInnerInstructions,
+              message.getAccountKeys({ addressLookupTableAccounts }),
+              message,
+          )
+        : {};
+
     return (
         <>
             {transactionMessage.instructions.map((ix, index) => {
-                return <InspectorInstructionCard key={index} {...{ index, ix, message }} />;
+                const batchInnerCards = batchByIndex[index]?.map((innerIx, childIndex) => (
+                    <ErrorBoundary key={childIndex} fallback={null}>
+                        <TokenBatchCard index={index} childIndex={childIndex} ix={innerIx} result={INSPECTOR_RESULT} />
+                    </ErrorBoundary>
+                ));
+
+                return (
+                    <InspectorInstructionCard
+                        key={index}
+                        index={index}
+                        ix={ix}
+                        message={message}
+                        innerCards={batchInnerCards}
+                    />
+                );
             })}
         </>
     );
@@ -72,10 +104,12 @@ function InspectorInstructionCard({
     message,
     ix,
     index,
+    innerCards,
 }: {
     message: VersionedMessage;
     ix: TransactionInstruction;
     index: number;
+    innerCards?: React.ReactNode[];
 }) {
     const { cluster, url } = useCluster();
 
@@ -91,23 +125,25 @@ function InspectorInstructionCard({
                 <AnchorDetailsCard
                     anchorProgram={anchorProgram.program}
                     index={index}
-                    // Inner cards and child are not used since we do not know what CPIs
-                    // will be called until simulation happens, and even then, all we
-                    // get is logs, not the TransactionInstructions
                     innerCards={undefined}
                     ix={ix}
-                    // Always display success since it is too complicated to determine
-                    // based on the simulation and pass that result here. Could be added
-                    // later if desired, possibly similar to innerCards from parsing tx
-                    // sim logs.
                     result={{ err: null }}
-                    // Signature is not needed.
                     signature=""
                 />
             </ErrorBoundary>
         );
     }
 
+    if (isTokenBatchInstruction(ix)) {
+        return (
+            <ErrorBoundary
+                fallback={<UnknownDetailsCard key={index} index={index} ix={ix} programName={programName} />}
+            >
+                <TokenBatchCard index={index} ix={ix} result={INSPECTOR_RESULT} />
+            </ErrorBoundary>
+        );
+    }
+
     /// Handle program-specific cards here
     //  - keep signature (empty string as we do not submit anything) for backward compatibility with the data from Transaction
     //  - result is `err: null` as at this point there should not be errors
@@ -116,8 +152,6 @@ function InspectorInstructionCard({
 
     switch (ix.programId.toString()) {
         case ASSOCIATED_TOKEN_PROGRAM_ID.toString(): {
-            // NOTE: current limitation is that innerInstructions won't be present at the AssociatedTokenDetailsCard. For that purpose we might need to simulateTransactions to get them.
-
             const asParsedInstruction = intoParsedInstruction(ix);
             return (
                 <AssociatedTokenDetailsCard
@@ -208,5 +242,5 @@ function InspectorInstructionCard({
         }
     }
 
-    return <UnknownDetailsCard key={index} index={index} ix={ix} programName={programName} />;
+    return <UnknownDetailsCard key={index} index={index} ix={ix} programName={programName} innerCards={innerCards} />;
 }

app/components/inspector/UnknownDetailsCard.tsx

@@ -13,12 +13,15 @@ export function UnknownDetailsCard({
     index,
     ix,
     programName,
+    innerCards,
 }: {
     index: number;
     ix: TransactionInstruction;
     programName: string;
+    innerCards?: React.ReactNode[];
 }) {
-    const [expanded, setExpanded] = React.useState(false);
+    const hasInnerCards = innerCards && innerCards.length > 0;
+    const [expanded, setExpanded] = React.useState(hasInnerCards ?? false);
 
     const scrollAnchorRef = useScrollAnchor(getInstructionCardScrollAnchorId([index + 1]));
 
@@ -41,6 +44,18 @@ export function UnknownDetailsCard({
                 <TableCardBody>
                     <ProgramField programId={ix.programId} showExtendedInfo />
                     <BaseRawDetails ix={ix} />
+                    {hasInnerCards && (
+                        <>
+                            <tr className="table-sep">
+                                <td colSpan={3}>Inner Instructions</td>
+                            </tr>
+                            <tr>
+                                <td colSpan={3}>
+                                    <div className="inner-cards !e-m-0">{innerCards}</div>
+                                </td>
+                            </tr>
+                        </>
+                    )}
                 </TableCardBody>
             )}
         </div>

app/components/shared/Skeletons.tsx

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+
 import { Skeleton } from './ui/skeleton';
 
 type ColDef = {

app/features/token-batch/index.ts

@@ -1,2 +1,3 @@
 export { isTokenBatchInstruction } from './lib/batch-parser';
+export { resolveInnerBatchInstructions } from './lib/resolve-inner-batch-instructions';
 export { TokenBatchCard } from './ui/TokenBatchCard';