fix: Add delay in checkPermissions for iOS to prevent UI crash (#14602)

## **Description**

This PR addresses a UI crash on iOS in `AccountConnect.tsx` caused by a
race condition in `permissionsController.getPermissions()`.

- Added `await wait(100)` in `checkPermissions` for iOS to resolve the
race condition.

#### Debugging Notes
This issue was tricky to debug as it occurred more frequently in live
DEV environments. Eventually, I tracked it down by launching the app via
Xcode instead of the regular React Native CLI, which provided access to
all native logs and revealed the race condition.

## **Related issues**

Fixes:

## **Manual testing steps**

- Verified on iOS: UI crash no longer occurs.
- Confirmed no impact on Android.

## **Screenshots/Recordings**

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

### **Before**

![image](https://github.com/user-attachments/assets/fb7f2a29-0422-4e9c-adfe-1eea2a611861)

### **After**
- normal connection flow


## **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**

- [ ] 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.

Author: abretonc7s

app/core/SDKConnect/handlers/checkPermissions.test.ts

@@ -1,4 +1,31 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+
+// Mock Platform first, before any imports
+jest.mock('react-native/Libraries/Utilities/Platform', () => {
+  const Platform = {
+    OS: 'ios',
+    select: jest.fn()
+  };
+  return Platform;
+});
+
+// Mock wait util - change this part
+jest.mock('../utils/wait.util', () => {
+  const mockWait = jest.fn().mockResolvedValue(undefined);
+  return {
+    wait: mockWait,
+    waitForCondition: jest.fn(),
+    waitForKeychainUnlocked: jest.fn().mockResolvedValue(true),
+    waitForConnectionReadiness: jest.fn(),
+    waitForEmptyRPCQueue: jest.fn(),
+    waitForUserLoggedIn: jest.fn(),
+    waitForAndroidServiceBinding: jest.fn(),
+  };
+});
+
+// Import wait after mocking
+import { wait } from '../utils/wait.util';
+import { Platform } from 'react-native';
 import { ApprovalController } from '@metamask/approval-controller';
 import { PreferencesController } from '@metamask/preferences-controller';
 import Engine from '../../Engine';
@@ -8,6 +35,7 @@ import { PermissionController } from '@metamask/permission-controller';
 import { getPermittedAccounts } from '../../../core/Permissions';
 import { KeyringController } from '@metamask/keyring-controller';
 
+// Rest of the mocks
 jest.mock('../Connection', () => ({
   RPC_METHODS: jest.requireActual('../Connection').RPC_METHODS,
 }));
@@ -55,6 +83,8 @@ describe('checkPermissions', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    // Reset platform to iOS by default
+    Platform.OS = 'ios';
     jest.useFakeTimers().setSystemTime(currentTime);
     mockGetPermittedAccounts.mockResolvedValue([]);
 
@@ -108,15 +138,13 @@ describe('checkPermissions', () => {
 
   it('should return true if permitted accounts exist', async () => {
     mockGetPermittedAccounts.mockResolvedValue(['0x123']);
-
     const result = await checkPermissions({ connection, engine });
     expect(result).toBe(true);
   });
 
   it('should return false if no permitted accounts exist and no approval promise', async () => {
     mockGetPermittedAccounts.mockResolvedValue([]);
     permissionController.getPermission = jest.fn().mockReturnValue(null);
-
     const result = await checkPermissions({ connection, engine });
     expect(result).toBe(false);
   });
@@ -135,4 +163,28 @@ describe('checkPermissions', () => {
     );
     expect(result).toBe(true);
   });
+
+  describe('platform specific behavior', () => {
+    it('should add delay on iOS after permission approval', async () => {
+      Platform.OS = 'ios';
+      mockGetPermittedAccounts.mockResolvedValue([]);
+      permissionController.getPermission = jest.fn().mockReturnValue(null);
+      requestPermissions.mockResolvedValue({});
+      mockGetPermittedAccounts.mockResolvedValueOnce([]).mockResolvedValueOnce(['0x123']);
+
+      await checkPermissions({ connection, engine });
+      expect(wait).toHaveBeenCalledWith(100);
+    });
+
+    it('should not add delay on Android after permission approval', async () => {
+      Platform.OS = 'android';
+      mockGetPermittedAccounts.mockResolvedValue([]);
+      permissionController.getPermission = jest.fn().mockReturnValue(null);
+      requestPermissions.mockResolvedValue({});
+      mockGetPermittedAccounts.mockResolvedValueOnce([]).mockResolvedValueOnce(['0x123']);
+
+      await checkPermissions({ connection, engine });
+      expect(wait).not.toHaveBeenCalledWith(100);
+    });
+  });
 });

app/core/SDKConnect/handlers/checkPermissions.ts

@@ -11,6 +11,7 @@ import {
   waitForCondition,
   waitForKeychainUnlocked,
 } from '../utils/wait.util';
+import { Platform } from 'react-native';
 
 // TODO: should be more generic and be used in wallet connect and android service as well
 export const checkPermissions = async ({
@@ -111,6 +112,15 @@ export const checkPermissions = async ({
     }
 
     const res = await connection.approvalPromise;
+    if (Platform.OS === 'ios') {
+      // A UI crash happening on ios from AccountConnect.tsx which is triggered by permissionsController.getPermission().
+      // Seems to be a race condition between the connect being accepted and the approvalPromise being resolved.
+      // Adding a small delay seems to fix the issue.
+      // *** Assertion failure in -[RCTNativeAnimatedNodesManager disconnectAnimatedNodes:childTag:](), metamask-mobile/node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m:142
+      // Exception thrown while executing UI block: 'childNode' is a required parameter
+      // 0x14146e100 - GPUProcessProxy::gpuProcessExited: reason=IdleExit
+      await wait(100);
+    }
     const accounts = await getPermittedAccounts(connection.channelId);
     DevLogger.log(`checkPermissions approvalPromise completed`, res);
     return accounts.length > 0;