explorer: OpenBook ix details using Serum code (#28867)

* feat: OpenBook ixs details using Serum code

* Reduce repetition in the OpenBook address

Co-authored-by: steveluscher <me+github@steveluscher.com>

explorer/src/components/instruction/SerumDetailsCard.tsx

@@ -20,6 +20,7 @@ import {
   decodePrune,
   decodeSettleFunds,
   decodeSweepFees,
+  OPEN_BOOK_PROGRAM_ID,
   parseSerumInstructionKey,
   parseSerumInstructionTitle,
 } from "./serum/types";
@@ -40,7 +41,7 @@ import { InitOpenOrdersDetailsCard } from "./serum/InitOpenOrdersDetails";
 import { PruneDetailsCard } from "./serum/PruneDetails";
 import { ConsumeEventsPermissionedDetailsCard } from "./serum/ConsumeEventsPermissionedDetails";
 
-export function SerumDetailsCard(props: {
+export function SerumDetailsCard(initialProps: {
   ix: TransactionInstruction;
   index: number;
   result: SignatureResult;
@@ -48,7 +49,15 @@ export function SerumDetailsCard(props: {
   innerCards?: JSX.Element[];
   childIndex?: number;
 }) {
-  const { ix, index, result, signature, innerCards, childIndex } = props;
+  const { ix, index, result, signature, innerCards, childIndex } = initialProps;
+
+  const props = React.useMemo(() => {
+    const programName =
+      initialProps.ix.programId.toBase58() === OPEN_BOOK_PROGRAM_ID
+        ? "OpenBook"
+        : "Serum";
+    return { ...initialProps, programName };
+  }, [initialProps]);
 
   const { url } = useCluster();
 
@@ -143,7 +152,7 @@ export function SerumDetailsCard(props: {
       ix={ix}
       index={index}
       result={result}
-      title={`Serum Program: ${title || "Unknown"}`}
+      title={`${props.programName} Program: ${title || "Unknown"}`}
       innerCards={innerCards}
       childIndex={childIndex}
       defaultRaw

explorer/src/components/instruction/serum/CancelOrderByClientIdDetails.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { CancelOrderByClientId } from "./types";
+import { CancelOrderByClientId, SerumIxDetailsProps } from "./types";
 
-export function CancelOrderByClientIdDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: CancelOrderByClientId;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function CancelOrderByClientIdDetailsCard(
+  props: SerumIxDetailsProps<CancelOrderByClientId>
+) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Cancel Order By Client Id"
+      title={`${programName} Program: Cancel Order By Client Id`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/CancelOrderByClientIdV2Details.tsx

@@ -1,17 +1,11 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { CancelOrderByClientIdV2 } from "./types";
+import { CancelOrderByClientIdV2, SerumIxDetailsProps } from "./types";
 
-export function CancelOrderByClientIdV2DetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: CancelOrderByClientIdV2;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
+export function CancelOrderByClientIdV2DetailsCard(
+  props: SerumIxDetailsProps<CancelOrderByClientIdV2>
+) {
   const { ix, index, result, info, innerCards, childIndex } = props;
 
   return (

explorer/src/components/instruction/serum/CancelOrderDetails.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { CancelOrder } from "./types";
+import { CancelOrder, SerumIxDetailsProps } from "./types";
 
-export function CancelOrderDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: CancelOrder;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function CancelOrderDetailsCard(
+  props: SerumIxDetailsProps<CancelOrder>
+) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Cancel Order"
+      title={`${programName} Program: Cancel Order`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/CancelOrderV2Details.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { CancelOrderV2 } from "./types";
+import { CancelOrderV2, SerumIxDetailsProps } from "./types";
 
-export function CancelOrderV2DetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: CancelOrderV2;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function CancelOrderV2DetailsCard(
+  props: SerumIxDetailsProps<CancelOrderV2>
+) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Cancel Order v2"
+      title={`${programName} Program: Cancel Order v2`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/CloseOpenOrdersDetails.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { CloseOpenOrders } from "./types";
+import { CloseOpenOrders, SerumIxDetailsProps } from "./types";
 
-export function CloseOpenOrdersDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: CloseOpenOrders;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function CloseOpenOrdersDetailsCard(
+  props: SerumIxDetailsProps<CloseOpenOrders>
+) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Close Open Orders"
+      title={`${programName} Program: Close Open Orders`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/ConsumeEventsDetails.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { ConsumeEvents } from "./types";
+import { ConsumeEvents, SerumIxDetailsProps } from "./types";
 
-export function ConsumeEventsDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: ConsumeEvents;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function ConsumeEventsDetailsCard(
+  props: SerumIxDetailsProps<ConsumeEvents>
+) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Consume Events"
+      title={`${programName} Program: Consume Events`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/ConsumeEventsPermissionedDetails.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { ConsumeEventsPermissioned } from "./types";
+import { ConsumeEventsPermissioned, SerumIxDetailsProps } from "./types";
 
-export function ConsumeEventsPermissionedDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: ConsumeEventsPermissioned;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function ConsumeEventsPermissionedDetailsCard(
+  props: SerumIxDetailsProps<ConsumeEventsPermissioned>
+) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Consume Events Permissioned"
+      title={`${programName} Program: Consume Events Permissioned`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/DisableMarketDetails.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { DisableMarket } from "./types";
+import { DisableMarket, SerumIxDetailsProps } from "./types";
 
-export function DisableMarketDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: DisableMarket;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function DisableMarketDetailsCard(
+  props: SerumIxDetailsProps<DisableMarket>
+) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Disable Market"
+      title={`${programName} Program: Disable Market`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/InitOpenOrdersDetails.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { InitOpenOrders } from "./types";
+import { InitOpenOrders, SerumIxDetailsProps } from "./types";
 
-export function InitOpenOrdersDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: InitOpenOrders;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function InitOpenOrdersDetailsCard(
+  props: SerumIxDetailsProps<InitOpenOrders>
+) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Init Open Orders"
+      title={`${programName} Program: Init Open Orders`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/InitializeMarketDetailsCard.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { InitializeMarket } from "./types";
+import { InitializeMarket, SerumIxDetailsProps } from "./types";
 
-export function InitializeMarketDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: InitializeMarket;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function InitializeMarketDetailsCard(
+  props: SerumIxDetailsProps<InitializeMarket>
+) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Initialize Market"
+      title={`${programName} Program: Initialize Market`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/MatchOrdersDetailsCard.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { MatchOrders } from "./types";
+import { MatchOrders, SerumIxDetailsProps } from "./types";
 
-export function MatchOrdersDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: MatchOrders;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function MatchOrdersDetailsCard(
+  props: SerumIxDetailsProps<MatchOrders>
+) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Match Orders"
+      title={`${programName} Program: Match Orders`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/NewOrderDetailsCard.tsx

@@ -1,25 +1,18 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { NewOrder } from "./types";
+import { NewOrder, SerumIxDetailsProps } from "./types";
 
-export function NewOrderDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: NewOrder;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function NewOrderDetailsCard(props: SerumIxDetailsProps<NewOrder>) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: New Order"
+      title={`${programName} Program: New Order`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/NewOrderV3DetailsCard.tsx

@@ -1,25 +1,18 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { NewOrderV3 } from "./types";
+import { NewOrderV3, SerumIxDetailsProps } from "./types";
 
-export function NewOrderV3DetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: NewOrderV3;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function NewOrderV3DetailsCard(props: SerumIxDetailsProps<NewOrderV3>) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: New Order v3"
+      title={`${programName} Program: New Order v3`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/PruneDetails.tsx

@@ -1,25 +1,18 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { Prune } from "./types";
+import { Prune, SerumIxDetailsProps } from "./types";
 
-export function PruneDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: Prune;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function PruneDetailsCard(props: SerumIxDetailsProps<Prune>) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Prune"
+      title={`${programName} Program: Prune`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/SettleFundsDetailsCard.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { SettleFunds } from "./types";
+import { SettleFunds, SerumIxDetailsProps } from "./types";
 
-export function SettleFundsDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: SettleFunds;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function SettleFundsDetailsCard(
+  props: SerumIxDetailsProps<SettleFunds>
+) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Settle Funds"
+      title={`${programName} Program: Settle Funds`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/SweepFeesDetails.tsx

@@ -1,25 +1,18 @@
 import React from "react";
-import { SignatureResult, TransactionInstruction } from "@solana/web3.js";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { SweepFees } from "./types";
+import { SweepFees, SerumIxDetailsProps } from "./types";
 
-export function SweepFeesDetailsCard(props: {
-  ix: TransactionInstruction;
-  index: number;
-  result: SignatureResult;
-  info: SweepFees;
-  innerCards?: JSX.Element[];
-  childIndex?: number;
-}) {
-  const { ix, index, result, info, innerCards, childIndex } = props;
+export function SweepFeesDetailsCard(props: SerumIxDetailsProps<SweepFees>) {
+  const { ix, index, result, programName, info, innerCards, childIndex } =
+    props;
 
   return (
     <InstructionCard
       ix={ix}
       index={index}
       result={result}
-      title="Serum Program: Sweep Fees"
+      title={`${programName} Program: Sweep Fees`}
       innerCards={innerCards}
       childIndex={childIndex}
     >

explorer/src/components/instruction/serum/types.ts

@@ -4,14 +4,19 @@ import { decodeInstruction, MARKETS } from "@project-serum/serum";
 import {
   AccountMeta,
   PublicKey,
+  SignatureResult,
   TransactionInstruction,
 } from "@solana/web3.js";
 import { enums, number, type, Infer, create } from "superstruct";
 import { BigIntFromString } from "validators/number";
 
+export const OPEN_BOOK_PROGRAM_ID =
+  "srmqPvymJeFKQ4zGQed1GFppgkRHL9kaELCbyksJtPX";
+
 const SERUM_PROGRAM_IDS = [
   "4ckmDgGdxQoPDLUkDT3vHgSAkzA3QRdNq5ywwY4sUSJn",
   "9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin",
+  OPEN_BOOK_PROGRAM_ID,
 ];
 
 export const SERUM_DECODED_MAX = 6;
@@ -631,3 +636,13 @@ export function parseSerumInstructionTitle(
 
   return SERUM_CODE_LOOKUP[code];
 }
+
+export type SerumIxDetailsProps<T> = {
+  ix: TransactionInstruction;
+  index: number;
+  result: SignatureResult;
+  info: T;
+  programName: string;
+  innerCards?: JSX.Element[];
+  childIndex?: number;
+};

explorer/src/utils/tx.ts

@@ -20,6 +20,7 @@ import {
 import { Cluster } from "providers/cluster";
 import { SerumMarketRegistry } from "serumMarketRegistry";
 import { TokenInfoMap } from "@solana/spl-token-registry";
+import { OPEN_BOOK_PROGRAM_ID } from "components/instruction/serum/types";
 
 export enum PROGRAM_NAMES {
   // native built-ins
@@ -99,6 +100,7 @@ export enum PROGRAM_NAMES {
   SOLANART = "Solanart",
   SOLANART_GO = "Solanart - Global offers",
   STEPN_DEX = "STEPN Dex",
+  OPENBOOK_DEX = "OpenBook Dex",
 }
 
 const ALL_CLUSTERS = [
@@ -415,6 +417,10 @@ export const PROGRAM_INFO_BY_ID: { [address: string]: ProgramInfo } = {
     name: PROGRAM_NAMES.STEPN_DEX,
     deployments: [Cluster.MainnetBeta],
   },
+  [OPEN_BOOK_PROGRAM_ID]: {
+    name: PROGRAM_NAMES.OPENBOOK_DEX,
+    deployments: [Cluster.MainnetBeta],
+  },
 };
 
 export type LoaderName = typeof LOADER_IDS[keyof typeof LOADER_IDS];