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

Extract DecodedParamRow component

This commit is contained in:
Willian Mitsuda 2021-09-18 18:18:38 -03:00
parent 0179b40eaf
commit f2d6bc54a9
2 changed files with 71 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/transaction/DecodedParamRow.tsx Normal file
View File

@ -0,0 +1,63 @@
import React from "react";
import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
import Copy from "../components/Copy";
import { ParamType } from "@ethersproject/abi";
import { TransactionData } from "../types";
type DecodedParamRowProps = {
i?: number | undefined;
r: any;
paramType: ParamType;
txData: TransactionData;
};
const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
i,
r,
paramType,
txData,
}) => {
return (
<tr className="grid grid-cols-12 gap-x-2 py-2">
<td className="col-span-3 pl-1">
{paramType.name}{" "}
{i !== undefined && (
<span className="text-gray-400 text-xs">({i})</span>
)}
</td>
<td className="col-span-1">{paramType.type}</td>
<td className="col-span-8 pr-1 font-code break-all">
{paramType.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>
) : paramType.type === "bool" ? (
<span className={`${r ? "text-green-700" : "text-red-700"}`}>
{r.toString()}
</span>
) : paramType.type === "bytes" ? (
<span>
{r.toString()}{" "}
<span className="font-sans text-xs text-gray-400">
{r.toString().length / 2 - 1}{" "}
{r.toString().length / 2 - 1 === 1 ? "byte" : "bytes"}
</span>
</span>
) : (
r.toString()
)}
</td>
</tr>
);
};
export default React.memo(DecodedParamRow);

47
src/transaction/DecodedParamsTable.tsx
View File

@ -1,8 +1,6 @@
import React from "react";
import { ParamType, Result } from "@ethersproject/abi";
import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
import Copy from "../components/Copy";
import DecodedParamRow from "./DecodedParamRow";
import { TransactionData } from "../types";
type DecodedParamsTableProps = {
@ -28,42 +26,13 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
</thead>
<tbody className="divide-y">
{args.map((r, i) => (
<tr key={i} className="grid grid-cols-12 gap-x-2 py-2">
<td className="col-span-3 pl-1">
{paramTypes[i].name}{" "}
<span className="text-gray-400 text-xs">({i})</span>
</td>
<td className="col-span-1">{paramTypes[i].type}</td>
<td className="col-span-8 pr-1 font-code break-all">
{paramTypes[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>
) : paramTypes[i].type === "bool" ? (
<span className={`${r ? "text-green-700" : "text-red-700"}`}>
{r.toString()}
</span>
) : paramTypes[i].type === "bytes" ? (
<span>
{r.toString()}{" "}
<span className="font-sans text-xs text-gray-400">
{r.toString().length / 2 - 1}{" "}
{r.toString().length / 2 - 1 === 1 ? "byte" : "bytes"}
</span>
</span>
) : (
r.toString()
)}
</td>
</tr>
<DecodedParamRow
key={i}
i={i}
r={r}
paramType={paramTypes[i]}
txData={txData}
/>
))}
</tbody>
</table>