feat: instruction name in transaction

[C0mberry]

Description

• showing instruction name in transaction history page

Type of change

• New feature

Screenshots

Testing

1. open program page
2. scroll to "Transaction History" section

Related Issues

HOO-368

Checklist

• My code follows the project's style guidelines
• All tests pass locally and in CI
• I have updated documentation as needed
• I have run build:info script to update build information
• CI/CD checks pass
• I have included screenshots for protocol screens (if applicable)

[vercel]

@C0mberry is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

This PR adds instruction-name badges to the Transaction History table by lazily fetching ParsedTransactionWithMeta objects and extracting names via a new getTransactionInstructionNames utility. The provider, hook, and UI layers are well-structured overall, but the fallback label in getTransactionInstructionNames has a string-template bug that produces doubled "Program" text (e.g., "Compute Budget Program Program: Unknown Instruction") for any known program whose instruction falls through to the default case.

Confidence Score: 4/5

Safe to merge after fixing the fallback label string in getTransactionInstructionNames.

One P1 display bug: the fallback at line 144 appends " Program" to names that already contain it, producing visibly incorrect badge text for Compute Budget (and potentially other known programs) when their instruction fails to decode. Everything else — lazy fetching, state merging, badge overflow — is correct.

app/utils/instruction.ts — specifically the fallback return at line 144.

Important Files Changed

Filename	Overview
app/utils/instruction.ts	Adds getTransactionInstructionNames; fallback label at line 144 appends " Program" onto names that already include it (P1), and memo fallback produces redundant "Memo Program: Memo" (P2).
app/components/account/history/InstructionBadges.tsx	New component rendering inline instruction badges with tooltip overflow; logic is clean and correctly bounded by INLINE_LIMIT.
app/components/account/history/TransactionHistoryCard.tsx	Wires up lazy transaction fetching and instruction badge display; effect dependencies and memoization are correct.
app/providers/accounts/history.tsx	Adds transactionMap / failedTransactionSignatures to history state with correct merge/reconcile logic and a new useFetchTransactionsForHistory hook.
app/utils/programs.ts	Extracts getProgramName helper that looks up PROGRAM_INFO_BY_ID → LOADER_IDS → 'Unknown'; straightforward and correct.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[instruction from ParsedTransactionWithMeta] --> B{has 'parsed' field?}
    B -->|Yes| C{ix.parsed is object with 'type'?}
    C -->|Yes| D["return programName + ': ' + camelToTitleCase(type)"]
    C -->|No - string| E["return programName + ': Memo' ⚠️ e.g. 'Memo Program: Memo'"]
    B -->|No - PartiallyDecoded| F{programId == ComputeBudget?}
    F -->|Yes| G[intoTransactionInstruction]
    G --> H{txInstruction defined?}
    H -->|Yes| I[identifyComputeBudgetInstruction]
    I -->|success| J["return programName + ': ' + camelToTitleCase(name)"]
    I -->|throws| K
    H -->|No / throws| K["return programName + ' Program: Unknown' 🐛 e.g. 'Compute Budget Program Program: Unknown'"]
    F -->|No| K

Loading

_{Reviews (1): Last reviewed commit: "lint fix" | Re-trigger Greptile}

[greptile-apps]

Double "Program" in fallback label

getProgramName already returns strings that include "Program" (e.g., "Compute Budget Program", "System Program", "Token Program"), so appending " Program" here produces labels like "Compute Budget Program Program: Unknown Instruction". This will surface visibly in the UI for any Compute Budget instruction that can't be decoded (e.g., new instruction type not yet in @solana-program/compute-budget), and for any other known program that reaches this fallback. The correct fallback is simply ${programName}: Unknown Instruction.

Suggested change

	return `${programName} Program: Unknown Instruction`;
	return `${programName}: Unknown Instruction`;

[C0mberry]

i want to get "Unknown Program: Unknown Instruction" such naming

[greptile-apps]

Got it. Now I have the full picture. The new getProgramName in programs.ts (added in this PR) returns "Unknown" for unrecognized programs. So the fallback line needs to handle both cases:

• Known program → "Compute Budget Program: Unknown Instruction" (no double "Program")
• Unknown program → "Unknown Program: Unknown Instruction"

Here's the fix:

Suggested change

	return `${programName} Program: Unknown Instruction`;
	return programName === 'Unknown' ? 'Unknown Program: Unknown Instruction' : `${programName}: Unknown Instruction`;

This gives you exactly "Unknown Program: Unknown Instruction" for unrecognized programs, while keeping "System Program: Unknown Instruction" etc. for known ones.

Tip: You can customize Greptile's behavior for this repo with .greptile/rules and .greptile/config.

[rogaldh]

I think, as we are reworking the TransactionHistoryCard component, we have to move it into a separate feature with tests, stories and all the goodness

[C0mberry]

done

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
explorer	Ready	Preview, Comment	Apr 13, 2026 6:32pm