Total Portfolio Value is now live and accurate...

...unless stocks transactions are made, in which case the profit will
be accurate after the API data update (takes 30 seconds).

extension/changelog.json

@@ -10,7 +10,7 @@
 				{ "message": "Add Vanguard armor set to Auction House Filter.", "contributor": "TheFoxMan" },
 				{ "message": "Fix Employee Effectiveness Highlight after training an employee.", "contributor": "TheFoxMan" }
 			],
-			"changes": [],
+			"changes": [{ "message": "Total Portfolio Value is now live and accurate unless stocks transactions are made.", "contributor": "TheFoxMan" }],
 			"removed": []
 		}
 	},

extension/pages/settings/settings.html

@@ -591,6 +591,9 @@ <h2>
 						<div class="option">
 							<input id="popup-stocksOverview" type="checkbox" />
 							<label for="popup-stocksOverview">Enable stocks overview.</label>
+							<div class="tabbed note">
+								The popup shows the profit calculated purely from API data which makes it inaccurate by default of 5 minutes.
+							</div>
 						</div>
 						<div class="option">
 							<input id="popup-notifications" type="checkbox" />
@@ -1389,6 +1392,10 @@ <h2>
 						<div class="option">
 							<input id="stocks-valueAndProfit" type="checkbox" />
 							<label for="stocks-valueAndProfit">Display total value of portfolio and profits.</label>
+							<div class="tabbed note">
+								The current stock price is live (from the stocks page) but the information of stocks you hold is fetched from the Torn API. This
+								may make the profit shown inaccurate for 30 seconds if you bought or sold stocks (the API data updates after 30 seconds).
+							</div>
 						</div>
 						<div class="header extra-mb">Hide Stocks</div>
 						<div id="hide-stocks" class="hide-items"></div>

extension/scripts/features/total-portfolio-value/ttTotalPortfolioValue.js

@@ -1,15 +1,15 @@
 "use strict";
 
 (async () => {
-	featureManager.registerFeature(
+	const feature = featureManager.registerFeature(
 		"Total Portfolio Value and Profit",
 		"stocks",
 		() => settings.pages.stocks.valueAndProfit,
 		null,
 		addProfitAndValue,
 		removeProfitAndValue,
 		{
-			storage: ["settings.pages.stocks.valueAndProfit"],
+			storage: ["settings.pages.stocks.valueAndProfit", "userdata.stocks"],
 		},
 		async () => {
 			await checkDevice();
@@ -18,18 +18,33 @@
 
 	async function addProfitAndValue() {
 		await requireElement("#stockmarketroot [class*='stock___']");
+
+		calculateAndShowProfits();
+
+		const observer = new MutationObserver(async (mutations) => {
+			if (!feature.enabled()) return;
+
+			await sleep(0.5);
+			calculateAndShowProfits();
+		});
+		observer.observe(document.find("#priceTab"), { attributeOldValue: true });
+	}
+
+	function calculateAndShowProfits() {
+		removeProfitAndValue();
+
 		const totalValue = [...document.findAll("[class*='stockOwned__'] [class*='value__']")].map((x) => x.textContent.getNumber()).totalSum();
+		const stockPrices = getStockPrices();
 		const profits = [...document.findAll("#stockmarketroot [class*='stockMarket__'] > ul[id]")]
 			.map((x) => {
 				const stockID = x.id;
-				const data = stockdata[stockID];
 				const userStockData = userdata.stocks[stockID];
 				if (!userStockData) return 0;
 
 				const boughtTotal = Object.values(userStockData.transactions).reduce((prev, trans) => prev + trans.bought_price * trans.shares, 0);
 				const boughtPrice = boughtTotal / userStockData.total_shares;
 
-				return Math.floor((data.current_price - boughtPrice) * userStockData.total_shares);
+				return Math.floor((stockPrices[stockID] - boughtPrice) * userStockData.total_shares);
 			})
 			.totalSum();
 
@@ -53,6 +68,14 @@
 		if (mobile) document.find("#stockmarketroot [class*='topSection__']").classList.add("tt-total-stock-value-wrap");
 	}
 
+	function getStockPrices() {
+		const data = {};
+		document.findAll("[class*='stockMarket__'] > ul[id]").forEach((stock) => {
+			data[stock.id] = parseFloat(stock.find("#priceTab > :first-child").textContent);
+		});
+		return data;
+	}
+
 	function removeProfitAndValue() {
 		const ttTotalStockValue = document.find("#stockmarketroot .tt-total-stock-value");
 		if (ttTotalStockValue) ttTotalStockValue.remove();