From 62df32b82f0462f07ab799eef9566fb2fb62a194 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 2 Jul 2021 16:05:18 -0300
Subject: [PATCH 1/4] Initial ENS support for resolving names -> address on
 search

---
 src/AddressTransactions.tsx | 66 ++++++++++++++++++++++++++++---------
 src/App.tsx                 |  2 +-
 src/Search.tsx              |  3 +-
 3 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx
index a598cc8..762356f 100644
--- a/src/AddressTransactions.tsx
+++ b/src/AddressTransactions.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { useParams, useLocation, useHistory } from "react-router-dom";
+import { ethers } from "ethers";
 import queryString from "query-string";
 import Blockies from "react-blockies";
 import StandardFrame from "./StandardFrame";
@@ -12,10 +13,10 @@ import PendingResults from "./search/PendingResults";
 import TransactionItem from "./search/TransactionItem";
 import { SearchController } from "./search/search";
 import { useFeeToggler } from "./search/useFeeToggler";
-import { ethers } from "ethers";
+import { provider } from "./ethersconfig";
 
 type BlockParams = {
-  address: string;
+  addressOrName: string;
   direction?: string;
 };
 
@@ -33,13 +34,33 @@ const AddressTransactions: React.FC = () => {
     hash = qs.h as string;
   }
 
