Merge pull request #13 from MoralisWeb3/moralis-scan-ep05

Moralis scan ep05

moralis-scan/README.md

@@ -10,6 +10,7 @@
 
 [Part 4 - I Cloned Etherscan in 5 hours - Search Component](https://youtu.be/DM3mf2L7Iq8)
 
+[Part 5 - I Cloned Etherscan in 5 hours - Routing](https://youtu.be/LFsj0-_tw0Y)
 
 # Getting Started with Create React App
 

moralis-scan/src/App.js

@@ -1,22 +1,25 @@
 import Moralis from "moralis";
-import { useState } from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+
 import "./App.css";
-import Search from "./components/Search";
 import TransResults from "./components/TransResults";
+import Home from "./components/Home";
+import Header from "./Header";
 
 Moralis.initialize(process.env.REACT_APP_MORALIS_APPLICATION_ID);
 Moralis.serverURL = process.env.REACT_APP_MORALIS_SERVER_URL;
 
 function App() {
-  const [userAddress, setUserAddress] = useState("");
-  const handleSearch = (address) => {
-    setUserAddress(address);
-  }
   return (
     <div className="App">
       <h1>Moralis Scan</h1>
-      <Search handleSearch={handleSearch} />
-      <TransResults userAddress={userAddress} />
+      <Router>
+        <Header />
+        <Switch>
+          <Route path="/address/:address" component={TransResults} />
+          <Route exact path="/"component={Home} />
+        </Switch>
+      </Router>
     </div>
   );
 }

moralis-scan/src/Header.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Search from './components/Search';
+
+export default function Header() {
+  return (
+    <header className="d-flex justify-content-between align-items-center p-2">
+      <div className="col col-sm-6">
+        <span className="h1">Moralis Scan</span>
+      </div>
+      <div className="col col-sm-6">
+        <Search />
+      </div>
+    </header>
+  );
+}

moralis-scan/src/components/Home.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Home() {
+  return (
+    <div>
+      <p>Welcome to the Moralis blockchain explorer!</p>
+    </div>
+  )
+}

moralis-scan/src/components/Search.jsx

@@ -1,17 +1,19 @@
 import React, { useMemo, useState } from 'react'
+import { useHistory } from 'react-router';
 import { useMoralisCloudQuery } from '../hooks/cloudQuery';
 
-export default function Search({handleSearch}) {
+export default function Search() {
   const [searchTxt, setSearchTxt] = useState("");
   const [address, setAddress] = useState("");
   const [error, setError] = useState(null);
+  const history = useHistory();
 
   const onSearchTextChanged = (e) => setSearchTxt(e.target.value);
 
   const watchParams = useMemo(()=> ({
     params: {address}, // query params
-    onSuccess: () => handleSearch(address)
-  }), [address]);
+    onSuccess: () => history.push(`/address/${address}`),
+  }), [address, history]);
   const {loading} = useMoralisCloudQuery("watchEthAddress", watchParams);
 
   const submitSearch = async (e) => {

moralis-scan/src/components/TransResults.jsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import { processTransaction } from '../queries/transactions';
 import { useMoralisCloudQuery } from '../hooks/cloudQuery';
+import { useParams } from 'react-router';
 
 const cols = [
   { colName: "Txn Hash", key: "hash" },
@@ -12,7 +13,8 @@ const cols = [
   { colName: "Txn Fee", key: "gas_price" },
 ];
 
-export default function TransResults({userAddress}) {
+export default function TransResults() {
+  const {address: userAddress} = useParams();
   const options = useMemo(()=> ({
     params: { userAddress },
     postProcess: processTransaction,