Extract TokenTransferItem component

This commit is contained in:
Willian Mitsuda 2021-07-05 21:08:58 -03:00
parent ac38942933
commit 3a1fa13c44
2 changed files with 59 additions and 44 deletions

51
src/TokenTransferItem.tsx Normal file
View File

@ -0,0 +1,51 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons";
import AddressLink from "./components/AddressLink";
import TokenLogo from "./components/TokenLogo";
import FormattedBalance from "./components/FormattedBalance";
import { TokenMetas, TokenTransfer } from "./types";
type TokenTransferItemProps = {
t: TokenTransfer;
tokenMetas: TokenMetas;
};
const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
t,
tokenMetas,
}) => (
<div className="flex items-baseline space-x-2 truncate">
<span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
<span className="font-bold">From</span>
<AddressLink address={t.from} />
<span className="font-bold">To</span>
<AddressLink address={t.to} />
<span className="font-bold">For</span>
<span>
<FormattedBalance
value={t.value}
decimals={tokenMetas[t.token].decimals}
/>
</span>
<span className="flex space-x-1 items-baseline truncate">
{tokenMetas[t.token] ? (
<>
<div className="self-center">
<TokenLogo address={t.token} name={tokenMetas[t.token].name} />
</div>
<AddressLink
address={t.token}
text={`${tokenMetas[t.token].name} (${tokenMetas[t.token].symbol})`}
/>
</>
) : (
<AddressLink address={t.token} />
)}
</span>
</div>
);
export default React.memo(TokenTransferItem);

View File

@ -5,7 +5,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { import {
faCheckCircle, faCheckCircle,
faTimesCircle, faTimesCircle,
faCaretRight,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { provider } from "./ethersconfig"; import { provider } from "./ethersconfig";
import StandardFrame from "./StandardFrame"; import StandardFrame from "./StandardFrame";
@ -18,9 +17,9 @@ 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";
import InternalTransfer from "./components/InternalTransfer"; import InternalTransfer from "./components/InternalTransfer";
import TokenLogo from "./components/TokenLogo";
import GasValue from "./components/GasValue"; import GasValue from "./components/GasValue";
import FormattedBalance from "./components/FormattedBalance"; import FormattedBalance from "./components/FormattedBalance";
import TokenTransferItem from "./TokenTransferItem";
import erc20 from "./erc20.json"; import erc20 from "./erc20.json";
import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types"; import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types";
@ -228,47 +227,12 @@ const Transaction: React.FC = () => {
title={`Tokens Transferred (${txData.tokenTransfers.length})`} title={`Tokens Transferred (${txData.tokenTransfers.length})`}
> >
<div className="space-y-2"> <div className="space-y-2">
{txData.tokenTransfers && {txData.tokenTransfers.map((t, i) => (
txData.tokenTransfers.map((t, i) => ( <TokenTransferItem
<div
className="flex items-baseline space-x-2 truncate"
key={i} key={i}
> t={t}
<span className="text-gray-500"> tokenMetas={txData.tokenMetas}
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
<span className="font-bold">From</span>
<AddressLink address={t.from} />
<span className="font-bold">To</span>
<AddressLink address={t.to} />
<span className="font-bold">For</span>
<span>
<FormattedBalance
value={t.value}
decimals={txData.tokenMetas[t.token].decimals}
/> />
</span>
<span className="flex space-x-1 items-baseline truncate">
{txData.tokenMetas[t.token] ? (
<>
<div className="self-center">
<TokenLogo
address={t.token}
name={txData.tokenMetas[t.token].name}
/>
</div>
<AddressLink
address={t.token}
text={`${
txData.tokenMetas[t.token].name
} (${txData.tokenMetas[t.token].symbol})`}
/>
</>
) : (
<AddressLink address={t.token} />
)}
</span>
</div>
))} ))}
</div> </div>
</InfoRow> </InfoRow>