From 4d8ce7498f9decc98296b88e2951cf1b48293073 Mon Sep 17 00:00:00 2001 From: Filip Sekulic Date: Tue, 27 Sep 2022 09:21:55 +0200 Subject: [PATCH] Fixed modal and covered additional case --- app/_locales/en/messages.json | 3 + .../contract-details-modal.js | 100 +++++++++++--- .../modals/contract-details-modal/index.scss | 6 - .../contract-token-values.js | 29 +++- ui/pages/confirm-approve/confirm-approve.js | 5 + ui/pages/token-allowance/token-allowance.js | 125 +++++++++++++----- 6 files changed, 206 insertions(+), 62 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 6c2985f6600d..fd537b7a8bfe 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -3143,6 +3143,9 @@ "message": "Approve $1 with no spend limit", "description": "The token symbol that is being approved" }, + "setSpendingCap": { + "message": "Set a spending cap for your" + }, "settings": { "message": "Settings" }, diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js index 5ac65d8b2511..78274da488be 100644 --- a/ui/components/app/modals/contract-details-modal/contract-details-modal.js +++ b/ui/components/app/modals/contract-details-modal/contract-details-modal.js @@ -1,5 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { getAccountLink } from '@metamask/etherscan-link'; +import { useSelector } from 'react-redux'; import Box from '../../../ui/box'; import IconCopy from '../../../ui/icon/icon-copy'; import IconBlockExplorer from '../../../ui/icon/icon-block-explorer'; @@ -19,9 +21,26 @@ import { SIZES, BORDER_STYLE, } from '../../../../helpers/constants/design-system'; +import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard'; +import UrlIcon from '../../../ui/url-icon/url-icon'; +import { getAddressBookEntry } from '../../../../selectors'; -export default function ContractDetailsModal({ onClose, address, tokenName }) { +export default function ContractDetailsModal({ + onClose, + tokenName, + tokenAddress, + toAddress, + chainId, + rpcPrefs, + origin, + siteImage, +}) { const t = useI18nContext(); + const [copied, handleCopy] = useCopyToClipboard(); + + const addressBookEntry = useSelector((state) => ({ + data: getAddressBookEntry(state, toAddress), + })); return ( @@ -65,7 +84,7 @@ export default function ContractDetailsModal({ onClose, address, tokenName }) { > @@ -74,7 +93,7 @@ export default function ContractDetailsModal({ onClose, address, tokenName }) { variant={TYPOGRAPHY.H5} marginTop={4} > - {tokenName || ellipsify(address)} + {tokenName || ellipsify(tokenAddress)} {tokenName && ( - {ellipsify(address)} + {ellipsify(tokenAddress)} )} @@ -91,10 +110,16 @@ export default function ContractDetailsModal({ onClose, address, tokenName }) { className="contract-details-modal__content__contract__buttons" > - + @@ -105,6 +130,19 @@ export default function ContractDetailsModal({ onClose, address, tokenName }) { @@ -173,6 +218,19 @@ export default function ContractDetailsModal({ onClose, address, tokenName }) { - ); @@ -208,6 +259,11 @@ export default function ContractDetailsModal({ onClose, address, tokenName }) { ContractDetailsModal.propTypes = { onClose: PropTypes.func, - address: PropTypes.string, tokenName: PropTypes.string, + tokenAddress: PropTypes.string, + toAddress: PropTypes.string, + chainId: PropTypes.string, + rpcPrefs: PropTypes.object, + origin: PropTypes.string, + siteImage: PropTypes.string, }; diff --git a/ui/components/app/modals/contract-details-modal/index.scss b/ui/components/app/modals/contract-details-modal/index.scss index b36649fd77d7..08742c710043 100644 --- a/ui/components/app/modals/contract-details-modal/index.scss +++ b/ui/components/app/modals/contract-details-modal/index.scss @@ -22,10 +22,4 @@ } } } - - &__footer { - button + button { - margin-inline-start: 1rem; - } - } } diff --git a/ui/components/ui/contract-token-values/contract-token-values.js b/ui/components/ui/contract-token-values/contract-token-values.js index 1c7f4edb001f..1b2635ad6576 100644 --- a/ui/components/ui/contract-token-values/contract-token-values.js +++ b/ui/components/ui/contract-token-values/contract-token-values.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { getAccountLink } from '@metamask/etherscan-link'; import IconCopy from '../icon/icon-copy'; import IconBlockExplorer from '../icon/icon-block-explorer'; import Box from '../box/box'; @@ -18,7 +19,12 @@ import { import Button from '../button'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; -export default function ContractTokenValues({ address, tokenName }) { +export default function ContractTokenValues({ + address, + tokenName, + chainId, + rpcPrefs, +}) { const t = useI18nContext(); const [copied, handleCopy] = useCopyToClipboard(); @@ -62,6 +68,19 @@ export default function ContractTokenValues({ address, tokenName }) { @@ -80,4 +99,12 @@ ContractTokenValues.propTypes = { * Displayed the token name currently tracked in state */ tokenName: PropTypes.string, + /** + * Current network chainId + */ + chainId: PropTypes.string, + /** + * RPC prefs + */ + rpcPrefs: PropTypes.object, }; diff --git a/ui/pages/confirm-approve/confirm-approve.js b/ui/pages/confirm-approve/confirm-approve.js index d553f20cada2..09db32e14270 100644 --- a/ui/pages/confirm-approve/confirm-approve.js +++ b/ui/pages/confirm-approve/confirm-approve.js @@ -183,6 +183,11 @@ export default function ConfirmApprove({ data={customData || transactionData} isSetApproveForAll={isSetApproveForAll} setApproveForAllArg={setApproveForAllArg} + customTxParamsData={customData} + dappProposedTokenAmount={tokenAmount} + currentTokenBalance={tokenBalance} + toAddress={toAddress} + tokenSymbol={tokenSymbol} /> {showCustomizeGasPopover && !supportsEIP1559V2 && ( ({ + fee: transactionFeeSelector(state, fullTxData), + methodData: getKnownMethodData(state, fullTxData.txParams.data), + })); + + const networkName = + NETWORK_TO_NAME_MAP[fullTxData.chainId] || networkIdentifier; const customNonceValue = ''; const customNonceMerge = (transactionData) => @@ -85,16 +110,36 @@ export default function TokenAllowance({ } : transactionData; - const rejectTransaction = () => { - dispatch(cancelTx(txData)).then(() => { + const handleReject = () => { + dispatch(cancelTx(fullTxData)).then(() => { dispatch(clearConfirmTransaction()); dispatch(updateCustomNonce('')); history.push(mostRecentOverviewPage); }); }; - const approveTransaction = () => { - dispatch(updateAndApproveTx(customNonceMerge(txData))).then(() => { + const handleApprove = () => { + const { name } = txAdditionalData.methodData; + + if (txAdditionalData.fee.gasEstimationObject.baseFeePerGas) { + fullTxData.estimatedBaseFee = + txAdditionalData.fee.gasEstimationObject.baseFeePerGas; + } + + if (name) { + fullTxData.contractMethodName = name; + } + + if (dappProposedTokenAmount) { + fullTxData.dappProposedTokenAmount = dappProposedTokenAmount; + fullTxData.originalApprovalAmount = dappProposedTokenAmount; + } + + if (currentTokenBalance) { + fullTxData.currentTokenBalance = currentTokenBalance; + } + + dispatch(updateAndApproveTx(customNonceMerge(fullTxData))).then(() => { dispatch(clearConfirmTransaction()); dispatch(updateCustomNonce('')); history.push(mostRecentOverviewPage); @@ -204,7 +249,7 @@ export default function TokenAllowance({ {!isFirstPage && ( -