From 9bfd2f2eccca97daae67c30cd06de5bbcd3b292d Mon Sep 17 00:00:00 2001 From: Francis Nepomuceno Date: Fri, 7 Nov 2025 21:47:25 -0500 Subject: [PATCH] refactor: simplify home tabs --- app/scripts/constants/sentry-state.ts | 1 - .../controllers/app-state-controller.test.ts | 17 ------ .../controllers/app-state-controller.ts | 22 ------- app/scripts/metamask-controller.js | 2 - shared/types/background.ts | 1 - test/e2e/default-fixture.js | 1 - test/e2e/fixtures/onboarding-fixture.json | 1 - ...rs-after-init-opt-in-background-state.json | 1 - .../errors-after-init-opt-in-ui-state.json | 1 - ...s-before-init-opt-in-background-state.json | 1 - .../errors-before-init-opt-in-ui-state.json | 1 - .../data/integration-init-state.json | 1 - .../data/onboarding-completion-route.json | 1 - .../app/wallet-overview/eth-overview.test.js | 1 - .../hooks/useHandleSendNonEvm.test.ts | 9 +-- .../hooks/useHandleSendNonEvm.ts | 29 ++++----- .../wallet-overview/non-evm-overview.test.tsx | 2 - .../multichain-account-list-menu.tsx | 34 +++++------ .../multichain-account-list.tsx | 27 +++++---- .../account-list-menu/account-list-menu.tsx | 32 +++++----- .../account-overview-eth.test.tsx | 2 - .../account-overview-non-evm.test.tsx | 2 - .../account-overview-tabs.tsx | 60 +++++++++++++++---- .../account-overview-unknown.test.tsx | 2 - .../multichain/account-overview/common.ts | 4 -- ui/components/ui/tabs/tabs.tsx | 22 +++++-- ui/components/ui/tabs/tabs.types.ts | 4 +- ui/ducks/send/send.js | 4 +- ui/ducks/send/send.test.js | 8 --- .../hooks/useSubmitBridgeTransaction.test.tsx | 3 +- .../hooks/useSubmitBridgeTransaction.ts | 14 ++--- .../confirm-transaction.component.js | 5 +- .../confirm-transaction.test.js | 1 - .../hooks/send/useSendActions.test.ts | 20 +------ .../hooks/send/useSendActions.ts | 4 +- ui/pages/home/home.component.js | 6 -- ui/pages/home/home.container.js | 4 -- .../claims-form/claims-form.tsx | 10 +--- ui/pages/swaps/awaiting-swap/awaiting-swap.js | 8 +-- ui/selectors/selectors.js | 4 -- ui/store/actions.ts | 11 ---- 41 files changed, 148 insertions(+), 235 deletions(-) diff --git a/app/scripts/constants/sentry-state.ts b/app/scripts/constants/sentry-state.ts index 390081fac860..cbbb0c11e2b7 100644 --- a/app/scripts/constants/sentry-state.ts +++ b/app/scripts/constants/sentry-state.ts @@ -58,7 +58,6 @@ export const SENTRY_BACKGROUND_STATE = { currentPopupId: false, onboardingDate: false, currentExtensionPopupId: false, - defaultHomeActiveTabName: true, enableEnforcedSimulations: true, enableEnforcedSimulationsForTransactions: false, fullScreenGasPollTokens: true, diff --git a/app/scripts/controllers/app-state-controller.test.ts b/app/scripts/controllers/app-state-controller.test.ts index 64cfdb4db3ae..fd8f1fb01b06 100644 --- a/app/scripts/controllers/app-state-controller.test.ts +++ b/app/scripts/controllers/app-state-controller.test.ts @@ -12,7 +12,6 @@ import { ORIGIN_METAMASK, POLLING_TOKEN_ENVIRONMENT_TYPES, } from '../../../shared/constants/app'; -import { AccountOverviewTabKey } from '../../../shared/constants/app-state'; import { MINUTE } from '../../../shared/constants/time'; import { AppStateController } from './app-state-controller'; import type { @@ -188,18 +187,6 @@ describe('AppStateController', () => { }); }); - describe('setDefaultHomeActiveTabName', () => { - it('sets the default home tab name', async () => { - await withController(({ controller }) => { - controller.setDefaultHomeActiveTabName(AccountOverviewTabKey.Activity); - - expect(controller.state.defaultHomeActiveTabName).toBe( - AccountOverviewTabKey.Activity, - ); - }); - }); - }); - describe('setConnectedStatusPopoverHasBeenShown', () => { it('sets connected status popover as shown', async () => { await withController(({ controller }) => { @@ -763,7 +750,6 @@ describe('AppStateController', () => { "connectedStatusPopoverHasBeenShown": true, "currentExtensionPopupId": 0, "currentPopupId": 0, - "defaultHomeActiveTabName": null, "enableEnforcedSimulations": true, "enableEnforcedSimulationsForTransactions": {}, "enforcedSimulationsSlippage": 10, @@ -852,7 +838,6 @@ describe('AppStateController', () => { "connectedStatusPopoverHasBeenShown": true, "currentExtensionPopupId": 0, "currentPopupId": 0, - "defaultHomeActiveTabName": null, "enableEnforcedSimulations": true, "enableEnforcedSimulationsForTransactions": {}, "enforcedSimulationsSlippage": 10, @@ -937,7 +922,6 @@ describe('AppStateController', () => { "browserEnvironment": {}, "canTrackWalletFundsObtained": true, "connectedStatusPopoverHasBeenShown": true, - "defaultHomeActiveTabName": null, "enableEnforcedSimulations": true, "enforcedSimulationsSlippage": 10, "hadAdvancedGasFeesSetPriorToMigration92_3": false, @@ -1017,7 +1001,6 @@ describe('AppStateController', () => { "connectedStatusPopoverHasBeenShown": true, "currentExtensionPopupId": 0, "currentPopupId": 0, - "defaultHomeActiveTabName": null, "enableEnforcedSimulations": true, "enableEnforcedSimulationsForTransactions": {}, "enforcedSimulationsSlippage": 10, diff --git a/app/scripts/controllers/app-state-controller.ts b/app/scripts/controllers/app-state-controller.ts index 769056c3a339..2fe714f22091 100644 --- a/app/scripts/controllers/app-state-controller.ts +++ b/app/scripts/controllers/app-state-controller.ts @@ -35,7 +35,6 @@ import { DEFAULT_AUTO_LOCK_TIME_LIMIT } from '../../../shared/constants/preferen import { LastInteractedConfirmationInfo } from '../../../shared/types/confirm'; import { SecurityAlertResponse } from '../lib/ppom/types'; import { - AccountOverviewTabKey, CarouselSlide, NetworkConnectionBanner, } from '../../../shared/constants/app-state'; @@ -73,7 +72,6 @@ export type AppStateControllerState = { // States used for displaying the changed network toast currentExtensionPopupId: number; currentPopupId?: number; - defaultHomeActiveTabName: AccountOverviewTabKey | null; enableEnforcedSimulations: boolean; enableEnforcedSimulationsForTransactions: Record; enforcedSimulationsSlippage: number; @@ -234,7 +232,6 @@ const getDefaultAppStateControllerState = (): AppStateControllerState => ({ appActiveTab: undefined, browserEnvironment: {}, connectedStatusPopoverHasBeenShown: true, - defaultHomeActiveTabName: null, enableEnforcedSimulations: true, enableEnforcedSimulationsForTransactions: {}, enforcedSimulationsSlippage: 10, @@ -342,12 +339,6 @@ const controllerMetadata: StateMetadata = { includeInDebugSnapshot: true, usedInUi: true, }, - defaultHomeActiveTabName: { - includeInStateLogs: true, - persist: true, - includeInDebugSnapshot: true, - usedInUi: true, - }, enableEnforcedSimulations: { includeInStateLogs: true, persist: true, @@ -757,19 +748,6 @@ export class AppStateController extends BaseController< this.#acceptApproval(); } - /** - * Sets the default home tab - * - * @param defaultHomeActiveTabName - the tab name - */ - setDefaultHomeActiveTabName( - defaultHomeActiveTabName: AccountOverviewTabKey | null, - ): void { - this.update((state) => { - state.defaultHomeActiveTabName = defaultHomeActiveTabName; - }); - } - /** * Record that the user has seen the connected status info popover */ diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index fb878eb0f604..bcf4a60b93fc 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -2768,8 +2768,6 @@ export default class MetamaskController extends EventEmitter { appStateController.setCurrentExtensionPopupId.bind(appStateController), setBrowserEnvironment: appStateController.setBrowserEnvironment.bind(appStateController), - setDefaultHomeActiveTabName: - appStateController.setDefaultHomeActiveTabName.bind(appStateController), setConnectedStatusPopoverHasBeenShown: appStateController.setConnectedStatusPopoverHasBeenShown.bind( appStateController, diff --git a/shared/types/background.ts b/shared/types/background.ts index 0555fe4abe1c..6d88c2cd1ae7 100644 --- a/shared/types/background.ts +++ b/shared/types/background.ts @@ -93,7 +93,6 @@ export type ControllerStatePropertiesEnumerated = { pendingApprovalCount: ApprovalControllerState['pendingApprovalCount']; timeoutMinutes: AppStateControllerState['timeoutMinutes']; connectedStatusPopoverHasBeenShown: AppStateControllerState['connectedStatusPopoverHasBeenShown']; - defaultHomeActiveTabName: AppStateControllerState['defaultHomeActiveTabName']; browserEnvironment: AppStateControllerState['browserEnvironment']; popupGasPollTokens: AppStateControllerState['popupGasPollTokens']; notificationGasPollTokens: AppStateControllerState['notificationGasPollTokens']; diff --git a/test/e2e/default-fixture.js b/test/e2e/default-fixture.js index 51405efc76b3..fa02db620d00 100644 --- a/test/e2e/default-fixture.js +++ b/test/e2e/default-fixture.js @@ -108,7 +108,6 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) { connectedStatusPopoverHasBeenShown: true, termsOfUseLastAgreed: '__FIXTURE_SUBSTITUTION__currentDateInMilliseconds', - defaultHomeActiveTabName: null, fullScreenGasPollTokens: [], notificationGasPollTokens: [], popupGasPollTokens: [], diff --git a/test/e2e/fixtures/onboarding-fixture.json b/test/e2e/fixtures/onboarding-fixture.json index c6efcf159e24..3cb647cc8344 100644 --- a/test/e2e/fixtures/onboarding-fixture.json +++ b/test/e2e/fixtures/onboarding-fixture.json @@ -48,7 +48,6 @@ "os": "mac" }, "connectedStatusPopoverHasBeenShown": true, - "defaultHomeActiveTabName": null, "enableEnforcedSimulations": true, "enforcedSimulationsSlippage": 10, "hadAdvancedGasFeesSetPriorToMigration92_3": false, diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json index c638b8d18eed..91df98b732ea 100644 --- a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json +++ b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json @@ -33,7 +33,6 @@ "browserEnvironment": { "os": "string", "browser": "string" }, "canTrackWalletFundsObtained": false, "connectedStatusPopoverHasBeenShown": true, - "defaultHomeActiveTabName": null, "enableEnforcedSimulations": true, "enableEnforcedSimulationsForTransactions": "object", "enforcedSimulationsSlippage": "number", diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json index 9bf2636e4a3b..8d34e8f32a29 100644 --- a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json +++ b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json @@ -136,7 +136,6 @@ "appActiveTab": "object", "browserEnvironment": { "os": "string", "browser": "string" }, "connectedStatusPopoverHasBeenShown": true, - "defaultHomeActiveTabName": null, "enableEnforcedSimulations": true, "enableEnforcedSimulationsForTransactions": "object", "enforcedSimulationsSlippage": "number", diff --git a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json index 769d89898abd..e4465c5fc769 100644 --- a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json +++ b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json @@ -37,7 +37,6 @@ "nftsDropdownState": {}, "connectedStatusPopoverHasBeenShown": true, "termsOfUseLastAgreed": "number", - "defaultHomeActiveTabName": null, "fullScreenGasPollTokens": "object", "notificationGasPollTokens": "object", "popupGasPollTokens": "object", diff --git a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json index 7fa3a7138d68..6c3f87fb30d7 100644 --- a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json +++ b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json @@ -37,7 +37,6 @@ "nftsDropdownState": {}, "connectedStatusPopoverHasBeenShown": true, "termsOfUseLastAgreed": "number", - "defaultHomeActiveTabName": null, "fullScreenGasPollTokens": "object", "notificationGasPollTokens": "object", "popupGasPollTokens": "object", diff --git a/test/integration/data/integration-init-state.json b/test/integration/data/integration-init-state.json index e0f5bc92d8d4..0163921893e5 100644 --- a/test/integration/data/integration-init-state.json +++ b/test/integration/data/integration-init-state.json @@ -355,7 +355,6 @@ } } }, - "defaultHomeActiveTabName": "activity", "desktopEnabled": false, "detectedTokens": [], "dismissSeedBackUpReminder": false, diff --git a/test/integration/data/onboarding-completion-route.json b/test/integration/data/onboarding-completion-route.json index 80597455dab7..4ba86269ff7e 100644 --- a/test/integration/data/onboarding-completion-route.json +++ b/test/integration/data/onboarding-completion-route.json @@ -111,7 +111,6 @@ "customNonceValue": "", "database": null, "databaseUnavailable": false, - "defaultHomeActiveTabName": null, "desktopEnabled": false, "detectedTokens": [], "dismissSeedBackUpReminder": false, diff --git a/ui/components/app/wallet-overview/eth-overview.test.js b/ui/components/app/wallet-overview/eth-overview.test.js index e5765d8810fa..e560a0010afa 100644 --- a/ui/components/app/wallet-overview/eth-overview.test.js +++ b/ui/components/app/wallet-overview/eth-overview.test.js @@ -20,7 +20,6 @@ import { } from '../../../../shared/constants/metametrics'; import EthOverview from './eth-overview'; -// We need to mock `dispatch` since we use it for `setDefaultHomeActiveTabName`. const mockDispatch = jest.fn().mockReturnValue(() => jest.fn()); jest.mock('react-redux', () => ({ ...jest.requireActual('react-redux'), diff --git a/ui/components/app/wallet-overview/hooks/useHandleSendNonEvm.test.ts b/ui/components/app/wallet-overview/hooks/useHandleSendNonEvm.test.ts index 8910ee5a37ef..56ba238f792c 100644 --- a/ui/components/app/wallet-overview/hooks/useHandleSendNonEvm.test.ts +++ b/ui/components/app/wallet-overview/hooks/useHandleSendNonEvm.test.ts @@ -1,9 +1,6 @@ import { SolScope } from '@metamask/keyring-api'; import { renderHookWithProvider } from '../../../../../test/lib/render-helpers-navigate'; -import { - sendMultichainTransaction, - setDefaultHomeActiveTabName, -} from '../../../../store/actions'; +import { sendMultichainTransaction } from '../../../../store/actions'; import { SOLANA_WALLET_SNAP_ID } from '../../../../../shared/lib/accounts/solana-wallet-snap'; import { CONFIRMATION_V_NEXT_ROUTE } from '../../../../helpers/constants/routes'; import { mockMultichainNetworkState } from '../../../../../test/stub/networks'; @@ -11,7 +8,6 @@ import { useHandleSendNonEvm } from './useHandleSendNonEvm'; jest.mock('../../../../store/actions', () => ({ sendMultichainTransaction: jest.fn(), - setDefaultHomeActiveTabName: jest.fn(), })); const mockDispatch = jest.fn(); @@ -65,7 +61,6 @@ const mockState = { requestData: {}, }, ], - defaultHomeActiveTabName: 'activity', selectedMultichainNetworkChainId: SolScope.Mainnet, isEvmSelected: false, remoteFeatureFlags: { @@ -147,8 +142,6 @@ describe('useHandleSendNonEvm', () => { const handleSendNonEvm = result.current; await handleSendNonEvm(); - - expect(setDefaultHomeActiveTabName).toHaveBeenCalledWith('activity'); }); describe('when a caipAssetType is provided', () => { diff --git a/ui/components/app/wallet-overview/hooks/useHandleSendNonEvm.ts b/ui/components/app/wallet-overview/hooks/useHandleSendNonEvm.ts index 7c4fa0d2553b..23c8d87fd5d7 100644 --- a/ui/components/app/wallet-overview/hooks/useHandleSendNonEvm.ts +++ b/ui/components/app/wallet-overview/hooks/useHandleSendNonEvm.ts @@ -1,19 +1,19 @@ import { SnapId } from '@metamask/snaps-sdk'; import { parseCaipAssetType, CaipAssetType } from '@metamask/utils'; import { useEffect } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { useNavigate } from 'react-router-dom-v5-compat'; -import { - sendMultichainTransaction, - setDefaultHomeActiveTabName, -} from '../../../../store/actions'; +import { useSelector } from 'react-redux'; +import { useNavigate, useLocation } from 'react-router-dom-v5-compat'; +import { sendMultichainTransaction } from '../../../../store/actions'; import { getMemoizedUnapprovedTemplatedConfirmations, getSelectedInternalAccount, } from '../../../../selectors'; import { getSelectedMultichainNetworkConfiguration } from '../../../../selectors/multichain/networks'; import { isMultichainWalletSnap } from '../../../../../shared/lib/accounts/snaps'; -import { CONFIRMATION_V_NEXT_ROUTE } from '../../../../helpers/constants/routes'; +import { + CONFIRMATION_V_NEXT_ROUTE, + DEFAULT_ROUTE, +} from '../../../../helpers/constants/routes'; /** * Use this hook to trigger the send flow for non-EVM accounts. @@ -31,12 +31,11 @@ export const useHandleSendNonEvm = (caipAssetType?: CaipAssetType) => { const account = useSelector(getSelectedInternalAccount); const navigate = useNavigate(); - const dispatch = useDispatch(); + const location = useLocation(); - const currentActivityTabName = useSelector( - // @ts-expect-error TODO: fix state type - (state) => state.metamask.defaultHomeActiveTabName, - ); + // Get the current tab from URL query params + const params = new URLSearchParams(location.search); + const currentTab = params.get('tab'); const unapprovedTemplatedConfirmations = useSelector( getMemoizedUnapprovedTemplatedConfirmations, @@ -92,7 +91,7 @@ export const useHandleSendNonEvm = (caipAssetType?: CaipAssetType) => { try { // FIXME: We switch the tab before starting the send flow (we // faced some inconsistencies when changing it after). - await dispatch(setDefaultHomeActiveTabName('activity')); + navigate(`${DEFAULT_ROUTE}?tab=activity`); await sendMultichainTransaction(account.metadata.snap.id, { account: account.id, scope: chainId, @@ -100,7 +99,9 @@ export const useHandleSendNonEvm = (caipAssetType?: CaipAssetType) => { }); } catch (error) { // Restore the previous tab in case of any error (see FIXME comment above). - await dispatch(setDefaultHomeActiveTabName(currentActivityTabName)); + if (currentTab) { + navigate(`${DEFAULT_ROUTE}?tab=${currentTab}`); + } } }; }; diff --git a/ui/components/app/wallet-overview/non-evm-overview.test.tsx b/ui/components/app/wallet-overview/non-evm-overview.test.tsx index f20786501c90..6130a5adc07c 100644 --- a/ui/components/app/wallet-overview/non-evm-overview.test.tsx +++ b/ui/components/app/wallet-overview/non-evm-overview.test.tsx @@ -19,7 +19,6 @@ import useMultiPolling from '../../../hooks/useMultiPolling'; import { BITCOIN_WALLET_SNAP_ID } from '../../../../shared/lib/accounts/bitcoin-wallet-snap'; import NonEvmOverview from './non-evm-overview'; -// We need to mock `dispatch` since we use it for `setDefaultHomeActiveTabName`. const mockDispatch = jest.fn().mockReturnValue(() => jest.fn()); jest.mock('react-redux', () => ({ ...jest.requireActual('react-redux'), @@ -29,7 +28,6 @@ jest.mock('react-redux', () => ({ jest.mock('../../../store/actions', () => ({ handleSnapRequest: jest.fn(), sendMultichainTransaction: jest.fn(), - setDefaultHomeActiveTabName: jest.fn(), tokenBalancesStartPolling: jest.fn().mockResolvedValue('pollingToken'), tokenBalancesStopPollingByPollingToken: jest.fn(), })); diff --git a/ui/components/multichain-accounts/multichain-account-list-menu/multichain-account-list-menu.tsx b/ui/components/multichain-accounts/multichain-account-list-menu/multichain-account-list-menu.tsx index 64ae787e6a6d..f5a4006efab9 100644 --- a/ui/components/multichain-accounts/multichain-account-list-menu/multichain-account-list-menu.tsx +++ b/ui/components/multichain-accounts/multichain-account-list-menu/multichain-account-list-menu.tsx @@ -1,5 +1,6 @@ import React, { useState, useCallback, useContext, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; +import { useSearchParams } from 'react-router-dom-v5-compat'; import { BtcAccountType, EthAccountType, @@ -16,7 +17,6 @@ import { MetaMetricsContext } from '../../../contexts/metametrics'; import { getAllChainsToPoll, getConnectedSubjectsForAllAddresses, - getDefaultHomeActiveTabName, getHDEntropyIndex, getOriginOfCurrentTab, getSelectedInternalAccount, @@ -75,11 +75,20 @@ export const MultichainAccountListMenu = ({ ) as AccountConnections; const currentTabOrigin = useSelector(getOriginOfCurrentTab); const dispatch = useDispatch(); + const [searchParams] = useSearchParams(); const walletAccountCollection = useSelector(getWalletsWithAccountsSimplified); - const defaultHomeActiveTabName: AccountOverviewTabKey = useSelector( - getDefaultHomeActiveTabName, - ); + + // Get current tab from URL query parameters + const currentTabFromUrl = searchParams.get('tab'); + const currentTab: AccountOverviewTabKey = + currentTabFromUrl && + Object.values(AccountOverviewTabKey).includes( + currentTabFromUrl as AccountOverviewTabKey, + ) + ? (currentTabFromUrl as AccountOverviewTabKey) + : AccountOverviewTabKey.Tokens; + const [searchPattern, setSearchPattern] = useState(''); // Here we are getting the keyring of the last selected account @@ -98,26 +107,15 @@ export const MultichainAccountListMenu = ({ }, }); endTrace({ - name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[ - defaultHomeActiveTabName - ], + name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[currentTab], }); trace({ - name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[ - defaultHomeActiveTabName - ], + name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[currentTab], }); dispatch(setSelectedAccount(account.address)); dispatch(detectNfts(allChainIds)); }, - [ - dispatch, - onClose, - trackEvent, - defaultHomeActiveTabName, - hdEntropyIndex, - allChainIds, - ], + [dispatch, onClose, trackEvent, currentTab, hdEntropyIndex, allChainIds], ); const onSearchBarChange = useCallback( diff --git a/ui/components/multichain-accounts/multichain-account-list/multichain-account-list.tsx b/ui/components/multichain-accounts/multichain-account-list/multichain-account-list.tsx index 978e72013a0c..26fb7c5ca584 100644 --- a/ui/components/multichain-accounts/multichain-account-list/multichain-account-list.tsx +++ b/ui/components/multichain-accounts/multichain-account-list/multichain-account-list.tsx @@ -13,6 +13,7 @@ import { } from '@metamask/account-api'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; +import { useSearchParams } from 'react-router-dom-v5-compat'; import { parseCaipAccountId } from '@metamask/utils'; import { Box, @@ -52,7 +53,6 @@ import { } from '../../../../shared/constants/app-state'; import { getAllPermittedAccountsForCurrentTab, - getDefaultHomeActiveTabName, getHDEntropyIndex, getPreferences, } from '../../../selectors'; @@ -89,11 +89,20 @@ export const MultichainAccountList = ({ }: MultichainAccountListProps) => { const dispatch = useDispatch(); const history = useHistory(); + const [searchParams] = useSearchParams(); const trackEvent = useContext(MetaMetricsContext); const t = useI18nContext(); - const defaultHomeActiveTabName: AccountOverviewTabKey = useSelector( - getDefaultHomeActiveTabName, - ); + + // Get current tab from URL query parameters + const currentTabFromUrl = searchParams.get('tab'); + const currentTab: AccountOverviewTabKey = + currentTabFromUrl && + Object.values(AccountOverviewTabKey).includes( + currentTabFromUrl as AccountOverviewTabKey, + ) + ? (currentTabFromUrl as AccountOverviewTabKey) + : AccountOverviewTabKey.Tokens; + const { formatCurrencyWithMinThreshold } = useFormatters(); const allBalances = useSelector(selectBalanceForAllWallets); const hdEntropyIndex = useSelector(getHDEntropyIndex); @@ -205,14 +214,10 @@ export const MultichainAccountList = ({ }, }); endTrace({ - name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[ - defaultHomeActiveTabName - ], + name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[currentTab], }); trace({ - name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[ - defaultHomeActiveTabName - ], + name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[currentTab], }); dispatch(setSelectedMultichainAccount(accountGroupId)); @@ -453,7 +458,7 @@ export const MultichainAccountList = ({ hiddenGroups, trackEvent, hdEntropyIndex, - defaultHomeActiveTabName, + currentTab, dispatch, history, isInSearchMode, diff --git a/ui/components/multichain/account-list-menu/account-list-menu.tsx b/ui/components/multichain/account-list-menu/account-list-menu.tsx index b24582369d2b..f35454447441 100644 --- a/ui/components/multichain/account-list-menu/account-list-menu.tsx +++ b/ui/components/multichain/account-list-menu/account-list-menu.tsx @@ -7,6 +7,7 @@ import React, { } from 'react'; import Fuse from 'fuse.js'; import { useDispatch, useSelector } from 'react-redux'; +import { useSearchParams } from 'react-router-dom-v5-compat'; import { BtcAccountType, EthAccountType, @@ -36,7 +37,6 @@ import { getSelectedInternalAccount, getHDEntropyIndex, getAllChainsToPoll, - getDefaultHomeActiveTabName, getUpdatedAndSortedAccounts, getHiddenAccountsList, } from '../../../selectors'; @@ -114,6 +114,7 @@ export const AccountListMenu = ({ ) as AccountConnections; const currentTabOrigin = useSelector(getOriginOfCurrentTab); const dispatch = useDispatch(); + const [searchParams] = useSearchParams(); const [searchQuery, setSearchQuery] = useState(''); @@ -135,9 +136,15 @@ export const AccountListMenu = ({ return _searchResults; }, [filteredAccounts, filteredUpdatedAccountList, searchQuery]); - const defaultHomeActiveTabName: AccountOverviewTabKey = useSelector( - getDefaultHomeActiveTabName, - ); + // Get current tab from URL query parameters + const currentTabFromUrl = searchParams.get('tab'); + const currentTab: AccountOverviewTabKey = + currentTabFromUrl && + Object.values(AccountOverviewTabKey).includes( + currentTabFromUrl as AccountOverviewTabKey, + ) + ? (currentTabFromUrl as AccountOverviewTabKey) + : AccountOverviewTabKey.Tokens; const onAccountListItemItemClicked = useCallback( (account: MergedInternalAccount) => { @@ -153,26 +160,15 @@ export const AccountListMenu = ({ }, }); endTrace({ - name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[ - defaultHomeActiveTabName - ], + name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[currentTab], }); trace({ - name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[ - defaultHomeActiveTabName - ], + name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[currentTab], }); dispatch(setSelectedAccount(account.address)); dispatch(detectNfts(allChainIds)); }, - [ - dispatch, - onClose, - trackEvent, - defaultHomeActiveTabName, - hdEntropyIndex, - allChainIds, - ], + [dispatch, onClose, trackEvent, currentTab, hdEntropyIndex, allChainIds], ); const accountListItems = useMemo(() => { diff --git a/ui/components/multichain/account-overview/account-overview-eth.test.tsx b/ui/components/multichain/account-overview/account-overview-eth.test.tsx index 04f139242b76..35f96049aa1b 100644 --- a/ui/components/multichain/account-overview/account-overview-eth.test.tsx +++ b/ui/components/multichain/account-overview/account-overview-eth.test.tsx @@ -58,8 +58,6 @@ describe('AccountOverviewEth', () => { }); it('shows all tabs', () => { const { queryByTestId } = render({ - defaultHomeActiveTabName: null, - onTabClick: jest.fn(), setBasicFunctionalityModalOpen: jest.fn(), onSupportLinkClick: jest.fn(), }); diff --git a/ui/components/multichain/account-overview/account-overview-non-evm.test.tsx b/ui/components/multichain/account-overview/account-overview-non-evm.test.tsx index f597b5690ced..aaa46103ffe3 100644 --- a/ui/components/multichain/account-overview/account-overview-non-evm.test.tsx +++ b/ui/components/multichain/account-overview/account-overview-non-evm.test.tsx @@ -33,8 +33,6 @@ jest.mock('react-redux', () => { }); const defaultProps: AccountOverviewNonEvmProps = { - defaultHomeActiveTabName: null, - onTabClick: jest.fn(), setBasicFunctionalityModalOpen: jest.fn(), onSupportLinkClick: jest.fn(), }; diff --git a/ui/components/multichain/account-overview/account-overview-tabs.tsx b/ui/components/multichain/account-overview/account-overview-tabs.tsx index f3738d47de0d..6e08f3aecd7c 100644 --- a/ui/components/multichain/account-overview/account-overview-tabs.tsx +++ b/ui/components/multichain/account-overview/account-overview-tabs.tsx @@ -1,6 +1,7 @@ -import React, { useCallback, useContext } from 'react'; +import React, { useCallback, useContext, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; +import { useSearchParams } from 'react-router-dom-v5-compat'; import { Hex } from '@metamask/utils'; import { ACCOUNT_OVERVIEW_TAB_KEY_TO_METAMETRICS_EVENT_NAME_MAP, @@ -37,9 +38,23 @@ export type AccountOverviewTabsProps = AccountOverviewCommonProps & { showDefi?: boolean; }; +// Map query param values to AccountOverviewTabKey +const QUERY_PARAM_TO_TAB_KEY: Record = { + tokens: AccountOverviewTabKey.Tokens, + nft: AccountOverviewTabKey.Nfts, + defi: AccountOverviewTabKey.DeFi, + activity: AccountOverviewTabKey.Activity, +}; + +// Map AccountOverviewTabKey to query param values +const TAB_KEY_TO_QUERY_PARAM: Record = { + [AccountOverviewTabKey.Tokens]: 'tokens', + [AccountOverviewTabKey.Nfts]: 'nft', + [AccountOverviewTabKey.DeFi]: 'defi', + [AccountOverviewTabKey.Activity]: 'activity', +}; + export const AccountOverviewTabs = ({ - onTabClick, - defaultHomeActiveTabName, showTokens, showTokensLinks, showNfts, @@ -47,6 +62,7 @@ export const AccountOverviewTabs = ({ showDefi, }: AccountOverviewTabsProps) => { const history = useHistory(); + const [searchParams, setSearchParams] = useSearchParams(); const t = useI18nContext(); const trackEvent = useContext(MetaMetricsContext); const dispatch = useDispatch(); @@ -57,12 +73,31 @@ export const AccountOverviewTabs = ({ chainIds: selectedChainIds as Hex[], }); + // Get active tab from query parameter + const activeTabFromQuery = useMemo(() => { + const tabParam = searchParams.get('tab'); + if (tabParam && tabParam in QUERY_PARAM_TO_TAB_KEY) { + return QUERY_PARAM_TO_TAB_KEY[tabParam]; + } + // Default to tokens tab + return AccountOverviewTabKey.Tokens; + }, [searchParams]); + + // Track the previous active tab for tracing + const [previousTab, setPreviousTab] = + React.useState(activeTabFromQuery); + const handleTabClick = useCallback( (tabName: AccountOverviewTabKey) => { - onTabClick(tabName); + // Update URL query parameter + setSearchParams({ tab: TAB_KEY_TO_QUERY_PARAM[tabName] }); + + // Detect NFTs when switching to NFT tab if (tabName === AccountOverviewTabKey.Nfts) { dispatch(detectNfts(selectedChainIds)); } + + // Track metrics if (tabName in ACCOUNT_OVERVIEW_TAB_KEY_TO_METAMETRICS_EVENT_NAME_MAP) { trackEvent({ category: MetaMetricsEventCategory.Home, @@ -72,18 +107,23 @@ export const AccountOverviewTabs = ({ ], }); } - if (defaultHomeActiveTabName) { + + // End trace for previous tab + if (previousTab) { endTrace({ - name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[ - defaultHomeActiveTabName - ], + name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[previousTab], }); } + + // Start trace for new tab trace({ name: ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP[tabName], }); + + // Update previous tab + setPreviousTab(tabName); }, - [onTabClick], + [setSearchParams, dispatch, selectedChainIds, trackEvent, previousTab], ); const onClickAsset = useCallback( @@ -111,7 +151,7 @@ export const AccountOverviewTabs = ({ - defaultActiveTabKey={defaultHomeActiveTabName ?? undefined} + activeTabKey={activeTabFromQuery} onTabClick={handleTabClick} tabListProps={{ className: 'px-4', diff --git a/ui/components/multichain/account-overview/account-overview-unknown.test.tsx b/ui/components/multichain/account-overview/account-overview-unknown.test.tsx index 65c48acf786c..d85649bf3ed8 100644 --- a/ui/components/multichain/account-overview/account-overview-unknown.test.tsx +++ b/ui/components/multichain/account-overview/account-overview-unknown.test.tsx @@ -27,8 +27,6 @@ const render = (props: AccountOverviewUnknownProps) => { describe('AccountOverviewUnknown', () => { it('shows only the activity tab', () => { const { queryByTestId } = render({ - defaultHomeActiveTabName: null, - onTabClick: jest.fn(), setBasicFunctionalityModalOpen: jest.fn(), onSupportLinkClick: jest.fn(), }); diff --git a/ui/components/multichain/account-overview/common.ts b/ui/components/multichain/account-overview/common.ts index 05957cb37cf1..7dc0da9bc6fb 100644 --- a/ui/components/multichain/account-overview/common.ts +++ b/ui/components/multichain/account-overview/common.ts @@ -1,10 +1,6 @@ -import { AccountOverviewTabKey } from '../../../../shared/constants/app-state'; - export type AccountOverviewCommonProps = { - onTabClick: (tabName: string) => void; setBasicFunctionalityModalOpen: () => void; ///: BEGIN:ONLY_INCLUDE_IF(build-main) onSupportLinkClick: () => void; ///: END:ONLY_INCLUDE_IF - defaultHomeActiveTabName: AccountOverviewTabKey | null; }; diff --git a/ui/components/ui/tabs/tabs.tsx b/ui/components/ui/tabs/tabs.tsx index a1538e473e56..72521f3a2d9d 100644 --- a/ui/components/ui/tabs/tabs.tsx +++ b/ui/components/ui/tabs/tabs.tsx @@ -10,6 +10,7 @@ import { TabsProps, TabChild } from './tabs.types'; export const Tabs = ({ defaultActiveTabKey, + activeTabKey, onTabClick, children, subHeader = null, @@ -44,9 +45,18 @@ export const Tabs = ({ Math.max(findChildByKey(defaultActiveTabKey), 0), ); + // If activeTabKey is provided (controlled mode), use it. Otherwise use internal state. + const isControlled = activeTabKey !== undefined; + const currentActiveIndex = isControlled + ? Math.max(findChildByKey(activeTabKey), 0) + : activeTabIndex; + const handleTabClick = (tabIndex: number, tabKey: TKey): void => { - if (tabIndex !== activeTabIndex) { - setActiveTabIndex(tabIndex); + if (tabIndex !== currentActiveIndex) { + // Update internal state only in uncontrolled mode + if (!isControlled) { + setActiveTabIndex(tabIndex); + } onTabClick?.(tabKey); } }; @@ -62,7 +72,7 @@ export const Tabs = ({ ...child.props, onClick: (idx: number) => handleTabClick(idx, tabKey), tabIndex: index, - isActive: numberOfTabs > 1 && index === activeTabIndex, + isActive: numberOfTabs > 1 && index === currentActiveIndex, key: tabKey, }); }); @@ -75,11 +85,11 @@ export const Tabs = ({ return null; } - if (activeTabIndex >= validChildren.length || activeTabIndex < 0) { - throw new Error(`Tab at index '${activeTabIndex}' does not exist`); + if (currentActiveIndex >= validChildren.length || currentActiveIndex < 0) { + throw new Error(`Tab at index '${currentActiveIndex}' does not exist`); } - const activeChild = validChildren[activeTabIndex]; + const activeChild = validChildren[currentActiveIndex]; return activeChild?.props.children || null; }; diff --git a/ui/components/ui/tabs/tabs.types.ts b/ui/components/ui/tabs/tabs.types.ts index dc46c0ad4548..d6132b7e7019 100644 --- a/ui/components/ui/tabs/tabs.types.ts +++ b/ui/components/ui/tabs/tabs.types.ts @@ -35,8 +35,10 @@ export type TabsProps = Omit< BoxProps, 'children' | 'ref' > & { - /** Key of the tab that should be active by default */ + /** Key of the tab that should be active by default (uncontrolled mode) */ defaultActiveTabKey?: TKey; + /** Key of the currently active tab (controlled mode) */ + activeTabKey?: TKey; /** Callback called when a tab is clicked */ onTabClick?: (tabKey: TKey) => void; /** Tab components to render */ diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js index 5674a5c37766..42fc4523533f 100644 --- a/ui/ducks/send/send.js +++ b/ui/ducks/send/send.js @@ -80,7 +80,6 @@ import { getBalancesInSingleCall, estimateGas, addTransactionAndWaitForPublish, - setDefaultHomeActiveTabName, rejectPendingApproval, } from '../../store/actions'; import { setCustomGasLimit } from '../gas/gas.duck'; @@ -2988,8 +2987,7 @@ export function signTransaction(history) { ); transactionId = swapAndSendTxId; - await dispatch(setDefaultHomeActiveTabName('activity')); - history.push(DEFAULT_ROUTE); + history.push(`${DEFAULT_ROUTE}?tab=activity`); } else { // basic send const { id: basicSendTxId } = await dispatch( diff --git a/ui/ducks/send/send.test.js b/ui/ducks/send/send.test.js index 2a8f45248bd9..55a8ffda7aba 100644 --- a/ui/ducks/send/send.test.js +++ b/ui/ducks/send/send.test.js @@ -101,7 +101,6 @@ describe('Send Slice', () => { let addTransactionAndRouteToConfirmationPageStub; let addTransactionAndWaitForPublishStub; - let setDefaultHomeActiveTabNameStub; beforeEach(() => { setBackgroundConnection({ @@ -139,9 +138,6 @@ describe('Send Slice', () => { addTransactionAndWaitForPublishStub = jest .spyOn(Actions, 'addTransactionAndWaitForPublish') .mockImplementation(({ id }) => Promise.resolve({ id })); - setDefaultHomeActiveTabNameStub = jest - .spyOn(Actions, 'setDefaultHomeActiveTabName') - .mockImplementation(() => ({ type: '' })); jest .spyOn(Actions, 'estimateGas') .mockImplementation(() => Promise.resolve('0x0')); @@ -3143,10 +3139,6 @@ describe('Send Slice', () => { const history = { push: jest.fn() }; await store.dispatch(signTransaction(history)); - expect( - setDefaultHomeActiveTabNameStub.mock.calls[0][0], - ).toStrictEqual('activity'); - expect( addTransactionAndWaitForPublishStub.mock.calls[0][0].data, ).toStrictEqual('0x123123123'); diff --git a/ui/pages/bridge/hooks/useSubmitBridgeTransaction.test.tsx b/ui/pages/bridge/hooks/useSubmitBridgeTransaction.test.tsx index bca4d5f086f9..876662c61295 100644 --- a/ui/pages/bridge/hooks/useSubmitBridgeTransaction.test.tsx +++ b/ui/pages/bridge/hooks/useSubmitBridgeTransaction.test.tsx @@ -180,8 +180,7 @@ describe('ui/pages/bridge/hooks/useSubmitBridgeTransaction', () => { ); // Assert - expect(mockUseNavigate).toHaveBeenCalledWith('/', { - replace: false, + expect(mockUseNavigate).toHaveBeenCalledWith('/?tab=activity', { state: { stayOnHomePage: true }, }); }); diff --git a/ui/pages/bridge/hooks/useSubmitBridgeTransaction.ts b/ui/pages/bridge/hooks/useSubmitBridgeTransaction.ts index bf201946b254..b13df5b6a97c 100644 --- a/ui/pages/bridge/hooks/useSubmitBridgeTransaction.ts +++ b/ui/pages/bridge/hooks/useSubmitBridgeTransaction.ts @@ -7,7 +7,6 @@ import { DEFAULT_ROUTE, PREPARE_SWAP_ROUTE, } from '../../../helpers/constants/routes'; -import { setDefaultHomeActiveTabName } from '../../../store/actions'; import { submitBridgeTx } from '../../../ducks/bridge-status/actions'; import { setWasTxDeclined } from '../../../ducks/bridge/actions'; import { isHardwareWallet } from '../../../../shared/modules/selectors'; @@ -84,8 +83,9 @@ export default function useSubmitBridgeTransaction() { await dispatch( submitBridgeTx(fromAccount.address, quoteResponse, false), ); - await dispatch(setDefaultHomeActiveTabName('activity')); - navigate(DEFAULT_ROUTE, { state: { stayOnHomePage: true } }); + navigate(`${DEFAULT_ROUTE}?tab=activity`, { + state: { stayOnHomePage: true }, + }); return; } @@ -102,14 +102,14 @@ export default function useSubmitBridgeTransaction() { dispatch(setWasTxDeclined(true)); navigate(`${CROSS_CHAIN_SWAP_ROUTE}${PREPARE_SWAP_ROUTE}`); } else { - await dispatch(setDefaultHomeActiveTabName('activity')); - navigate(DEFAULT_ROUTE); + navigate(`${DEFAULT_ROUTE}?tab=activity`); } return; } // Route user to activity tab on Home page - await dispatch(setDefaultHomeActiveTabName('activity')); - navigate(DEFAULT_ROUTE, { state: { stayOnHomePage: true } }); + navigate(`${DEFAULT_ROUTE}?tab=activity`, { + state: { stayOnHomePage: true }, + }); }; return { diff --git a/ui/pages/confirmations/confirm-transaction/confirm-transaction.component.js b/ui/pages/confirmations/confirm-transaction/confirm-transaction.component.js index aee6c3c6fddd..e0423e10a39d 100644 --- a/ui/pages/confirmations/confirm-transaction/confirm-transaction.component.js +++ b/ui/pages/confirmations/confirm-transaction/confirm-transaction.component.js @@ -33,7 +33,6 @@ import { gasFeeStartPollingByNetworkClientId, gasFeeStopPollingByPollingToken, getContractMethodData, - setDefaultHomeActiveTabName, } from '../../../store/actions'; import ConfirmDecryptMessage from '../../confirm-decrypt-message'; import ConfirmEncryptionPublicKey from '../../confirm-encryption-public-key'; @@ -155,9 +154,7 @@ const ConfirmTransaction = () => { dispatch(getContractMethodData(data, use4ByteResolution)); } } else if (prevTransactionId && !transactionId && !totalUnapproved) { - dispatch(setDefaultHomeActiveTabName('activity')).then(() => { - history.replace(DEFAULT_ROUTE); - }); + history.replace(`${DEFAULT_ROUTE}?tab=activity`); } else if ( prevTransactionId && transactionId && diff --git a/ui/pages/confirmations/confirm-transaction/confirm-transaction.test.js b/ui/pages/confirmations/confirm-transaction/confirm-transaction.test.js index c52e9dac360d..bf6f7108f201 100644 --- a/ui/pages/confirmations/confirm-transaction/confirm-transaction.test.js +++ b/ui/pages/confirmations/confirm-transaction/confirm-transaction.test.js @@ -41,7 +41,6 @@ setBackgroundConnection({ addPollingTokenToAppState: jest.fn(), getContractMethodData: jest.fn(), removePollingTokenFromAppState: jest.fn(), - setDefaultHomeActiveTabName: jest.fn(), }); jest.mock( diff --git a/ui/pages/confirmations/hooks/send/useSendActions.test.ts b/ui/pages/confirmations/hooks/send/useSendActions.test.ts index 6786c34325bc..97c72e93393d 100644 --- a/ui/pages/confirmations/hooks/send/useSendActions.test.ts +++ b/ui/pages/confirmations/hooks/send/useSendActions.test.ts @@ -4,7 +4,6 @@ import { waitFor } from '@testing-library/react'; import mockState from '../../../../../test/data/mock-state.json'; import { EVM_ASSET, SOLANA_ASSET } from '../../../../../test/data/send/assets'; import { renderHookWithProvider } from '../../../../../test/lib/render-helpers'; -import { setDefaultHomeActiveTabName } from '../../../../store/actions'; import * as SendUtils from '../../utils/send'; import * as MultichainTransactionUtils from '../../utils/multichain-snaps'; import * as SendContext from '../../context/send'; @@ -20,11 +19,6 @@ const mockHistory = { push: jest.fn(), }; -jest.mock('../../../../store/actions', () => ({ - ...jest.requireActual('../../../../store/actions'), - setDefaultHomeActiveTabName: jest.fn(), -})); - jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useHistory: () => mockHistory, @@ -45,17 +39,6 @@ function renderHook() { } describe('useSendQueryParams', () => { - const mockSetDefaultHomeActiveTabName = jest.mocked( - setDefaultHomeActiveTabName, - ); - - beforeEach(() => { - mockSetDefaultHomeActiveTabName.mockImplementation( - () => () => - ({}) as unknown as ReturnType, - ); - }); - afterEach(() => { jest.clearAllMocks(); }); @@ -118,9 +101,8 @@ describe('useSendQueryParams', () => { result.handleSubmit(MOCK_ADDRESS_4); await waitFor(() => { - expect(mockSetDefaultHomeActiveTabName).toHaveBeenCalledWith('activity'); expect(mockSubmitNonEvmTransaction).toHaveBeenCalled(); - expect(mockHistory.push).toHaveBeenCalledWith('/'); + expect(mockHistory.push).toHaveBeenCalledWith('/?tab=activity'); }); }); }); diff --git a/ui/pages/confirmations/hooks/send/useSendActions.ts b/ui/pages/confirmations/hooks/send/useSendActions.ts index 8260b5cfddbe..2113386cc5ce 100644 --- a/ui/pages/confirmations/hooks/send/useSendActions.ts +++ b/ui/pages/confirmations/hooks/send/useSendActions.ts @@ -9,7 +9,6 @@ import { DEFAULT_ROUTE, SEND_ROUTE, } from '../../../../helpers/constants/routes'; -import { setDefaultHomeActiveTabName } from '../../../../store/actions'; import { SendPages } from '../../constants/send'; import { sendMultichainTransactionForReview } from '../../utils/multichain-snaps'; import { addLeadingZeroIfNeeded, submitEvmTransaction } from '../../utils/send'; @@ -53,7 +52,6 @@ export const useSendActions = () => { history.push(route); } else { history.push(`${SEND_ROUTE}/${SendPages.LOADER}`); - await dispatch(setDefaultHomeActiveTabName('activity')); try { await sendMultichainTransactionForReview( fromAccount as InternalAccount, @@ -64,7 +62,7 @@ export const useSendActions = () => { amount: addLeadingZeroIfNeeded(value || ('0' as string)) as string, }, ); - history.push(DEFAULT_ROUTE); + history.push(`${DEFAULT_ROUTE}?tab=activity`); } catch (error) { // intentional empty catch } diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js index 6b59c1274b2d..4e2359377044 100644 --- a/ui/pages/home/home.component.js +++ b/ui/pages/home/home.component.js @@ -119,9 +119,7 @@ export default class Home extends PureComponent { // This prop is used in the `shouldCloseNotificationPopup` function // eslint-disable-next-line react/no-unused-prop-types totalUnapprovedCount: PropTypes.number.isRequired, - defaultHomeActiveTabName: PropTypes.string, participateInMetaMetrics: PropTypes.bool.isRequired, - onTabClick: PropTypes.func.isRequired, haveSwapsQuotes: PropTypes.bool.isRequired, showAwaitingSwapScreen: PropTypes.bool.isRequired, haveBridgeQuotes: PropTypes.bool.isRequired, @@ -823,8 +821,6 @@ export default class Home extends PureComponent { render() { const { - defaultHomeActiveTabName, - onTabClick, useExternalServices, setBasicFunctionalityModalOpen, forgottenPassword, @@ -920,11 +916,9 @@ export default class Home extends PureComponent { : null}
diff --git a/ui/pages/home/home.container.js b/ui/pages/home/home.container.js index 14e3e0c8b9c7..d59443b4c9c3 100644 --- a/ui/pages/home/home.container.js +++ b/ui/pages/home/home.container.js @@ -35,7 +35,6 @@ import { getInfuraBlocked } from '../../../shared/modules/selectors/networks'; import { attemptCloseNotificationPopup, setConnectedStatusPopoverHasBeenShown, - setDefaultHomeActiveTabName, setWeb3ShimUsageAlertDismissed, setAlertEnabledness, setRecoveryPhraseReminderHasBeenShown, @@ -93,7 +92,6 @@ const mapStateToProps = (state) => { const { seedPhraseBackedUp, connectedStatusPopoverHasBeenShown, - defaultHomeActiveTabName, swapsState, quotes, dataCollectionForMarketing, @@ -155,7 +153,6 @@ const mapStateToProps = (state) => { participateInMetaMetrics, hasApprovalFlows: getApprovalFlows(state)?.length > 0, connectedStatusPopoverHasBeenShown, - defaultHomeActiveTabName, firstTimeFlowType, completedOnboarding, haveSwapsQuotes: Boolean(Object.values(swapsState.quotes || {}).length), @@ -202,7 +199,6 @@ const mapDispatchToProps = (dispatch) => { attemptCloseNotificationPopup: () => attemptCloseNotificationPopup(), setConnectedStatusPopoverHasBeenShown: () => dispatch(setConnectedStatusPopoverHasBeenShown()), - onTabClick: (name) => dispatch(setDefaultHomeActiveTabName(name)), setWeb3ShimUsageAlertDismissed: (origin) => setWeb3ShimUsageAlertDismissed(origin), disableWeb3ShimUsageAlert: () => diff --git a/ui/pages/settings/transaction-shield-tab/claims-form/claims-form.tsx b/ui/pages/settings/transaction-shield-tab/claims-form/claims-form.tsx index 013ab4eb3235..c196f1004a9d 100644 --- a/ui/pages/settings/transaction-shield-tab/claims-form/claims-form.tsx +++ b/ui/pages/settings/transaction-shield-tab/claims-form/claims-form.tsx @@ -48,10 +48,7 @@ import { DEFAULT_ROUTE, TRANSACTION_SHIELD_CLAIM_ROUTES, } from '../../../../helpers/constants/routes'; -import { - submitShieldClaim, - setDefaultHomeActiveTabName, -} from '../../../../store/actions'; +import { submitShieldClaim } from '../../../../store/actions'; import LoadingScreen from '../../../../components/ui/loading-screen'; import { setShowClaimSubmitToast } from '../../../../components/app/toast-master/utils'; import { ClaimSubmitToastType } from '../../../../../shared/constants/app-state'; @@ -356,9 +353,8 @@ const ClaimsForm = ({ isView = false }: { isView?: boolean }) => { ); const handleOpenActivityTab = useCallback(async () => { - dispatch(setDefaultHomeActiveTabName('activity')); - navigate(DEFAULT_ROUTE); - }, [dispatch, navigate]); + navigate(`${DEFAULT_ROUTE}?tab=activity`); + }, [navigate]); const handleSubmitClaim = useCallback(async () => { if (isInvalidData) { diff --git a/ui/pages/swaps/awaiting-swap/awaiting-swap.js b/ui/pages/swaps/awaiting-swap/awaiting-swap.js index 4da39eac1d6a..0db29d1519a2 100644 --- a/ui/pages/swaps/awaiting-swap/awaiting-swap.js +++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.js @@ -55,10 +55,7 @@ import PulseLoader from '../../../components/ui/pulse-loader'; import { isFlask, isBeta } from '../../../helpers/utils/build-types'; import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'; -import { - stopPollingForQuotes, - setDefaultHomeActiveTabName, -} from '../../../store/actions'; +import { stopPollingForQuotes } from '../../../store/actions'; import { getRenderableNetworkFeesForQuote } from '../swaps.util'; import SwapsFooter from '../swaps-footer'; @@ -348,8 +345,7 @@ export default function AwaitingSwap({ ) { navigate(DEFAULT_ROUTE); } else { - await dispatch(setDefaultHomeActiveTabName('activity')); - navigate(DEFAULT_ROUTE); + navigate(`${DEFAULT_ROUTE}?tab=activity`); } }} onCancel={async () => diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 0ec339bed93d..9f4b5309c56d 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -1862,10 +1862,6 @@ export function getOriginOfCurrentTab(state) { return state.activeTab.origin; } -export function getDefaultHomeActiveTabName(state) { - return state.metamask.defaultHomeActiveTabName; -} - export function getIpfsGateway(state) { return state.metamask.ipfsGateway; } diff --git a/ui/store/actions.ts b/ui/store/actions.ts index 63b36d96e015..ea571fef6245 100644 --- a/ui/store/actions.ts +++ b/ui/store/actions.ts @@ -4222,17 +4222,6 @@ export function setPreference( }; } -export function setDefaultHomeActiveTabName( - value: string, -): ThunkAction { - // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31879 - // eslint-disable-next-line @typescript-eslint/no-misused-promises - return async (dispatch: MetaMaskReduxDispatch) => { - await submitRequestToBackground('setDefaultHomeActiveTabName', [value]); - await forceUpdateMetamaskState(dispatch); - }; -} - export function setShowNativeTokenAsMainBalancePreference(value: boolean) { return setPreference('showNativeTokenAsMainBalance', value); }