From b33e5b87dd4987fa6126bfb0dbb6d3da2c3452a4 Mon Sep 17 00:00:00 2001
From: Josh <josh.hundley@gmail.com>
Date: Thu, 19 Nov 2020 14:05:55 -0800
Subject: [PATCH] explorer: introduce details card for memo instruction
 (#13538)

---
 .../instruction/MemoDetailsCard.tsx           | 26 +++++++++++++++++++
 explorer/src/pages/TransactionDetailsPage.tsx | 10 +++++++
 2 files changed, 36 insertions(+)
 create mode 100644 explorer/src/components/instruction/MemoDetailsCard.tsx

diff --git a/explorer/src/components/instruction/MemoDetailsCard.tsx b/explorer/src/components/instruction/MemoDetailsCard.tsx
new file mode 100644
index 0000000000..54457a08f0
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/explorer/src/pages/TransactionDetailsPage.tsx b/explorer/src/pages/TransactionDetailsPage.tsx
index 34e98aab82..23077cbc7f 100644
--- a/explorer/src/pages/TransactionDetailsPage.tsx
+++ b/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} />;