1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
metamask-extension/ui/pages/confirm-approve/confirm-approve.js
amerkadicE 8885c54f13
NFT setApprovalForAll warning popover (#16195)
* NFT setApprovalForAll  warning popover
2022-12-06 14:24:07 -06:00

363 lines
12 KiB
JavaScript

import React, { useEffect, useRef, useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import ConfirmTransactionBase from '../confirm-transaction-base';
import { EDIT_GAS_MODES } from '../../../shared/constants/gas';
import {
showModal,
updateCustomNonce,
getNextNonce,
} from '../../store/actions';
import { getTokenApprovedParam } from '../../helpers/utils/token-util';
import { readAddressAsContract } from '../../../shared/modules/contract-utils';
import { GasFeeContextProvider } from '../../contexts/gasFee';
import { TransactionModalContextProvider } from '../../contexts/transaction-modal';
import {
getNativeCurrency,
isAddressLedger,
} from '../../ducks/metamask/metamask';
import {
getCurrentCurrency,
getSubjectMetadata,
getUseNonceField,
getCustomNonceValue,
getNextSuggestedNonce,
getCurrentChainId,
getRpcPrefsForCurrentProvider,
getIsMultiLayerFeeNetwork,
checkNetworkAndAccountSupports1559,
getEIP1559V2Enabled,
getIsImprovedTokenAllowanceEnabled,
} from '../../selectors';
import { useApproveTransaction } from '../../hooks/useApproveTransaction';
import AdvancedGasFeePopover from '../../components/app/advanced-gas-fee-popover';
import EditGasFeePopover from '../../components/app/edit-gas-fee-popover';
import EditGasPopover from '../../components/app/edit-gas-popover/edit-gas-popover.component';
import Loading from '../../components/ui/loading-screen';
import { parseStandardTokenTransactionData } from '../../../shared/modules/transaction.utils';
import { ERC1155, ERC20, ERC721 } from '../../../shared/constants/transaction';
import { calcTokenAmount } from '../../../shared/lib/transactions-controller-utils';
import TokenAllowance from '../token-allowance/token-allowance';
import { getCustomTxParamsData } from './confirm-approve.util';
import ConfirmApproveContent from './confirm-approve-content';
const isAddressLedgerByFromAddress = (address) => (state) => {
return isAddressLedger(state, address);
};
export default function ConfirmApprove({
assetStandard,
assetName,
userBalance,
tokenSymbol,
decimals,
tokenImage,
tokenAmount,
tokenId,
userAddress,
toAddress,
tokenAddress,
transaction,
ethTransactionTotal,
fiatTransactionTotal,
hexTransactionTotal,
isSetApproveForAll,
}) {
const dispatch = useDispatch();
const { txParams: { data: transactionData } = {} } = transaction;
const currentCurrency = useSelector(getCurrentCurrency);
const nativeCurrency = useSelector(getNativeCurrency);
const subjectMetadata = useSelector(getSubjectMetadata);
const useNonceField = useSelector(getUseNonceField);
const nextNonce = useSelector(getNextSuggestedNonce);
const customNonceValue = useSelector(getCustomNonceValue);
const chainId = useSelector(getCurrentChainId);
const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
const isMultiLayerFeeNetwork = useSelector(getIsMultiLayerFeeNetwork);
const networkAndAccountSupports1559 = useSelector(
checkNetworkAndAccountSupports1559,
);
const fromAddressIsLedger = useSelector(
isAddressLedgerByFromAddress(userAddress),
);
const [customPermissionAmount, setCustomPermissionAmount] = useState('');
const [submitWarning, setSubmitWarning] = useState('');
const [isContract, setIsContract] = useState(false);
const eip1559V2Enabled = useSelector(getEIP1559V2Enabled);
const supportsEIP1559V2 = eip1559V2Enabled && networkAndAccountSupports1559;
const improvedTokenAllowanceEnabled = useSelector(
getIsImprovedTokenAllowanceEnabled,
);
const previousTokenAmount = useRef(tokenAmount);
const {
approveTransaction,
showCustomizeGasPopover,
closeCustomizeGasPopover,
} = useApproveTransaction();
useEffect(() => {
if (customPermissionAmount && previousTokenAmount.current !== tokenAmount) {
setCustomPermissionAmount(tokenAmount);
}
previousTokenAmount.current = tokenAmount;
}, [customPermissionAmount, tokenAmount]);
const prevNonce = useRef(nextNonce);
const prevCustomNonce = useRef(customNonceValue);
useEffect(() => {
if (
prevNonce.current !== nextNonce ||
prevCustomNonce.current !== customNonceValue
) {
if (nextNonce !== null && customNonceValue > nextNonce) {
setSubmitWarning(
`Nonce is higher than suggested nonce of ${nextNonce}`,
);
} else {
setSubmitWarning('');
}
}
prevCustomNonce.current = customNonceValue;
prevNonce.current = nextNonce;
}, [customNonceValue, nextNonce]);
const checkIfContract = useCallback(async () => {
const { isContractAddress } = await readAddressAsContract(
global.eth,
toAddress,
);
setIsContract(isContractAddress);
}, [setIsContract, toAddress]);
useEffect(() => {
checkIfContract();
}, [checkIfContract]);
const { origin } = transaction;
const formattedOrigin = origin || '';
const { iconUrl: siteImage = '' } = subjectMetadata[origin] || {};
let tokensText;
if (assetStandard === ERC20) {
tokensText = `${Number(tokenAmount)} ${tokenSymbol}`;
} else if (assetStandard === ERC721 || assetStandard === ERC1155) {
tokensText = assetName;
}
const tokenBalance = userBalance
? calcTokenAmount(userBalance, decimals).toString(10)
: '';
const customData = customPermissionAmount
? getCustomTxParamsData(transactionData, {
customPermissionAmount,
decimals,
})
: null;
const parsedTransactionData =
parseStandardTokenTransactionData(transactionData);
const isApprovalOrRejection = getTokenApprovedParam(parsedTransactionData);
if (tokenSymbol === undefined && assetName === undefined) {
return <Loading />;
}
if (improvedTokenAllowanceEnabled && assetStandard === ERC20) {
return (
<GasFeeContextProvider transaction={transaction}>
<TransactionModalContextProvider>
<TokenAllowance
origin={formattedOrigin}
siteImage={siteImage}
showCustomizeGasModal={approveTransaction}
useNonceField={useNonceField}
currentCurrency={currentCurrency}
nativeCurrency={nativeCurrency}
ethTransactionTotal={ethTransactionTotal}
fiatTransactionTotal={fiatTransactionTotal}
hexTransactionTotal={hexTransactionTotal}
txData={transaction}
isMultiLayerFeeNetwork={isMultiLayerFeeNetwork}
supportsEIP1559V2={supportsEIP1559V2}
userAddress={userAddress}
tokenAddress={tokenAddress}
data={transactionData}
isSetApproveForAll={isSetApproveForAll}
isApprovalOrRejection={isApprovalOrRejection}
dappProposedTokenAmount={tokenAmount}
currentTokenBalance={tokenBalance}
toAddress={toAddress}
tokenSymbol={tokenSymbol}
decimals={decimals}
/>
{showCustomizeGasPopover && !supportsEIP1559V2 && (
<EditGasPopover
onClose={closeCustomizeGasPopover}
mode={EDIT_GAS_MODES.MODIFY_IN_PLACE}
transaction={transaction}
/>
)}
{supportsEIP1559V2 && (
<>
<EditGasFeePopover />
<AdvancedGasFeePopover />
</>
)}
</TransactionModalContextProvider>
</GasFeeContextProvider>
);
}
return (
<GasFeeContextProvider transaction={transaction}>
<ConfirmTransactionBase
toAddress={toAddress}
identiconAddress={toAddress}
showAccountInHeader
title={tokensText}
tokenAddress={tokenAddress}
customTokenAmount={String(customPermissionAmount)}
dappProposedTokenAmount={tokenAmount}
currentTokenBalance={tokenBalance}
isApprovalOrRejection={isApprovalOrRejection}
contentComponent={
<TransactionModalContextProvider>
<ConfirmApproveContent
userAddress={userAddress}
isSetApproveForAll={isSetApproveForAll}
isApprovalOrRejection={isApprovalOrRejection}
decimals={decimals}
siteImage={siteImage}
setCustomAmount={setCustomPermissionAmount}
customTokenAmount={String(customPermissionAmount)}
tokenAmount={tokenAmount}
origin={formattedOrigin}
tokenSymbol={tokenSymbol}
tokenImage={tokenImage}
tokenBalance={tokenBalance}
tokenId={tokenId}
assetName={assetName}
assetStandard={assetStandard}
tokenAddress={tokenAddress}
showCustomizeGasModal={approveTransaction}
showEditApprovalPermissionModal={({
/* eslint-disable no-shadow */
customTokenAmount,
decimals,
origin,
setCustomAmount,
tokenAmount,
tokenBalance,
tokenSymbol,
/* eslint-enable no-shadow */
}) =>
dispatch(
showModal({
name: 'EDIT_APPROVAL_PERMISSION',
customTokenAmount,
decimals,
origin,
setCustomAmount,
tokenAmount,
tokenBalance,
tokenSymbol,
tokenId,
assetStandard,
}),
)
}
data={customData || transactionData}
toAddress={toAddress}
currentCurrency={currentCurrency}
nativeCurrency={nativeCurrency}
ethTransactionTotal={ethTransactionTotal}
fiatTransactionTotal={fiatTransactionTotal}
hexTransactionTotal={hexTransactionTotal}
useNonceField={useNonceField}
nextNonce={nextNonce}
customNonceValue={customNonceValue}
updateCustomNonce={(value) => {
dispatch(updateCustomNonce(value));
}}
getNextNonce={() => dispatch(getNextNonce())}
showCustomizeNonceModal={({
/* eslint-disable no-shadow */
useNonceField,
nextNonce,
customNonceValue,
updateCustomNonce,
getNextNonce,
/* eslint-disable no-shadow */
}) =>
dispatch(
showModal({
name: 'CUSTOMIZE_NONCE',
useNonceField,
nextNonce,
customNonceValue,
updateCustomNonce,
getNextNonce,
}),
)
}
warning={submitWarning}
txData={transaction}
fromAddressIsLedger={fromAddressIsLedger}
chainId={chainId}
rpcPrefs={rpcPrefs}
isContract={isContract}
isMultiLayerFeeNetwork={isMultiLayerFeeNetwork}
supportsEIP1559V2={supportsEIP1559V2}
/>
{showCustomizeGasPopover && !supportsEIP1559V2 && (
<EditGasPopover
onClose={closeCustomizeGasPopover}
mode={EDIT_GAS_MODES.MODIFY_IN_PLACE}
transaction={transaction}
/>
)}
{supportsEIP1559V2 && (
<>
<EditGasFeePopover />
<AdvancedGasFeePopover />
</>
)}
</TransactionModalContextProvider>
}
hideSenderToRecipient
customTxParamsData={customData}
assetStandard={assetStandard}
/>
</GasFeeContextProvider>
);
}
ConfirmApprove.propTypes = {
assetStandard: PropTypes.string,
assetName: PropTypes.string,
tokenAddress: PropTypes.string,
userBalance: PropTypes.string,
tokenSymbol: PropTypes.string,
decimals: PropTypes.string,
tokenImage: PropTypes.string,
tokenAmount: PropTypes.string,
tokenId: PropTypes.string,
userAddress: PropTypes.string,
toAddress: PropTypes.string,
transaction: PropTypes.shape({
origin: PropTypes.string,
txParams: PropTypes.shape({
data: PropTypes.string,
to: PropTypes.string,
from: PropTypes.string,
}),
}),
ethTransactionTotal: PropTypes.string,
fiatTransactionTotal: PropTypes.string,
hexTransactionTotal: PropTypes.string,
isSetApproveForAll: PropTypes.bool,
};