diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx index b7985fa..03011cf 100644 --- a/src/AddressTransactions.tsx +++ b/src/AddressTransactions.tsx @@ -12,6 +12,7 @@ import ResultHeader from "./search/ResultHeader"; import PendingResults from "./search/PendingResults"; import TransactionItem from "./search/TransactionItem"; import { SearchController } from "./search/search"; +import { useENSCache } from "./useReverseCache"; import { useFeeToggler } from "./search/useFeeToggler"; import { provider } from "./ethersconfig"; @@ -41,8 +42,20 @@ const AddressTransactions: React.FC = () => { // If it looks like it is an ENS name, try to resolve it useEffect(() => { if (ethers.utils.isAddress(params.addressOrName)) { + setENS(false); + setError(false); + // Normalize to checksummed address - setChecksummedAddress(ethers.utils.getAddress(params.addressOrName)); + const _checksummedAddress = ethers.utils.getAddress(params.addressOrName); + if (_checksummedAddress !== params.addressOrName) { + // Request came with a non-checksummed address; fix the URL + history.replace( + `/address/${_checksummedAddress}${ + params.direction ? "/" + params.direction : "" + }${location.search}` + ); + } + setChecksummedAddress(_checksummedAddress); return; } @@ -50,27 +63,16 @@ const AddressTransactions: React.FC = () => { const resolvedAddress = await provider.resolveName(params.addressOrName); if (resolvedAddress !== null) { setENS(true); - setChecksummedAddress(resolvedAddress); setError(false); + setChecksummedAddress(resolvedAddress); } else { + setENS(false); setError(true); + setChecksummedAddress(undefined); } }; 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 : "" - }${location.search}` - ); - } + }, [params.addressOrName, history, params.direction, location.search]); const [controller, setController] = useState(); useEffect(() => { @@ -128,6 +130,7 @@ const AddressTransactions: React.FC = () => { }, [checksummedAddress, params.direction, hash, controller]); const page = useMemo(() => controller?.getPage(), [controller]); + const reverseCache = useENSCache(page); document.title = `Address ${params.addressOrName} | Otterscan`; @@ -189,6 +192,7 @@ const AddressTransactions: React.FC = () => { diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx index 7370db6..ef81025 100644 --- a/src/BlockTransactions.tsx +++ b/src/BlockTransactions.tsx @@ -11,9 +11,10 @@ import ResultHeader from "./search/ResultHeader"; import PendingResults from "./search/PendingResults"; import TransactionItem from "./search/TransactionItem"; import BlockLink from "./components/BlockLink"; -import { ProcessedTransaction, ENSReverseCache } from "./types"; +import { ProcessedTransaction } from "./types"; import { PAGE_SIZE } from "./params"; import { useFeeToggler } from "./search/useFeeToggler"; +import { useENSCache } from "./useReverseCache"; type BlockParams = { blockNumber: string; @@ -80,43 +81,7 @@ const BlockTransactions: React.FC = () => { }, [txs, pageNumber]); const total = useMemo(() => txs?.length ?? 0, [txs]); - const [reverseCache, setReverseCache] = useState(); - useEffect(() => { - if (!page) { - return; - } - - const addrSet = new Set(); - for (const tx of page) { - if (tx.from) { - addrSet.add(tx.from); - } - if (tx.to) { - addrSet.add(tx.to); - } - } - const addresses = Array.from(addrSet); - - const reverseResolve = async () => { - const solvers: Promise[] = []; - for (const a of addresses) { - solvers.push(provider.lookupAddress(a)); - } - - const results = await Promise.all(solvers); - const cache: ENSReverseCache = {}; - for (let i = 0; i < results.length; i++) { - if (results[i] === null) { - continue; - } - cache[addresses[i]] = results[i]; - } - console.log("RESOLVED"); - console.log(cache); - setReverseCache(cache); - }; - reverseResolve(); - }, [page]); + const reverseCache = useENSCache(page); document.title = `Block #${blockNumber} Txns | Otterscan`; diff --git a/src/useReverseCache.ts b/src/useReverseCache.ts new file mode 100644 index 0000000..9451d88 --- /dev/null +++ b/src/useReverseCache.ts @@ -0,0 +1,44 @@ +import { useState, useEffect } from "react"; +import { ENSReverseCache, ProcessedTransaction } from "./types"; +import { provider } from "./ethersconfig"; + +export const useENSCache = (page?: ProcessedTransaction[]) => { + const [reverseCache, setReverseCache] = useState(); + + useEffect(() => { + if (!page) { + return; + } + + const addrSet = new Set(); + for (const tx of page) { + if (tx.from) { + addrSet.add(tx.from); + } + if (tx.to) { + addrSet.add(tx.to); + } + } + const addresses = Array.from(addrSet); + + const reverseResolve = async () => { + const solvers: Promise[] = []; + for (const a of addresses) { + solvers.push(provider.lookupAddress(a)); + } + + const results = await Promise.all(solvers); + const cache: ENSReverseCache = {}; + for (let i = 0; i < results.length; i++) { + if (results[i] === null) { + continue; + } + cache[addresses[i]] = results[i]; + } + setReverseCache(cache); + }; + reverseResolve(); + }, [page]); + + return reverseCache; +};