Asset Detail
The full picture
Overview
The asset detail screen is where you drill into a single asset. At the top is a large price display with the daily change. Below that is an interactive chart that supports multiple time periods (1D, 1W, 1M, 3M, YTD, 1Y, MAX depending on the asset type). The screen has three tabs: Overview shows your position details, History shows your transaction log for this asset, and News shows relevant articles. If you do not own the asset yet, there is an "Add to Portfolio" button. If you navigated here from the Market tab, the screen adapts to show market data even without a portfolio position.
How it works
Navigation to this screen can happen two ways: from your holdings (passing the asset ID) or from the market (passing the symbol directly). The screen handles both by first trying getAssetById, then falling back to getAssetBySymbol, and finally treating the URL param as a raw symbol for market only assets.
Price and chart data come from useAssetDetailData, a custom hook that coordinates fetching the current quote and historical prices based on the selected time period. It handles the different API endpoints needed for stocks vs crypto vs forex vs commodities.
The tab navigation uses a custom animated underline similar to the market screen. Tab widths are measured with onLayout and the underline position animates with React Native Animated.
Transaction history comes from useTransactionStore.getTransactions(assetId) which filters the user transactions for this specific asset.
News is fetched via useAssetNews which queries a news endpoint filtered by the asset symbol. This only loads when you tap the News tab to avoid unnecessary API calls.
The watchlist toggle (heart icon) uses useMarketStore to add or remove the asset from your local watchlist.
Key decisions
Dual navigation pattern
This screen needs to work whether you tap an asset from your portfolio or from the market browser. From portfolio, we pass the internal asset ID. From market, we pass the ticker symbol. The screen resolves both into the same view, but portfolio assets get extra data like your position and transaction history. This avoids having two separate detail screens.
Lazy tab loading
The News tab can be slow to load and users might never tap it. So we only fetch news data when the user actually switches to that tab. The Overview and History tabs use data that is already available from the portfolio store, so they render instantly.
Available periods per asset type
Not all assets support all time periods. Stocks have full history going back years, but some forex pairs only have daily and weekly data. The getAvailablePeriods utility checks the asset type and symbol to return only the time periods we can actually show data for. This avoids showing an empty chart.