Merge branch 'feature/internal-eth-transfer-usd' into develop

This commit is contained in:
Willian Mitsuda 2022-04-12 15:03:19 -03:00
commit 65cb02bfc2
4 changed files with 56 additions and 31 deletions

View File

@ -10,7 +10,6 @@ import { useInternalOperations, useTxData } from "./useErigonHooks";
import { SelectionContext, useSelection } from "./useSelection"; import { SelectionContext, useSelection } from "./useSelection";
import { SelectedTransactionContext } from "./useSelectedTransaction"; import { SelectedTransactionContext } from "./useSelectedTransaction";
import { BlockNumberContext } from "./useBlockTagContext"; import { BlockNumberContext } from "./useBlockTagContext";
import { useETHUSDOracle } from "./usePriceOracle";
import { useAppConfigContext } from "./useAppConfig"; import { useAppConfigContext } from "./useAppConfig";
import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify"; import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify";
@ -60,11 +59,6 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
const selectionCtx = useSelection(); const selectionCtx = useSelection();
const blockETHUSDPrice = useETHUSDOracle(
provider,
txData?.confirmedData?.blockNumber
);
const { sourcifySource } = useAppConfigContext(); const { sourcifySource } = useAppConfigContext();
const metadata = useSourcify( const metadata = useSourcify(
txData?.to, txData?.to,
@ -114,7 +108,6 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
devDoc={metadata?.output.devdoc} devDoc={metadata?.output.devdoc}
internalOps={internalOps} internalOps={internalOps}
sendsEthToMiner={sendsEthToMiner} sendsEthToMiner={sendsEthToMiner}
ethUSDPrice={blockETHUSDPrice}
/> />
} }
/> />

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,13 +8,20 @@ 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 && ( {internalOp.type === OperationType.TRANSFER && (
<InternalTransfer txData={txData} internalOp={internalOp} /> <InternalTransfer
txData={txData}
internalOp={internalOp}
ethUSDPrice={ethUSDPrice}
/>
)} )}
{internalOp.type === OperationType.SELF_DESTRUCT && ( {internalOp.type === OperationType.SELF_DESTRUCT && (
<InternalSelfDestruct txData={txData} internalOp={internalOp} /> <InternalSelfDestruct txData={txData} internalOp={internalOp} />
@ -23,6 +31,6 @@ const InternalTransactionOperation: React.FC<InternalTransactionOperationProps>
<InternalCreate internalOp={internalOp} /> <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

@ -1,7 +1,6 @@
import React, { useContext, useMemo, useState } from "react"; import React, { useContext, useMemo, useState } from "react";
import { Tab } from "@headlessui/react"; import { Tab } from "@headlessui/react";
import { TransactionDescription } from "@ethersproject/abi"; import { TransactionDescription } from "@ethersproject/abi";
import { BigNumber } from "@ethersproject/bignumber";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle"; import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
import { faCube } from "@fortawesome/free-solid-svg-icons/faCube"; import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
@ -47,6 +46,7 @@ import { RuntimeContext } from "../useRuntime";
import { useContractsMetadata } from "../hooks"; import { useContractsMetadata } from "../hooks";
import { useTransactionError } from "../useErigonHooks"; import { useTransactionError } from "../useErigonHooks";
import { useChainInfo } from "../useChainInfo"; import { useChainInfo } from "../useChainInfo";
import { useETHUSDOracle } from "../usePriceOracle";
type DetailsProps = { type DetailsProps = {
txData: TransactionData; txData: TransactionData;
@ -56,7 +56,6 @@ type DetailsProps = {
devDoc?: DevDoc | undefined; devDoc?: DevDoc | undefined;
internalOps?: InternalOperation[]; internalOps?: InternalOperation[];
sendsEthToMiner: boolean; sendsEthToMiner: boolean;
ethUSDPrice: BigNumber | undefined;
}; };
const Details: React.FC<DetailsProps> = ({ const Details: React.FC<DetailsProps> = ({
@ -67,7 +66,6 @@ const Details: React.FC<DetailsProps> = ({
devDoc, devDoc,
internalOps, internalOps,
sendsEthToMiner, sendsEthToMiner,
ethUSDPrice,
}) => { }) => {
const hasEIP1559 = const hasEIP1559 =
txData.confirmedData?.blockBaseFeePerGas !== undefined && txData.confirmedData?.blockBaseFeePerGas !== undefined &&
@ -90,6 +88,12 @@ const Details: React.FC<DetailsProps> = ({
const { const {
nativeCurrency: { name, symbol }, nativeCurrency: { name, symbol },
} = useChainInfo(); } = useChainInfo();
const blockETHUSDPrice = useETHUSDOracle(
provider,
txData?.confirmedData?.blockNumber
);
const addresses = useMemo(() => { const addresses = useMemo(() => {
const _addresses: ChecksummedAddress[] = []; const _addresses: ChecksummedAddress[] = [];
if (txData.to) { if (txData.to) {
@ -294,6 +298,7 @@ const Details: React.FC<DetailsProps> = ({
key={i} key={i}
txData={txData} txData={txData}
internalOp={op} internalOp={op}
ethUSDPrice={blockETHUSDPrice}
/> />
))} ))}
</div> </div>
@ -318,9 +323,12 @@ const Details: React.FC<DetailsProps> = ({
)} )}
<InfoRow title="Value"> <InfoRow title="Value">
<FormattedBalance value={txData.value} /> {symbol}{" "} <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"> <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> </span>
)} )}
</InfoRow> </InfoRow>
@ -409,11 +417,11 @@ const Details: React.FC<DetailsProps> = ({
<div className="space-y-3"> <div className="space-y-3">
<div> <div>
<FormattedBalance value={txData.confirmedData.fee} /> {symbol}{" "} <FormattedBalance value={txData.confirmedData.fee} /> {symbol}{" "}
{ethUSDPrice && ( {blockETHUSDPrice && (
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from"> <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
<ETH2USDValue <ETH2USDValue
ethAmount={txData.confirmedData.fee} ethAmount={txData.confirmedData.fee}
eth2USDValue={ethUSDPrice} eth2USDValue={blockETHUSDPrice}
/> />
</span> </span>
)} )}
@ -422,7 +430,7 @@ const Details: React.FC<DetailsProps> = ({
</div> </div>
</InfoRow> </InfoRow>
<InfoRow title={`${name} Price`}> <InfoRow title={`${name} Price`}>
<USDValue value={ethUSDPrice} /> <USDValue value={blockETHUSDPrice} />
</InfoRow> </InfoRow>
</> </>
)} )}