diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx index e671087..076d9be 100644 --- a/src/AddressTransactions.tsx +++ b/src/AddressTransactions.tsx @@ -15,6 +15,7 @@ import { SearchController } from "./search/search"; import { RuntimeContext } from "./useRuntime"; import { useENSCache } from "./useReverseCache"; import { useFeeToggler } from "./search/useFeeToggler"; +import { SelectionContext, useSelection } from "./useSelection"; type BlockParams = { addressOrName: string; @@ -153,6 +154,8 @@ const AddressTransactions: React.FC = () => { const [feeDisplay, feeDisplayToggler] = useFeeToggler(); + const selection = useSelection(); + return ( {error ? ( @@ -204,7 +207,7 @@ const AddressTransactions: React.FC = () => { feeDisplayToggler={feeDisplayToggler} /> {controller ? ( - <> + {controller.getPage().map((tx) => ( { nextHash={page ? page[page.length - 1].hash : ""} /> - + ) : ( )} diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx index 8f8f474..e8cbc52 100644 --- a/src/BlockTransactions.tsx +++ b/src/BlockTransactions.tsx @@ -15,6 +15,7 @@ import { PAGE_SIZE } from "./params"; import { useFeeToggler } from "./search/useFeeToggler"; import { RuntimeContext } from "./useRuntime"; import { useENSCache } from "./useReverseCache"; +import { SelectionContext, useSelection } from "./useSelection"; type BlockParams = { blockNumber: string; @@ -116,6 +117,8 @@ const BlockTransactions: React.FC = () => { const [feeDisplay, feeDisplayToggler] = useFeeToggler(); + const selection = useSelection(); + return ( Transactions @@ -142,7 +145,7 @@ const BlockTransactions: React.FC = () => { feeDisplayToggler={feeDisplayToggler} /> {page ? ( - <> + {page.map((tx) => ( { total={total} /> - + ) : ( )} diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx index 7cfaf76..516554f 100644 --- a/src/search/TransactionItem.tsx +++ b/src/search/TransactionItem.tsx @@ -14,6 +14,7 @@ import TransactionValue from "../components/TransactionValue"; import { ENSReverseCache, ProcessedTransaction } from "../types"; import { FeeDisplay } from "./useFeeToggler"; import { formatValue } from "../components/formatter"; +import { useSelectionContext } from "../useSelection"; type TransactionItemProps = { tx: ProcessedTransaction; @@ -45,6 +46,14 @@ const TransactionItem: React.FC = ({ const ensTo = ensCache && tx.to && ensCache[tx.to]; const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction; + const [selection, setSelection] = useSelectionContext(); + const select = (address: string) => { + setSelection({ type: "address", content: address }); + }; + const deselect = () => { + setSelection(null); + }; + return (
= ({ {tx.from && ( - +
select(tx.from!)} + onMouseLeave={deselect} + > + +
)}
@@ -86,12 +107,24 @@ const TransactionItem: React.FC = ({ {tx.to && ( - +
select(tx.to!)} + onMouseLeave={deselect} + > + +
)}
diff --git a/src/useSelection.ts b/src/useSelection.ts new file mode 100644 index 0000000..ed66746 --- /dev/null +++ b/src/useSelection.ts @@ -0,0 +1,23 @@ +import React, { useState, useContext } from "react"; + +export type Selection = { + type: string; + content: string; +}; + +export const useSelection = (): [ + Selection | null, + React.Dispatch> +] => { + const [selection, setSelection] = useState(null); + return [selection, setSelection]; +}; + +export const SelectionContext = React.createContext< + ReturnType +>(null!); + +export const useSelectionContext = () => { + const ctx = useContext(SelectionContext); + return ctx; +};