(fix) Search now works again (erm, I think)

(feat) A help box for search.
(feat) Search by bech32 address

src/search/search.ts

@@ -21,6 +21,7 @@ import {
 import { PAGE_SIZE } from "../params";
 import { ProcessedTransaction, TransactionChunk } from "../types";
 import { formatter } from "../utils/formatter";
+import { fromBech32Address } from "@zilliqa-js/crypto";
 
 export const rawToProcessed = (provider: JsonRpcApiProvider, _rawRes: any) => {
   const _res: TransactionResponse[] = _rawRes.txs.map(
@@ -247,6 +248,24 @@ const doSearch = async (q: string, navigate: NavigateFunction) => {
     maybeIndex = q.substring(sepIndex + 1);
   }
 
+  // Tx hash?
+  if (isHexString(q, 32)) {
+    console.log(`search: this looks like a txn hash - ${q}`);
+    navigate(`/tx/${q}`);
+    return;
+  } else if (isHexString(`0x${q}`, 32)) {
+    navigate(`/tx/0x${q}`);
+    return;
+  }
+
+  // Zilliqa address?
+  try {
+    maybeAddress = fromBech32Address(maybeAddress);
+    console.log(`search: bech32 address to base16 - ${maybeAddress}`);
+  } catch (e) {
+    console.log(`search: Not a bech32 address`);
+  }
+
   // The type checker is convinced that ethers:isAddress() will never say that a string > 40 characters
   // long is not an address. I'm not sure why...
   if (!isAddress(maybeAddress)) {
@@ -266,7 +285,7 @@ const doSearch = async (q: string, navigate: NavigateFunction) => {
 
   // Plain address?
   if (isAddress(maybeAddress)) {
-    console.log(`maybeAddress ${maybeAddress} is an address ..`);
+    console.log(`search: maybeAddress ${maybeAddress} is an address ..`);
     navigate(
       `/address/${maybeAddress}${
         maybeIndex !== "" ? `?nonce=${maybeIndex}` : ""
@@ -275,22 +294,15 @@ const doSearch = async (q: string, navigate: NavigateFunction) => {
     return;
   }
 
-  // Tx hash?
-  if (isHexString(q, 32)) {
-    console.log(`This looks like a txn hash - ${q}`);
-    navigate(`/tx/${q}`);
-    return;
-  } else if (isHexString(`0x${q}`, 32)) {
-    navigate(`/tx/0x${q}`);
-    return;
-  }
 
   // Block number?
   // If the number here is very large, parseInt() will return an fp number which
   // will cause errors, so ..
   try {
-    const blockNumber = BigInt(q);
-    console.log(`Parses as a block number ${blockNumber}`);
+    let toParse = q;
+    console.log(`search: try to parse ${toParse} as a block number`);
+    const blockNumber = BigInt(toParse);
+    console.log(`search: ${toParse} Parses as a block number ${blockNumber}`);
     navigate(`/block/${blockNumber.toString()}`);
     return;
   } catch (e) {
@@ -301,7 +313,7 @@ const doSearch = async (q: string, navigate: NavigateFunction) => {
   if (q.charAt(0) === "#") {
     const dsBlockNumber = parseInt(q.substring(1));
     if (!isNaN(dsBlockNumber)) {
-      console.log(`# ${dsBlockNumber} - it's a ds block number`);
+      console.log(`search: # ${dsBlockNumber} - it's a ds block number`);
       navigate(`/dsblock/${dsBlockNumber}`);
       return;
     }
@@ -312,7 +324,7 @@ const doSearch = async (q: string, navigate: NavigateFunction) => {
     const mayBeEpoch = q.substring(6);
     const epoch = parseInt(mayBeEpoch);
     if (!isNaN(epoch)) {
-      console.log(`epoch: ${epoch}`);
+      console.log(`search: epoch: ${epoch}`);
       navigate(`/epoch/${epoch}`);
       return;
     }
@@ -323,14 +335,14 @@ const doSearch = async (q: string, navigate: NavigateFunction) => {
     const mayBeSlot = q.substring(5);
     const slot = parseInt(mayBeSlot);
     if (!isNaN(slot)) {
-      console.log(`slot: ${slot}`);
+      console.log(`search: slot: ${slot}`);
       navigate(`/slot/${slot}`);
       return;
     }
   }
 
   // Validator?
-  if (q.startsWith("validator:")) {
+  if (q.startsWith("search - validator:")) {
     const mayBeValidator = q.substring(10);
     // Validator by index
     if (mayBeValidator.match(/^\d+$/)) {
@@ -348,7 +360,7 @@ const doSearch = async (q: string, navigate: NavigateFunction) => {
   }
 
   // Assume it is an ENS name
-  console.log(`no match: assuming ${maybeAddress} is an ENS name`);
+  console.log(`search: no match: assuming ${maybeAddress} is an ENS name`);
   navigate(
     `/address/${maybeAddress}${
       maybeIndex !== "" ? `?nonce=${maybeIndex}` : ""