Add signature input to tx table (#9)

explorer/src/components/TransactionsCard.tsx

@@ -1,12 +1,47 @@
 import React from "react";
 import {
   useTransactions,
+  useTransactionsDispatch,
+  checkTransactionStatus,
+  ActionType,
   Transaction,
   Status
 } from "../providers/transactions";
+import bs58 from "bs58";
+import { assertUnreachable } from "../utils";
+import { useNetwork } from "../providers/network";
 
 function TransactionsCard() {
-  const { transactions } = useTransactions();
+  const { transactions, idCounter } = useTransactions();
+  const dispatch = useTransactionsDispatch();
+  const signatureInput = React.useRef<HTMLInputElement>(null);
+  const [error, setError] = React.useState("");
+  const { url } = useNetwork();
+
+  const onNew = (signature: string) => {
+    if (signature.length === 0) return;
+    try {
+      const length = bs58.decode(signature).length;
+      if (length > 64) {
+        setError("Signature is too short");
+        return;
+      } else if (length < 64) {
+        setError("Signature is too short");
+        return;
+      }
+    } catch (err) {
+      setError(`${err}`);
+      return;
+    }
+
+    dispatch({ type: ActionType.InputSignature, signature });
+    checkTransactionStatus(dispatch, idCounter + 1, signature, url);
+
+    const inputEl = signatureInput.current;
+    if (inputEl) {
+      inputEl.value = "";
+    }
+  };
 
   return (
     <div className="card">
@@ -16,6 +51,9 @@ function TransactionsCard() {
         <table className="table table-sm table-nowrap card-table">
           <thead>
             <tr>
+              <th className="text-muted text-center">
+                <span className="fe fe-hash"></span>
+              </th>
               <th className="text-muted">Status</th>
               <th className="text-muted">Signature</th>
               <th className="text-muted">Confirmations</th>
@@ -23,9 +61,36 @@ function TransactionsCard() {
             </tr>
           </thead>
           <tbody className="list">
-            {Object.values(transactions).map(transaction =>
-              renderTransactionRow(transaction)
-            )}
+            <tr>
+              <td>
+                <span className="badge badge-soft-dark badge-pill">
+                  {idCounter + 1}
+                </span>
+              </td>
+
+              <td>
+                <span className={`badge badge-soft-primary`}>New</span>
+              </td>
+              <td>
+                <input
+                  type="text"
+                  onInput={() => setError("")}
+                  onKeyDown={e =>
+                    e.keyCode === 13 && onNew(e.currentTarget.value)
+                  }
+                  onSubmit={e => onNew(e.currentTarget.value)}
+                  ref={signatureInput}
+                  className={`form-control text-signature text-monospace ${
+                    error ? "is-invalid" : ""
+                  }`}
+                  placeholder="abcd..."
+                />
+                {error ? <div className="invalid-feedback">{error}</div> : null}
+              </td>
+              <td>-</td>
+              <td>-</td>
+            </tr>
+            {transactions.map(transaction => renderTransactionRow(transaction))}
           </tbody>
         </table>
       </div>
@@ -65,22 +130,29 @@ const renderTransactionRow = (transaction: Transaction) => {
       statusClass = "danger";
       statusText = "Failed";
       break;
-    case Status.Pending:
+    case Status.Missing:
       statusClass = "warning";
-      statusText = "Pending";
+      statusText = "Not Found";
       break;
+    default:
+      return assertUnreachable(transaction.status);
   }
 
   return (
     <tr key={transaction.signature}>
+      <td>
+        <span className="badge badge-soft-dark badge-pill">
+          {transaction.id}
+        </span>
+      </td>
       <td>
         <span className={`badge badge-soft-${statusClass}`}>{statusText}</span>
       </td>
       <td>
         <code>{transaction.signature}</code>
       </td>
-      <td>TODO</td>
-      <td>TODO</td>
+      <td>-</td>
+      <td>-</td>
     </tr>
   );
 };