feat: add settings screen

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

apps/easypid/src/app/(app)/(home)/menu.tsx

@@ -0,0 +1,5 @@
+import { FunkeMenuScreen } from '@easypid/features/wallet/FunkeMenuScreen'
+
+export default function Screen() {
+  return <FunkeMenuScreen />
+}

apps/easypid/src/app/(app)/_layout.tsx

@@ -9,7 +9,6 @@ import { type CredentialDataHandlerOptions, DeeplinkHandler } from '@package/app
 import { HeroIcons, XStack } from '@package/ui'
 import { useEffect, useState } from 'react'
 import Reanimated, { FadeIn } from 'react-native-reanimated'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'tamagui'
 
 // When deeplink routing we want to push
@@ -21,7 +20,6 @@ export const credentialDataHandlerOptions = {
 export default function AppLayout() {
   useResetWalletDevMenu()
   const secureUnlock = useSecureUnlock()
-  const { top } = useSafeAreaInsets()
   const theme = useTheme()
   const router = useRouter()
 
@@ -84,6 +82,7 @@ export default function AppLayout() {
               <Stack.Screen name="notifications/openIdPresentation" options={headerNormalOptions} />
               <Stack.Screen name="credentials/pid" options={headerNormalOptions} />
               <Stack.Screen name="credentials/pidRequestedAttributes" options={headerNormalOptions} />
+              <Stack.Screen name="(home)/menu" options={headerNormalOptions} />
             </Stack>
           </Reanimated.View>
         </DeeplinkHandler>

apps/easypid/src/features/wallet/FunkeMenuScreen.tsx

@@ -0,0 +1,60 @@
+import { Button, Heading, ScrollView, Spacer, YStack } from '@package/ui'
+import React from 'react'
+import { useRouter } from 'solito/router'
+
+import { useScrollViewPosition } from '@package/app/src/hooks'
+
+import { useSecureUnlock } from '@easypid/agent'
+import { Alert } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { resetWallet } from '../../utils/resetWallet'
+
+export function FunkeMenuScreen() {
+  const { handleScroll, isScrolledByOffset, scrollEventThrottle } = useScrollViewPosition()
+  const secureUnlock = useSecureUnlock()
+  const router = useRouter()
+  const { bottom } = useSafeAreaInsets()
+
+  const onResetWallet = () => {
+    Alert.alert('Reset Wallet', 'Are you sure you want to reset the wallet?', [
+      {
+        text: 'Cancel',
+        style: 'cancel',
+      },
+      {
+        text: 'Yes',
+        onPress: () => {
+          resetWallet(secureUnlock)
+          router.replace('/onboarding')
+        },
+      },
+    ])
+  }
+
+  return (
+    <YStack bg="$background" height="100%">
+      {/* This is the header where the scroll view get's behind. We have the same content in the scrollview, but you
+       * don't see that content. It's just so we can make the scrollview minheight 100%.  */}
+      <YStack zIndex={2} w="100%" top={0} position="absolute">
+        <Spacer size="$13" w="100%" backgroundColor="$background" />
+        <YStack borderWidth={0.5} borderColor={isScrolledByOffset ? '$grey-300' : '$background'} />
+      </YStack>
+      <ScrollView
+        onScroll={handleScroll}
+        scrollEventThrottle={scrollEventThrottle}
+        contentContainerStyle={{ minHeight: '100%' }}
+      >
+        <Spacer size="$13" />
+        <YStack borderWidth={0.5} borderColor="$background" />
+        <YStack gap="$6" p="$4" flex-1 justifyContent="space-between" paddingBottom={bottom}>
+          <YStack gap="$6">
+            <Heading variant="title" fontWeight="$bold">
+              Menu
+            </Heading>
+          </YStack>
+          <Button.Solid onPress={onResetWallet}>Reset Wallet</Button.Solid>
+        </YStack>
+      </ScrollView>
+    </YStack>
+  )
+}

apps/easypid/src/features/wallet/FunkeWalletScreen.tsx

@@ -44,9 +44,14 @@ export function FunkeWalletScreen() {
       <YStack bg="$background" py="$4" height="100%" position="relative">
         <ScrollView px="$4" gap="$2">
           <YStack gap="$4">
-            <Heading variant="title" fontWeight="$bold">
-              {credential.userName}'s Wallet
-            </Heading>
+            <XStack justifyContent="space-between">
+              <Heading variant="title" fontWeight="$bold">
+                {credential.userName}'s Wallet
+              </Heading>
+              <XStack onPress={() => push('/menu')}>
+                <HeroIcons.EllipsisVertical size={32} color="$black" />
+              </XStack>
+            </XStack>
             <IdCard issuerImage={germanIssuerImage} onPress={navigateToPidDetail} hideUserName />
             <Spacer />
             <Heading variant="h1">Recent Activity</Heading>

packages/ui/src/content/Icon.tsx

@@ -7,10 +7,12 @@ import {
   ArrowPathIcon,
   ArrowRightIcon,
   BackspaceIcon,
+  Bars3Icon,
   CheckCircleIcon,
   CircleStackIcon,
   CreditCardIcon,
   DevicePhoneMobileIcon,
+  EllipsisVerticalIcon,
   ExclamationCircleIcon,
   FingerPrintIcon,
   GlobeAltIcon,
@@ -81,4 +83,6 @@ export const HeroIcons = {
   QuestionMarkCircle: wrapHeroIcon(QuestionMarkCircleIcon),
   FingerPrint: wrapHeroIcon(FingerPrintIcon),
   User: wrapHeroIcon(UserIcon),
+  Bars3: wrapHeroIcon(Bars3Icon),
+  EllipsisVertical: wrapHeroIcon(EllipsisVerticalIcon),
 } as const