-  // Normalize to checksummed address
-  const checksummedAddress = useMemo(
-    () => ethers.utils.getAddress(params.address),
-    [params.address]
-  );
-  if (params.address !== checksummedAddress) {
-    console.log("NORMALIZE");
+  const [checksummedAddress, setChecksummedAddress] = useState<string>();
+  const [isENS, setENS] = useState<boolean>();
+
+  // If it looks like it is an ENS name, try to resolve it
+  useEffect(() => {
+    if (ethers.utils.isAddress(params.addressOrName)) {
+      // Normalize to checksummed address
+      setChecksummedAddress(ethers.utils.getAddress(params.addressOrName));
+      return;
+    }
+
+    const resolveName = async () => {
+      const resolvedAddress = await provider.resolveName(params.addressOrName);
+      if (resolvedAddress !== null) {
+        setENS(true);
+        setChecksummedAddress(resolvedAddress);
+      }
+    };
+    resolveName();
+  }, [params.addressOrName]);
+
+  // Request came with a non-checksummed address; fix the URL
+  if (
+    !isENS &&
+    checksummedAddress &&
+    params.addressOrName !== checksummedAddress
+  ) {
     history.replace(
       `/address/${checksummedAddress}${
         params.direction ? "/" + params.direction : ""
@@ -49,6 +70,10 @@ const AddressTransactions: React.FC = () => {
 
   const [controller, setController] = useState<SearchController>();
   useEffect(() => {
+    if (!checksummedAddress) {
+      return;
+    }
+
     const readFirstPage = async () => {
       const _controller = await SearchController.firstPage(checksummedAddress);
       setController(_controller);
@@ -100,24 +125,33 @@ const AddressTransactions: React.FC = () => {
 
   const page = useMemo(() => controller?.getPage(), [controller]);
 
-  document.title = `Address ${params.address} | Otterscan`;
+  document.title = `Address ${params.addressOrName} | Otterscan`;
 
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
 
+  if (!checksummedAddress) {
+    return <></>;
+  }
+
   return (
     <StandardFrame>
       <StandardSubtitle>
         <div className="flex space-x-2 items-baseline">
           <Blockies
             className="self-center rounded"
-            seed={params.address.toLowerCase()}
+            seed={checksummedAddress.toLowerCase()}
             scale={3}
           />
           <span>Address</span>
           <span className="font-address text-base text-gray-500">
-            {params.address}
+            {checksummedAddress}
           </span>
-          <Copy value={params.address} rounded />
+          <Copy value={checksummedAddress} rounded />
+          {isENS && (
+            <span className="rounded-lg px-2 py-1 bg-gray-200 text-gray-500 text-xs">
+              ENS: {params.addressOrName}
+            </span>
+          )}
         </div>
       </StandardSubtitle>
       <ContentFrame>
@@ -130,7 +164,7 @@ const AddressTransactions: React.FC = () => {
             )}
           </div>
           <UndefinedPageControl
-            address={params.address}
+            address={params.addressOrName}
             isFirst={controller?.isFirst}
             isLast={controller?.isLast}
             prevHash={page ? page[0].hash : ""}
@@ -148,7 +182,7 @@ const AddressTransactions: React.FC = () => {
               <TransactionItem
                 key={tx.hash}
                 tx={tx}
-                selectedAddress={params.address}
+                selectedAddress={params.addressOrName}
                 feeDisplay={feeDisplay}
               />
             ))}
@@ -159,7 +193,7 @@ const AddressTransactions: React.FC = () => {
                 )}
               </div>
               <UndefinedPageControl
-                address={params.address}
+                address={params.addressOrName}
                 isFirst={controller.isFirst}
                 isLast={controller.isLast}
                 prevHash={page ? page[0].hash : ""}
diff --git a/src/App.tsx b/src/App.tsx
index 3ce405f..9082f6f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -30,7 +30,7 @@ const App = () => (
           <Route path="/tx/:txhash">
             <Transaction />
           </Route>
-          <Route path="/address/:address/:direction?">
+          <Route path="/address/:addressOrName/:direction?">
             <AddressTransactions />
           </Route>
         </Route>
diff --git a/src/Search.tsx b/src/Search.tsx
index 1fe081b..7b5adc3 100644
--- a/src/Search.tsx
+++ b/src/Search.tsx
@@ -27,7 +27,8 @@ const Search: React.FC = () => {
     return <></>;
   }
 
-  history.replace("/");
+  // Assume it is an ENS name
+  history.replace(`/address/${q}`);
   return <></>;
 };
 

From 0c7cc1fc646c0ceec1c13ab0138f71d1d18da5dc Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 2 Jul 2021 16:20:50 -0300
Subject: [PATCH 2/4] Fix error handling

---
 src/AddressTransactions.tsx | 148 +++++++++++++++++++-----------------
 1 file changed, 79 insertions(+), 69 deletions(-)

diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx
index 762356f..b7985fa 100644
--- a/src/AddressTransactions.tsx
+++ b/src/AddressTransactions.tsx
@@ -36,6 +36,7 @@ const AddressTransactions: React.FC = () => {
 
   const [checksummedAddress, setChecksummedAddress] = useState<string>();
   const [isENS, setENS] = useState<boolean>();
+  const [error, setError] = useState<boolean>();
 
   // If it looks like it is an ENS name, try to resolve it
   useEffect(() => {
@@ -50,6 +51,9 @@ const AddressTransactions: React.FC = () => {
       if (resolvedAddress !== null) {
         setENS(true);
         setChecksummedAddress(resolvedAddress);
+        setError(false);
+      } else {
+        setError(true);
       }
     };
     resolveName();
@@ -129,82 +133,88 @@ const AddressTransactions: React.FC = () => {
 
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
 
-  if (!checksummedAddress) {
-    return <></>;
-  }
-
   return (
     <StandardFrame>
-      <StandardSubtitle>
-        <div className="flex space-x-2 items-baseline">
-          <Blockies
-            className="self-center rounded"
-            seed={checksummedAddress.toLowerCase()}
-            scale={3}
-          />
-          <span>Address</span>
-          <span className="font-address text-base text-gray-500">
-            {checksummedAddress}
-          </span>
-          <Copy value={checksummedAddress} rounded />
-          {isENS && (
-            <span className="rounded-lg px-2 py-1 bg-gray-200 text-gray-500 text-xs">
-              ENS: {params.addressOrName}
-            </span>
-          )}
-        </div>
-      </StandardSubtitle>
-      <ContentFrame>
-        <div className="flex justify-between items-baseline py-3">
-          <div className="text-sm text-gray-500">
-            {page === undefined ? (
-              <>Waiting for search results...</>
-            ) : (
-              <>{page.length} transactions on this page</>
-            )}
-          </div>
-          <UndefinedPageControl
-            address={params.addressOrName}
-            isFirst={controller?.isFirst}
-            isLast={controller?.isLast}
-            prevHash={page ? page[0].hash : ""}
-            nextHash={page ? page[page.length - 1].hash : ""}
-            disabled={controller === undefined}
-          />
-        </div>
-        <ResultHeader
-          feeDisplay={feeDisplay}
-          feeDisplayToggler={feeDisplayToggler}
-        />
-        {controller ? (
+      {error ? (
+        <span className="text-base">
+          "{params.addressOrName}" is not an ETH address or ENS name.
+        </span>
+      ) : (
+        checksummedAddress && (
           <>
-            {controller.getPage().map((tx) => (
-              <TransactionItem
-                key={tx.hash}
-                tx={tx}
-                selectedAddress={params.addressOrName}
-                feeDisplay={feeDisplay}
-              />
-            ))}
-            <div className="flex justify-between items-baseline py-3">
-              <div className="text-sm text-gray-500">
-                {page !== undefined && (
-                  <>{page.length} transactions on this page</>
+            <StandardSubtitle>
+              <div className="flex space-x-2 items-baseline">
+                <Blockies
+                  className="self-center rounded"
+                  seed={checksummedAddress.toLowerCase()}
+                  scale={3}
+                />
+                <span>Address</span>
+                <span className="font-address text-base text-gray-500">
+                  {checksummedAddress}
+                </span>
+                <Copy value={checksummedAddress} rounded />
+                {isENS && (
+                  <span className="rounded-lg px-2 py-1 bg-gray-200 text-gray-500 text-xs">
+                    ENS: {params.addressOrName}
+                  </span>
                 )}
               </div>
-              <UndefinedPageControl
-                address={params.addressOrName}
-                isFirst={controller.isFirst}
-                isLast={controller.isLast}
-                prevHash={page ? page[0].hash : ""}
-                nextHash={page ? page[page.length - 1].hash : ""}
+            </StandardSubtitle>
+            <ContentFrame>
+              <div className="flex justify-between items-baseline py-3">
+                <div className="text-sm text-gray-500">
+                  {page === undefined ? (
+                    <>Waiting for search results...</>
+                  ) : (
+                    <>{page.length} transactions on this page</>
+                  )}
+                </div>
+                <UndefinedPageControl
+                  address={params.addressOrName}
+                  isFirst={controller?.isFirst}
+                  isLast={controller?.isLast}
+                  prevHash={page ? page[0].hash : ""}
+                  nextHash={page ? page[page.length - 1].hash : ""}
+                  disabled={controller === undefined}
+                />
+              </div>
+              <ResultHeader
+                feeDisplay={feeDisplay}
+                feeDisplayToggler={feeDisplayToggler}
               />
-            </div>
+              {controller ? (
+                <>
+                  {controller.getPage().map((tx) => (
+                    <TransactionItem
+                      key={tx.hash}
+                      tx={tx}
+                      selectedAddress={checksummedAddress}
+                      feeDisplay={feeDisplay}
+                    />
+                  ))}
+                  <div className="flex justify-between items-baseline py-3">
+                    <div className="text-sm text-gray-500">
+                      {page !== undefined && (
+                        <>{page.length} transactions on this page</>
+                      )}
+                    </div>
+                    <UndefinedPageControl
+                      address={params.addressOrName}
+                      isFirst={controller.isFirst}
+                      isLast={controller.isLast}
+                      prevHash={page ? page[0].hash : ""}
+                      nextHash={page ? page[page.length - 1].hash : ""}
+                    />
+                  </div>
+                </>
+              ) : (
+                <PendingResults />
+              )}
+            </ContentFrame>
           </>
-        ) : (
-          <PendingResults />
-        )}
-      </ContentFrame>
+        )
+      )}
     </StandardFrame>
   );
 };

From 1965b8d3a6c7edc8ac39668c59da4ab2921ad6de Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 2 Jul 2021 16:22:43 -0300
Subject: [PATCH 3/4] Turn on autofocus in homepage

---
 src/Home.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Home.tsx b/src/Home.tsx
index a67796a..ca99185 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -66,6 +66,7 @@ const Home: React.FC = () => {
             size={50}
             placeholder="Search by address / txn hash / block number"
             onChange={handleChange}
+            autoFocus
           ></input>
           <button
             className="mx-auto px-3 py-1 mb-10 rounded bg-gray-100 hover:bg-gray-200 focus:outline-none"

From 9accae15322af75c3874bf27bec6dc0e5139786f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 2 Jul 2021 16:24:37 -0300
Subject: [PATCH 4/4] Add ENS notice on placeholder fields

---
 src/Home.tsx  | 2 +-
 src/Title.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index ca99185..7b7a814 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -64,7 +64,7 @@ const Home: React.FC = () => {
             className="w-full border rounded focus:outline-none px-2 py-1 mb-10"
             type="text"
             size={50}
-            placeholder="Search by address / txn hash / block number"
+            placeholder="Search by address / txn hash / block number / ENS name"
             onChange={handleChange}
             autoFocus
           ></input>
diff --git a/src/Title.tsx b/src/Title.tsx
index 8b8fb27..c8aab8f 100644
--- a/src/Title.tsx
+++ b/src/Title.tsx
@@ -50,8 +50,8 @@ const Title: React.FC = () => {
         <input
           className="w-full border-t border-b border-l rounded-l focus:outline-none px-2 py-1 text-sm"
           type="text"
-          size={50}
-          placeholder='Type "/" to search by address / txn hash / block number'
+          size={60}
+          placeholder='Type "/" to search by address / txn hash / block number / ENS name'
           onChange={handleChange}
           ref={searchRef}
         />