feat: new home screen

apps/easypid/assets/Blob.tsx

@@ -0,0 +1,36 @@
+import { View } from 'react-native'
+import Svg, { Path, G, type SvgProps, Defs, LinearGradient, Stop } from 'react-native-svg'
+
+export function Blob({ color = 'black', ...props }: SvgProps) {
+  return (
+    <View style={{ width: '100%', aspectRatio: 393 / 471 }}>
+      <Svg width="100%" height="100%" viewBox="0 0 393 471" fill="none" {...props}>
+        <Path d="M0 0H393V451.5C251 475 143.5 477.506 0 451.5V0Z" fill="url(#paint0_linear_2268_545)" />
+        <G style={{ mixBlendMode: 'multiply', opacity: 0.65 }}>
+          <Path
+            d="M339.083 66.6639C331.109 153.347 240.586 158.69 196.079 212.134C162.606 252.33 161.812 300.955 135.753 342.996C75.479 440.234 -68.764 372.214 -105.311 285.451C-123.221 242.915 -116.624 198.794 -122.417 154.556C-130.644 91.7355 -184.073 -33.0719 -109.846 -71.7469C-57.4715 -99.0268 -8.93476 -35.334 34.1246 -15.6674C107.821 17.9942 196.501 -35.4184 272.601 -12.7329C306.399 -2.65453 342.605 28.2988 339.066 66.644L339.083 66.6639Z"
+            fill="#DFE7FA"
+          />
+        </G>
+        <Path
+          opacity="0.4"
+          d="M121.77 314.308C112.062 343.686 86.1153 369.847 54.3033 372.691C29.0387 374.87 5.12616 361.79 -12.3284 344.487C-25.1756 331.79 -35.3742 317.128 -42.99 301.252C-43.1388 301.005 -43.0706 300.638 -42.7967 300.518C-42.5805 300.425 -42.3404 300.475 -42.1898 300.665L-34.0965 310.74C-28.6937 317.22 -22.6676 323.777 -16.6515 329.735C11.9817 358.048 49.1554 375.931 86.3997 351.398C100.573 341.824 112.244 328.562 120.889 313.84C121.024 313.603 121.325 313.513 121.577 313.663C121.814 313.798 121.891 314.085 121.784 314.323L121.77 314.308Z"
+          fill="white"
+        />
+        <Defs>
+          <LinearGradient
+            id="paint0_linear_2268_545"
+            x1="196.5"
+            y1="0"
+            x2="196.5"
+            y2="470.077"
+            gradientUnits="userSpaceOnUse"
+          >
+            <Stop stopColor="#F1F4FD" />
+            <Stop offset="1" stopColor="#DFE7FA" />
+          </LinearGradient>
+        </Defs>
+      </Svg>
+    </View>
+  )
+}

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

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

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

@@ -1,11 +1,10 @@
-import { FunkeQrScannerScreen } from '@easypid/features/scan/FunkeQrScannerScreen'
-import type { CredentialDataHandlerOptions } from '@package/app'
+import { type CredentialDataHandlerOptions, QrScannerScreen } from '@package/app'
 
 // When going form the scanner we want to replace (as we have the modal)
 export const credentialDataHandlerOptions = {
   routeMethod: 'replace',
 } satisfies CredentialDataHandlerOptions
 
 export default function Screen() {
-  return <FunkeQrScannerScreen credentialDataHandlerOptions={credentialDataHandlerOptions} />
+  return <QrScannerScreen credentialDataHandlerOptions={credentialDataHandlerOptions} />
 }

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

@@ -108,6 +108,12 @@ export default function AppLayout() {
             }}
             name="(home)/scan"
           />
+          <Stack.Screen
+            options={{
+              presentation: 'modal',
+            }}
+            name="(home)/offline"
+          />
           <Stack.Screen
             name="notifications/openIdPresentation"
             options={{

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

@@ -1,23 +1,5 @@
 import { FunkeWalletScreen } from '@easypid/features/wallet/FunkeWalletScreen'
-import { XStack } from '@package/ui'
-import { Stack } from 'expo-router'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export default function Screen() {
-  const { top } = useSafeAreaInsets()
-
-  return (
-    <>
-      <Stack.Screen
-        options={{
-          headerShown: true,
-          title: 'Home',
-          header: () => {
-            return <XStack h={top} bg="$background" />
-          },
-        }}
-      />
-      <FunkeWalletScreen />
-    </>
-  )
+  return <FunkeWalletScreen />
 }

apps/easypid/src/features/activity/FunkeActivityScreen.tsx

@@ -29,7 +29,7 @@ export function FunkeActivityScreen({ entityId }: { entityId?: string }) {
   return (
     <FlexPage gap="$0" paddingHorizontal="$0">
       <YStack w="100%" top={0} borderBottomWidth="$0.5" borderColor={isScrolledByOffset ? '$grey-200' : '$background'}>
-        <YStack gap="$2" p="$4">
+        <YStack gap="$4" p="$4">
           <Stack h="$1" />
           <Heading variant="h1">Activity</Heading>
         </YStack>

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useScrollViewPosition } from '@package/app/src/hooks'
+import { useHaptics, useScrollViewPosition } from '@package/app/src/hooks'
 import { Button, FlexPage, Heading, HeroIcons, ScrollView, Stack, XStack, YStack, useScaleAnimation } from '@package/ui'
 
 import { usePidCredential } from '@easypid/hooks'
@@ -112,6 +112,7 @@ export function FunkeMenuScreen() {
 
 const MenuItem = ({ item, idx, onPress }: { item: (typeof menuItems)[number]; idx: number; onPress?: () => void }) => {
   const { pressStyle, handlePressIn, handlePressOut } = useScaleAnimation()
+  const { withHaptics } = useHaptics()
 
   const content = (
     <XStack
@@ -148,7 +149,7 @@ const MenuItem = ({ item, idx, onPress }: { item: (typeof menuItems)[number]; id
       <Stack
         onPressIn={handlePressIn}
         onPressOut={handlePressOut}
-        onPress={() => Linking.openURL('mailto:[email protected]?subject=Feedback on the Funke EUDI Wallet')}
+        onPress={withHaptics(() => Linking.openURL('mailto:[email protected]?subject=Feedback on the Funke EUDI Wallet'))}
         asChild
       >
         {content}
@@ -158,14 +159,20 @@ const MenuItem = ({ item, idx, onPress }: { item: (typeof menuItems)[number]; id
 
   if (item.href === '/') {
     return (
-      <Stack onPressIn={handlePressIn} onPressOut={handlePressOut} onPress={onPress}>
+      <Stack onPressIn={handlePressIn} onPressOut={handlePressOut} onPress={withHaptics(() => onPress)}>
         {content}
       </Stack>
     )
   }
 
   return (
-    <Link onPressIn={handlePressIn} onPressOut={handlePressOut} href={item.href} asChild>
+    <Link
+      onPress={withHaptics(() => undefined)}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      href={item.href}
+      asChild
+    >
       {content}
     </Link>
   )