Fixed a bunch of things and implemented proper APIs

Author: mbianchidev

README.md

@@ -16,6 +16,27 @@ Fire Tools is provided for **educational and planning purposes only**. The calcu
 
 **Always do your research or consult with a qualified financial advisor before making investment decisions.**
 
+### Market Data Disclaimer
+
+Fire Tools fetches live asset prices and exchange rates from **Yahoo Finance** through a community open-source integration. This data is provided **as an indication only**:
+
+- Prices may be **delayed, incomplete, or inaccurate**
+- We take **no responsibility** for wrong or delayed market data
+- The Yahoo Finance API is **not officially endorsed** by Yahoo and may **stop working at any time** without notice
+- This is a community-discovered endpoint, not a supported commercial API
+- **Always verify prices** with your broker or a professional financial data provider before making investment decisions
+
+### Rate Limits
+
+To avoid overloading the Yahoo Finance API, Fire Tools enforces the following limits:
+
+| Limit | Value | Description |
+|-------|-------|-------------|
+| **Per-request throttle** | 1 second | Minimum delay between consecutive API calls |
+| **Daily budget** | 500 requests | Maximum requests per calendar day (resets at midnight) |
+
+When limits are reached, the app gracefully falls back to the last known prices and hardcoded default exchange rates. You can check the current rate-limit status in **Settings → Market Data**.
+
 **[Try it live →](https://mbianchidev.github.io/fire-tools/)**
 
 ---

src/App.tsx

@@ -480,6 +480,7 @@ function App() {
           <footer className="app-footer">
             <p>
               Fire Tools - Disclaimer: This is for educational purposes only. 
+              Market data is provided as an indication only and may be delayed or inaccurate.
               Consult with a financial advisor for professional advice.
             </p>
             <div className="footer-links">

src/components/AssetAllocationManager.css

@@ -545,6 +545,52 @@
   cursor: not-allowed !important;
 }
 
+/* Ticker input with fetch button */
+.ticker-input-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: stretch;
+}
+
+.ticker-input-row .dialog-input {
+  flex: 1;
+}
+
+.ticker-fetch-btn {
+  padding: 0.5rem 0.75rem;
+  border: 2px solid var(--border-subtle);
+  border-radius: 6px;
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+}
+
+.ticker-fetch-btn:hover:not(:disabled) {
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
+}
+
+.ticker-fetch-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ticker-lookup-status {
+  font-size: 0.8rem;
+  margin-top: 0.25rem;
+}
+
+.ticker-lookup-status.success {
+  color: var(--success);
+}
+
+.ticker-lookup-status.error {
+  color: var(--error);
+}
+
 .dialog-actions {
   display: flex;
   gap: 1rem;
@@ -2582,3 +2628,79 @@ select:disabled {
   outline: none;
 }
 
+/* Price Refresh Row */
+.price-refresh-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.price-refresh-row .action-btn {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-subtle);
+}
+
+.price-refresh-row .action-btn:hover:not(:disabled) {
+  background: var(--accent-primary);
+  color: #fff;
+  border-color: var(--accent-primary);
+}
+
+.price-refresh-row .action-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.price-refresh-status {
+  font-size: 0.8rem;
+  color: var(--success);
+}
+
+.price-refresh-error {
+  font-size: 0.8rem;
+  color: var(--error);
+}
+
+.price-refresh-rates {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* Market price delta display in price cell */
+.price-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.market-price-delta {
+  font-size: 0.75rem;
+  display: flex;
+  gap: 0.35rem;
+  align-items: center;
+}
+
+.market-price-delta.gain {
+  color: var(--success);
+}
+
+.market-price-delta.loss {
+  color: var(--error);
+}
+
+.market-price {
+  opacity: 0.8;
+}
+
+.delta-pct {
+  font-weight: 600;
+}
+

src/components/AssetAllocationPage.tsx

@@ -13,6 +13,8 @@ import { exportAssetAllocationToCSV, importAssetAllocationFromCSV } from '../uti
 import { loadSettings, saveSettings } from '../utils/cookieSettings';
 import { getDemoAssetAllocationData } from '../utils/defaults';
 import { syncAssetAllocationToNetWorth } from '../utils/dataSync';
+import { useAssetPrices } from '../hooks/useAssetPrices';
+import { useExchangeRates } from '../hooks/useExchangeRates';
 import { MaterialIcon } from './MaterialIcon';
 import { EditableAssetClassTable } from './EditableAssetClassTable';
 import { AllocationChart } from './AllocationChart';
@@ -55,13 +57,13 @@ export const AssetAllocationPage: React.FC = () => {
   const defaultTargets = {
     STOCKS: { targetMode: 'PERCENTAGE' as AllocationMode, targetPercent: 60 },
     BONDS: { targetMode: 'PERCENTAGE' as AllocationMode, targetPercent: 40 },
-    CASH: { targetMode: 'SET' as AllocationMode },
-    CRYPTO: { targetMode: 'PERCENTAGE' as AllocationMode, targetPercent: 0 },
-    REAL_ESTATE: { targetMode: 'PERCENTAGE' as AllocationMode, targetPercent: 0 },
-    COMMODITIES: { targetMode: 'PERCENTAGE' as AllocationMode, targetPercent: 0 },
-    VEHICLE: { targetMode: 'OFF' as AllocationMode },
-    COLLECTIBLE: { targetMode: 'OFF' as AllocationMode },
-    ART: { targetMode: 'OFF' as AllocationMode },
+    CASH: { targetMode: 'SET' as AllocationMode, targetPercent: 0 },
+    CRYPTO: { targetMode: 'OFF' as AllocationMode, targetPercent: 0 },
+    REAL_ESTATE: { targetMode: 'OFF' as AllocationMode, targetPercent: 0 },
+    COMMODITIES: { targetMode: 'OFF' as AllocationMode, targetPercent: 0 },
+    VEHICLE: { targetMode: 'OFF' as AllocationMode, targetPercent: 0 },
+    COLLECTIBLE: { targetMode: 'OFF' as AllocationMode, targetPercent: 0 },
+    ART: { targetMode: 'OFF' as AllocationMode, targetPercent: 0 },
   };
 
   // Initialize from localStorage if available, otherwise use defaults
@@ -111,6 +113,33 @@ export const AssetAllocationPage: React.FC = () => {
 
   // Track if we're currently syncing to prevent infinite loops
   const isSyncingRef = useRef(false);
+  // Track whether initial price fetch has been done
+  const hasFetchedPricesRef = useRef(false);
+
+  // Yahoo Finance API hooks
+  const { refreshPrices, isLoading: isPriceLoading, lastRefresh: lastPriceRefresh, error: priceError } = useAssetPrices();
+  const { refresh: refreshRates, isLoading: isRatesLoading, lastUpdate: ratesLastUpdate, error: ratesError } = useExchangeRates();
+
+  // Fetch live prices on mount
+  useEffect(() => {
+    if (hasFetchedPricesRef.current) return;
+    const tickerAssets = assets.filter(a => a.ticker && a.ticker.trim().length > 0);
+    if (tickerAssets.length === 0) return;
+
+    hasFetchedPricesRef.current = true;
+    refreshPrices(assets).then(({ updatedAssets }) => {
+      updateAllocation(updatedAssets);
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Manual refresh handler
+  const handleRefreshPrices = async () => {
+    const { updatedAssets } = await refreshPrices(assets);
+    updateAllocation(updatedAssets);
+    // Also refresh exchange rates
+    await refreshRates();
+  };
 
   // Toggle privacy mode and save to settings
   const togglePrivacyMode = () => {
@@ -352,6 +381,35 @@ export const AssetAllocationPage: React.FC = () => {
   };
 
   const handleAddAsset = (newAsset: Asset) => {
+    // Check if an asset with the same ticker already exists (merge / "buy more")
+    const existingAsset = newAsset.ticker
+      ? assets.find(a => a.ticker.toUpperCase() === newAsset.ticker.toUpperCase() && a.assetClass === newAsset.assetClass)
+      : undefined;
+
+    if (existingAsset && existingAsset.shares && newAsset.shares) {
+      // Weighted average purchase price: (oldShares×oldPrice + newShares×newPrice) / totalShares
+      const oldShares = existingAsset.shares;
+      const oldPrice = existingAsset.pricePerShare || 0;
+      const addShares = newAsset.shares;
+      const addPrice = newAsset.pricePerShare || 0;
+      const totalShares = oldShares + addShares;
+      const avgPrice = totalShares > 0
+        ? (oldShares * oldPrice + addShares * addPrice) / totalShares
+        : 0;
+
+      const mergedAsset: Asset = {
+        ...existingAsset,
+        shares: totalShares,
+        pricePerShare: Math.round(avgPrice * 100) / 100,
+        currentValue: existingAsset.currentValue + newAsset.currentValue,
+        marketPrice: newAsset.marketPrice ?? existingAsset.marketPrice,
+      };
+
+      const updatedAssets = assets.map(a => a.id === existingAsset.id ? mergedAsset : a);
+      updateAllocation(updatedAssets);
+      return;
+    }
+
     // If the new asset is percentage-based, redistribute existing assets in the same class
     if (newAsset.targetMode === 'PERCENTAGE' && newAsset.targetPercent) {
       const newAssetPercent = newAsset.targetPercent;
@@ -584,6 +642,36 @@ export const AssetAllocationPage: React.FC = () => {
           <div className="portfolio-value-info">
             Total holdings (incl. cash): <PrivacyBlur isPrivacyMode={isPrivacyMode}>{formatCurrency(allocation.totalHoldings, currency)}</PrivacyBlur>
           </div>
+          <div className="price-refresh-row">
+            <button
+              className="action-btn"
+              onClick={handleRefreshPrices}
+              disabled={isPriceLoading || isRatesLoading}
+              aria-label="Refresh asset prices from Yahoo Finance"
+              title="Fetch live prices from Yahoo Finance"
+            >
+              <MaterialIcon name={isPriceLoading || isRatesLoading ? 'hourglass_empty' : 'refresh'} />
+              {isPriceLoading || isRatesLoading ? ' Refreshing…' : ' Refresh Prices'}
+            </button>
+            {lastPriceRefresh && lastPriceRefresh.updatedCount > 0 && (
+              <span className="price-refresh-status" role="status">
+                Updated {lastPriceRefresh.updatedCount} asset{lastPriceRefresh.updatedCount !== 1 ? 's' : ''}
+                {lastPriceRefresh.failedTickers.length > 0 && (
+                  <> · Failed: {lastPriceRefresh.failedTickers.join(', ')}</>
+                )}
+              </span>
+            )}
+            {(priceError || ratesError) && (
+              <span className="price-refresh-error" role="alert">
+                {priceError || ratesError}
+              </span>
+            )}
+            {ratesLastUpdate && !isRatesLoading && (
+              <span className="price-refresh-rates" title="Exchange rates last updated">
+                <MaterialIcon name="currency_exchange" size="small" /> Rates: {new Date(ratesLastUpdate).toLocaleDateString()}
+              </span>
+            )}
+          </div>
         </section>
 
         {/* How to Use - Collapsible at top */}
@@ -751,6 +839,7 @@ export const AssetAllocationPage: React.FC = () => {
         onClose={() => setIsDialogOpen(false)}
         onSubmit={handleAddAsset}
         defaultCurrency={currency as 'EUR' | 'USD'}
+        existingAssets={assets}
       />
 
       <MassEditDialog

src/components/CollapsibleAllocationTable.tsx

@@ -233,17 +233,6 @@ export const CollapsibleAllocationTable: React.FC<CollapsibleAllocationTableProp
     });
   };
 
-  // Handle pricePerShare change and update currentValue
-  const handleEditPricePerShareChange = (value: number) => {
-    const sharesNum = editValues.shares || 0;
-    const newCurrentValue = value > 0 && sharesNum > 0 ? sharesNum * value : editValues.currentValue;
-    setEditValues({
-      ...editValues,
-      pricePerShare: value,
-      currentValue: newCurrentValue,
-    });
-  };
-
   // Handle currentValue change and update pricePerShare if shares exists
   const handleEditCurrentValueChange = (value: number) => {
     const sharesNum = editValues.shares || 0;
@@ -609,14 +598,21 @@ export const CollapsibleAllocationTable: React.FC<CollapsibleAllocationTableProp
                         <td className="currency-value">
                           {isCashAsset || isValueOnlyAsset ? (
                             '-'
-                          ) : isEditing ? (
-                            <NumberInput
-                              value={editValues.pricePerShare || 0}
-                              onChange={handleEditPricePerShareChange}
-                              className="edit-input"
-                            />
                           ) : asset.pricePerShare ? (
-                            <PrivacyBlur isPrivacyMode={isPrivacyMode}>{formatCurrency(asset.pricePerShare, currency)}</PrivacyBlur>
+                            <div className="price-cell">
+                              <PrivacyBlur isPrivacyMode={isPrivacyMode}>{formatCurrency(asset.pricePerShare, currency)}</PrivacyBlur>
+                              {asset.marketPrice && asset.marketPrice !== asset.pricePerShare && (
+                                <div className={`market-price-delta ${asset.marketPrice > asset.pricePerShare ? 'gain' : 'loss'}`}>
+                                  <PrivacyBlur isPrivacyMode={isPrivacyMode}>
+                                    <span className="market-price">{formatCurrency(asset.marketPrice, currency)}</span>
+                                  </PrivacyBlur>
+                                  <span className="delta-pct">
+                                    {((asset.marketPrice - asset.pricePerShare) / asset.pricePerShare * 100) > 0 ? '+' : ''}
+                                    {((asset.marketPrice - asset.pricePerShare) / asset.pricePerShare * 100).toFixed(1)}%
+                                  </span>
+                                </div>
+                              )}
+                            </div>
                           ) : (
                             '-'
                           )}