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

Merge branch 'feature/contract-creation' into develop

This commit is contained in:
Willian Mitsuda 2021-07-21 19:15:19 -03:00
parent a5fc5e595e 5b630e7757
commit 35374f0e92
14 changed files with 194 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/BlockTransactions.tsx
View File

@ -57,6 +57,7 @@ const BlockTransactions: React.FC = () => {
hash: t.hash,
from: t.from,
to: t.to,
createdContractAddress: _receipts[i].contractAddress,
value: t.value,
fee: provider.formatter
.bigNumber(_receipts[i].gasUsed)

13
src/Transaction.tsx
View File

@ -10,7 +10,7 @@ import erc20 from "./erc20.json";
import { TokenMetas, TokenTransfer, TransactionData } from "./types";
import { RuntimeContext } from "./useRuntime";
import { SelectionContext, useSelection } from "./useSelection";
import { useInternalTransfers } from "./useErigonHooks";
import { useInternalOperations } from "./useErigonHooks";
const TRANSFER_TOPIC =
"0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
@ -88,6 +88,7 @@ const Transaction: React.FC = () => {
miner: _block.miner,
from: _receipt.from,
to: _receipt.to,
createdContractAddress: _receipt.contractAddress,
value: _response.value,
tokenTransfers,
tokenMetas,
@ -105,19 +106,19 @@ const Transaction: React.FC = () => {
readBlock();
}, [provider, txhash]);
const intTransfers = useInternalTransfers(provider, txData);
const internalOps = useInternalOperations(provider, txData);
const sendsEthToMiner = useMemo(() => {
if (!txData || !intTransfers) {
if (!txData || !internalOps) {
return false;
}
for (const t of intTransfers) {
for (const t of internalOps) {
if (t.to === txData.miner) {
return true;
}
}
return false;
}, [txData, intTransfers]);
}, [txData, internalOps]);
const selectionCtx = useSelection();
@ -136,7 +137,7 @@ const Transaction: React.FC = () => {
<Route path="/tx/:txhash/" exact>
<Details
txData={txData}
internalTransfers={intTransfers}
internalOps={internalOps}
sendsEthToMiner={sendsEthToMiner}
/>
</Route>

14
src/components/DecoratedAddressLink.tsx
View File

@ -1,6 +1,8 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faStar,
faBomb,
faMoneyBillAlt,
faBurn,
faCoins,
@ -15,6 +17,7 @@ type DecoratedAddressLinkProps = {
selectedAddress?: string;
text?: string;
addressCtx?: AddressContext;
creation?: boolean;
miner?: boolean;
selfDestruct?: boolean;
txFrom?: boolean;
@ -28,6 +31,7 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
selectedAddress,
text,
addressCtx,
creation,
miner,
selfDestruct,
txFrom,
@ -45,6 +49,16 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
burn ? "line-through text-orange-500 hover:text-orange-700" : ""
} ${selfDestruct ? "line-through opacity-70 hover:opacity-100" : ""}`}
>
{creation && (
<span className="text-yellow-300" title="Contract creation">
<FontAwesomeIcon icon={faStar} size="1x" />
</span>
)}
{selfDestruct && (
<span className="text-red-800" title="Self destruct">
<FontAwesomeIcon icon={faBomb} size="1x" />
</span>
)}
{mint && (
<span className="text-green-500" title="Mint address">
<FontAwesomeIcon icon={faMoneyBillAlt} size="1x" />

45
src/components/InternalCreate.tsx Normal file
View File

@ -0,0 +1,45 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink";
import { TransactionData, InternalOperation } from "../types";
type InternalCreateProps = {
txData: TransactionData;
internalOp: InternalOperation;
};
const InternalCreate: React.FC<InternalCreateProps> = ({
txData,
internalOp,
}) => {
return (
<>
<div className="flex items-baseline space-x-1 text-xs">
<span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE
</span>
<span>Contract</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:{" "}
<AddressHighlighter address={internalOp.from}>
<DecoratedAddressLink
address={internalOp.from}
txFrom={internalOp.from === txData.from}
txTo={internalOp.from === txData.to}
/>
</AddressHighlighter>
)
</span>
</div>
</>
);
};
export default React.memo(InternalCreate);

25
src/components/InternalOperation.tsx
View File

@ -1,25 +0,0 @@
import React from "react";
import InternalTransfer from "./InternalTransfer";
import InternalSelfDestruct from "./InternalSelfDestruct";
import { TransactionData, Transfer, TransferType } from "../types";
type InternalOperationProps = {
txData: TransactionData;
transfer: Transfer;
};
const InternalOperation: React.FC<InternalOperationProps> = ({
txData,
transfer,
}) => (
<>
{transfer.type === TransferType.TRANSFER && (
<InternalTransfer txData={txData} transfer={transfer} />
)}
{transfer.type === TransferType.SELF_DESTRUCT && (
<InternalSelfDestruct txData={txData} transfer={transfer} />
)}
</>
);
export default React.memo(InternalOperation);

31
src/components/InternalSelfDestruct.tsx
View File

@ -1,66 +1,63 @@
import React, { useContext } from "react";
import { ethers } from "ethers";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight, faBomb } from "@fortawesome/free-solid-svg-icons";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink";
import { RuntimeContext } from "../useRuntime";
import { TransactionData, Transfer } from "../types";
import { TransactionData, InternalOperation } from "../types";
const CHI_ADDRESS = "0x0000000000004946c0e9F43F4Dee607b0eF1fA1c";
const GST2_ADDRESS = "0x0000000000b3F879cb30FE243b4Dfee438691c04";
type InternalSelfDestructProps = {
txData: TransactionData;
transfer: Transfer;
internalOp: InternalOperation;
};
const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
txData,
transfer,
internalOp,
}) => {
const { provider } = useContext(RuntimeContext);
const network = provider?.network;
const toMiner = txData.miner !== undefined && transfer.to === txData.miner;
const toMiner = txData.miner !== undefined && internalOp.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
<FontAwesomeIcon icon={faAngleRight} size="1x" /> SELF DESTRUCT
</span>
<span>Contract</span>
<div className="flex items-baseline">
<AddressHighlighter address={transfer.from}>
<DecoratedAddressLink address={transfer.from} selfDestruct />
<AddressHighlighter address={internalOp.from}>
<DecoratedAddressLink address={internalOp.from} selfDestruct />
</AddressHighlighter>
</div>
{network?.chainId === 1 && transfer.to === CHI_ADDRESS && (
{network?.chainId === 1 && internalOp.to === CHI_ADDRESS && (
<span className="text-gray-400">(Chi Gastoken)</span>
)}
{network?.chainId === 1 && transfer.to === GST2_ADDRESS && (
{network?.chainId === 1 && internalOp.to === GST2_ADDRESS && (
<span className="text-gray-400">(GST2 Gastoken)</span>
)}
</div>
{!transfer.value.isZero() && (
{!internalOp.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>
<span>{ethers.utils.formatEther(internalOp.value)} Ether</span>
<div className="flex items-baseline">
<span className="text-gray-500">To</span>
<AddressHighlighter address={transfer.to}>
<AddressHighlighter address={internalOp.to}>
<div
className={`flex items-baseline space-x-1 ${
toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
}`}
>
<DecoratedAddressLink address={transfer.to} miner={toMiner} />
<DecoratedAddressLink address={internalOp.to} miner={toMiner} />
</div>
</AddressHighlighter>
</div>

28
src/components/InternalTransactionOperation.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
import InternalTransfer from "./InternalTransfer";
import InternalSelfDestruct from "./InternalSelfDestruct";
import InternalCreate from "./InternalCreate";
import { TransactionData, InternalOperation, OperationType } from "../types";
type InternalTransactionOperationProps = {
txData: TransactionData;
internalOp: InternalOperation;
};
const InternalTransactionOperation: React.FC<InternalTransactionOperationProps> =
({ txData, internalOp }) => (
<>
{internalOp.type === OperationType.TRANSFER && (
<InternalTransfer txData={txData} internalOp={internalOp} />
)}
{internalOp.type === OperationType.SELF_DESTRUCT && (
<InternalSelfDestruct txData={txData} internalOp={internalOp} />
)}
{(internalOp.type === OperationType.CREATE ||
internalOp.type === OperationType.CREATE2) && (
<InternalCreate txData={txData} internalOp={internalOp} />
)}
</>
);
export default React.memo(InternalTransactionOperation);

28
src/components/InternalTransfer.tsx
View File

@ -4,57 +4,57 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink";
import { TransactionData, Transfer } from "../types";
import { TransactionData, InternalOperation } from "../types";
type InternalTransferProps = {
txData: TransactionData;
transfer: Transfer;
internalOp: InternalOperation;
};
const InternalTransfer: React.FC<InternalTransferProps> = ({
txData,
transfer,
internalOp,
}) => {
const fromMiner =
txData.miner !== undefined && transfer.from === txData.miner;
const toMiner = txData.miner !== undefined && transfer.to === txData.miner;
txData.miner !== undefined && internalOp.from === txData.miner;
const toMiner = txData.miner !== undefined && internalOp.to === txData.miner;
return (
<div className="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>
<span>{ethers.utils.formatEther(internalOp.value)} Ether</span>
<div className="flex items-baseline">
<span className="text-gray-500">From</span>
<AddressHighlighter address={transfer.from}>
<AddressHighlighter address={internalOp.from}>
<div
className={`flex items-baseline space-x-1 ${
fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
}`}
>
<DecoratedAddressLink
address={transfer.from}
address={internalOp.from}
miner={fromMiner}
txFrom={transfer.from === txData.from}
txTo={transfer.from === txData.to}
txFrom={internalOp.from === txData.from}
txTo={internalOp.from === txData.to}
/>
</div>
</AddressHighlighter>
</div>
<div className="flex items-baseline">
<span className="text-gray-500">To</span>
<AddressHighlighter address={transfer.to}>
<AddressHighlighter address={internalOp.to}>
<div
className={`flex items-baseline space-x-1 ${
toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
}`}
>
<DecoratedAddressLink
address={transfer.to}
address={internalOp.to}
miner={toMiner}
txFrom={transfer.to === txData.from}
txTo={transfer.to === txData.to}
txFrom={internalOp.to === txData.from}
txTo={internalOp.to === txData.to}
/>
</div>
</AddressHighlighter>

8
src/nodeFunctions.ts
View File

@ -1,15 +1,15 @@
import { ethers } from "ethers";
import { TransactionData, Transfer } from "./types";
import { TransactionData, InternalOperation } from "./types";
export const getTransactionTransfers = async (
export const getInternalOperations = async (
provider: ethers.providers.JsonRpcProvider,
txData: TransactionData
) => {
const rawTransfers = await provider.send("ots_getTransactionTransfers", [
const rawTransfers = await provider.send("ots_getInternalOperations", [
txData.transactionHash,
]);
const _transfers: Transfer[] = [];
const _transfers: InternalOperation[] = [];
for (const t of rawTransfers) {
_transfers.push({
type: t.type,

20
src/search/TransactionItem.tsx
View File

@ -35,7 +35,10 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
direction = Direction.SELF;
} else if (tx.from === selectedAddress) {
direction = Direction.OUT;
} else if (tx.to === selectedAddress) {
} else if (
tx.to === selectedAddress ||
tx.createdContractAddress === selectedAddress
) {
direction = Direction.IN;
} else {
direction = Direction.INTERNAL;
@ -44,6 +47,10 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
const ensFrom = ensCache && tx.from && ensCache[tx.from];
const ensTo = ensCache && tx.to && ensCache[tx.to];
const ensCreated =
ensCache &&
tx.createdContractAddress &&
ensCache[tx.createdContractAddress];
const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction;
return (
@ -89,7 +96,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
</span>
<span className="col-span-2 flex items-baseline" title={tx.to}>
<span className="truncate">
{tx.to && (
{tx.to ? (
<AddressHighlighter address={tx.to}>
<DecoratedAddressLink
address={tx.to}
@ -98,6 +105,15 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
miner={tx.miner === tx.to}
/>
</AddressHighlighter>
) : (
<AddressHighlighter address={tx.createdContractAddress!}>
<DecoratedAddressLink
address={tx.createdContractAddress!}
ensName={ensCreated}
selectedAddress={selectedAddress}
creation
/>
</AddressHighlighter>
)}
</span>
</span>

1
src/search/search.ts
View File

@ -45,6 +45,7 @@ export class SearchController {
hash: t.hash,
from: t.from,
to: t.to,
createdContractAddress: _receipt.contractAddress,
value: t.value,
fee: _receipt.gasUsed.mul(t.gasPrice!),
gasPrice: t.gasPrice!,

53
src/transaction/Details.tsx
View File

@ -12,22 +12,22 @@ import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
import Copy from "../components/Copy";
import Timestamp from "../components/Timestamp";
import InternalOperation from "../components/InternalOperation";
import InternalTransactionOperation from "../components/InternalTransactionOperation";
import MethodName from "../components/MethodName";
import GasValue from "../components/GasValue";
import FormattedBalance from "../components/FormattedBalance";
import TokenTransferItem from "../TokenTransferItem";
import { TransactionData, Transfer } from "../types";
import { TransactionData, InternalOperation } from "../types";
type DetailsProps = {
txData: TransactionData;
internalTransfers?: Transfer[];
internalOps?: InternalOperation[];
sendsEthToMiner: boolean;
};
const Details: React.FC<DetailsProps> = ({
txData,
internalTransfers,
internalOps,
sendsEthToMiner,
}) => (
<ContentFrame tabs>
@ -73,21 +73,38 @@ const Details: React.FC<DetailsProps> = ({
<Copy value={txData.from} />
</div>
</InfoRow>
<InfoRow title="Interacted With (To)">
<div className="flex items-baseline space-x-2 -ml-1">
<AddressHighlighter address={txData.to}>
<DecoratedAddressLink
address={txData.to}
miner={txData.to === txData.miner}
txTo
/>
</AddressHighlighter>
<Copy value={txData.to} />
</div>
{internalTransfers && (
<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
address={txData.to}
miner={txData.to === txData.miner}
txTo
/>
</AddressHighlighter>
<Copy value={txData.to} />
</div>
) : (
<div className="flex items-baseline space-x-2 -ml-1">
<AddressHighlighter address={txData.createdContractAddress!}>
<DecoratedAddressLink
address={txData.createdContractAddress!}
creation
txTo
/>
</AddressHighlighter>
<Copy value={txData.createdContractAddress!} />
</div>
)}
{internalOps && (
<div className="mt-2 space-y-1">
{internalTransfers.map((t, i) => (
<InternalOperation key={i} txData={txData} transfer={t} />
{internalOps.map((op, i) => (
<InternalTransactionOperation
key={i}
txData={txData}
internalOp={op}
/>
))}
</div>
)}

10
src/types.ts
View File

@ -16,6 +16,7 @@ export type ProcessedTransaction = {
hash: string;
from?: string;
to?: string;
createdContractAddress?: string;
internalMinerInteraction?: boolean;
value: BigNumber;
fee: BigNumber;
@ -44,6 +45,7 @@ export type TransactionData = {
miner?: string;
from: string;
to: string;
createdContractAddress?: string;
value: BigNumber;
tokenTransfers: TokenTransfer[];
tokenMetas: TokenMetas;
@ -70,13 +72,15 @@ export type From = {
depth: number;
};
export enum TransferType {
export enum OperationType {
TRANSFER = 0,
SELF_DESTRUCT = 1,
CREATE = 2,
CREATE2 = 3,
}
export type Transfer = {
type: TransferType;
export type InternalOperation = {
type: OperationType;
from: string;
to: string;
value: BigNumber;

12
src/useErigonHooks.ts
View File

@ -1,13 +1,13 @@
import { ethers } from "ethers";
import { useState, useEffect } from "react";
import { getTransactionTransfers } from "./nodeFunctions";
import { TransactionData, Transfer } from "./types";
import { getInternalOperations } from "./nodeFunctions";
import { TransactionData, InternalOperation } from "./types";
export const useInternalTransfers = (
export const useInternalOperations = (
provider: ethers.providers.JsonRpcProvider | undefined,
txData: TransactionData | undefined
): Transfer[] | undefined => {
const [intTransfers, setIntTransfers] = useState<Transfer[]>();
): InternalOperation[] | undefined => {
const [intTransfers, setIntTransfers] = useState<InternalOperation[]>();
useEffect(() => {
const traceTransfers = async () => {
@ -15,7 +15,7 @@ export const useInternalTransfers = (
return;
}
const _transfers = await getTransactionTransfers(provider, txData);
const _transfers = await getInternalOperations(provider, txData);
for (const t of _transfers) {
t.from = provider.formatter.address(t.from);
t.to = provider.formatter.address(t.to);