Merge pull request #108 from delta1/search-kernel

Add search kernel functionality

src/App.tsx

@@ -7,6 +7,7 @@ import { setupWebsockets } from './helpers/api';
 import store from './store';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import SingleBlock from './components/SingleBlock';
+import SearchKernel from './components/SearchKernel';
 
 export default function App() {
     useEffect(() => {
@@ -26,6 +27,7 @@ export default function App() {
                         <Switch>
                             <Route exact path="/" component={BlockExplorer} />
                             <Route path="/block/:id" component={SingleBlock} />
+                            <Route path="/kernel/:nonce/:signature" component={SearchKernel} />
                         </Switch>
                     </div>
                 </div>

src/components/SearchKernel.css

@@ -0,0 +1,20 @@
+.SearchKernel {
+    padding: 2em;
+    min-height: 800px;
+}
+
+.SearchKernel h1 {
+    font-weight: bold;
+    font-family: Avenir, sans-serif;
+    font-size: 30px;
+}
+
+.SearchKernel h2 {
+    font-weight: bold;
+    font-family: Avenir, sans-serif;
+    font-size: 20px;
+}
+
+.SearchKernel a {
+    text-decoration: none;
+}

src/components/SearchKernel.tsx

@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import React, { useEffect, useState } from 'react';
+import './SearchKernel.css';
+import { useParams, Link, Redirect } from 'react-router-dom';
+import { searchKernel } from '../helpers/api';
+import { ReactComponent as LoadingBars } from '../assets/bars.svg';
+
+interface Status {
+    status: string;
+    message: string;
+    hash?: string;
+}
+
+const renderStatus = (status: Status) => {
+    switch (status.status) {
+        case 'redirect':
+            return <Redirect push to={`/block/${status.hash}`} />;
+        case 'complete':
+            return (
+                <div>
+                    <LoadingBars fill={'#000'} />
+                    <h1>{status.message}</h1>
+                    <h2>Redirecting...</h2>
+                </div>
+            );
+        case 'loading':
+            return (
+                <div>
+                    <LoadingBars fill={'#000'} />
+                    <h1>{status.message}</h1>
+                </div>
+            );
+        default:
+            return (
+                <h1 className="noBlockFound">
+                    {status.message} <Link to={'/'}>Go Back</Link>
+                </h1>
+            );
+    }
+};
+
+const SearchKernel = () => {
+    const { nonce, signature } = useParams();
+    const [status, setStatus] = useState({ status: 'loading', message: '', hash: '' } as Status);
+    useEffect(() => {
+        let timer;
+
+        if (!nonce || !signature) {
+            setStatus({
+                status: 'error',
+                message: 'Invalid nonce or signature'
+            });
+            return;
+        }
+        setStatus({
+            status: 'loading',
+            message: 'Searching for transaction...'
+        });
+        searchKernel(nonce, signature)
+            .then((response) => {
+                if (response.blocks.length > 0) {
+                    const block = response.blocks[0];
+                    const height = block.block.header.height;
+                    const hash = block.block.header.hash;
+                    const message = `Found in block #${height}.`;
+                    setStatus({
+                        status: 'complete',
+                        message,
+                        hash
+                    });
+                    timer = setTimeout(() => setStatus({ status: 'redirect', message, hash }), 2000);
+                } else {
+                    setStatus({
+                        status: 'error',
+                        message: 'There was an error finding that transaction.'
+                    });
+                }
+            })
+            .catch((e) => {
+                console.error(e);
+                setStatus({
+                    status: 'error',
+                    message: 'Transaction not found'
+                });
+            });
+        if (timer) return window.clearTimeout(timer);
+    }, [nonce, signature]);
+
+    return <div className="SearchKernel">{renderStatus(status)}</div>;
+};
+
+export default SearchKernel;

src/helpers/api.ts

@@ -89,6 +89,15 @@ export async function fetchSingleBlock(blockId: string | number): Promise<Blocks
     }
 }
 
+export async function searchKernel(publicNonce: string, signature: string): Promise<Blocks> {
+    try {
+        const response = await fetch(`${apiUrl}/kernel/${publicNonce}/${signature}`);
+        return await response.json();
+    } catch (e) {
+        return e;
+    }
+}
+
 export interface Constants {
     coinbase_lock_height: number;
     blockchain_version: number;