Add Transaction
Log it in seconds
Overview
Adding an asset starts with a choice screen: auto priced or manual. Auto priced shows a searchable catalog where you pick a stock, ETF, crypto, commodity, or forex pair. Manual lets you enter real estate, fixed income (bonds, CDs), or savings accounts. Once you pick an asset, you land on the transaction form. For auto priced assets the form shows the current market price and lets you enter quantity and total cost. For manual assets the form changes completely depending on the type. Fixed income has fields for maturity date, coupon rate, and interest frequency. Real estate has property value and address fields. Savings has balance and APY. The form also supports editing existing positions and adding additional buy/sell transactions to existing holdings.
How it works
The entry point is app/add-transaction/index.tsx which shows two cards: Auto Priced and Manual. Each card lists the asset categories it supports with little pill icons.
Tapping Auto Priced goes to app/add-transaction/auto.tsx, a full screen browser with category tabs and search. This uses the same Alpha Vantage search as the market screen. Selecting an asset navigates to the transaction form.
Tapping Manual goes to app/add-transaction/manual.tsx which shows category cards (Fixed Income, Real Estate, Savings). Tapping one goes to manual/[category].tsx where you name your asset and set it up.
The actual form lives in app/add-transaction/[symbol].tsx. It is a single component that adapts based on the asset type. Auto priced assets get AutoPricedFields, fixed income gets FixedIncomeFields, real estate gets RealEstateFields, and savings gets SavingsFields.
On submit, the form builds an Asset object using buildAssetFromForm utility, then calls addAsset on the portfolio store. The store persists locally and enqueues a sync operation for the server.
For fixed income assets with maturity dates, the form can optionally schedule push notification reminders using expo-notifications. It detects bond ETFs and suggests appropriate reminder dates.
Key decisions
Two entry points instead of one
Early versions had a single "add asset" flow that tried to handle both auto priced and manual assets. It was confusing because the form kept changing based on the type. Splitting into two clear paths (auto vs manual) made the UX much cleaner and each path could be optimized for its use case.
Dynamic form fields per asset type
Instead of one giant form with conditionally hidden fields, we built separate field components for each asset type. AutoPricedFields, FixedIncomeFields, RealEstateFields, and SavingsFields are each their own component. The parent form just renders the right one based on the asset type. Much easier to maintain.
Live market price in the form
For auto priced assets, the form shows the current market price using useMarketPrice hook. This helps users verify they are looking at the right asset and gives context for the numbers they are entering. The price updates in real time while the form is open.