From 7a43a56e26a1528f97807faf095e1fea155c7b9c Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Tue, 31 Aug 2021 16:49:52 -0300
Subject: [PATCH] Apply usd price on search results

---
 src/AddressTransactions.tsx           | 11 +++++++++++
 src/BlockTransactions.tsx             |  1 +
 src/block/BlockTransactionResults.tsx |  6 ++++++
 src/search/ResultHeader.tsx           |  4 +++-
 src/search/TransactionItem.tsx        | 19 ++++++++++++++++---
 src/search/useFeeToggler.ts           |  8 ++++----
 6 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx
index e79253e..f4fd2ff 100644
--- a/src/AddressTransactions.tsx
+++ b/src/AddressTransactions.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo, useContext } from "react";
 import { useParams, useLocation, useHistory } from "react-router-dom";
+import { BlockTag } from "@ethersproject/abstract-provider";
 import { getAddress, isAddress } from "@ethersproject/address";
 import queryString from "query-string";
 import Blockies from "react-blockies";
@@ -16,6 +17,7 @@ import { RuntimeContext } from "./useRuntime";
 import { useENSCache } from "./useReverseCache";
 import { useFeeToggler } from "./search/useFeeToggler";
 import { SelectionContext, useSelection } from "./useSelection";
+import { useMultipleETHUSDOracle } from "./usePriceOracle";
 
 type BlockParams = {
   addressOrName: string;
@@ -150,6 +152,14 @@ const AddressTransactions: React.FC = () => {
   const page = useMemo(() => controller?.getPage(), [controller]);
   const reverseCache = useENSCache(provider, page);
 
+  const blockTags: BlockTag[] = useMemo(() => {
+    if (!page) {
+      return [];
+    }
+    return page.map((p) => p.blockNumber);
+  }, [page]);
+  const priceMap = useMultipleETHUSDOracle(provider, blockTags);
+
   document.title = `Address ${params.addressOrName} | Otterscan`;
 
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
@@ -215,6 +225,7 @@ const AddressTransactions: React.FC = () => {
                       ensCache={reverseCache}
                       selectedAddress={checksummedAddress}
                       feeDisplay={feeDisplay}
+                      priceMap={priceMap}
                     />
                   ))}
                   <div className="flex justify-between items-baseline py-3">
diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx
index 5a7209f..ed9b2c7 100644
--- a/src/BlockTransactions.tsx
+++ b/src/BlockTransactions.tsx
@@ -47,6 +47,7 @@ const BlockTransactions: React.FC = () => {
     <StandardFrame>
       <BlockTransactionHeader blockTag={blockNumber.toNumber()} />
       <BlockTransactionResults
+        blockTag={blockNumber.toNumber()}
         page={txs}
         total={totalTxs ?? 0}
         pageNumber={pageNumber}
diff --git a/src/block/BlockTransactionResults.tsx b/src/block/BlockTransactionResults.tsx
index 5937199..922b50d 100644
--- a/src/block/BlockTransactionResults.tsx
+++ b/src/block/BlockTransactionResults.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+import { BlockTag } from "@ethersproject/abstract-provider";
 import ContentFrame from "../ContentFrame";
 import PageControl from "../search/PageControl";
 import ResultHeader from "../search/ResultHeader";
@@ -10,14 +11,17 @@ import { SelectionContext, useSelection } from "../useSelection";
 import { useENSCache } from "../useReverseCache";
 import { ProcessedTransaction } from "../types";
 import { PAGE_SIZE } from "../params";
+import { useMultipleETHUSDOracle } from "../usePriceOracle";
 
 type BlockTransactionResultsProps = {
+  blockTag: BlockTag;
   page?: ProcessedTransaction[];
   total: number;
   pageNumber: number;
 };
 
 const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
+  blockTag,
   page,
   total,
   pageNumber,
@@ -26,6 +30,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
   const { provider } = useContext(RuntimeContext);
   const reverseCache = useENSCache(provider, page);
+  const priceMap = useMultipleETHUSDOracle(provider, [blockTag]);
 
   return (
     <ContentFrame>
@@ -55,6 +60,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
               tx={tx}
               ensCache={reverseCache}
               feeDisplay={feeDisplay}
+              priceMap={priceMap}
             />
           ))}
           <div className="flex justify-between items-baseline py-3">
