Add Sourcify decoration support to AddressTransactions page

This commit is contained in:
Willian Mitsuda 2021-11-10 05:45:46 -03:00
parent fe8be2ee21
commit dca72a13b4
3 changed files with 39 additions and 2 deletions

View File

@ -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">

View File

@ -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}

View File

@ -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>
)}