feat: ui base

__tests__/LandingScreen-test.tsx

@@ -7,38 +7,32 @@ jest.mock('expo-router', () => ({
   useRouter: () => ({
     push: jest.fn(),
     replace: jest.fn(),
+    navigate: jest.fn(),
     back: jest.fn(),
   }),
+  Stack: { Screen: () => null },
 }));
 
-// Mock expo-constants
-jest.mock('expo-constants', () => ({
-  expoConfig: {
-    extra: {
-      provider: {
-        name: 'AC2-Controller',
-        primaryColor: '#3B82F6',
-        secondaryColor: '#E1EFFF',
-        accentColor: '#10B981',
-        welcomeMessage: 'Your identity, connected.',
-        showAccounts: true,
-        showPasskeys: true,
-        showIdentities: true,
-        showConnections: true,
-      },
-    },
-  },
+// Mock react-native-mmkv — the sessions/messages stores back the chat list and
+// instantiate MMKV at import time, which has no native module under jest.
+jest.mock('react-native-mmkv', () => ({
+  createMMKV: () => ({
+    getString: jest.fn(() => undefined),
+    set: jest.fn(),
+  }),
 }));
 
-// Mock useProvider hook
+// Mock useProvider — pulled in transitively by MenuDrawer; the real module loads
+// the native keystore, which is unavailable under jest.
 jest.mock('@/hooks/useProvider', () => ({
   useProvider: () => ({
     key: { store: { clear: jest.fn() } },
     identity: { store: { clear: jest.fn() } },
     account: { store: { clear: jest.fn() } },
     passkey: { store: { clear: jest.fn() } },
-    identities: [{ did: 'did:key:z6Mkh...' }],
-    accounts: [{ address: 'ADDR123...', balance: 100 }],
+    keys: [],
+    identities: [],
+    accounts: [],
     passkeys: [],
     sessions: [],
   }),
@@ -49,12 +43,23 @@ jest.mock('@expo/vector-icons', () => ({
   MaterialIcons: 'MaterialIcons',
 }));
 
+// Isolate the chat list under test from heavy presentational wrappers that rely
+// on @gorhom/bottom-sheet context (provided at the app root, not in this unit).
+jest.mock('@/components/MenuDrawer', () => {
+  const ReactModule = require('react');
+  return {
+    MenuDrawer: ({ children }: { children: React.ReactNode }) =>
+      ReactModule.createElement(ReactModule.Fragment, null, children),
+  };
+});
+jest.mock('@/components/ServiceSecretKeyVaultModal', () => ({
+  ServiceSecretKeyVaultModal: () => null,
+}));
+
 describe('<LandingScreen />', () => {
-  it('renders the core landing actions', () => {
+  it('shows the empty state when there are no connections', () => {
     const { getByText } = render(<LandingScreen />);
 
-    expect(getByText('Pair')).toBeTruthy();
-    expect(getByText('Diagnostics')).toBeTruthy();
-    expect(getByText('Reset Wallet')).toBeTruthy();
+    expect(getByText('No chats available yet')).toBeTruthy();
   });
 });

app.config.js

@@ -65,13 +65,22 @@ module.exports = {
     },
     plugins: [
       'expo-router',
+      [
+        'expo-font',
+        {
+          fonts: [
+            './assets/fonts/PlusJakartaSans-VariableFont_wght.ttf',
+            './assets/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf',
+          ],
+        },
+      ],
       [
         'expo-splash-screen',
         {
-          image: './assets/images/splash-icon.png',
-          imageWidth: 200,
+          image: './assets/splash-icon.png',
+          imageWidth: 578,
           resizeMode: 'contain',
-          backgroundColor: '#ffffff',
+          backgroundColor: '#1a73e8',
           dark: {
             backgroundColor: '#000000',
           },

app/_layout.tsx

@@ -16,6 +16,12 @@ import { bootstrap } from '@/lib/keystore/bootstrap';
 import { PreventScreenshotProvider } from '@/providers/PreventScreenshotProvider';
 import React from 'react';
 import { ReactKeystoreOptions } from '@algorandfoundation/react-native-keystore';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import * as SplashScreen from 'expo-splash-screen';
+
+// Keep the splash screen visible while we fetch resources
+SplashScreen.preventAutoHideAsync();
 
 globalPolyfill();
 registerGlobals();
@@ -84,10 +90,14 @@ export default function RootLayout() {
   });
 
   return (
-    <PreventScreenshotProvider>
+    <GestureHandlerRootView>
       <WalletProvider provider={provider}>
-        <Stack />
+        <BottomSheetModalProvider>
+          <PreventScreenshotProvider>
+            <Stack />
+          </PreventScreenshotProvider>
+        </BottomSheetModalProvider>
       </WalletProvider>
-    </PreventScreenshotProvider>
+    </GestureHandlerRootView>
   );
 }