Merge branch 'main' into latency_metrics_fix

jpuri · web-flow · commit 556f8b5be817 · 2025-11-24T12:11:08.000+05:30
diff --git 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: () => <div data-testid="fox-appear-animation" />,
+  }),
+);
+
+jest.mock(
+  '../../../ui/pages/onboarding-flow/welcome/metamask-wordmark-animation',
+  () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: () => <div data-testid="metamask-wordmark-animation" />,
+  }),
+);
+
+jest.mock(
+  '../../../ui/pages/onboarding-flow/creation-successful/wallet-ready-animation',
+  () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: () => <div data-testid="wallet-ready-animation" />,
+  }),
+);
+
 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
@@ -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: () => <div data-testid="fox-appear-animation" />,
+  }),
+);
+
+jest.mock(
+  '../../../ui/pages/onboarding-flow/welcome/metamask-wordmark-animation',
+  () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: () => <div data-testid="metamask-wordmark-animation" />,
+  }),
+);
+
+jest.mock(
+  '../../../ui/pages/onboarding-flow/creation-successful/wallet-ready-animation',
+  () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: () => <div data-testid="wallet-ready-animation" />,
+  }),
+);
+
 const mockedBackgroundConnection = jest.mocked(backgroundConnection);
 
 const backgroundConnectionMocked = {
diff --git 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 <Box className={containerClassName}></Box>;
diff --git 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
@@ -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 <Box className="riv-animation__shield-icon-container"></Box>;
diff --git 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}
         </Box>
       )}
-      {!isFromSettingsSRPBackup && !isTestEnvironment && (
-        <WalletReadyAnimation />
-      )}
+      {!isFromSettingsSRPBackup && <WalletReadyAnimation />}
       {!isFromSettingsSRPBackup && (
         <Text className="title">{t('yourWalletIsReady')}</Text>
       )}
diff --git 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 <Box className="riv-animation__wallet-ready-container"></Box>;
diff --git 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`] = `
   <div
     class="mm-box welcome-container mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--height-full"
   >
+    <div
+      class="mm-box"
+    />
     <div
       class="mm-box welcome-login"
       data-testid="get-started"
-      style="opacity: 1; transform: translateY(0) scale(1); transition: opacity 0.6s ease-out, transform 0.6s ease-out;"
+      style="opacity: 0; transform: translateY(80px) scale(0.8); transition: opacity 0.6s ease-out, transform 0.6s ease-out;"
     >
       <div
         class="mm-box mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column mm-box--width-full"
diff --git 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 (
       <Box
diff --git a/ui/pages/onboarding-flow/welcome/metamask-wordmark-animation.tsx b/ui/pages/onboarding-flow/welcome/metamask-wordmark-animation.tsx
@@ -29,7 +29,6 @@ export default function MetamaskWordMarkAnimation({
 }: MetamaskWordMarkAnimationProps) {
   const animationTimeoutRef = useRef<NodeJS.Timeout | null>(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
@@ -83,17 +83,15 @@ 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(
     animationCompleted?.MetamaskWordMarkAnimation,
   );
 
   // In test environments or when returning from another page, skip animations
-  const [isAnimationComplete, setIsAnimationComplete] = useState(
-    isTestEnvironment || shouldSkipAnimation,
-  );
+  const [isAnimationComplete, setIsAnimationComplete] =
+    useState(shouldSkipAnimation);
 
   const isFireFox = getBrowserName() === PLATFORM_FIREFOX;
   // Don't allow users to come back to this screen after they
@@ -424,7 +422,7 @@ export default function OnboardingWelcome() {
       width={BlockSize.Full}
       className="welcome-container"
     >
-      {!isLoggingIn && !isTestEnvironment && (
+      {!isLoggingIn && (
         <Suspense fallback={<Box />}>
           <MetaMaskWordMarkAnimation
             setIsAnimationComplete={setIsAnimationComplete}
@@ -442,7 +440,7 @@ export default function OnboardingWelcome() {
             skipTransition={shouldSkipAnimation}
           />
 
-          {!isTestEnvironment && isAnimationComplete && (
+          {isAnimationComplete && (
             <Suspense fallback={<Box />}>
               <FoxAppearAnimation skipTransition={shouldSkipAnimation} />
             </Suspense>
@@ -457,7 +455,7 @@ export default function OnboardingWelcome() {
         </>
       )}
 
-      {!isTestEnvironment && isLoggingIn && (
+      {isLoggingIn && (
         <Suspense fallback={<Box />}>
           <FoxAppearAnimation isLoader />
         </Suspense>
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
@@ -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 <Box className={containerClassName}></Box>;
diff --git a/ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap b/ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap
@@ -85,6 +85,9 @@ exports[`Unlock Page should match snapshot 1`] = `
         </p>
       </div>
     </form>
+    <div
+      class="mm-box"
+    />
   </div>
 </div>
 `;
diff --git 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 (
       <Box
@@ -675,7 +674,7 @@ class UnlockPage extends Component {
             </Text>
           </Box>
         </Box>
-        {!isTestEnvironment && !isRehydrationFlow && (
+        {!isRehydrationFlow && (
           <Suspense fallback={<Box />}>
             <FoxAppearAnimation />
           </Suspense>
diff --git 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: () => <div data-testid="fox-appear-animation" />,
+}));
+
 const mockTryUnlockMetamask = jest.fn(() => {
   return async () => {
     return Promise.resolve();
