feat: MVP UI

__fixtures__/chat-threads.ts

@@ -0,0 +1,28 @@
+import { ChatThread } from '@/components/ChatRow';
+
+export const mockChatThreads: ChatThread[] = [
+  {
+    id: '1',
+    name: 'Finance Agent',
+    preview: 'Your transaction has been verified successfully.',
+    timestamp: '2m ago',
+    avatarColor: '#1a73e8',
+    avatarBg: '#e3f2fd',
+  },
+  {
+    id: '2',
+    name: 'GitHub Agent',
+    preview: 'Please sign the commit with your passkey to proceed.',
+    timestamp: '14m ago',
+    avatarColor: '#34a853',
+    avatarBg: '#e6f4ea',
+  },
+  {
+    id: '3',
+    name: 'Lofty AI',
+    preview: 'Welcome back! Your portfolio update is ready.',
+    timestamp: '1h ago',
+    avatarColor: '#ea4335',
+    avatarBg: '#fce8e6',
+  },
+];

ac2-controller.code-workspace

@@ -4,10 +4,6 @@
       "name": "ROOT",
       "path": ".",
     },
-    {
-      "name": "ac2-sdk",
-      "path": "packages/ac2-sdk",
-    },
   ],
   "settings": {
     "npm.packageManager": "pnpm",

app.config.js

@@ -47,12 +47,13 @@ module.exports = {
     splash: {
       image: './assets/splash.png',
       resizeMode: 'contain',
-      backgroundColor: '#ffffff',
+      backgroundColor: '#1a73e8',
+      imageWidth: 578,
     },
     android: {
       adaptiveIcon: {
         foregroundImage: './assets/adaptive-icon.png',
-        backgroundColor: '#ffffff',
+        backgroundColor: '#1a73e8',
       },
       edgeToEdgeEnabled: true,
       predictiveBackGestureEnabled: false,
@@ -65,13 +66,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

@@ -1,21 +1,27 @@
 // MUST be first: installs `global.crypto` before any `@noble/hashes` import
 // is evaluated. See `lib/runtime/install-crypto.ts`.
+import { bootstrap } from '@/lib/keystore/bootstrap';
 import '@/lib/runtime/install-crypto';
-import { useEventListener } from 'expo';
-import { Stack } from 'expo-router';
-import { keyStore } from '@/stores/keystore';
-import { keyStoreHooks } from '@/stores/before-after';
+import { globalPolyfill, setupNavigatorPolyfill } from '@/lib/runtime/polyfill';
+import { PreventScreenshotProvider } from '@/providers/PreventScreenshotProvider';
+import { ReactNativeProvider, WalletProvider } from '@/providers/ReactNativeProvider';
 import { accountsStore } from '@/stores/accounts';
+import { keyStoreHooks } from '@/stores/before-after';
 import { identitiesStore } from '@/stores/identities';
-import { ReactNativeProvider, WalletProvider } from '@/providers/ReactNativeProvider';
+import { keyStore } from '@/stores/keystore';
 import { passkeysStore } from '@/stores/passkeys';
-import { registerGlobals } from 'react-native-webrtc';
-import { globalPolyfill, setupNavigatorPolyfill } from '@/lib/runtime/polyfill';
+import { ReactKeystoreOptions } from '@algorandfoundation/react-native-keystore';
 import ReactNativePasskeyAutofill from '@algorandfoundation/react-native-passkey-autofill';
-import { bootstrap } from '@/lib/keystore/bootstrap';
-import { PreventScreenshotProvider } from '@/providers/PreventScreenshotProvider';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { useEventListener } from 'expo';
+import { Stack } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
 import React from 'react';
-import { ReactKeystoreOptions } from '@algorandfoundation/react-native-keystore';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { registerGlobals } from 'react-native-webrtc';
+
+// 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>
   );
 }

app/index.tsx

@@ -1,62 +1,31 @@
-import React from 'react';
-import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
-import { Redirect } from 'expo-router';
-import Constants from 'expo-constants';
-import { useStore } from '@tanstack/react-store';
-import { logsStore } from '@/stores/logs';
-import Logo from '@/components/Logo';
 import { useProvider } from '@/hooks/useProvider';
+import FontAwesome6 from '@expo/vector-icons/FontAwesome6';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import { useFonts } from 'expo-font';
+import { Redirect } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
+import React from 'react';
+
 export default function Index() {
+  const [fontsLoaded] = useFonts({
+    'PlusJakartaSans-Regular': require('../assets/fonts/PlusJakartaSans-VariableFont_wght.ttf'),
+    'PlusJakartaSans-Medium': require('../assets/fonts/PlusJakartaSans-VariableFont_wght.ttf'),
+    'PlusJakartaSans-SemiBold': require('../assets/fonts/PlusJakartaSans-VariableFont_wght.ttf'),
+    'PlusJakartaSans-Bold': require('../assets/fonts/PlusJakartaSans-VariableFont_wght.ttf'),
+    'PlusJakartaSans-Italic': require('../assets/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf'),
+    ...MaterialIcons.font,
+    ...FontAwesome6.font,
+  });
   const { keys, status } = useProvider();
-  const logs = useStore(logsStore, (state) => state.logs);
-  const lastLog = logs.length > 0 ? logs[0].message : 'Initializing...';
 
-  const config = Constants.expoConfig?.extra?.provider || {
-    primaryColor: '#3B82F6',
-  };
+  React.useEffect(() => {
+    SplashScreen.hideAsync();
+  }, []);
 
-  if (status === 'loading') {
-    return (
-      <View style={styles.container}>
-        <Logo size={100} style={styles.logo} />
-        <ActivityIndicator size="large" color={config.primaryColor} />
-        <View style={styles.content}>
-          <Text style={styles.text}>{lastLog}</Text>
-          <Text style={styles.subtext}>Securing your keys and passkeys</Text>
-        </View>
-      </View>
-    );
+  if (!fontsLoaded || status === 'loading') {
+    return null;
   }
 
   if (keys.length > 0) return <Redirect href="/landing" />;
   return <Redirect href="/onboarding" />;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F8FAFC',
-    padding: 24,
-  },
-  logo: {
-    marginBottom: 40,
-  },
-  content: {
-    marginTop: 24,
-    alignItems: 'center',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#1E293B',
-    textAlign: 'center',
-  },
-  subtext: {
-    marginTop: 8,
-    fontSize: 14,
-    color: '#64748B',
-    textAlign: 'center',
-  },
-});

babel.config.js

@@ -0,0 +1,28 @@
+const path = require('path');
+
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    // use the expo preset
+    presets: ['babel-preset-expo'],
+    // Ignore sibling workspace projects under /packages for this app build.
+    ignore: [
+      (filename) => {
+        if (!filename) return false;
+        return filename.includes(`${path.sep}packages${path.sep}`);
+      },
+    ],
+    // other config
+    plugins: [
+      [
+        'react-native-unistyles/plugin',
+        {
+          // pass root folder of your application
+          root: 'app',
+        },
+      ],
+      'react-native-worklets/plugin',
+    ],
+  };
+};