feat(mobile): [Transaction] add haptic feedback (#114)

apps/mobile/app/(app)/new-record.tsx

@@ -1,28 +1,28 @@
-import { toast } from '@/components/common/toast'
 import { TransactionForm } from '@/components/transaction/transaction-form'
 import { createTransaction } from '@/mutations/transaction'
 import { transactionQueries } from '@/queries/transaction'
 import { useWallets, walletQueries } from '@/queries/wallet'
-import { t } from '@lingui/macro'
-import { useLingui } from '@lingui/react'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+import * as Haptics from 'expo-haptics'
 import { useRouter } from 'expo-router'
 import { LoaderIcon } from 'lucide-react-native'
 import { Alert, View } from 'react-native'
 
 export default function NewRecordScreen() {
   const router = useRouter()
   const { data: walletAccounts } = useWallets()
-  const { i18n } = useLingui()
+  // const { i18n } = useLingui()
   const queryClient = useQueryClient()
   const { mutateAsync } = useMutation({
     mutationFn: createTransaction,
     onError(error) {
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
       Alert.alert(error.message)
     },
     onSuccess() {
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
       router.back()
-      toast.success(t(i18n)`Transaction created`)
+      // toast.success(t(i18n)`Transaction created`)
     },
     async onSettled() {
       await queryClient.invalidateQueries({

apps/mobile/components/common/toolbar.tsx

@@ -1,5 +1,6 @@
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
+import * as Haptics from 'expo-haptics'
 import { Link } from 'expo-router'
 import { PlusIcon, Sparkles } from 'lucide-react-native'
 import { TouchableOpacity, View } from 'react-native'
@@ -21,7 +22,7 @@ export function Toolbar() {
           <Sparkles className="w-5 h-5 text-muted-foreground" />
         </View>
       </TouchableOpacity>
-      <Link href="/new-record" asChild>
+      <Link href="/new-record" asChild onPress={Haptics.selectionAsync}>
         <Button size="icon" className="h-11 w-11">
           <PlusIcon className="size-6 text-primary-foreground" />
         </Button>

apps/mobile/components/numeric-pad/numeric-pad.tsx

@@ -1,8 +1,10 @@
 import { cn } from '@/lib/utils'
+import * as Haptics from 'expo-haptics'
 import { DeleteIcon } from 'lucide-react-native'
 import { View } from 'react-native'
 import Animated from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
 import { Button } from '../ui/button'
 import { Text } from '../ui/text'
 
@@ -38,15 +40,19 @@ export function NumericPad({
       return
     }
 
+    Haptics.selectionAsync()
+
     onValueChange?.(newValue)
   }
 
   function handleDelete() {
+    Haptics.selectionAsync()
     const newValue = Math.floor(value / 10)
     onValueChange?.(newValue)
   }
 
   function handleClear() {
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
     onValueChange?.(0)
   }
 

apps/mobile/components/transaction/select-account-field.tsx

@@ -8,11 +8,13 @@ import {
 } from '@gorhom/bottom-sheet'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
+import * as Haptics from 'expo-haptics'
 import { useRef } from 'react'
 import { useController } from 'react-hook-form'
 import { Keyboard } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { FullWindowOverlay } from 'react-native-screens'
+
 import GenericIcon from '../common/generic-icon'
 import { Button } from '../ui/button'
 import { Text } from '../ui/text'
@@ -42,6 +44,7 @@ export function SelectAccountField({
         className="border border-border !px-3 max-w-[160px]"
         disabled={isLoading}
         onPress={() => {
+          Haptics.selectionAsync()
           Keyboard.dismiss()
           sheetRef.current?.present()
         }}
@@ -97,6 +100,7 @@ export function SelectAccountField({
               className="h-20 flex-1 flex gap-2 px-2 flex-col flex-grow"
               variant={value === item ? 'secondary' : 'ghost'}
               onPress={async () => {
+                Haptics.selectionAsync()
                 sheetRef.current?.close()
                 await sleep(500)
                 onChange(item.id)

apps/mobile/components/transaction/select-category-field.tsx

@@ -8,9 +8,11 @@ import {
 } from '@gorhom/bottom-sheet'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
+import * as Haptics from 'expo-haptics'
 import { useRef } from 'react'
 import { useController } from 'react-hook-form'
 import { FlatList, Keyboard, View } from 'react-native'
+
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { FullWindowOverlay } from 'react-native-screens'
 import GenericIcon from '../common/generic-icon'
@@ -52,6 +54,7 @@ export function SelectCategoryField({
         className="border border-border !px-3 max-w-[160px]"
         disabled={isLoading}
         onPress={() => {
+          Haptics.selectionAsync()
           Keyboard.dismiss()
           sheetRef.current?.present()
         }}
@@ -112,6 +115,7 @@ export function SelectCategoryField({
                       className="h-20 flex flex-1 w-full gap-2 px-2 flex-col flex-grow"
                       variant={value === item ? 'secondary' : 'ghost'}
                       onPress={async () => {
+                        Haptics.selectionAsync()
                         sheetRef.current?.close()
                         await sleep(500)
                         onChange(item.id)

apps/mobile/components/transaction/select-date-field.tsx

@@ -8,10 +8,11 @@ import {
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import DateTimePicker from '@react-native-community/datetimepicker'
+import * as Haptics from 'expo-haptics'
 import { Calendar } from 'lucide-react-native'
 import { useRef, useState } from 'react'
 import { useController } from 'react-hook-form'
-import { View } from 'react-native'
+import { Keyboard, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { FullWindowOverlay } from 'react-native-screens'
 import { Button } from '../ui/button'
@@ -40,6 +41,7 @@ function SpinnerDatePicker({
       <Button
         className="mx-6"
         onPress={() => {
+          Haptics.selectionAsync()
           onChange(date)
         }}
       >
@@ -66,6 +68,8 @@ export function SelectDateField({
         variant="outline"
         className="!px-3"
         onPress={() => {
+          Haptics.selectionAsync()
+          Keyboard.dismiss()
           sheetRef.current?.present()
         }}
       >

apps/mobile/package.json

@@ -45,6 +45,7 @@
     "expo-constants": "~16.0.2",
     "expo-crypto": "~13.0.2",
     "expo-font": "~12.0.7",
+    "expo-haptics": "~13.0.1",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-localization": "^15.0.3",