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>

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",

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;

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>
   );
 }