Add Sourcify decoration support to AddressTransactions page
This commit is contained in:
parent
fe8be2ee21
commit
dca72a13b4
|
@ -32,6 +32,7 @@ import { SelectionContext, useSelection } from "./useSelection";
|
|||
import { useMultipleETHUSDOracle } from "./usePriceOracle";
|
||||
import { useAppConfigContext } from "./useAppConfig";
|
||||
import { useMultipleMetadata } from "./useSourcify";
|
||||
import { ChecksummedAddress } from "./types";
|
||||
import SourcifyLogo from "./sourcify.svg";
|
||||
|
||||
type BlockParams = {
|
||||
|
@ -181,7 +182,20 @@ const AddressTransactions: React.FC = () => {
|
|||
const [feeDisplay, feeDisplayToggler] = useFeeToggler();
|
||||
|
||||
const selectionCtx = useSelection();
|
||||
const addresses = useMemo(() => [checksummedAddress], [checksummedAddress]);
|
||||
const addresses = useMemo(() => {
|
||||
const _addresses: ChecksummedAddress[] = [];
|
||||
if (checksummedAddress) {
|
||||
_addresses.push(checksummedAddress);
|
||||
}
|
||||
if (page) {
|
||||
for (const t of page) {
|
||||
if (t.to) {
|
||||
_addresses.push(t.to);
|
||||
}
|
||||
}
|
||||
}
|
||||
return _addresses;
|
||||
}, [checksummedAddress, page]);
|
||||
const { sourcifySource } = useAppConfigContext();
|
||||
const metadatas = useMultipleMetadata(
|
||||
undefined,
|
||||
|
@ -294,6 +308,7 @@ const AddressTransactions: React.FC = () => {
|
|||
selectedAddress={checksummedAddress}
|
||||
feeDisplay={feeDisplay}
|
||||
priceMap={priceMap}
|
||||
metadatas={metadatas}
|
||||
/>
|
||||
))}
|
||||
<div className="flex justify-between items-baseline py-3">
|
||||
|
|
|
@ -8,6 +8,8 @@ import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
|
|||
import AddressOrENSName from "./AddressOrENSName";
|
||||
import { AddressContext, ZERO_ADDRESS } from "../types";
|
||||
import { ResolvedAddresses } from "../api/address-resolver";
|
||||
import { Metadata } from "../useSourcify";
|
||||
import SourcifyLogo from "../sourcify.svg";
|
||||
|
||||
type DecoratedAddressLinkProps = {
|
||||
address: string;
|
||||
|
@ -19,6 +21,7 @@ type DecoratedAddressLinkProps = {
|
|||
txFrom?: boolean;
|
||||
txTo?: boolean;
|
||||
resolvedAddresses?: ResolvedAddresses | undefined;
|
||||
metadata?: Metadata | null | undefined;
|
||||
};
|
||||
|
||||
const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
|
||||
|
@ -31,6 +34,7 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
|
|||
txFrom,
|
||||
txTo,
|
||||
resolvedAddresses,
|
||||
metadata,
|
||||
}) => {
|
||||
const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
|
||||
const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
|
||||
|
@ -70,6 +74,17 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
|
|||
<FontAwesomeIcon icon={faCoins} size="1x" />
|
||||
</span>
|
||||
)}
|
||||
{metadata && (
|
||||
<span className="self-center flex-shrink-0 flex items-center">
|
||||
<img
|
||||
src={SourcifyLogo}
|
||||
alt="Sourcify logo"
|
||||
title="Verified by Sourcify"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
<AddressOrENSName
|
||||
address={address}
|
||||
selectedAddress={selectedAddress}
|
||||
|
|
|
@ -14,11 +14,12 @@ import TransactionDirection, {
|
|||
Flags,
|
||||
} from "../components/TransactionDirection";
|
||||
import TransactionValue from "../components/TransactionValue";
|
||||
import { ProcessedTransaction } from "../types";
|
||||
import { ChecksummedAddress, ProcessedTransaction } from "../types";
|
||||
import { FeeDisplay } from "./useFeeToggler";
|
||||
import { formatValue } from "../components/formatter";
|
||||
import ETH2USDValue from "../components/ETH2USDValue";
|
||||
import { ResolvedAddresses } from "../api/address-resolver";
|
||||
import { Metadata } from "../useSourcify";
|
||||
|
||||
type TransactionItemProps = {
|
||||
tx: ProcessedTransaction;
|
||||
|
@ -26,6 +27,9 @@ type TransactionItemProps = {
|
|||
selectedAddress?: string;
|
||||
feeDisplay: FeeDisplay;
|
||||
priceMap: Record<BlockTag, BigNumber>;
|
||||
metadatas?:
|
||||
| Record<ChecksummedAddress, Metadata | null | undefined>
|
||||
| undefined;
|
||||
};
|
||||
|
||||
const TransactionItem: React.FC<TransactionItemProps> = ({
|
||||
|
@ -34,6 +38,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
selectedAddress,
|
||||
feeDisplay,
|
||||
priceMap,
|
||||
metadatas,
|
||||
}) => {
|
||||
let direction: Direction | undefined;
|
||||
if (selectedAddress) {
|
||||
|
@ -105,6 +110,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
selectedAddress={selectedAddress}
|
||||
miner={tx.miner === tx.to}
|
||||
resolvedAddresses={resolvedAddresses}
|
||||
metadata={metadatas?.[tx.to]}
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
) : (
|
||||
|
@ -114,6 +120,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
selectedAddress={selectedAddress}
|
||||
creation
|
||||
resolvedAddresses={resolvedAddresses}
|
||||
metadata={metadatas?.[tx.createdContractAddress!]}
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue