feat(mobile): [Wallet] add WalletAccountWithBalance schema for better…

… type and fix balance display (#100)
get6pm · Jul 11, 2024 · 03298a3 · 03298a3
1 parent 33e3f83
commit 03298a3
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 15 deletions.
diff --git a/apps/mobile/app/(app)/wallet/[walletId].tsx b/apps/mobile/app/(app)/wallet/[walletId].tsx
@@ -109,7 +109,7 @@ export default function EditAccountScreen() {
         defaultValues={{
           name: walletAccount.name,
           preferredCurrency: walletAccount.preferredCurrency,
-          balance: walletAccount.balance as number,
+          balance: walletAccount.balance,
           icon: walletAccount.icon ?? 'CreditCard',
           description: walletAccount.description ?? '',
           lastDigits: walletAccount.lastDigits ?? '',

diff --git a/apps/mobile/app/(app)/wallet/accounts.tsx b/apps/mobile/app/(app)/wallet/accounts.tsx
@@ -17,13 +17,7 @@ export default function WalletAccountsScreen() {
       className="bg-card"
       contentContainerClassName="py-3"
       data={walletAccounts}
-      renderItem={({ item }) => (
-        <WalletAccountItem
-          // Date is typed as string in rpc output, not sure why
-          // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-          data={item as any}
-        />
-      )}
+      renderItem={({ item }) => <WalletAccountItem data={item} />}
       keyExtractor={(item) => item.id}
       refreshing={isLoading}
       onRefresh={refetch}

diff --git a/apps/mobile/components/form-fields/input-field.tsx b/apps/mobile/components/form-fields/input-field.tsx
@@ -45,7 +45,7 @@ export const InputField = forwardRef(
             ref={ref}
             onChangeText={onChange}
             onBlur={onBlur}
-            value={value}
+            value={value?.toString()}
             className={cn(
               className,
               leftSection && 'pl-10',

diff --git a/apps/mobile/components/transaction/select-account-field.tsx b/apps/mobile/components/transaction/select-account-field.tsx
@@ -1,6 +1,6 @@
 import { sleep } from '@/lib/utils'
 import { useWallets } from '@/queries/wallet'
-import type { UserWalletAccount } from '@6pm/validation'
+import type { WalletAccountWithBalance } from '@6pm/validation'
 import {
   BottomSheetBackdrop,
   BottomSheetFlatList,
@@ -20,7 +20,7 @@ import { Text } from '../ui/text'
 export function SelectAccountField({
   onSelect,
 }: {
-  onSelect?: (walletAccount: UserWalletAccount) => void
+  onSelect?: (walletAccount: WalletAccountWithBalance) => void
 }) {
   const { bottom } = useSafeAreaInsets()
   const { data: walletAccounts, isLoading } = useWallets()

diff --git a/apps/mobile/components/wallet/wallet-account-item.tsx b/apps/mobile/components/wallet/wallet-account-item.tsx
@@ -1,4 +1,4 @@
-import type { UserWalletAccount } from '@6pm/validation'
+import type { WalletAccountWithBalance } from '@6pm/validation'
 import { Link } from 'expo-router'
 import { ChevronRightIcon } from 'lucide-react-native'
 import type { FC } from 'react'
@@ -8,7 +8,7 @@ import { MenuItem } from '../common/menu-item'
 import { Text } from '../ui/text'
 
 type WalletAccountItemProps = {
-  data: UserWalletAccount & { balance: number }
+  data: WalletAccountWithBalance
 }
 
 export const WalletAccountItem: FC<WalletAccountItemProps> = ({ data }) => {

diff --git a/apps/mobile/queries/wallet.ts b/apps/mobile/queries/wallet.ts
@@ -1,5 +1,5 @@
 import { getHonoClient } from '@/lib/client'
-import { UserWalletAccountSchema } from '@6pm/validation'
+import { WalletAccountWithBalanceSchema } from '@6pm/validation'
 import { createQueryKeys } from '@lukemorales/query-key-factory'
 import { useQuery } from '@tanstack/react-query'
 
@@ -14,7 +14,7 @@ export const walletQueries = createQueryKeys('wallet', {
       }
       const rawResult = await res.json()
       const result = rawResult.map((item) =>
-        UserWalletAccountSchema.parse(item),
+        WalletAccountWithBalanceSchema.parse(item),
       )
       return result
     },

diff --git a/packages/validation/src/wallet.zod.ts b/packages/validation/src/wallet.zod.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod'
+import { UserWalletAccountSchema } from './prisma'
 
 export const zCreateWallet = z.object({
   name: z.string(),
@@ -22,3 +23,11 @@ export const zAccountFormValues = zCreateWallet.extend({
   balance: z.number({ coerce: true }).positive().optional(),
 })
 export type AccountFormValues = z.infer<typeof zAccountFormValues>
+
+export const WalletAccountWithBalanceSchema = UserWalletAccountSchema.extend({
+  balance: z.number({ coerce: true }).optional(),
+})
+
+export type WalletAccountWithBalance = z.infer<
+  typeof WalletAccountWithBalanceSchema
+>