83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { ethers } from "ethers";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
|
|
import {
|
||
|
|
faAngleRight,
|
||
|
|
faBomb,
|
||
|
|
faCoins,
|
||
|
|
} from "@fortawesome/free-solid-svg-icons";
|
||
|
|
import AddressHighlighter from "./AddressHighlighter";
|
||
|
|
import AddressLink from "./AddressLink";
|
||
|
|
import { TransactionData, Transfer } from "../types";
|
||
|
|
|
||
|
|
type InternalSelfDestructProps = {
|
||
|
|
txData: TransactionData;
|
||
|
|
transfer: Transfer;
|
||
|
|
};
|
||
|
|
|
||
|
|
const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
|
||
|
|
txData,
|
||
|
|
transfer,
|
||
|
|
}) => {
|
||
|
|
const fromMiner =
|
||
|
|
txData.miner !== undefined && transfer.from === txData.miner;
|
||
|
|
const toMiner = txData.miner !== undefined && transfer.to === txData.miner;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="flex items-baseline space-x-1 text-xs">
|
||
|
|
<span className="text-gray-500">
|
||
|
|
<span className="text-red-900">
|
||
|
|
<FontAwesomeIcon icon={faBomb} size="1x" />
|
||
|
|
</span>{" "}
|
||
|
|
SELF DESTRUCT
|
||
|
|
</span>
|
||
|
|
<span>Contract</span>
|
||
|
|
<div className="flex items-baseline">
|
||
|
|
<AddressHighlighter address={transfer.from}>
|
||
|
|
<div
|
||
|
|
className={`flex items-baseline space-x-1 ${
|
||
|
|
fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{fromMiner && (
|
||
|
|
<span className="text-yellow-400" title="Miner address">
|
||
|
|
<FontAwesomeIcon icon={faCoins} size="1x" />
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<AddressLink address={transfer.from} />
|
||
|
|
</div>
|
||
|
|
</AddressHighlighter>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{!transfer.value.isZero() && (
|
||
|
|
<div className="ml-5 flex items-baseline space-x-1 text-xs">
|
||
|
|
<span className="text-gray-500">
|
||
|
|
<FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
|
||
|
|
</span>
|
||
|
|
<span>{ethers.utils.formatEther(transfer.value)} Ether</span>
|
||
|
|
<div className="flex items-baseline">
|
||
|
|
<span className="text-gray-500">To</span>
|
||
|
|
<AddressHighlighter address={transfer.to}>
|
||
|
|
<div
|
||
|
|
className={`flex items-baseline space-x-1 ${
|
||
|
|
toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{toMiner && (
|
||
|
|
<span className="text-yellow-400" title="Miner address">
|
||
|
|
<FontAwesomeIcon icon={faCoins} size="1x" />
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<AddressLink address={transfer.to} />
|
||
|
|
</div>
|
||
|
|
</AddressHighlighter>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default React.memo(InternalSelfDestruct);
|