diff --git a/e2e-tests/popup/common/home-tabs.spec.ts b/e2e-tests/popup/common/home-tabs.spec.ts new file mode 100644 index 000000000..332f9688d --- /dev/null +++ b/e2e-tests/popup/common/home-tabs.spec.ts @@ -0,0 +1,105 @@ +import { popup, popupExpect } from '../../fixtures'; + +popup.describe('Popup UI: Home tabs', () => { + popup( + 'should stay on the Tokens tab after coming back from token details', + async ({ popupPage, unlockVault }) => { + await unlockVault(); + await new Promise(r => setTimeout(r, 2000)); + + // Reach Home the way that used to stamp the stale tab index onto the + // history entry: open an NFT and come back. + await popupPage.getByText('NFTs').click(); + await new Promise(r => setTimeout(r, 2000)); + + await popupPage + .getByTestId('nft-token-card') + .filter({ hasText: 'west' }) + .click(); + await popupExpect( + popupPage.getByRole('heading', { name: 'west' }) + ).toBeVisible(); + + await popupPage.getByText('Back').click(); + await popupExpect(popupPage.getByTitle('NFTs')).toBeVisible(); + + // Switch to Tokens, open a token, come back. + await popupPage.getByText('Tokens').click(); + await popupExpect(popupPage.getByTitle('Tokens')).toBeVisible(); + + await popupPage.getByText('Casper', { exact: true }).first().click(); + await popupExpect( + popupPage.getByRole('heading', { name: 'Token' }) + ).toBeVisible(); + + await popupPage.getByText('Back').click(); + + await popupExpect(popupPage.getByTitle('Tokens')).toBeVisible(); + } + ); + + popup( + 'should stay on the Activity tab after coming back from deploy details', + async ({ popupPage, unlockVault }) => { + await unlockVault(); + await new Promise(r => setTimeout(r, 2000)); + + await popupPage.getByText('Activity').click(); + await new Promise(r => setTimeout(r, 2000)); + + await popupPage.getByTestId('deploy-plate').first().click(); + await popupPage.getByText('Back').click(); + + await popupExpect(popupPage.getByTitle('Activity')).toBeVisible(); + + await popupPage.getByText('Tokens').click(); + await popupPage.getByText('Casper', { exact: true }).first().click(); + await popupExpect( + popupPage.getByRole('heading', { name: 'Token' }) + ).toBeVisible(); + + await popupPage.getByText('Back').click(); + + await popupExpect(popupPage.getByTitle('Tokens')).toBeVisible(); + } + ); + + popup( + 'should keep the active tab when the navigation menu is opened and closed', + async ({ popupPage, unlockVault }) => { + await unlockVault(); + await new Promise(r => setTimeout(r, 2000)); + + await popupPage.getByText('NFTs').click(); + await popupExpect(popupPage.getByTitle('NFTs')).toBeVisible(); + + await popupPage.getByTestId('menu-open-icon').click(); + await popupPage.getByTestId('menu-close-icon').click(); + + await popupExpect(popupPage.getByTitle('NFTs')).toBeVisible(); + } + ); + + popup( + 'should keep deploy details rendered when the navigation menu is toggled', + async ({ popupPage, unlockVault }) => { + await unlockVault(); + await new Promise(r => setTimeout(r, 2000)); + + await popupPage.getByText('Activity').click(); + await new Promise(r => setTimeout(r, 2000)); + + await popupPage.getByTestId('deploy-plate').first().click(); + await popupExpect( + popupPage.getByText('Timestamp', { exact: true }) + ).toBeVisible(); + + await popupPage.getByTestId('menu-open-icon').click(); + await popupPage.getByTestId('menu-close-icon').click(); + + await popupExpect( + popupPage.getByText('Timestamp', { exact: true }) + ).toBeVisible(); + } + ); +}); diff --git a/src/apps/popup/app-router.tsx b/src/apps/popup/app-router.tsx index 6dafcae75..059d127a5 100644 --- a/src/apps/popup/app-router.tsx +++ b/src/apps/popup/app-router.tsx @@ -4,6 +4,7 @@ import { HashRouter, Route, Routes } from 'react-router-dom'; import { useUserActivityTracker } from '@src/hooks/use-user-activity-tracker'; +import { HomeTabProvider } from '@popup/hooks/use-home-tab'; import { AccountSettingsPage } from '@popup/pages/account-settings'; import { AddContactPage } from '@popup/pages/add-contact'; import { AddWatchAccount } from '@popup/pages/add-watch-account'; @@ -63,7 +64,9 @@ export function AppRouter() { return ( - + + + ); } diff --git a/src/apps/popup/hooks/use-home-tab.tsx b/src/apps/popup/hooks/use-home-tab.tsx new file mode 100644 index 000000000..e9ab123a2 --- /dev/null +++ b/src/apps/popup/hooks/use-home-tab.tsx @@ -0,0 +1,50 @@ +import React, { + ReactNode, + createContext, + useContext, + useMemo, + useState +} from 'react'; + +import { HomePageTabName } from '@src/constants'; + +interface HomeTabContextValue { + activeHomeTab: HomePageTabName; + setActiveHomeTab: (tab: HomePageTabName) => void; +} + +const HomeTabContext = createContext(null); + +/** + * Owns the active Home tab for the lifetime of the popup session. + * + * Deliberately ephemeral: it is destroyed when the popup closes (and when the + * vault locks), so reopening always starts on Tokens. The tab must not travel + * in react-router `location.state` — state is bound to a history entry, so a + * later `navigate(-1)` would restore whatever tab was intended when that entry + * was created rather than the tab the user actually left (WALLET-1360). + */ +export const HomeTabProvider = ({ children }: { children: ReactNode }) => { + const [activeHomeTab, setActiveHomeTab] = useState( + HomePageTabName.Tokens + ); + + const value = useMemo( + () => ({ activeHomeTab, setActiveHomeTab }), + [activeHomeTab] + ); + + return ( + {children} + ); +}; + +export const useHomeTab = () => { + const context = useContext(HomeTabContext); + + if (!context) { + throw new Error('useHomeTab must be used within HomeTabProvider'); + } + + return context; +}; diff --git a/src/apps/popup/pages/deploy-details/index.tsx b/src/apps/popup/pages/deploy-details/index.tsx index 003aa0b99..cb0583efe 100644 --- a/src/apps/popup/pages/deploy-details/index.tsx +++ b/src/apps/popup/pages/deploy-details/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { DeployDetailsPageContent } from '@popup/pages/deploy-details/content'; -import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router'; +import { useTypedLocation } from '@popup/router'; import { HeaderPopup, @@ -9,13 +9,11 @@ import { HeaderViewInExplorer, PopupLayout } from '@libs/layout'; -import { HomePageTabsId } from '@libs/ui/components'; export const DeployDetailsPage = () => { const location = useTypedLocation(); - const navigate = useTypedNavigate(); - const { deploy, navigateHome } = location.state; + const { deploy } = location.state; return ( { withConnectionStatus renderSubmenuBarItems={() => ( <> - { - navigate(RouterPath.Home, { - state: { - // set the active tab to deploys - activeTabId: HomePageTabsId.Deploys - } - }); - } - : undefined - } - /> + )} diff --git a/src/apps/popup/pages/home/components/deploys-list/index.tsx b/src/apps/popup/pages/home/components/deploys-list/index.tsx index 5e6ff1da0..673e84ce9 100644 --- a/src/apps/popup/pages/home/components/deploys-list/index.tsx +++ b/src/apps/popup/pages/home/components/deploys-list/index.tsx @@ -51,11 +51,7 @@ export const DeploysList = () => { contentTop={SpacingSize.None} rows={deploys} renderRow={deploy => ( - + )} marginLeftForItemSeparatorLine={0} borderBottomPseudoElementRules={activityBottomPseudoElementRules} diff --git a/src/apps/popup/pages/home/index.tsx b/src/apps/popup/pages/home/index.tsx index 9245fe92d..fbbd7b74a 100644 --- a/src/apps/popup/pages/home/index.tsx +++ b/src/apps/popup/pages/home/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from 'react'; +import React, { useRef } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { shallowEqual, useSelector } from 'react-redux'; import styled from 'styled-components'; @@ -6,7 +6,8 @@ import styled from 'styled-components'; import { HomePageTabName, NetworkSetting } from '@src/constants'; import { isSafariBuild } from '@src/utils'; -import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router'; +import { useHomeTab } from '@popup/hooks/use-home-tab'; +import { RouterPath, useTypedNavigate } from '@popup/router'; import { selectActiveNetworkSetting, @@ -61,12 +62,18 @@ const Container = styled(TileContainer)` export function HomePageContent() { const navigate = useTypedNavigate(); const { t } = useTranslation(); - const location = useTypedLocation(); const dismissedAppEventIds = useSelector( selectDismissedAppEvents, shallowEqual ); - const state = location.state; + + const { activeHomeTab, setActiveHomeTab } = useHomeTab(); + + const handleTabChange = (tabName: string) => { + // `Tabs` is name-addressed and generic over plain strings; on this page + // the names are exactly the HomePageTabName members rendered below. + setActiveHomeTab(tabName as HomePageTabName); + }; const network = useSelector(selectActiveNetworkSetting); const activeAccount = useSelector(selectVaultActiveAccount); @@ -84,14 +91,6 @@ export function HomePageContent() { wasExpirationBannerShown.current = true; } - useEffect(() => { - if (!state?.activeTabId) { - const container = document.querySelector('#ms-container'); - - container?.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); - } - }, [state?.activeTabId]); - const { activeMarketingEvent } = useGetActiveAppMarketingEvent(dismissedAppEventIds); @@ -150,7 +149,7 @@ export function HomePageContent() { )} - + diff --git a/src/apps/popup/pages/nft-details/index.tsx b/src/apps/popup/pages/nft-details/index.tsx index c1c9e598a..1a699dfe1 100644 --- a/src/apps/popup/pages/nft-details/index.tsx +++ b/src/apps/popup/pages/nft-details/index.tsx @@ -10,7 +10,6 @@ import { PopupLayout } from '@libs/layout'; import { useFetchNftTokens } from '@libs/services/nft-service'; -import { HomePageTabsId } from '@libs/ui/components'; import { NftDetailsContent } from './content'; @@ -45,14 +44,7 @@ export const NftDetailsPage = () => { withConnectionStatus renderSubmenuBarItems={() => ( <> - - navigate(RouterPath.Home, { - state: { activeTabId: HomePageTabsId.NFTs } - }) - } - /> + { const isCasper2Network = useSelector(selectIsCasper2Network); const casperNetworkApiVersion = useSelector(selectCasperNetworkApiVersion); const { changeActiveAccountSupportsWithEvent } = useAccountManager(); + const { setActiveHomeTab } = useHomeTab(); const activeAccount = useSelector(selectVaultActiveAccount); const isActiveAccountFromLedger = useSelector( @@ -524,15 +526,8 @@ export const StakesPage = () => { askForReviewAfter == null || currentDate > askForReviewAfter; if (ratedInStore || !shouldAskForReview) { - const homeRoutesState = { - state: { - // set the active tab to deploys - activeTabId: HomePageTabsId.Deploys - } - }; - - // Navigate "Home" with the pre-defined state - navigate(RouterPath.Home, homeRoutesState); + setActiveHomeTab(HomePageTabName.Activity); + navigate(RouterPath.Home); } else { // Navigate to "RateApp" when the application has not been rated in the store, // and it's time to ask for a review. diff --git a/src/apps/popup/pages/transfer-nft/index.tsx b/src/apps/popup/pages/transfer-nft/index.tsx index fd293459a..ba706e9f3 100644 --- a/src/apps/popup/pages/transfer-nft/index.tsx +++ b/src/apps/popup/pages/transfer-nft/index.tsx @@ -4,10 +4,15 @@ import { Trans, useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { useParams } from 'react-router-dom'; -import { ErrorMessages, networkNameToSdkNetworkNameMap } from '@src/constants'; +import { + ErrorMessages, + HomePageTabName, + networkNameToSdkNetworkNameMap +} from '@src/constants'; import { NFTTokenStandard } from '@src/utils'; import { useAccountManager } from '@popup/hooks/use-account-actions-with-events'; +import { useHomeTab } from '@popup/hooks/use-home-tab'; import { TransferNFTSteps, getDefaultPaymentAmountBasedOnNftTokenStandard @@ -64,7 +69,6 @@ import { useFetchNftTokens } from '@libs/services/nft-service'; import { buildNftTransferTransactions } from '@libs/services/tx-builders'; import { Button, - HomePageTabsId, LedgerEventView, SvgIcon, TransferSuccessScreen, @@ -91,6 +95,7 @@ export const TransferNftPage = () => { const isCasper2Network = useSelector(selectIsCasper2Network); const casperNetworkApiVersion = useSelector(selectCasperNetworkApiVersion); const { changeActiveAccountSupportsWithEvent } = useAccountManager(); + const { setActiveHomeTab } = useHomeTab(); const { contractPackageHash, tokenId } = useParams(); @@ -423,15 +428,8 @@ export const TransferNftPage = () => { askForReviewAfter == null || currentDate > askForReviewAfter; if (ratedInStore || !shouldAskForReview) { - const homeRoutesState = { - state: { - // set the active tab to deploys - activeTabId: HomePageTabsId.Deploys - } - }; - - // Navigate to "Home" with the pre-defined state - navigate(RouterPath.Home, homeRoutesState); + setActiveHomeTab(HomePageTabName.Activity); + navigate(RouterPath.Home); } else { // Navigate to "RateApp" when the application has not been rated in the store, and it's time to ask for a review. navigate(RouterPath.RateApp); diff --git a/src/apps/popup/pages/transfer/index.tsx b/src/apps/popup/pages/transfer/index.tsx index 5ec443b3c..122f49d7a 100644 --- a/src/apps/popup/pages/transfer/index.tsx +++ b/src/apps/popup/pages/transfer/index.tsx @@ -7,10 +7,12 @@ import styled from 'styled-components'; import { ERC20_PAYMENT_AMOUNT_AVERAGE_MOTES, ErrorMessages, + HomePageTabName, networkNameToSdkNetworkNameMap } from '@src/constants'; import { useAccountManager } from '@popup/hooks/use-account-actions-with-events'; +import { useHomeTab } from '@popup/hooks/use-home-tab'; import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router'; import { accountPendingDeployHashesChanged } from '@background/redux/account-info/actions'; @@ -66,7 +68,6 @@ import { import { HardwareWalletType } from '@libs/types/account'; import { Button, - HomePageTabsId, LedgerEventView, SvgIcon, TransferSuccessScreen, @@ -106,6 +107,7 @@ export const TransferPage = () => { const isCasper2Network = useSelector(selectIsCasper2Network); const casperNetworkApiVersion = useSelector(selectCasperNetworkApiVersion); const { changeActiveAccountSupportsWithEvent } = useAccountManager(); + const { setActiveHomeTab } = useHomeTab(); const [isErc20Transfer, setIsErc20Transfer] = useState(false); const [selectedToken, setSelectedToken] = useState(); @@ -515,15 +517,8 @@ export const TransferPage = () => { askForReviewAfter == null || currentDate > askForReviewAfter; if (ratedInStore || !shouldAskForReview) { - const homeRoutesState = { - state: { - // set the active tab to deploys - activeTabId: HomePageTabsId.Deploys - } - }; - - // Navigate to "Home" with the pre-defined state - navigate(RouterPath.Home, homeRoutesState); + setActiveHomeTab(HomePageTabName.Activity); + navigate(RouterPath.Home); } else { // Navigate to "RateApp" when the application has not been rated in the store, and it's time to ask for a review. navigate(RouterPath.RateApp); diff --git a/src/apps/popup/router/types.ts b/src/apps/popup/router/types.ts index f60067d46..128b4a480 100644 --- a/src/apps/popup/router/types.ts +++ b/src/apps/popup/router/types.ts @@ -8,11 +8,9 @@ import { ErrorLocationState } from '@libs/layout/error/types'; export interface LocationState extends ErrorLocationState { showNavigationMenu?: boolean; - activeTabId?: number; tokenData?: TokenType | null; nftData?: NFTData; recipientPublicKey?: string; deploy?: IDeploy; - navigateHome?: boolean; appEvent?: IAppMarketingEvent; } diff --git a/src/apps/popup/router/use-navigation-menu.ts b/src/apps/popup/router/use-navigation-menu.ts index 9085455eb..a13e12871 100644 --- a/src/apps/popup/router/use-navigation-menu.ts +++ b/src/apps/popup/router/use-navigation-menu.ts @@ -9,6 +9,7 @@ export function useNavigationMenu() { navigate(location.pathname, { replace: true, state: { + ...location.state, showNavigationMenu: !location.state?.showNavigationMenu } }); @@ -17,13 +18,13 @@ export function useNavigationMenu() { const openNavigationMenu = () => { navigate(location.pathname, { replace: true, - state: { showNavigationMenu: true } + state: { ...location.state, showNavigationMenu: true } }); }; const closeNavigationMenu = () => { navigate(location.pathname, { replace: true, - state: { showNavigationMenu: false } + state: { ...location.state, showNavigationMenu: false } }); }; diff --git a/src/libs/ui/components/deploy-plate/components/TransactionContainer.tsx b/src/libs/ui/components/deploy-plate/components/TransactionContainer.tsx index 4c2400254..7203c8955 100644 --- a/src/libs/ui/components/deploy-plate/components/TransactionContainer.tsx +++ b/src/libs/ui/components/deploy-plate/components/TransactionContainer.tsx @@ -170,7 +170,7 @@ export const TransactionContainer: FC< }; return ( - +
void; - navigateHome?: boolean; } -export const DeployPlate = ({ - deploy, - onClick, - navigateHome = false -}: DeployPlateProps) => { +export const DeployPlate = ({ deploy, onClick }: DeployPlateProps) => { const navigate = useTypedNavigate(); if (isNativeCsprDeploy(deploy)) { @@ -41,8 +36,7 @@ export const DeployPlate = ({ onClick={() => { navigate(RouterPath.DeployDetails, { state: { - deploy, - navigateHome + deploy } }); @@ -63,8 +57,7 @@ export const DeployPlate = ({ onClick={() => { navigate(RouterPath.DeployDetails, { state: { - deploy, - navigateHome + deploy } }); @@ -85,8 +78,7 @@ export const DeployPlate = ({ onClick={() => { navigate(RouterPath.DeployDetails, { state: { - deploy, - navigateHome + deploy } }); @@ -107,8 +99,7 @@ export const DeployPlate = ({ onClick={() => { navigate(RouterPath.DeployDetails, { state: { - deploy, - navigateHome + deploy } }); @@ -129,8 +120,7 @@ export const DeployPlate = ({ onClick={() => { navigate(RouterPath.DeployDetails, { state: { - deploy, - navigateHome + deploy } }); @@ -151,8 +141,7 @@ export const DeployPlate = ({ onClick={() => { navigate(RouterPath.DeployDetails, { state: { - deploy, - navigateHome + deploy } }); @@ -172,8 +161,7 @@ export const DeployPlate = ({ onClick={() => { navigate(RouterPath.DeployDetails, { state: { - deploy, - navigateHome + deploy } }); diff --git a/src/libs/ui/components/tabs/tabs.tsx b/src/libs/ui/components/tabs/tabs.tsx index edb1ed7bf..975130a01 100644 --- a/src/libs/ui/components/tabs/tabs.tsx +++ b/src/libs/ui/components/tabs/tabs.tsx @@ -24,7 +24,7 @@ const StickyTabsContainer = styled.div` const ActiveTabContainer = styled(CenteredFlexRow)` cursor: pointer; - width: calc(33% - 8px); + flex: 1; border-radius: ${({ theme }) => theme.borderRadius.sixteen}px; background-color: ${({ theme }) => theme.color.backgroundPrimary}; padding: 4px 8px; @@ -32,16 +32,10 @@ const ActiveTabContainer = styled(CenteredFlexRow)` const TabContainer = styled(CenteredFlexRow)<{ disable?: boolean }>` cursor: ${({ disable }) => (disable ? 'not-allowed' : 'pointer')}; - width: calc(33% - 8px); + flex: 1; padding: 4px 8px; `; -export const HomePageTabsId = { - Tokens: 0, - NFTs: 1, - Deploys: 2 -}; - export const Tab = styled.div``; interface TabProps { @@ -51,24 +45,58 @@ interface TabProps { interface TabsProps { children: React.ReactElement[]; - preferActiveTabId?: number; + /** + * When provided, the parent owns the active tab. Without it the component + * keeps its own state and starts on the first tab. + */ + activeTabName?: string; + onTabChange?: (tabName: string) => void; onClick?: () => void; } -export function Tabs({ children, preferActiveTabId, onClick }: TabsProps) { - // set preferActiveTabId as the default value if it is provided. We do not need to track props change, so we can set it directly in useState - const [activeTabId, setActiveTabId] = useState(preferActiveTabId || 0); +export function Tabs({ + children, + activeTabName, + onTabChange, + onClick +}: TabsProps) { + const firstTabName = children[0]?.props.tabName ?? ''; + + const [uncontrolledTabName, setUncontrolledTabName] = useState(firstTabName); + + const requestedTabName = activeTabName ?? uncontrolledTabName; + // Fall back to the first tab rather than rendering nothing if the requested + // name matches no child. + const currentTabName = children.some( + tab => tab.props.tabName === requestedTabName + ) + ? requestedTabName + : firstTabName; const { t } = useTranslation(); + const handleTabClick = (tabName: string) => { + if (activeTabName === undefined) { + setUncontrolledTabName(tabName); + } + + if (onTabChange) { + onTabChange(tabName); + } + + if (onClick) { + onClick(); + } + }; + return ( <> - {children.map((tab, index) => { + {children.map(tab => { const { tabName } = tab.props; - return activeTabId === index ? ( + return tabName === currentTabName ? ( {tabName} @@ -76,12 +104,7 @@ export function Tabs({ children, preferActiveTabId, onClick }: TabsProps) { ) : ( { - setActiveTabId(index); - if (onClick) { - onClick(); - } - }} + onClick={() => handleTabClick(tabName)} key={tabName} > @@ -93,9 +116,10 @@ export function Tabs({ children, preferActiveTabId, onClick }: TabsProps) { - {children.map((tab, index) => - activeTabId === index ? tab.props.children : null - )} + { + children.find(tab => tab.props.tabName === currentTabName)?.props + .children + } ); } diff --git a/src/libs/ui/components/transfer-success-screen/transfer-succeess-screen.tsx b/src/libs/ui/components/transfer-success-screen/transfer-succeess-screen.tsx index 4f4c0f01b..bb31edcf6 100644 --- a/src/libs/ui/components/transfer-success-screen/transfer-succeess-screen.tsx +++ b/src/libs/ui/components/transfer-success-screen/transfer-succeess-screen.tsx @@ -1,10 +1,10 @@ import React, { useEffect } from 'react'; import { Trans, useTranslation } from 'react-i18next'; -import { useSelector } from 'react-redux'; -import { RouterPath, useTypedNavigate } from '@popup/router'; +import { HomePageTabName } from '@src/constants'; -import { selectIsCasper2Network } from '@background/redux/settings/selectors'; +import { useHomeTab } from '@popup/hooks/use-home-tab'; +import { RouterPath, useTypedNavigate } from '@popup/router'; import { ContentContainer, @@ -12,7 +12,7 @@ import { SpacingSize, VerticalSpaceContainer } from '@libs/layout'; -import { HomePageTabsId, SvgIcon, Typography } from '@libs/ui/components'; +import { SvgIcon, Typography } from '@libs/ui/components'; interface TransferSuccessScreenProps { headerText: string; @@ -25,24 +25,20 @@ export const TransferSuccessScreen = ({ }: TransferSuccessScreenProps) => { const { t } = useTranslation(); const navigate = useTypedNavigate(); - const isCasper2Network = useSelector(selectIsCasper2Network); + const { setActiveHomeTab } = useHomeTab(); useEffect(() => { const keyDownHandler = (e: KeyboardEvent) => { if (e.key === 'Enter') { - navigate(RouterPath.Home, { - state: { - // set the active tab to deploys - activeTabId: HomePageTabsId.Deploys - } - }); + setActiveHomeTab(HomePageTabName.Activity); + navigate(RouterPath.Home); } }; window.addEventListener('keydown', keyDownHandler); return () => window.removeEventListener('keydown', keyDownHandler); - }, [navigate]); + }, [navigate, setActiveHomeTab]); useEffect(() => { const container = document.querySelector('#ms-container'); @@ -66,9 +62,8 @@ export const TransferSuccessScreen = ({ - {`You can check its status in the ${ - isCasper2Network ? 'Transactions' : 'Deploys' - } tab on your Wallet home page.`} + You can check its status in the Activity tab on your Wallet home + page.