From de22f3d0e7e4af9d6d505c08c2d2a7cb8acb75ae Mon Sep 17 00:00:00 2001
From: Justin Starry <justin@solana.com>
Date: Fri, 14 Aug 2020 23:00:35 +0800
Subject: [PATCH] Explorer: Display error message on invalid signature query
 (#11633)

---
 explorer/src/pages/TransactionDetailsPage.tsx | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/explorer/src/pages/TransactionDetailsPage.tsx b/explorer/src/pages/TransactionDetailsPage.tsx
index ba3aeb2b64..1988a7291e 100644
--- a/explorer/src/pages/TransactionDetailsPage.tsx
+++ b/explorer/src/pages/TransactionDetailsPage.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import bs58 from "bs58";
 import {
   useFetchTransactionStatus,
   useTransactionStatus,
@@ -29,7 +30,16 @@ import { TokenDetailsCard } from "components/instruction/token/TokenDetailsCard"
 import { FetchStatus } from "providers/cache";
 
 type Props = { signature: TransactionSignature };
-export function TransactionDetailsPage({ signature }: Props) {
+export function TransactionDetailsPage({ signature: raw }: Props) {
+  let signature: TransactionSignature | undefined;
+
+  try {
+    const decoded = bs58.decode(raw);
+    if (decoded.length === 64) {
+      signature = raw;
+    }
+  } catch (err) {}
+
   return (
     <div className="container mt-n3">
       <div className="header">
@@ -38,10 +48,15 @@ export function TransactionDetailsPage({ signature }: Props) {
           <h4 className="header-title">Transaction</h4>
         </div>
       </div>
-
-      <StatusCard signature={signature} />
-      <AccountsCard signature={signature} />
-      <InstructionsSection signature={signature} />
+      {signature === undefined ? (
+        <ErrorCard text={`Signature "${raw}" is not valid`} />
+      ) : (
+        <>
+          <StatusCard signature={signature} />
+          <AccountsCard signature={signature} />
+          <InstructionsSection signature={signature} />
+        </>
+      )}
     </div>
   );
 }