From 19f7af84a5c8f3df70f0d0e0c67ddb07103f3423 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 30 Oct 2021 21:06:11 -0300 Subject: [PATCH 01/13] Extract resolver api --- .../CompositeAddressResolver.ts | 26 +++++++++++++++ .../address-resolver/ENSAddressResolver.ts | 15 +++++++++ src/api/address-resolver/address-resolver.ts | 8 +++++ src/api/address-resolver/index.ts | 33 +++++++++++++++++++ src/types.ts | 4 +-- src/useReverseCache.ts | 16 ++------- 6 files changed, 85 insertions(+), 17 deletions(-) create mode 100644 src/api/address-resolver/CompositeAddressResolver.ts create mode 100644 src/api/address-resolver/ENSAddressResolver.ts create mode 100644 src/api/address-resolver/address-resolver.ts create mode 100644 src/api/address-resolver/index.ts diff --git a/src/api/address-resolver/CompositeAddressResolver.ts b/src/api/address-resolver/CompositeAddressResolver.ts new file mode 100644 index 0000000..bee73da --- /dev/null +++ b/src/api/address-resolver/CompositeAddressResolver.ts @@ -0,0 +1,26 @@ +import { BaseProvider } from "@ethersproject/providers"; +import { IAddressResolver } from "./address-resolver"; + +export class CompositeAddressResolver implements IAddressResolver { + private resolvers: IAddressResolver[] = []; + + addResolver(resolver: IAddressResolver) { + this.resolvers.push(resolver); + } + + async resolveAddress( + provider: BaseProvider, + address: string + ): Promise { + for (const r of this.resolvers) { + const name = r.resolveAddress(provider, address); + if (name !== undefined) { + return name; + } + } + + return undefined; + // TODO: fallback to address itself + // return address; + } +} diff --git a/src/api/address-resolver/ENSAddressResolver.ts b/src/api/address-resolver/ENSAddressResolver.ts new file mode 100644 index 0000000..ef45a64 --- /dev/null +++ b/src/api/address-resolver/ENSAddressResolver.ts @@ -0,0 +1,15 @@ +import { BaseProvider } from "@ethersproject/providers"; +import { IAddressResolver } from "./address-resolver"; + +export class ENSAddressResolver implements IAddressResolver { + async resolveAddress( + provider: BaseProvider, + address: string + ): Promise { + const name = await provider.lookupAddress(address); + if (name === null) { + return undefined; + } + return name; + } +} diff --git a/src/api/address-resolver/address-resolver.ts b/src/api/address-resolver/address-resolver.ts new file mode 100644 index 0000000..246db34 --- /dev/null +++ b/src/api/address-resolver/address-resolver.ts @@ -0,0 +1,8 @@ +import { BaseProvider } from "@ethersproject/providers"; + +export interface IAddressResolver { + resolveAddress( + provider: BaseProvider, + address: string + ): Promise; +} diff --git a/src/api/address-resolver/index.ts b/src/api/address-resolver/index.ts new file mode 100644 index 0000000..a9b4ff6 --- /dev/null +++ b/src/api/address-resolver/index.ts @@ -0,0 +1,33 @@ +import { BaseProvider } from "@ethersproject/providers"; +import { ENSReverseCache } from "../../types"; +import { IAddressResolver } from "./address-resolver"; +import { CompositeAddressResolver } from "./CompositeAddressResolver"; +import { ENSAddressResolver } from "./ENSAddressResolver"; + +// Create and configure the main resolver +const _mainResolver = new CompositeAddressResolver(); +_mainResolver.addResolver(new ENSAddressResolver()); + +export const mainResolver: IAddressResolver = _mainResolver; + +export const batchPopulate = async ( + provider: BaseProvider, + addresses: string[] +): Promise => { + const solvers: Promise[] = []; + for (const a of addresses) { + solvers.push(mainResolver.resolveAddress(provider, a)); + } + + const results = await Promise.all(solvers); + const cache: ENSReverseCache = {}; + for (let i = 0; i < results.length; i++) { + const r = results[i]; + if (r === undefined) { + continue; + } + cache[addresses[i]] = r; + } + + return cache; +}; diff --git a/src/types.ts b/src/types.ts index 5904b31..76a1944 100644 --- a/src/types.ts +++ b/src/types.ts @@ -32,9 +32,7 @@ export type TransactionChunk = { lastPage: boolean; }; -export type ENSReverseCache = { - [address: string]: string; -}; +export type ENSReverseCache = Record; export type TransactionData = { transactionHash: string; diff --git a/src/useReverseCache.ts b/src/useReverseCache.ts index 365888a..fa0ca1a 100644 --- a/src/useReverseCache.ts +++ b/src/useReverseCache.ts @@ -1,6 +1,7 @@ import { useState, useEffect } from "react"; import { JsonRpcProvider } from "@ethersproject/providers"; import { ENSReverseCache, ProcessedTransaction } from "./types"; +import { batchPopulate } from "./api/address-resolver"; export const useENSCache = ( provider?: JsonRpcProvider, @@ -25,20 +26,7 @@ export const useENSCache = ( 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++) { - const r = results[i]; - if (r === null) { - continue; - } - cache[addresses[i]] = r; - } + const cache = await batchPopulate(provider, addresses); setReverseCache(cache); }; reverseResolve(); From b8eea08f4d623a944e1d5ecc3f9a205b913d1052 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 30 Oct 2021 21:08:10 -0300 Subject: [PATCH 02/13] Move type --- src/api/address-resolver/index.ts | 3 ++- src/search/TransactionItem.tsx | 3 ++- src/types.ts | 2 -- src/useReverseCache.ts | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/api/address-resolver/index.ts b/src/api/address-resolver/index.ts index a9b4ff6..9bc5833 100644 --- a/src/api/address-resolver/index.ts +++ b/src/api/address-resolver/index.ts @@ -1,9 +1,10 @@ import { BaseProvider } from "@ethersproject/providers"; -import { ENSReverseCache } from "../../types"; import { IAddressResolver } from "./address-resolver"; import { CompositeAddressResolver } from "./CompositeAddressResolver"; import { ENSAddressResolver } from "./ENSAddressResolver"; +export type ENSReverseCache = Record; + // Create and configure the main resolver const _mainResolver = new CompositeAddressResolver(); _mainResolver.addResolver(new ENSAddressResolver()); diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx index 76e58e7..57fb7e4 100644 --- a/src/search/TransactionItem.tsx +++ b/src/search/TransactionItem.tsx @@ -14,10 +14,11 @@ import TransactionDirection, { Flags, } from "../components/TransactionDirection"; import TransactionValue from "../components/TransactionValue"; -import { ENSReverseCache, ProcessedTransaction } from "../types"; +import { ProcessedTransaction } from "../types"; import { FeeDisplay } from "./useFeeToggler"; import { formatValue } from "../components/formatter"; import ETH2USDValue from "../components/ETH2USDValue"; +import { ENSReverseCache } from "../api/address-resolver"; type TransactionItemProps = { tx: ProcessedTransaction; diff --git a/src/types.ts b/src/types.ts index 76a1944..12763bb 100644 --- a/src/types.ts +++ b/src/types.ts @@ -32,8 +32,6 @@ export type TransactionChunk = { lastPage: boolean; }; -export type ENSReverseCache = Record; - export type TransactionData = { transactionHash: string; from: string; diff --git a/src/useReverseCache.ts b/src/useReverseCache.ts index fa0ca1a..25d0774 100644 --- a/src/useReverseCache.ts +++ b/src/useReverseCache.ts @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import { JsonRpcProvider } from "@ethersproject/providers"; -import { ENSReverseCache, ProcessedTransaction } from "./types"; -import { batchPopulate } from "./api/address-resolver"; +import { ProcessedTransaction } from "./types"; +import { batchPopulate, ENSReverseCache } from "./api/address-resolver"; export const useENSCache = ( provider?: JsonRpcProvider, From 60ead1ba494227cebe8cfd946993a366ab5ca3d6 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 30 Oct 2021 21:10:15 -0300 Subject: [PATCH 03/13] Rename type --- src/api/address-resolver/index.ts | 6 +++--- src/search/TransactionItem.tsx | 4 ++-- src/useReverseCache.ts | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/api/address-resolver/index.ts b/src/api/address-resolver/index.ts index 9bc5833..cc4fe1b 100644 --- a/src/api/address-resolver/index.ts +++ b/src/api/address-resolver/index.ts @@ -3,7 +3,7 @@ import { IAddressResolver } from "./address-resolver"; import { CompositeAddressResolver } from "./CompositeAddressResolver"; import { ENSAddressResolver } from "./ENSAddressResolver"; -export type ENSReverseCache = Record; +export type ResolvedAddresses = Record; // Create and configure the main resolver const _mainResolver = new CompositeAddressResolver(); @@ -14,14 +14,14 @@ export const mainResolver: IAddressResolver = _mainResolver; export const batchPopulate = async ( provider: BaseProvider, addresses: string[] -): Promise => { +): Promise => { const solvers: Promise[] = []; for (const a of addresses) { solvers.push(mainResolver.resolveAddress(provider, a)); } const results = await Promise.all(solvers); - const cache: ENSReverseCache = {}; + const cache: ResolvedAddresses = {}; for (let i = 0; i < results.length; i++) { const r = results[i]; if (r === undefined) { diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx index 57fb7e4..3917e24 100644 --- a/src/search/TransactionItem.tsx +++ b/src/search/TransactionItem.tsx @@ -18,11 +18,11 @@ import { ProcessedTransaction } from "../types"; import { FeeDisplay } from "./useFeeToggler"; import { formatValue } from "../components/formatter"; import ETH2USDValue from "../components/ETH2USDValue"; -import { ENSReverseCache } from "../api/address-resolver"; +import { ResolvedAddresses } from "../api/address-resolver"; type TransactionItemProps = { tx: ProcessedTransaction; - ensCache?: ENSReverseCache; + ensCache?: ResolvedAddresses; selectedAddress?: string; feeDisplay: FeeDisplay; priceMap: Record; diff --git a/src/useReverseCache.ts b/src/useReverseCache.ts index 25d0774..e931e58 100644 --- a/src/useReverseCache.ts +++ b/src/useReverseCache.ts @@ -1,13 +1,13 @@ import { useState, useEffect } from "react"; import { JsonRpcProvider } from "@ethersproject/providers"; import { ProcessedTransaction } from "./types"; -import { batchPopulate, ENSReverseCache } from "./api/address-resolver"; +import { batchPopulate, ResolvedAddresses } from "./api/address-resolver"; export const useENSCache = ( provider?: JsonRpcProvider, page?: ProcessedTransaction[] ) => { - const [reverseCache, setReverseCache] = useState(); + const [reverseCache, setReverseCache] = useState(); useEffect(() => { if (!provider || !page) { From 9da41d0a2e8406563d59d2ee493556e047121e33 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 30 Oct 2021 21:14:11 -0300 Subject: [PATCH 04/13] Typo fix --- src/components/DecoratedAddressLink.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx index 0b38fab..ca42a90 100644 --- a/src/components/DecoratedAddressLink.tsx +++ b/src/components/DecoratedAddressLink.tsx @@ -23,7 +23,7 @@ type DecoratedAddressLinkProps = { tokenMeta?: TokenMeta; }; -const DecoratedAddresssLink: React.FC = ({ +const DecoratedAddressLink: React.FC = ({ address, ensName, selectedAddress, @@ -90,4 +90,4 @@ const DecoratedAddresssLink: React.FC = ({ ); }; -export default React.memo(DecoratedAddresssLink); +export default React.memo(DecoratedAddressLink); From a0675c637780eb45c8539c467e4f5f211ec4f460 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 30 Oct 2021 21:31:31 -0300 Subject: [PATCH 05/13] Use ResolvedAddresses table instead of pre-resolved name parameter --- src/AddressTransactions.tsx | 4 +- src/block/BlockTransactionResults.tsx | 4 +- src/components/AddressOrENSName.tsx | 66 +++++++++++++------------ src/components/DecoratedAddressLink.tsx | 7 +-- src/search/TransactionItem.tsx | 16 ++---- 5 files changed, 48 insertions(+), 49 deletions(-) diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx index 53f92bf..3bbd6df 100644 --- a/src/AddressTransactions.tsx +++ b/src/AddressTransactions.tsx @@ -165,7 +165,7 @@ const AddressTransactions: React.FC = () => { }, [provider, checksummedAddress, params.direction, hash, controller]); const page = useMemo(() => controller?.getPage(), [controller]); - const reverseCache = useENSCache(provider, page); + const resolvedAddresses = useENSCache(provider, page); const blockTags: BlockTag[] = useMemo(() => { if (!page) { @@ -283,7 +283,7 @@ const AddressTransactions: React.FC = () => { = ({ const selectionCtx = useSelection(); const [feeDisplay, feeDisplayToggler] = useFeeToggler(); const { provider } = useContext(RuntimeContext); - const reverseCache = useENSCache(provider, page); + const resolvedAddresses = useENSCache(provider, page); const blockTags = useMemo(() => [blockTag], [blockTag]); const priceMap = useMultipleETHUSDOracle(provider, blockTags); @@ -59,7 +59,7 @@ const BlockTransactionResults: React.FC = ({ diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx index 9cb2f9e..43d40e1 100644 --- a/src/components/AddressOrENSName.tsx +++ b/src/components/AddressOrENSName.tsx @@ -3,49 +3,53 @@ import Address from "./Address"; import AddressLink from "./AddressLink"; import ENSName from "./ENSName"; import ENSNameLink from "./ENSNameLink"; +import { ResolvedAddresses } from "../api/address-resolver"; type AddressOrENSNameProps = { address: string; - ensName?: string; selectedAddress?: string; text?: string; dontOverrideColors?: boolean; + resolvedAddresses?: ResolvedAddresses | undefined; }; const AddressOrENSName: React.FC = ({ address, - ensName, selectedAddress, text, dontOverrideColors, -}) => ( - <> - {address === selectedAddress ? ( - <> - {ensName ? ( - - ) : ( -
- )} - - ) : ( - <> - {ensName ? ( - - ) : ( - - )} - - )} - -); + resolvedAddresses, +}) => { + const name = resolvedAddresses?.[address]; + return ( + <> + {address === selectedAddress ? ( + <> + {name ? ( + + ) : ( +
+ )} + + ) : ( + <> + {name ? ( + + ) : ( + + )} + + )} + + ); +}; export default React.memo(AddressOrENSName); diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx index ca42a90..ee88b31 100644 --- a/src/components/DecoratedAddressLink.tsx +++ b/src/components/DecoratedAddressLink.tsx @@ -8,10 +8,10 @@ import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins"; import TokenLogo from "./TokenLogo"; import AddressOrENSName from "./AddressOrENSName"; import { AddressContext, TokenMeta, ZERO_ADDRESS } from "../types"; +import { ResolvedAddresses } from "../api/address-resolver"; type DecoratedAddressLinkProps = { address: string; - ensName?: string; selectedAddress?: string; text?: string; addressCtx?: AddressContext; @@ -21,11 +21,11 @@ type DecoratedAddressLinkProps = { txFrom?: boolean; txTo?: boolean; tokenMeta?: TokenMeta; + resolvedAddresses?: ResolvedAddresses | undefined; }; const DecoratedAddressLink: React.FC = ({ address, - ensName, selectedAddress, text, addressCtx, @@ -35,6 +35,7 @@ const DecoratedAddressLink: React.FC = ({ txFrom, txTo, tokenMeta, + resolvedAddresses, }) => { const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS; const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS; @@ -81,10 +82,10 @@ const DecoratedAddressLink: React.FC = ({ )} ); diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx index 3917e24..f71457e 100644 --- a/src/search/TransactionItem.tsx +++ b/src/search/TransactionItem.tsx @@ -22,7 +22,7 @@ import { ResolvedAddresses } from "../api/address-resolver"; type TransactionItemProps = { tx: ProcessedTransaction; - ensCache?: ResolvedAddresses; + resolvedAddresses?: ResolvedAddresses; selectedAddress?: string; feeDisplay: FeeDisplay; priceMap: Record; @@ -30,7 +30,7 @@ type TransactionItemProps = { const TransactionItem: React.FC = ({ tx, - ensCache, + resolvedAddresses, selectedAddress, feeDisplay, priceMap, @@ -51,12 +51,6 @@ const TransactionItem: React.FC = ({ } } - const ensFrom = ensCache && tx.from && ensCache[tx.from]; - const ensTo = ensCache && tx.to && ensCache[tx.to]; - const ensCreated = - ensCache && - tx.createdContractAddress && - ensCache[tx.createdContractAddress]; const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction; return ( @@ -88,9 +82,9 @@ const TransactionItem: React.FC = ({ )} @@ -108,18 +102,18 @@ const TransactionItem: React.FC = ({ ) : ( )} From b770bb5fb5863e89e3cf154461d3c3bf1c79cb38 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 30 Oct 2021 21:49:23 -0300 Subject: [PATCH 06/13] Migrate search results to page collector name hooks --- src/AddressTransactions.tsx | 5 +-- src/block/BlockTransactionResults.tsx | 5 +-- src/useResolvedAddresses.ts | 48 +++++++++++++++++++++++++++ src/useReverseCache.ts | 36 -------------------- 4 files changed, 54 insertions(+), 40 deletions(-) create mode 100644 src/useResolvedAddresses.ts delete mode 100644 src/useReverseCache.ts diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx index 3bbd6df..9fbbec6 100644 --- a/src/AddressTransactions.tsx +++ b/src/AddressTransactions.tsx @@ -26,7 +26,7 @@ import PendingResults from "./search/PendingResults"; import TransactionItem from "./search/TransactionItem"; import { SearchController } from "./search/search"; import { RuntimeContext } from "./useRuntime"; -import { useENSCache } from "./useReverseCache"; +import { pageCollector, useResolvedAddresses } from "./useResolvedAddresses"; import { useFeeToggler } from "./search/useFeeToggler"; import { SelectionContext, useSelection } from "./useSelection"; import { useMultipleETHUSDOracle } from "./usePriceOracle"; @@ -165,7 +165,8 @@ const AddressTransactions: React.FC = () => { }, [provider, checksummedAddress, params.direction, hash, controller]); const page = useMemo(() => controller?.getPage(), [controller]); - const resolvedAddresses = useENSCache(provider, page); + const addrCollector = useMemo(() => pageCollector(page), [page]); + const resolvedAddresses = useResolvedAddresses(provider, addrCollector); const blockTags: BlockTag[] = useMemo(() => { if (!page) { diff --git a/src/block/BlockTransactionResults.tsx b/src/block/BlockTransactionResults.tsx index f6eb4de..f9cfc27 100644 --- a/src/block/BlockTransactionResults.tsx +++ b/src/block/BlockTransactionResults.tsx @@ -8,7 +8,7 @@ import TransactionItem from "../search/TransactionItem"; import { useFeeToggler } from "../search/useFeeToggler"; import { RuntimeContext } from "../useRuntime"; import { SelectionContext, useSelection } from "../useSelection"; -import { useENSCache } from "../useReverseCache"; +import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses"; import { ProcessedTransaction } from "../types"; import { PAGE_SIZE } from "../params"; import { useMultipleETHUSDOracle } from "../usePriceOracle"; @@ -29,7 +29,8 @@ const BlockTransactionResults: React.FC = ({ const selectionCtx = useSelection(); const [feeDisplay, feeDisplayToggler] = useFeeToggler(); const { provider } = useContext(RuntimeContext); - const resolvedAddresses = useENSCache(provider, page); + const addrCollector = useMemo(() => pageCollector(page), [page]); + const resolvedAddresses = useResolvedAddresses(provider, addrCollector); const blockTags = useMemo(() => [blockTag], [blockTag]); const priceMap = useMultipleETHUSDOracle(provider, blockTags); diff --git a/src/useResolvedAddresses.ts b/src/useResolvedAddresses.ts new file mode 100644 index 0000000..3eefdf0 --- /dev/null +++ b/src/useResolvedAddresses.ts @@ -0,0 +1,48 @@ +import { useState, useEffect } from "react"; +import { JsonRpcProvider } from "@ethersproject/providers"; +import { ProcessedTransaction } from "./types"; +import { batchPopulate, ResolvedAddresses } from "./api/address-resolver"; + +export type AddressCollector = () => string[]; + +export const pageCollector = + (page: ProcessedTransaction[] | undefined): AddressCollector => + () => { + if (!page) { + return []; + } + + const uniqueAddresses = new Set(); + for (const tx of page) { + if (tx.from) { + uniqueAddresses.add(tx.from); + } + if (tx.to) { + uniqueAddresses.add(tx.to); + } + } + + return Array.from(uniqueAddresses); + }; + +export const useResolvedAddresses = ( + provider: JsonRpcProvider | undefined, + addrCollector: AddressCollector +) => { + const [names, setNames] = useState(); + + useEffect(() => { + if (!provider) { + return; + } + + const populate = async () => { + const _addresses = addrCollector(); + const _names = await batchPopulate(provider, _addresses); + setNames(_names); + }; + populate(); + }, [provider, addrCollector]); + + return names; +}; diff --git a/src/useReverseCache.ts b/src/useReverseCache.ts deleted file mode 100644 index e931e58..0000000 --- a/src/useReverseCache.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { useState, useEffect } from "react"; -import { JsonRpcProvider } from "@ethersproject/providers"; -import { ProcessedTransaction } from "./types"; -import { batchPopulate, ResolvedAddresses } from "./api/address-resolver"; - -export const useENSCache = ( - provider?: JsonRpcProvider, - page?: ProcessedTransaction[] -) => { - const [reverseCache, setReverseCache] = useState(); - - useEffect(() => { - if (!provider || !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 cache = await batchPopulate(provider, addresses); - setReverseCache(cache); - }; - reverseResolve(); - }, [provider, page]); - - return reverseCache; -}; From 7708fa75e512c43c6aac52917d30cff084120cad Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 30 Oct 2021 21:54:05 -0300 Subject: [PATCH 07/13] Remove unnecessary nested span --- src/components/Address.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Address.tsx b/src/components/Address.tsx index d7694e5..62891a3 100644 --- a/src/components/Address.tsx +++ b/src/components/Address.tsx @@ -6,7 +6,7 @@ type AddressProps = { const Address: React.FC = ({ address }) => ( - {address} + {address} ); From 8341c274f61198c956bcd86e445d0afb660c3cc1 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 30 Oct 2021 21:56:32 -0300 Subject: [PATCH 08/13] Remove unnecessary React.memo --- src/components/Address.tsx | 2 +- src/components/AddressLink.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Address.tsx b/src/components/Address.tsx index 62891a3..478f4f6 100644 --- a/src/components/Address.tsx +++ b/src/components/Address.tsx @@ -10,4 +10,4 @@ const Address: React.FC = ({ address }) => ( ); -export default React.memo(Address); +export default Address; diff --git a/src/components/AddressLink.tsx b/src/components/AddressLink.tsx index a8fd5c3..4b6f99e 100644 --- a/src/components/AddressLink.tsx +++ b/src/components/AddressLink.tsx @@ -24,4 +24,4 @@ const AddressLink: React.FC = ({ ); -export default React.memo(AddressLink); +export default AddressLink; From 119cb67b00237401b73cc51fbd96e164c894a313 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 30 Oct 2021 22:00:03 -0300 Subject: [PATCH 09/13] Remove unnecessary nested span --- src/components/AddressLink.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/AddressLink.tsx b/src/components/AddressLink.tsx index 4b6f99e..8353457 100644 --- a/src/components/AddressLink.tsx +++ b/src/components/AddressLink.tsx @@ -17,10 +17,9 @@ const AddressLink: React.FC = ({ dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover" } font-address truncate`} to={`/address/${address}`} + title={text ?? address} > - - {text ?? address} - + {text ?? address} ); From 4c59cd188f144e3a2015e4485fa77d8cbefc029b Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 30 Oct 2021 22:05:26 -0300 Subject: [PATCH 10/13] Remove redundant React.memo --- src/components/AddressOrENSName.tsx | 2 +- src/components/ENSName.tsx | 2 +- src/components/ENSNameLink.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx index 43d40e1..23ba6cd 100644 --- a/src/components/AddressOrENSName.tsx +++ b/src/components/AddressOrENSName.tsx @@ -52,4 +52,4 @@ const AddressOrENSName: React.FC = ({ ); }; -export default React.memo(AddressOrENSName); +export default AddressOrENSName; diff --git a/src/components/ENSName.tsx b/src/components/ENSName.tsx index 7bc8032..95f1e1f 100644 --- a/src/components/ENSName.tsx +++ b/src/components/ENSName.tsx @@ -22,4 +22,4 @@ const ENSName: React.FC = ({ name, address }) => ( ); -export default React.memo(ENSName); +export default ENSName; diff --git a/src/components/ENSNameLink.tsx b/src/components/ENSNameLink.tsx index c1da646..ad5df4d 100644 --- a/src/components/ENSNameLink.tsx +++ b/src/components/ENSNameLink.tsx @@ -31,4 +31,4 @@ const ENSNameLink: React.FC = ({ ); -export default React.memo(ENSNameLink); +export default ENSNameLink; From 3211befaeac1eb4f4466b93c47dfe78d8f5cc7f7 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 30 Oct 2021 22:14:16 -0300 Subject: [PATCH 11/13] Remove redundant React.memo --- src/search/TransactionItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx index f71457e..2e6132d 100644 --- a/src/search/TransactionItem.tsx +++ b/src/search/TransactionItem.tsx @@ -139,4 +139,4 @@ const TransactionItem: React.FC = ({ ); }; -export default React.memo(TransactionItem); +export default TransactionItem; From 41be42d1ced1b271ea31e64b96d7f2f67f4216e0 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 30 Oct 2021 22:14:37 -0300 Subject: [PATCH 12/13] Save 1 array construction --- src/AddressTransactions.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx index 9fbbec6..19d41bb 100644 --- a/src/AddressTransactions.tsx +++ b/src/AddressTransactions.tsx @@ -278,9 +278,9 @@ const AddressTransactions: React.FC = () => { feeDisplay={feeDisplay} feeDisplayToggler={feeDisplayToggler} /> - {controller ? ( + {page ? ( - {controller.getPage().map((tx) => ( + {page.map((tx) => ( Date: Sat, 30 Oct 2021 22:44:33 -0300 Subject: [PATCH 13/13] Retrofit name resolvers into transaction/* pages --- src/Transaction.tsx | 16 ++++++++++++++- src/transaction/Details.tsx | 6 ++++++ src/transaction/LogEntry.tsx | 10 +++++++++- src/transaction/Logs.tsx | 5 ++++- src/useResolvedAddresses.ts | 38 +++++++++++++++++++++++++++++++++++- 5 files changed, 71 insertions(+), 4 deletions(-) diff --git a/src/Transaction.tsx b/src/Transaction.tsx index a240c7e..7107b32 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -11,6 +11,10 @@ import { useInternalOperations, useTxData } from "./useErigonHooks"; import { useETHUSDOracle } from "./usePriceOracle"; import { useAppConfigContext } from "./useAppConfig"; import { useSourcify, useTransactionDescription } from "./useSourcify"; +import { + transactionDataCollector, + useResolvedAddresses, +} from "./useResolvedAddresses"; const Details = React.lazy( () => @@ -36,6 +40,11 @@ const Transaction: React.FC = () => { const { txhash } = params; const txData = useTxData(provider, txhash); + const addrCollector = useMemo( + () => transactionDataCollector(txData), + [txData] + ); + const resolvedAddresses = useResolvedAddresses(provider, addrCollector); const internalOps = useInternalOperations(provider, txData); const sendsEthToMiner = useMemo(() => { @@ -100,10 +109,15 @@ const Transaction: React.FC = () => { internalOps={internalOps} sendsEthToMiner={sendsEthToMiner} ethUSDPrice={blockETHUSDPrice} + resolvedAddresses={resolvedAddresses} /> - + diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx index 4746cc5..72f448a 100644 --- a/src/transaction/Details.tsx +++ b/src/transaction/Details.tsx @@ -38,6 +38,7 @@ import ModeTab from "../components/ModeTab"; import DecodedParamsTable from "./decoder/DecodedParamsTable"; import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes"; import { DevDoc, UserDoc } from "../useSourcify"; +import { ResolvedAddresses } from "../api/address-resolver"; type DetailsProps = { txData: TransactionData; @@ -47,6 +48,7 @@ type DetailsProps = { internalOps?: InternalOperation[]; sendsEthToMiner: boolean; ethUSDPrice: BigNumber | undefined; + resolvedAddresses: ResolvedAddresses | undefined; }; const Details: React.FC = ({ @@ -57,6 +59,7 @@ const Details: React.FC = ({ internalOps, sendsEthToMiner, ethUSDPrice, + resolvedAddresses, }) => { const hasEIP1559 = txData.confirmedData?.blockBaseFeePerGas !== undefined && @@ -154,6 +157,7 @@ const Details: React.FC = ({ address={txData.from} miner={txData.from === txData.confirmedData?.miner} txFrom + resolvedAddresses={resolvedAddresses} /> @@ -171,6 +175,7 @@ const Details: React.FC = ({ address={txData.to} miner={txData.to === txData.confirmedData?.miner} txTo + resolvedAddresses={resolvedAddresses} /> @@ -188,6 +193,7 @@ const Details: React.FC = ({ address={txData.confirmedData.createdContractAddress!} creation txTo + resolvedAddresses={resolvedAddresses} /> diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx index 23ab883..2993e16 100644 --- a/src/transaction/LogEntry.tsx +++ b/src/transaction/LogEntry.tsx @@ -10,14 +10,21 @@ import DecodedParamsTable from "./decoder/DecodedParamsTable"; import DecodedLogSignature from "./decoder/DecodedLogSignature"; import { TransactionData } from "../types"; import { useTopic0 } from "../useTopic0"; +import { ResolvedAddresses } from "../api/address-resolver"; type LogEntryProps = { txData: TransactionData; log: Log; logDesc: LogDescription | null | undefined; + resolvedAddresses: ResolvedAddresses | undefined; }; -const LogEntry: React.FC = ({ txData, log, logDesc }) => { +const LogEntry: React.FC = ({ + txData, + log, + logDesc, + resolvedAddresses, +}) => { const rawTopic0 = log.topics[0]; const topic0 = useTopic0(rawTopic0); @@ -62,6 +69,7 @@ const LogEntry: React.FC = ({ txData, log, logDesc }) => { miner={log.address === txData.confirmedData?.miner} txFrom={log.address === txData.from} txTo={log.address === txData.to} + resolvedAddresses={resolvedAddresses} /> diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx index 45fe491..1fd4207 100644 --- a/src/transaction/Logs.tsx +++ b/src/transaction/Logs.tsx @@ -5,13 +5,15 @@ import LogEntry from "./LogEntry"; import { TransactionData } from "../types"; import { useAppConfigContext } from "../useAppConfig"; import { Metadata, useMultipleMetadata } from "../useSourcify"; +import { ResolvedAddresses } from "../api/address-resolver"; type LogsProps = { txData: TransactionData; metadata: Metadata | null | undefined; + resolvedAddresses: ResolvedAddresses | undefined; }; -const Logs: React.FC = ({ txData, metadata }) => { +const Logs: React.FC = ({ txData, metadata, resolvedAddresses }) => { const baseMetadatas = useMemo((): Record => { if (!txData.to || metadata === undefined) { return {}; @@ -70,6 +72,7 @@ const Logs: React.FC = ({ txData, metadata }) => { txData={txData} log={l} logDesc={logDescs?.[i]} + resolvedAddresses={resolvedAddresses} /> ))} diff --git a/src/useResolvedAddresses.ts b/src/useResolvedAddresses.ts index 3eefdf0..74042e5 100644 --- a/src/useResolvedAddresses.ts +++ b/src/useResolvedAddresses.ts @@ -1,6 +1,6 @@ import { useState, useEffect } from "react"; import { JsonRpcProvider } from "@ethersproject/providers"; -import { ProcessedTransaction } from "./types"; +import { ProcessedTransaction, TransactionData } from "./types"; import { batchPopulate, ResolvedAddresses } from "./api/address-resolver"; export type AddressCollector = () => string[]; @@ -25,6 +25,42 @@ export const pageCollector = return Array.from(uniqueAddresses); }; +export const transactionDataCollector = + (txData: TransactionData | null | undefined): AddressCollector => + () => { + if (!txData) { + return []; + } + + const uniqueAddresses = new Set(); + + // Standard fields + uniqueAddresses.add(txData.from); + if (txData.to) { + uniqueAddresses.add(txData.to); + } + if (txData.confirmedData?.createdContractAddress) { + uniqueAddresses.add(txData.confirmedData?.createdContractAddress); + } + + // Dig token transfers + for (const t of txData.tokenTransfers) { + uniqueAddresses.add(t.from); + uniqueAddresses.add(t.to); + uniqueAddresses.add(t.token); + } + + // Dig log addresses + if (txData.confirmedData) { + for (const l of txData.confirmedData.logs) { + uniqueAddresses.add(l.address); + // TODO: find a way to dig over decoded address log attributes + } + } + + return Array.from(uniqueAddresses); + }; + export const useResolvedAddresses = ( provider: JsonRpcProvider | undefined, addrCollector: AddressCollector