From 34fca01955e3665d2d42203e2ae4f6c44cbbd9c8 Mon Sep 17 00:00:00 2001 From: Ganesh Suresh Patra Date: Fri, 21 Nov 2025 16:11:39 +0530 Subject: [PATCH 1/4] fix: removed isTestEnvironment check for rive animation --- .../shield-entry-modal/shield-illustration-animation.tsx | 2 -- ui/contexts/rive-wasm/index.tsx | 5 ++--- .../shield-icon-animation.tsx | 2 -- .../creation-successful/creation-successful.js | 5 +---- .../creation-successful/wallet-ready-animation.tsx | 2 -- .../onboarding-flow/welcome/fox-appear-animation.tsx | 5 +---- .../welcome/metamask-wordmark-animation.tsx | 2 -- ui/pages/onboarding-flow/welcome/welcome.js | 9 ++++----- .../shield-subscription-icon-animation.tsx | 2 -- ui/pages/unlock-page/unlock-page.component.js | 3 +-- 10 files changed, 9 insertions(+), 28 deletions(-) diff --git a/ui/components/app/shield-entry-modal/shield-illustration-animation.tsx b/ui/components/app/shield-entry-modal/shield-illustration-animation.tsx index 74e9be56cabf..b8ba6050e8c2 100644 --- a/ui/components/app/shield-entry-modal/shield-illustration-animation.tsx +++ b/ui/components/app/shield-entry-modal/shield-illustration-animation.tsx @@ -19,7 +19,6 @@ const ShieldIllustrationAnimation = ({ containerClassName?: string; canvasClassName?: string; }) => { - const isTestEnvironment = Boolean(process.env.IN_TEST); const context = useRiveWasmContext(); const { isWasmReady, error: wasmError } = context; const { @@ -80,7 +79,6 @@ const ShieldIllustrationAnimation = ({ bufferLoading || !buffer || status === 'loading' || - isTestEnvironment || status === 'failed' ) { return ; diff --git a/ui/contexts/rive-wasm/index.tsx b/ui/contexts/rive-wasm/index.tsx index b9bd83efb7e9..0d1ab505f619 100644 --- a/ui/contexts/rive-wasm/index.tsx +++ b/ui/contexts/rive-wasm/index.tsx @@ -9,17 +9,16 @@ import { useAsyncResult } from '../../hooks/useAsync'; // WASM file URL - the file is copied to dist/chrome/images/ by the build process // We don't import it as a module to avoid browserify resolution issues const RIVE_WASM_URL = './images/riv_animations/rive.wasm'; -const isTestEnvironment = Boolean(process.env.IN_TEST); export const useRiveWasmReady = () => { - const [isWasmReady, setIsWasmReady] = useState(isTestEnvironment); + const [isWasmReady, setIsWasmReady] = useState(false); const result = useAsyncResult(async () => { if (isWasmReady) { return true; } - if (isTestEnvironment || typeof RuntimeLoader === 'undefined') { + if (typeof RuntimeLoader === 'undefined') { setIsWasmReady(true); return true; } diff --git a/ui/pages/confirmations/components/confirm/footer/shield-footer-coverage-indicator/shield-icon-animation.tsx b/ui/pages/confirmations/components/confirm/footer/shield-footer-coverage-indicator/shield-icon-animation.tsx index b0e6dfea87a7..7a067d5d2b21 100644 --- a/ui/pages/confirmations/components/confirm/footer/shield-footer-coverage-indicator/shield-icon-animation.tsx +++ b/ui/pages/confirmations/components/confirm/footer/shield-footer-coverage-indicator/shield-icon-animation.tsx @@ -91,7 +91,6 @@ const ShieldIconAnimation = ({ severity?: AlertSeverity; playAnimation?: boolean; }) => { - const isTestEnvironment = Boolean(process.env.IN_TEST); const context = useRiveWasmContext(); const { isWasmReady, error: wasmError } = context; const { @@ -173,7 +172,6 @@ const ShieldIconAnimation = ({ bufferLoading || !buffer || status === 'loading' || - isTestEnvironment || status === 'failed' ) { return ; diff --git a/ui/pages/onboarding-flow/creation-successful/creation-successful.js b/ui/pages/onboarding-flow/creation-successful/creation-successful.js index 05991ace179d..52685d882bc1 100644 --- a/ui/pages/onboarding-flow/creation-successful/creation-successful.js +++ b/ui/pages/onboarding-flow/creation-successful/creation-successful.js @@ -67,7 +67,6 @@ export default function CreationSuccessful() { ); const trackEvent = useContext(MetaMetricsContext); const firstTimeFlowType = useSelector(getFirstTimeFlowType); - const isTestEnvironment = Boolean(process.env.IN_TEST); const isSidePanelEnabled = useSidePanelEnabled(); const learnMoreLink = @@ -291,9 +290,7 @@ export default function CreationSuccessful() { {renderSettingsActions} )} - {!isFromSettingsSRPBackup && !isTestEnvironment && ( - - )} + {!isFromSettingsSRPBackup && } {!isFromSettingsSRPBackup && ( {t('yourWalletIsReady')} )} diff --git a/ui/pages/onboarding-flow/creation-successful/wallet-ready-animation.tsx b/ui/pages/onboarding-flow/creation-successful/wallet-ready-animation.tsx index 28237f6ce251..73b2aae025db 100644 --- a/ui/pages/onboarding-flow/creation-successful/wallet-ready-animation.tsx +++ b/ui/pages/onboarding-flow/creation-successful/wallet-ready-animation.tsx @@ -18,7 +18,6 @@ import { // eslint-disable-next-line @typescript-eslint/naming-convention export default function WalletReadyAnimation() { const theme = useTheme(); - const isTestEnvironment = Boolean(process.env.IN_TEST); const context = useRiveWasmContext(); const { isWasmReady, error: wasmError } = context; const { @@ -84,7 +83,6 @@ export default function WalletReadyAnimation() { bufferLoading || !buffer || status === 'loading' || - isTestEnvironment || status === 'failed' ) { return ; diff --git a/ui/pages/onboarding-flow/welcome/fox-appear-animation.tsx b/ui/pages/onboarding-flow/welcome/fox-appear-animation.tsx index cba243781194..819ba30d0860 100644 --- a/ui/pages/onboarding-flow/welcome/fox-appear-animation.tsx +++ b/ui/pages/onboarding-flow/welcome/fox-appear-animation.tsx @@ -23,8 +23,6 @@ export default function FoxAppearAnimation({ isLoader = false, skipTransition = false, }: FoxAppearAnimationProps) { - const isTestEnvironment = Boolean(process.env.IN_TEST); - const context = useRiveWasmContext(); const { isWasmReady, error: wasmError } = context; const { @@ -108,8 +106,7 @@ export default function FoxAppearAnimation({ bufferLoading || !buffer || status === 'loading' || - status === 'failed' || - isTestEnvironment + status === 'failed' ) { return ( (null); const theme = useTheme(); - const isTestEnvironment = Boolean(process.env.IN_TEST); const context = useRiveWasmContext(); const { isWasmReady, error: wasmError, setIsAnimationCompleted } = context; const { @@ -140,7 +139,6 @@ export default function MetamaskWordMarkAnimation({ !isWasmReady || bufferLoading || !buffer || - isTestEnvironment || status === 'loading' || status === 'failed' ) { diff --git a/ui/pages/onboarding-flow/welcome/welcome.js b/ui/pages/onboarding-flow/welcome/welcome.js index e7548dcded6a..1520f0136b90 100644 --- a/ui/pages/onboarding-flow/welcome/welcome.js +++ b/ui/pages/onboarding-flow/welcome/welcome.js @@ -83,7 +83,6 @@ export default function OnboardingWelcome() { const [isLoggingIn, setIsLoggingIn] = useState(false); const [loginError, setLoginError] = useState(null); - const isTestEnvironment = Boolean(process.env.IN_TEST); const { animationCompleted } = useRiveWasmContext(); const shouldSkipAnimation = Boolean( @@ -92,7 +91,7 @@ export default function OnboardingWelcome() { // In test environments or when returning from another page, skip animations const [isAnimationComplete, setIsAnimationComplete] = useState( - isTestEnvironment || shouldSkipAnimation, + shouldSkipAnimation || false, ); const isFireFox = getBrowserName() === PLATFORM_FIREFOX; @@ -424,7 +423,7 @@ export default function OnboardingWelcome() { width={BlockSize.Full} className="welcome-container" > - {!isLoggingIn && !isTestEnvironment && ( + {!isLoggingIn && ( }> - {!isTestEnvironment && isAnimationComplete && ( + {isAnimationComplete && ( }> @@ -457,7 +456,7 @@ export default function OnboardingWelcome() { )} - {!isTestEnvironment && isLoggingIn && ( + {isLoggingIn && ( }> diff --git a/ui/pages/settings/transaction-shield-tab/shield-subscription-icon-animation.tsx b/ui/pages/settings/transaction-shield-tab/shield-subscription-icon-animation.tsx index 1f31ccb717cd..6908b8a31646 100644 --- a/ui/pages/settings/transaction-shield-tab/shield-subscription-icon-animation.tsx +++ b/ui/pages/settings/transaction-shield-tab/shield-subscription-icon-animation.tsx @@ -27,7 +27,6 @@ const ShieldSubscriptionIconAnimation = ({ containerClassName?: string; canvasClassName?: string; }) => { - const isTestEnvironment = Boolean(process.env.IN_TEST); const context = useRiveWasmContext(); const { isWasmReady, error: wasmError } = context; const { @@ -91,7 +90,6 @@ const ShieldSubscriptionIconAnimation = ({ bufferLoading || !buffer || status === 'loading' || - isTestEnvironment || status === 'failed' ) { return ; diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js index 3ab9a8713c0e..ad51319b6075 100644 --- a/ui/pages/unlock-page/unlock-page.component.js +++ b/ui/pages/unlock-page/unlock-page.component.js @@ -505,7 +505,6 @@ class UnlockPage extends Component { const needHelpText = t('needHelpLinkText'); const isRehydrationFlow = isSocialLoginFlow && !isOnboardingCompleted; - const isTestEnvironment = Boolean(process.env.IN_TEST); return ( - {!isTestEnvironment && !isRehydrationFlow && ( + {!isRehydrationFlow && ( }> From 4253aaac436d6e468adbdca44dc4587442c62556 Mon Sep 17 00:00:00 2001 From: Ganesh Suresh Patra Date: Fri, 21 Nov 2025 16:15:57 +0530 Subject: [PATCH 2/4] fix: unit test case update for animations --- .../welcome/__snapshots__/welcome.test.js.snap | 5 ++++- ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap | 3 +++ ui/pages/unlock-page/unlock-page.test.js | 5 +++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/ui/pages/onboarding-flow/welcome/__snapshots__/welcome.test.js.snap b/ui/pages/onboarding-flow/welcome/__snapshots__/welcome.test.js.snap index 5e2fa90dc289..838307946ed2 100644 --- a/ui/pages/onboarding-flow/welcome/__snapshots__/welcome.test.js.snap +++ b/ui/pages/onboarding-flow/welcome/__snapshots__/welcome.test.js.snap @@ -5,10 +5,13 @@ exports[`Welcome Page render matches snapshot 1`] = `
+
`; diff --git a/ui/pages/unlock-page/unlock-page.test.js b/ui/pages/unlock-page/unlock-page.test.js index bb247dd9e308..9a46de1f5c5a 100644 --- a/ui/pages/unlock-page/unlock-page.test.js +++ b/ui/pages/unlock-page/unlock-page.test.js @@ -23,6 +23,11 @@ jest.mock('../../contexts/navigation-state', () => ({ NavigationStateProvider: ({ children }) => children, })); +jest.mock('../onboarding-flow/welcome/fox-appear-animation', () => ({ + __esModule: true, + default: () =>
, +})); + const mockTryUnlockMetamask = jest.fn(() => { return async () => { return Promise.resolve(); From a3fe5d9663a993e80c89d262e3f3f0dd0b26be7c Mon Sep 17 00:00:00 2001 From: Ganesh Suresh Patra Date: Fri, 21 Nov 2025 16:36:19 +0530 Subject: [PATCH 3/4] fix: updated integration testing --- .../onboarding/import-wallet.test.tsx | 28 +++++++++++++++++++ .../onboarding/wallet-created.test.tsx | 28 +++++++++++++++++++ 2 files changed, 56 insertions(+) diff --git a/test/integration/onboarding/import-wallet.test.tsx b/test/integration/onboarding/import-wallet.test.tsx index 58038625b9a7..8b06352e74df 100644 --- a/test/integration/onboarding/import-wallet.test.tsx +++ b/test/integration/onboarding/import-wallet.test.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { waitFor } from '@testing-library/react'; import nock from 'nock'; import mockMetaMaskState from '../data/onboarding-completion-route.json'; @@ -23,6 +24,33 @@ jest.mock('../../../ui/ducks/bridge/actions', () => ({ ...jest.requireActual('../../../ui/ducks/bridge/actions'), })); +jest.mock( + '../../../ui/pages/onboarding-flow/welcome/fox-appear-animation', + () => ({ + // eslint-disable-next-line @typescript-eslint/naming-convention + __esModule: true, + default: () =>
, + }), +); + +jest.mock( + '../../../ui/pages/onboarding-flow/welcome/metamask-wordmark-animation', + () => ({ + // eslint-disable-next-line @typescript-eslint/naming-convention + __esModule: true, + default: () =>
, + }), +); + +jest.mock( + '../../../ui/pages/onboarding-flow/creation-successful/wallet-ready-animation', + () => ({ + // eslint-disable-next-line @typescript-eslint/naming-convention + __esModule: true, + default: () =>
, + }), +); + const mockedBackgroundConnection = jest.mocked(backgroundConnection); const backgroundConnectionMocked = { diff --git a/test/integration/onboarding/wallet-created.test.tsx b/test/integration/onboarding/wallet-created.test.tsx index 497232dde6cf..7a96a2055c1d 100644 --- a/test/integration/onboarding/wallet-created.test.tsx +++ b/test/integration/onboarding/wallet-created.test.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { waitFor } from '@testing-library/react'; import nock from 'nock'; import mockMetaMaskState from '../data/onboarding-completion-route.json'; @@ -23,6 +24,33 @@ jest.mock('../../../ui/ducks/bridge/actions', () => ({ ...jest.requireActual('../../../ui/ducks/bridge/actions'), })); +jest.mock( + '../../../ui/pages/onboarding-flow/welcome/fox-appear-animation', + () => ({ + // eslint-disable-next-line @typescript-eslint/naming-convention + __esModule: true, + default: () =>
, + }), +); + +jest.mock( + '../../../ui/pages/onboarding-flow/welcome/metamask-wordmark-animation', + () => ({ + // eslint-disable-next-line @typescript-eslint/naming-convention + __esModule: true, + default: () =>
, + }), +); + +jest.mock( + '../../../ui/pages/onboarding-flow/creation-successful/wallet-ready-animation', + () => ({ + // eslint-disable-next-line @typescript-eslint/naming-convention + __esModule: true, + default: () =>
, + }), +); + const mockedBackgroundConnection = jest.mocked(backgroundConnection); const backgroundConnectionMocked = { From 21e1e44c129bb59330e498c7dd17d68a54e54cbc Mon Sep 17 00:00:00 2001 From: Ganesh Suresh Patra Date: Mon, 24 Nov 2025 10:07:14 +0530 Subject: [PATCH 4/4] fix: comment review update --- ui/pages/onboarding-flow/welcome/welcome.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/ui/pages/onboarding-flow/welcome/welcome.js b/ui/pages/onboarding-flow/welcome/welcome.js index 1520f0136b90..6b18c4b8e882 100644 --- a/ui/pages/onboarding-flow/welcome/welcome.js +++ b/ui/pages/onboarding-flow/welcome/welcome.js @@ -90,9 +90,8 @@ export default function OnboardingWelcome() { ); // In test environments or when returning from another page, skip animations - const [isAnimationComplete, setIsAnimationComplete] = useState( - shouldSkipAnimation || false, - ); + const [isAnimationComplete, setIsAnimationComplete] = + useState(shouldSkipAnimation); const isFireFox = getBrowserName() === PLATFORM_FIREFOX; // Don't allow users to come back to this screen after they