37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import React, { useContext } from "react";
|
|
import FormattedBalance from "../components/FormattedBalance";
|
|
import FiatValue from "../components/FiatValue";
|
|
import { RuntimeContext } from "../useRuntime";
|
|
import { useETHUSDOracle } from "../usePriceOracle";
|
|
import { useChainInfo } from "../useChainInfo";
|
|
import { ConfirmedTransactionData } from "../types";
|
|
|
|
type TransactionFeeProps = {
|
|
confirmedData: ConfirmedTransactionData;
|
|
};
|
|
|
|
const TransactionFee: React.FC<TransactionFeeProps> = ({ confirmedData }) => {
|
|
const { provider } = useContext(RuntimeContext);
|
|
const blockETHUSDPrice = useETHUSDOracle(provider, confirmedData.blockNumber);
|
|
const {
|
|
nativeCurrency: { symbol },
|
|
} = useChainInfo();
|
|
const fiatValue =
|
|
blockETHUSDPrice !== undefined
|
|
? confirmedData.fee.mul(blockETHUSDPrice).div(10 ** 8)
|
|
: undefined;
|
|
|
|
return (
|
|
<>
|
|
<FormattedBalance value={confirmedData.fee} /> {symbol}{" "}
|
|
{fiatValue && (
|
|
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
|
|
<FiatValue value={fiatValue} />
|
|
</span>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TransactionFee;
|