From c5efff80ab32b34e9a518bac2315b42e3962184b Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Thu, 8 May 2025 11:08:25 +0530 Subject: [PATCH 1/6] Fix repeated re-rendering of approve row in simulations section --- .../batch-simulation-details.tsx | 30 +++++++++++-------- .../hooks/useBatchApproveBalanceChanges.ts | 29 ++++++++++-------- .../gas-fee-token-toast.tsx | 28 ++++++++++------- 3 files changed, 51 insertions(+), 36 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx b/ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx index 2a676be1fdb2..f174767ea4dd 100644 --- a/ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx +++ b/ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import { TransactionMeta, TransactionType, @@ -63,18 +63,22 @@ export function BatchSimulationDetails() { return null; } - const finalBalanceChanges = approveBalanceChanges?.map((change) => ({ - ...change, - onEdit: - change.asset.standard === TokenStandard.ERC20 - ? () => handleEdit(change) - : undefined, - })); + const approveRow: StaticRow[] = useMemo(() => { + const finalBalanceChanges = approveBalanceChanges?.map((change) => ({ + ...change, + onEdit: + change.asset.standard === TokenStandard.ERC20 + ? () => handleEdit(change) + : undefined, + })); - const approveRow: StaticRow = { - label: t('confirmSimulationApprove'), - balanceChanges: finalBalanceChanges ?? [], - }; + return [ + { + label: t('confirmSimulationApprove'), + balanceChanges: finalBalanceChanges ?? [], + }, + ]; + }, [approveBalanceChanges, handleEdit]); const nestedTransactionToEdit = nestedTransactionIndexToEdit === undefined @@ -94,7 +98,7 @@ export function BatchSimulationDetails() { )} diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts b/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts index 3bb973b31e2a..eb04b019195d 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts @@ -12,6 +12,7 @@ import { parseApprovalTransactionData } from '../../../../../../../shared/module import { useBalanceChanges } from '../../../simulation-details/useBalanceChanges'; import { BalanceChange } from '../../../simulation-details/types'; import { isSpendingCapUnlimited } from '../approve/hooks/use-approve-token-simulation'; +import { useMemo } from 'react'; type ApprovalSimulationBalanceChange = SimulationTokenBalanceChange & { isAll: boolean; @@ -40,18 +41,20 @@ export function useBatchApproveBalanceChanges() { }, }); - const finalBalanceChanges = (balanceChanges ?? []).map( - (change, index) => { - const simulation = simulationBalanceChanges?.[index]; - - return { - ...change, - isApproval: true, - isAllApproval: simulation?.isAll ?? false, - isUnlimitedApproval: simulation?.isUnlimited ?? false, - nestedTransactionIndex: simulation?.nestedTransactionIndex ?? -1, - }; - }, + const finalBalanceChanges = useMemo( + () => + (balanceChanges ?? []).map((change, index) => { + const simulation = simulationBalanceChanges?.[index]; + + return { + ...change, + isApproval: true, + isAllApproval: simulation?.isAll ?? false, + isUnlimitedApproval: simulation?.isUnlimited ?? false, + nestedTransactionIndex: simulation?.nestedTransactionIndex ?? -1, + }; + }), + [balanceChanges, simulationBalanceChanges], ); const pending = pendingSimulationChanges || pendingBalanceChanges; @@ -66,7 +69,7 @@ function useBatchApproveSimulationBalanceChanges({ }) { return useAsyncResult( async () => buildSimulationTokenBalanceChanges({ nestedTransactions }), - [nestedTransactions], + [nestedTransactions?.length], ); } diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx b/ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx index 0d5712ccbfd1..c7ea09c8f6e6 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { Hex } from '@metamask/utils'; import { Box } from '../../../../../../../components/component-library'; @@ -30,17 +30,25 @@ export function GasFeeTokenToast() { setShowToast(false); }, []); - if (selectedGasFeeToken?.tokenAddress !== previousGasFeeToken) { - setPreviousGasFeeToken( - selectedGasFeeToken?.tokenAddress ?? NATIVE_TOKEN_ADDRESS, - ); + useEffect(() => { + if (selectedGasFeeToken?.tokenAddress !== previousGasFeeToken) { + setPreviousGasFeeToken( + selectedGasFeeToken?.tokenAddress ?? NATIVE_TOKEN_ADDRESS, + ); - setShowToast(true); + setShowToast(true); - setTimeout(() => { - hideToast(); - }, TOAST_TIMEOUT_MILLISECONDS); - } + setTimeout(() => { + hideToast(); + }, TOAST_TIMEOUT_MILLISECONDS); + } + }, [ + selectedGasFeeToken, + previousGasFeeToken, + setPreviousGasFeeToken, + setShowToast, + hideToast, + ]); if (!showToast) { return null; From adba8af5ca3f59a69b5f17ddec976732c2a2be10 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Thu, 8 May 2025 11:12:36 +0530 Subject: [PATCH 2/6] Fix repeated re-rendering of approve row in simulations section --- .../gas-fee-token-toast.tsx | 28 +++++++------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx b/ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx index c7ea09c8f6e6..0d5712ccbfd1 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { Hex } from '@metamask/utils'; import { Box } from '../../../../../../../components/component-library'; @@ -30,25 +30,17 @@ export function GasFeeTokenToast() { setShowToast(false); }, []); - useEffect(() => { - if (selectedGasFeeToken?.tokenAddress !== previousGasFeeToken) { - setPreviousGasFeeToken( - selectedGasFeeToken?.tokenAddress ?? NATIVE_TOKEN_ADDRESS, - ); + if (selectedGasFeeToken?.tokenAddress !== previousGasFeeToken) { + setPreviousGasFeeToken( + selectedGasFeeToken?.tokenAddress ?? NATIVE_TOKEN_ADDRESS, + ); - setShowToast(true); + setShowToast(true); - setTimeout(() => { - hideToast(); - }, TOAST_TIMEOUT_MILLISECONDS); - } - }, [ - selectedGasFeeToken, - previousGasFeeToken, - setPreviousGasFeeToken, - setShowToast, - hideToast, - ]); + setTimeout(() => { + hideToast(); + }, TOAST_TIMEOUT_MILLISECONDS); + } if (!showToast) { return null; From 712920489fe143b37c4e9705b0f3dc78883fc9ee Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Thu, 8 May 2025 12:12:39 +0530 Subject: [PATCH 3/6] update --- app/scripts/lib/transaction/eip5792.ts | 12 ++++++------ .../info/hooks/useBatchApproveBalanceChanges.ts | 3 ++- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/app/scripts/lib/transaction/eip5792.ts b/app/scripts/lib/transaction/eip5792.ts index 015fa210710a..986453460ccb 100644 --- a/app/scripts/lib/transaction/eip5792.ts +++ b/app/scripts/lib/transaction/eip5792.ts @@ -317,12 +317,12 @@ function validateUserDisabled( const isDisabled = disabledUpgradeAccountsByChain[dappChainId]?.includes(addressLowerCase); - if (isDisabled || dismissSmartAccountSuggestionEnabled) { - throw new JsonRpcError( - EIP5792ErrorCode.RejectedUpgrade, - `EIP-7702 upgrade rejected for this chain and account - Chain ID: ${dappChainId}, Account: ${from}`, - ); - } + // if (isDisabled || dismissSmartAccountSuggestionEnabled) { + // throw new JsonRpcError( + // EIP5792ErrorCode.RejectedUpgrade, + // `EIP-7702 upgrade rejected for this chain and account - Chain ID: ${dappChainId}, Account: ${from}`, + // ); + // } } function getStatusCode(transactionMeta: TransactionMeta) { diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts b/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts index eb04b019195d..3f0b4756aef1 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts @@ -5,6 +5,8 @@ import { TransactionMeta, } from '@metamask/transaction-controller'; import { add0x } from '@metamask/utils'; +import { useMemo } from 'react'; + import { useConfirmContext } from '../../../../context/confirm'; import { useAsyncResult } from '../../../../../../hooks/useAsync'; import { getTokenStandardAndDetails } from '../../../../../../store/actions'; @@ -12,7 +14,6 @@ import { parseApprovalTransactionData } from '../../../../../../../shared/module import { useBalanceChanges } from '../../../simulation-details/useBalanceChanges'; import { BalanceChange } from '../../../simulation-details/types'; import { isSpendingCapUnlimited } from '../approve/hooks/use-approve-token-simulation'; -import { useMemo } from 'react'; type ApprovalSimulationBalanceChange = SimulationTokenBalanceChange & { isAll: boolean; From dc09d45682eec301189537e6c9f39fb764f006ff Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Thu, 8 May 2025 14:06:39 +0530 Subject: [PATCH 4/6] update --- app/scripts/lib/transaction/eip5792.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/scripts/lib/transaction/eip5792.ts b/app/scripts/lib/transaction/eip5792.ts index 986453460ccb..015fa210710a 100644 --- a/app/scripts/lib/transaction/eip5792.ts +++ b/app/scripts/lib/transaction/eip5792.ts @@ -317,12 +317,12 @@ function validateUserDisabled( const isDisabled = disabledUpgradeAccountsByChain[dappChainId]?.includes(addressLowerCase); - // if (isDisabled || dismissSmartAccountSuggestionEnabled) { - // throw new JsonRpcError( - // EIP5792ErrorCode.RejectedUpgrade, - // `EIP-7702 upgrade rejected for this chain and account - Chain ID: ${dappChainId}, Account: ${from}`, - // ); - // } + if (isDisabled || dismissSmartAccountSuggestionEnabled) { + throw new JsonRpcError( + EIP5792ErrorCode.RejectedUpgrade, + `EIP-7702 upgrade rejected for this chain and account - Chain ID: ${dappChainId}, Account: ${from}`, + ); + } } function getStatusCode(transactionMeta: TransactionMeta) { From be1ac80d9fa19c83fb7ddbf08c26cd82b92aa9ed Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Thu, 8 May 2025 15:05:09 +0530 Subject: [PATCH 5/6] update --- .../batch-simulation-details/batch-simulation-details.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx b/ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx index f174767ea4dd..149d5f2a6f99 100644 --- a/ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx +++ b/ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx @@ -63,7 +63,7 @@ export function BatchSimulationDetails() { return null; } - const approveRow: StaticRow[] = useMemo(() => { + const approveRows: StaticRow[] = useMemo(() => { const finalBalanceChanges = approveBalanceChanges?.map((change) => ({ ...change, onEdit: @@ -98,7 +98,7 @@ export function BatchSimulationDetails() { )} From 795a6b2ba29da2b6d43f84d633450ed0cca40fa2 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Thu, 8 May 2025 19:19:11 +0530 Subject: [PATCH 6/6] update --- .../confirm/info/hooks/useBatchApproveBalanceChanges.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts b/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts index 3f0b4756aef1..09817e540373 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts @@ -70,7 +70,7 @@ function useBatchApproveSimulationBalanceChanges({ }) { return useAsyncResult( async () => buildSimulationTokenBalanceChanges({ nestedTransactions }), - [nestedTransactions?.length], + [JSON.stringify(nestedTransactions)], ); }