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

Add eoa/contract legend support to token transfers section

This commit is contained in:
Willian Mitsuda 2022-03-02 06:29:59 -03:00
parent 716ec73478
commit 52a2f01342
2 changed files with 58 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/TokenTransferItem.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useContext } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight"; import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
import TransactionAddress from "./components/TransactionAddress"; import TransactionAddress from "./components/TransactionAddress";
@ -9,13 +9,17 @@ import {
ChecksummedAddress, ChecksummedAddress,
TokenMeta, TokenMeta,
TokenTransfer, TokenTransfer,
TransactionData,
} from "./types"; } from "./types";
import { RuntimeContext } from "./useRuntime";
import { useHasCode } from "./useErigonHooks";
import { Metadata } from "./sourcify/useSourcify"; import { Metadata } from "./sourcify/useSourcify";
type TokenTransferItemProps = { type TokenTransferItemProps = {
t: TokenTransfer; t: TokenTransfer;
tokenMeta?: TokenMeta | null | undefined; tokenMeta?: TokenMeta | null | undefined;
metadatas: Record<ChecksummedAddress, Metadata | null | undefined>; metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
txData: TransactionData;
}; };
// TODO: handle partial // TODO: handle partial
@ -23,42 +27,59 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
t, t,
tokenMeta, tokenMeta,
metadatas, metadatas,
}) => ( txData,
<div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100"> }) => {
<span className="text-gray-500"> const { provider } = useContext(RuntimeContext);
<FontAwesomeIcon icon={faCaretRight} size="1x" /> const fromHasCode = useHasCode(
</span> provider,
<div className="grid grid-cols-7 gap-x-1 w-full"> t.from,
<div className="col-span-2 flex space-x-1"> txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
<span className="font-bold">From</span> );
<TransactionAddress const toHasCode = useHasCode(
address={t.from} provider,
addressCtx={AddressContext.FROM} t.to,
metadata={metadatas[t.from]} txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
/> );
</div>
<div className="col-span-2 flex space-x-1"> return (
<span className="font-bold">To</span> <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
<TransactionAddress <span className="text-gray-500">
address={t.to} <FontAwesomeIcon icon={faCaretRight} size="1x" />
addressCtx={AddressContext.TO} </span>
metadata={metadatas[t.to]} <div className="grid grid-cols-7 gap-x-1 w-full">
/> <div className="col-span-2 flex space-x-1">
</div> <span className="font-bold">From</span>
<div className="col-span-3 flex space-x-1"> <TransactionAddress
<span className="font-bold">For</span> address={t.from}
<span> addressCtx={AddressContext.FROM}
<ValueHighlighter value={t.value}> metadata={metadatas[t.from]}
<FormattedBalance eoa={fromHasCode === undefined ? undefined : !fromHasCode}
value={t.value} />
decimals={tokenMeta?.decimals ?? 0} </div>
/> <div className="col-span-2 flex space-x-1">
</ValueHighlighter> <span className="font-bold">To</span>
</span> <TransactionAddress
<TransactionAddress address={t.token} metadata={metadatas[t.token]} /> address={t.to}
addressCtx={AddressContext.TO}
metadata={metadatas[t.to]}
eoa={toHasCode === undefined ? undefined : !toHasCode}
/>
</div>
<div className="col-span-3 flex space-x-1">
<span className="font-bold">For</span>
<span>
<ValueHighlighter value={t.value}>
<FormattedBalance
value={t.value}
decimals={tokenMeta?.decimals ?? 0}
/>
</ValueHighlighter>
</span>
<TransactionAddress address={t.token} metadata={metadatas[t.token]} />
</div>
</div> </div>
</div> </div>
</div> );
); };
export default React.memo(TokenTransferItem); export default React.memo(TokenTransferItem);

1
src/transaction/Details.tsx
View File

@ -314,6 +314,7 @@ const Details: React.FC<DetailsProps> = ({
t={t} t={t}
tokenMeta={txData.tokenMetas[t.token]} tokenMeta={txData.tokenMetas[t.token]}
metadatas={metadatas} metadatas={metadatas}
txData={txData}
/> />
))} ))}
</InfoRow> </InfoRow>