fix(webview): screen dimension fixes, tunnel fail state, cleanup (#1904)

* fix(webview): screen dimension fixes, bump euclid 1.4.0, cleanup

Set WEB_SAFE_AREA top to 0 — native shell handles status bar insets edge-to-edge. Add flex wrappers to ConfirmIdentificationScreen and VerificationResultScreen so StatusState fills viewport. Bump @selfxyz/euclid and euclid-core to 1.4.0 (edge-to-edge backgrounds, responsive animations, centered text, fixed button visibility). Delete orphaned KycMockScreen replaced by TunnelKycWrapper.

* fix(rn-sdk-test-app): gracefully skip pod install when Ruby < 3.2

The postinstall script requires Ruby 3.2+ and bundler 2.6.9 for CocoaPods. On macOS with system Ruby 2.6, this hard-failed yarn install for the entire monorepo. Now checks Ruby version first and skips with a message instead of failing.

packages/rn-sdk-test-app/scripts/postinstall.cjs

@@ -24,6 +24,15 @@ if (process.platform !== 'darwin' || isCi || process.env.SKIP_RN_SDK_TEST_APP_PO
   process.exit(0);
 }
 
+const rubyVersion = spawnSync('ruby', ['-e', 'puts RUBY_VERSION'], { encoding: 'utf8' });
+const version = (rubyVersion.stdout || '').trim();
+const [major, minor] = version.split('.').map(Number);
+
+if (!version || major < 3 || (major === 3 && minor < 2)) {
+  console.log(`[rn-sdk-test-app] Skipping iOS pod install: Ruby ${version || 'not found'} < 3.2 required. Install Ruby 3.2+ to enable.`);
+  process.exit(0);
+}
+
 const bundleCheck = spawnSync('bundle', ['check'], {
   cwd: iosDir,
   stdio: 'inherit',

packages/webview-app/package.json

@@ -20,8 +20,8 @@
     "@didit-protocol/sdk-web": "^0.1.8",
     "@scure/bip32": "^2.0.1",
     "@scure/bip39": "^1.6.0",
-    "@selfxyz/euclid": "1.3.0",
-    "@selfxyz/euclid-core": "1.3.0",
+    "@selfxyz/euclid": "1.4.0",
+    "@selfxyz/euclid-core": "1.4.0",
     "@selfxyz/mobile-sdk-alpha": "workspace:^",
     "@selfxyz/webview-bridge": "workspace:^",
     "buffer": "^6.0.3",

packages/webview-app/src/screens/onboarding/ConfirmIdentificationScreen.tsx

@@ -12,6 +12,7 @@ import type { VerificationResult } from '@selfxyz/webview-bridge';
 import { MockRegistrationFailureButton } from '../../components/MockRegistrationFailureButton';
 import { useSelfClient } from '../../providers/SelfClientProvider';
 import { useVerificationRequest } from '../../providers/VerificationRequestProvider';
+import { WEB_SAFE_AREA } from '../../utils/insets';
 
 export const ConfirmIdentificationScreen: React.FC = () => {
   const navigate = useNavigate();
@@ -56,7 +57,15 @@ export const ConfirmIdentificationScreen: React.FC = () => {
   }, [analytics, countryCode, documentType, haptic, lifecycle, navigate, nextPath, request.userId, verificationId]);
 
   return (
-    <>
+    <div
+      style={{
+        display: 'flex',
+        flex: 1,
+        minHeight: 0,
+        paddingTop: WEB_SAFE_AREA.insets.top,
+        paddingBottom: WEB_SAFE_AREA.insets.bottom,
+      }}
+    >
       <MockRegistrationFailureButton />
       <StatusState
         variant="success"
@@ -68,6 +77,6 @@ export const ConfirmIdentificationScreen: React.FC = () => {
         buttonText="Confirm"
         onButtonPress={onConfirm}
       />
-    </>
+    </div>
   );
 };

packages/webview-app/src/screens/proving/VerificationResultScreen.tsx

@@ -10,6 +10,7 @@ import { colors, StatusState, WarningOctagonIcon } from '@selfxyz/euclid';
 import type { VerificationResult } from '@selfxyz/webview-bridge';
 
 import { useSelfClient } from '../../providers/SelfClientProvider';
+import { WEB_SAFE_AREA } from '../../utils/insets';
 
 export const VerificationResultScreen: React.FC = () => {
   const navigate = useNavigate();
@@ -46,7 +47,15 @@ export const VerificationResultScreen: React.FC = () => {
   }, [analytics, haptic, lifecycle, navigate, result, resultSent]);
 
   return (
-    <>
+    <div
+      style={{
+        display: 'flex',
+        flex: 1,
+        minHeight: 0,
+        paddingTop: WEB_SAFE_AREA.insets.top,
+        paddingBottom: WEB_SAFE_AREA.insets.bottom,
+      }}
+    >
       <StatusState
         variant={success ? 'success' : 'fail'}
         title={success ? 'ID Verified' : 'Verification Failed'}
@@ -62,6 +71,6 @@ export const VerificationResultScreen: React.FC = () => {
         onButtonPress={onContinue}
         icon={success ? undefined : <WarningOctagonIcon size={64} color={colors.red500} />}
       />
-    </>
+    </div>
   );
 };

packages/webview-app/src/screens/tunnel/KycMockScreen.tsx

@@ -1,34 +0,0 @@
-// SPDX-FileCopyrightText: 2025-2026 Social Connect Labs, Inc.
-// SPDX-License-Identifier: BUSL-1.1
-// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
-
-import type React from 'react';
-import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { Button } from '@selfxyz/euclid';
-
-export const KycMockScreen: React.FC = () => {
-  const navigate = useNavigate();
-
-  const onContinue = useCallback(() => {
-    navigate('/tunnel/proof/receipt');
-  }, [navigate]);
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100%',
-        gap: 32,
-        padding: 24,
-      }}
-    >
-      <h1 style={{ margin: 0, fontSize: 28 }}>KYC mock</h1>
-      <Button variant="primary-no-icon" text="Continue" onPress={onContinue} fullWidth />
-    </div>
-  );
-};

