1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/components/app/confirm-page-container/confirm-page-container.component.js

421 lines
14 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
import { GasFeeContextProvider } from '../../../contexts/gasFee';
import {
ERC1155,
ERC20,
ERC721,
TRANSACTION_TYPES,
} from '../../../../shared/constants/transaction';
import { NETWORK_TO_NAME_MAP } from '../../../../shared/constants/network';
import { PageContainerFooter } from '../../ui/page-container';
import Dialog from '../../ui/dialog';
import Button from '../../ui/button';
import ActionableMessage from '../../ui/actionable-message/actionable-message';
import SenderToRecipient from '../../ui/sender-to-recipient';
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
import NicknamePopovers from '../modals/nickname-popovers';
import AdvancedGasFeePopover from '../advanced-gas-fee-popover';
import EditGasFeePopover from '../edit-gas-fee-popover/edit-gas-fee-popover';
import EditGasPopover from '../edit-gas-popover';
import ErrorMessage from '../../ui/error-message';
import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys';
import Typography from '../../ui/typography';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header';
import DepositPopover from '../deposit-popover/deposit-popover';
import { fetchTokenBalance } from '../../../pages/swaps/swaps.util';
import SetApproveForAllWarning from '../set-approval-for-all-warning';
import EnableEIP1559V2Notice from './enableEIP1559V2-notice';
2020-11-03 00:41:28 +01:00
import {
ConfirmPageContainerHeader,
ConfirmPageContainerContent,
ConfirmPageContainerNavigation,
} from '.';
export default class ConfirmPageContainer extends Component {
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
state = {
showNicknamePopovers: false,
setShowDepositPopover: false,
collectionBalance: 0,
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
};
static contextTypes = {
t: PropTypes.func,
};
static propTypes = {
// Header
action: PropTypes.string,
2018-07-06 20:58:41 +02:00
hideSubtitle: PropTypes.bool,
onEdit: PropTypes.func,
showEdit: PropTypes.bool,
subtitleComponent: PropTypes.node,
title: PropTypes.string,
image: PropTypes.string,
titleComponent: PropTypes.node,
hideSenderToRecipient: PropTypes.bool,
showAccountInHeader: PropTypes.bool,
accountBalance: PropTypes.string,
assetStandard: PropTypes.string,
2018-07-06 20:58:41 +02:00
// Sender to Recipient
fromAddress: PropTypes.string,
fromName: PropTypes.string,
toAddress: PropTypes.string,
toName: PropTypes.string,
toMetadataName: PropTypes.string,
toEns: PropTypes.string,
toNickname: PropTypes.string,
// Content
contentComponent: PropTypes.node,
2018-07-06 20:58:41 +02:00
errorKey: PropTypes.string,
errorMessage: PropTypes.string,
dataComponent: PropTypes.node,
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
dataHexComponent: PropTypes.node,
2018-07-06 20:58:41 +02:00
detailsComponent: PropTypes.node,
///: BEGIN:ONLY_INCLUDE_IN(flask)
insightComponent: PropTypes.node,
///: END:ONLY_INCLUDE_IN
tokenAddress: PropTypes.string,
nonce: PropTypes.string,
warning: PropTypes.string,
unapprovedTxCount: PropTypes.number,
origin: PropTypes.string.isRequired,
ethGasPriceWarning: PropTypes.string,
networkIdentifier: PropTypes.string,
// Navigation
totalTx: PropTypes.number,
positionOfCurrentTx: PropTypes.number,
nextTxId: PropTypes.string,
prevTxId: PropTypes.string,
showNavigation: PropTypes.bool,
onNextTx: PropTypes.func,
firstTx: PropTypes.string,
lastTx: PropTypes.string,
ofText: PropTypes.string,
requestsWaitingText: PropTypes.string,
// Footer
onCancelAll: PropTypes.func,
onCancel: PropTypes.func,
onSubmit: PropTypes.func,
onSetApprovalForAll: PropTypes.func,
showWarningModal: PropTypes.bool,
disabled: PropTypes.bool,
2021-07-08 22:23:00 +02:00
editingGas: PropTypes.bool,
handleCloseEditGas: PropTypes.func,
// Gas Popover
currentTransaction: PropTypes.object.isRequired,
contact: PropTypes.object,
isOwnedAccount: PropTypes.bool,
supportsEIP1559V2: PropTypes.bool,
nativeCurrency: PropTypes.string,
isBuyableChain: PropTypes.bool,
};
async componentDidMount() {
const { tokenAddress, fromAddress, currentTransaction, assetStandard } =
this.props;
const isSetApproveForAll =
currentTransaction.type ===
TRANSACTION_TYPES.TOKEN_METHOD_SET_APPROVAL_FOR_ALL;
if (isSetApproveForAll && assetStandard === ERC721) {
const tokenBalance = await fetchTokenBalance(tokenAddress, fromAddress);
this.setState({
collectionBalance: tokenBalance?.balance?.words?.[0] || 0,
});
}
}
2020-11-03 00:41:28 +01:00
render() {
const {
showEdit,
onEdit,
fromName,
fromAddress,
toName,
toMetadataName,
toEns,
toNickname,
toAddress,
disabled,
2018-07-06 20:58:41 +02:00
errorKey,
errorMessage,
contentComponent,
action,
title,
image,
titleComponent,
subtitleComponent,
hideSubtitle,
detailsComponent,
dataComponent,
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
dataHexComponent,
onCancelAll,
onCancel,
onSubmit,
onSetApprovalForAll,
showWarningModal,
tokenAddress,
nonce,
unapprovedTxCount,
warning,
totalTx,
positionOfCurrentTx,
nextTxId,
prevTxId,
showNavigation,
onNextTx,
firstTx,
lastTx,
ofText,
requestsWaitingText,
hideSenderToRecipient,
showAccountInHeader,
origin,
ethGasPriceWarning,
2021-07-08 22:23:00 +02:00
editingGas,
handleCloseEditGas,
currentTransaction,
contact = {},
isOwnedAccount,
supportsEIP1559V2,
nativeCurrency,
isBuyableChain,
networkIdentifier,
///: BEGIN:ONLY_INCLUDE_IN(flask)
insightComponent,
///: END:ONLY_INCLUDE_IN
accountBalance,
assetStandard,
} = this.props;
const showAddToAddressDialog =
!contact.name && toAddress && !isOwnedAccount && !hideSenderToRecipient;
const shouldDisplayWarning =
contentComponent && disabled && (errorKey || errorMessage);
const hideTitle =
(currentTransaction.type === TRANSACTION_TYPES.CONTRACT_INTERACTION ||
currentTransaction.type === TRANSACTION_TYPES.DEPLOY_CONTRACT) &&
currentTransaction.txParams?.value === '0x0';
const networkName =
NETWORK_TO_NAME_MAP[currentTransaction.chainId] || networkIdentifier;
const isSetApproveForAll =
currentTransaction.type ===
TRANSACTION_TYPES.TOKEN_METHOD_SET_APPROVAL_FOR_ALL;
const { setShowDepositPopover } = this.state;
const { t } = this.context;
return (
<GasFeeContextProvider transaction={currentTransaction}>
<div className="page-container" data-testid="page-container">
<ConfirmPageContainerNavigation
totalTx={totalTx}
positionOfCurrentTx={positionOfCurrentTx}
nextTxId={nextTxId}
prevTxId={prevTxId}
showNavigation={showNavigation}
onNextTx={(txId) => onNextTx(txId)}
firstTx={firstTx}
lastTx={lastTx}
ofText={ofText}
requestsWaitingText={requestsWaitingText}
/>
{assetStandard === ERC20 ||
assetStandard === ERC721 ||
assetStandard === ERC1155 ? (
<NetworkAccountBalanceHeader
accountName={fromName}
accountBalance={accountBalance}
tokenName={nativeCurrency}
accountAddress={fromAddress}
networkName={networkName}
chainId={currentTransaction.chainId}
/>
) : (
<ConfirmPageContainerHeader
showEdit={showEdit}
onEdit={() => onEdit()}
showAccountInHeader={showAccountInHeader}
accountAddress={fromAddress}
>
{hideSenderToRecipient ? null : (
<SenderToRecipient
senderName={fromName}
senderAddress={fromAddress}
recipientName={toName}
recipientMetadataName={toMetadataName}
recipientAddress={toAddress}
recipientEns={toEns}
recipientNickname={toNickname}
/>
)}
</ConfirmPageContainerHeader>
)}
<div>
{showAddToAddressDialog && (
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
<>
<Dialog
type="message"
className="send__dialog"
onClick={() => this.setState({ showNicknamePopovers: true })}
>
{t('newAccountDetectedDialogMessage')}
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
</Dialog>
{this.state.showNicknamePopovers ? (
<NicknamePopovers
onClose={() =>
this.setState({ showNicknamePopovers: false })
}
address={toAddress}
/>
) : null}
</>
)}
</div>
<EnableEIP1559V2Notice isFirstAlert={!showAddToAddressDialog} />
{contentComponent || (
<ConfirmPageContainerContent
action={action}
title={title}
image={image}
titleComponent={titleComponent}
subtitleComponent={subtitleComponent}
hideSubtitle={hideSubtitle}
detailsComponent={detailsComponent}
dataComponent={dataComponent}
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
dataHexComponent={dataHexComponent}
///: BEGIN:ONLY_INCLUDE_IN(flask)
insightComponent={insightComponent}
///: END:ONLY_INCLUDE_IN
errorMessage={errorMessage}
errorKey={errorKey}
tokenAddress={tokenAddress}
nonce={nonce}
warning={warning}
onCancelAll={onCancelAll}
onCancel={onCancel}
cancelText={t('reject')}
onSubmit={onSubmit}
submitText={t('confirm')}
disabled={disabled}
unapprovedTxCount={unapprovedTxCount}
rejectNText={t('rejectTxsN', [unapprovedTxCount])}
origin={origin}
ethGasPriceWarning={ethGasPriceWarning}
hideTitle={hideTitle}
supportsEIP1559V2={supportsEIP1559V2}
hasTopBorder={showAddToAddressDialog}
currentTransaction={currentTransaction}
nativeCurrency={nativeCurrency}
networkName={networkName}
toAddress={toAddress}
transactionType={currentTransaction.type}
isBuyableChain={isBuyableChain}
/>
2020-11-03 00:41:28 +01:00
)}
{shouldDisplayWarning && errorKey === INSUFFICIENT_FUNDS_ERROR_KEY && (
<div className="confirm-approve-content__warning">
<ActionableMessage
message={
isBuyableChain ? (
<Typography variant={TYPOGRAPHY.H7} align="left">
{t('insufficientCurrencyBuyOrDeposit', [
nativeCurrency,
networkName,
<Button
type="inline"
className="confirm-page-container-content__link"
onClick={() =>
this.setState({ setShowDepositPopover: true })
}
key={`${nativeCurrency}-buy-button`}
>
{t('buyAsset', [nativeCurrency])}
</Button>,
])}
</Typography>
) : (
<Typography variant={TYPOGRAPHY.H7} align="left">
{t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,
])}
</Typography>
)
}
useIcon
iconFillColor="var(--color-error-default)"
type="danger"
/>
</div>
)}
{setShowDepositPopover && (
<DepositPopover
onClose={() => this.setState({ setShowDepositPopover: false })}
/>
)}
{shouldDisplayWarning && errorKey !== INSUFFICIENT_FUNDS_ERROR_KEY && (
<div className="confirm-approve-content__warning">
<ErrorMessage errorKey={errorKey} />
</div>
)}
{showWarningModal && (
<SetApproveForAllWarning
collectionName={title}
senderAddress={fromAddress}
name={fromName}
isERC721={assetStandard === ERC721}
total={this.state.collectionBalance}
onSubmit={onSubmit}
onCancel={onCancel}
/>
)}
{contentComponent && (
<PageContainerFooter
onCancel={onCancel}
cancelText={t('reject')}
onSubmit={isSetApproveForAll ? onSetApprovalForAll : onSubmit}
submitText={t('confirm')}
submitButtonType={
isSetApproveForAll ? 'danger-primary' : 'primary'
}
disabled={disabled}
>
{unapprovedTxCount > 1 && (
<a onClick={onCancelAll}>
{t('rejectTxsN', [unapprovedTxCount])}
</a>
)}
</PageContainerFooter>
)}
{editingGas && !supportsEIP1559V2 && (
<EditGasPopover
mode={EDIT_GAS_MODES.MODIFY_IN_PLACE}
onClose={handleCloseEditGas}
transaction={currentTransaction}
/>
)}
2021-12-12 00:26:28 +01:00
{supportsEIP1559V2 && (
<>
<EditGasFeePopover />
<AdvancedGasFeePopover />
</>
)}
</div>
</GasFeeContextProvider>
);
}
}