Explorer: introduce program logs section on transaction details page (#12625)

* introduce program logs section on transaction details page

* update web3.js version

explorer/package-lock.json

@@ -9584,9 +9584,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "12.12.67",
+          "version": "12.12.66",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.67.tgz",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.66.tgz",
-          "integrity": "sha512-R48tgL2izApf+9rYNH+3RBMbRpPeW3N8f0I9HMhggeq4UXwBDqumJ14SDs4ctTMhG11pIOduZ4z3QWGOiMc9Vg=="
+          "integrity": "sha512-VwJbrfz53hQo/3uUhan/ZQJD9AQSSbmODtbtFhPmT07KTIp9zw2dVZhoV0TezZv2NZMuFdKHY6z9SosB4Vtj3A=="
         },
         "lodash": {
           "version": "4.17.20",

explorer/src/pages/TransactionDetailsPage.tsx

@@ -104,6 +104,7 @@ export function TransactionDetailsPage({ signature: raw }: SignatureProps) {
           <StatusCard signature={signature} autoRefresh={autoRefresh} />
           <AccountsCard signature={signature} autoRefresh={autoRefresh} />
           <InstructionsSection signature={signature} />
+          <ProgramLogSection signature={signature} />
         </>
       )}
     </div>
@@ -458,3 +459,31 @@ function InstructionsSection({ signature }: SignatureProps) {
     </>
   );
 }
+
+function ProgramLogSection({ signature }: SignatureProps) {
+  const details = useTransactionDetails(signature);
+  const logMessages = details?.data?.transaction?.meta?.logMessages;
+
+  if (!logMessages || logMessages.length < 1) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="container">
+        <div className="header">
+          <div className="header-body">
+            <h3 className="card-header-title">Program Log</h3>
+          </div>
+        </div>
+      </div>
+      <div className="card">
+        <ul className="log-messages">
+          {logMessages.map((message, key) => (
+            <li key={key}>{message.replace(/^Program log: /, "")}</li>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+}

explorer/src/scss/_solana-dark-overrides.scss

@@ -8,6 +8,11 @@ code, pre {
   color: $white;
 }
 
+ul.log-messages {
+  background-color: $black-dark;
+  color: $white;
+}
+
 .form-control {
   border-color: $input-border-color;
 }

explorer/src/scss/_solana.scss

@@ -10,6 +10,20 @@ code, pre {
   color: $black;
 }
 
+ul.log-messages {
+  padding: 0.66rem;
+  margin: 1rem;
+  border-radius: $border-radius;
+  background-color: $gray-200;
+  color: $black;
+  list-style: none;
+  min-height: 12.5rem;
+  max-height: 20rem;
+  overflow: auto;
+  font-size: 0.8125rem;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .popover-container {
   position: relative;