From 81c5b772246bfcbf095474553c2e6d30d382d301 Mon Sep 17 00:00:00 2001
From: Andre Pimenta <andrepimenta7@gmail.com>
Date: Fri, 1 Aug 2025 14:31:51 +0100
Subject: [PATCH 1/5] feat: Implement RN Worklets/Background Threads (#17674)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR implements
[Worklets](https://github.com/margelo/react-native-worklets-core).
Worklets are small JavaScript functions that can be executed on a
separate JavaScript Thread so they don't clog the main JS Thread.
Perfect for heavy computations and processing.



## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/ba3be2b7-71b8-4840-8a22-5407fa54a088

### **After**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/500036ce-252d-48d9-8148-4672618567bf

## **How to use RN Worklets (Threads)**
# runAsync

Purpose: runAsync is used to execute code on a different thread without
blocking the main JS thread.

When to use: Use it to offload functions to a background thread.

Example:

```
import { Worklets } from 'react-native-worklets-core';
...
const fibonacci = (num: number): number => {
  'worklet'
  if (num <= 1) return num;
  let prev = 0, curr = 1;
  for (let i = 2; i <= num; i++) {
    let next = prev + curr;
    prev = curr;
    curr = next;
  }
  return curr;
}

const context = Worklets.defaultContext
const result = await context.runAsync(() => {
  'worklet'
  return fibonacci(50)
})
console.log(`Fibonacci of 50 is ${result}`)
```

# runOnJS
Purpose: runOnJS is used to call a JavaScript function from within a
worklet. Since worklets run on a separate thread, they cannot directly
call JavaScript functions. runOnJS bridges this gap by allowing you to
invoke JavaScript functions on the JavaScript thread.

When to use: Use it when you need to communicate from the worklet thread
back to the JavaScript thread.

Example:
```
import { runOnJS } from 'react-native-worklets-core';
...
const [age, setAge] = useState(30)

function something() {
  'worklet'
  Worklets.runOnJS(() => setAge(50))
}
```

# useWorklet

Purpose: useWorklet is a hook that allows you to define a worklet
function directly within your React component. It ensures that the
function is properly marked as a worklet and can run on the worklet
thread.

When to use: Use this hook when you need to define a function that will
execute on the worklet thread.

Example:
```
import { useWorklet } from 'react-native-worklets-core';

function MyComponent() {
  const myWorklet = useWorklet(() => {
    'worklet';
    console.log('This is running on the worklet thread');
  }, []);

  return (
    <Button title="Run Worklet" onPress={() => myWorklet()} />
  );
}
```

# useRunOnJS
Purpose: useRunOnJS is a hook that allows you to define a JavaScript
function that can be safely called from a worklet. It ensures that the
function is properly wrapped to run on the JavaScript thread when
invoked from the worklet thread.

When to use: Use this hook when you need to call a JavaScript function
from a worklet.

```
import { useRunOnJS } from 'react-native-worklets-core';

function App() {
  const sayHello = useRunOnJS(() => {
    console.log("hello from JS!")
  }, [])

  const worklet = useWorklet('default', () => {
    'worklet'
    console.log("hello from worklet!")
    sayHello()
  }, [sayHello])

  return (
    <Button title="Run Worklet" onPress={() => worklet()} />
  );
}

```

# useSharedValue
Purpose:
useSharedValue is a hook that creates a SharedValue instance, which can
be read from and written to by both the JavaScript thread and the
worklet thread simultaneously.

For arrays and objects, useSharedValue creates a C++-based proxy
implementation, ensuring that all read and write operations on these
data structures are thread-safe.

When to use:
Use useSharedValue when you need to share state between the JavaScript
thread and the worklet thread.

Example:
```
function App() {
  const something = useSharedValue(5)
  const worklet = useWorklet('default', () => {
    'worklet'
    something.value = Math.random()
  }, [something])
}
```

# Separate Threads/Contexts (Worklets.createContext)
Purpose:
Worklets.createContext is a method that allows you to create a separate
thread (context) for running worklets.

Each thread created with createContext operates in isolation, ensuring
that tasks in one thread do not interfere with tasks in another.

When to use:
Use Worklets.createContext when you need to offload heavy computations
or background tasks to multiple separate threads.

```
const context1 = Worklets.createContext('my-new-thread-1')
const context2 = Worklets.createContext('my-new-thread-2')
context1.runAsync(() => {
  'worklet'
  console.log("Hello from context #1!")
  context2.runAsync(() => {
    'worklet'
    console.log("Hello from context #2!")
  })
})
```


# Worklet Examples

WorkletExampleComponent.tsx
```
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useRunOnJS, useSharedValue, useWorklet } from 'react-native-worklets-core';

const WorkletExampleComponent = () => {

    const sharedValue = useSharedValue(0);

    const [result, setResult] = useState(0);

    const setResultFromWorklet = useRunOnJS(() => {
        console.log("Calling main JS from worklet!")
        setResult(sharedValue.value)
    }, [])

    const heavyComputationWorklet = useWorklet('default', () => {
        'worklet'
        console.log("Calling worklet!")
        let result = 0;
        for (let i = 0; i < 10000000; i++) {
            result += Math.random();
        }
        sharedValue.value += result;
        setResultFromWorklet()
    }, [sharedValue, setResultFromWorklet])

    const mainJSFunction = () => {
        console.log("hello from main JS function!", sharedValue.value)
        heavyComputationWorklet()
    }

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Worklet Hooks Example</Text>

            <View style={styles.infoBox}>

                <TouchableOpacity style={styles.tertiaryButton} onPress={mainJSFunction}>
                    <Text style={styles.buttonText}>Heavy Computation</Text>
                </TouchableOpacity>
            </View>

            <View style={styles.infoBox}>
                <Text style={styles.messageText}>Result: {result}</Text>
            </View>

            <View style={styles.descriptionBox}>
                <Text style={styles.descriptionText}>
                    This component demonstrates:
                    {'\n'}• useSharedValue: Shared counter between threads
                    {'\n'}• useWorklet: Functions running on worklet thread
                    {'\n'}• useRunOnJS: Safe JS calls from worklets
                </Text>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        padding: 16,
        backgroundColor: '#fff',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        textAlign: 'center',
        marginBottom: 16,
    },
    infoBox: {
        marginBottom: 24,
        padding: 16,
        backgroundColor: '#f5f5f5',
        borderRadius: 8,
    },
    counterText: {
        fontSize: 16,
        fontWeight: '600',
        marginBottom: 8,
    },
    messageText: {
        fontSize: 14,
        color: '#666',
    },
    buttonContainer: {
        gap: 12,
    },
    primaryButton: {
        backgroundColor: '#007AFF',
        padding: 16,
        borderRadius: 8,
        alignItems: 'center',
    },
    secondaryButton: {
        backgroundColor: '#34C759',
        padding: 16,
        borderRadius: 8,
        alignItems: 'center',
    },
    tertiaryButton: {
        backgroundColor: '#FF9500',
        padding: 16,
        borderRadius: 8,
        alignItems: 'center',
    },
    buttonText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: '600',
    },
    descriptionBox: {
        padding: 16,
        backgroundColor: '#f0f0f0',
        borderRadius: 8,
    },
    descriptionText: {
        fontSize: 12,
        color: '#666',
        lineHeight: 18,
    },
});

export default WorkletExampleComponent;
```

WorkletExampleFunctions.ts
```
import { Worklets } from 'react-native-worklets-core';

// Example 1: Heavy computation using runAsync
const fibonacci = (num: number): number => {
  'worklet';
  if (num <= 1) return num;
  let prev = 0, curr = 1;
  for (let i = 2; i <= num; i++) {
    let next = prev + curr;
    prev = curr;
    curr = next;
  }
  return curr;
};

export const calculateFibonacci = async (num: number): Promise<number> => {
  const context = Worklets.defaultContext;
  const result = await context.runAsync(() => {
    'worklet';
    return fibonacci(num);
  });
  return result;
};

// Example 2: Array processing on worklet thread
export const processLargeArray = async (data: number[]): Promise<number[]> => {
  const context = Worklets.defaultContext;

  return await context.runAsync(() => {
    'worklet';
    // Heavy array processing that would block the UI thread
    return data
      .map(x => x * 2)
      .filter(x => x > 10)
      .map(x => Math.sqrt(x))
      .sort((a, b) => b - a);
  });
};

// Example 3: Using separate contexts for parallel processing
export const parallelProcessing = async (
  data1: number[],
  data2: number[]
): Promise<{result1: number, result2: number}> => {
  const context1 = Worklets.createContext('worker-1');
  const context2 = Worklets.createContext('worker-2');

  // Process both arrays in parallel on different threads
  const [result1, result2] = await Promise.all([
    context1.runAsync(() => {
      'worklet';
      console.log('Processing on worker-1');
      return data1.reduce((sum, val) => sum + Math.pow(val, 2), 0);
    }),
    context2.runAsync(() => {
      'worklet';
      console.log('Processing on worker-2');
      return data2.reduce((sum, val) => sum + Math.pow(val, 3), 0);
    })
  ]);

  return { result1, result2 };
};
```

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/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-mobile/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.

---------

Co-authored-by: Cal Leung <cal.leung@consensys.net>
---
 babel.config.js            |   1 +
 docs/readme/performance.md | 343 +++++++++++++++++++++++++++++++++++++
 ios/Podfile.lock           |  33 +++-
 package.json               |   1 +
 yarn.lock                  |  12 ++
 5 files changed, 389 insertions(+), 1 deletion(-)

diff --git a/babel.config.js b/babel.config.js
index 7c6d70335d9..ff37d2bcfab 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -24,6 +24,7 @@ module.exports = {
     ],
     'transform-inline-environment-variables',
     'react-native-reanimated/plugin',
+    'react-native-worklets-core/plugin',
   ],
   overrides: [
     {
diff --git a/docs/readme/performance.md b/docs/readme/performance.md
index ff965e91a7c..7fc28e1951d 100644
--- a/docs/readme/performance.md
+++ b/docs/readme/performance.md
@@ -7,6 +7,7 @@ This guide aims to help you navigate this complex landscape by providing best pr
 - [Re-renders and component optimization](#re-renders-and-component-optimization)
 - [Tool(s) for identifying re-renders](#tools-for-identifying-re-renders)
 - [Automatically optimizing React](#automatically-optimizing-react)
+- [Worklets (Background JS Threads)](#worklets-background-js-threads)
 
 By understanding these areas and applying the recommended practices, you can create a more efficient and responsive application that provides a better user experience.
 
@@ -201,3 +202,345 @@ module.exports = {
 ### Troubleshooting React Compiler
 
 By default, Metro may cache parts of the compiled code especially when using the `yarn watch` command. To perform a clean build, run `yarn watch:clean` instead. You can also verify that the file is picked up by React Compiler by adding a log in the `sources` function to confirm the match.
+
+## Worklets (background JS threads)
+
+[Worklets](https://github.com/margelo/react-native-worklets-core) are small JavaScript functions that can be executed on a separate JavaScript Thread so that they don't clog the main JS Thread. Perfect for heavy computations and processing. Find out how to use them below.
+
+> **Note on Usage**: Worklets are meant to unclog the main JS thread, not to speed up the computational process itself. By unlcoging the main JS thread, the intent is to improve responsiveness (reduce FPS drops).
+
+## runAsync
+
+Purpose: `runAsync` is used to execute code on a different thread without blocking the main JS thread.
+
+When to use: Use it to offload functions to a background thread.
+
+Example:
+
+```
+import { Worklets } from 'react-native-worklets-core';
+...
+const fibonacci = (num: number): number => {
+  'worklet'
+  if (num <= 1) return num;
+  let prev = 0, curr = 1;
+  for (let i = 2; i <= num; i++) {
+    let next = prev + curr;
+    prev = curr;
+    curr = next;
+  }
+  return curr;
+}
+
+const context = Worklets.defaultContext
+const result = await context.runAsync(() => {
+  'worklet'
+  return fibonacci(50)
+})
+console.log(`Fibonacci of 50 is ${result}`)
+```
+
+## runOnJS
+Purpose: `runOnJS` is used to call a JavaScript function from within a worklet. Since worklets run on a separate thread, they cannot directly call JavaScript functions. `runOnJS` bridges this gap by allowing you to invoke JavaScript functions on the JavaScript thread.
+
+When to use: Use it when you need to communicate from the worklet thread back to the JavaScript thread.
+
+Example:
+```
+import { runOnJS } from 'react-native-worklets-core';
+...
+const [age, setAge] = useState(30)
+
+function something() {
+  'worklet'
+  runOnJS(() => setAge(50))
+}
+```
+
+## useWorklet
+
+Purpose: `useWorklet` is a hook that allows you to define a worklet function directly within your React component. It ensures that the function is properly marked as a worklet and can run on the worklet thread.
+
+When to use: Use this hook on a component when you need to define a function that will execute on the worklet thread.
+
+Example:
+```
+import { useWorklet } from 'react-native-worklets-core';
+
+function MyComponent() {
+  const myWorklet = useWorklet(() => {
+    'worklet';
+    console.log('This is running on the worklet thread');
+  }, []);
+
+  return (
+    <Button title="Run Worklet" onPress={() => myWorklet()} />
+  );
+}
+```
+
+## useRunOnJS
+Purpose: `useRunOnJS` is a hook that allows you to define a JavaScript function that can be safely called from a worklet. It ensures that the function is properly wrapped to run on the JavaScript thread when invoked from the worklet thread.
+
+When to use: Use this hook when you need to call a JavaScript function from a worklet.
+
+```
+import { useRunOnJS } from 'react-native-worklets-core';
+
+function App() {
+  const sayHello = useRunOnJS(() => {
+    console.log("hello from JS!")
+  }, [])
+
+  const worklet = useWorklet('default', () => {
+    'worklet'
+    console.log("hello from worklet!")
+    sayHello()
+  }, [sayHello])
+
+  return (
+    <Button title="Run Worklet" onPress={() => worklet()} />
+  );
+}
+
+```
+
+## useSharedValue
+Purpose:
+`useSharedValue` is a hook that creates a SharedValue instance, which can be read from and written to by both the JavaScript thread and the worklet thread simultaneously.
+
+For arrays and objects, useSharedValue creates a C++-based proxy implementation, ensuring that all read and write operations on these data structures are thread-safe.
+
+When to use:
+Use `useSharedValue` when you need to share state between the JavaScript thread and the worklet thread.
+
+Example:
+```
+function App() {
+  const something = useSharedValue(5)
+  const worklet = useWorklet('default', () => {
+    'worklet'
+    something.value = Math.random()
+  }, [something])
+}
+```
+
+## Separate Threads/Contexts (Worklets.createContext)
+
+Purpose:
+Worklets.createContext is a method that allows you to create a separate thread (context) for running worklets. 
+
+Each thread created with createContext operates in isolation, ensuring that tasks in one thread do not interfere with tasks in another.
+
+When to use:
+Use Worklets.createContext when you need to offload heavy computations or background tasks to multiple separate threads.
+
+```
+const context1 = Worklets.createContext('my-new-thread-1')
+const context2 = Worklets.createContext('my-new-thread-2')
+context1.runAsync(() => {
+  'worklet'
+  console.log("Hello from context #1!")
+  context2.runAsync(() => {
+    'worklet'
+    console.log("Hello from context #2!")
+  })
+})
+```
+
+
+## Worklet Examples
+
+WorkletExampleComponent.tsx
+```
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useRunOnJS, useSharedValue, useWorklet } from 'react-native-worklets-core';
+
+const WorkletExampleComponent = () => {
+
+    const sharedValue = useSharedValue(0);
+
+    const [result, setResult] = useState(0);
+
+    const setResultFromWorklet = useRunOnJS(() => {
+        console.log("Calling main JS from worklet!")
+        setResult(sharedValue.value)
+    }, [])
+
+    const heavyComputationWorklet = useWorklet('default', () => {
+        'worklet'
+        console.log("Calling worklet!")
+        let result = 0;
+        for (let i = 0; i < 10000000; i++) {
+            result += Math.random();
+        }
+        sharedValue.value += result;
+        setResultFromWorklet()
+    }, [sharedValue, setResultFromWorklet])
+
+    const mainJSFunction = () => {
+        console.log("hello from main JS function!", sharedValue.value)
+        heavyComputationWorklet()
+    }
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>Worklet Hooks Example</Text>
+
+            <View style={styles.infoBox}>
+
+                <TouchableOpacity style={styles.tertiaryButton} onPress={mainJSFunction}>
+                    <Text style={styles.buttonText}>Heavy Computation</Text>
+                </TouchableOpacity>
+            </View>
+
+            <View style={styles.infoBox}>
+                <Text style={styles.messageText}>Result: {result}</Text>
+            </View>
+
+            <View style={styles.descriptionBox}>
+                <Text style={styles.descriptionText}>
+                    This component demonstrates:
+                    {'\n'}• useSharedValue: Shared counter between threads
+                    {'\n'}• useWorklet: Functions running on worklet thread
+                    {'\n'}• useRunOnJS: Safe JS calls from worklets
+                </Text>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 16,
+        backgroundColor: '#fff',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        marginBottom: 16,
+    },
+    infoBox: {
+        marginBottom: 24,
+        padding: 16,
+        backgroundColor: '#f5f5f5',
+        borderRadius: 8,
+    },
+    counterText: {
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 8,
+    },
+    messageText: {
+        fontSize: 14,
+        color: '#666',
+    },
+    buttonContainer: {
+        gap: 12,
+    },
+    primaryButton: {
+        backgroundColor: '#007AFF',
+        padding: 16,
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+    secondaryButton: {
+        backgroundColor: '#34C759',
+        padding: 16,
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+    tertiaryButton: {
+        backgroundColor: '#FF9500',
+        padding: 16,
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+    buttonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    descriptionBox: {
+        padding: 16,
+        backgroundColor: '#f0f0f0',
+        borderRadius: 8,
+    },
+    descriptionText: {
+        fontSize: 12,
+        color: '#666',
+        lineHeight: 18,
+    },
+});
+
+export default WorkletExampleComponent;
+```
+
+WorkletExampleFunctions.ts
+```
+import { Worklets } from 'react-native-worklets-core';
+
+// Example 1: Heavy computation using runAsync
+const fibonacci = (num: number): number => {
+  'worklet';
+  if (num <= 1) return num;
+  let prev = 0, curr = 1;
+  for (let i = 2; i <= num; i++) {
+    let next = prev + curr;
+    prev = curr;
+    curr = next;
+  }
+  return curr;
+};
+
+export const calculateFibonacci = async (num: number): Promise<number> => {
+  const context = Worklets.defaultContext;
+  const result = await context.runAsync(() => {
+    'worklet';
+    return fibonacci(num);
+  });
+  return result;
+};
+
+// Example 2: Array processing on worklet thread
+export const processLargeArray = async (data: number[]): Promise<number[]> => {
+  const context = Worklets.defaultContext;
+  
+  return await context.runAsync(() => {
+    'worklet';
+    // Heavy array processing that would block the UI thread
+    return data
+      .map(x => x * 2)
+      .filter(x => x > 10)
+      .map(x => Math.sqrt(x))
+      .sort((a, b) => b - a);
+  });
+};
+
+// Example 3: Using separate contexts for parallel processing
+export const parallelProcessing = async (
+  data1: number[],
+  data2: number[]
+): Promise<{result1: number, result2: number}> => {
+  const context1 = Worklets.createContext('worker-1');
+  const context2 = Worklets.createContext('worker-2');
+  
+  // Process both arrays in parallel on different threads
+  const [result1, result2] = await Promise.all([
+    context1.runAsync(() => {
+      'worklet';
+      console.log('Processing on worker-1');
+      return data1.reduce((sum, val) => sum + Math.pow(val, 2), 0);
+    }),
+    context2.runAsync(() => {
+      'worklet';
+      console.log('Processing on worker-2');
+      return data2.reduce((sum, val) => sum + Math.pow(val, 3), 0);
+    })
+  ]);
+  
+  return { result1, result2 };
+}; 
+```
\ No newline at end of file
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index a074f059a65..51ef00a7e4e 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -2049,6 +2049,27 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-worklets-core (1.6.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.10.14.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - React-nativeconfig (0.76.9)
   - React-NativeModulesApple (0.76.9):
     - glog
@@ -2767,10 +2788,16 @@ PODS:
     - React
   - VisionCamera (4.6.4):
     - VisionCamera/Core (= 4.6.4)
+    - VisionCamera/FrameProcessors (= 4.6.4)
     - VisionCamera/React (= 4.6.4)
   - VisionCamera/Core (4.6.4)
+  - VisionCamera/FrameProcessors (4.6.4):
+    - React
+    - React-callinvoker
+    - react-native-worklets-core
   - VisionCamera/React (4.6.4):
     - React-Core
+    - VisionCamera/FrameProcessors
   - Yoga (0.0.0)
 
 DEPENDENCIES:
@@ -2866,6 +2893,7 @@ DEPENDENCIES:
   - react-native-video (from `../node_modules/react-native-video`)
   - react-native-view-shot (from `../node_modules/react-native-view-shot`)
   - "react-native-webview-mm (from `../node_modules/@metamask/react-native-webview`)"
+  - react-native-worklets-core (from `../node_modules/react-native-worklets-core`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -3124,6 +3152,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-view-shot"
   react-native-webview-mm:
     :path: "../node_modules/@metamask/react-native-webview"
+  react-native-worklets-core:
+    :path: "../node_modules/react-native-worklets-core"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -3348,6 +3378,7 @@ SPEC CHECKSUMS:
   react-native-video: 3bb92b90b2774144fac7d43d52d11b936e8a14ec
   react-native-view-shot: d1a701eb0719c6dccbd20b4bb43b1069f304cb70
   react-native-webview-mm: 0fbb0f4722fb1937065e9e1a84282584e632c8f6
+  react-native-worklets-core: 9a811a85223be3b41f44a80886f204a8130a332b
   React-nativeconfig: 8efdb1ef1e9158c77098a93085438f7e7b463678
   React-NativeModulesApple: cebca2e5320a3d66e123cade23bd90a167ffce5e
   React-perflogger: 72e653eb3aba9122f9e57cf012d22d2486f33358
@@ -3406,7 +3437,7 @@ SPEC CHECKSUMS:
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   sovran-react-native: e4721a564ee6ef5b5a0d901bc677018cf371ea01
   TcpSockets: 48866ffcb39d7114741919d21069fc90189e474a
-  VisionCamera: f56eaedde0d3fa095143b78374d29e89e71735f9
+  VisionCamera: 52b101a7fa0a70ff455163c5a121d8dfe9871ab7
   Yoga: feb4910aba9742cfedc059e2b2902e22ffe9954a
 
 PODFILE CHECKSUM: aba718cdf38f663bc54e8d01365528918eea2b5a
diff --git a/package.json b/package.json
index faa104999e9..e400893a51f 100644
--- a/package.json
+++ b/package.json
@@ -443,6 +443,7 @@
     "react-native-vision-camera": "^4.6.4",
     "react-native-wagmi-charts": "^2.7.1",
     "react-native-webview-invoke": "^0.6.2",
+    "react-native-worklets-core": "^1.6.0",
     "react-redux": "^8.1.3",
     "readable-stream": "2.3.7",
     "redux": "^4.2.1",
diff --git a/yarn.lock b/yarn.lock
index 3277b039c11..5b7b6f3b716 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -27956,6 +27956,13 @@ react-native-webview-invoke@^0.6.2:
   resolved "https://registry.yarnpkg.com/react-native-webview-invoke/-/react-native-webview-invoke-0.6.2.tgz#75cc27ef98ea1cbc9386269347d3aafe90d33aa3"
   integrity sha512-PCzP7Zl3XwHU10JYS8nR0gwuR8XiOO0MhC8y9ZuPPI+HeISn95GvNYhOXxeLgfbdbUcpNWh1HqxPDySlfCIqxg==
 
+react-native-worklets-core@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/react-native-worklets-core/-/react-native-worklets-core-1.6.0.tgz#52b2eb840668e6989495fe1be2e899e0e070321d"
+  integrity sha512-IRu8UUROsRklFdeqmZdWxeCq+EYYSCV8zj4S9mdPwm1K72OehptoYbZCU3+2NjINF4I8Q+Z+z5TwaJQpKQBYmg==
+  dependencies:
+    string-hash-64 "^1.0.3"
+
 react-native@0.76.9:
   version "0.76.9"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.76.9.tgz#68cdfbe75a5c02417ac0eefbb28894a1adc330a2"
@@ -29848,6 +29855,11 @@ string-argv@0.3.1, string-argv@^0.3.1:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
   integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
 
+string-hash-64@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string-hash-64/-/string-hash-64-1.0.3.tgz#0deb56df58678640db5c479ccbbb597aaa0de322"
+  integrity sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==
+
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"

From 1d0be92a9a44545091903361e86fc535802c16c8 Mon Sep 17 00:00:00 2001
From: tommasini <46944231+tommasini@users.noreply.github.com>
Date: Fri, 1 Aug 2025 14:32:37 +0100
Subject: [PATCH 2/5] chore: remove unnecessary permissions from update latest
 build version yml (#17784)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
* git force with lease instead of git force
* remove unnecessary permissions
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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.
---
 .../workflows/update-latest-build-version.yml | 62 +++++++++----------
 1 file changed, 28 insertions(+), 34 deletions(-)

diff --git a/.github/workflows/update-latest-build-version.yml b/.github/workflows/update-latest-build-version.yml
index 4d43acd8881..ffcf5ebc7a4 100644
--- a/.github/workflows/update-latest-build-version.yml
+++ b/.github/workflows/update-latest-build-version.yml
@@ -7,7 +7,6 @@
 ##############################################################################################
 name: Update Latest Build Version
 
-
 on:
   workflow_dispatch:
     inputs:
@@ -15,37 +14,32 @@ on:
         description: 'The base branch, tag, or SHA for git operations and the pull request.'
         required: true
 jobs:
-    generate-build-version:
-      uses: MetaMask/metamask-mobile-build-version/.github/workflows/metamask-mobile-build-version.yml@v0.2.0
-      permissions:
-        id-token: write
+  generate-build-version:
+    uses: MetaMask/metamask-mobile-build-version/.github/workflows/metamask-mobile-build-version.yml@v0.2.0
+    permissions:
+      id-token: write
+
+  bump-version:
+    runs-on: ubuntu-latest
+    needs: generate-build-version
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ inputs.base-branch }}
+          token: ${{ secrets.PR_TOKEN }}
 
-    bump-version:
-        runs-on: ubuntu-latest
-        needs: generate-build-version
-        permissions:
-          contents: write
-          id-token: write
-        steps:
-        - uses: actions/checkout@v3
-          with:
-            fetch-depth: 0
-            ref: ${{ inputs.base-branch }}
-            token: ${{ secrets.PR_TOKEN }}
-            
-        - name: Bump script
-          env:
-            HEAD_REF: ${{ inputs.base-branch }}
-          run: |
-            ./scripts/set-build-version.sh ${{ needs.generate-build-version.outputs.build-version }}
-            git diff
-            git config user.name metamaskbot
-            git config user.email metamaskbot@users.noreply.github.com
-            git add bitrise.yml
-            git add package.json
-            git add ios/MetaMask.xcodeproj/project.pbxproj
-            git add android/app/build.gradle
-            git commit -m "Bump version number to ${{ needs.generate-build-version.outputs.build-version }}"
-            git push origin HEAD:"$HEAD_REF" --force
-            
-  
\ No newline at end of file
+      - name: Bump script
+        env:
+          HEAD_REF: ${{ inputs.base-branch }}
+        run: |
+          ./scripts/set-build-version.sh ${{ needs.generate-build-version.outputs.build-version }}
+          git diff
+          git config user.name metamaskbot
+          git config user.email metamaskbot@users.noreply.github.com
+          git add bitrise.yml
+          git add package.json
+          git add ios/MetaMask.xcodeproj/project.pbxproj
+          git add android/app/build.gradle
+          git commit -m "Bump version number to ${{ needs.generate-build-version.outputs.build-version }}"
+          git push origin HEAD:"$HEAD_REF" --force-with-lease

From 823d83678d1d3bd34ef01858cd5eca894e0e98d5 Mon Sep 17 00:00:00 2001
From: Frank von Hoven <141057783+frankvonhoven@users.noreply.github.com>
Date: Fri, 1 Aug 2025 09:09:33 -0500
Subject: [PATCH 3/5] fix: Update how utm params are parsed in deeplinks
 (#17235)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR updates parsing of the utm params to match the recommended way
listed in
[#2213](https://github.com/MetaMask/mobile-planning/issues/2213)

## **Related issues**

Fixes: [#2213](https://github.com/MetaMask/mobile-planning/issues/2213)

## **Manual testing steps**

- Use deeplink for testing -
https://link.metamask.io/home?utm_source=facebook&utm_medium=social&utm_campaign=summer_sale
- Install this branch on iOS simulator
- Create new wallet and unlock wallet
- Background wallet
- Open deeplink in simulator via `xcrun simctl openurl booted
https://link.metamask.io/home\?utm_source\=facebook\&utm_medium\=social\&utm_campaign\=summer_sale`
- Notice that deeplink interstitial shows
- Background and foreground app
- Notice that dev log shows `TRACK event saved {"event": "App Opened",
"properties": {"anonymous": false, "attributionId": "", "utm_campaign":
"summer_sale", "utm_content": "", "utm_medium": "social", "utm_source":
"facebook", "utm_term": ""}, "type": "track"}`, which includes parsed
utm params

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/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-mobile/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.

---------

Co-authored-by: Cal-L <cleun007@gmail.com>
---
 app/core/AppStateEventListener.test.ts        |   1 -
 app/core/AppStateEventListener.ts             |   6 +-
 .../ParseManager/extractURLParams.test.ts     | 126 +++++++++++-------
 .../ParseManager/extractURLParams.ts          |  26 ++--
 app/core/processAttribution.test.tsx          |  81 ++++++-----
 app/core/processAttribution.tsx               |  32 ++---
 6 files changed, 149 insertions(+), 123 deletions(-)

diff --git a/app/core/AppStateEventListener.test.ts b/app/core/AppStateEventListener.test.ts
index 9009366e5f5..ca88f23b7b5 100644
--- a/app/core/AppStateEventListener.test.ts
+++ b/app/core/AppStateEventListener.test.ts
@@ -76,7 +76,6 @@ describe('AppStateEventListener', () => {
       .mockReturnValue({} as unknown as ReduxStore);
     const mockAttribution = {
       attributionId: 'test123',
-      utm: 'test_utm',
       utm_source: 'source',
       utm_medium: 'medium',
       utm_campaign: 'campaign',
diff --git a/app/core/AppStateEventListener.ts b/app/core/AppStateEventListener.ts
index 565c82a5c37..12d10440d80 100644
--- a/app/core/AppStateEventListener.ts
+++ b/app/core/AppStateEventListener.ts
@@ -73,12 +73,12 @@ export class AppStateEventListener {
         MetaMetricsEvents.APP_OPENED,
       );
       if (attribution) {
-        const { attributionId, utm, ...utmParams } = attribution;
+        const { attributionId, ...utmParams } = attribution;
         DevLogger.log(
-          `AppStateManager:: processAppStateChange:: sending event 'APP_OPENED' attributionId=${attribution.attributionId} utm=${attribution.utm}`,
+          `AppStateManager:: processAppStateChange:: sending event 'APP_OPENED' attributionId=${attribution.attributionId}`,
           utmParams,
         );
-        appOpenedEventBuilder.addProperties({ attributionId, ...utmParams });
+        appOpenedEventBuilder.addProperties({ ...attribution });
       }
       metrics.trackEvent(appOpenedEventBuilder.build());
     } catch (error) {
diff --git a/app/core/DeeplinkManager/ParseManager/extractURLParams.test.ts b/app/core/DeeplinkManager/ParseManager/extractURLParams.test.ts
index 423f78628a4..b29bda54ae7 100644
--- a/app/core/DeeplinkManager/ParseManager/extractURLParams.test.ts
+++ b/app/core/DeeplinkManager/ParseManager/extractURLParams.test.ts
@@ -1,6 +1,5 @@
 import qs from 'qs';
 import { Alert } from 'react-native';
-import UrlParser from 'url-parse';
 import { strings } from '../../../../locales/i18n';
 import { PROTOCOLS } from '../../../constants/deeplinks';
 import extractURLParams from './extractURLParams';
@@ -9,15 +8,6 @@ jest.mock('qs', () => ({
   parse: jest.fn(),
 }));
 
-jest.mock('url-parse', () => {
-  const mockUrlParser = jest.fn();
-
-  return {
-    __esModule: true,
-    default: mockUrlParser,
-  };
-});
-
 jest.mock('react-native', () => ({
   Alert: {
     alert: jest.fn(),
@@ -25,13 +15,14 @@ jest.mock('react-native', () => ({
 }));
 
 describe('extractURLParams', () => {
-  const mockUrlParser = UrlParser as jest.MockedClass<typeof UrlParser>;
+  // const mockUrlParser = UrlParser as jest.MockedClass<typeof UrlParser>;
   const mockQs = qs as jest.Mocked<typeof qs>;
 
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  it('should correctly extract parameters from a valid URL with query parameters', () => {
+
+  it('extracts parameters from a valid URL with query parameters', () => {
     const url = `${PROTOCOLS.DAPP}/https://example.com?uri=test&redirect=true&channelId=123&comm=test&pubkey=abc&v=2`;
     const expectedParams = {
       uri: 'test',
@@ -41,18 +32,42 @@ describe('extractURLParams', () => {
       sdkVersion: '',
       channelId: '123',
       comm: 'test',
+      pubkey: 'abc',
       v: '2',
       attributionId: '',
-      utm: '',
+      utm_source: '',
+      utm_medium: '',
+      utm_campaign: '',
+      utm_term: '',
+      utm_content: '',
     };
 
-    mockUrlParser.mockImplementation(
-      () =>
-        ({
-          query:
-            '?uri=test&redirect=true&channelId=123&comm=test&pubkey=abc&v=2',
-        } as unknown as UrlParser<string>),
-    );
+    mockQs.parse.mockReturnValue(expectedParams);
+
+    const { params } = extractURLParams(url);
+
+    expect(params).toEqual(expectedParams);
+  });
+
+  it('extracts UTM parameters from a URL', () => {
+    const url = `${PROTOCOLS.DAPP}/https://example.com?utm_source=facebook&utm_medium=social&utm_campaign=summer_sale&utm_term=wallet&utm_content=banner`;
+    const expectedParams = {
+      uri: '',
+      redirect: '',
+      originatorInfo: '',
+      rpc: '',
+      sdkVersion: '',
+      channelId: '',
+      comm: '',
+      v: '',
+      pubkey: '',
+      attributionId: '',
+      utm_source: 'facebook',
+      utm_medium: 'social',
+      utm_campaign: 'summer_sale',
+      utm_term: 'wallet',
+      utm_content: 'banner',
+    };
 
     mockQs.parse.mockReturnValue(expectedParams);
 
@@ -61,16 +76,9 @@ describe('extractURLParams', () => {
     expect(params).toEqual(expectedParams);
   });
 
-  it('should return an empty params object when the URL has no query parameters', () => {
+  it('returns an empty params object when the URL has no query parameters', () => {
     const url = `${PROTOCOLS.DAPP}/https://example.com`;
 
-    mockUrlParser.mockImplementation(
-      () =>
-        ({
-          query: '',
-        } as unknown as UrlParser<string>),
-    );
-
     const { params } = extractURLParams(url);
 
     expect(params).toEqual({
@@ -84,21 +92,18 @@ describe('extractURLParams', () => {
       pubkey: '',
       v: '',
       attributionId: '',
-      utm: '',
+      utm_source: '',
+      utm_medium: '',
+      utm_campaign: '',
+      utm_term: '',
+      utm_content: '',
     });
   });
 
-  it('should handle invalid query parameters and show an alert when parsing fails', () => {
+  it('handles invalid query parameters and shows an alert when parsing fails', () => {
     const url = `${PROTOCOLS.DAPP}/https://example.com?invalid=param`;
     const errorMessage = 'Invalid query parameter';
 
-    mockUrlParser.mockImplementation(
-      () =>
-        ({
-          query: '?invalid=param',
-        } as unknown as UrlParser<string>),
-    );
-
     mockQs.parse.mockImplementation(() => {
       throw new Error(errorMessage);
     });
@@ -118,7 +123,11 @@ describe('extractURLParams', () => {
       pubkey: '',
       v: '',
       attributionId: '',
-      utm: '',
+      utm_source: '',
+      utm_medium: '',
+      utm_campaign: '',
+      utm_term: '',
+      utm_content: '',
     });
 
     expect(alertSpy).toHaveBeenCalledWith(
@@ -127,7 +136,7 @@ describe('extractURLParams', () => {
     );
   });
 
-  it('should correctly parse and extract parameters from a URL with valid query parameters', () => {
+  it('parses and extracts parameters from a URL with valid query parameters', () => {
     const url = `${PROTOCOLS.DAPP}/https://example.com?uri=test&redirect=false&channelId=456&comm=other&pubkey=xyz`;
     const expectedParams = {
       uri: 'test',
@@ -140,15 +149,40 @@ describe('extractURLParams', () => {
       sdkVersion: '',
       pubkey: 'xyz',
       attributionId: '',
-      utm: '',
+      utm_source: '',
+      utm_medium: '',
+      utm_campaign: '',
+      utm_term: '',
+      utm_content: '',
     };
 
-    mockUrlParser.mockImplementation(
-      () =>
-        ({
-          query: '?uri=test&redirect=false&channelId=456&comm=other&pubkey=xyz',
-        } as unknown as UrlParser<string>),
-    );
+    mockQs.parse.mockReturnValue(expectedParams);
+
+    const { params } = extractURLParams(url);
+
+    expect(params).toEqual(expectedParams);
+  });
+
+  it('extracts parameters from a valid URL with duplicate query parameters', () => {
+    // pubkey and comm is duplicated
+    const url = `${PROTOCOLS.DAPP}/https://example.com?uri=test&redirect=true&channelId=123&comm=test&comm=test&pubkey=abc&v=2&pubkey=abc`;
+    const expectedParams = {
+      uri: 'test',
+      redirect: 'true',
+      originatorInfo: '',
+      rpc: '',
+      sdkVersion: '',
+      channelId: '123',
+      comm: 'test',
+      pubkey: 'abc',
+      v: '2',
+      attributionId: '',
+      utm_source: '',
+      utm_medium: '',
+      utm_campaign: '',
+      utm_term: '',
+      utm_content: '',
+    };
 
     mockQs.parse.mockReturnValue(expectedParams);
 
diff --git a/app/core/DeeplinkManager/ParseManager/extractURLParams.ts b/app/core/DeeplinkManager/ParseManager/extractURLParams.ts
index 4d992b6c3e4..bb782154987 100644
--- a/app/core/DeeplinkManager/ParseManager/extractURLParams.ts
+++ b/app/core/DeeplinkManager/ParseManager/extractURLParams.ts
@@ -3,8 +3,6 @@ import { Alert } from 'react-native';
 import UrlParser from 'url-parse';
 import { strings } from '../../../../locales/i18n';
 import { PROTOCOLS } from '../../../constants/deeplinks';
-import Logger from '../../../util/Logger';
-import DevLogger from '../../SDKConnect/utils/DevLogger';
 
 export interface DeeplinkUrlParams {
   uri: string;
@@ -20,7 +18,11 @@ export interface DeeplinkUrlParams {
   originatorInfo?: string;
   request?: string;
   attributionId?: string;
-  utm?: string;
+  utm_source?: string;
+  utm_medium?: string;
+  utm_campaign?: string;
+  utm_term?: string;
+  utm_content?: string;
   account?: string; // This is the format => "address@chainId"
 }
 
@@ -42,21 +44,23 @@ function extractURLParams(url: string) {
     channelId: '',
     comm: '',
     attributionId: '',
-    utm: '',
+    utm_source: '',
+    utm_medium: '',
+    utm_campaign: '',
+    utm_term: '',
+    utm_content: '',
   };
 
-  DevLogger.log(`extractParams:: urlObj`, urlObj);
-
   if (urlObj.query.length) {
     try {
-      params = qs.parse(
-        urlObj.query.substring(1),
-      ) as unknown as DeeplinkUrlParams;
+      // Use arrayLimit: 1 to prevent arrays from being returned for duplicate parameters
+      const parsedParams = qs.parse(urlObj.query.substring(1), {
+        arrayLimit: 99,
+      });
+      params = { ...params, ...parsedParams };
 
       if (params.message) {
-        Logger.log('extractParams:: message before...: ', params.message);
         params.message = params.message?.replace(/ /g, '+');
-        Logger.log('extractParams:: message after: ', params.message);
       }
     } catch (e) {
       if (e) Alert.alert(strings('deeplink.invalid'), e.toString());
diff --git a/app/core/processAttribution.test.tsx b/app/core/processAttribution.test.tsx
index 16a0c230795..15bffbf59cb 100644
--- a/app/core/processAttribution.test.tsx
+++ b/app/core/processAttribution.test.tsx
@@ -1,7 +1,6 @@
 import { store } from '../store';
 import extractURLParams from './DeeplinkManager/ParseManager/extractURLParams';
 import { processAttribution } from './processAttribution';
-import Logger from '../util/Logger';
 
 jest.mock('../store', () => ({
   store: {
@@ -9,9 +8,9 @@ jest.mock('../store', () => ({
   },
 }));
 
-jest.mock('./DeeplinkManager/ParseManager/extractURLParams', () => jest.fn());
-jest.mock('../util/Logger', () => ({
-  error: jest.fn(),
+jest.mock('./DeeplinkManager/ParseManager/extractURLParams', () => ({
+  __esModule: true,
+  default: jest.fn(),
 }));
 
 describe('processAttribution', () => {
@@ -26,28 +25,26 @@ describe('processAttribution', () => {
     (extractURLParams as jest.Mock).mockReturnValue({
       params: {
         attributionId: 'test123',
-        utm: JSON.stringify({
-          source: 'twitter',
-          medium: 'social',
-          campaign: 'cmp-57731027-afbf09/',
-          term: null,
-          content: null,
-        }),
+        utm_source: 'facebook',
+        utm_medium: 'social',
+        utm_campaign: 'summer_sale',
+        utm_term: 'wallet',
+        utm_content: 'banner',
       },
     });
 
     const result = processAttribution({
-      currentDeeplink: 'metamask://connect?attributionId=test123&utm=...',
+      currentDeeplink:
+        'metamask://connect?attributionId=test123&utm_source=facebook&utm_medium=social&utm_campaign=summer_sale&utm_term=wallet&utm_content=banner',
       store,
     });
     expect(result).toEqual({
       attributionId: 'test123',
-      utm: expect.any(String),
-      utm_source: 'twitter',
+      utm_source: 'facebook',
       utm_medium: 'social',
-      utm_campaign: 'cmp-57731027-afbf09/',
-      utm_term: null,
-      utm_content: null,
+      utm_campaign: 'summer_sale',
+      utm_term: 'wallet',
+      utm_content: 'banner',
     });
   });
 
@@ -57,7 +54,8 @@ describe('processAttribution', () => {
     });
 
     const result = processAttribution({
-      currentDeeplink: 'metamask://connect?attributionId=test123&utm=...',
+      currentDeeplink:
+        'metamask://connect?attributionId=test123&utm_source=facebook&utm_medium=social&utm_campaign=summer_sale',
       store,
     });
     expect(result).toBeUndefined();
@@ -79,56 +77,55 @@ describe('processAttribution', () => {
     (extractURLParams as jest.Mock).mockReturnValue({
       params: {
         attributionId: 'test123',
-        utm: JSON.stringify({
-          source: 'twitter',
-          medium: 'social',
-        }),
+        utm_source: 'facebook',
+        utm_medium: 'social',
+        utm_campaign: '',
+        utm_term: '',
+        utm_content: '',
       },
     });
 
     const result = processAttribution({
-      currentDeeplink: 'metamask://connect?attributionId=test123&utm=...',
+      currentDeeplink:
+        'metamask://connect?attributionId=test123&utm_source=facebook&utm_medium=social',
       store,
     });
     expect(result).toEqual({
       attributionId: 'test123',
-      utm: expect.any(String),
-      utm_source: 'twitter',
+      utm_source: 'facebook',
       utm_medium: 'social',
-      utm_campaign: undefined,
-      utm_term: undefined,
-      utm_content: undefined,
+      utm_campaign: '',
+      utm_term: '',
+      utm_content: '',
     });
   });
 
-  it('handles JSON parsing errors gracefully', () => {
+  it('handles empty UTM parameters gracefully', () => {
     (store.getState as jest.Mock).mockReturnValue({
       security: { dataCollectionForMarketing: true },
     });
     (extractURLParams as jest.Mock).mockReturnValue({
       params: {
         attributionId: 'test123',
-        utm: 'invalid-json',
+        utm_source: '',
+        utm_medium: '',
+        utm_campaign: '',
+        utm_term: '',
+        utm_content: '',
       },
     });
 
     const result = processAttribution({
-      currentDeeplink:
-        'metamask://connect?attributionId=test123&utm=invalid-json',
+      currentDeeplink: 'metamask://connect?attributionId=test123',
       store,
     });
     expect(result).toEqual({
       attributionId: 'test123',
-      utm: 'invalid-json',
-      utm_source: undefined,
-      utm_medium: undefined,
-      utm_campaign: undefined,
-      utm_term: undefined,
-      utm_content: undefined,
+      utm_source: '',
+      utm_medium: '',
+      utm_campaign: '',
+      utm_term: '',
+      utm_content: '',
     });
-    expect(Logger.error).toHaveBeenCalledWith(
-      expect.any(Error),
-      expect.any(Error),
-    );
   });
 });
diff --git a/app/core/processAttribution.tsx b/app/core/processAttribution.tsx
index c665f4f049b..437edb565cc 100644
--- a/app/core/processAttribution.tsx
+++ b/app/core/processAttribution.tsx
@@ -2,7 +2,6 @@ import extractURLParams from './DeeplinkManager/ParseManager/extractURLParams';
 import { RootState } from '../reducers';
 import { Store } from 'redux';
 import Logger from '../util/Logger';
-import DevLogger from './SDKConnect/utils/DevLogger';
 
 interface ProcessAttributionParams {
   currentDeeplink: string | null;
@@ -12,7 +11,7 @@ interface ProcessAttributionParams {
 
 interface AttributionResult {
   attributionId?: string;
-  utm?: string;
+
   utm_source?: string;
   utm_medium?: string;
   utm_campaign?: string;
@@ -26,32 +25,25 @@ export function processAttribution({
 }: ProcessAttributionParams): AttributionResult | undefined {
   const { security } = store.getState();
   if (!security.dataCollectionForMarketing) {
+    Logger.log(
+      'processAttribution:: dataCollectionForMarketing is false, returning undefined',
+    );
     return undefined;
   }
 
   if (currentDeeplink) {
     const { params } = extractURLParams(currentDeeplink);
-    const attributionId = params.attributionId || undefined;
-    const utm = params.utm || undefined;
-    let utm_source, utm_medium, utm_campaign, utm_term, utm_content;
-
-    if (utm) {
-      try {
-        const utmParams = JSON.parse(utm);
-        DevLogger.log('processAttribution:: UTM params', utmParams);
-        utm_source = utmParams.source;
-        utm_medium = utmParams.medium;
-        utm_campaign = utmParams.campaign;
-        utm_term = utmParams.term;
-        utm_content = utmParams.content;
-      } catch (error) {
-        Logger.error(new Error('Error parsing UTM params'), error);
-      }
-    }
+    const {
+      attributionId,
+      utm_source,
+      utm_medium,
+      utm_campaign,
+      utm_term,
+      utm_content,
+    } = params;
 
     return {
       attributionId,
-      utm,
       utm_source,
       utm_medium,
       utm_campaign,

From 71b70c15f208251798452a6721bda7077aa034f5 Mon Sep 17 00:00:00 2001
From: Maarten Zuidhoorn <maarten@zuidhoorn.com>
Date: Fri, 1 Aug 2025 16:27:41 +0200
Subject: [PATCH 4/5] test(e2e): Add Snaps E2E tests (#17416)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This branch contains ongoing work for adding Snaps E2E tests.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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.

---------

Co-authored-by: Guillaume Roux <guillaumeroux123@gmail.com>
Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>
---
 .../InstallSnapApproval.tsx                   |   5 +
 e2e/framework/Assertions.ts                   |  13 ++
 e2e/helpers.js                                |   4 +
 e2e/pages/Browser/TestSnaps.ts                |  62 ++++++--
 e2e/selectors/Browser/TestSnaps.selectors.ts  |  46 ++++++
 e2e/specs/snaps/test-snap-bip-32.spec.ts      |   4 -
 e2e/specs/snaps/test-snap-bip-44.spec.ts      |   4 -
 .../snaps/test-snap-client-status.spec.ts     |  58 ++++++++
 .../snaps/test-snap-ethereum-provider.spec.ts |   2 -
 e2e/specs/snaps/test-snap-get-entropy.spec.ts |  87 +++++++++++
 .../snaps/test-snap-get-preferences.spec.ts   |  64 +++++++++
 e2e/specs/snaps/test-snap-lifecycle.spec.ts   |  61 ++++++++
 .../snaps/test-snap-manage-state.spec.ts      | 135 ++++++++++++++++++
 .../snaps/test-snap-network-access.spec.ts    |   3 -
 e2e/specs/snaps/test-snap-rpc.spec.ts         |  53 +++++++
 e2e/viewHelper.ts                             |  27 ++++
 16 files changed, 605 insertions(+), 23 deletions(-)
 create mode 100644 e2e/specs/snaps/test-snap-client-status.spec.ts
 create mode 100644 e2e/specs/snaps/test-snap-get-entropy.spec.ts
 create mode 100644 e2e/specs/snaps/test-snap-get-preferences.spec.ts
 create mode 100644 e2e/specs/snaps/test-snap-lifecycle.spec.ts
 create mode 100644 e2e/specs/snaps/test-snap-manage-state.spec.ts
 create mode 100644 e2e/specs/snaps/test-snap-rpc.spec.ts

diff --git a/app/components/Approvals/InstallSnapApproval/InstallSnapApproval.tsx b/app/components/Approvals/InstallSnapApproval/InstallSnapApproval.tsx
index c50ec70f59a..93cbca44abc 100644
--- a/app/components/Approvals/InstallSnapApproval/InstallSnapApproval.tsx
+++ b/app/components/Approvals/InstallSnapApproval/InstallSnapApproval.tsx
@@ -141,6 +141,11 @@ const InstallSnapApproval = () => {
   const connectSnapIds = getConnectSnapIds(approvalRequest, currentPermissions);
 
   const snapId = installSnapId ?? connectSnapIds[0];
+
+  if (!snapId) {
+    return null;
+  }
+
   const snapName = getSnapMetadata(snapId).name;
 
   // TODO: This component should support connecting to multiple Snaps at once.
diff --git a/e2e/framework/Assertions.ts b/e2e/framework/Assertions.ts
index 16c5eab8954..4d319216a3e 100644
--- a/e2e/framework/Assertions.ts
+++ b/e2e/framework/Assertions.ts
@@ -2,6 +2,7 @@ import { waitFor } from 'detox';
 import Utilities, { BASE_DEFAULTS } from './Utilities';
 import { AssertionOptions } from './types';
 import Matchers from './Matchers';
+import { Json } from '@metamask/utils';
 
 /**
  * Assertions with auto-retry and better error messages
@@ -677,4 +678,16 @@ export default class Assertions {
       },
     );
   }
+
+  static async checkIfJsonEqual(actual: Json, expected: Json): Promise<void> {
+    if (JSON.stringify(actual) !== JSON.stringify(expected)) {
+      throw new Error(
+        `Object equality check failed.\nExpected: ${JSON.stringify(
+          expected,
+          null,
+          2,
+        )}\nActual: ${JSON.stringify(actual, null, 2)}`,
+      );
+    }
+  }
 }
diff --git a/e2e/helpers.js b/e2e/helpers.js
index 5ccf2e75bf7..544101996d5 100644
--- a/e2e/helpers.js
+++ b/e2e/helpers.js
@@ -384,6 +384,10 @@ export default class TestHelpers {
     }
   }
 
+  static async terminateApp() {
+    return device.terminateApp();
+  }
+
   static async launchApp(launchOptions) {
     const config = await resolveConfig();
     const platform = device.getPlatform();
diff --git a/e2e/pages/Browser/TestSnaps.ts b/e2e/pages/Browser/TestSnaps.ts
index 7260d1062c4..d8cacb03544 100644
--- a/e2e/pages/Browser/TestSnaps.ts
+++ b/e2e/pages/Browser/TestSnaps.ts
@@ -19,6 +19,9 @@ import { IndexableWebElement } from 'detox/detox';
 import Utilities from '../../framework/Utilities';
 import LegacyGestures from '../../utils/Gestures';
 import { ConfirmationFooterSelectorIDs } from '../../selectors/Confirmation/ConfirmationView.selectors';
+import { waitForTestSnapsToLoad } from '../../viewHelper';
+import { RetryOptions } from '../../framework';
+import { Json } from '@metamask/utils';
 
 export const TEST_SNAPS_URL =
   'https://metamask.github.io/snaps/test-snaps/2.25.0/';
@@ -51,34 +54,73 @@ class TestSnaps {
   async checkResultSpan(
     selector: keyof typeof TestSnapResultSelectorWebIDS,
     expectedMessage: string,
+    options: Partial<RetryOptions> = {
+      timeout: 5_000,
+      interval: 100,
+    },
   ): Promise<void> {
-    const webElement = (await Matchers.getElementByWebID(
+    const webElement = await Matchers.getElementByWebID(
       BrowserViewSelectorsIDs.BROWSER_WEBVIEW_ID,
       TestSnapResultSelectorWebIDS[selector],
-    )) as IndexableWebElement;
+    );
 
-    const actualText = await webElement.getText();
-    await Assertions.checkIfTextMatches(actualText, expectedMessage);
+    return await Utilities.executeWithRetry(async () => {
+      const actualText = await webElement.getText();
+      await Assertions.checkIfTextMatches(actualText, expectedMessage);
+    }, options);
+  }
+
+  async checkResultJson(
+    selector: keyof typeof TestSnapResultSelectorWebIDS,
+    expectedJson: Json,
+    options: Partial<RetryOptions> = {
+      timeout: 5_000,
+      interval: 100,
+    },
+  ): Promise<void> {
+    const webElement = await Matchers.getElementByWebID(
+      BrowserViewSelectorsIDs.BROWSER_WEBVIEW_ID,
+      TestSnapResultSelectorWebIDS[selector],
+    );
+
+    return await Utilities.executeWithRetry(async () => {
+      const actualText = await webElement.getText();
+      let actualJson: Json;
+      try {
+        actualJson = JSON.parse(actualText);
+      } catch (error) {
+        throw new Error(`Failed to parse JSON from result span: ${actualText}`);
+      }
+
+      await Assertions.checkIfJsonEqual(actualJson, expectedJson);
+    }, options);
   }
 
   async checkResultSpanIncludes(
     selector: keyof typeof TestSnapResultSelectorWebIDS,
     expectedMessage: string,
+    options: Partial<RetryOptions> = {
+      timeout: 5_000,
+      interval: 100,
+    },
   ): Promise<void> {
-    const webElement = (await Matchers.getElementByWebID(
+    const webElement = await Matchers.getElementByWebID(
       BrowserViewSelectorsIDs.BROWSER_WEBVIEW_ID,
       TestSnapResultSelectorWebIDS[selector],
-    )) as IndexableWebElement;
+    );
 
-    const actualText = await webElement.getText();
-    if (!actualText.includes(expectedMessage)) {
-      throw new Error(`Text did not contain "${expectedMessage}"`);
-    }
+    return await Utilities.executeWithRetry(async () => {
+      const actualText = await webElement.getText();
+      if (!actualText.includes(expectedMessage)) {
+        throw new Error(`Text did not contain "${expectedMessage}"`);
+      }
+    }, options);
   }
 
   async navigateToTestSnap(): Promise<void> {
     await Browser.tapUrlInputBox();
     await Browser.navigateToURL(TEST_SNAPS_URL);
+    await waitForTestSnapsToLoad();
   }
 
   async tapButton(
diff --git a/e2e/selectors/Browser/TestSnaps.selectors.ts b/e2e/selectors/Browser/TestSnaps.selectors.ts
index f367fc62632..e4d68f4a3dd 100644
--- a/e2e/selectors/Browser/TestSnaps.selectors.ts
+++ b/e2e/selectors/Browser/TestSnaps.selectors.ts
@@ -1,17 +1,38 @@
 // Only keep selectors that are actually used in tests
 export const TestSnapViewSelectorWebIDS = {
+  clearManageStateButton: 'clearManageState',
+  clearStateButton: 'clearState',
+  clearStateUnencryptedButton: 'clearStateUnencrypted',
+  clearUnencryptedManageStateButton: 'clearUnencryptedManageState',
   connectBip32Button: 'connectbip32',
   connectBip44Button: 'connectbip44',
+  connectClientStatusSnapButton: 'connectclient-status',
+  connectGetEntropyButton: 'connectGetEntropySnap',
+  connectGetPreferencesButton: 'connectpreferences',
+  connectJsonRpcButton: 'connectjson-rpc',
+  connectLifeCycleButton: 'connectlifecycle-hooks',
+  connectManageStateButton: 'connectmanage-state',
   connectNetworkAccessButton: 'connectnetwork-access',
   connectEthereumProviderButton: 'connectethereum-provider',
+  connectStateButton: 'connectstate',
+  getPreferencesButton: 'getPreferences',
   getPublicKeyBip44Button: 'sendBip44Test',
   signMessageBip44Button: 'signBip44Message',
   getPublicKeyBip32Button: 'bip32GetPublic',
   getCompressedPublicKeyBip32Button: 'bip32GetCompressedPublic',
+  signEntropyMessageButton: 'signEntropyMessage',
   signMessageBip32Secp256k1Button: 'sendBip32-secp256k1',
   signMessageBip32ed25519Button: 'sendBip32-ed25519',
   signMessageBip32ed25519Bip32Button: 'sendBip32-ed25519Bip32',
+  sendClientStatusButton: 'sendClientStatusTest',
+  sendGetStateButton: 'sendGetState',
+  sendGetUnencryptedStateButton: 'sendGetUnencryptedState',
+  sendManageStateButton: 'sendManageState',
   sendNetworkAccessTestButton: 'sendNetworkAccessTest',
+  sendRpcButton: 'sendRpc',
+  sendStateButton: 'sendState',
+  sendUnencryptedManageStateButton: 'sendUnencryptedManageState',
+  sendUnencryptedStateButton: 'sendUnencryptedState',
   startWebSocket: 'startWebSocket',
   stopWebSocket: 'stopWebSocket',
   getWebSocketState: 'getWebSocketState',
@@ -22,10 +43,19 @@ export const TestSnapViewSelectorWebIDS = {
 };
 
 export const TestSnapInputSelectorWebIDS = {
+  dataManageStateInput: 'dataManageState',
+  dataStateInput: 'dataState',
+  dataUnencryptedManageStateInput: 'dataUnencryptedManageState',
+  dataUnencryptedStateInput: 'dataUnencryptedState',
+  entropyMessageInput: 'entropyMessage',
+  getStateInput: 'getState',
+  getUnencryptedStateInput: 'getUnencryptedState',
   messageBip44Input: 'bip44Message',
   messageEd25519Bip32Input: 'bip32Message-ed25519Bip32',
   messageEd25519Input: 'bip32Message-ed25519',
   messageSecp256k1Input: 'bip32Message-secp256k1',
+  setStateKeyInput: 'setStateKey',
+  setStateKeyUnencryptedInput: 'setStateKeyUnencrypted',
   webSocketUrlInput: 'webSocketUrl',
   personalSignMessageInput: 'personalSignMessage',
   signTypedDataMessageInput: 'signTypedData',
@@ -34,6 +64,7 @@ export const TestSnapInputSelectorWebIDS = {
 export const EntropyDropDownSelectorWebIDS = {
   bip32EntropyDropDown: 'bip32-entropy-selector',
   bip44EntropyDropDown: 'bip44-entropy-selector',
+  getEntropyDropDown: 'get-entropy-entropy-selector',
   networkDropDown: 'select-chain',
 };
 
@@ -44,10 +75,25 @@ export const TestSnapResultSelectorWebIDS = {
   bip32MessageResultSecp256k1Span: 'bip32MessageResult-secp256k1',
   bip32MessageResultEd25519Bip32Span: 'bip32MessageResult-ed25519Bip32',
   bip32PublicKeyResultSpan: 'bip32PublicKeyResult',
+  clearManageStateResultSpan: 'clearManageStateResult',
+  clearUnencryptedManageStateResultSpan: 'clearUnencryptedManageStateResult',
+  clientStatusResultSpan: 'clientStatusResult',
+  encryptedStateResultSpan: 'encryptedStateResult',
+  entropySignResultSpan: 'entropySignResult',
+  preferencesResultSpan: 'preferencesResult',
+  getStateResultSpan: 'getStateResult',
+  getStateUnencryptedResultSpan: 'getStateUnencryptedResult',
   networkAccessResultSpan: 'networkAccessResult',
   ethereumProviderResultSpan: 'ethproviderResult',
   personalSignResultSpan: 'personalSignResult',
+  retrieveManageStateResultSpan: 'retrieveManageStateResult',
+  retrieveManageStateUnencryptedResultSpan:
+    'retrieveManageStateUnencryptedResult',
+  rpcResultSpan: 'rpcResult',
+  sendManageStateResultSpan: 'sendManageStateResult',
+  sendUnencryptedManageStateResultSpan: 'sendUnencryptedManageStateResult',
   signTypedDataResultSpan: 'signTypedDataResult',
+  unencryptedStateResultSpan: 'unencryptedStateResult',
 };
 
 export const TestSnapBottomSheetSelectorWebIDS = {
diff --git a/e2e/specs/snaps/test-snap-bip-32.spec.ts b/e2e/specs/snaps/test-snap-bip-32.spec.ts
index 1d815702248..9f5fba3d9c5 100644
--- a/e2e/specs/snaps/test-snap-bip-32.spec.ts
+++ b/e2e/specs/snaps/test-snap-bip-32.spec.ts
@@ -11,7 +11,6 @@ import { getFixturesServerPort } from '../../framework/fixtures/FixtureUtils';
 import FixtureServer from '../../framework/fixtures/FixtureServer';
 import Assertions from '../../framework/Assertions';
 import TabBarComponent from '../../pages/wallet/TabBarComponent';
-import BrowserView from '../../pages/Browser/BrowserView';
 import TestSnaps from '../../pages/Browser/TestSnaps';
 
 const fixtureServer = new FixtureServer();
@@ -32,8 +31,6 @@ describe(FlaskBuildTests('BIP-32 Snap Tests'), () => {
     // Navigate to test snaps URL once for all tests
     await TabBarComponent.tapBrowser();
     await TestSnaps.navigateToTestSnap();
-    await TestHelpers.delay(3500); // Wait for page to load
-    await Assertions.checkIfVisible(BrowserView.browserScreenID);
   });
 
   afterAll(async () => {
@@ -50,7 +47,6 @@ describe(FlaskBuildTests('BIP-32 Snap Tests'), () => {
 
   it('can get BIP-32 public key', async () => {
     await TestSnaps.tapButton('getPublicKeyBip32Button');
-    await TestHelpers.delay(3000);
     await TestSnaps.checkResultSpan(
       'bip32PublicKeyResultSpan',
       '"0x043e98d696ae15caef75fa8dd204a7c5c08d1272b2218ba3c20feeb4c691eec366606ece56791c361a2320e7fad8bcbb130f66d51c591fc39767ab2856e93f8dfb"',
diff --git a/e2e/specs/snaps/test-snap-bip-44.spec.ts b/e2e/specs/snaps/test-snap-bip-44.spec.ts
index 3a87cb5fe2a..c66bcaf162a 100644
--- a/e2e/specs/snaps/test-snap-bip-44.spec.ts
+++ b/e2e/specs/snaps/test-snap-bip-44.spec.ts
@@ -11,7 +11,6 @@ import { getFixturesServerPort } from '../../framework/fixtures/FixtureUtils';
 import FixtureServer from '../../framework/fixtures/FixtureServer';
 import Assertions from '../../framework/Assertions';
 import TabBarComponent from '../../pages/wallet/TabBarComponent';
-import BrowserView from '../../pages/Browser/BrowserView';
 import TestSnaps from '../../pages/Browser/TestSnaps';
 
 const fixtureServer = new FixtureServer();
@@ -32,8 +31,6 @@ describe(FlaskBuildTests('BIP-44 Snap Tests'), () => {
     // Navigate to test snaps URL once for all tests
     await TabBarComponent.tapBrowser();
     await TestSnaps.navigateToTestSnap();
-    await TestHelpers.delay(3500); // Wait for page to load
-    await Assertions.expectElementToBeVisible(BrowserView.browserScreenID);
   });
 
   afterAll(async () => {
@@ -50,7 +47,6 @@ describe(FlaskBuildTests('BIP-44 Snap Tests'), () => {
 
   it('can get BIP-44 public key', async () => {
     await TestSnaps.tapButton('getPublicKeyBip44Button');
-    await TestHelpers.delay(3000);
     await TestSnaps.checkResultSpan(
       'bip44ResultSpan',
       '"0x86debb44fb3a984d93f326131d4c1db0bc39644f1a67b673b3ab45941a1cea6a385981755185ac4594b6521e4d1e08d1"',
diff --git a/e2e/specs/snaps/test-snap-client-status.spec.ts b/e2e/specs/snaps/test-snap-client-status.spec.ts
new file mode 100644
index 00000000000..d84b9d715dd
--- /dev/null
+++ b/e2e/specs/snaps/test-snap-client-status.spec.ts
@@ -0,0 +1,58 @@
+import TestHelpers from '../../helpers';
+import { FlaskBuildTests } from '../../tags';
+import { loginToApp } from '../../viewHelper';
+import FixtureBuilder from '../../framework/fixtures/FixtureBuilder';
+import {
+  loadFixture,
+  startFixtureServer,
+  stopFixtureServer,
+} from '../../framework/fixtures/FixtureHelper';
+import { getFixturesServerPort } from '../../fixtures/utils';
+import FixtureServer from '../../framework/fixtures/FixtureServer';
+import TabBarComponent from '../../pages/wallet/TabBarComponent';
+import TestSnaps from '../../pages/Browser/TestSnaps';
+
+const fixtureServer = new FixtureServer();
+
+describe(FlaskBuildTests('Client Status Snap Tests'), () => {
+  beforeAll(async () => {
+    await TestHelpers.reverseServerPort();
+    const fixture = new FixtureBuilder()
+      .withMultiSRPKeyringController()
+      .build();
+    await startFixtureServer(fixtureServer);
+    await loadFixture(fixtureServer, { fixture });
+    await TestHelpers.launchApp({
+      launchArgs: { fixtureServerPort: `${getFixturesServerPort()}` },
+    });
+    await loginToApp();
+
+    // Navigate to test snaps URL once for all tests
+    await TabBarComponent.tapBrowser();
+    await TestSnaps.navigateToTestSnap();
+  });
+
+  afterAll(async () => {
+    await stopFixtureServer(fixtureServer);
+  });
+
+  beforeEach(() => {
+    jest.setTimeout(150_000);
+  });
+
+  it('connects to the Client Status Snap', async () => {
+    await TestSnaps.installSnap('connectClientStatusSnapButton');
+  });
+
+  it('returns the client status', async () => {
+    await TestSnaps.tapButton('sendClientStatusButton');
+    await TestSnaps.checkResultJson('clientStatusResultSpan', {
+      locked: false,
+      active: true,
+    });
+  });
+
+  // Can't test this right now because the client needs to be unlocked in order
+  // to interact with the Snap.
+  it.todo('returns the client status with a locked client');
+});
diff --git a/e2e/specs/snaps/test-snap-ethereum-provider.spec.ts b/e2e/specs/snaps/test-snap-ethereum-provider.spec.ts
index 2fc909e6d72..3bf613aa475 100644
--- a/e2e/specs/snaps/test-snap-ethereum-provider.spec.ts
+++ b/e2e/specs/snaps/test-snap-ethereum-provider.spec.ts
@@ -4,7 +4,6 @@ import FixtureBuilder from '../../framework/fixtures/FixtureBuilder';
 import { withFixtures } from '../../framework/fixtures/FixtureHelper';
 import Assertions from '../../framework/Assertions';
 import TabBarComponent from '../../pages/wallet/TabBarComponent';
-import BrowserView from '../../pages/Browser/BrowserView';
 import TestSnaps from '../../pages/Browser/TestSnaps';
 import ConnectBottomSheet from '../../pages/Browser/ConnectBottomSheet';
 import { mockEvents } from '../../api-mocking/mock-config/mock-events';
@@ -30,7 +29,6 @@ describe(FlaskBuildTests('Ethereum Provider Snap Tests'), () => {
         // Navigate to test snaps URL once for all tests
         await TabBarComponent.tapBrowser();
         await TestSnaps.navigateToTestSnap();
-        await Assertions.expectElementToBeVisible(BrowserView.browserScreenID);
 
         await TestSnaps.installSnap('connectEthereumProviderButton');
 
diff --git a/e2e/specs/snaps/test-snap-get-entropy.spec.ts b/e2e/specs/snaps/test-snap-get-entropy.spec.ts
new file mode 100644
index 00000000000..ea130f57a26
--- /dev/null
+++ b/e2e/specs/snaps/test-snap-get-entropy.spec.ts
@@ -0,0 +1,87 @@
+import TestHelpers from '../../helpers';
+import { FlaskBuildTests } from '../../tags';
+import { loginToApp } from '../../viewHelper';
+import FixtureBuilder from '../../framework/fixtures/FixtureBuilder';
+import {
+  loadFixture,
+  startFixtureServer,
+  stopFixtureServer,
+} from '../../framework/fixtures/FixtureHelper';
+import { getFixturesServerPort } from '../../fixtures/utils';
+import FixtureServer from '../../framework/fixtures/FixtureServer';
+import TabBarComponent from '../../pages/wallet/TabBarComponent';
+import TestSnaps from '../../pages/Browser/TestSnaps';
+import Assertions from '../../framework/Assertions.ts';
+
+const fixtureServer = new FixtureServer();
+
+describe(FlaskBuildTests('Get Entropy Snap Tests'), () => {
+  beforeAll(async () => {
+    await TestHelpers.reverseServerPort();
+    const fixture = new FixtureBuilder()
+      .withMultiSRPKeyringController()
+      .build();
+    await startFixtureServer(fixtureServer);
+    await loadFixture(fixtureServer, { fixture });
+    await TestHelpers.launchApp({
+      launchArgs: { fixtureServerPort: `${getFixturesServerPort()}` },
+    });
+    await loginToApp();
+
+    // Navigate to test snaps URL once for all tests
+    await TabBarComponent.tapBrowser();
+    await TestSnaps.navigateToTestSnap();
+  });
+
+  afterAll(async () => {
+    await stopFixtureServer(fixtureServer);
+  });
+
+  beforeEach(() => {
+    jest.setTimeout(150_000);
+  });
+
+  it('connects to the Get Entropy Snap', async () => {
+    await TestSnaps.installSnap('connectGetEntropyButton');
+  });
+
+  it('signs a message with the Snap entropy', async () => {
+    await TestSnaps.fillMessage('entropyMessageInput', '1234');
+    await TestSnaps.tapButton('signEntropyMessageButton');
+    await TestSnaps.approveSignRequest();
+    await TestSnaps.checkResultSpan(
+      'entropySignResultSpan',
+      '"0x9341785782b512c86235612365f1076b16731ed9473beb4d0804c30b7fcc3a055aa7103b02dc64014d923220712dfbef023ddcf6327b313ea2dfd4d83dc5a53e1c5e7f4e10bce49830eded302294054df8a7a46e5b6cb3e50eec564ecba17941"',
+    );
+  });
+
+  it.each([
+    [
+      'SRP 1 (primary)',
+      '0xadd276f9d715223dcd20a595acb475f9b7353c451a57af64efb23633280c21aa172bd6689c27a0ac3c003ec4469b093207db956a6bf76689b3cc0b710c4187d5fcdca5f09c9594f146c9a39461e2f6cb03a446f4e62bd341a448ca9a33e96cf2',
+    ],
+    [
+      'SRP 2',
+      '0xa1dba3ddefabb56c5d6d37135fd07752662b5d720c005d619c0ff49eede2fe6f92a3e88e70ff4bb706b9ec2a076925ec159e3f6aa7170d51e428ccafe2353dd858da425c075912f0cd78c750942afef230393dff20d9fb58de14c56a5cd213b1',
+    ],
+  ])(
+    'signs a message with the Snap entropy from %s',
+    async (entropySource, result) => {
+      await TestSnaps.selectInDropdown('getEntropyDropDown', entropySource);
+      await TestSnaps.fillMessage('entropyMessageInput', '5678');
+      await TestSnaps.tapButton('signEntropyMessageButton');
+      await TestSnaps.approveSignRequest();
+      await TestSnaps.checkResultSpan('entropySignResultSpan', `"${result}"`);
+    },
+  );
+
+  it('fails when choosing an invalid entropy source', async () => {
+    await TestSnaps.selectInDropdown('getEntropyDropDown', 'Invalid');
+    await TestSnaps.fillMessage('entropyMessageInput', 'foo bar');
+    await TestSnaps.tapButton('signEntropyMessageButton');
+    await TestSnaps.approveSignRequest();
+    await Assertions.checkIfTextIsDisplayed(
+      'Entropy source with ID "invalid" not found.',
+    );
+  });
+});
diff --git a/e2e/specs/snaps/test-snap-get-preferences.spec.ts b/e2e/specs/snaps/test-snap-get-preferences.spec.ts
new file mode 100644
index 00000000000..770693f1d16
--- /dev/null
+++ b/e2e/specs/snaps/test-snap-get-preferences.spec.ts
@@ -0,0 +1,64 @@
+import FixtureBuilder from '../../framework/fixtures/FixtureBuilder';
+import {
+  loadFixture,
+  startFixtureServer,
+  stopFixtureServer,
+} from '../../framework/fixtures/FixtureHelper';
+import { getFixturesServerPort } from '../../fixtures/utils';
+import FixtureServer from '../../framework/fixtures/FixtureServer';
+import TestHelpers from '../../helpers';
+import TestSnaps from '../../pages/Browser/TestSnaps';
+import TabBarComponent from '../../pages/wallet/TabBarComponent';
+import { FlaskBuildTests } from '../../tags';
+import { loginToApp } from '../../viewHelper';
+
+const fixtureServer = new FixtureServer();
+
+describe(FlaskBuildTests('Get Preferences Snap Tests'), () => {
+  beforeAll(async () => {
+    await TestHelpers.reverseServerPort();
+    const fixture = new FixtureBuilder()
+      .withPreferencesController({
+        privacyMode: true,
+        showTestNetworks: true,
+      })
+      .build();
+    await startFixtureServer(fixtureServer);
+    await loadFixture(fixtureServer, { fixture });
+    await TestHelpers.launchApp({
+      launchArgs: { fixtureServerPort: `${getFixturesServerPort()}` },
+    });
+    await loginToApp();
+
+    // Navigate to test snaps URL once for all tests
+    await TabBarComponent.tapBrowser();
+    await TestSnaps.navigateToTestSnap();
+  });
+
+  afterAll(async () => {
+    await stopFixtureServer(fixtureServer);
+  });
+
+  beforeEach(() => {
+    jest.setTimeout(150_000);
+  });
+
+  it('gets the client preferences', async () => {
+    await TestSnaps.installSnap('connectGetPreferencesButton');
+
+    await TestSnaps.tapButton('getPreferencesButton');
+    await TestSnaps.checkResultJson('preferencesResultSpan', {
+      locale: 'en-US',
+      currency: 'usd',
+      hideBalances: true,
+      useSecurityAlerts: true,
+      simulateOnChainActions: true,
+      useTokenDetection: true,
+      batchCheckBalances: true,
+      displayNftMedia: true,
+      useNftDetection: true,
+      useExternalPricingData: true,
+      showTestnets: true,
+    });
+  });
+});
diff --git a/e2e/specs/snaps/test-snap-lifecycle.spec.ts b/e2e/specs/snaps/test-snap-lifecycle.spec.ts
new file mode 100644
index 00000000000..206775678dc
--- /dev/null
+++ b/e2e/specs/snaps/test-snap-lifecycle.spec.ts
@@ -0,0 +1,61 @@
+import FixtureBuilder from '../../framework/fixtures/FixtureBuilder';
+import {
+  loadFixture,
+  startFixtureServer,
+  stopFixtureServer,
+} from '../../framework/fixtures/FixtureHelper';
+import FixtureServer from '../../framework/fixtures/FixtureServer';
+import { getFixturesServerPort } from '../../fixtures/utils';
+import TestHelpers from '../../helpers';
+import TestSnaps from '../../pages/Browser/TestSnaps';
+import TabBarComponent from '../../pages/wallet/TabBarComponent';
+import { FlaskBuildTests } from '../../tags';
+import Assertions from '../../utils/Assertions';
+import { loginToApp } from '../../viewHelper';
+
+const fixtureServer = new FixtureServer();
+
+describe(FlaskBuildTests('Lifecycle hooks Snap Tests'), () => {
+  beforeAll(async () => {
+    await TestHelpers.reverseServerPort();
+    const fixture = new FixtureBuilder().build();
+    await startFixtureServer(fixtureServer);
+    await loadFixture(fixtureServer, { fixture });
+    await TestHelpers.launchApp({
+      launchArgs: { fixtureServerPort: `${getFixturesServerPort()}` },
+    });
+    await loginToApp();
+  });
+
+  afterAll(async () => {
+    await stopFixtureServer(fixtureServer);
+  });
+
+  beforeEach(() => {
+    jest.setTimeout(150_000);
+  });
+
+  it('runs the `onInstall` lifecycle hook when the Snap is installed', async () => {
+    await TabBarComponent.tapBrowser();
+    await TestSnaps.navigateToTestSnap();
+
+    await TestSnaps.installSnap('connectLifeCycleButton');
+
+    await Assertions.checkIfTextIsDisplayed(
+      'The Snap was installed successfully, and the "onInstall" handler was called.',
+    );
+  });
+
+  it('runs the `onStart` lifecycle hook when the client is started', async () => {
+    await TestHelpers.terminateApp();
+
+    await TestHelpers.launchApp({
+      launchArgs: { fixtureServerPort: `${getFixturesServerPort()}` },
+    });
+    await loginToApp();
+
+    await Assertions.checkIfTextIsDisplayed(
+      'The client was started successfully, and the "onStart" handler was called.',
+    );
+  });
+});
diff --git a/e2e/specs/snaps/test-snap-manage-state.spec.ts b/e2e/specs/snaps/test-snap-manage-state.spec.ts
new file mode 100644
index 00000000000..4f318c99fef
--- /dev/null
+++ b/e2e/specs/snaps/test-snap-manage-state.spec.ts
@@ -0,0 +1,135 @@
+import TestHelpers from '../../helpers';
+import { FlaskBuildTests } from '../../tags';
+import { loginToApp } from '../../viewHelper';
+import FixtureBuilder from '../../framework/fixtures/FixtureBuilder';
+import {
+  loadFixture,
+  startFixtureServer,
+  stopFixtureServer,
+} from '../../framework/fixtures/FixtureHelper';
+import { getFixturesServerPort } from '../../fixtures/utils';
+import FixtureServer from '../../framework/fixtures/FixtureServer';
+import TabBarComponent from '../../pages/wallet/TabBarComponent';
+import TestSnaps from '../../pages/Browser/TestSnaps';
+
+const fixtureServer = new FixtureServer();
+
+describe(FlaskBuildTests('Manage State Snap Tests'), () => {
+  beforeAll(async () => {
+    await TestHelpers.reverseServerPort();
+    const fixture = new FixtureBuilder()
+      .withMultiSRPKeyringController()
+      .build();
+    await startFixtureServer(fixtureServer);
+    await loadFixture(fixtureServer, { fixture });
+    await TestHelpers.launchApp({
+      launchArgs: { fixtureServerPort: `${getFixturesServerPort()}` },
+    });
+    await loginToApp();
+
+    // Navigate to test snaps URL once for all tests
+    await TabBarComponent.tapBrowser();
+    await TestSnaps.navigateToTestSnap();
+  });
+
+  afterAll(async () => {
+    await stopFixtureServer(fixtureServer);
+  });
+
+  beforeEach(() => {
+    jest.setTimeout(150_000);
+  });
+
+  describe('new state functions', () => {
+    it('connects to the State Snap', async () => {
+      await TestSnaps.installSnap('connectStateButton');
+    });
+
+    describe('encrypted state', () => {
+      it('sets and retrieves state', async () => {
+        await TestSnaps.fillMessage('dataStateInput', '"bar"');
+        await TestSnaps.fillMessage('setStateKeyInput', 'foo');
+        await TestSnaps.tapButton('sendStateButton');
+        await TestSnaps.checkResultJson('encryptedStateResultSpan', {
+          foo: 'bar',
+        });
+
+        await TestSnaps.fillMessage('getStateInput', 'foo');
+        await TestSnaps.tapButton('sendGetStateButton');
+        await TestSnaps.checkResultSpan('getStateResultSpan', '"bar"');
+      });
+
+      it('clears the state', async () => {
+        await TestSnaps.tapButton('clearStateButton');
+        await TestSnaps.checkResultSpan('encryptedStateResultSpan', 'null');
+      });
+    });
+
+    describe('unencrypted state', () => {
+      it('sets and retrieves unencrypted state', async () => {
+        await TestSnaps.fillMessage('dataUnencryptedStateInput', '"bar"');
+        await TestSnaps.fillMessage('setStateKeyUnencryptedInput', 'foo');
+        await TestSnaps.tapButton('sendUnencryptedStateButton');
+        await TestSnaps.checkResultJson('unencryptedStateResultSpan', {
+          foo: 'bar',
+        });
+
+        await TestSnaps.fillMessage('getUnencryptedStateInput', 'foo');
+        await TestSnaps.tapButton('sendGetUnencryptedStateButton');
+        await TestSnaps.checkResultSpan(
+          'getStateUnencryptedResultSpan',
+          '"bar"',
+        );
+      });
+
+      it('clears the unencrypted state', async () => {
+        await TestSnaps.tapButton('clearStateUnencryptedButton');
+        await TestSnaps.checkResultSpan('unencryptedStateResultSpan', 'null');
+      });
+    });
+  });
+
+  describe('legacy state functions', () => {
+    describe('encrypted state', () => {
+      it('sets and retrieves state', async () => {
+        await TestSnaps.fillMessage('dataManageStateInput', '23');
+        await TestSnaps.tapButton('sendManageStateButton');
+        await TestSnaps.checkResultSpan('sendManageStateResultSpan', 'true');
+        await TestSnaps.checkResultJson('retrieveManageStateResultSpan', {
+          items: ['23'],
+        });
+      });
+
+      it('clears the state', async () => {
+        await TestSnaps.tapButton('clearManageStateButton');
+        await TestSnaps.checkResultSpan('clearManageStateResultSpan', 'true');
+        await TestSnaps.checkResultJson('retrieveManageStateResultSpan', {
+          items: [],
+        });
+      });
+    });
+
+    describe('unencrypted state', () => {
+      it('sets and retrieves unencrypted state', async () => {
+        await TestSnaps.fillMessage('dataUnencryptedManageStateInput', '23');
+        await TestSnaps.tapButton('sendUnencryptedManageStateButton');
+        await TestSnaps.checkResultJson(
+          'retrieveManageStateUnencryptedResultSpan',
+          { items: ['23'] },
+        );
+      });
+
+      it('clears the unencrypted state', async () => {
+        await TestSnaps.tapButton('clearUnencryptedManageStateButton');
+        await TestSnaps.checkResultSpan(
+          'clearUnencryptedManageStateResultSpan',
+          'true',
+        );
+        await TestSnaps.checkResultJson(
+          'retrieveManageStateUnencryptedResultSpan',
+          { items: [] },
+        );
+      });
+    });
+  });
+});
diff --git a/e2e/specs/snaps/test-snap-network-access.spec.ts b/e2e/specs/snaps/test-snap-network-access.spec.ts
index da923c485b4..d3f69ff721c 100644
--- a/e2e/specs/snaps/test-snap-network-access.spec.ts
+++ b/e2e/specs/snaps/test-snap-network-access.spec.ts
@@ -2,9 +2,7 @@ import { FlaskBuildTests } from '../../tags';
 import { loginToApp } from '../../viewHelper';
 import FixtureBuilder from '../../framework/fixtures/FixtureBuilder';
 import { withFixtures } from '../../framework/fixtures/FixtureHelper';
-import Assertions from '../../framework/Assertions';
 import TabBarComponent from '../../pages/wallet/TabBarComponent';
-import BrowserView from '../../pages/Browser/BrowserView';
 import TestSnaps from '../../pages/Browser/TestSnaps';
 import { AnvilPort } from '../../fixtures/utils';
 import { LocalNodeType } from '../../framework';
@@ -36,7 +34,6 @@ describe(FlaskBuildTests('Network Access Snap Tests'), () => {
         // Navigate to test snaps URL once for all tests
         await TabBarComponent.tapBrowser();
         await TestSnaps.navigateToTestSnap();
-        await Assertions.expectElementToBeVisible(BrowserView.browserScreenID);
 
         await TestSnaps.installSnap('connectNetworkAccessButton');
 
diff --git a/e2e/specs/snaps/test-snap-rpc.spec.ts b/e2e/specs/snaps/test-snap-rpc.spec.ts
new file mode 100644
index 00000000000..b5d0c435926
--- /dev/null
+++ b/e2e/specs/snaps/test-snap-rpc.spec.ts
@@ -0,0 +1,53 @@
+import FixtureBuilder from '../../framework/fixtures/FixtureBuilder';
+import {
+  loadFixture,
+  startFixtureServer,
+  stopFixtureServer,
+} from '../../framework/fixtures/FixtureHelper';
+import FixtureServer from '../../framework/fixtures/FixtureServer';
+import { getFixturesServerPort } from '../../fixtures/utils';
+import TestHelpers from '../../helpers';
+import TestSnaps from '../../pages/Browser/TestSnaps';
+import TabBarComponent from '../../pages/wallet/TabBarComponent';
+import { FlaskBuildTests } from '../../tags';
+import { loginToApp } from '../../viewHelper';
+
+const fixtureServer = new FixtureServer();
+
+describe(FlaskBuildTests('Snap RPC Tests'), () => {
+  beforeAll(async () => {
+    await TestHelpers.reverseServerPort();
+    const fixture = new FixtureBuilder()
+      .withMultiSRPKeyringController()
+      .build();
+    await startFixtureServer(fixtureServer);
+    await loadFixture(fixtureServer, { fixture });
+    await TestHelpers.launchApp({
+      launchArgs: { fixtureServerPort: `${getFixturesServerPort()}` },
+    });
+    await loginToApp();
+
+    // Navigate to test snaps URL once for all tests
+    await TabBarComponent.tapBrowser();
+    await TestSnaps.navigateToTestSnap();
+  });
+
+  afterAll(async () => {
+    await stopFixtureServer(fixtureServer);
+  });
+
+  beforeEach(() => {
+    jest.setTimeout(150_000);
+  });
+
+  it('can use the cross-snap RPC endowment and produce a public key', async () => {
+    await TestSnaps.installSnap('connectBip32Button');
+    await TestSnaps.installSnap('connectJsonRpcButton');
+
+    await TestSnaps.tapButton('sendRpcButton');
+    await TestSnaps.checkResultSpan(
+      'rpcResultSpan',
+      '"0x033e98d696ae15caef75fa8dd204a7c5c08d1272b2218ba3c20feeb4c691eec366"',
+    );
+  });
+});
diff --git a/e2e/viewHelper.ts b/e2e/viewHelper.ts
index 1f513aa8b51..5e1fbd5de24 100644
--- a/e2e/viewHelper.ts
+++ b/e2e/viewHelper.ts
@@ -24,6 +24,8 @@ import ToastModal from './pages/wallet/ToastModal';
 import TestDApp from './pages/Browser/TestDApp';
 import SolanaNewFeatureSheet from './pages/wallet/SolanaNewFeatureSheet';
 import OnboardingSheet from './pages/Onboarding/OnboardingSheet';
+import Matchers from './utils/Matchers';
+import { BrowserViewSelectorsIDs } from './selectors/Browser/BrowserView.selectors';
 
 const LOCALHOST_URL = `http://localhost:${getGanachePort()}/`;
 const validAccount = Accounts.getValidAccount();
@@ -428,3 +430,28 @@ export const waitForTestDappToLoad = async () => {
 
   throw new Error('Test dapp failed to become fully interactive');
 };
+
+export const waitForTestSnapsToLoad = async () => {
+  const MAX_RETRIES = 3;
+
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      return await Assertions.expectElementToBeVisible(
+        Matchers.getElementByWebID(
+          BrowserViewSelectorsIDs.BROWSER_WEBVIEW_ID,
+          'root',
+        ),
+      );
+    } catch (error) {
+      if (attempt === MAX_RETRIES) {
+        throw new Error(
+          `Test Snaps failed to load after ${MAX_RETRIES} attempts: ${
+            error instanceof Error ? error.message : 'Unknown error'
+          }`,
+        );
+      }
+    }
+  }
+
+  throw new Error('Test Snaps failed to become fully interactive.');
+};

From 8b099cf7f0c716ec339761dcc0265ca1abc0fc6d Mon Sep 17 00:00:00 2001
From: Wei Sun <wei.sun@consensys.net>
Date: Fri, 1 Aug 2025 08:43:08 -0700
Subject: [PATCH 5/5] feat: implement Reactotron (#17780)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
React Native DevTools network tab is unstable on Android and it only
works on iOS. As an alternative, Reactotron is implemented to view API
calls on Android (also works on iOS)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: https://github.com/MetaMask/mobile-planning/issues/2245

## **Manual testing steps**

1. Install desktop Reactotron `brew install --cask reactotron`
2. Open Reactotron and refresh simulator (maybe need to rebuild)
3. Should see API calls in Timeline tab in Reactotron
4. If no connection is made on Android, run `adb reverse tcp:9090
tcp:9090`

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**
![React Native
DevTool](https://github.com/user-attachments/assets/bb40c273-c12c-4a4e-9fb3-6921ce8ecca0)

### **After**

![Reactotron](https://github.com/user-attachments/assets/0685744a-e5c5-48b6-9bd4-3f0e8a93a587)

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] 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-mobile/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.
---
 ReactotronConfig.js        |  3 +++
 docs/readme/api-logging.md |  6 +++++-
 docs/readme/debugging.md   | 26 ++++++++++++++++++++++++++
 index.js                   |  5 +++++
 package.json               |  1 +
 yarn.lock                  | 20 ++++++++++++++++++++
 6 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 ReactotronConfig.js

diff --git a/ReactotronConfig.js b/ReactotronConfig.js
new file mode 100644
index 00000000000..059efc3ee33
--- /dev/null
+++ b/ReactotronConfig.js
@@ -0,0 +1,3 @@
+import Reactotron, { networking } from 'reactotron-react-native';
+
+Reactotron.configure().use(networking()).connect();
diff --git a/docs/readme/api-logging.md b/docs/readme/api-logging.md
index 208f7ffcc95..fc10601610c 100644
--- a/docs/readme/api-logging.md
+++ b/docs/readme/api-logging.md
@@ -21,11 +21,13 @@ LOG_API_CALLS=true yarn start:android
 
 1. Open a new terminal window
 2. Run the following command:
+
 ```bash
 yarn start:api-logging-server
 ```
 
 The monitor will start and display:
+
 - The port it's running on
 - Detailed logs for all API calls including:
   - Request method and URL
@@ -53,11 +55,13 @@ The API call logging functionality is implemented using the following components
 4. The API monitor script uses `mockttp` to intercept and log all API calls
 
 When using the API monitor, you'll see detailed logs in the console showing:
+
 - All API requests with their methods, URLs, headers, and bodies
 - All API responses with their status codes, headers, and bodies
 - Pretty-formatted JSON for better readability
 
 This is particularly useful for:
+
 - Debugging API-related issues
 - Understanding the network traffic of the app
-- Verifying that API calls are being made correctly 
\ No newline at end of file
+- Verifying that API calls are being made correctly
diff --git a/docs/readme/debugging.md b/docs/readme/debugging.md
index cda2936cb61..7d8e0878426 100644
--- a/docs/readme/debugging.md
+++ b/docs/readme/debugging.md
@@ -31,3 +31,29 @@ For reference on how to use `Redux DevTools`, refer to [Redux DevTools](https://
 - Make sure the value of `webviewDebuggingEnabled` prop on the Webview component is `true`
 - Open Safari on your desktop
 - Go to the menu Develop -> [Your device] -> [Website]
+
+## Debugging Network Requests using Reactotron
+
+Reactotron is already configured in the app and can be used to monitor API calls
+
+### Install the Reactotron Desktop App
+
+```bash
+brew install --cask reactotron
+```
+
+### Start monitoring
+
+- Open Reactotron
+- Refresh simulator
+- API logs should appear under Timeline tab in Reactotron.
+
+### Troubleshooting (Android)
+
+If Reactotron isn’t picking up connections on Android, run:
+
+```bash
+adb reverse tcp:9090 tcp:9090
+```
+
+Then refresh the app again.
diff --git a/index.js b/index.js
index 775b0ae0e8c..55ec3951e61 100644
--- a/index.js
+++ b/index.js
@@ -18,6 +18,11 @@ import {
 } from './app/core/ErrorHandler';
 
 import { enableFreeze } from 'react-native-screens';
+
+if (__DEV__) {
+  require('./ReactotronConfig');
+}
+
 enableFreeze(true);
 
 // Setup Sentry
diff --git a/package.json b/package.json
index e400893a51f..a9de8e77ae6 100644
--- a/package.json
+++ b/package.json
@@ -445,6 +445,7 @@
     "react-native-webview-invoke": "^0.6.2",
     "react-native-worklets-core": "^1.6.0",
     "react-redux": "^8.1.3",
+    "reactotron-react-native": "^5.1.14",
     "readable-stream": "2.3.7",
     "redux": "^4.2.1",
     "redux-mock-store": "1.5.4",
diff --git a/yarn.lock b/yarn.lock
index 5b7b6f3b716..450e8fdca29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -28137,6 +28137,26 @@ react@18.3.1, react@^18.2.0, react@^18.3.1:
   dependencies:
     loose-envify "^1.1.0"
 
+reactotron-core-client@2.9.7:
+  version "2.9.7"
+  resolved "https://registry.yarnpkg.com/reactotron-core-client/-/reactotron-core-client-2.9.7.tgz#c1fd2842b095dbd2c7522cfc6bd59e34768038eb"
+  integrity sha512-QWd0ekjU71CQL70J87NT5f7cmIJAMVZND+YgOaaUgmgFjhiXzHrpeIWs19+IFQPVLsJr97gdi58X8Y62Hchs9w==
+  dependencies:
+    reactotron-core-contract "0.2.5"
+
+reactotron-core-contract@0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/reactotron-core-contract/-/reactotron-core-contract-0.2.5.tgz#927160c026895798bfe931bd2462fdd5d4e435f9"
+  integrity sha512-pxuXFG1jffAWQSdT0FBws+/Xvl8++6T6WrAi4g7AxIZU5FPeut2wq//0yDhDWx6lF82eAo5JTZK7zECQy45QxA==
+
+reactotron-react-native@^5.1.14:
+  version "5.1.14"
+  resolved "https://registry.yarnpkg.com/reactotron-react-native/-/reactotron-react-native-5.1.14.tgz#65d3e8ed0e1e94c9fdb84e374dd2aa455a403067"
+  integrity sha512-D4TVQ4qei4jYNyJQBs1/DDxnMrJLiYxHjrZbOziAGPr9WA0kBMZ1X7INdIR9CaJtqpw9770fgVzOyYXtayXZVg==
+  dependencies:
+    mitt "^3.0.1"
+    reactotron-core-client "2.9.7"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"