1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/transaction-breakdown/transaction-breakdown.component.js

239 lines
7.9 KiB
JavaScript
Raw Normal View History

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import CurrencyDisplay from '../../ui/currency-display';
import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display';
import HexToDecimal from '../../ui/hex-to-decimal';
import {
GWEI,
PRIMARY,
SECONDARY,
ETH,
} from '../../../helpers/constants/common';
import TransactionBreakdownRow from './transaction-breakdown-row';
2018-08-31 21:36:07 +02:00
export default class TransactionBreakdown extends PureComponent {
static contextTypes = {
t: PropTypes.func,
};
2018-08-31 21:36:07 +02:00
static propTypes = {
className: PropTypes.string,
nativeCurrency: PropTypes.string,
showFiat: PropTypes.bool,
nonce: PropTypes.string,
primaryCurrency: PropTypes.string,
isTokenApprove: PropTypes.bool,
gas: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
gasPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
maxFeePerGas: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
gasUsed: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
totalInHex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
baseFee: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
priorityFee: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
hexGasTotal: PropTypes.string,
isEIP1559Transaction: PropTypes.bool,
isMultiLayerFeeNetwork: PropTypes.bool,
l1HexGasTotal: PropTypes.string,
};
2018-08-31 21:36:07 +02:00
static defaultProps = {
showFiat: true,
};
2018-08-31 21:36:07 +02:00
2020-11-03 00:41:28 +01:00
render() {
const { t } = this.context;
2020-11-03 00:41:28 +01:00
const {
gas,
gasPrice,
maxFeePerGas,
2020-11-03 00:41:28 +01:00
primaryCurrency,
className,
nonce,
nativeCurrency,
showFiat,
totalInHex,
gasUsed,
isTokenApprove,
baseFee,
priorityFee,
hexGasTotal,
isEIP1559Transaction,
isMultiLayerFeeNetwork,
l1HexGasTotal,
} = this.props;
2018-08-31 21:36:07 +02:00
return (
<div className={classnames('transaction-breakdown', className)}>
2020-11-03 00:41:28 +01:00
<div className="transaction-breakdown__title">{t('transaction')}</div>
Feature: Transaction Insights (#12881) * integration for tx decoding confirmation and history view * upgrading @truffle/decoder to latest release 5.1.0 * Update acorn and colors patches * feat: remove redundant styling * feat: basic integration for nickname components * feat: wiring functionality of adding new nickname * feat: wire functionality of showing nickname modal * feat: link the nickname popover with add/update popover * feat: moving forward with address nicknames integration * feat: fixing a bug related to passing chainId in addressBook * feat: populating memo prop in addressbook entry * feat: add explorer link * feat: bug fixing update nickname component * feat: fix proptypes * feat: adding tooltip for copying nickname address * featL fix styling for tx-details page * feat: optimize code for error handling * feat: limiting transaction decoding to tx with data * feat: remove tree UI component * feat: adding request to check for tx decoding supported networks * feat: showing data hex component * feat: fix react warnings * feat: remove extra margin in tx decoding * Remove unused package @truffle/source-map-utils * Ensure messages get translated * feat: link tx-decoding addresses with nicknames * Omit value for boolean attributes * Fix props reading in CopyRawData * fix: fixing issue with transaltion * Fix lint errors in TransactionDecoding - Remove unused import - Reorder imports - Address conflict between caught `error` and error state flag by renaming state flag to `hasError` - Fix requestUrl identifier casing and use of template string - Ensure `useEffect` gets passed the deps it needs - Add scope braces around case statement where it's needed - Omit literal `true` for boolean jsx attribute - Refactor nested ternary as `if` statements * fix: revert fetchWithCache modifications * Fix linting for TransactionListItemDetails - Remove unused import - Fix import spacing - Remove unused prop dereference - Fix string interpolation for translated From/To * Moving to popover pattern * fix: sass color variable * Omit value for boolean attribute * Remove changes from modal.js * fix: refactor nickname popovers * Ensure const gets declared before it's used * Fix linting for ConfirmTransactionBase - Remove unused prop chainId - Stop destructuring an unused field * fix: refactor usage of nicknames popovers in send-content-container * fix: remove extra prop updateAccountNicknameModal * fix: refactor code for address.component * fix: remove extra tooltip * Ensure NicknamePopovers always returns component * Fix linting for NicknamePopover component - Fix useCallback deps - Switch ternary to logical-or * Fix linting for SenderToRecipient ... by fixing import order * Remove unused addressCopied state * Delete empty file * fix: remove sender-to-recipient.container * fix: refactor usage of nickname popovers in confirm-page-container * fix: bug related to state variable * Stylelint fix * Lint fix * Change "Total Amount" to "Total" * Lint fix locales * Update address-book.spec.js * e2e test update * Update e2e tests * Fix issue where absence of function params in data hex tab would result in rendering a string * Fix border radius, and width and height in small notification windows, of the update-nickname-popover * Remove fake await * Clean up * Clean up Co-authored-by: Alaa Hadad <alaahd@Alaas-MacBook-M1-Pro-14-inch.local> Co-authored-by: Dan Miller <danjm.com@gmail.com> Co-authored-by: g. nicholas d'andrea <gnidan@trufflesuite.com>
2021-12-01 18:22:08 +01:00
<TransactionBreakdownRow divider title={t('nonce')}>
2020-11-03 00:41:28 +01:00
{typeof nonce === 'undefined' ? null : (
<HexToDecimal
className="transaction-breakdown__value"
value={nonce}
/>
)}
</TransactionBreakdownRow>
<TransactionBreakdownRow
2020-11-03 00:41:28 +01:00
title={isTokenApprove ? t('spendLimitAmount') : t('amount')}
>
Feature: Transaction Insights (#12881) * integration for tx decoding confirmation and history view * upgrading @truffle/decoder to latest release 5.1.0 * Update acorn and colors patches * feat: remove redundant styling * feat: basic integration for nickname components * feat: wiring functionality of adding new nickname * feat: wire functionality of showing nickname modal * feat: link the nickname popover with add/update popover * feat: moving forward with address nicknames integration * feat: fixing a bug related to passing chainId in addressBook * feat: populating memo prop in addressbook entry * feat: add explorer link * feat: bug fixing update nickname component * feat: fix proptypes * feat: adding tooltip for copying nickname address * featL fix styling for tx-details page * feat: optimize code for error handling * feat: limiting transaction decoding to tx with data * feat: remove tree UI component * feat: adding request to check for tx decoding supported networks * feat: showing data hex component * feat: fix react warnings * feat: remove extra margin in tx decoding * Remove unused package @truffle/source-map-utils * Ensure messages get translated * feat: link tx-decoding addresses with nicknames * Omit value for boolean attributes * Fix props reading in CopyRawData * fix: fixing issue with transaltion * Fix lint errors in TransactionDecoding - Remove unused import - Reorder imports - Address conflict between caught `error` and error state flag by renaming state flag to `hasError` - Fix requestUrl identifier casing and use of template string - Ensure `useEffect` gets passed the deps it needs - Add scope braces around case statement where it's needed - Omit literal `true` for boolean jsx attribute - Refactor nested ternary as `if` statements * fix: revert fetchWithCache modifications * Fix linting for TransactionListItemDetails - Remove unused import - Fix import spacing - Remove unused prop dereference - Fix string interpolation for translated From/To * Moving to popover pattern * fix: sass color variable * Omit value for boolean attribute * Remove changes from modal.js * fix: refactor nickname popovers * Ensure const gets declared before it's used * Fix linting for ConfirmTransactionBase - Remove unused prop chainId - Stop destructuring an unused field * fix: refactor usage of nicknames popovers in send-content-container * fix: remove extra prop updateAccountNicknameModal * fix: refactor code for address.component * fix: remove extra tooltip * Ensure NicknamePopovers always returns component * Fix linting for NicknamePopover component - Fix useCallback deps - Switch ternary to logical-or * Fix linting for SenderToRecipient ... by fixing import order * Remove unused addressCopied state * Delete empty file * fix: remove sender-to-recipient.container * fix: refactor usage of nickname popovers in confirm-page-container * fix: bug related to state variable * Stylelint fix * Lint fix * Change "Total Amount" to "Total" * Lint fix locales * Update address-book.spec.js * e2e test update * Update e2e tests * Fix issue where absence of function params in data hex tab would result in rendering a string * Fix border radius, and width and height in small notification windows, of the update-nickname-popover * Remove fake await * Clean up * Clean up Co-authored-by: Alaa Hadad <alaahd@Alaas-MacBook-M1-Pro-14-inch.local> Co-authored-by: Dan Miller <danjm.com@gmail.com> Co-authored-by: g. nicholas d'andrea <gnidan@trufflesuite.com>
2021-12-01 18:22:08 +01:00
<span className="transaction-breakdown__value transaction-breakdown__value--amount">
2020-11-03 00:41:28 +01:00
{primaryCurrency}
</span>
2018-12-09 21:48:06 +01:00
</TransactionBreakdownRow>
<TransactionBreakdownRow
title={
isMultiLayerFeeNetwork
? t('transactionHistoryL2GasLimitLabel')
: `${t('gasLimit')} (${t('units')})`
}
2018-12-09 21:48:06 +01:00
className="transaction-breakdown__row-title"
2018-08-31 21:36:07 +02:00
>
2020-11-03 00:41:28 +01:00
{typeof gas === 'undefined' ? (
'?'
) : (
<HexToDecimal
className="transaction-breakdown__value"
value={gas}
/>
)}
2018-12-09 21:48:06 +01:00
</TransactionBreakdownRow>
2020-11-03 00:41:28 +01:00
{typeof gasUsed === 'string' && (
<TransactionBreakdownRow
title={`${t('gasUsed')} (${t('units')})`}
className="transaction-breakdown__row-title"
>
<HexToDecimal
className="transaction-breakdown__value"
value={gasUsed}
/>
</TransactionBreakdownRow>
)}
2021-09-15 23:42:06 +02:00
{isEIP1559Transaction && typeof baseFee !== 'undefined' ? (
<TransactionBreakdownRow title={t('transactionHistoryBaseFee')}>
2021-09-15 23:42:06 +02:00
<CurrencyDisplay
className="transaction-breakdown__value"
data-testid="transaction-breakdown__base-fee"
currency={nativeCurrency}
denomination={GWEI}
value={baseFee}
numberOfDecimals={10}
hideLabel
/>
</TransactionBreakdownRow>
2021-09-15 23:42:06 +02:00
) : null}
{isEIP1559Transaction && typeof priorityFee !== 'undefined' ? (
<TransactionBreakdownRow title={t('transactionHistoryPriorityFee')}>
2021-09-15 23:42:06 +02:00
<CurrencyDisplay
className="transaction-breakdown__value"
data-testid="transaction-breakdown__priority-fee"
currency={nativeCurrency}
denomination={GWEI}
value={priorityFee}
numberOfDecimals={10}
hideLabel
/>
</TransactionBreakdownRow>
2021-09-15 23:42:06 +02:00
) : null}
{!isEIP1559Transaction && (
<TransactionBreakdownRow
title={
isMultiLayerFeeNetwork
? t('transactionHistoryL2GasPriceLabel')
: t('advancedGasPriceTitle')
}
>
{typeof gasPrice === 'undefined' ? (
'?'
) : (
<CurrencyDisplay
className="transaction-breakdown__value"
data-testid="transaction-breakdown__gas-price"
currency={nativeCurrency}
denomination={GWEI}
value={gasPrice}
numberOfDecimals={9}
hideLabel
/>
)}
</TransactionBreakdownRow>
)}
{isEIP1559Transaction && (
<TransactionBreakdownRow title={t('transactionHistoryTotalGasFee')}>
<UserPreferencedCurrencyDisplay
2020-11-03 00:41:28 +01:00
className="transaction-breakdown__value"
data-testid="transaction-breakdown__effective-gas-price"
currency={nativeCurrency}
denomination={ETH}
numberOfDecimals={6}
value={hexGasTotal}
type={PRIMARY}
2020-11-03 00:41:28 +01:00
/>
{showFiat && (
<UserPreferencedCurrencyDisplay
className="transaction-breakdown__value"
type={SECONDARY}
value={hexGasTotal}
/>
)}
</TransactionBreakdownRow>
)}
{isEIP1559Transaction && (
Feature: Transaction Insights (#12881) * integration for tx decoding confirmation and history view * upgrading @truffle/decoder to latest release 5.1.0 * Update acorn and colors patches * feat: remove redundant styling * feat: basic integration for nickname components * feat: wiring functionality of adding new nickname * feat: wire functionality of showing nickname modal * feat: link the nickname popover with add/update popover * feat: moving forward with address nicknames integration * feat: fixing a bug related to passing chainId in addressBook * feat: populating memo prop in addressbook entry * feat: add explorer link * feat: bug fixing update nickname component * feat: fix proptypes * feat: adding tooltip for copying nickname address * featL fix styling for tx-details page * feat: optimize code for error handling * feat: limiting transaction decoding to tx with data * feat: remove tree UI component * feat: adding request to check for tx decoding supported networks * feat: showing data hex component * feat: fix react warnings * feat: remove extra margin in tx decoding * Remove unused package @truffle/source-map-utils * Ensure messages get translated * feat: link tx-decoding addresses with nicknames * Omit value for boolean attributes * Fix props reading in CopyRawData * fix: fixing issue with transaltion * Fix lint errors in TransactionDecoding - Remove unused import - Reorder imports - Address conflict between caught `error` and error state flag by renaming state flag to `hasError` - Fix requestUrl identifier casing and use of template string - Ensure `useEffect` gets passed the deps it needs - Add scope braces around case statement where it's needed - Omit literal `true` for boolean jsx attribute - Refactor nested ternary as `if` statements * fix: revert fetchWithCache modifications * Fix linting for TransactionListItemDetails - Remove unused import - Fix import spacing - Remove unused prop dereference - Fix string interpolation for translated From/To * Moving to popover pattern * fix: sass color variable * Omit value for boolean attribute * Remove changes from modal.js * fix: refactor nickname popovers * Ensure const gets declared before it's used * Fix linting for ConfirmTransactionBase - Remove unused prop chainId - Stop destructuring an unused field * fix: refactor usage of nicknames popovers in send-content-container * fix: remove extra prop updateAccountNicknameModal * fix: refactor code for address.component * fix: remove extra tooltip * Ensure NicknamePopovers always returns component * Fix linting for NicknamePopover component - Fix useCallback deps - Switch ternary to logical-or * Fix linting for SenderToRecipient ... by fixing import order * Remove unused addressCopied state * Delete empty file * fix: remove sender-to-recipient.container * fix: refactor usage of nickname popovers in confirm-page-container * fix: bug related to state variable * Stylelint fix * Lint fix * Change "Total Amount" to "Total" * Lint fix locales * Update address-book.spec.js * e2e test update * Update e2e tests * Fix issue where absence of function params in data hex tab would result in rendering a string * Fix border radius, and width and height in small notification windows, of the update-nickname-popover * Remove fake await * Clean up * Clean up Co-authored-by: Alaa Hadad <alaahd@Alaas-MacBook-M1-Pro-14-inch.local> Co-authored-by: Dan Miller <danjm.com@gmail.com> Co-authored-by: g. nicholas d'andrea <gnidan@trufflesuite.com>
2021-12-01 18:22:08 +01:00
<TransactionBreakdownRow
divider
title={t('transactionHistoryMaxFeePerGas')}
>
<UserPreferencedCurrencyDisplay
className="transaction-breakdown__value"
currency={nativeCurrency}
denomination={ETH}
numberOfDecimals={9}
value={maxFeePerGas}
type={PRIMARY}
/>
{showFiat && (
<UserPreferencedCurrencyDisplay
className="transaction-breakdown__value"
type={SECONDARY}
value={maxFeePerGas}
/>
)}
</TransactionBreakdownRow>
)}
{isMultiLayerFeeNetwork && (
<TransactionBreakdownRow title={t('transactionHistoryL1GasLabel')}>
<UserPreferencedCurrencyDisplay
className="transaction-breakdown__value"
data-testid="transaction-breakdown__l1-gas-total"
numberOfDecimals={18}
value={l1HexGasTotal}
type={PRIMARY}
/>
{showFiat && (
<UserPreferencedCurrencyDisplay
className="transaction-breakdown__value"
type={SECONDARY}
value={l1HexGasTotal}
/>
)}
</TransactionBreakdownRow>
)}
2018-12-09 21:48:06 +01:00
<TransactionBreakdownRow title={t('total')}>
<UserPreferencedCurrencyDisplay
className="transaction-breakdown__value transaction-breakdown__value--eth-total"
type={PRIMARY}
value={totalInHex}
numberOfDecimals={isMultiLayerFeeNetwork ? 18 : null}
/>
{showFiat && (
<UserPreferencedCurrencyDisplay
className="transaction-breakdown__value"
type={SECONDARY}
2018-12-09 21:48:06 +01:00
value={totalInHex}
2018-08-31 21:36:07 +02:00
/>
)}
2018-12-09 21:48:06 +01:00
</TransactionBreakdownRow>
2018-08-31 21:36:07 +02:00
</div>
);
2018-08-31 21:36:07 +02:00
}
}