Extract TokenTransferItem component
This commit is contained in:
Willian Mitsuda
parent
ac38942933
commit
3a1fa13c44
|
|
@ -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);
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue