Add contextual global tx from/to addresss highlighting

This commit is contained in:
Willian Mitsuda 2021-07-19 13:29:49 -03:00
parent 26a8e5bea2
commit 00cc2d0d29
5 changed files with 46 additions and 11 deletions

View File

@ -5,15 +5,22 @@ import AddressHighlighter from "./components/AddressHighlighter";
import DecoratedAddressLink from "./components/DecoratedAddressLink"; import DecoratedAddressLink from "./components/DecoratedAddressLink";
import TokenLogo from "./components/TokenLogo"; import TokenLogo from "./components/TokenLogo";
import FormattedBalance from "./components/FormattedBalance"; import FormattedBalance from "./components/FormattedBalance";
import { AddressContext, TokenMetas, TokenTransfer } from "./types"; import {
AddressContext,
TokenMetas,
TokenTransfer,
TransactionData,
} from "./types";
type TokenTransferItemProps = { type TokenTransferItemProps = {
t: TokenTransfer; t: TokenTransfer;
txData: TransactionData;
tokenMetas: TokenMetas; tokenMetas: TokenMetas;
}; };
const TokenTransferItem: React.FC<TokenTransferItemProps> = ({ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
t, t,
txData,
tokenMetas, tokenMetas,
}) => ( }) => (
<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">
@ -27,13 +34,20 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
<DecoratedAddressLink <DecoratedAddressLink
address={t.from} address={t.from}
addressCtx={AddressContext.FROM} addressCtx={AddressContext.FROM}
txFrom={t.from === txData.from}
txTo={t.from === txData.to}
/> />
</AddressHighlighter> </AddressHighlighter>
</div> </div>
<div className="flex space-x-1"> <div className="flex space-x-1">
<span className="font-bold">To</span> <span className="font-bold">To</span>
<AddressHighlighter address={t.to}> <AddressHighlighter address={t.to}>
<DecoratedAddressLink address={t.to} addressCtx={AddressContext.TO} /> <DecoratedAddressLink
address={t.to}
addressCtx={AddressContext.TO}
txFrom={t.to === txData.from}
txTo={t.to === txData.to}
/>
</AddressHighlighter> </AddressHighlighter>
</div> </div>
<div className="col-span-3 flex space-x-1"> <div className="col-span-3 flex space-x-1">

View File

@ -16,6 +16,8 @@ type DecoratedAddressLinkProps = {
addressCtx?: AddressContext; addressCtx?: AddressContext;
miner?: boolean; miner?: boolean;
selfDestruct?: boolean; selfDestruct?: boolean;
txFrom?: boolean;
txTo?: boolean;
}; };
const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
@ -26,17 +28,19 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
addressCtx, addressCtx,
miner, miner,
selfDestruct, selfDestruct,
txFrom,
txTo,
}) => { }) => {
const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS; const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS; const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
return ( return (
<div <div
className={`flex items-baseline space-x-1 ${ className={`flex items-baseline space-x-1 ${txFrom ? "bg-red-50" : ""} ${
mint ? "italic text-green-500 hover:text-green-700" : "" txTo ? "bg-green-50" : ""
} ${burn ? "line-through text-orange-500 hover:text-orange-700" : ""} ${ } ${mint ? "italic text-green-500 hover:text-green-700" : ""} ${
selfDestruct ? "line-through opacity-70 hover:opacity-100" : "" burn ? "line-through text-orange-500 hover:text-orange-700" : ""
}`} } ${selfDestruct ? "line-through opacity-70 hover:opacity-100" : ""}`}
> >
{mint && ( {mint && (
<span className="text-green-500" title="Mint address"> <span className="text-green-500" title="Mint address">

View File

@ -33,7 +33,12 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
fromMiner ? "rounded px-2 py-1 bg-yellow-100" : "" fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
}`} }`}
> >
<DecoratedAddressLink address={transfer.from} miner={fromMiner} /> <DecoratedAddressLink
address={transfer.from}
miner={fromMiner}
txFrom={transfer.from === txData.from}
txTo={transfer.from === txData.to}
/>
</div> </div>
</AddressHighlighter> </AddressHighlighter>
</div> </div>
@ -45,7 +50,12 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
toMiner ? "rounded px-2 py-1 bg-yellow-100" : "" toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
}`} }`}
> >
<DecoratedAddressLink address={transfer.to} miner={toMiner} /> <DecoratedAddressLink
address={transfer.to}
miner={toMiner}
txFrom={transfer.to === txData.from}
txTo={transfer.to === txData.to}
/>
</div> </div>
</AddressHighlighter> </AddressHighlighter>
</div> </div>

View File

@ -68,6 +68,7 @@ const Details: React.FC<DetailsProps> = ({
<DecoratedAddressLink <DecoratedAddressLink
address={txData.from} address={txData.from}
miner={txData.from === txData.miner} miner={txData.from === txData.miner}
txFrom
/> />
</AddressHighlighter> </AddressHighlighter>
<Copy value={txData.from} /> <Copy value={txData.from} />
@ -79,6 +80,7 @@ const Details: React.FC<DetailsProps> = ({
<DecoratedAddressLink <DecoratedAddressLink
address={txData.to} address={txData.to}
miner={txData.to === txData.miner} miner={txData.to === txData.miner}
txTo
/> />
</AddressHighlighter> </AddressHighlighter>
<Copy value={txData.to} /> <Copy value={txData.to} />
@ -101,7 +103,12 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}> <InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}>
<div> <div>
{txData.tokenTransfers.map((t, i) => ( {txData.tokenTransfers.map((t, i) => (
<TokenTransferItem key={i} t={t} tokenMetas={txData.tokenMetas} /> <TokenTransferItem
key={i}
t={t}
txData={txData}
tokenMetas={txData.tokenMetas}
/>
))} ))}
</div> </div>
</InfoRow> </InfoRow>

View File

@ -1,7 +1,7 @@
import React, { useState, useContext } from "react"; import React, { useState, useContext } from "react";
export type Selection = { export type Selection = {
type: string; type: "address";
content: string; content: string;
}; };