Simplify internal transfer table

This commit is contained in:
Willian Mitsuda 2022-04-06 01:15:40 -03:00
parent c804b19284
commit 9188c04f7d
3 changed files with 60 additions and 47 deletions

View File

@ -1,6 +1,7 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
import TransactionAddress from "./TransactionAddress";
import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink";
@ -15,16 +16,17 @@ const InternalCreate: React.FC<InternalCreateProps> = ({ internalOp }) => (
<span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE
</span>
<span>Contract</span>
<span className="flex items-baseline text-gray-400">
<TransactionAddress address={internalOp.from} showCodeIndicator />
</span>
<span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
<div className="flex items-baseline">
<AddressHighlighter address={internalOp.to}>
<DecoratedAddressLink address={internalOp.to} creation />
</AddressHighlighter>
</div>
<span className="flex items-baseline text-gray-400">
(Creator:{" "}
<TransactionAddress address={internalOp.from} showCodeIndicator />)
</span>
</div>
);

View File

@ -30,7 +30,6 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
<span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> SELF DESTRUCT
</span>
<span>Contract</span>
<div className="flex items-baseline">
<AddressHighlighter address={internalOp.from}>
<DecoratedAddressLink address={internalOp.from} selfDestruct />

View File

@ -2,6 +2,8 @@ import React, { useContext } from "react";
import { formatEther } from "@ethersproject/units";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
import { faSackDollar } from "@fortawesome/free-solid-svg-icons/faSackDollar";
import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink";
import { RuntimeContext } from "../useRuntime";
@ -41,48 +43,58 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
);
return (
<div className="flex items-baseline space-x-1 whitespace-nowrap">
<span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
</span>
<span>
{formatEther(internalOp.value)} {symbol}
</span>
<div className="flex items-baseline">
<span className="text-gray-500">From</span>
<AddressHighlighter address={internalOp.from}>
<div
className={`flex items-baseline space-x-1 ${
fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
}`}
>
<DecoratedAddressLink
address={internalOp.from}
miner={fromMiner}
txFrom={internalOp.from === txData.from}
txTo={internalOp.from === txData.to}
eoa={fromHasCode === undefined ? undefined : !fromHasCode}
/>
<div className="flex items-baseline space-x-1 truncate">
<div className="grid grid-cols-6 gap-x-1 w-full items-baseline">
<div className="col-span-2 flex items-baseline space-x-1">
<span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
</span>
<div className="flex items-baseline truncate">
<AddressHighlighter address={internalOp.from}>
<div
className={`flex items-baseline space-x-1 ${
fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
}`}
>
<DecoratedAddressLink
address={internalOp.from}
miner={fromMiner}
txFrom={internalOp.from === txData.from}
txTo={internalOp.from === txData.to}
eoa={fromHasCode === undefined ? undefined : !fromHasCode}
/>
</div>
</AddressHighlighter>
</div>
</AddressHighlighter>
</div>
<div className="flex items-baseline">
<span className="text-gray-500">To</span>
<AddressHighlighter address={internalOp.to}>
<div
className={`flex items-baseline space-x-1 ${
toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
}`}
>
<DecoratedAddressLink
address={internalOp.to}
miner={toMiner}
txFrom={internalOp.to === txData.from}
txTo={internalOp.to === txData.to}
eoa={toHasCode === undefined ? undefined : !toHasCode}
/>
</div>
</AddressHighlighter>
</div>
<div className="col-span-2 flex items-baseline space-x-1">
<span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
<AddressHighlighter address={internalOp.to}>
<div
className={`flex items-baseline space-x-1 ${
toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
}`}
>
<DecoratedAddressLink
address={internalOp.to}
miner={toMiner}
txFrom={internalOp.to === txData.from}
txTo={internalOp.to === txData.to}
eoa={toHasCode === undefined ? undefined : !toHasCode}
/>
</div>
</AddressHighlighter>
</div>
<div className="col-span-2 flex items-baseline space-x-1">
<span className="text-gray-500">
<FontAwesomeIcon icon={faSackDollar} size="1x" />
</span>
<span>
{formatEther(internalOp.value)} {symbol}
</span>
</div>
</div>
</div>
);