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

Add semantic highlight to address input/log params

This commit is contained in:
Willian Mitsuda 2021-09-18 16:10:47 -03:00
parent c7c9f38617
commit 1ac2679fad
4 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/transaction/DecodedInput.tsx
View File

@ -1,12 +1,17 @@
import React from "react";
import { TransactionDescription } from "@ethersproject/abi";
import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
import Copy from "../components/Copy";
import { TransactionData } from "../types";
type DecodedInputProps = {
txData: TransactionData;
txDesc: TransactionDescription;
};
const DecodedInput: React.FC<DecodedInputProps> = ({ txDesc }) => (
<table className="border rounded">
const DecodedInput: React.FC<DecodedInputProps> = ({ txData, txDesc }) => (
<table className="border rounded w-full">
<thead>
<tr className="grid grid-cols-12 text-left gap-x-2 py-2 bg-gray-100">
<th className="col-span-3 pl-1">
@ -27,7 +32,21 @@ const DecodedInput: React.FC<DecodedInputProps> = ({ txDesc }) => (
{txDesc.functionFragment.inputs[i].type}
</td>
<td className="col-span-8 pr-1 font-code break-all">
{r.toString()}
{txDesc.functionFragment.inputs[i].type === "address" ? (
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
<AddressHighlighter address={r.toString()}>
<DecoratedAddressLink
address={r.toString()}
miner={r.toString() === txData.confirmedData?.miner}
txFrom={r.toString() === txData.from}
txTo={r.toString() === txData.to}
/>
</AddressHighlighter>
<Copy value={r.toString()} />
</div>
) : (
r.toString()
)}
</td>
</tr>
))}

25
src/transaction/DecodedLog.tsx
View File

@ -1,12 +1,17 @@
import React from "react";
import { LogDescription } from "@ethersproject/abi";
import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
import Copy from "../components/Copy";
import { TransactionData } from "../types";
type DecodedLogProps = {
txData: TransactionData;
logDesc: LogDescription;
};
const DecodedLog: React.FC<DecodedLogProps> = ({ logDesc }) => (
<table className="border rounded">
const DecodedLog: React.FC<DecodedLogProps> = ({ txData, logDesc }) => (
<table className="border rounded w-full">
<thead>
<tr className="grid grid-cols-12 text-left gap-x-2 py-2 bg-gray-100">
<th className="col-span-3 pl-1">
@ -25,7 +30,21 @@ const DecodedLog: React.FC<DecodedLogProps> = ({ logDesc }) => (
</td>
<td className="col-span-1">{logDesc.eventFragment.inputs[i].type}</td>
<td className="col-span-8 pr-1 font-code break-all">
{r.toString()}
{logDesc.eventFragment.inputs[i].type === "address" ? (
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
<AddressHighlighter address={r.toString()}>
<DecoratedAddressLink
address={r.toString()}
miner={r.toString() === txData.confirmedData?.miner}
txFrom={r.toString() === txData.from}
txTo={r.toString() === txData.to}
/>
</AddressHighlighter>
<Copy value={r.toString()} />
</div>
) : (
r.toString()
)}
</td>
</tr>
))}

2
src/transaction/Details.tsx
View File

@ -327,7 +327,7 @@ const Details: React.FC<DetailsProps> = ({
) : txDesc === null ? (
<>No decoded data</>
) : (
<DecodedInput txDesc={txDesc} />
<DecodedInput txData={txData} txDesc={txDesc} />
)}
</Tab.Panel>
<Tab.Panel>

2
src/transaction/LogEntry.tsx
View File

@ -53,7 +53,7 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<div className="text-right">Name</div>
<div className="flex space-x-2 items-center col-span-11">
<DecodedLog logDesc={logDesc} />
<DecodedLog txData={txData} logDesc={logDesc} />
</div>
</div>
</>