From a943c755e6052b018719dcb6f327d88e67db77d5 Mon Sep 17 00:00:00 2001 From: Filip Sekulic Date: Mon, 10 Oct 2022 16:43:46 +0200 Subject: [PATCH 1/5] Token allowance screen updated --- app/_locales/en/messages.json | 3 + .../custom-spending-cap.js | 64 +++++++++----- .../custom-spending-cap.stories.js | 7 +- .../app/custom-spending-cap/index.scss | 11 +++ ui/ducks/app/app.js | 10 +++ ui/pages/token-allowance/token-allowance.js | 85 ++++++++++++++++--- ui/selectors/selectors.js | 4 + ui/store/actionConstants.js | 3 + 8 files changed, 152 insertions(+), 35 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 2ffc886b6da4..69f3891ff0bd 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -2938,6 +2938,9 @@ "message": "By revoking permission, the following $1 will no longer be able to access your $2", "description": "$1 is either key 'account' or 'contract', and $2 is either a string or link of a given token symbol or name" }, + "revokeSpendingCap": { + "message": "Revoke spending cap for your" + }, "revokeSpendingCapTooltipText": { "message": "This contract will be unable to spend any more of your current or future tokens." }, diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/ui/components/app/custom-spending-cap/custom-spending-cap.js index b2b4d9d012f2..12cbc023adb8 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap.js @@ -1,4 +1,5 @@ -import React, { useState, useContext } from 'react'; +import React, { useState, useContext, useEffect } from 'react'; +import { useSelector } from 'react-redux'; import PropTypes from 'prop-types'; import { I18nContext } from '../../../contexts/i18n'; import Box from '../../ui/box'; @@ -15,6 +16,7 @@ import { JUSTIFY_CONTENT, SIZES, } from '../../../helpers/constants/design-system'; +import { getCustomTokenAmount } from '../../../selectors'; import { CustomSpendingCapTooltip } from './custom-spending-cap-tooltip'; export default function CustomSpendingCap({ @@ -22,12 +24,16 @@ export default function CustomSpendingCap({ currentTokenBalance, dappProposedValue, siteOrigin, - onEdit, + passTheCurrentValue, + passTheErrorText, }) { const t = useContext(I18nContext); - const [value, setValue] = useState(''); - const [customSpendingCapText, setCustomSpendingCapText] = useState(''); + + const customTokenAmount = useSelector(getCustomTokenAmount); + + const [value, setValue] = useState(customTokenAmount); const [error, setError] = useState(''); + const [showUseDefaultButton, setShowUseDefaultButton] = useState(true); const inputLogicEmptyStateText = t('inputLogicEmptyState'); const getInputTextLogic = (inputNumber) => { @@ -57,6 +63,10 @@ export default function CustomSpendingCap({ }; }; + const [customSpendingCapText, setCustomSpendingCapText] = useState( + getInputTextLogic(customTokenAmount).description, + ); + const handleChange = (valueInput) => { let spendingCapError = ''; const inputTextLogic = getInputTextLogic(valueInput); @@ -72,8 +82,19 @@ export default function CustomSpendingCap({ } setValue(valueInput); + passTheCurrentValue(valueInput); }; + useEffect(() => { + if (value !== dappProposedValue) { + setShowUseDefaultButton(true); + } + }, [value, dappProposedValue]); + + useEffect(() => { + passTheErrorText(error); + }, [error, passTheErrorText]); + const chooseTooltipContentText = value > currentTokenBalance ? t('warningTooltipText', [ @@ -131,6 +152,7 @@ export default function CustomSpendingCap({ } > { - e.preventDefault(); - if (value <= currentTokenBalance || error) { + showUseDefaultButton && ( + + }} + > + {t('useDefault')} + + ) } titleDetailWrapperProps={{ marginBottom: 2, marginRight: 0 }} /> @@ -201,7 +221,11 @@ CustomSpendingCap.propTypes = { */ siteOrigin: PropTypes.string, /** - * onClick handler for the Edit link + * Parent component's callback function passed in order to get the input value + */ + passTheCurrentValue: PropTypes.func, + /** + * Parent component's callback function passed in order to get the error text */ - onEdit: PropTypes.func, + passTheErrorText: PropTypes.func, }; diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js b/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js index a8f757926fb1..e06bbb601a42 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js @@ -17,8 +17,11 @@ export default { siteOrigin: { control: { type: 'text' }, }, - onEdit: { - action: 'onEdit', + passTheCurrentValue: { + action: 'passTheCurrentValue', + }, + passTheErrorText: { + action: 'passTheErrorText', }, }, args: { diff --git a/ui/components/app/custom-spending-cap/index.scss b/ui/components/app/custom-spending-cap/index.scss index 00ae12252ed7..eb2100d24a5d 100644 --- a/ui/components/app/custom-spending-cap/index.scss +++ b/ui/components/app/custom-spending-cap/index.scss @@ -21,6 +21,7 @@ position: absolute; margin-top: 55px; margin-inline-start: -75px; + z-index: 1; } } @@ -28,4 +29,14 @@ color: var(--color-error-default); padding-inline-end: 60px; } + + input[type='number']::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + } + + input[type='number']:hover::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + } } diff --git a/ui/ducks/app/app.js b/ui/ducks/app/app.js index 78fb56fb62ef..9cb5e57c537a 100644 --- a/ui/ducks/app/app.js +++ b/ui/ducks/app/app.js @@ -63,6 +63,7 @@ export default function reduceApp(state = {}, action) { newTokensImported: '', newCustomNetworkAdded: {}, onboardedInThisUISession: false, + customTokenAmount: '', ...state, }; @@ -412,6 +413,11 @@ export default function reduceApp(state = {}, action) { ...appState, onboardedInThisUISession: action.value, }; + case actionConstants.SET_CUSTOM_TOKEN_AMOUNT: + return { + ...appState, + customTokenAmount: action.value, + }; default: return appState; } @@ -481,3 +487,7 @@ export function setNewCustomNetworkAdded(value) { export function setOnBoardedInThisUISession(value) { return { type: actionConstants.ONBOARDED_IN_THIS_UI_SESSION, value }; } + +export function setCustomTokenAmount(value) { + return { type: actionConstants.SET_CUSTOM_TOKEN_AMOUNT, value }; +} diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js index 201c0a36439d..4420728818ff 100644 --- a/ui/pages/token-allowance/token-allowance.js +++ b/ui/pages/token-allowance/token-allowance.js @@ -29,6 +29,7 @@ import { transactionFeeSelector, getKnownMethodData, getRpcPrefsForCurrentProvider, + getCustomTokenAmount, } from '../../selectors'; import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network'; import { @@ -39,6 +40,10 @@ import { import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck'; import { getMostRecentOverviewPage } from '../../ducks/history/history'; import ApproveContentCard from '../../components/app/approve-content-card/approve-content-card'; +import CustomSpendingCap from '../../components/app/custom-spending-cap/custom-spending-cap'; +import Dialog from '../../components/ui/dialog'; +import { useGasFeeContext } from '../../contexts/gasFee'; +import { setCustomTokenAmount } from '../../ducks/app/app'; export default function TokenAllowance({ origin, @@ -71,11 +76,15 @@ export default function TokenAllowance({ const [showContractDetails, setShowContractDetails] = useState(false); const [showFullTxDetails, setShowFullTxDetails] = useState(false); - const [isFirstPage, setIsFirstPage] = useState(false); + const [isFirstPage, setIsFirstPage] = useState(true); + const [customTokenAmountInputValue, setCustomTokenAmountInputValue] = + useState(''); + const [errorText, setErrorText] = useState(''); const currentAccount = useSelector(getCurrentAccountWithSendEtherInfo); const networkIdentifier = useSelector(getNetworkIdentifier); const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider); + const customTokenAmount = useSelector(getCustomTokenAmount); let fullTxData = { ...txData }; @@ -92,6 +101,13 @@ export default function TokenAllowance({ const fee = useSelector((state) => transactionFeeSelector(state, fullTxData)); const methodData = useSelector((state) => getKnownMethodData(state, data)); + const { balanceError } = useGasFeeContext(); + + const disableNextButton = + isFirstPage && (customTokenAmountInputValue === '' || errorText !== ''); + + const disableApproveButton = !isFirstPage && balanceError; + const networkName = NETWORK_TO_NAME_MAP[fullTxData.chainId] || networkIdentifier; @@ -105,9 +121,10 @@ export default function TokenAllowance({ : transactionData; const handleReject = () => { + dispatch(updateCustomNonce('')); + dispatch(cancelTx(fullTxData)).then(() => { dispatch(clearConfirmTransaction()); - dispatch(updateCustomNonce('')); history.push(mostRecentOverviewPage); }); }; @@ -128,17 +145,36 @@ export default function TokenAllowance({ fullTxData.originalApprovalAmount = dappProposedTokenAmount; } + if (customTokenAmount) { + txData.customTokenAmount = customTokenAmount; + txData.finalApprovalAmount = customTokenAmount; + } else if (dappProposedTokenAmount !== undefined) { + txData.finalApprovalAmount = dappProposedTokenAmount; + } + if (currentTokenBalance) { fullTxData.currentTokenBalance = currentTokenBalance; } + dispatch(updateCustomNonce('')); + dispatch(updateAndApproveTx(customNonceMerge(fullTxData))).then(() => { dispatch(clearConfirmTransaction()); - dispatch(updateCustomNonce('')); history.push(mostRecentOverviewPage); }); }; + const handleNextClick = () => { + dispatch(setCustomTokenAmount(customTokenAmountInputValue)); + setShowFullTxDetails(false); + setIsFirstPage(false); + }; + + const handleBackClick = () => { + setShowFullTxDetails(false); + setIsFirstPage(true); + }; + return ( {!isFirstPage && ( - - setIsFirstPage(true)} - /> + {isFirstPage ? ( + + setCustomTokenAmountInputValue(inputValue) + } + passTheErrorText={(value) => setErrorText(value)} + /> + ) : ( + handleBackClick()} + /> + )} + {!isFirstPage && balanceError && ( + + {t('insufficientFundsForGas')} + + )} {!isFirstPage && ( handleReject()} - onSubmit={() => (isFirstPage ? setIsFirstPage(false) : handleApprove())} + onSubmit={() => (isFirstPage ? handleNextClick() : handleApprove())} + disabled={disableNextButton || disableApproveButton} /> {showContractDetails && ( Date: Mon, 10 Oct 2022 17:38:32 +0200 Subject: [PATCH 2/5] Lint fixed --- ui/components/app/custom-spending-cap/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/app/custom-spending-cap/index.scss b/ui/components/app/custom-spending-cap/index.scss index eb2100d24a5d..3d2c387f23c9 100644 --- a/ui/components/app/custom-spending-cap/index.scss +++ b/ui/components/app/custom-spending-cap/index.scss @@ -34,7 +34,7 @@ -webkit-appearance: none; display: none; } - + input[type='number']:hover::-webkit-inner-spin-button { -webkit-appearance: none; display: none; From da2438db944c8dc9e43c9033d91f02b5e1af436a Mon Sep 17 00:00:00 2001 From: Filip Sekulic Date: Tue, 11 Oct 2022 12:31:49 +0200 Subject: [PATCH 3/5] Added storybook for approveContentCard component --- .../approve-content-card.js | 63 ++++++ .../approve-content-card.stories.js | 196 ++++++++++++++++++ 2 files changed, 259 insertions(+) create mode 100644 ui/components/app/approve-content-card/approve-content-card.stories.js diff --git a/ui/components/app/approve-content-card/approve-content-card.js b/ui/components/app/approve-content-card/approve-content-card.js index 34b7e3ee9368..2e821eaa0807 100644 --- a/ui/components/app/approve-content-card/approve-content-card.js +++ b/ui/components/app/approve-content-card/approve-content-card.js @@ -217,25 +217,88 @@ export default function ApproveContentCard({ } ApproveContentCard.propTypes = { + /** + * Whether to show header including icon, transaction fee text and edit button + */ showHeader: PropTypes.bool, + /** + * Symbol icon + */ symbol: PropTypes.node, + /** + * Title to be included in the header + */ title: PropTypes.string, + /** + * Whether to show edit button or not + */ showEdit: PropTypes.bool, + /** + * Whether to show advanced gas fee options or not + */ showAdvanceGasFeeOptions: PropTypes.bool, + /** + * Should open customize gas modal when edit button is clicked + */ onEditClick: PropTypes.func, + /** + * Footer to be shown + */ footer: PropTypes.node, + /** + * Whether to include border-bottom or not + */ noBorder: PropTypes.bool, + /** + * Is enhanced gas fee enabled or not + */ supportsEIP1559V2: PropTypes.bool, + /** + * Whether to render transaction details content or not + */ renderTransactionDetailsContent: PropTypes.bool, + /** + * Whether to render data content or not + */ renderDataContent: PropTypes.bool, + /** + * Is multi-layer fee network or not + */ isMultiLayerFeeNetwork: PropTypes.bool, + /** + * Total sum of the transaction in native currency + */ ethTransactionTotal: PropTypes.string, + /** + * Current native currency + */ nativeCurrency: PropTypes.string, + /** + * Current transaction + */ fullTxData: PropTypes.object, + /** + * Total sum of the transaction converted to hex value + */ hexTransactionTotal: PropTypes.string, + /** + * Total sum of the transaction in fiat currency + */ fiatTransactionTotal: PropTypes.string, + /** + * Current fiat currency + */ currentCurrency: PropTypes.string, + /** + * Is set approve for all or not + */ isSetApproveForAll: PropTypes.bool, + /** + * Whether a current set approval for all transaction will approve or revoke access + */ isApprovalOrRejection: PropTypes.bool, + /** + * Current transaction data + */ data: PropTypes.string, }; diff --git a/ui/components/app/approve-content-card/approve-content-card.stories.js b/ui/components/app/approve-content-card/approve-content-card.stories.js new file mode 100644 index 000000000000..113b35384576 --- /dev/null +++ b/ui/components/app/approve-content-card/approve-content-card.stories.js @@ -0,0 +1,196 @@ +import React from 'react'; +import ApproveContentCard from './approve-content-card'; + +export default { + title: 'Components/App/ApproveContentCard', + id: __filename, + argTypes: { + showHeader: { + control: 'boolean', + }, + symbol: { + control: 'array', + }, + title: { + control: 'text', + }, + showEdit: { + control: 'boolean', + }, + showAdvanceGasFeeOptions: { + control: 'boolean', + }, + footer: { + control: 'array', + }, + noBorder: { + control: 'boolean', + }, + supportsEIP1559V2: { + control: 'boolean', + }, + renderTransactionDetailsContent: { + control: 'boolean', + }, + renderDataContent: { + control: 'boolean', + }, + isMultiLayerFeeNetwork: { + control: 'boolean', + }, + ethTransactionTotal: { + control: 'text', + }, + nativeCurrency: { + control: 'text', + }, + fullTxData: { + control: 'object', + }, + hexTransactionTotal: { + control: 'text', + }, + fiatTransactionTotal: { + control: 'text', + }, + currentCurrency: { + control: 'text', + }, + isSetApproveForAll: { + control: 'boolean', + }, + isApprovalOrRejection: { + control: 'boolean', + }, + data: { + control: 'text', + }, + onEditClick: { + control: 'onEditClick', + }, + }, + args: { + showHeader: true, + symbol: , + title: 'Transaction fee', + showEdit: true, + showAdvanceGasFeeOptions: true, + noBorder: true, + supportsEIP1559V2: false, + renderTransactionDetailsContent: true, + renderDataContent: false, + isMultiLayerFeeNetwork: false, + ethTransactionTotal: '0.0012', + nativeCurrency: 'GoerliETH', + hexTransactionTotal: '0x44364c5bb0000', + fiatTransactionTotal: '1.54', + currentCurrency: 'usd', + isSetApproveForAll: false, + isApprovalOrRejection: false, + data: '', + fullTxData: { + id: 3049568294499567, + time: 1664449552289, + status: 'unapproved', + metamaskNetworkId: '3', + originalGasEstimate: '0xea60', + userEditedGasLimit: false, + chainId: '0x3', + loadingDefaults: false, + dappSuggestedGasFees: { + gasPrice: '0x4a817c800', + gas: '0xea60', + }, + sendFlowHistory: [], + txParams: { + from: '0xdd34b35ca1de17dfcdc07f79ff1f8f94868c40a1', + to: '0x55797717b9947b31306f4aac7ad1365c6e3923bd', + value: '0x0', + data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170', + gas: '0xea60', + maxFeePerGas: '0x4a817c800', + maxPriorityFeePerGas: '0x4a817c800', + }, + origin: 'https://metamask.github.io', + type: 'approve', + history: [ + { + id: 3049568294499567, + time: 1664449552289, + status: 'unapproved', + metamaskNetworkId: '3', + originalGasEstimate: '0xea60', + userEditedGasLimit: false, + chainId: '0x3', + loadingDefaults: true, + dappSuggestedGasFees: { + gasPrice: '0x4a817c800', + gas: '0xea60', + }, + sendFlowHistory: [], + txParams: { + from: '0xdd34b35ca1de17dfcdc07f79ff1f8f94868c40a1', + to: '0x55797717b9947b31306f4aac7ad1365c6e3923bd', + value: '0x0', + data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170', + gas: '0xea60', + gasPrice: '0x4a817c800', + }, + origin: 'https://metamask.github.io', + type: 'approve', + }, + [ + { + op: 'remove', + path: '/txParams/gasPrice', + note: 'Added new unapproved transaction.', + timestamp: 1664449553939, + }, + { + op: 'add', + path: '/txParams/maxFeePerGas', + value: '0x4a817c800', + }, + { + op: 'add', + path: '/txParams/maxPriorityFeePerGas', + value: '0x4a817c800', + }, + { + op: 'replace', + path: '/loadingDefaults', + value: false, + }, + { + op: 'add', + path: '/userFeeLevel', + value: 'custom', + }, + { + op: 'add', + path: '/defaultGasEstimates', + value: { + estimateType: 'custom', + gas: '0xea60', + maxFeePerGas: '0x4a817c800', + maxPriorityFeePerGas: '0x4a817c800', + }, + }, + ], + ], + userFeeLevel: 'custom', + defaultGasEstimates: { + estimateType: 'custom', + gas: '0xea60', + maxFeePerGas: '0x4a817c800', + maxPriorityFeePerGas: '0x4a817c800', + }, + }, + }, +}; + +export const DefaultStory = (args) => { + return ; +}; + +DefaultStory.storyName = 'Default'; From 7be0fcc2ad8e2939392b9cb50a3f95e0432cd76e Mon Sep 17 00:00:00 2001 From: Filip Sekulic Date: Wed, 12 Oct 2022 09:31:50 +0200 Subject: [PATCH 4/5] CSS fix --- ui/components/app/custom-spending-cap/index.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/ui/components/app/custom-spending-cap/index.scss b/ui/components/app/custom-spending-cap/index.scss index 3d2c387f23c9..e2ab68851d98 100644 --- a/ui/components/app/custom-spending-cap/index.scss +++ b/ui/components/app/custom-spending-cap/index.scss @@ -30,11 +30,7 @@ padding-inline-end: 60px; } - input[type='number']::-webkit-inner-spin-button { - -webkit-appearance: none; - display: none; - } - + input[type='number']::-webkit-inner-spin-button, input[type='number']:hover::-webkit-inner-spin-button { -webkit-appearance: none; display: none; From 679cab6b5c2fff30738a662f4f4365ff5b851286 Mon Sep 17 00:00:00 2001 From: Filip Sekulic Date: Fri, 21 Oct 2022 14:11:23 +0200 Subject: [PATCH 5/5] Fixed tx data and state management --- .../custom-spending-cap.js | 24 ++++++-------- .../custom-spending-cap.stories.js | 3 -- ui/pages/confirm-approve/confirm-approve.js | 4 +-- ui/pages/token-allowance/token-allowance.js | 33 ++++++++++--------- .../token-allowance.stories.js | 6 ++-- 5 files changed, 33 insertions(+), 37 deletions(-) diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/ui/components/app/custom-spending-cap/custom-spending-cap.js index 12cbc023adb8..59e829e42043 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap.js @@ -1,5 +1,5 @@ import React, { useState, useContext, useEffect } from 'react'; -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import PropTypes from 'prop-types'; import { I18nContext } from '../../../contexts/i18n'; import Box from '../../ui/box'; @@ -17,6 +17,7 @@ import { SIZES, } from '../../../helpers/constants/design-system'; import { getCustomTokenAmount } from '../../../selectors'; +import { setCustomTokenAmount } from '../../../ducks/app/app'; import { CustomSpendingCapTooltip } from './custom-spending-cap-tooltip'; export default function CustomSpendingCap({ @@ -24,16 +25,17 @@ export default function CustomSpendingCap({ currentTokenBalance, dappProposedValue, siteOrigin, - passTheCurrentValue, passTheErrorText, }) { const t = useContext(I18nContext); + const dispatch = useDispatch(); - const customTokenAmount = useSelector(getCustomTokenAmount); + const value = useSelector(getCustomTokenAmount); - const [value, setValue] = useState(customTokenAmount); const [error, setError] = useState(''); - const [showUseDefaultButton, setShowUseDefaultButton] = useState(true); + const [showUseDefaultButton, setShowUseDefaultButton] = useState( + value !== String(dappProposedValue) && true, + ); const inputLogicEmptyStateText = t('inputLogicEmptyState'); const getInputTextLogic = (inputNumber) => { @@ -64,7 +66,7 @@ export default function CustomSpendingCap({ }; const [customSpendingCapText, setCustomSpendingCapText] = useState( - getInputTextLogic(customTokenAmount).description, + getInputTextLogic(value).description, ); const handleChange = (valueInput) => { @@ -81,12 +83,11 @@ export default function CustomSpendingCap({ setError(''); } - setValue(valueInput); - passTheCurrentValue(valueInput); + dispatch(setCustomTokenAmount(String(valueInput))); }; useEffect(() => { - if (value !== dappProposedValue) { + if (value !== String(dappProposedValue)) { setShowUseDefaultButton(true); } }, [value, dappProposedValue]); @@ -121,7 +122,6 @@ export default function CustomSpendingCap({ onClick={(e) => { e.preventDefault(); handleChange(currentTokenBalance); - setValue(currentTokenBalance); }} > {t('max')} @@ -220,10 +220,6 @@ CustomSpendingCap.propTypes = { * The origin of the site generally the URL */ siteOrigin: PropTypes.string, - /** - * Parent component's callback function passed in order to get the input value - */ - passTheCurrentValue: PropTypes.func, /** * Parent component's callback function passed in order to get the error text */ diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js b/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js index e06bbb601a42..5c30a32e75cd 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js @@ -17,9 +17,6 @@ export default { siteOrigin: { control: { type: 'text' }, }, - passTheCurrentValue: { - action: 'passTheCurrentValue', - }, passTheErrorText: { action: 'passTheErrorText', }, diff --git a/ui/pages/confirm-approve/confirm-approve.js b/ui/pages/confirm-approve/confirm-approve.js index 26c065b4460e..bbc17c3e7a45 100644 --- a/ui/pages/confirm-approve/confirm-approve.js +++ b/ui/pages/confirm-approve/confirm-approve.js @@ -180,14 +180,14 @@ export default function ConfirmApprove({ supportsEIP1559V2={supportsEIP1559V2} userAddress={userAddress} tokenAddress={tokenAddress} - data={customData || transactionData} + data={transactionData} isSetApproveForAll={isSetApproveForAll} isApprovalOrRejection={isApprovalOrRejection} - customTxParamsData={customData} dappProposedTokenAmount={tokenAmount} currentTokenBalance={tokenBalance} toAddress={toAddress} tokenSymbol={tokenSymbol} + decimals={decimals} /> {showCustomizeGasPopover && !supportsEIP1559V2 && ( { - dispatch(setCustomTokenAmount(customTokenAmountInputValue)); setShowFullTxDetails(false); setIsFirstPage(false); }; @@ -296,9 +302,6 @@ export default function TokenAllowance({ currentTokenBalance={parseFloat(currentTokenBalance)} dappProposedValue={parseFloat(dappProposedTokenAmount)} siteOrigin={origin} - passTheCurrentValue={(inputValue) => - setCustomTokenAmountInputValue(inputValue) - } passTheErrorText={(value) => setErrorText(value)} /> ) : ( @@ -376,7 +379,7 @@ export default function TokenAllowance({ supportsEIP1559V2={supportsEIP1559V2} isSetApproveForAll={isSetApproveForAll} isApprovalOrRejection={isApprovalOrRejection} - data={data} + data={customTxParamsData || data} /> @@ -474,9 +477,9 @@ TokenAllowance.propTypes = { */ isApprovalOrRejection: PropTypes.bool, /** - * Custom transaction parameters data made by the user (fees) + * Number of decimals */ - customTxParamsData: PropTypes.object, + decimals: PropTypes.string, /** * Token amount proposed by the Dapp */ diff --git a/ui/pages/token-allowance/token-allowance.stories.js b/ui/pages/token-allowance/token-allowance.stories.js index 39875bfc6da5..9335cf863c27 100644 --- a/ui/pages/token-allowance/token-allowance.stories.js +++ b/ui/pages/token-allowance/token-allowance.stories.js @@ -53,8 +53,8 @@ export default { setApproveForAllArg: { control: 'boolean', }, - customTxParamsData: { - control: 'object', + decimals: { + control: 'text', }, dappProposedTokenAmount: { control: 'text', @@ -88,7 +88,7 @@ export default { data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170', isSetApproveForAll: false, setApproveForAllArg: false, - customTxParamsData: {}, + decimals: '4', dappProposedTokenAmount: '7', currentTokenBalance: '10', toAddress: '0x9bc5baf874d2da8d216ae9f137804184ee5afef4',