feat: introduce three new Serum instructions and program ID, rename bpf-upgradeable-loader card (#15679)

explorer/src/components/instruction/bpf-upgradeable-loader/BpfUpgradeableLoaderDetailsCard.tsx

@@ -29,7 +29,7 @@ type DetailsProps = {
   childIndex?: number;
 };
 
-export function UpgradeableBpfLoaderDetailsCard(props: DetailsProps) {
+export function BpfUpgradeableLoaderDetailsCard(props: DetailsProps) {
   try {
     const parsed = coerce(props.ix.parsed, ParsedInfo);
     switch (parsed.type) {
@@ -98,7 +98,7 @@ function renderDetails<T>(
   return (
     <InstructionCard
       {...props}
-      title={`Upgradeable BPF Loader: ${camelToTitleCase(parsed.type)}`}
+      title={`BPF Upgradeable Loader: ${camelToTitleCase(parsed.type)}`}
     >
       <tr>
         <td>Program</td>

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

@@ -7,7 +7,10 @@ import { coerce, enums, number, optional, pick, StructType } from "superstruct";
 import { BigNumValue } from "validators/bignum";
 import { Pubkey } from "validators/pubkey";
 
-const SERUM_PROGRAM_ID = "4ckmDgGdxQoPDLUkDT3vHgSAkzA3QRdNq5ywwY4sUSJn";
+const SERUM_PROGRAM_IDS = [
+  "4ckmDgGdxQoPDLUkDT3vHgSAkzA3QRdNq5ywwY4sUSJn",
+  "9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin",
+];
 
 export const SERUM_DECODED_MAX = 6;
 
@@ -295,7 +298,7 @@ export function decodeSettleFunds(ix: TransactionInstruction): SettleFunds {
 
 export function isSerumInstruction(instruction: TransactionInstruction) {
   return (
-    instruction.programId.toBase58() === SERUM_PROGRAM_ID ||
+    SERUM_PROGRAM_IDS.includes(instruction.programId.toBase58()) ||
     MARKETS.some(
       (market) =>
         market.programId && market.programId.equals(instruction.programId)
@@ -327,6 +330,10 @@ const SERUM_CODE_LOOKUP: { [key: number]: string } = {
   7: "Disable Market",
   8: "Sweep Fees",
   9: "New Order",
+  10: "New Order",
+  11: "Cancel Order",
+  12: "Cancel Order By Client Id",
+  13: "Send Take",
 };
 
 export function parseSerumInstructionCode(instruction: TransactionInstruction) {

explorer/src/components/transaction/InstructionsSection.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-
 import { ErrorCard } from "components/common/ErrorCard";
 import {
   ParsedInnerInstruction,
@@ -34,7 +33,7 @@ import {
   useTransactionStatus,
 } from "providers/transactions";
 import { Cluster, useCluster } from "providers/cluster";
-import { UpgradeableBpfLoaderDetailsCard } from "components/instruction/upgradeable-bpf-loader/UpgradeableBpfLoaderDetailsCard";
+import { BpfUpgradeableLoaderDetailsCard } from "components/instruction/bpf-upgradeable-loader/BpfUpgradeableLoaderDetailsCard";
 import { VoteDetailsCard } from "components/instruction/vote/VoteDetailsCard";
 
 export type InstructionDetailsProps = {
@@ -173,7 +172,7 @@ function renderInstructionCard({
       case "bpf-loader":
         return <BpfLoaderDetailsCard {...props} />;
       case "bpf-upgradeable-loader":
-        return <UpgradeableBpfLoaderDetailsCard {...props} />;
+        return <BpfUpgradeableLoaderDetailsCard {...props} />;
       case "system":
         return <SystemDetailsCard {...props} />;
       case "stake":