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(); + const [isENS, setENS] = useState(); + + // 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(); 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 (
Address - {params.address} + {checksummedAddress} - + + {isENS && ( + + ENS: {params.addressOrName} + + )}
@@ -130,7 +164,7 @@ const AddressTransactions: React.FC = () => { )} { ))} @@ -159,7 +193,7 @@ const AddressTransactions: React.FC = () => { )} ( - + 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 <>; };