Replace component

This commit is contained in:
Willian Mitsuda 2021-11-07 08:56:12 -03:00
parent b723182ad3
commit 128c70b972
2 changed files with 19 additions and 26 deletions

View File

@ -1,9 +1,8 @@
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 AddressHighlighter from "./components/AddressHighlighter"; import TransactionAddress from "./components/TransactionAddress";
import ValueHighlighter from "./components/ValueHighlighter"; import ValueHighlighter from "./components/ValueHighlighter";
import DecoratedAddressLink from "./components/DecoratedAddressLink";
import FormattedBalance from "./components/FormattedBalance"; import FormattedBalance from "./components/FormattedBalance";
import { import {
AddressContext, AddressContext,
@ -34,27 +33,19 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
<div className="grid grid-cols-5 gap-x-1"> <div className="grid grid-cols-5 gap-x-1">
<div className="flex space-x-1"> <div className="flex space-x-1">
<span className="font-bold">From</span> <span className="font-bold">From</span>
<AddressHighlighter address={t.from}> <TransactionAddress
<DecoratedAddressLink address={t.from}
address={t.from} addressCtx={AddressContext.FROM}
addressCtx={AddressContext.FROM} resolvedAddresses={resolvedAddresses}
txFrom={t.from === txData.from} />
txTo={t.from === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</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}> <TransactionAddress
<DecoratedAddressLink address={t.to}
address={t.to} addressCtx={AddressContext.TO}
addressCtx={AddressContext.TO} resolvedAddresses={resolvedAddresses}
txFrom={t.to === txData.from} />
txTo={t.to === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
</div> </div>
<div className="col-span-3 flex space-x-1"> <div className="col-span-3 flex space-x-1">
<span className="font-bold">For</span> <span className="font-bold">For</span>
@ -66,12 +57,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
/> />
</ValueHighlighter> </ValueHighlighter>
</span> </span>
<AddressHighlighter address={t.token}> <TransactionAddress
<DecoratedAddressLink address={t.token}
address={t.token} resolvedAddresses={resolvedAddresses}
resolvedAddresses={resolvedAddresses} />
/>
</AddressHighlighter>
</div> </div>
</div> </div>
</div> </div>

View File

@ -3,14 +3,17 @@ import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink"; import DecoratedAddressLink from "./DecoratedAddressLink";
import { ResolvedAddresses } from "../api/address-resolver"; import { ResolvedAddresses } from "../api/address-resolver";
import { useSelectedTransaction } from "../useSelectedTransaction"; import { useSelectedTransaction } from "../useSelectedTransaction";
import { AddressContext } from "../types";
type TransactionAddressProps = { type TransactionAddressProps = {
address: string; address: string;
addressCtx?: AddressContext | undefined;
resolvedAddresses: ResolvedAddresses | undefined; resolvedAddresses: ResolvedAddresses | undefined;
}; };
const TransactionAddress: React.FC<TransactionAddressProps> = ({ const TransactionAddress: React.FC<TransactionAddressProps> = ({
address, address,
addressCtx,
resolvedAddresses, resolvedAddresses,
}) => { }) => {
const txData = useSelectedTransaction(); const txData = useSelectedTransaction();
@ -21,6 +24,7 @@ const TransactionAddress: React.FC<TransactionAddressProps> = ({
<AddressHighlighter address={address}> <AddressHighlighter address={address}>
<DecoratedAddressLink <DecoratedAddressLink
address={address} address={address}
addressCtx={addressCtx}
miner={address === txData?.confirmedData?.miner} miner={address === txData?.confirmedData?.miner}
txFrom={address === txData?.from} txFrom={address === txData?.from}
txTo={address === txData?.to || creation} txTo={address === txData?.to || creation}