a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/transaction-context' into develop

This commit is contained in:
Willian Mitsuda 2021-11-07 08:58:00 -03:00
parent e2ba28b64e 128c70b972
commit c63a25ad6d
8 changed files with 136 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/TokenTransferItem.tsx
View File

@ -1,9 +1,8 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
import AddressHighlighter from "./components/AddressHighlighter";
import TransactionAddress from "./components/TransactionAddress";
import ValueHighlighter from "./components/ValueHighlighter";
import DecoratedAddressLink from "./components/DecoratedAddressLink";
import FormattedBalance from "./components/FormattedBalance";
import {
AddressContext,
@ -34,27 +33,19 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
<div className="grid grid-cols-5 gap-x-1">
<div className="flex space-x-1">
<span className="font-bold">From</span>
<AddressHighlighter address={t.from}>
<DecoratedAddressLink
<TransactionAddress
address={t.from}
addressCtx={AddressContext.FROM}
txFrom={t.from === txData.from}
txTo={t.from === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
</div>
<div className="flex space-x-1">
<span className="font-bold">To</span>
<AddressHighlighter address={t.to}>
<DecoratedAddressLink
<TransactionAddress
address={t.to}
addressCtx={AddressContext.TO}
txFrom={t.to === txData.from}
txTo={t.to === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
</div>
<div className="col-span-3 flex space-x-1">
<span className="font-bold">For</span>
@ -66,12 +57,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
/>
</ValueHighlighter>
</span>
<AddressHighlighter address={t.token}>
<DecoratedAddressLink
<TransactionAddress
address={t.token}
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
</div>
</div>
</div>

3
src/Transaction.tsx
View File

@ -15,6 +15,7 @@ import {
transactionDataCollector,
useResolvedAddresses,
} from "./useResolvedAddresses";
import { SelectedTransactionContext } from "./useSelectedTransaction";
const Details = React.lazy(
() =>
@ -76,6 +77,7 @@ const Transaction: React.FC = () => {
const txDesc = useTransactionDescription(metadata, txData);
return (
<SelectedTransactionContext.Provider value={txData}>
<StandardFrame>
<StandardSubtitle>Transaction Details</StandardSubtitle>
{txData === null && (
@ -124,6 +126,7 @@ const Transaction: React.FC = () => {
</SelectionContext.Provider>
)}
</StandardFrame>
</SelectedTransactionContext.Provider>
);
};

38
src/components/TransactionAddress.tsx Normal file
View File

@ -0,0 +1,38 @@
import React from "react";
import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink";
import { ResolvedAddresses } from "../api/address-resolver";
import { useSelectedTransaction } from "../useSelectedTransaction";
import { AddressContext } from "../types";
type TransactionAddressProps = {
address: string;
addressCtx?: AddressContext | undefined;
resolvedAddresses: ResolvedAddresses | undefined;
};
const TransactionAddress: React.FC<TransactionAddressProps> = ({
address,
addressCtx,
resolvedAddresses,
}) => {
const txData = useSelectedTransaction();
// TODO: push down creation coloring logic into DecoratedAddressLink
const creation = address === txData?.confirmedData?.createdContractAddress;
return (
<AddressHighlighter address={address}>
<DecoratedAddressLink
address={address}
addressCtx={addressCtx}
miner={address === txData?.confirmedData?.miner}
txFrom={address === txData?.from}
txTo={address === txData?.to || creation}
creation={creation}
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
);
};
export default TransactionAddress;

23
src/transaction/Details.tsx
View File

@ -15,8 +15,7 @@ import ContentFrame from "../ContentFrame";
import InfoRow from "../components/InfoRow";
import BlockLink from "../components/BlockLink";
import BlockConfirmations from "../components/BlockConfirmations";
import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
import TransactionAddress from "../components/TransactionAddress";
import Copy from "../components/Copy";
import Nonce from "../components/Nonce";
import Timestamp from "../components/Timestamp";
@ -152,14 +151,10 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title="From / Nonce">
<div className="flex divide-x-2 divide-dotted divide-gray-300">
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
<AddressHighlighter address={txData.from}>
<DecoratedAddressLink
<TransactionAddress
address={txData.from}
miner={txData.from === txData.confirmedData?.miner}
txFrom
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
<Copy value={txData.from} />
</div>
<div className="flex items-baseline pl-3">
@ -170,14 +165,10 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}>
{txData.to ? (
<div className="flex items-baseline space-x-2 -ml-1">
<AddressHighlighter address={txData.to}>
<DecoratedAddressLink
<TransactionAddress
address={txData.to}
miner={txData.to === txData.confirmedData?.miner}
txTo
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
<Copy value={txData.to} />
</div>
) : txData.confirmedData === undefined ? (
@ -186,16 +177,10 @@ const Details: React.FC<DetailsProps> = ({
</span>
) : (
<div className="flex items-baseline space-x-2 -ml-1">
<AddressHighlighter
<TransactionAddress
address={txData.confirmedData?.createdContractAddress!}
>
<DecoratedAddressLink
address={txData.confirmedData.createdContractAddress!}
creation
txTo
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
<Copy value={txData.confirmedData.createdContractAddress!} />
</div>
)}

10
src/transaction/LogEntry.tsx
View File

@ -2,8 +2,7 @@ import React, { useMemo } from "react";
import { Log } from "@ethersproject/abstract-provider";
import { Fragment, Interface, LogDescription } from "@ethersproject/abi";
import { Tab } from "@headlessui/react";
import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
import TransactionAddress from "../components/TransactionAddress";
import Copy from "../components/Copy";
import ModeTab from "../components/ModeTab";
import DecodedParamsTable from "./decoder/DecodedParamsTable";
@ -63,15 +62,10 @@ const LogEntry: React.FC<LogEntryProps> = ({
<div className="font-bold text-right">Address</div>
<div className="col-span-11 mr-auto">
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
<AddressHighlighter address={log.address}>
<DecoratedAddressLink
<TransactionAddress
address={log.address}
miner={log.address === txData.confirmedData?.miner}
txFrom={log.address === txData.from}
txTo={log.address === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
<Copy value={log.address} />
</div>
</div>

13
src/transaction/decoder/AddressDecoder.tsx
View File

@ -1,31 +1,22 @@
import React from "react";
import AddressHighlighter from "../../components/AddressHighlighter";
import DecoratedAddressLink from "../../components/DecoratedAddressLink";
import Copy from "../../components/Copy";
import { TransactionData } from "../../types";
import { ResolvedAddresses } from "../../api/address-resolver";
import TransactionAddress from "../../components/TransactionAddress";
type AddressDecoderProps = {
r: any;
txData: TransactionData;
resolvedAddresses?: ResolvedAddresses | undefined;
};
const AddressDecoder: React.FC<AddressDecoderProps> = ({
r,
txData,
resolvedAddresses,
}) => (
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
<AddressHighlighter address={r.toString()}>
<DecoratedAddressLink
<TransactionAddress
address={r.toString()}
miner={r.toString() === txData.confirmedData?.miner}
txFrom={r.toString() === txData.from}
txTo={r.toString() === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
<Copy value={r.toString()} />
</div>
);

6
src/transaction/decoder/DecodedParamRow.tsx
View File

@ -75,11 +75,7 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
{paramType.baseType === "uint256" ? (
<Uint256Decoder r={r} />
) : paramType.baseType === "address" ? (
<AddressDecoder
r={r}
txData={txData}
resolvedAddresses={resolvedAddresses}
/>
<AddressDecoder r={r} resolvedAddresses={resolvedAddresses} />
) : paramType.baseType === "bool" ? (
<BooleanDecoder r={r} />
) : paramType.baseType === "bytes" ? (

9
src/useSelectedTransaction.ts Normal file
View File

@ -0,0 +1,9 @@
import { createContext, useContext } from "react";
import { TransactionData } from "./types";
export const SelectedTransactionContext = createContext<
TransactionData | null | undefined
>(undefined);
export const useSelectedTransaction = () =>
useContext(SelectedTransactionContext);