Apply USD oracle to internal ETH transfers section

This commit is contained in:
Willian Mitsuda 2022-04-11 14:56:16 -03:00
parent a1edc3d632
commit 2c0f576d23
3 changed files with 41 additions and 16 deletions

View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import { BigNumber } from "@ethersproject/bignumber";
import InternalTransfer from "./InternalTransfer"; import InternalTransfer from "./InternalTransfer";
import InternalSelfDestruct from "./InternalSelfDestruct"; import InternalSelfDestruct from "./InternalSelfDestruct";
import InternalCreate from "./InternalCreate"; import InternalCreate from "./InternalCreate";
@ -7,22 +8,29 @@ import { TransactionData, InternalOperation, OperationType } from "../types";
type InternalTransactionOperationProps = { type InternalTransactionOperationProps = {
txData: TransactionData; txData: TransactionData;
internalOp: InternalOperation; internalOp: InternalOperation;
// TODO: migrate all this logic to SWR
ethUSDPrice: BigNumber | undefined;
}; };
const InternalTransactionOperation: React.FC<InternalTransactionOperationProps> = const InternalTransactionOperation: React.FC<
({ txData, internalOp }) => ( InternalTransactionOperationProps
<> > = ({ txData, internalOp, ethUSDPrice }) => (
{internalOp.type === OperationType.TRANSFER && ( <>
<InternalTransfer txData={txData} internalOp={internalOp} /> {internalOp.type === OperationType.TRANSFER && (
)} <InternalTransfer
{internalOp.type === OperationType.SELF_DESTRUCT && ( txData={txData}
<InternalSelfDestruct txData={txData} internalOp={internalOp} /> internalOp={internalOp}
)} ethUSDPrice={ethUSDPrice}
{(internalOp.type === OperationType.CREATE || />
internalOp.type === OperationType.CREATE2) && ( )}
<InternalCreate internalOp={internalOp} /> {internalOp.type === OperationType.SELF_DESTRUCT && (
)} <InternalSelfDestruct txData={txData} internalOp={internalOp} />
</> )}
); {(internalOp.type === OperationType.CREATE ||
internalOp.type === OperationType.CREATE2) && (
<InternalCreate internalOp={internalOp} />
)}
</>
);
export default React.memo(InternalTransactionOperation); export default React.memo(InternalTransactionOperation);

View File

@ -1,4 +1,5 @@
import React, { useContext } from "react"; import React, { useContext } from "react";
import { BigNumber } from "@ethersproject/bignumber";
import { formatEther } from "@ethersproject/units"; import { formatEther } from "@ethersproject/units";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight"; import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
@ -6,6 +7,7 @@ import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
import { faSackDollar } from "@fortawesome/free-solid-svg-icons/faSackDollar"; import { faSackDollar } from "@fortawesome/free-solid-svg-icons/faSackDollar";
import AddressHighlighter from "./AddressHighlighter"; import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink"; import DecoratedAddressLink from "./DecoratedAddressLink";
import USDAmount from "./USDAmount";
import { RuntimeContext } from "../useRuntime"; import { RuntimeContext } from "../useRuntime";
import { useHasCode } from "../useErigonHooks"; import { useHasCode } from "../useErigonHooks";
import { useChainInfo } from "../useChainInfo"; import { useChainInfo } from "../useChainInfo";
@ -14,14 +16,17 @@ import { TransactionData, InternalOperation } from "../types";
type InternalTransferProps = { type InternalTransferProps = {
txData: TransactionData; txData: TransactionData;
internalOp: InternalOperation; internalOp: InternalOperation;
// TODO: migrate all this logic to SWR
ethUSDPrice: BigNumber | undefined;
}; };
const InternalTransfer: React.FC<InternalTransferProps> = ({ const InternalTransfer: React.FC<InternalTransferProps> = ({
txData, txData,
internalOp, internalOp,
ethUSDPrice,
}) => { }) => {
const { const {
nativeCurrency: { symbol }, nativeCurrency: { symbol, decimals },
} = useChainInfo(); } = useChainInfo();
const fromMiner = const fromMiner =
txData.confirmedData?.miner !== undefined && txData.confirmedData?.miner !== undefined &&
@ -94,6 +99,17 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
<span> <span>
{formatEther(internalOp.value)} {symbol} {formatEther(internalOp.value)} {symbol}
</span> </span>
{ethUSDPrice && (
<span className="px-2 border-gray-200 border rounded-lg bg-gray-100 text-gray-600">
<USDAmount
amount={internalOp.value}
amountDecimals={decimals}
quote={ethUSDPrice}
// TODO: migrate to SWR and standardize this magic number
quoteDecimals={8}
/>
</span>
)}
</div> </div>
</div> </div>
</div> </div>

View File

@ -298,6 +298,7 @@ const Details: React.FC<DetailsProps> = ({
key={i} key={i}
txData={txData} txData={txData}
internalOp={op} internalOp={op}
ethUSDPrice={blockETHUSDPrice}
/> />
))} ))}
</div> </div>