diff --git a/src/search/ResultHeader.tsx b/src/search/ResultHeader.tsx
index 13880bd..5fbcbc2 100644
--- a/src/search/ResultHeader.tsx
+++ b/src/search/ResultHeader.tsx
@@ -23,7 +23,9 @@ const ResultHeader: React.FC<ResultHeaderProps> = ({
         className="text-link-blue hover:text-link-blue-hover"
         onClick={feeDisplayToggler}
       >
-        {feeDisplay === FeeDisplay.TX_FEE ? "Txn Fee" : "Gas Price"}
+        {feeDisplay === FeeDisplay.TX_FEE && "Txn Fee"}
+        {feeDisplay === FeeDisplay.TX_FEE_USD && "Txn Fee (USD)"}
+        {feeDisplay === FeeDisplay.GAS_PRICE && "Gas Price"}
       </button>
     </div>
   </div>
diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx
index f5196d8..ffafc09 100644
--- a/src/search/TransactionItem.tsx
+++ b/src/search/TransactionItem.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { BlockTag } from "@ethersproject/abstract-provider";
+import { BigNumber } from "@ethersproject/bignumber";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
 import MethodName from "../components/MethodName";
@@ -15,12 +17,14 @@ import TransactionValue from "../components/TransactionValue";
 import { ENSReverseCache, ProcessedTransaction } from "../types";
 import { FeeDisplay } from "./useFeeToggler";
 import { formatValue } from "../components/formatter";
+import ETH2USDValue from "../components/ETH2USDValue";
 
 type TransactionItemProps = {
   tx: ProcessedTransaction;
   ensCache?: ENSReverseCache;
   selectedAddress?: string;
   feeDisplay: FeeDisplay;
+  priceMap: Record<BlockTag, BigNumber>;
 };
 
 const TransactionItem: React.FC<TransactionItemProps> = ({
@@ -28,6 +32,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
   ensCache,
   selectedAddress,
   feeDisplay,
+  priceMap,
 }) => {
   let direction: Direction | undefined;
   if (selectedAddress) {
@@ -123,9 +128,17 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
         <TransactionValue value={tx.value} />
       </span>
       <span className="font-balance text-xs text-gray-500 truncate">
-        {feeDisplay === FeeDisplay.TX_FEE
-          ? formatValue(tx.fee, 18)
-          : formatValue(tx.gasPrice, 9)}
+        {feeDisplay === FeeDisplay.TX_FEE && formatValue(tx.fee, 18)}
+        {feeDisplay === FeeDisplay.TX_FEE_USD &&
+          (priceMap[tx.blockNumber] ? (
+            <ETH2USDValue
+              ethAmount={tx.fee}
+              eth2USDValue={priceMap[tx.blockNumber]}
+            />
+          ) : (
+            "N/A"
+          ))}
+        {feeDisplay === FeeDisplay.GAS_PRICE && formatValue(tx.gasPrice, 9)}
       </span>
     </div>
   );
diff --git a/src/search/useFeeToggler.ts b/src/search/useFeeToggler.ts
index 7a82a9c..722221c 100644
--- a/src/search/useFeeToggler.ts
+++ b/src/search/useFeeToggler.ts
@@ -2,16 +2,16 @@ import { useState } from "react";
 
 export enum FeeDisplay {
   TX_FEE,
+  TX_FEE_USD,
   GAS_PRICE,
 }
 
 export const useFeeToggler = (): [FeeDisplay, () => void] => {
   const [feeDisplay, setFeeDisplay] = useState<FeeDisplay>(FeeDisplay.TX_FEE);
   const feeDisplayToggler = () => {
-    if (feeDisplay === FeeDisplay.TX_FEE) {
-      setFeeDisplay(FeeDisplay.GAS_PRICE);
-    } else {
-      setFeeDisplay(FeeDisplay.TX_FEE);
+    setFeeDisplay(feeDisplay + 1);
+    if (feeDisplay === FeeDisplay.GAS_PRICE) {
+      setFeeDisplay(0);
     }
   };