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

Apply miner icon directly on AddressOrENSName component

Browse Source
This commit is contained in:
Willian Mitsuda 2021-07-05 20:55:07 -03:00
parent 24ae87a092
commit ac38942933
4 changed files with 57 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Block.tsx
View File

@ -14,7 +14,7 @@ import NavButton from "./components/NavButton";
import Timestamp from "./components/Timestamp"; import Timestamp from "./components/Timestamp";
import GasValue from "./components/GasValue"; import GasValue from "./components/GasValue";
import BlockLink from "./components/BlockLink"; import BlockLink from "./components/BlockLink";
import AddressLink from "./components/AddressLink"; import AddressOrENSName from "./components/AddressOrENSName";
import TransactionValue from "./components/TransactionValue"; import TransactionValue from "./components/TransactionValue";
import HexValue from "./components/HexValue"; import HexValue from "./components/HexValue";
import { useLatestBlockNumber } from "./useLatestBlock"; import { useLatestBlockNumber } from "./useLatestBlock";
@ -154,9 +154,10 @@ const Block: React.FC = () => {
in this block in this block
</InfoRow> </InfoRow>
<InfoRow title="Mined by"> <InfoRow title="Mined by">
<div className="flex"> <AddressOrENSName
<AddressLink address={block.miner} /> address={block.miner}
</div> minerAddress={block.miner}
/>
</InfoRow> </InfoRow>
<InfoRow title="Block Reward"> <InfoRow title="Block Reward">
<TransactionValue value={block.blockReward.add(block.feeReward)} /> <TransactionValue value={block.blockReward.add(block.feeReward)} />

17
src/Transaction.tsx
View File

@ -13,6 +13,7 @@ import StandardSubtitle from "./StandardSubtitle";
import Tab from "./components/Tab"; import Tab from "./components/Tab";
import ContentFrame from "./ContentFrame"; import ContentFrame from "./ContentFrame";
import BlockLink from "./components/BlockLink"; import BlockLink from "./components/BlockLink";
import AddressOrENSName from "./components/AddressOrENSName";
import AddressLink from "./components/AddressLink"; import AddressLink from "./components/AddressLink";
import Copy from "./components/Copy"; import Copy from "./components/Copy";
import Timestamp from "./components/Timestamp"; import Timestamp from "./components/Timestamp";
@ -194,13 +195,19 @@ const Transaction: React.FC = () => {
</InfoRow> </InfoRow>
<InfoRow title="From"> <InfoRow title="From">
<div className="flex items-baseline space-x-2"> <div className="flex items-baseline space-x-2">
<AddressLink address={txData.from} /> <AddressOrENSName
address={txData.from}
minerAddress={txData.miner}
/>
<Copy value={txData.from} /> <Copy value={txData.from} />
</div> </div>
</InfoRow> </InfoRow>
<InfoRow title="Interacted With (To)"> <InfoRow title="Interacted With (To)">
<div className="flex items-baseline space-x-2"> <div className="flex items-baseline space-x-2">
<AddressLink address={txData.to} /> <AddressOrENSName
address={txData.to}
minerAddress={txData.miner}
/>
<Copy value={txData.to} /> <Copy value={txData.to} />
</div> </div>
{transfers && ( {transfers && (
@ -284,7 +291,11 @@ const Transaction: React.FC = () => {
/>{" "} />{" "}
Gwei) Gwei)
</span> </span>
{sendsEthToMiner && <span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">Flashbots</span>} {sendsEthToMiner && (
<span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">
Flashbots
</span>
)}
</div> </div>
</InfoRow> </InfoRow>
<InfoRow title="Ether Price">N/A</InfoRow> <InfoRow title="Ether Price">N/A</InfoRow>

49
src/components/AddressOrENSName.tsx
View File

@ -1,4 +1,6 @@
import React from "react"; import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoins } from "@fortawesome/free-solid-svg-icons";
import Address from "./Address"; import Address from "./Address";
import AddressLink from "./AddressLink"; import AddressLink from "./AddressLink";
import ENSName from "./ENSName"; import ENSName from "./ENSName";
@ -8,30 +10,39 @@ type AddressOrENSNameProps = {
address: string; address: string;
ensName?: string; ensName?: string;
selectedAddress?: string; selectedAddress?: string;
minerAddress?: string;
}; };
const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
address, address,
ensName, ensName,
selectedAddress, selectedAddress,
}) => { minerAddress,
return address === selectedAddress ? ( }) => (
<> <div className="flex items-baseline space-x-1">
{ensName ? ( {minerAddress !== undefined && minerAddress === address && (
<ENSName name={ensName} address={address} /> <span className="text-yellow-400" title="Miner address">
) : ( <FontAwesomeIcon icon={faCoins} size="1x" />
<Address address={address} /> </span>
)} )}
</> {address === selectedAddress ? (
) : ( <>
<> {ensName ? (
{ensName ? ( <ENSName name={ensName} address={address} />
<ENSNameLink name={ensName} address={address} /> ) : (
) : ( <Address address={address} />
<AddressLink address={address} /> )}
)} </>
</> ) : (
); <>
}; {ensName ? (
<ENSNameLink name={ensName} address={address} />
) : (
<AddressLink address={address} />
)}
</>
)}
</div>
);
export default React.memo(AddressOrENSName); export default React.memo(AddressOrENSName);

24
src/search/TransactionItem.tsx
View File

@ -1,9 +1,6 @@
import React from "react"; import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
faExclamationCircle,
faCoins,
} from "@fortawesome/free-solid-svg-icons";
import MethodName from "../components/MethodName"; import MethodName from "../components/MethodName";
import BlockLink from "../components/BlockLink"; import BlockLink from "../components/BlockLink";
import TransactionLink from "../components/TransactionLink"; import TransactionLink from "../components/TransactionLink";
@ -72,18 +69,12 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
<span className="col-span-2 flex justify-between items-baseline space-x-2 pr-2"> <span className="col-span-2 flex justify-between items-baseline space-x-2 pr-2">
<span className="truncate" title={tx.from}> <span className="truncate" title={tx.from}>
{tx.from && ( {tx.from && (
<div className="flex items-baseline space-x-1"> <AddressOrENSName
{tx.miner && tx.miner === tx.from && ( address={tx.from}
<span className="text-yellow-400" title="Miner address"> ensName={ensFrom}
<FontAwesomeIcon icon={faCoins} size="1x" /> selectedAddress={selectedAddress}
</span> minerAddress={tx.miner}
)} />
<AddressOrENSName
address={tx.from}
ensName={ensFrom}
selectedAddress={selectedAddress}
/>
</div>
)} )}
</span> </span>
<span> <span>
@ -99,6 +90,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
address={tx.to} address={tx.to}
ensName={ensTo} ensName={ensTo}
selectedAddress={selectedAddress} selectedAddress={selectedAddress}
minerAddress={tx.miner}
/> />
)} )}
</span> </span>