packages/webview-app/src/utils/insets.ts

@@ -5,4 +5,4 @@ import { createSafeAreaProps } from '@selfxyz/euclid';
  * In a native shell, these would come from the OS safe area APIs.
  * For browser preview, we use small fixed values for visual padding.
  */
-export const WEB_SAFE_AREA = createSafeAreaProps({ top: 16, bottom: 16 });
+export const WEB_SAFE_AREA = createSafeAreaProps({ top: 0, bottom: 16 });

yarn.lock

@@ -10809,26 +10809,26 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@selfxyz/euclid-core@npm:1.3.0, @selfxyz/euclid-core@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "@selfxyz/euclid-core@npm:1.3.0"
+"@selfxyz/euclid-core@npm:1.4.0, @selfxyz/euclid-core@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@selfxyz/euclid-core@npm:1.4.0"
   peerDependencies:
     react: ">=18.2.0"
-  checksum: 10c0/346831b2e2128014a1143f2af079229c40bfe64a622ef54600f0d927a8b8f78e8ad624fd4805488e03fbc2504171313fcc62c4123970afa30597c7380c817c3b
+  checksum: 10c0/ab08282ee623ae120e7c0e83889739775d7f2289d5d662026c17ec4e3f9fd398c91ab79e98fab1198e8d9b6ccecbea4fd2576acb3d62d20481350e28bfd8cb2a
   languageName: node
   linkType: hard
 
-"@selfxyz/euclid@npm:1.3.0":
-  version: 1.3.0
-  resolution: "@selfxyz/euclid@npm:1.3.0"
+"@selfxyz/euclid@npm:1.4.0":
+  version: 1.4.0
+  resolution: "@selfxyz/euclid@npm:1.4.0"
   dependencies:
     "@lottiefiles/dotlottie-react": "npm:^0.18.4"
-    "@selfxyz/euclid-core": "npm:^1.3.0"
+    "@selfxyz/euclid-core": "npm:^1.4.0"
     lottie-react: "npm:^2.4.1"
   peerDependencies:
     react: ">=18.2.0"
     react-dom: ">=18.2.0"
-  checksum: 10c0/056e53cfa6566056fc107fb553157de586dcdd384eedf101316b11b08d39d5800226321d53e119e38160977ef346632f6db16c27ad67f003d0bf085aed8a0f48
+  checksum: 10c0/fd560c7b7a2f1fcb7e69d85d3f34b6c7f9c2d711a634c18cc034566b9b3f8b2e353acdab60a9233326688ef055cf4ab6ff16d3d6a7912c8876e1d77559717f48
   languageName: node
   linkType: hard
 
@@ -11288,8 +11288,8 @@ __metadata:
     "@didit-protocol/sdk-web": "npm:^0.1.8"
     "@scure/bip32": "npm:^2.0.1"
     "@scure/bip39": "npm:^1.6.0"
-    "@selfxyz/euclid": "npm:1.3.0"
-    "@selfxyz/euclid-core": "npm:1.3.0"
+    "@selfxyz/euclid": "npm:1.4.0"
+    "@selfxyz/euclid-core": "npm:1.4.0"
     "@selfxyz/mobile-sdk-alpha": "workspace:^"
     "@selfxyz/webview-bridge": "workspace:^"
     "@testing-library/react": "npm:^14.1.2"