feat(mobile): add onboard user budget screen (#230)

get6pm · Aug 20, 2024 · 8ffbf18 · 8ffbf18
1 parent 4d3edbd
commit 8ffbf18
Show file tree

Hide file tree

Showing 8 changed files with 243 additions and 5 deletions.
diff --git a/apps/mobile/app/(app)/_layout.tsx b/apps/mobile/app/(app)/_layout.tsx
@@ -2,15 +2,15 @@ import { BackButton } from '@/components/common/back-button'
 import { Button } from '@/components/ui/button'
 import { useColorScheme } from '@/hooks/useColorScheme'
 import { theme } from '@/lib/theme'
-import { useAuth } from '@clerk/clerk-expo'
+import { useUser } from '@clerk/clerk-expo'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { Link, Redirect, SplashScreen, Stack } from 'expo-router'
 import { PlusIcon } from 'lucide-react-native'
 import { useEffect } from 'react'
 
 export default function AuthenticatedLayout() {
-  const { isLoaded, isSignedIn } = useAuth()
+  const { user, isLoaded, isSignedIn } = useUser()
   const { colorScheme } = useColorScheme()
   const { i18n } = useLingui()
 
@@ -24,6 +24,10 @@ export default function AuthenticatedLayout() {
     return <Redirect href={'/login'} />
   }
 
+  if (!user?.unsafeMetadata?.onboardedAt && isLoaded) {
+    return <Redirect href={'/onboarding/step-one'} />
+  }
+
   return (
     <Stack
       screenOptions={{

diff --git a/apps/mobile/app/onboarding/_layout.tsx b/apps/mobile/app/onboarding/_layout.tsx
@@ -0,0 +1,35 @@
+import { BackButton } from '@/components/common/back-button'
+import { useColorScheme } from '@/hooks/useColorScheme'
+import { theme } from '@/lib/theme'
+import { Stack } from 'expo-router'
+
+export default function OnboardingLayout() {
+  const { colorScheme } = useColorScheme()
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: theme[colorScheme ?? 'light'].background,
+        },
+        headerShadowVisible: false,
+        headerLeft: () => <BackButton />,
+        headerTitle: '',
+      }}
+    >
+      <Stack.Screen
+        name="step-one"
+        options={{
+          headerLeft: () => null,
+        }}
+      />
+      <Stack.Screen
+        name="step-two"
+        options={{
+          headerStyle: {
+            backgroundColor: theme[colorScheme ?? 'light'].muted,
+          },
+        }}
+      />
+    </Stack>
+  )
+}
diff --git a/apps/mobile/app/onboarding/step-one.tsx b/apps/mobile/app/onboarding/step-one.tsx
@@ -0,0 +1,40 @@
+import { OnboardIllustration } from '@/components/svg-assets/onboard-illustration'
+import { Button } from '@/components/ui/button'
+import { Text } from '@/components/ui/text'
+import { t } from '@lingui/macro'
+import { useLingui } from '@lingui/react'
+import { Link } from 'expo-router'
+import { ArrowRightIcon } from 'lucide-react-native'
+import { ScrollView, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+export default function StepOneScreen() {
+  const { i18n } = useLingui()
+  const { bottom } = useSafeAreaInsets()
+
+  return (
+    <ScrollView
+      className="bg-card"
+      contentContainerClassName="gap-4 p-8 pt-4 flex-1 justify-between"
+      automaticallyAdjustKeyboardInsets
+      keyboardShouldPersistTaps="handled"
+      contentContainerStyle={{ paddingBottom: bottom + 32 }}
+    >
+      <View className="gap-4">
+        <Text className="font-sans font-semibold text-3xl text-primary">
+          {t(i18n)`Welcome to 6pm!`}
+        </Text>
+        <Text className="font-sans text-muted-foreground">
+          {t(i18n)`Get started by setting your monthly budget.`}
+        </Text>
+      </View>
+      <OnboardIllustration className="my-16 h-[326px] text-primary" />
+      <Link href="/onboarding/step-two" asChild>
+        <Button className="mx-auto">
+          <Text>{t(i18n)`Set Monthly Budget`}</Text>
+          <ArrowRightIcon className="size-6 text-primary-foreground" />
+        </Button>
+      </Link>
+    </ScrollView>
+  )
+}
diff --git a/apps/mobile/app/onboarding/step-two.tsx b/apps/mobile/app/onboarding/step-two.tsx
@@ -0,0 +1,133 @@
+import { SubmitButton } from '@/components/form-fields/submit-button'
+import { NumericPad } from '@/components/numeric-pad'
+import { TransactionAmount } from '@/components/transaction/transaction-form'
+import { Text } from '@/components/ui/text'
+import { useCreateBudget } from '@/stores/budget/hooks'
+import { useDefaultCurrency } from '@/stores/user-settings/hooks'
+import { BudgetPeriodTypeSchema, BudgetTypeSchema } from '@6pm/validation'
+import { useUser } from '@clerk/clerk-expo'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { t } from '@lingui/macro'
+import { useLingui } from '@lingui/react'
+import { createId } from '@paralleldrive/cuid2'
+import * as Haptics from 'expo-haptics'
+import { useRouter } from 'expo-router'
+import {
+  Controller,
+  FormProvider,
+  type UseFormReturn,
+  useForm,
+  useWatch,
+} from 'react-hook-form'
+import { ScrollView, View } from 'react-native'
+import { z } from 'zod'
+
+const zOnboardBudgetForm = z.object({
+  amount: z.number(),
+  currency: z.string(),
+})
+
+type OnboardBudgetFormValues = z.infer<typeof zOnboardBudgetForm>
+
+export function FormSubmitButton({
+  form,
+  onSubmit,
+}: {
+  form: UseFormReturn<OnboardBudgetFormValues>
+  onSubmit: (data: OnboardBudgetFormValues) => void
+}) {
+  const { i18n } = useLingui()
+  const amount = useWatch({ name: 'amount' })
+
+  return (
+    <SubmitButton
+      onPress={form.handleSubmit(onSubmit)}
+      onPressIn={Haptics.selectionAsync}
+      disabled={form.formState.isLoading || !amount}
+      className="m-2 self-end"
+    >
+      <Text>{t(i18n)`Set Budget`}</Text>
+    </SubmitButton>
+  )
+}
+
+export default function StepTwoScreen() {
+  const { i18n } = useLingui()
+  const defaultCurrency = useDefaultCurrency()
+  const { mutateAsync } = useCreateBudget()
+  const { user } = useUser()
+  const router = useRouter()
+
+  const form = useForm<OnboardBudgetFormValues>({
+    resolver: zodResolver(zOnboardBudgetForm),
+    defaultValues: {
+      amount: 0,
+      currency: defaultCurrency,
+    },
+  })
+
+  async function handleSubmit(data: OnboardBudgetFormValues) {
+    await mutateAsync({
+      data: {
+        name: t(i18n)`Monthly budget`,
+        description: '',
+        preferredCurrency: data.currency,
+        type: BudgetTypeSchema.Enum.SPENDING,
+        period: {
+          id: createId(),
+          amount: data.amount,
+          type: BudgetPeriodTypeSchema.Enum.MONTHLY,
+        },
+      },
+      id: createId(),
+    }).catch(() => {
+      // ignore
+    })
+
+    await user?.update({
+      unsafeMetadata: {
+        onboardedAt: new Date().toISOString(),
+      },
+    })
+
+    router.replace('/')
+  }
+
+  return (
+    <FormProvider {...form}>
+      <ScrollView
+        className="bg-card"
+        contentContainerClassName="gap-4 pt-4 flex-1 bg-muted justify-between"
+        automaticallyAdjustKeyboardInsets
+        keyboardShouldPersistTaps="handled"
+      >
+        <View className="gap-4 px-8">
+          <Text className="font-sans font-semibold text-3xl text-primary">
+            {t(i18n)`Set your monthly spending goal`}
+          </Text>
+          <Text className="font-sans text-muted-foreground">
+            {t(
+              i18n,
+            )`If you're not sure, start with how much you usually spend per month.`}
+          </Text>
+        </View>
+        <View className="h-24 w-full items-center justify-end gap-2">
+          <TransactionAmount />
+          <Text className="font-sans text-muted-foreground">
+            {t(i18n)`* you can always change this later.`}
+          </Text>
+        </View>
+        <View>
+          <FormSubmitButton form={form} onSubmit={handleSubmit} />
+          <Controller
+            name="amount"
+            control={form.control}
+            render={({ field: { onChange, value } }) => (
+              <NumericPad value={value} onValueChange={onChange} />
+            )}
+          />
+        </View>
+      </ScrollView>
+    </FormProvider>
+  )
+}
diff --git a/apps/mobile/components/budget/budget-item.tsx b/apps/mobile/components/budget/budget-item.tsx
@@ -105,7 +105,7 @@ export const BudgetItem: FC<BudgetItemProps> = ({ budget }) => {
         </View>
         <Separator />
         <View className="flex-row items-center justify-between gap-6">
-          <View className="gap-1">
+          <View className="flex-1 gap-1">
             <AmountFormat
               amount={remainingBalance}
               displayNegativeSign

diff --git a/apps/mobile/components/common/amount-format.tsx b/apps/mobile/components/common/amount-format.tsx
@@ -4,7 +4,7 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { useMemo } from 'react'
 import { Text } from '../ui/text'
 
-const amountVariants = cva('shrink-0 font-semibold', {
+const amountVariants = cva('line-clamp-1 shrink-0 font-semibold', {
   variants: {
     size: {
       xl: 'text-4xl',

diff --git a/apps/mobile/components/svg-assets/onboard-illustration.tsx b/apps/mobile/components/svg-assets/onboard-illustration.tsx
@@ -0,0 +1,26 @@
+import Svg, { type SvgProps, G, Path, Defs, ClipPath } from 'react-native-svg'
+
+export const OnboardIllustration = (props: SvgProps) => (
+  <Svg viewBox="0 0 180 343" fill="none" {...props}>
+    <G fill="currentColor" clipPath="url(#a)">
+      <Path d="M73.097 56.554a.852.852 0 0 0-.54.591s-1.196 4.732-6.4 10.991c-5.205 6.26-14.394 13.961-30.383 19.61a.854.854 0 0 0-.562.916s.973 7.297 3.754 16.39c2.78 9.094 7.353 20.024 14.714 27.384 7.28 7.281 14.935 11.48 22.402 12.206 7.467.726 14.686-2.083 20.874-8.539 6.265-6.537 11.161-18.827 13.195-32.555 2.034-13.728 1.169-28.897-4.45-41.114a.855.855 0 0 0-1.095-.435s-15.101 6.168-30.717-5.329a.854.854 0 0 0-.792-.116Zm.733 2.127c13.846 9.597 27.311 6.238 30.624 5.173 5.141 11.674 5.966 26.232 4.009 39.444-1.997 13.477-6.914 25.546-12.74 31.624-5.904 6.16-12.53 8.697-19.475 8.022-6.946-.676-14.273-4.625-21.361-11.714-7.01-7.009-11.55-17.72-14.29-26.676-2.38-7.782-3.362-13.906-3.592-15.457 15.831-5.72 25.144-13.472 30.463-19.87 3.938-4.734 5.687-8.711 6.362-10.545Z" />
+      <Path
+        fillRule="evenodd"
+        d="M63.925 18.351c3.974-4.033 18.865-16.407 39.599-.597 22.231 16.952 28.259 69.667 4.23 93.667 3.733-15.435 3.801-34.213-2.828-48.63 0 0-15.596 6.307-31.543-5.434 0 0-5.08 19.802-37.325 31.193 0 0 .28 2.094.969 5.437-2.987-3.513-6.694-7.122-9.371-7.197-5.24-.143-7.391 7.824-1.29 16.079 3.438 4.653 10.023 5.845 14.767 6.052 1.84 5.252 4.279 10.811 7.453 15.738-12.786.764-37.297-1.903-45.823-31.553 0 0 7.519-9.467 7.886-27.163.518-25.055 24.042-62.895 51.079-47.133C59.69 6.065 51.355 4.384 51.355 4.384a.854.854 0 0 1 .318-1.677s4.133.747 7.608 5.346c1.272 1.683 2.464 3.897 3.315 6.798.188-1.267.448-2.607.802-3.953 1.082-4.112 3.057-8.263 6.538-10.74a.854.854 0 0 1 .988 1.39c-3.16 2.25-4.894 6.052-5.877 9.785-.661 2.515-.977 5.009-1.122 7.018Z"
+        clipRule="evenodd"
+      />
+      <Path d="M84.476 62.169a.853.853 0 0 0-.577.305c-9.98 12.052-5.896 30.61 6.314 36.182a.853.853 0 1 0 .709-1.552c-11.024-5.03-14.99-22.333-5.709-33.541a.853.853 0 0 0-.737-1.394Z" />
+      <Path d="M101.187 75.162a.851.851 0 0 0-1.068.563c-1.666 5.375-4.99 8.475-8.697 9.525-3.706 1.05-7.852.06-11.255-3.08a.855.855 0 0 0-1.38.332.853.853 0 0 0 .223.922c3.783 3.491 8.575 4.688 12.878 3.468 4.303-1.22 8.058-4.845 9.862-10.662a.85.85 0 0 0-.563-1.068ZM69.364 85.654a.853.853 0 0 0-.924.776c-.657 7.538-4.874 10.922-9.28 11.336-4.406.414-9.054-2.23-10.585-7.488a.853.853 0 0 0-1.638.477c1.748 6.007 7.184 9.198 12.383 8.71 5.199-.488 10.11-4.742 10.82-12.887a.852.852 0 0 0-.776-.924ZM64.155 120.604a.863.863 0 0 0-.465.459.849.849 0 0 0-.005.653c1.446 3.574 4.512 5.687 8.018 6.545 3.506.857 7.482.526 11.055-.7a.854.854 0 0 0-.554-1.614c-3.29 1.129-6.983 1.417-10.096.656-3.113-.761-5.618-2.504-6.842-5.528a.851.851 0 0 0-.784-.533.852.852 0 0 0-.327.062ZM91.886 138.455a.85.85 0 0 0-.552.349.852.852 0 0 0-.144.637c1.477 8.615 4.86 15.049 10.796 18.3a.854.854 0 1 0 .819-1.497c-5.344-2.926-8.505-8.762-9.933-17.092a.859.859 0 0 0-.653-.688.847.847 0 0 0-.332-.009ZM55.388 154.783a.849.849 0 0 0-.608.096s-33.71 19.677-36.223 65.975c-2.51 46.197 20.198 75.475 31.682 84.62a.853.853 0 0 0 1.378-.776s-.238-1.724.58-4.989c.817-3.264 2.702-7.981 7.008-13.691a.86.86 0 0 0 .164-.633.854.854 0 0 0-1.526-.395c-4.435 5.881-6.428 10.816-7.302 14.305a20.758 20.758 0 0 0-.594 3.682c-11.337-9.879-32.067-38.202-29.686-82.03 2.337-43.043 31.574-62.227 34.764-64.199 8.986 11.714 24.206 10.457 24.206 10.457a.852.852 0 1 0-.142-1.7s-14.869 1.217-23.186-10.385a.85.85 0 0 0-.515-.337ZM86.62 217.235a.854.854 0 0 0-.566.325c-10.32 13.397-22.726 40.631-19.445 70.397a.852.852 0 0 0 .942.754.856.856 0 0 0 .755-.941c-3.217-29.185 9.062-56.137 19.1-69.169a.853.853 0 0 0-.786-1.366Z" />
+      <Path d="M52.12 193.024a.839.839 0 0 0-.494.428c-9.36 18.695-9.396 37.802-5.23 53.785 4.165 15.984 12.483 28.857 20.055 35.287a.854.854 0 0 0 1.104-1.301c-7.18-6.097-15.427-18.755-19.508-34.416-4.082-15.661-4.048-34.311 5.105-52.592a.852.852 0 0 0-1.032-1.191ZM93.135 156.673c-1.607-.052-3.453.383-5.526 1.429-2.666 1.344-4.294 3.397-5.152 5.644-.859 2.246-.983 4.673-.794 6.904.15 1.756.504 3.319.871 4.672-2.053-1.85-4.07-3.055-5.987-3.638-2.723-.827-5.256-.433-7.208.848-3.904 2.562-5.442 8.404-3.212 14.384 4.45 11.934 20.322 17.308 20.322 17.308a.859.859 0 0 0 .918-.238.856.856 0 0 0-.07-1.205.865.865 0 0 0-.286-.169s-15.25-5.471-19.285-16.292c-2.013-5.399-.515-10.35 2.55-12.361 1.532-1.006 3.466-1.343 5.775-.642 2.309.702 4.987 2.483 7.783 5.771a.851.851 0 0 0 1.102.171.855.855 0 0 0 .33-1.066s-1.553-3.566-1.903-7.688c-.175-2.061-.043-4.239.688-6.15.73-1.911 2.025-3.569 4.326-4.729 3.02-1.523 5.116-1.511 6.69-.804 1.574.708 2.73 2.215 3.548 4.007 1.639 3.584 1.816 8.079 1.816 8.079a.856.856 0 0 0 .876.831.852.852 0 0 0 .83-.876s-.048-3.941 1.176-7.019c.611-1.538 1.507-2.792 2.762-3.357 1.255-.564 3.01-.555 5.66.833 2.455 1.286 3.632 3.979 3.97 7.573.337 3.594-.222 7.974-1.138 12.185-1.834 8.424-5.058 16.162-5.058 16.162a.856.856 0 0 0 .459 1.117.854.854 0 0 0 1.116-.46s3.275-7.839 5.15-16.456c.938-4.308 1.535-8.814 1.17-12.707-.366-3.893-1.75-7.288-4.877-8.926-2.934-1.536-5.326-1.698-7.152-.877-1.826.822-2.944 2.512-3.648 4.283a15.309 15.309 0 0 0-.552 1.718 19.463 19.463 0 0 0-1.007-2.812c-.92-2.011-2.295-3.907-4.402-4.854a6.907 6.907 0 0 0-2.631-.592v-.001ZM106.685 200.422c-2.081-.235-5.62.606-9.362 2.024-3.743 1.418-7.552 3.414-9.676 5.902-1.068 1.25-1.528 2.51-1.51 3.659.02 1.149.496 2.128 1.075 2.889 1.156 1.522 2.787 2.326 2.787 2.326a.852.852 0 0 0 .993-.16c6.129-6.185 12.78-8.456 20.194-7.214a.856.856 0 0 0 .959-.6c.85-2.881.514-5.077-.651-6.537-1.166-1.461-2.989-2.082-4.808-2.289h-.001Zm-.192 1.696c1.559.177 2.906.704 3.666 1.657.685.858.986 2.19.498 4.303-7.407-.996-14.288 1.418-20.367 7.316-.454-.285-1.13-.753-1.72-1.53-.428-.563-.715-1.191-.726-1.884-.011-.693.235-1.51 1.1-2.524 1.744-2.042 5.39-4.053 8.983-5.415 3.592-1.36 7.265-2.07 8.566-1.923Z" />
+      <Path d="M99.47 147.597a.853.853 0 1 0-.173 1.697s27.179 2.709 41.614 33.401c14.599 31.04 17.564 38.638 18.624 70.305.529 15.736-2.5 26.249-7.051 34.012-4.551 7.763-10.657 12.804-16.423 17.495-.687.559-1.238.745-1.706.756-.468.011-.906-.151-1.373-.496-.934-.691-1.848-2.142-2.511-3.593a.853.853 0 0 0-.806-.499.85.85 0 0 0-.746 1.207c.719 1.577 1.67 3.238 3.049 4.257.689.509 1.519.851 2.428.83.908-.022 1.841-.405 2.742-1.138 5.772-4.696 12.093-9.896 16.818-17.955 4.725-8.06 7.821-18.951 7.285-34.932-1.064-31.767-4.178-39.916-18.786-70.975-14.771-31.407-42.984-34.372-42.984-34.372Z" />
+      <Path d="M116.434 212.24a.856.856 0 0 0-.6 1.047.86.86 0 0 0 .399.517c10.591 6.069 20.135 11.244 26.276 18.945 6.114 7.666 9 17.862 6.25 34.397-.241.297-5.88 7.245-9.673 11.322-1.037 1.112-1.731 2.17-2.084 3.176-.354 1.005-.357 2.025.153 2.825.509.801 1.442 1.233 2.524 1.332.554.051 1.164.019 1.828-.085-10.678 17.691-24.077 25.397-39.834 25.556a.846.846 0 0 0-.601.256.857.857 0 0 0 .012 1.206.852.852 0 0 0 .606.244c16.843-.169 31.3-8.843 42.351-28.16a.86.86 0 0 0-.08-.963.853.853 0 0 0-.928-.271c-1.364.449-2.454.586-3.198.518-.744-.068-1.083-.302-1.241-.549-.158-.248-.223-.656.018-1.344.241-.687.799-1.587 1.722-2.579 3.962-4.257 9.896-11.586 9.896-11.586a.851.851 0 0 0 .178-.395c2.865-16.973-.122-27.884-6.565-35.964-6.444-8.08-16.194-13.306-26.762-19.362a.84.84 0 0 0-.648-.083h.001Z" />
+      <Path d="M150.39 260.493a.854.854 0 0 0-.025 1.706c2.131.031 4.319.42 6.579 1.202a.853.853 0 1 0 .558-1.613c-2.417-.836-4.79-1.261-7.112-1.295ZM172.036 262.36a.854.854 0 0 0-.053 1.705l7.138.222a.852.852 0 1 0 .052-1.705l-7.137-.222ZM125.603 139.914a.852.852 0 0 0-1.075.548l-3.048 9.366a.852.852 0 1 0 1.622.528l3.049-9.366a.863.863 0 0 0-.051-.651.861.861 0 0 0-.497-.425ZM159.203 172.14a.865.865 0 0 0-.567.324l-7.137 9.217a.859.859 0 0 0 .152 1.198.854.854 0 0 0 1.197-.153l7.138-9.217a.852.852 0 0 0-.783-1.369ZM177.327 212.274a.854.854 0 0 0-.653.002l-9.219 3.855a.854.854 0 0 0 .658 1.574l9.219-3.854a.855.855 0 0 0 .524-.79.856.856 0 0 0-.529-.787ZM154.833 305.267a.864.864 0 0 0-.598.263.852.852 0 0 0 .026 1.206l7.06 6.765a.863.863 0 0 0 .609.237.868.868 0 0 0 .598-.263.874.874 0 0 0 .179-.281.868.868 0 0 0-.205-.926l-7.061-6.764a.853.853 0 0 0-.608-.237ZM106.48 326.677a.852.852 0 0 0-.798.905l.892 14.123a.86.86 0 0 0 .287.587.866.866 0 0 0 .618.211.855.855 0 0 0 .798-.905l-.892-14.123a.855.855 0 0 0-.905-.798ZM54.248 314.373a.853.853 0 0 0-.503.415l-6.54 12.341a.853.853 0 1 0 1.508.799l6.54-12.341a.852.852 0 0 0-1.005-1.214ZM19.936 280.07a.853.853 0 0 0-.58.3l-7.137 8.475a.86.86 0 0 0-.198.622.848.848 0 0 0 .3.58.859.859 0 0 0 .623.198.854.854 0 0 0 .58-.301l7.137-8.475a.842.842 0 0 0 .198-.622.855.855 0 0 0-.923-.777ZM9.132 240.384a.844.844 0 0 0-.65.061l-8.027 4.236a.854.854 0 1 0 .796 1.509l8.028-4.236a.855.855 0 0 0 .356-1.153.854.854 0 0 0-.503-.417ZM3.977 196.004a.847.847 0 0 0-.647.092.847.847 0 0 0-.41.855.85.85 0 0 0 .633.706l11.734 3.014a.855.855 0 0 0 1.039-.614.855.855 0 0 0-.614-1.039l-11.735-3.014ZM24.815 154.516a.847.847 0 0 0-.854.412.858.858 0 0 0 .055.947l9.752 12.924a.85.85 0 0 0 1.196.167.85.85 0 0 0 .167-1.194l-9.753-12.925a.863.863 0 0 0-.563-.331ZM72.12 290.893c-6.6-.276-12.935 3.517-12.935 3.517a.854.854 0 0 0 .858 1.475s8.018-4.526 14.499-2.944c1.704.416 3.366.962 4.617 1.59 1.252.628 2.011 1.359 2.165 1.855.076.248.073.456-.095.793-.169.336-.54.782-1.195 1.281-1.312.997-3.725 2.181-7.514 3.444a.859.859 0 0 0-.58.748.85.85 0 0 0 .466.824s7.952 4.07 15.241 4.289c3.417.101 6.707.685 8.51 1.532.902.424 1.344.901 1.424 1.171.081.271.034.632-.75 1.339-.608.545-1.848 1.009-3.45 1.262-1.602.252-3.548.323-5.561.28-4.026-.086-8.316-.616-10.891-.924-8.976-1.073-14.577-2.853-17.909-4.339-1.665-.743-2.763-1.413-3.435-1.885-.671-.471-.874-.701-.874-.701a.855.855 0 0 0-1.479.547.852.852 0 0 0 .226.612s.38.4 1.146.939c.766.538 1.962 1.262 3.721 2.046 3.518 1.57 9.288 3.386 18.401 4.476 2.567.306 6.909.847 11.058.935 2.074.044 4.101-.023 5.863-.301 1.762-.278 3.278-.738 4.325-1.679 1.035-.931 1.555-2.054 1.244-3.095-.311-1.041-1.22-1.704-2.333-2.227-2.225-1.046-5.618-1.588-9.185-1.694-4.726-.141-9.911-2.106-12.612-3.262 2.742-1.024 4.696-2.003 5.98-2.978.791-.602 1.354-1.209 1.688-1.875.334-.666.401-1.411.2-2.062-.403-1.302-1.595-2.156-3.03-2.876-1.433-.72-3.19-1.286-4.978-1.722a14.459 14.459 0 0 0-2.827-.39v-.001ZM110.742 226.579c-2.441-.159-5.328.598-8.686 2.738-6.77 4.316-8.56 11.01-6.723 15.986.918 2.488 2.743 4.55 5.237 5.625 2.494 1.074 5.626 1.141 9.077-.205 5.644-2.202 9.003-2.49 11-1.59 1.997.9 3.062 3.105 3.936 6.682.939 3.841.307 7.059-1.316 9.757-1.623 2.697-4.276 4.868-7.406 6.406-2.526 1.241-5.083 1.233-7.322.043-2.239-1.19-4.193-3.612-5.285-7.39a.855.855 0 0 0-1.668.142.846.846 0 0 0 .028.332c1.19 4.115 3.4 6.976 6.124 8.423 2.723 1.448 5.926 1.431 8.875-.019 3.357-1.649 6.279-4.006 8.116-7.058 1.836-3.052 2.547-6.807 1.512-11.041-.912-3.731-2.161-6.601-4.893-7.832-2.732-1.232-6.518-.708-12.321 1.555-3.112 1.214-5.736 1.109-7.782.227-2.045-.881-3.54-2.558-4.311-4.648-1.542-4.179-.18-9.991 6.04-13.956 3.138-2.001 5.651-2.605 7.657-2.474 2.005.13 3.554.989 4.787 2.119 2.464 2.259 3.494 5.565 3.494 5.565a.86.86 0 0 0 1.064.57.86.86 0 0 0 .57-1.064s-1.081-3.676-3.975-6.329c-1.447-1.326-3.389-2.406-5.829-2.564Z" />
+      <Path d="M99.827 220.725a.851.851 0 0 0-.506 1.095l22.199 60.348a.857.857 0 0 0 1.096.506.853.853 0 0 0 .506-1.095l-22.199-60.348a.854.854 0 0 0-1.096-.506Z" />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill="#fff" d="M0 0h180v342.505H0z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+)
diff --git a/apps/mobile/components/transaction/transaction-form.tsx b/apps/mobile/components/transaction/transaction-form.tsx
@@ -42,7 +42,7 @@ type TransactionFormProps = {
   sideOffset?: number
 }
 
-function TransactionAmount() {
+export function TransactionAmount() {
   const { colorScheme } = useColorScheme()
   const sheetRef = useRef<BottomSheetModal>(null)
   const [amount] = useWatch({ name: ['amount'] })