From 3a1fa13c442ee6c9a2fc570627b17a866c93d7cd Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Mon, 5 Jul 2021 21:08:58 -0300 Subject: [PATCH] Extract TokenTransferItem component --- src/TokenTransferItem.tsx | 51 ++++++++++++++++++++++++++++++++++++++ src/Transaction.tsx | 52 ++++++--------------------------------- 2 files changed, 59 insertions(+), 44 deletions(-) create mode 100644 src/TokenTransferItem.tsx diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx new file mode 100644 index 0000000..bbdd45b --- /dev/null +++ b/src/TokenTransferItem.tsx @@ -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 = ({ + t, + tokenMetas, +}) => ( +
+ + + + From + + To + + For + + + + + {tokenMetas[t.token] ? ( + <> +
+ +
+ + + ) : ( + + )} +
+
+); + +export default React.memo(TokenTransferItem); diff --git a/src/Transaction.tsx b/src/Transaction.tsx index 2041b2b..a461501 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -5,7 +5,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCheckCircle, faTimesCircle, - faCaretRight, } from "@fortawesome/free-solid-svg-icons"; import { provider } from "./ethersconfig"; import StandardFrame from "./StandardFrame"; @@ -18,9 +17,9 @@ import AddressLink from "./components/AddressLink"; import Copy from "./components/Copy"; import Timestamp from "./components/Timestamp"; import InternalTransfer from "./components/InternalTransfer"; -import TokenLogo from "./components/TokenLogo"; import GasValue from "./components/GasValue"; import FormattedBalance from "./components/FormattedBalance"; +import TokenTransferItem from "./TokenTransferItem"; import erc20 from "./erc20.json"; import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types"; @@ -228,48 +227,13 @@ const Transaction: React.FC = () => { title={`Tokens Transferred (${txData.tokenTransfers.length})`} >
- {txData.tokenTransfers && - txData.tokenTransfers.map((t, i) => ( -
- - - - From - - To - - For - - - - - {txData.tokenMetas[t.token] ? ( - <> -
- -
- - - ) : ( - - )} -
-
- ))} + {txData.tokenTransfers.map((t, i) => ( + + ))}
)}