Add contextual global tx from/to addresss highlighting
This commit is contained in:
parent
26a8e5bea2
commit
00cc2d0d29
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue