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

Merge branch 'feature/compact-token-section' into develop

This commit is contained in:
Willian Mitsuda 2022-04-06 01:18:41 -03:00
parent fe20885b07 9188c04f7d
commit b67207e8ba
4 changed files with 71 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/TokenTransferItem.tsx
View File

@ -1,6 +1,7 @@
import React from "react"; import React 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 { faSackDollar } from "@fortawesome/free-solid-svg-icons/faSackDollar";
import TransactionAddress from "./components/TransactionAddress"; import TransactionAddress from "./components/TransactionAddress";
import ValueHighlighter from "./components/ValueHighlighter"; import ValueHighlighter from "./components/ValueHighlighter";
import FormattedBalance from "./components/FormattedBalance"; import FormattedBalance from "./components/FormattedBalance";
@ -26,12 +27,8 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
}) => { }) => {
return ( return (
<div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100"> <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
<span className="text-gray-500"> <div className="grid grid-cols-4 gap-x-1 w-full items-baseline">
<FontAwesomeIcon icon={faCaretRight} size="1x" /> <div className="flex items-baseline space-x-1">
</span>
<div className="grid grid-cols-7 gap-x-1 w-full">
<div className="col-span-2 flex space-x-1">
<span className="font-bold">From</span>
<TransactionAddress <TransactionAddress
address={t.from} address={t.from}
addressCtx={AddressContext.FROM} addressCtx={AddressContext.FROM}
@ -39,8 +36,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
showCodeIndicator showCodeIndicator
/> />
</div> </div>
<div className="col-span-2 flex space-x-1"> <div className="flex items-baseline space-x-1">
<span className="font-bold">To</span> <span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
<TransactionAddress <TransactionAddress
address={t.to} address={t.to}
addressCtx={AddressContext.TO} addressCtx={AddressContext.TO}
@ -48,8 +47,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
showCodeIndicator showCodeIndicator
/> />
</div> </div>
<div className="col-span-3 flex space-x-1"> <div className="col-span-2 flex items-baseline space-x-1">
<span className="font-bold">For</span> <span className="text-gray-500">
<FontAwesomeIcon icon={faSackDollar} size="1x" />
</span>
<span> <span>
<ValueHighlighter value={t.value}> <ValueHighlighter value={t.value}>
<FormattedBalance <FormattedBalance

12
src/components/InternalCreate.tsx
View File

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

1
src/components/InternalSelfDestruct.tsx
View File

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

94
src/components/InternalTransfer.tsx
View File

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