explorer: Show address for unknown programs in logs (#24770)

explorer/src/components/ProgramLogsCardBody.tsx

@@ -66,12 +66,12 @@ export function ProgramLogsCardBody({
                 <span className={`badge bg-${badgeColor}-soft me-2`}>
                   #{index + 1}
                 </span>
+                Invoking{" "}
                 <ProgramName
                   programId={programId}
                   cluster={cluster}
                   url={url}
-                />{" "}
-                Instruction
+                />
               </div>
               {programLogs && (
                 <div className="d-flex align-items-start flex-column font-monospace p-2 font-size-sm">

explorer/src/components/account/AnchorAccountCard.tsx

@@ -3,7 +3,7 @@ import { Account } from "providers/accounts";
 import { useCluster } from "providers/cluster";
 import { BorshAccountsCoder } from "@project-serum/anchor";
 import { IdlTypeDef } from "@project-serum/anchor/dist/cjs/idl";
-import { getProgramName, mapAccountToRows } from "utils/anchor";
+import { getAnchorProgramName, mapAccountToRows } from "utils/anchor";
 import { ErrorCard } from "components/common/ErrorCard";
 import { useAnchorProgram } from "providers/anchor";
 
@@ -15,7 +15,7 @@ export function AnchorAccountCard({ account }: { account: Account }) {
     url
   );
   const rawData = account?.details?.rawData;
-  const programName = getProgramName(anchorProgram) || "Unknown Program";
+  const programName = getAnchorProgramName(anchorProgram) || "Unknown Program";
 
   const { decodedAccountData, accountDef } = useMemo(() => {
     let decodedAccountData: any | null = null;

explorer/src/components/instruction/AnchorDetailsCard.tsx

@@ -8,7 +8,7 @@ import {
 } from "@project-serum/anchor";
 import {
   getAnchorNameForInstruction,
-  getProgramName,
+  getAnchorProgramName,
   getAnchorAccountsFromInstruction,
   mapIxArgsToRows,
 } from "utils/anchor";
@@ -28,7 +28,7 @@ export default function AnchorDetailsCard(props: {
   anchorProgram: Program<Idl>;
 }) {
   const { ix, anchorProgram } = props;
-  const programName = getProgramName(anchorProgram) ?? "Unknown Program";
+  const programName = getAnchorProgramName(anchorProgram) ?? "Unknown Program";
 
   const ixName =
     getAnchorNameForInstruction(ix, anchorProgram) ?? "Unknown Instruction";
@@ -94,7 +94,7 @@ function AnchorDetails({
     );
   }
 
-  const programName = getProgramName(anchorProgram) ?? "Unknown Program";
+  const programName = getAnchorProgramName(anchorProgram) ?? "Unknown Program";
 
   return (
     <>

explorer/src/components/instruction/UnknownDetailsCard.tsx

@@ -5,7 +5,7 @@ import {
   ParsedInstruction,
 } from "@solana/web3.js";
 import { InstructionCard } from "./InstructionCard";
-import { programLabel } from "utils/tx";
+import { getProgramName } from "utils/tx";
 import { useCluster } from "providers/cluster";
 
 export function UnknownDetailsCard({
@@ -22,8 +22,7 @@ export function UnknownDetailsCard({
   childIndex?: number;
 }) {
   const { cluster } = useCluster();
-  const programName =
-    programLabel(ix.programId.toBase58(), cluster) || "Unknown Program";
+  const programName = getProgramName(ix.programId.toBase58(), cluster);
   return (
     <InstructionCard
       ix={ix}

explorer/src/pages/inspector/InstructionsSection.tsx

@@ -4,7 +4,7 @@ import { CompiledInstruction, Message } from "@solana/web3.js";
 import { TableCardBody } from "components/common/TableCardBody";
 import { AddressWithContext, programValidator } from "./AddressWithContext";
 import { useCluster } from "providers/cluster";
-import { programLabel } from "utils/tx";
+import { getProgramName } from "utils/tx";
 import { HexData } from "components/common/HexData";
 
 export function InstructionsSection({ message }: { message: Message }) {
@@ -29,7 +29,7 @@ function InstructionCard({
   const [expanded, setExpanded] = React.useState(false);
   const { cluster } = useCluster();
   const programId = message.accountKeys[ix.programIdIndex];
-  const programName = programLabel(programId.toBase58(), cluster) || "Unknown";
+  const programName = getProgramName(programId.toBase58(), cluster);
 
   return (
     <div className="card" id={`instruction-index-${index + 1}`} key={index}>

explorer/src/utils/anchor.tsx

@@ -3,7 +3,7 @@ import { Cluster } from "providers/cluster";
 import { PublicKey, TransactionInstruction } from "@solana/web3.js";
 import { BorshInstructionCoder, Program, Idl } from "@project-serum/anchor";
 import { useAnchorProgram } from "providers/anchor";
-import { programLabel } from "utils/tx";
+import { getProgramName } from "utils/tx";
 import { snakeToTitleCase, camelToTitleCase, numberWithSeparator } from "utils";
 import {
   IdlInstruction,
@@ -13,7 +13,9 @@ import {
 import { Address } from "components/common/Address";
 import ReactJson from "react-json-view";
 
-export function getProgramName(program: Program | null): string | undefined {
+export function getAnchorProgramName(
+  program: Program | null
+): string | undefined {
   return program ? snakeToTitleCase(program.idl.name) : undefined;
 }
 
@@ -27,7 +29,7 @@ export function AnchorProgramName({
   defaultName?: string;
 }) {
   const program = useAnchorProgram(programId.toString(), url);
-  const programName = getProgramName(program) || defaultName;
+  const programName = getAnchorProgramName(program) || defaultName;
   return <>{programName}</>;
 }
 
@@ -40,8 +42,7 @@ export function ProgramName({
   cluster: Cluster;
   url: string;
 }) {
-  const defaultProgramName =
-    programLabel(programId.toBase58(), cluster) || "Unknown Program";
+  const defaultProgramName = getProgramName(programId.toBase58(), cluster);
   return (
     <React.Suspense fallback={<>{defaultProgramName}</>}>
       <AnchorProgramName

explorer/src/utils/program-logs.ts

@@ -1,6 +1,6 @@
 import { TransactionError } from "@solana/web3.js";
 import { Cluster } from "providers/cluster";
-import { programLabel } from "utils/tx";
+import { getProgramName } from "utils/tx";
 import { getTransactionInstructionError } from "utils/program-err";
 
 export type LogMessage = {
@@ -45,9 +45,7 @@ export function prettyProgramLogs(
 
       if (matches.length > 0) {
         const programAddress = matches[0][1];
-        const programName =
-          programLabel(programAddress, cluster) ||
-          `Unknown (${programAddress}) Program`;
+        const programName = getProgramName(programAddress, cluster);
 
         if (depth === 0) {
           prettyLogs.push({

explorer/src/utils/tx.ts

@@ -412,6 +412,12 @@ export const SYSVAR_IDS = {
   Sysvar1nstructions1111111111111111111111111: "Sysvar: Instructions",
 };
 
+export function getProgramName(address: string, cluster: Cluster): string {
+  const label = programLabel(address, cluster);
+  if (label) return label;
+  return `Unknown Program (${address})`;
+}
+
 export function programLabel(
   address: string,
   cluster: Cluster