From 71992194be5aeb978025e9d7a8e17888c6fb679f Mon Sep 17 00:00:00 2001
From: Timo Glastra <timo@animo.id>
Date: Sat, 24 Aug 2024 21:56:34 +0200
Subject: [PATCH] feat: add settings screen

Signed-off-by: Timo Glastra <timo@animo.id>
---
 apps/easypid/src/app/(app)/(home)/menu.tsx    |  5 ++
 apps/easypid/src/app/(app)/_layout.tsx        |  3 +-
 .../src/features/wallet/FunkeMenuScreen.tsx   | 60 +++++++++++++++++++
 .../src/features/wallet/FunkeWalletScreen.tsx | 11 +++-
 packages/ui/src/content/Icon.tsx              |  4 ++
 5 files changed, 78 insertions(+), 5 deletions(-)
 create mode 100644 apps/easypid/src/app/(app)/(home)/menu.tsx
 create mode 100644 apps/easypid/src/features/wallet/FunkeMenuScreen.tsx

diff --git a/apps/easypid/src/app/(app)/(home)/menu.tsx b/apps/easypid/src/app/(app)/(home)/menu.tsx
new file mode 100644
index 00000000..d6c7e1a0
--- /dev/null
+++ b/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 />
+}
diff --git a/apps/easypid/src/app/(app)/_layout.tsx b/apps/easypid/src/app/(app)/_layout.tsx
index 6ccc8b36..13c7d6b5 100644
--- a/apps/easypid/src/app/(app)/_layout.tsx
+++ b/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>
diff --git a/apps/easypid/src/features/wallet/FunkeMenuScreen.tsx b/apps/easypid/src/features/wallet/FunkeMenuScreen.tsx
new file mode 100644
index 00000000..8df94a15
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/easypid/src/features/wallet/FunkeWalletScreen.tsx b/apps/easypid/src/features/wallet/FunkeWalletScreen.tsx
index d37038aa..58d10604 100644
--- a/apps/easypid/src/features/wallet/FunkeWalletScreen.tsx
+++ b/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>
diff --git a/packages/ui/src/content/Icon.tsx b/packages/ui/src/content/Icon.tsx
index 48454d83..fe208a7e 100644
--- a/packages/ui/src/content/Icon.tsx
+++ b/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