chore(runway): cherry-pick fix: cp-12.13.0 replace 3D flask mascot with 2D version (#30597)

- fix: cp-12.13.0 replace 3D flask mascot with 2D version (#30592)

## **Description**

Issue: The new Flask 3D asset isn't fully supported

Solution: Replace all instances of the 3D asset for Flask with the 2D
counterpart temporarily until we fix the issue

[![Open in GitHub

Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30592?quickstart=1)

## **Related issues**

Fixes:
[#30338](#30338)

## **Manual testing steps**

1. Run `yarn start:flask`
2. Confirm that the 2D flask logo is visible in the following flows
3. Swap Quote flow 
4. Create Wallet flow
5. Login

## **Screenshots/Recordings**

`ui/pages/onboarding-flow/welcome/welcome.js`
| Before  | After  |
|:---:|:---:|


|![before_welcome](https://github.com/user-attachments/assets/5acd7341-ac4f-4c3f-9279-01f31b8a1e51)|![after_welcome](https://github.com/user-attachments/assets/4891ba78-23d2-4e7f-98f3-610131fd8134)|

`ui/pages/swaps/awaiting-swap/awaiting-swap.js`
| Before  | After  |
|:---:|:---:|


|![before_await_swap](https://github.com/user-attachments/assets/81dec14b-9f93-431e-8e2e-8baa546513ab)|![after_await_swap](https://github.com/user-attachments/assets/a096033c-357f-47de-b74b-123824d80a52)|

`ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js`
| Before  | After  |
|:---:|:---:|


|![before_loading_swap_quote](https://github.com/user-attachments/assets/2fca315b-8ff4-4f7a-904f-13fcb630f0b1)|![after_loading_swap_quote](https://github.com/user-attachments/assets/cca208b1-f45d-4583-a35b-7d9a851624a0)|



`ui/pages/swaps/mascot-background-animation/mascot-background-animation.js`
| Before  | After  |
|:---:|:---:|


|![before_background_animation](https://github.com/user-attachments/assets/d9869718-04ab-41c1-8371-4aca613c4a79)|![after_background_animation](https://github.com/user-attachments/assets/f50c948c-c3e4-45a3-999c-152ab0f7b7df)|

`ui/pages/unlock-page/unlock-page.component.js`
| Before  | After  |
|:---:|:---:|


|![before](https://github.com/user-attachments/assets/4267afb5-2d28-4cd9-8f34-6027bf9308ed)|![after](https://github.com/user-attachments/assets/32f8eec7-e5ba-4c97-afe8-207f100b1828)|

### **Before**

NA

### **After**

NA

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding

Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling

guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x ] I confirm that this PR addresses all acceptance criteria
described in the ticket it closes and includes the necessary testing
evidence such as recordings and or screenshots.
[c186fb0](c186fb0)

Co-authored-by: Vince Howard <[email protected]>

Author: runway-github[bot]

ui/pages/onboarding-flow/welcome/welcome.js

@@ -115,6 +115,17 @@ export default function OnboardingWelcome() {
     ///: END:ONLY_INCLUDE_IF
   };
 
+  const renderMascot = () => {
+    if (process.env.METAMASK_BUILD_TYPE === 'flask') {
+      return (
+        <img src="./images/logo/metamask-fox.svg" width="240" height="240" />
+      );
+    }
+    return (
+      <Mascot animationEventEmitter={eventEmitter} width="250" height="300" />
+    );
+  };
+
   return (
     <div className="onboarding-welcome" data-testid="onboarding-welcome">
       {
@@ -132,13 +143,7 @@ export default function OnboardingWelcome() {
             <Text textAlign={TextAlign.Center} marginLeft={6} marginRight={6}>
               {t('welcomeToMetaMaskIntro')}
             </Text>
-            <div className="onboarding-welcome__mascot">
-              <Mascot
-                animationEventEmitter={eventEmitter}
-                width="250"
-                height="300"
-              />
-            </div>
+            <div className="onboarding-welcome__mascot">{renderMascot()}</div>
           </div>
           <div>
             <Text

ui/pages/swaps/awaiting-swap/awaiting-swap.js

@@ -272,16 +272,27 @@ export default function AwaitingSwap({
     }
   }, [dispatch, errorKey]);
 
+  const renderMascot = () => {
+    if (process.env.METAMASK_BUILD_TYPE === 'flask') {
+      return (
+        <div className="awaiting-swap__mascot">
+          <img src="./images/logo/metamask-fox.svg" width="90" height="90" />
+        </div>
+      );
+    }
+    return (
+      <Mascot
+        animationEventEmitter={animationEventEmitter.current}
+        width="90"
+        height="90"
+      />
+    );
+  };
+
   return (
     <div className="awaiting-swap">
       <div className="awaiting-swap__content">
-        {!(swapComplete || errorKey) && (
-          <Mascot
-            animationEventEmitter={animationEventEmitter.current}
-            width="90"
-            height="90"
-          />
-        )}
+        {!(swapComplete || errorKey) && renderMascot()}
         <div className="awaiting-swap__status-image">{statusImage}</div>
         <div
           className="awaiting-swap__header"

ui/pages/swaps/awaiting-swap/index.scss

@@ -16,6 +16,13 @@
     padding-right: 32px;
   }
 
+  &__mascot {
+    margin-bottom: 16px;
+    display: flex;
+    align-self: center;
+    justify-content: center;
+  }
+
   div {
     text-align: center;
     display: flex;

ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js

@@ -86,6 +86,22 @@ export default function LoadingSwapsQuotes({
   const [quoteCount, updateQuoteCount] = useState(0);
   const [midPointTarget, setMidpointTarget] = useState(null);
 
+  const renderMascot = () => {
+    if (process.env.METAMASK_BUILD_TYPE === 'flask') {
+      return (
+        <img src="./images/logo/metamask-fox.svg" width="90" height="90" />
+      );
+    }
+    return (
+      <Mascot
+        animationEventEmitter={animationEventEmitter.current}
+        width="90"
+        height="90"
+        lookAtTarget={midPointTarget}
+      />
+    );
+  };
+
   useEffect(() => {
     let timeoutLength;
 
@@ -170,12 +186,7 @@ export default function LoadingSwapsQuotes({
             className="loading-swaps-quotes__mascot-container"
             ref={mascotContainer}
           >
-            <Mascot
-              animationEventEmitter={animationEventEmitter.current}
-              width="90"
-              height="90"
-              lookAtTarget={midPointTarget}
-            />
+            {renderMascot()}
           </div>
         </div>
       </div>

ui/pages/swaps/mascot-background-animation/mascot-background-animation.js

@@ -8,6 +8,26 @@ import Mascot from '../../../components/ui/mascot';
 export default function MascotBackgroundAnimation({ height, width }) {
   const animationEventEmitter = useRef(new EventEmitter());
 
+  const renderMascot = () => {
+    if (process.env.METAMASK_BUILD_TYPE === 'flask') {
+      return (
+        <img
+          src="./images/logo/metamask-fox.svg"
+          width={width ?? '42'}
+          height={height ?? '42'}
+        />
+      );
+    }
+    return (
+      <Mascot
+        animationEventEmitter={animationEventEmitter.current}
+        width={width ?? '42'}
+        height={height ?? '42'}
+        followMouse={false}
+      />
+    );
+  };
+
   return (
     <div className="mascot-background-animation__animation">
       <div
@@ -219,12 +239,7 @@ export default function MascotBackgroundAnimation({ height, width }) {
         className="mascot-background-animation__mascot-container"
         data-testid="mascot-background-animation-mascot-container"
       >
-        <Mascot
-          animationEventEmitter={animationEventEmitter.current}
-          width={width ?? '42'}
-          height={height ?? '42'}
-          followMouse={false}
-        />
+        {renderMascot()}
       </div>
     </div>
   );

ui/pages/unlock-page/unlock-page.component.js

@@ -152,6 +152,21 @@ export default class UnlockPage extends Component {
     );
   }
 
+  renderMascot = () => {
+    if (process.env.METAMASK_BUILD_TYPE === 'flask') {
+      return (
+        <img src="./images/logo/metamask-fox.svg" width="120" height="120" />
+      );
+    }
+    return (
+      <Mascot
+        animationEventEmitter={this.animationEventEmitter}
+        width="120"
+        height="120"
+      />
+    );
+  };
+
   render() {
     const { password, error } = this.state;
     const { t } = this.context;
@@ -163,11 +178,7 @@ export default class UnlockPage extends Component {
       <div className="unlock-page__container">
         <div className="unlock-page" data-testid="unlock-page">
           <div className="unlock-page__mascot-container">
-            <Mascot
-              animationEventEmitter={this.animationEventEmitter}
-              width="120"
-              height="120"
-            />
+            {this.renderMascot()}
             {isBeta() ? (
               <div className="unlock-page__mascot-container__beta">
                 {t('beta')}