From 2c363d096dde3a995306143dc123835897fb5d60 Mon Sep 17 00:00:00 2001
From: Jeremy May <may.jeremy.r@gmail.com>
Date: Tue, 13 Apr 2021 11:14:00 -0700
Subject: [PATCH 1/2] Etherscan clone episode 5

---
 moralis-scan/src/App.js                      | 19 +++++++++++--------
 moralis-scan/src/Header.jsx                  | 15 +++++++++++++++
 moralis-scan/src/components/Home.jsx         |  9 +++++++++
 moralis-scan/src/components/Search.jsx       |  8 +++++---
 moralis-scan/src/components/TransResults.jsx |  4 +++-
 5 files changed, 43 insertions(+), 12 deletions(-)
 create mode 100644 moralis-scan/src/Header.jsx
 create mode 100644 moralis-scan/src/components/Home.jsx

diff --git a/moralis-scan/src/App.js b/moralis-scan/src/App.js
index 445f6b9dc..ddd1c64a7 100644
--- a/moralis-scan/src/App.js
+++ b/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>
   );
 }
diff --git a/moralis-scan/src/Header.jsx b/moralis-scan/src/Header.jsx
new file mode 100644
index 000000000..3e33c420c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/moralis-scan/src/components/Home.jsx b/moralis-scan/src/components/Home.jsx
new file mode 100644
index 000000000..a8ac3666e
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/moralis-scan/src/components/Search.jsx b/moralis-scan/src/components/Search.jsx
index e1866ed92..350ae3226 100644
--- a/moralis-scan/src/components/Search.jsx
+++ b/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) => {
diff --git a/moralis-scan/src/components/TransResults.jsx b/moralis-scan/src/components/TransResults.jsx
index 0db84a631..9371fc639 100644
--- a/moralis-scan/src/components/TransResults.jsx
+++ b/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,

From cb3ab35494cb0665d9336211cd6d3208416934c6 Mon Sep 17 00:00:00 2001
From: Jeremy May <may.jeremy.r@gmail.com>
Date: Wed, 14 Apr 2021 14:56:47 -0700
Subject: [PATCH 2/2] add Etherscan ep 5 video link

---
 moralis-scan/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/moralis-scan/README.md b/moralis-scan/README.md
index 6f40cb672..3371e4dc9 100644
--- a/moralis-scan/README.md
+++ b/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