refactor: working onboarding flow (#135)

Signed-off-by: Timo Glastra <[email protected]>

apps/funke/metro.config.js

@@ -17,7 +17,7 @@ config.resolver.nodeModulesPaths = [
 config.resolver.sourceExts = ['js', 'json', 'ts', 'tsx', 'cjs', 'mjs']
 config.resolver.extraNodeModules = {
   // Needed for cosmjs trying to import node crypto
-  crypto: require.resolve('./polyfills/crypto.ts'),
+  crypto: require.resolve('./src/polyfills/crypto.ts'),
 }
 
 module.exports = config

apps/funke/package.json

@@ -23,6 +23,7 @@
 		"@package/app": "workspace:*",
 		"@package/secure-store": "workspace:*",
 		"@package/ui": "workspace:*",
+		"@package/utils": "workspace:*",
 		"@react-native-community/blur": "^4.3.2",
 		"@react-native-community/netinfo": "11.3.1",
 		"@react-native-masked-view/masked-view": "0.3.1",

apps/funke/agent/initialize.ts → apps/funke/src/agent/initialize.ts

@@ -1,5 +1,5 @@
+import { trustedX509Certificates } from '@funke/constants'
 import { initializeFunkeAgent } from '@package/agent'
-import { trustedX509Certificates } from '../constants'
 
 export function initializeAppAgent({ walletKey }: { walletKey: string }) {
   return initializeFunkeAgent({

apps/funke/app/(app)/_layout.tsx → apps/funke/src/app/(app)/_layout.tsx

@@ -1,6 +1,6 @@
 import { Redirect, Stack } from 'expo-router'
 
-import { useSecureUnlock } from '@/agent'
+import { useSecureUnlock } from '@funke/agent'
 import { AgentProvider } from '@package/agent'
 import { useResetWalletDevMenu } from '../../utils/resetWallet'
 

apps/funke/src/app/(app)/index.tsx

@@ -0,0 +1,24 @@
+import { WalletScreen } from '@package/app'
+import { XStack } from '@package/ui'
+import { Stack } from 'expo-router'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import inAppLogo from '../../../assets/in-app-logo.png'
+
+export default function Screen() {
+  const { top } = useSafeAreaInsets()
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerShown: true,
+          title: 'Home',
+          header: () => {
+            return <XStack h={top} bg="$background" />
+          },
+        }}
+      />
+      <WalletScreen logo={inAppLogo} showInbox={false} />
+    </>
+  )
+}

apps/funke/app/_layout.tsx → apps/funke/src/app/_layout.tsx

@@ -4,13 +4,13 @@ import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
 import { Slot } from 'expo-router'
 import * as SplashScreen from 'expo-splash-screen'
 
-import tamaguiConfig from '../tamagui.config'
+import tamaguiConfig from '../../tamagui.config'
 
 void SplashScreen.preventAutoHideAsync()
 
 export const unstable_settings = {
   // Ensure any route can link back to `/`
-  initialRouteName: '(app)/index',
+  initialRouteName: '/(app)/index',
 }
 
 export default function RootLayout() {
@@ -19,7 +19,15 @@ export default function RootLayout() {
   return (
     <Provider config={tamaguiConfig}>
       <SecureUnlockProvider>
-        <ThemeProvider value={DefaultTheme}>
+        <ThemeProvider
+          value={{
+            ...DefaultTheme,
+            colors: {
+              ...DefaultTheme.colors,
+              background: 'white',
+            },
+          }}
+        >
           <NoInternetToastProvider>
             <Slot />
           </NoInternetToastProvider>

apps/funke/app/authenticate.tsx → apps/funke/src/app/authenticate.tsx

@@ -1,12 +1,10 @@
 import { Redirect } from 'expo-router'
-import { KeyboardAvoidingView } from 'react-native'
 
-import { initializeAppAgent, useSecureUnlock } from '@/agent'
 import { WalletInvalidKeyError } from '@credo-ts/core'
-import { HeroIcons, Paragraph, PinDotsInput, type PinDotsInputRef, YStack } from '@package/ui'
+import { initializeAppAgent, useSecureUnlock } from '@funke/agent'
+import { FlexPage, HeroIcons, Paragraph, PinDotsInput, type PinDotsInputRef, Stack, YStack } from '@package/ui'
 import * as SplashScreen from 'expo-splash-screen'
 import { useEffect, useRef } from 'react'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Circle } from 'tamagui'
 import { useResetWalletDevMenu } from '../utils/resetWallet'
 
@@ -17,7 +15,6 @@ export default function Authenticate() {
   useResetWalletDevMenu()
 
   const secureUnlock = useSecureUnlock()
-  const safeAreaInsets = useSafeAreaInsets()
   const pinInputRef = useRef<PinDotsInputRef>(null)
   const isLoading =
     secureUnlock.state === 'acquired-wallet-key' || (secureUnlock.state === 'locked' && secureUnlock.isUnlocking)
@@ -34,13 +31,12 @@ export default function Authenticate() {
     initializeAppAgent({
       walletKey: secureUnlock.walletKey,
     })
-      .then((agent) => secureUnlock.setWalletKeyValid({ agent }))
+      .then((agent) => secureUnlock.setWalletKeyValid({ agent }, { enableBiometrics: true }))
       .catch((error) => {
         if (error instanceof WalletInvalidKeyError) {
           secureUnlock.setWalletKeyInvalid()
           pinInputRef.current?.clear()
           pinInputRef.current?.shake()
-          pinInputRef.current?.focus()
         }
 
         // TODO: handle other
@@ -56,7 +52,6 @@ export default function Authenticate() {
     return <Redirect href="/" />
   }
 
-  // TODO: where to put this?
   void SplashScreen.hideAsync()
 
   const unlockUsingPin = async (pin: string) => {
@@ -65,29 +60,15 @@ export default function Authenticate() {
   }
 
   return (
-    <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
-      <YStack
-        gap="$6"
-        p="$4"
-        // TODO: how to handle safe area?
-        {...safeAreaInsets}
-        backgroundColor="$background"
-        flex-1
-      >
-        <YStack flex-1 gap="$4" alignItems="center" justifyContent="center">
-          <Circle size="$3" backgroundColor="$grey-100">
-            <HeroIcons.LockClosed color="$grey-700" />
-          </Circle>
-          <Paragraph>Enter your app pin code</Paragraph>
-          <PinDotsInput
-            isLoading={isLoading}
-            ref={pinInputRef}
-            autoFocus
-            pinLength={6}
-            onPinComplete={unlockUsingPin}
-          />
-        </YStack>
+    <FlexPage flex-1 safeArea="t">
+      <YStack flex={3} justifyContent="center" alignItems="center" gap="$4">
+        <Circle size="$3" backgroundColor="$grey-100">
+          <HeroIcons.LockClosed color="$grey-700" />
+        </Circle>
+        <Paragraph>Enter your app pin code</Paragraph>
+        <PinDotsInput isLoading={isLoading} ref={pinInputRef} pinLength={6} onPinComplete={unlockUsingPin} />
       </YStack>
-    </KeyboardAvoidingView>
+      <Stack flex-1 />
+    </FlexPage>
   )
 }

apps/funke/src/app/onboarding/_layout.tsx

@@ -0,0 +1,16 @@
+import { OnboardingContextProvider } from '@funke/features/onboarding'
+import { Slot } from 'expo-router'
+import * as SplashScreen from 'expo-splash-screen'
+import { useResetWalletDevMenu } from '../../utils/resetWallet'
+
+export default function RootLayout() {
+  useResetWalletDevMenu()
+
+  void SplashScreen.hideAsync()
+
+  return (
+    <OnboardingContextProvider>
+      <Slot />
+    </OnboardingContextProvider>
+  )
+}

apps/funke/src/app/onboarding/index.tsx

@@ -0,0 +1,43 @@
+import { useOnboardingContext } from '@funke/features/onboarding'
+import { FlexPage, OnboardingScreensHeader } from '@package/ui'
+import Animated, { FadeInRight, FadeOutLeft } from 'react-native-reanimated'
+
+export default function OnboardingScreens() {
+  const onboardingContext = useOnboardingContext()
+
+  let page: React.JSX.Element
+  if (onboardingContext.page.type === 'fullscreen') {
+    page = onboardingContext.screen
+  } else {
+    page = (
+      <FlexPage gap="$0">
+        <OnboardingScreensHeader
+          flex={1}
+          progress={onboardingContext.progress}
+          title={onboardingContext.page.title}
+          subtitle={onboardingContext.page.subtitle}
+        />
+        <Animated.View
+          key={onboardingContext.page.animationKey ?? onboardingContext.currentStep}
+          style={{ flex: 3 }}
+          entering={FadeInRight}
+          exiting={FadeOutLeft}
+        >
+          {onboardingContext.screen}
+        </Animated.View>
+      </FlexPage>
+    )
+  }
+
+  return (
+    <Animated.View
+      // for full screen, we want to animate the page transitions. For others we don't want to animate the static layout for every page change
+      key={onboardingContext.page.type === 'fullscreen' ? onboardingContext.currentStep : onboardingContext.page.type}
+      style={{ flex: 1 }}
+      entering={FadeInRight}
+      exiting={FadeOutLeft}
+    >
+      {page}
+    </Animated.View>
+  )
+}

apps/funke/crypto/aes.ts → apps/funke/src/crypto/aes.ts

@@ -1,4 +1,4 @@
+import { FUNKE_WALLET_INSTANCE_LONG_TERM_AES_KEY_ID } from '@funke/constants'
 import { aes128Gcm } from '@package/agent'
-import { FUNKE_WALLET_INSTANCE_LONG_TERM_AES_KEY_ID } from '../constants'
 
 export const funkeAes128Gcm = aes128Gcm(FUNKE_WALLET_INSTANCE_LONG_TERM_AES_KEY_ID)

apps/funke/src/features/onboarding/index.tsx

@@ -0,0 +1 @@
+export * from './onboardingContext'