Merge branch 'feature/internal-eth-transfer-usd' into develop
This commit is contained in:
commit
65cb02bfc2
|
@ -10,7 +10,6 @@ import { useInternalOperations, useTxData } from "./useErigonHooks";
|
|||
import { SelectionContext, useSelection } from "./useSelection";
|
||||
import { SelectedTransactionContext } from "./useSelectedTransaction";
|
||||
import { BlockNumberContext } from "./useBlockTagContext";
|
||||
import { useETHUSDOracle } from "./usePriceOracle";
|
||||
import { useAppConfigContext } from "./useAppConfig";
|
||||
import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify";
|
||||
|
||||
|
@ -60,11 +59,6 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
|
|||
|
||||
const selectionCtx = useSelection();
|
||||
|
||||
const blockETHUSDPrice = useETHUSDOracle(
|
||||
provider,
|
||||
txData?.confirmedData?.blockNumber
|
||||
);
|
||||
|
||||
const { sourcifySource } = useAppConfigContext();
|
||||
const metadata = useSourcify(
|
||||
txData?.to,
|
||||
|
@ -114,7 +108,6 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
|
|||
devDoc={metadata?.output.devdoc}
|
||||
internalOps={internalOps}
|
||||
sendsEthToMiner={sendsEthToMiner}
|
||||
ethUSDPrice={blockETHUSDPrice}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React from "react";
|
||||
import { BigNumber } from "@ethersproject/bignumber";
|
||||
import InternalTransfer from "./InternalTransfer";
|
||||
import InternalSelfDestruct from "./InternalSelfDestruct";
|
||||
import InternalCreate from "./InternalCreate";
|
||||
|
@ -7,13 +8,20 @@ import { TransactionData, InternalOperation, OperationType } from "../types";
|
|||
type InternalTransactionOperationProps = {
|
||||
txData: TransactionData;
|
||||
internalOp: InternalOperation;
|
||||
// TODO: migrate all this logic to SWR
|
||||
ethUSDPrice: BigNumber | undefined;
|
||||
};
|
||||
|
||||
const InternalTransactionOperation: React.FC<InternalTransactionOperationProps> =
|
||||
({ txData, internalOp }) => (
|
||||
const InternalTransactionOperation: React.FC<
|
||||
InternalTransactionOperationProps
|
||||
> = ({ txData, internalOp, ethUSDPrice }) => (
|
||||
<>
|
||||
{internalOp.type === OperationType.TRANSFER && (
|
||||
<InternalTransfer txData={txData} internalOp={internalOp} />
|
||||
<InternalTransfer
|
||||
txData={txData}
|
||||
internalOp={internalOp}
|
||||
ethUSDPrice={ethUSDPrice}
|
||||
/>
|
||||
)}
|
||||
{internalOp.type === OperationType.SELF_DESTRUCT && (
|
||||
<InternalSelfDestruct txData={txData} internalOp={internalOp} />
|
||||
|
@ -23,6 +31,6 @@ const InternalTransactionOperation: React.FC<InternalTransactionOperationProps>
|
|||
<InternalCreate internalOp={internalOp} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
);
|
||||
|
||||
export default React.memo(InternalTransactionOperation);
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useContext } from "react";
|
||||
import { BigNumber } from "@ethersproject/bignumber";
|
||||
import { formatEther } from "@ethersproject/units";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
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 AddressHighlighter from "./AddressHighlighter";
|
||||
import DecoratedAddressLink from "./DecoratedAddressLink";
|
||||
import USDAmount from "./USDAmount";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useHasCode } from "../useErigonHooks";
|
||||
import { useChainInfo } from "../useChainInfo";
|
||||
|
@ -14,14 +16,17 @@ import { TransactionData, InternalOperation } from "../types";
|
|||
type InternalTransferProps = {
|
||||
txData: TransactionData;
|
||||
internalOp: InternalOperation;
|
||||
// TODO: migrate all this logic to SWR
|
||||
ethUSDPrice: BigNumber | undefined;
|
||||
};
|
||||
|
||||
const InternalTransfer: React.FC<InternalTransferProps> = ({
|
||||
txData,
|
||||
internalOp,
|
||||
ethUSDPrice,
|
||||
}) => {
|
||||
const {
|
||||
nativeCurrency: { symbol },
|
||||
nativeCurrency: { symbol, decimals },
|
||||
} = useChainInfo();
|
||||
const fromMiner =
|
||||
txData.confirmedData?.miner !== undefined &&
|
||||
|
@ -94,6 +99,17 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
|
|||
<span>
|
||||
{formatEther(internalOp.value)} {symbol}
|
||||
</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>
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import React, { useContext, useMemo, useState } from "react";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import { TransactionDescription } from "@ethersproject/abi";
|
||||
import { BigNumber } from "@ethersproject/bignumber";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
|
||||
import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
|
||||
|
@ -47,6 +46,7 @@ import { RuntimeContext } from "../useRuntime";
|
|||
import { useContractsMetadata } from "../hooks";
|
||||
import { useTransactionError } from "../useErigonHooks";
|
||||
import { useChainInfo } from "../useChainInfo";
|
||||
import { useETHUSDOracle } from "../usePriceOracle";
|
||||
|
||||
type DetailsProps = {
|
||||
txData: TransactionData;
|
||||
|
@ -56,7 +56,6 @@ type DetailsProps = {
|
|||
devDoc?: DevDoc | undefined;
|
||||
internalOps?: InternalOperation[];
|
||||
sendsEthToMiner: boolean;
|
||||
ethUSDPrice: BigNumber | undefined;
|
||||
};
|
||||
|
||||
const Details: React.FC<DetailsProps> = ({
|
||||
|
@ -67,7 +66,6 @@ const Details: React.FC<DetailsProps> = ({
|
|||
devDoc,
|
||||
internalOps,
|
||||
sendsEthToMiner,
|
||||
ethUSDPrice,
|
||||
}) => {
|
||||
const hasEIP1559 =
|
||||
txData.confirmedData?.blockBaseFeePerGas !== undefined &&
|
||||
|
@ -90,6 +88,12 @@ const Details: React.FC<DetailsProps> = ({
|
|||
const {
|
||||
nativeCurrency: { name, symbol },
|
||||
} = useChainInfo();
|
||||
|
||||
const blockETHUSDPrice = useETHUSDOracle(
|
||||
provider,
|
||||
txData?.confirmedData?.blockNumber
|
||||
);
|
||||
|
||||
const addresses = useMemo(() => {
|
||||
const _addresses: ChecksummedAddress[] = [];
|
||||
if (txData.to) {
|
||||
|
@ -294,6 +298,7 @@ const Details: React.FC<DetailsProps> = ({
|
|||
key={i}
|
||||
txData={txData}
|
||||
internalOp={op}
|
||||
ethUSDPrice={blockETHUSDPrice}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
@ -318,9 +323,12 @@ const Details: React.FC<DetailsProps> = ({
|
|||
)}
|
||||
<InfoRow title="Value">
|
||||
<FormattedBalance value={txData.value} /> {symbol}{" "}
|
||||
{!txData.value.isZero() && ethUSDPrice && (
|
||||
{!txData.value.isZero() && blockETHUSDPrice && (
|
||||
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
|
||||
<ETH2USDValue ethAmount={txData.value} eth2USDValue={ethUSDPrice} />
|
||||
<ETH2USDValue
|
||||
ethAmount={txData.value}
|
||||
eth2USDValue={blockETHUSDPrice}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</InfoRow>
|
||||
|
@ -409,11 +417,11 @@ const Details: React.FC<DetailsProps> = ({
|
|||
<div className="space-y-3">
|
||||
<div>
|
||||
<FormattedBalance value={txData.confirmedData.fee} /> {symbol}{" "}
|
||||
{ethUSDPrice && (
|
||||
{blockETHUSDPrice && (
|
||||
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
|
||||
<ETH2USDValue
|
||||
ethAmount={txData.confirmedData.fee}
|
||||
eth2USDValue={ethUSDPrice}
|
||||
eth2USDValue={blockETHUSDPrice}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
|
@ -422,7 +430,7 @@ const Details: React.FC<DetailsProps> = ({
|
|||
</div>
|
||||
</InfoRow>
|
||||
<InfoRow title={`${name} Price`}>
|
||||
<USDValue value={ethUSDPrice} />
|
||||
<USDValue value={blockETHUSDPrice} />
|
||||
</InfoRow>
|
||||
</>
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue