From fc82b6b2b3871f5dad3303a3daa663d822054ee5 Mon Sep 17 00:00:00 2001
From: Aaron DeRuvo <aaron.deruvo@clabs.co>
Date: Tue, 9 Dec 2025 12:56:05 +0100
Subject: [PATCH] Prepares app for Euclid (#1473)

* setup IS_EUCLID build variable for conditionally using euclid desgins
create a headless header that only handles the status bar, for the new screens since they manage their own
make sure new screens get proper insets
add recoveryphrase 3.0
fix country picker



* this lint runs twice. once in repo wide lint and once here. so lets just run once to save resources



Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .github/workflows/mobile-bundle-analysis.yml  |  1 +
 .github/workflows/mobile-ci.yml               |  5 +-
 .github/workflows/mobile-deploy.yml           |  1 +
 app/babel.config.cjs                          |  5 ++
 app/jest.config.cjs                           |  2 +-
 app/package.json                              |  4 +-
 app/scripts/bundle-analyze-ci.cjs             |  4 +-
 .../navbar/HeadlessNavForEuclid.tsx           | 17 ++++
 app/src/hooks/useSafeAreaInsets.ts            | 16 ++++
 app/src/navigation/account.ts                 | 22 +++--
 app/src/navigation/documents.ts               | 15 +++-
 .../settings/ShowRecoveryPhraseScreen.tsx     | 78 +++++++++++++++--
 .../selection/CountryPickerScreen.tsx         | 19 ++++-
 app/src/utils/devUtils.ts                     |  1 +
 app/tests/src/hooks/useModal.test.ts          |  1 +
 .../src/integrations/nfc/nfcScanner.test.ts   | 83 ++++++++++++++++++-
 app/tests/src/navigation/index.test.ts        |  4 +-
 packages/mobile-sdk-alpha/package.json        |  2 +-
 .../onboarding/country-picker-screen.tsx      |  9 +-
 .../src/screens/CountrySelection.tsx          |  2 +-
 yarn.lock                                     | 19 +++--
 21 files changed, 273 insertions(+), 37 deletions(-)
 create mode 100644 app/src/components/navbar/HeadlessNavForEuclid.tsx
 create mode 100644 app/src/hooks/useSafeAreaInsets.ts

diff --git a/.github/workflows/mobile-bundle-analysis.yml b/.github/workflows/mobile-bundle-analysis.yml
index 198e572e0..efee6c5f4 100644
--- a/.github/workflows/mobile-bundle-analysis.yml
+++ b/.github/workflows/mobile-bundle-analysis.yml
@@ -5,6 +5,7 @@ env:
   JAVA_VERSION: 17
   WORKSPACE: ${{ github.workspace }}
   APP_PATH: ${{ github.workspace }}/app
+  NODE_ENV: "production"
 
 on:
   pull_request:
diff --git a/.github/workflows/mobile-ci.yml b/.github/workflows/mobile-ci.yml
index d4c7d060c..0f1fe3c19 100644
--- a/.github/workflows/mobile-ci.yml
+++ b/.github/workflows/mobile-ci.yml
@@ -90,9 +90,6 @@ jobs:
       - name: Check App Types
         run: yarn types
         working-directory: ./app
-      - name: Check license headers
-        run: node scripts/check-license-headers.mjs --check
-        working-directory: ./
 
   test:
     runs-on: ubuntu-latest
@@ -190,6 +187,8 @@ jobs:
         env:
           # Increase Node.js memory to prevent hermes-parser WASM memory errors
           NODE_OPTIONS: --max-old-space-size=4096
+          # Override production NODE_ENV for tests - React's production build doesn't include testing utilities
+          NODE_ENV: test
         run: |
           # Final verification from app directory perspective
           echo "Final verification before running tests (from app directory)..."
diff --git a/.github/workflows/mobile-deploy.yml b/.github/workflows/mobile-deploy.yml
index bd63c4e15..4ac61e8f2 100644
--- a/.github/workflows/mobile-deploy.yml
+++ b/.github/workflows/mobile-deploy.yml
@@ -31,6 +31,7 @@ name: Mobile Deploy
 env:
   # Build environment versions
   RUBY_VERSION: 3.2
+  NODE_ENV: "production"
   JAVA_VERSION: 17
   ANDROID_API_LEVEL: 35
   ANDROID_NDK_VERSION: 27.0.12077973
diff --git a/app/babel.config.cjs b/app/babel.config.cjs
index 44824a90e..f0861d392 100644
--- a/app/babel.config.cjs
+++ b/app/babel.config.cjs
@@ -26,4 +26,9 @@ module.exports = {
       },
     ],
   ],
+  env: {
+    production: {
+      plugins: ['transform-remove-console'],
+    },
+  },
 };
diff --git a/app/jest.config.cjs b/app/jest.config.cjs
index 554f36eca..a7d19eb81 100644
--- a/app/jest.config.cjs
+++ b/app/jest.config.cjs
@@ -16,7 +16,7 @@ module.exports = {
     'node',
   ],
   transformIgnorePatterns: [
-    'node_modules/(?!(react-native|@react-native|@react-navigation|@react-native-community|@segment/analytics-react-native|@openpassport|react-native-keychain|react-native-check-version|react-native-nfc-manager|react-native-passport-reader|react-native-gesture-handler|uuid|@stablelib|@react-native-google-signin|react-native-cloud-storage|@react-native-clipboard|@react-native-firebase|@selfxyz|@sentry|@anon-aadhaar|react-native-svg|react-native-svg-circle-country-flags)/)',
+    'node_modules/(?!(react-native|@react-native|@react-navigation|@react-native-community|@segment/analytics-react-native|@openpassport|react-native-keychain|react-native-check-version|react-native-nfc-manager|react-native-passport-reader|react-native-gesture-handler|uuid|@stablelib|@react-native-google-signin|react-native-cloud-storage|@react-native-clipboard|@react-native-firebase|@selfxyz|@sentry|@anon-aadhaar|react-native-svg|react-native-svg-circle-country-flags|react-native-blur-effect)/)',
   ],
   setupFiles: ['<rootDir>/jest.setup.js'],
   testMatch: [
diff --git a/app/package.json b/app/package.json
index c973651a3..041d09f59 100644
--- a/app/package.json
+++ b/app/package.json
@@ -58,7 +58,7 @@
     "sync-versions": "bundle exec fastlane ios sync_version && bundle exec fastlane android sync_version",
     "tag:release": "node scripts/tag.cjs release",
     "tag:remove": "node scripts/tag.cjs remove",
-    "test": "yarn build:deps && yarn jest:run --passWithNoTests && node --test scripts/tests/*.cjs",
+    "test": "yarn jest:run --passWithNoTests && node --test scripts/tests/*.cjs",
     "test:build": "yarn build:deps && yarn types && node ./scripts/bundle-analyze-ci.cjs ios && yarn test",
     "test:ci": "yarn jest:run --passWithNoTests && node --test scripts/tests/*.cjs",
     "test:coverage": "yarn jest:run --coverage --passWithNoTests",
@@ -105,6 +105,7 @@
     "@segment/analytics-react-native": "^2.21.2",
     "@segment/sovran-react-native": "^1.1.3",
     "@selfxyz/common": "workspace:^",
+    "@selfxyz/euclid": "^0.6.0",
     "@selfxyz/mobile-sdk-alpha": "workspace:^",
     "@sentry/react": "^9.32.0",
     "@sentry/react-native": "7.0.1",
@@ -209,6 +210,7 @@
     "@typescript-eslint/parser": "^8.39.0",
     "@vitejs/plugin-react-swc": "^3.10.2",
     "babel-plugin-module-resolver": "^5.0.2",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "constants-browserify": "^1.0.0",
     "dompurify": "^3.2.6",
     "eslint": "^8.57.0",
diff --git a/app/scripts/bundle-analyze-ci.cjs b/app/scripts/bundle-analyze-ci.cjs
index 914cf6afd..f4f7dbe72 100755
--- a/app/scripts/bundle-analyze-ci.cjs
+++ b/app/scripts/bundle-analyze-ci.cjs
@@ -17,8 +17,8 @@ if (!platform || !['android', 'ios'].includes(platform)) {
 // Bundle size thresholds in MB - easy to update!
 const BUNDLE_THRESHOLDS_MB = {
   // TODO: fix temporary bundle bump
-  ios: 44,
-  android: 44,
+  ios: 45,
+  android: 45,
 };
 
 function formatBytes(bytes) {
diff --git a/app/src/components/navbar/HeadlessNavForEuclid.tsx b/app/src/components/navbar/HeadlessNavForEuclid.tsx
new file mode 100644
index 000000000..d2d651717
--- /dev/null
+++ b/app/src/components/navbar/HeadlessNavForEuclid.tsx
@@ -0,0 +1,17 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import { SystemBars } from 'react-native-edge-to-edge';
+import type { NativeStackHeaderProps } from '@react-navigation/native-stack';
+
+export const HeadlessNavForEuclid = (props: NativeStackHeaderProps) => {
+  return (
+    <>
+      <SystemBars
+        style={props.options.statusBarStyle}
+        hidden={props.options.statusBarHidden}
+      />
+    </>
+  );
+};
diff --git a/app/src/hooks/useSafeAreaInsets.ts b/app/src/hooks/useSafeAreaInsets.ts
new file mode 100644
index 000000000..5be2966a8
--- /dev/null
+++ b/app/src/hooks/useSafeAreaInsets.ts
@@ -0,0 +1,16 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import { Platform } from 'react-native';
+import { useSafeAreaInsets as useSafeAreaInsetsOriginal } from 'react-native-safe-area-context';
+
+// gives bare minimums in case safe area doesnt provide for example space for status bar icons.
+export function useSafeAreaInsets() {
+  const insets = useSafeAreaInsetsOriginal();
+  const minimum = Platform.select({ ios: 54, android: 26, web: 48 });
+  return {
+    ...insets,
+    top: Math.max(insets.top, minimum || 0),
+  };
+}
diff --git a/app/src/navigation/account.ts b/app/src/navigation/account.ts
index be0dd10d2..7b1656dd9 100644
--- a/app/src/navigation/account.ts
+++ b/app/src/navigation/account.ts
@@ -10,6 +10,7 @@ import {
   white,
 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
 
+import { HeadlessNavForEuclid } from '@/components/navbar/HeadlessNavForEuclid';
 import AccountRecoveryChoiceScreen from '@/screens/account/recovery/AccountRecoveryChoiceScreen';
 import AccountRecoveryScreen from '@/screens/account/recovery/AccountRecoveryScreen';
 import DocumentDataNotFoundScreen from '@/screens/account/recovery/DocumentDataNotFoundScreen';
@@ -17,6 +18,7 @@ import RecoverWithPhraseScreen from '@/screens/account/recovery/RecoverWithPhras
 import CloudBackupScreen from '@/screens/account/settings/CloudBackupScreen';
 import SettingsScreen from '@/screens/account/settings/SettingsScreen';
 import ShowRecoveryPhraseScreen from '@/screens/account/settings/ShowRecoveryPhraseScreen';
+import { IS_EUCLID_ENABLED } from '@/utils/devUtils';
 
 const accountScreens = {
   AccountRecovery: {
@@ -79,14 +81,22 @@ const accountScreens = {
       screens: {},
     },
   },
+
   ShowRecoveryPhrase: {
     screen: ShowRecoveryPhraseScreen,
-    options: {
-      title: 'Recovery Phrase',
-      headerStyle: {
-        backgroundColor: white,
-      },
-    } as NativeStackNavigationOptions,
+    options: IS_EUCLID_ENABLED
+      ? ({
+          headerShown: true,
+          header: HeadlessNavForEuclid,
+          statusBarStyle: ShowRecoveryPhraseScreen.statusBarStyle,
+          statusBarHidden: ShowRecoveryPhraseScreen.statusBarHidden,
+        } as NativeStackNavigationOptions)
+      : ({
+          title: 'Recovery Phrase',
+          headerStyle: {
+            backgroundColor: white,
+          },
+        } as NativeStackNavigationOptions),
   },
 };
 
diff --git a/app/src/navigation/documents.ts b/app/src/navigation/documents.ts
index 6d01ae365..518290605 100644
--- a/app/src/navigation/documents.ts
+++ b/app/src/navigation/documents.ts
@@ -7,6 +7,7 @@ import type { NativeStackNavigationOptions } from '@react-navigation/native-stac
 import { black, white } from '@selfxyz/mobile-sdk-alpha/constants/colors';
 
 import { AadhaarNavBar, IdDetailsNavBar } from '@/components/navbar';
+import { HeadlessNavForEuclid } from '@/components/navbar/HeadlessNavForEuclid';
 import AadhaarUploadedSuccessScreen from '@/screens/documents/aadhaar/AadhaarUploadedSuccessScreen';
 import AadhaarUploadErrorScreen from '@/screens/documents/aadhaar/AadhaarUploadErrorScreen';
 import AadhaarUploadScreen from '@/screens/documents/aadhaar/AadhaarUploadScreen';
@@ -22,6 +23,7 @@ import ConfirmBelongingScreen from '@/screens/documents/selection/ConfirmBelongi
 import CountryPickerScreen from '@/screens/documents/selection/CountryPickerScreen';
 import DocumentOnboardingScreen from '@/screens/documents/selection/DocumentOnboardingScreen';
 import IDPickerScreen from '@/screens/documents/selection/IDPickerScreen';
+import { IS_EUCLID_ENABLED } from '@/utils/devUtils';
 
 const documentsScreens = {
   DocumentCamera: {
@@ -75,9 +77,16 @@ const documentsScreens = {
   },
   CountryPicker: {
     screen: CountryPickerScreen,
-    options: {
-      headerShown: false,
-    } as NativeStackNavigationOptions,
+    options: IS_EUCLID_ENABLED
+      ? ({
+          header: HeadlessNavForEuclid,
+          statusBarHidden: CountryPickerScreen.statusBar?.hidden,
+          statusBarStyle: CountryPickerScreen.statusBar?.style,
+          headerShown: true,
+        } as NativeStackNavigationOptions)
+      : {
+          headerShown: false,
+        },
   },
   IDPicker: {
     screen: IDPickerScreen,
diff --git a/app/src/screens/account/settings/ShowRecoveryPhraseScreen.tsx b/app/src/screens/account/settings/ShowRecoveryPhraseScreen.tsx
index dcfec766d..5d74f71a9 100644
--- a/app/src/screens/account/settings/ShowRecoveryPhraseScreen.tsx
+++ b/app/src/screens/account/settings/ShowRecoveryPhraseScreen.tsx
@@ -2,21 +2,85 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
+import Clipboard from '@react-native-clipboard/clipboard';
 
+import type { RecoveryPhraseVariant } from '@selfxyz/euclid';
+import { RecoveryPhraseScreen } from '@selfxyz/euclid';
+import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 import { Description } from '@selfxyz/mobile-sdk-alpha/components';
 
 import Mnemonic from '@/components/Mnemonic';
 import useMnemonic from '@/hooks/useMnemonic';
+import { useSafeAreaInsets } from '@/hooks/useSafeAreaInsets';
 import { ExpandableBottomLayout } from '@/layouts/ExpandableBottomLayout';
+import { useSettingStore } from '@/stores/settingStore';
+import { IS_EUCLID_ENABLED } from '@/utils/devUtils';
 
-const ShowRecoveryPhraseScreen: React.FC = () => {
+function useCopyRecoveryPhrase(mnemonic: string[] | undefined) {
+  const [copied, setCopied] = React.useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const onCopy = useCallback(() => {
+    if (!mnemonic) return;
+    Clipboard.setString(mnemonic.join(' '));
+    setCopied(true);
+
+    // Clear any existing timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    // Set new timeout and store its ID
+    timeoutRef.current = setTimeout(() => setCopied(false), 2500);
+  }, [mnemonic]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return { copied, onCopy };
+}
+
+const ShowRecoveryPhraseScreen: React.FC & {
+  statusBarStyle: string;
+  statusBarHidden: boolean;
+} = () => {
   const { mnemonic, loadMnemonic } = useMnemonic();
+  const self = useSelfClient();
+  const { copied, onCopy } = useCopyRecoveryPhrase(mnemonic);
+  const { setHasViewedRecoveryPhrase } = useSettingStore();
 
-  const onRevealWords = useCallback(async () => {
+  const onReveal = useCallback(async () => {
     await loadMnemonic();
-  }, [loadMnemonic]);
+    setHasViewedRecoveryPhrase(true);
+  }, [loadMnemonic, setHasViewedRecoveryPhrase]);
 
+  const insets = useSafeAreaInsets();
+  if (IS_EUCLID_ENABLED) {
+    const variant: RecoveryPhraseVariant = !mnemonic
+      ? 'hidden'
+      : copied
+        ? 'copied'
+        : 'revealed';
+    return (
+      <>
+        <RecoveryPhraseScreen
+          insets={insets}
+          onReveal={onReveal}
+          words={mnemonic}
+          onBack={self.goBack}
+          variant={variant}
+          onCopy={onCopy}
+        />
+      </>
+    );
+  }
   return (
     <ExpandableBottomLayout.Layout backgroundColor="white">
       <ExpandableBottomLayout.BottomSection
@@ -24,7 +88,7 @@ const ShowRecoveryPhraseScreen: React.FC = () => {
         justifyContent="center"
         gap={20}
       >
-        <Mnemonic words={mnemonic} onRevealWords={onRevealWords} />
+        <Mnemonic words={mnemonic} onRevealWords={loadMnemonic} />
         <Description>
           This phrase is the only way to recover your account. Keep it secret,
           keep it safe.
@@ -35,3 +99,7 @@ const ShowRecoveryPhraseScreen: React.FC = () => {
 };
 
 export default ShowRecoveryPhraseScreen;
+
+ShowRecoveryPhraseScreen.statusBarHidden =
+  RecoveryPhraseScreen.statusBar.hidden;
+ShowRecoveryPhraseScreen.statusBarStyle = RecoveryPhraseScreen.statusBar.style;
diff --git a/app/src/screens/documents/selection/CountryPickerScreen.tsx b/app/src/screens/documents/selection/CountryPickerScreen.tsx
index 0ab66bf3e..57e358ff9 100644
--- a/app/src/screens/documents/selection/CountryPickerScreen.tsx
+++ b/app/src/screens/documents/selection/CountryPickerScreen.tsx
@@ -2,8 +2,21 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
+import type React from 'react';
+
 import SDKCountryPickerScreen from '@selfxyz/mobile-sdk-alpha/onboarding/country-picker-screen';
 
-export default function CountryPickerScreen() {
-  return <SDKCountryPickerScreen />;
-}
+import { useSafeAreaInsets } from '@/hooks/useSafeAreaInsets';
+
+type CountryPickerScreenComponent = React.FC & {
+  statusBar: typeof SDKCountryPickerScreen.statusBar;
+};
+
+const CountryPickerScreen: CountryPickerScreenComponent = () => {
+  const insets = useSafeAreaInsets();
+  return <SDKCountryPickerScreen insets={insets} />;
+};
+
+CountryPickerScreen.statusBar = SDKCountryPickerScreen.statusBar;
+
+export default CountryPickerScreen;
diff --git a/app/src/utils/devUtils.ts b/app/src/utils/devUtils.ts
index d0c958b50..863720cf9 100644
--- a/app/src/utils/devUtils.ts
+++ b/app/src/utils/devUtils.ts
@@ -8,3 +8,4 @@
  * Use this constant instead of checking __DEV__ directly throughout the codebase.
  */
 export const IS_DEV_MODE = typeof __DEV__ !== 'undefined' && __DEV__;
+export const IS_EUCLID_ENABLED = IS_DEV_MODE; // just in case we forgot to turn it off before pushing to prod.
diff --git a/app/tests/src/hooks/useModal.test.ts b/app/tests/src/hooks/useModal.test.ts
index 48fd02729..67fe66a22 100644
--- a/app/tests/src/hooks/useModal.test.ts
+++ b/app/tests/src/hooks/useModal.test.ts
@@ -5,6 +5,7 @@
 import { act, renderHook } from '@testing-library/react-native';
 
 import { useModal } from '@/hooks/useModal';
+import CountryPickerScreen from '@/screens/documents/selection/CountryPickerScreen';
 import { getModalCallbacks } from '@/utils/modalCallbackRegistry';
 
 describe('useModal', () => {
diff --git a/app/tests/src/integrations/nfc/nfcScanner.test.ts b/app/tests/src/integrations/nfc/nfcScanner.test.ts
index 9fed64ff4..1b70a5fc3 100644
--- a/app/tests/src/integrations/nfc/nfcScanner.test.ts
+++ b/app/tests/src/integrations/nfc/nfcScanner.test.ts
@@ -45,8 +45,45 @@ describe('parseScanResponse', () => {
       passportPhoto: 'photo',
       documentSigningCertificate: JSON.stringify({ PEM: 'CERT' }),
     });
-
+    expect(response).toMatchInlineSnapshot(
+      `"{"dataGroupHashes":"{\\"DG1\\":{\\"sodHash\\":\\"abcd\\"},\\"DG2\\":{\\"sodHash\\":\\"1234\\"}}","eContentBase64":"ZWM=","signedAttributes":"c2E=","passportMRZ":"P<UTOERIKSSON<<ANNA<MARIA<<<<<<<<<<<<<<<<<<<L898902C<3UTO6908061F9406236ZE184226B<<<<<14","signatureBase64":"AQI=","dataGroupsPresent":[1,2],"passportPhoto":"photo","documentSigningCertificate":"{\\"PEM\\":\\"CERT\\"}"}"`,
+    );
     const result = parseScanResponse(response);
+    console.log('Parsed Result:', result);
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "dg1Hash": [
+          171,
+          205,
+        ],
+        "dg2Hash": [
+          18,
+          52,
+        ],
+        "dgPresents": [
+          1,
+          2,
+        ],
+        "documentCategory": "passport",
+        "documentType": "passport",
+        "dsc": "CERT",
+        "eContent": [
+          101,
+          99,
+        ],
+        "encryptedDigest": [
+          1,
+          2,
+        ],
+        "mock": false,
+        "mrz": "P<UTOERIKSSON<<ANNA<MARIA<<<<<<<<<<<<<<<<<<<L898902C<3UTO6908061F9406236ZE184226B<<<<<14",
+        "parsed": false,
+        "signedAttr": [
+          115,
+          97,
+        ],
+      }
+    `);
     expect(result.mrz).toBe(mrz);
     expect(result.documentType).toBe('passport');
     // 'abcd' in hex: ab = 171, cd = 205
@@ -71,8 +108,50 @@ describe('parseScanResponse', () => {
       // Android format: '1' and '2' are hex strings, not arrays
       dataGroupHashes: JSON.stringify({ '1': 'abcd', '2': '1234' }),
     } as any;
-
+    expect(response).toMatchInlineSnapshot(`
+      {
+        "dataGroupHashes": "{"1":"abcd","2":"1234"}",
+        "documentSigningCertificate": "CERT",
+        "eContent": "[4,5]",
+        "encapContent": "[8,9]",
+        "encryptedDigest": "[6,7]",
+        "mrz": "P<UTOERIKSSON<<ANNA<MARIA<<<<<<<<<<<<<<<<<<<L898902C<3UTO6908061F9406236ZE184226B<<<<<14",
+      }
+    `);
     const result = parseScanResponse(response);
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "dg1Hash": [
+          171,
+          205,
+        ],
+        "dg2Hash": [
+          18,
+          52,
+        ],
+        "dgPresents": [
+          1,
+          2,
+        ],
+        "documentCategory": "passport",
+        "documentType": "passport",
+        "dsc": "-----BEGIN CERTIFICATE-----CERT-----END CERTIFICATE-----",
+        "eContent": [
+          8,
+          9,
+        ],
+        "encryptedDigest": [
+          6,
+          7,
+        ],
+        "mock": false,
+        "mrz": "P<UTOERIKSSON<<ANNA<MARIA<<<<<<<<<<<<<<<<<<<L898902C<3UTO6908061F9406236ZE184226B<<<<<14",
+        "signedAttr": [
+          4,
+          5,
+        ],
+      }
+    `);
     expect(result.documentType).toBe('passport');
     expect(result.mrz).toBe(mrz);
     // 'abcd' in hex: ab = 171, cd = 205
diff --git a/app/tests/src/navigation/index.test.ts b/app/tests/src/navigation/index.test.ts
index ec10f1918..4897dd12c 100644
--- a/app/tests/src/navigation/index.test.ts
+++ b/app/tests/src/navigation/index.test.ts
@@ -19,7 +19,9 @@ jest.mock('@/navigation', () => {
     // Documents screens
     IDPicker: {},
     IdDetails: {},
-    CountryPicker: {},
+    CountryPicker: {
+      statusBar: { hidden: true, style: 'dark' },
+    },
     DocumentCamera: {},
     DocumentCameraTrouble: {},
     DocumentDataInfo: {},
diff --git a/packages/mobile-sdk-alpha/package.json b/packages/mobile-sdk-alpha/package.json
index 3fe37c428..c89429b80 100644
--- a/packages/mobile-sdk-alpha/package.json
+++ b/packages/mobile-sdk-alpha/package.json
@@ -151,7 +151,7 @@
   "dependencies": {
     "@babel/runtime": "^7.28.3",
     "@selfxyz/common": "workspace:^",
-    "@selfxyz/euclid": "^0.4.1",
+    "@selfxyz/euclid": "^0.6.0",
     "@xstate/react": "^5.0.5",
     "node-forge": "^1.3.1",
     "react-native-nfc-manager": "^3.17.1",
diff --git a/packages/mobile-sdk-alpha/src/flows/onboarding/country-picker-screen.tsx b/packages/mobile-sdk-alpha/src/flows/onboarding/country-picker-screen.tsx
index 32ff30b05..adc097e8e 100644
--- a/packages/mobile-sdk-alpha/src/flows/onboarding/country-picker-screen.tsx
+++ b/packages/mobile-sdk-alpha/src/flows/onboarding/country-picker-screen.tsx
@@ -5,7 +5,7 @@
 import { useCallback, useState } from 'react';
 
 import { commonNames } from '@selfxyz/common/constants/countries';
-import { CountryPickerScreen as CountryPickerUI } from '@selfxyz/euclid';
+import { CountryPickerScreen as CountryPickerUI, type SafeArea } from '@selfxyz/euclid';
 
 import { RoundFlag } from '../../components';
 import { useSelfClient } from '../../context';
@@ -13,7 +13,9 @@ import { useCountries } from '../../documents/useCountries';
 import { buttonTap } from '../../haptic';
 import { SdkEvents } from '../../types/events';
 
-const CountryPickerScreen: React.FC = () => {
+const CountryPickerScreen: React.FC<SafeArea> & { statusBar: typeof CountryPickerUI.statusBar } = ({
+  insets,
+}: SafeArea) => {
   const selfClient = useSelfClient();
 
   const [searchValue, setSearchValue] = useState('');
@@ -60,6 +62,7 @@ const CountryPickerScreen: React.FC = () => {
 
   return (
     <CountryPickerUI
+      insets={insets}
       isLoading={loading}
       countries={countryList}
       onCountrySelect={onCountrySelect}
@@ -75,5 +78,5 @@ const CountryPickerScreen: React.FC = () => {
   );
 };
 CountryPickerScreen.displayName = 'CountryPickerScreen';
-
+CountryPickerScreen.statusBar = CountryPickerUI.statusBar;
 export default CountryPickerScreen;
diff --git a/packages/mobile-sdk-demo/src/screens/CountrySelection.tsx b/packages/mobile-sdk-demo/src/screens/CountrySelection.tsx
index 8e36fa7b1..6d713a358 100644
--- a/packages/mobile-sdk-demo/src/screens/CountrySelection.tsx
+++ b/packages/mobile-sdk-demo/src/screens/CountrySelection.tsx
@@ -5,7 +5,7 @@ import ScreenLayout from '../components/ScreenLayout';
 export default function CountrySelection({ onBack }: { onBack: () => void }) {
   return (
     <ScreenLayout title="GETTING STARTED" onBack={onBack}>
-      <SDKCountryPickerScreen />
+      <SDKCountryPickerScreen insets={{ top: 0, bottom: 0 }} />
     </ScreenLayout>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index bc8e4d51b..6941de62a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7750,16 +7750,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@selfxyz/euclid@npm:^0.4.1":
-  version: 0.4.1
-  resolution: "@selfxyz/euclid@npm:0.4.1"
+"@selfxyz/euclid@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "@selfxyz/euclid@npm:0.6.0"
   peerDependencies:
     react: ">=18.2.0"
     react-native: ">=0.72.0"
     react-native-blur-effect: ^1.1.3
     react-native-svg: ">=15.14.0"
     react-native-webview: ^13.16.0
-  checksum: 10c0/f25a30b936d5ab1c154008296c64e0b4f97d91cf16e420b9bc3d2f4d9196ae426d1c2b28af653e36a9a580f78a42953f6bca3e9e9fbb36a15860636b9a0cb5fd
+  checksum: 10c0/2dd34f96f75e7641806bb8398a54c4ad666c4b953bf83810cda6ba85ded88780cc30ff2b1bd8dcbb1131d67f8a8cf05f955be5491a7ad706b0360a6a37b9c003
   languageName: node
   linkType: hard
 
@@ -7801,6 +7801,7 @@ __metadata:
     "@segment/analytics-react-native": "npm:^2.21.2"
     "@segment/sovran-react-native": "npm:^1.1.3"
     "@selfxyz/common": "workspace:^"
+    "@selfxyz/euclid": "npm:^0.6.0"
     "@selfxyz/mobile-sdk-alpha": "workspace:^"
     "@sentry/react": "npm:^9.32.0"
     "@sentry/react-native": "npm:7.0.1"
@@ -7839,6 +7840,7 @@ __metadata:
     asn1js: "npm:^3.0.6"
     axios: "npm:^1.13.2"
     babel-plugin-module-resolver: "npm:^5.0.2"
+    babel-plugin-transform-remove-console: "npm:^6.9.4"
     buffer: "npm:^6.0.3"
     constants-browserify: "npm:^1.0.0"
     country-emoji: "npm:^1.5.6"
@@ -7923,7 +7925,7 @@ __metadata:
   dependencies:
     "@babel/runtime": "npm:^7.28.3"
     "@selfxyz/common": "workspace:^"
-    "@selfxyz/euclid": "npm:^0.4.1"
+    "@selfxyz/euclid": "npm:^0.6.0"
     "@testing-library/react": "npm:^14.1.2"
     "@types/react": "npm:^18.3.4"
     "@types/react-dom": "npm:^18.3.0"
@@ -15336,6 +15338,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-transform-remove-console@npm:^6.9.4":
+  version: 6.9.4
+  resolution: "babel-plugin-transform-remove-console@npm:6.9.4"
+  checksum: 10c0/8bb152eed6685b92c371d72be3d9107d879f64b507f3e255edd6a1fb4806e9bcf39011d6f32ce1d8d745fb3533d1da4d5c706eefa633fae25151866c986f2e24
+  languageName: node
+  linkType: hard
+
 "babel-preset-current-node-syntax@npm:^1.0.0, babel-preset-current-node-syntax@npm:^1.2.0":
   version: 1.2.0
   resolution: "babel-preset-current-node-syntax@npm:1.2.0"