1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
Alaa Hadad e056c88ba7
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 13:52:08 -03:30

304 lines
9.0 KiB
JavaScript

import { connect } from 'react-redux';
import { compose } from 'redux';
import { withRouter } from 'react-router-dom';
import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
import {
updateCustomNonce,
cancelTx,
cancelTxs,
updateAndApproveTx,
showModal,
getNextNonce,
tryReverseResolveAddress,
setDefaultHomeActiveTabName,
} from '../../store/actions';
import { isBalanceSufficient, calcGasTotal } from '../send/send.utils';
import { shortenAddress, valuesFor } from '../../helpers/utils/util';
import {
getAdvancedInlineGasShown,
getCustomNonceValue,
getIsMainnet,
getKnownMethodData,
getMetaMaskAccounts,
getUseNonceField,
transactionFeeSelector,
getNoGasPriceFetched,
getIsEthGasPriceFetched,
getShouldShowFiat,
checkNetworkAndAccountSupports1559,
getPreferences,
doesAddressRequireLedgerHidConnection,
getUseTokenDetection,
getTokenList,
getIsMultiLayerFeeNetwork,
} from '../../selectors';
import { getMostRecentOverviewPage } from '../../ducks/history/history';
import {
isAddressLedger,
updateTransactionGasFees,
getIsGasEstimatesLoading,
getNativeCurrency,
} from '../../ducks/metamask/metamask';
import {
transactionMatchesNetwork,
txParamsAreDappSuggested,
} from '../../../shared/modules/transaction.utils';
import { toChecksumHexAddress } from '../../../shared/modules/hexstring-utils';
import { getGasLoadingAnimationIsShowing } from '../../ducks/app/app';
import { isLegacyTransaction } from '../../helpers/utils/transactions.util';
import { CUSTOM_GAS_ESTIMATE } from '../../../shared/constants/gas';
import ConfirmTransactionBase from './confirm-transaction-base.component';
let customNonceValue = '';
const customNonceMerge = (txData) =>
customNonceValue
? {
...txData,
customNonceValue,
}
: txData;
const mapStateToProps = (state, ownProps) => {
const {
toAddress: propsToAddress,
customTxParamsData,
match: { params = {} },
} = ownProps;
const { id: paramsTransactionId } = params;
const isMainnet = getIsMainnet(state);
const isGasEstimatesLoading = getIsGasEstimatesLoading(state);
const gasLoadingAnimationIsShowing = getGasLoadingAnimationIsShowing(state);
const { confirmTransaction, metamask } = state;
const {
ensResolutionsByAddress,
conversionRate,
identities,
addressBook,
network,
unapprovedTxs,
nextNonce,
provider: { chainId },
} = metamask;
const { tokenData, txData, tokenProps, nonce } = confirmTransaction;
const { txParams = {}, id: transactionId, type } = txData;
const transaction =
Object.values(unapprovedTxs).find(
({ id }) => id === (transactionId || Number(paramsTransactionId)),
) || {};
const {
from: fromAddress,
to: txParamsToAddress,
gasPrice,
gas: gasLimit,
value: amount,
data,
} = (transaction && transaction.txParams) || txParams;
const accounts = getMetaMaskAccounts(state);
const { balance } = accounts[fromAddress];
const { name: fromName } = identities[fromAddress];
const toAddress = propsToAddress || txParamsToAddress;
const tokenList = getTokenList(state);
const useTokenDetection = getUseTokenDetection(state);
const casedTokenList = useTokenDetection
? tokenList
: Object.keys(tokenList).reduce((acc, base) => {
return {
...acc,
[base.toLowerCase()]: tokenList[base],
};
}, {});
const toName =
identities[toAddress]?.name ||
casedTokenList[toAddress]?.name ||
shortenAddress(toChecksumHexAddress(toAddress));
const checksummedAddress = toChecksumHexAddress(toAddress);
const addressBookObject =
addressBook &&
addressBook[chainId] &&
addressBook[chainId][checksummedAddress];
const toEns = ensResolutionsByAddress[checksummedAddress] || '';
const toNickname = addressBookObject ? addressBookObject.name : '';
const transactionStatus = transaction ? transaction.status : '';
const supportsEIP1559 =
checkNetworkAndAccountSupports1559(state) && !isLegacyTransaction(txParams);
const {
hexTransactionAmount,
hexMinimumTransactionFee,
hexMaximumTransactionFee,
hexTransactionTotal,
gasEstimationObject,
} = transactionFeeSelector(state, transaction);
if (transaction && transaction.simulationFails) {
txData.simulationFails = transaction.simulationFails;
}
const currentNetworkUnapprovedTxs = Object.keys(unapprovedTxs)
.filter((key) =>
transactionMatchesNetwork(unapprovedTxs[key], chainId, network),
)
.reduce((acc, key) => ({ ...acc, [key]: unapprovedTxs[key] }), {});
const unapprovedTxCount = valuesFor(currentNetworkUnapprovedTxs).length;
const insufficientBalance = !isBalanceSufficient({
amount,
gasTotal: calcGasTotal(gasLimit, gasPrice),
balance,
conversionRate,
});
const methodData = getKnownMethodData(state, data) || {};
let fullTxData = { ...txData, ...transaction };
if (customTxParamsData) {
fullTxData = {
...fullTxData,
txParams: {
...fullTxData.txParams,
data: customTxParamsData,
},
};
}
customNonceValue = getCustomNonceValue(state);
const isEthGasPrice = getIsEthGasPriceFetched(state);
const noGasPrice = !supportsEIP1559 && getNoGasPriceFetched(state);
const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state);
const gasFeeIsCustom =
fullTxData.userFeeLevel === CUSTOM_GAS_ESTIMATE ||
txParamsAreDappSuggested(fullTxData);
const fromAddressIsLedger = isAddressLedger(state, fromAddress);
const nativeCurrency = getNativeCurrency(state);
const hardwareWalletRequiresConnection = doesAddressRequireLedgerHidConnection(
state,
fromAddress,
);
const isMultiLayerFeeNetwork = getIsMultiLayerFeeNetwork(state);
return {
balance,
fromAddress,
fromName,
toAddress,
toEns,
toName,
toNickname,
hexTransactionAmount,
hexMinimumTransactionFee,
hexMaximumTransactionFee,
hexTransactionTotal,
txData: fullTxData,
tokenData,
methodData,
tokenProps,
conversionRate,
transactionStatus,
nonce,
unapprovedTxs,
unapprovedTxCount,
currentNetworkUnapprovedTxs,
customGas: {
gasLimit,
gasPrice,
},
advancedInlineGasShown: getAdvancedInlineGasShown(state),
useNonceField: getUseNonceField(state),
customNonceValue,
insufficientBalance,
hideSubtitle: !getShouldShowFiat(state),
hideFiatConversion: !getShouldShowFiat(state),
type,
nextNonce,
mostRecentOverviewPage: getMostRecentOverviewPage(state),
isMainnet,
isEthGasPrice,
noGasPrice,
supportsEIP1559,
gasIsLoading: isGasEstimatesLoading || gasLoadingAnimationIsShowing,
useNativeCurrencyAsPrimaryCurrency,
maxFeePerGas: gasEstimationObject.maxFeePerGas,
maxPriorityFeePerGas: gasEstimationObject.maxPriorityFeePerGas,
baseFeePerGas: gasEstimationObject.baseFeePerGas,
gasFeeIsCustom,
showLedgerSteps: fromAddressIsLedger,
nativeCurrency,
hardwareWalletRequiresConnection,
isMultiLayerFeeNetwork,
chainId,
};
};
export const mapDispatchToProps = (dispatch) => {
return {
tryReverseResolveAddress: (address) => {
return dispatch(tryReverseResolveAddress(address));
},
updateCustomNonce: (value) => {
customNonceValue = value;
dispatch(updateCustomNonce(value));
},
clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
showTransactionConfirmedModal: ({ onSubmit }) => {
return dispatch(showModal({ name: 'TRANSACTION_CONFIRMED', onSubmit }));
},
showRejectTransactionsConfirmationModal: ({
onSubmit,
unapprovedTxCount,
}) => {
return dispatch(
showModal({ name: 'REJECT_TRANSACTIONS', onSubmit, unapprovedTxCount }),
);
},
cancelTransaction: ({ id }) => dispatch(cancelTx({ id })),
cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)),
sendTransaction: (txData) =>
dispatch(updateAndApproveTx(customNonceMerge(txData))),
getNextNonce: () => dispatch(getNextNonce()),
setDefaultHomeActiveTabName: (tabName) =>
dispatch(setDefaultHomeActiveTabName(tabName)),
updateTransactionGasFees: (gasFees) => {
dispatch(updateTransactionGasFees({ ...gasFees, expectHexWei: true }));
},
};
};
const mergeProps = (stateProps, dispatchProps, ownProps) => {
const { txData, unapprovedTxs } = stateProps;
const {
cancelAllTransactions: dispatchCancelAllTransactions,
updateTransactionGasFees: dispatchUpdateTransactionGasFees,
...otherDispatchProps
} = dispatchProps;
return {
...stateProps,
...otherDispatchProps,
...ownProps,
cancelAllTransactions: () =>
dispatchCancelAllTransactions(valuesFor(unapprovedTxs)),
updateGasAndCalculate: ({ gasLimit, gasPrice }) => {
dispatchUpdateTransactionGasFees({
gasLimit,
gasPrice,
transaction: txData,
});
},
};
};
export default compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps, mergeProps),
)(ConfirmTransactionBase);