feat: UI/UX base

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "packages/liquid-auth-js"]
+	path = packages/liquid-auth-js
+	url = https://github.com/algorandfoundation/liquid-auth-js.git

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

@@ -65,6 +65,15 @@ module.exports = {
     },
     plugins: [
       'expo-router',
+      [
+        'expo-font',
+        {
+          fonts: [
+            './assets/fonts/PlusJakartaSans-VariableFont_wght.ttf',
+            './assets/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf',
+          ],
+        },
+      ],
       [
         'expo-splash-screen',
         {

app/_layout.tsx

@@ -1,21 +1,23 @@
 // 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 React from 'react';
-import { ReactKeystoreOptions } from '@algorandfoundation/react-native-keystore';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { registerGlobals } from 'react-native-webrtc';
 
 globalPolyfill();
 registerGlobals();
@@ -84,10 +86,22 @@ export default function RootLayout() {
   });
 
   return (
-    <PreventScreenshotProvider>
+    <GestureHandlerRootView>
       <WalletProvider provider={provider}>
-        <Stack />
+        <BottomSheetModalProvider>
+          <PreventScreenshotProvider>
+            <Stack>
+              <Stack.Screen
+                name="terms"
+                options={{
+                  presentation: 'modal',
+                  title: 'Terms & Conditions',
+                }}
+              />
+            </Stack>
+          </PreventScreenshotProvider>
+        </BottomSheetModalProvider>
       </WalletProvider>
-    </PreventScreenshotProvider>
+    </GestureHandlerRootView>
   );
 }

app/index.tsx

@@ -1,12 +1,20 @@
-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 { logsStore } from '@/stores/logs';
+import { useStore } from '@tanstack/react-store';
+import Constants from 'expo-constants';
+import { useFonts } from 'expo-font';
+import { Redirect } from 'expo-router';
+import React from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 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'),
+  });
   const { keys, status } = useProvider();
   const logs = useStore(logsStore, (state) => state.logs);
   const lastLog = logs.length > 0 ? logs[0].message : 'Initializing...';
@@ -15,7 +23,7 @@ export default function Index() {
     primaryColor: '#3B82F6',
   };
 
-  if (status === 'loading') {
+  if (status === 'loading' || !fontsLoaded) {
     return (
       <View style={styles.container}>
         <Logo size={100} style={styles.logo} />

app/terms.tsx

@@ -0,0 +1,87 @@
+import { useRouter } from 'expo-router';
+import { ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { StyleSheet } from 'react-native-unistyles';
+import { Button } from '../components/Button';
+import { AppText as Text } from '../components/Text';
+
+export default function TermsScreen() {
+  const router = useRouter();
+
+  const handleAccept = async () => {
+    // TODO: Save acceptance state to persistent storage
+
+    // Dismiss the modal and send the user to the landing page
+    router.replace('/landing');
+  };
+
+  return (
+    <SafeAreaView style={styles.container} edges={['left', 'right', 'bottom']}>
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        <Text variant="body">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam nisl, commodo nec urna
+          eget, vestibulum interdum elit. Nunc vehicula enim risus, sed sodales tellus iaculis vel.
+          Fusce vel purus eget ligula consectetur fringilla molestie vel lectus. Donec scelerisque
+          aliquam molestie. Curabitur egestas vulputate semper. Aliquam erat volutpat. Sed in
+          sodales risus. Sed malesuada enim vitae pharetra maximus. Duis porta tempus quam, in
+          efficitur sapien aliquet quis. In condimentum lorem ut volutpat pulvinar. Praesent
+          consequat rhoncus orci, eget varius enim tristique eu. Suspendisse potenti.
+        </Text>
+
+        <Text variant="body">
+          Integer eget ultrices nunc. Pellentesque orci ipsum, tristique in rhoncus eu, aliquam et
+          nunc. Proin sodales, felis vitae faucibus maximus, urna elit laoreet est, vitae pretium
+          nibh purus ut tellus. Cras lacinia consectetur dapibus. Interdum et malesuada fames ac
+          ante ipsum primis in faucibus. Aenean at suscipit eros, ac mattis libero. Pellentesque ac
+          rhoncus sem, ac interdum nisl. Mauris gravida convallis sapien at ultrices. Vestibulum
+          quis facilisis ipsum. Maecenas vel lacinia ipsum, eget euismod nibh. Donec libero dolor,
+          volutpat sed lectus varius, tempus sollicitudin felis. Ut ut sollicitudin felis. Vivamus
+          augue mi, consequat sit amet cursus porttitor, pretium nec erat. Morbi interdum neque nec
+          iaculis convallis.
+        </Text>
+
+        <Text variant="body">
+          Nullam dictum, dui vitae finibus porttitor, est elit sodales lorem, sit amet faucibus nisl
+          quam id sem. Quisque quis consequat mi. Quisque sed nulla blandit, pharetra velit nec,
+          porta erat. Praesent id fermentum mauris. In imperdiet lorem quis dui vulputate lacinia.
+          Donec non arcu sed erat eleifend vestibulum. Morbi est leo, dictum id sagittis ut, ornare
+          in metus. Quisque sed neque sagittis, ultrices metus sed, fringilla nunc. In orci ante,
+          blandit nec justo vitae, dapibus cursus justo. Cras quis nulla convallis, pharetra velit
+          imperdiet, luctus dui. Ut sed velit vestibulum, fermentum lectus vitae, feugiat neque.
+          Aenean at urna ac lacus feugiat dignissim. Sed feugiat elit faucibus, hendrerit leo quis,
+          dignissim lacus. Maecenas pellentesque, lorem ut facilisis auctor, elit dolor ornare quam,
+          non sodales diam sapien non ex. Donec ultrices ligula dolor, ac condimentum nunc euismod
+          sit amet. Integer sit amet dui vel erat euismod sollicitudin.
+        </Text>
+      </ScrollView>
+
+      <View style={styles.footer}>
+        <Button label="Accept" onPress={handleAccept} />
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.semantic.bg.app,
+    paddingHorizontal: theme.primitives.spacing.base,
+  },
+  scroll: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingTop: theme.primitives.spacing.sm,
+    paddingBottom: theme.primitives.spacing.md,
+    gap: theme.primitives.spacing.lg,
+  },
+  footer: {
+    paddingTop: theme.primitives.spacing.sm,
+    paddingBottom: theme.primitives.spacing.sm,
+  },
+}));

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',
+    ],
+  };
+};