explorer: introduce details card for memo instruction (#13538)

explorer/src/components/instruction/MemoDetailsCard.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { ParsedInstruction, SignatureResult } from "@solana/web3.js";
+import { InstructionCard } from "./InstructionCard";
+import { wrap } from "utils";
+
+export function MemoDetailsCard({
+  ix,
+  index,
+  result,
+}: {
+  ix: ParsedInstruction;
+  index: number;
+  result: SignatureResult;
+}) {
+  const data = wrap(ix.parsed, 50);
+  return (
+    <InstructionCard ix={ix} index={index} result={result} title="Memo">
+      <tr>
+        <td>Data (UTF-8)</td>
+        <td className="text-lg-right">
+          <pre className="d-inline-block text-left mb-0">{data}</pre>
+        </td>
+      </tr>
+    </InstructionCard>
+  );
+}

explorer/src/pages/TransactionDetailsPage.tsx

@@ -32,6 +32,7 @@ import { Slot } from "components/common/Slot";
 import { isTokenSwapInstruction } from "components/instruction/token-swap/types";
 import { TokenSwapDetailsCard } from "components/instruction/TokenSwapDetailsCard";
 import { isSerumInstruction } from "components/instruction/serum/types";
+import { MemoDetailsCard } from "components/instruction/MemoDetailsCard";
 
 const AUTO_REFRESH_INTERVAL = 2000;
 const ZERO_CONFIRMATION_BAILOUT = 5;
@@ -449,6 +450,15 @@ function InstructionsSection({ signature }: SignatureProps) {
                 index={index}
               />
             );
+          case "spl-memo":
+            return (
+              <MemoDetailsCard
+                key={index}
+                ix={next}
+                result={result}
+                index={index}
+              />
+            );
           default:
             const props = { ix: next, result, index };
             return <UnknownDetailsCard key={index} {...props} />;