Change money to automatically color grey when something cannot be bought.

css/styles.scss

@@ -345,6 +345,10 @@ a:visited {
     color: $light-yellow;
 }
 
+.unbuyable {
+    color: #66CFBC;
+}
+
 .failure {
     color: $alert-red;
     text-shadow: 0 0 0 $alert-red;

src/Augmentation/Augmentation.tsx

@@ -167,7 +167,7 @@ function generateStatsDescription(mults: IMap<number>, programs?: string[], star
         desc = <>{desc}<br />+{f(mults.bladeburner_success_chance_mult-1)} Bladeburner Contracts and Operations success chance</>
 
     if(startingMoney)
-        desc = <>{desc}<br />Start with {Money(startingMoney)} after installing Augmentations.</>
+        desc = <>{desc}<br />Start with <Money money={startingMoney} /> after installing Augmentations.</>
 
     if(programs)
         desc = <>{desc}<br />Start with {programs.join(' and ')} after installing Augmentations.</>

src/Bladeburner/ui/Stats.tsx

@@ -97,7 +97,7 @@ export function Stats(props: IProps): React.ReactElement {
         <p>Team Size: {formatNumber(props.bladeburner.teamSize, 0)}</p>
         <p>Team Members Lost: {formatNumber(props.bladeburner.teamLost, 0)}</p><br />
         <p>Num Times Hospitalized: {props.bladeburner.numHosp}</p>
-        <p>Money Lost From Hospitalizations: {Money(props.bladeburner.moneyLost)}</p><br />
+        <p>Money Lost From Hospitalizations: <Money money={props.bladeburner.moneyLost} /></p><br />
         <p>Current City: {props.bladeburner.city}</p>
         <p className="tooltip" style={{display: 'inline-block'}}>
             Est. Synthoid Population: {numeralWrapper.formatPopulation(props.bladeburner.getCurrentCity().popEst)}

src/Casino/Blackjack.tsx

@@ -314,7 +314,7 @@ export class Blackjack extends Game<Props, State> {
                         label={
                             <>
                                 {"Wager (Max: "}
-                                {Money(MAX_BET)}
+                                <Money money={MAX_BET} />
                                 {")"}
                             </>
                         }
@@ -333,7 +333,7 @@ export class Blackjack extends Game<Props, State> {
 
                     <p>
                         {"Total earnings this session: "}
-                        {Money(gains)}
+                        <Money money={gains} />
                     </p>
                 </div>
                 
@@ -404,13 +404,13 @@ export class Blackjack extends Game<Props, State> {
                         {this.isPlayerWinResult(result) && (
                             <>
                                 {" You gained "}
-                                {Money(this.state.bet)}
+                                <Money money={this.state.bet} />
                             </>
                         )}
                         {result === Result.DealerWon && (
                             <>
                                 {" You lost "}
-                                {Money(this.state.bet)}
+                                <Money money={this.state.bet} />
                             </>
                         )}
                     </p>

src/Casino/Roulette.tsx

@@ -202,10 +202,10 @@ export class Roulette extends Game<IProps, IState> {
             }
             if(playerWin) {
                 gain = this.state.investment*this.state.strategy.payout;
-                status = <>won {Money(gain)}</>;
+                status = <>won <Money money={gain} /></>;
             } else {
                 gain = -this.state.investment;
-                status = <>lost {Money(-gain)}</>;
+                status = <>lost <Money money={-gain} /></>;
             }
             this.win(this.props.p, gain);
             this.setState({

src/Casino/SlotMachine.tsx

@@ -170,7 +170,7 @@ export class SlotMachine extends Game<IProps, IState> {
         }
 
         this.setState({
-            status: <>{gains>0?"gained":"lost"} {Money(Math.abs(gains))}</>,
+            status: <>{gains>0?"gained":"lost"} <Money money={Math.abs(gains)} /></>,
             canPlay: true,
         })
         if(this.reachedLimit(this.props.p)) return;

src/DarkWeb/DarkWeb.tsx

@@ -51,7 +51,7 @@ export function executeDarkwebTerminalCommand(commandArray: string[]): void {
 function listAllDarkwebItems(): void {
     for(const key in DarkWebItems) {
         const item = DarkWebItems[key];
-        postElement(<>{item.program} - {Money(item.price)} - {item.description}</>);
+        postElement(<>{item.program} - <Money money={item.price} player={Player} /> - {item.description}</>);
     }
 }
 

src/Faction/ui/DonateOption.tsx

@@ -60,7 +60,7 @@ export function DonateOption(props: IProps): React.ReactElement {
         const repGain = repFromDonation(amt, props.p);
         props.faction.playerReputation += repGain;
         dialogBoxCreate(<>
-            You just donated {Money(amt)} to {fac.name} to gain {Reputation(repGain)} reputation.
+            You just donated <Money money={amt} /> to {fac.name} to gain {Reputation(repGain)} reputation.
         </>);
         props.rerender();
     }

src/Faction/ui/PurchaseableAugmentation.tsx

@@ -119,10 +119,10 @@ export class PurchaseableAugmentation extends React.Component<IProps, any> {
         } else if (this.aug.name !== AugmentationNames.NeuroFluxGovernor && (this.aug.owned || this.owned())) {
             disabled = true;
         } else if (this.hasReputation()) {
-            status = <>UNLOCKED (at {Reputation(repCost)} faction reputation) - {Money(moneyCost)}</>;
+            status = <>UNLOCKED (at {Reputation(repCost)} faction reputation) - <Money money={moneyCost} player={this.props.p} /></>;
         } else {
             disabled = true;
-            status = <>LOCKED (Requires {Reputation(repCost)} faction reputation - {Money(moneyCost)})</>;
+            status = <>LOCKED (Requires {Reputation(repCost)} faction reputation - <Money money={moneyCost} player={this.props.p} />)</>;
             color = "red";
         }
 

src/Gang/ui/GangMemberUpgradePopup.tsx

@@ -51,7 +51,7 @@ function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement {
             setRerender(old => !old);
         }
         return (<a key={upg.name} className="a-link-button tooltip" style={{margin:"2px",  padding:"2px", display:"block", fontSize:"11px"}} onClick={onClick}>
-            {upg.name} - {Money(props.gang.getUpgradeCost(upg))}
+            {upg.name} - <Money money={props.gang.getUpgradeCost(upg)} player={props.player} />
             <span className={left?"tooltiptextleft":"tooltiptext"} dangerouslySetInnerHTML={{__html: upg.desc}} />
         </a>);
     }

src/Hacknet/data/HashUpgradesMetadata.tsx

@@ -10,14 +10,14 @@ export const HashUpgradesMetadata: IConstructorParams[] = [
         costPerLevel: 4,
         desc: "Sell hashes for $1m",
         name: "Sell for Money",
-        effectText: (level: number): JSX.Element | null => (<>Sold for {Money(1e6*level)}</>),
+        effectText: (level: number): JSX.Element | null => (<>Sold for <Money money={1e6*level} /></>),
         value: 1e6,
     },
     {
         costPerLevel: 100,
         desc: "Sell hashes for $1b in Corporation funds",
         name: "Sell for Corporation Funds",
-        effectText: (level: number): JSX.Element | null => (<>Sold for {Money(1e9*level)} Corporation funds.</>),
+        effectText: (level: number): JSX.Element | null => (<>Sold for <Money money={1e9*level} /> Corporation funds.</>),
         value: 1e9,
     },
     {

src/Infiltration/ui/Victory.tsx

@@ -67,7 +67,7 @@ export function Victory(props: IProps): React.ReactElement {
                 <StdButton onClick={trade} text={<>{"Trade for "}{Reputation(repGain)}{" reputation"}</>} />
             </Grid>
             <Grid item xs={3}>
-                <StdButton onClick={sell} text={<>{"Sell for "}{Money(moneyGain)}</>} />
+                <StdButton onClick={sell} text={<>{"Sell for "}<Money money={moneyGain} /></>} />
             </Grid>
             <Grid item xs={3}>
                 <StdButton onClick={quitInfiltration} text={"Quit"} />

src/Locations/LocationsHelpers.tsx

@@ -79,7 +79,7 @@ export function createTravelPopup(destination: CityName, travelFn: TravelFunctio
     });
 
     yesNoBoxCreate(<span>Would you like to travel to {destination}? The trip will
-        cost {Money(cost)}.</span>);
+        cost <Money money={cost} />.</span>);
 }
 
 /**
@@ -107,7 +107,7 @@ export function createPurchaseServerPopup(ram: number, p: IPlayer): void {
         yesNoTxtInpBoxClose();
     });
 
-    yesNoTxtInpBoxCreate(<>Would you like to purchase a new server with {numeralWrapper.formatRAM(ram)} of RAM for {Money(cost)}?
+    yesNoTxtInpBoxCreate(<>Would you like to purchase a new server with {numeralWrapper.formatRAM(ram)} of RAM for <Money money={cost} player={p} />?
         <br /><br />Please enter the server hostname below:<br />
     </>);
 }
@@ -245,7 +245,7 @@ export function createUpgradeHomeCoresPopup(p: IPlayer): void {
     yesNoBoxCreate(<>Would you like to purchase an additional CPU Core for your home computer? Each CPU Core 
 lets you start with an additional Core Node in Hacking Missions.<br /><br />
 Purchasing an additional core (for a total of {p.getHomeComputer().cpuCores + 1}) will 
-cost {Money(cost)}</>);
+cost <Money money={cost} player={p} /></>);
 }
 
 /**

src/Locations/ui/CoresButton.tsx

@@ -59,6 +59,6 @@ export function CoresButton(props: IProps): React.ReactElement {
         disabled={!props.p.canAfford(cost)}
         onClick={buy}
         style={btnStyle}
-        text={<>Upgrade 'home' cores ({homeComputer.cpuCores} -&gt; {homeComputer.cpuCores+1}) - {Money(cost)}</>}
+        text={<>Upgrade 'home' cores ({homeComputer.cpuCores} -&gt; {homeComputer.cpuCores+1}) - <Money money={cost} player={props.p} /></>}
     />);
 }

src/Locations/ui/GymLocation.tsx

@@ -77,22 +77,22 @@ export class GymLocation extends React.Component<IProps, any> {
                 <StdButton
                     onClick={this.trainStrength}
                     style={this.btnStyle}
-                    text={<>Train Strength ({Money(cost)} / sec)</>}
+                    text={<>Train Strength (<Money money={cost} player={this.props.p} /> / sec)</>}
                 />
                 <StdButton
                     onClick={this.trainDefense}
                     style={this.btnStyle}
-                    text={<>Train Defense ({Money(cost)} / sec)</>}
+                    text={<>Train Defense (<Money money={cost} player={this.props.p} /> / sec)</>}
                 />
                 <StdButton
                     onClick={this.trainDexterity}
                     style={this.btnStyle}
-                    text={<>Train Dexterity ({Money(cost)} / sec)</>}
+                    text={<>Train Dexterity (<Money money={cost} player={this.props.p} /> / sec)</>}
                 />
                 <StdButton
                     onClick={this.trainAgility}
                     style={this.btnStyle}
-                    text={<>Train Agility ({Money(cost)} / sec)</>}
+                    text={<>Train Agility (<Money money={cost} player={this.props.p} /> / sec)</>}
                 />
             </div>
         )

src/Locations/ui/HospitalLocation.tsx

@@ -60,7 +60,7 @@ export class HospitalLocation extends React.Component<IProps, IState> {
             currHp: this.props.p.hp,
         });
 
-        dialogBoxCreate(<>You were healed to full health! The hospital billed you for {Money(cost)}</>);
+        dialogBoxCreate(<>You were healed to full health! The hospital billed you for <Money money={cost} /></>);
     }
 
     render(): React.ReactNode {
@@ -70,7 +70,7 @@ export class HospitalLocation extends React.Component<IProps, IState> {
             <AutoupdatingStdButton
                 onClick={this.getHealed}
                 style={this.btnStyle}
-                text={<>Get treatment for wounds - {Money(cost)}</>}
+                text={<>Get treatment for wounds - <Money money={cost} player={this.props.p} /></>}
             />
         )
     }

src/Locations/ui/RamButton.tsx

@@ -44,6 +44,6 @@ export function RamButton(props: IProps): React.ReactElement {
         disabled={!props.p.canAfford(cost)}
         onClick={buy}
         style={btnStyle}
-        text={<>Upgrade 'home' RAM ({homeComputer.maxRam}GB -&gt; {homeComputer.maxRam*2}GB) - {Money(cost)}</>}
+        text={<>Upgrade 'home' RAM ({homeComputer.maxRam}GB -&gt; {homeComputer.maxRam*2}GB) - <Money money={cost} player={props.p} /></>}
     />);
 }

src/Locations/ui/TechVendorLocation.tsx

@@ -37,7 +37,7 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
                 key={i}
                 onClick={() => createPurchaseServerPopup(i, props.p)}
                 style={btnStyle}
-                text={<>Purchase {i}GB Server - {Money(cost)}</>}
+                text={<>Purchase {i}GB Server - <Money money={cost} player={props.p} /></>}
             />,
         )
     }

src/Locations/ui/TorButton.tsx

@@ -41,6 +41,6 @@ export function TorButton(props: IProps): React.ReactElement {
         disabled={!props.p.canAfford(CONSTANTS.TorRouterCost)}
         onClick={buy}
         style={btnStyle}
-        text={<>Purchase TOR router - {Money(CONSTANTS.TorRouterCost)}</>}
+        text={<>Purchase TOR router - <Money money={CONSTANTS.TorRouterCost} player={props.p} /></>}
     />);
 }

src/Locations/ui/UniversityLocation.tsx

@@ -103,31 +103,31 @@ export class UniversityLocation extends React.Component<IProps, any> {
                 <StdButton
                     onClick={this.dataStructures}
                     style={this.btnStyle}
-                    text={<>Take Data Structures course ({Money(dataStructuresCost)} / sec)</>}
+                    text={<>Take Data Structures course (<Money money={dataStructuresCost} player={this.props.p} /> / sec)</>}
                     tooltip={earnHackingExpTooltip}
                 />
                 <StdButton
                     onClick={this.networks}
                     style={this.btnStyle}
-                    text={<>Take Networks course ({Money(networksCost)} / sec)</>}
+                    text={<>Take Networks course (<Money money={networksCost} player={this.props.p} /> / sec)</>}
                     tooltip={earnHackingExpTooltip}
                 />
                 <StdButton
                     onClick={this.algorithms}
                     style={this.btnStyle}
-                    text={<>Take Algorithms course ({Money(algorithmsCost)} / sec)</>}
+                    text={<>Take Algorithms course (<Money money={algorithmsCost} player={this.props.p} /> / sec)</>}
                     tooltip={earnHackingExpTooltip}
                 />
                 <StdButton
                     onClick={this.management}
                     style={this.btnStyle}
-                    text={<>Take Management course ({Money(managementCost)} / sec)</>}
+                    text={<>Take Management course (<Money money={managementCost} player={this.props.p} /> / sec)</>}
                     tooltip={earnCharismaExpTooltip}
                 />
                 <StdButton
                     onClick={this.leadership}
                     style={this.btnStyle}
-                    text={<>Take Leadership course ({Money(leadershipCost)} / sec)</>}
+                    text={<>Take Leadership course (<Money money={leadershipCost} player={this.props.p} /> / sec)</>}
                     tooltip={earnCharismaExpTooltip}
                 />
             </div>

src/PersonObjects/Resleeving/ResleevingUI.tsx

@@ -254,6 +254,7 @@ function createResleeveUi(resleeve: Resleeve): IResleeveUIElems {
         costText: null,
         buyButton: null,
     };
+    if(playerRef === null) return elems;
 
     if (!routing.isOn(Page.Resleeves)) { return elems; }
 
@@ -334,7 +335,7 @@ function createResleeveUi(resleeve: Resleeve): IResleeveUIElems {
     const cost: number = resleeve.getCost();
     elems.costPanel = createElement("div", { class: "resleeve-panel", width: "20%" });
     elems.costText = createElement("p", {
-        innerHTML: `It costs ${renderToStaticMarkup(Money(cost))} ` +
+        innerHTML: `It costs ${renderToStaticMarkup(<Money money={cost} player={playerRef} />)} ` +
                    `to purchase this Sleeve.`,
     });
     elems.buyButton = createElement("button", {
@@ -343,7 +344,7 @@ function createResleeveUi(resleeve: Resleeve): IResleeveUIElems {
         clickListener: () => {
             if(playerRef == null) throw new Error("playerRef is null in buyButton.click()");
             if (purchaseResleeve(resleeve, playerRef)) {
-                dialogBoxCreate((<>You re-sleeved for {Money(cost)}!</>), false);
+                dialogBoxCreate((<>You re-sleeved for <Money money={cost} />!</>), false);
             } else {
                 dialogBoxCreate(`You cannot afford to re-sleeve into this body`, false);
             }

src/PersonObjects/Sleeve/SleeveAugmentationsUI.tsx

@@ -2,6 +2,7 @@
  * Module for handling the UI for purchasing Sleeve Augmentations
  * This UI is a popup, not a full page
  */
+import React from 'react';
 import { Sleeve } from "./Sleeve";
 import { findSleevePurchasableAugs } from "./SleeveHelpers";
 
@@ -102,7 +103,7 @@ export function createSleevePurchaseAugsPopup(sleeve: Sleeve, p: IPlayer): void
             innerHTML:
             [
                 `<h2>${aug.name}</h2><br>`,
-                `Cost: ${renderToStaticMarkup(Money(aug.startingCost))}<br><br>`,
+                `Cost: ${renderToStaticMarkup(<Money money={aug.startingCost} player={p} />)}<br><br>`,
                 `${info}`,
             ].join(" "),
             padding: "2px",

src/PersonObjects/Sleeve/SleeveUI.tsx

@@ -1,6 +1,7 @@
 /**
  * Module for handling the Sleeve UI
  */
+import React from 'react';
 import { createSleevePurchaseAugsPopup } from "./SleeveAugmentationsUI";
 import { Sleeve } from "./Sleeve";
 import { SleeveTaskType } from "./SleeveTaskTypesEnum";
@@ -202,6 +203,7 @@ function createSleeveUi(sleeve: Sleeve, allSleeves: Sleeve[]): ISleeveUIElems {
         currentEarningsInfo:    null,
         totalEarningsButton:    null,
     }
+    if(playerRef === null) return elems;
 
     if (!routing.isOn(Page.Sleeves)) { return elems; }
 
@@ -223,13 +225,14 @@ function createSleeveUi(sleeve: Sleeve, allSleeves: Sleeve[]): ISleeveUIElems {
         class: "std-button",
         innerText: "Travel",
         clickListener: () => {
+            if(playerRef === null) return;
             const popupId = "sleeve-travel-popup";
             const popupArguments: HTMLElement[] = [];
             popupArguments.push(createPopupCloseButton(popupId, { class: "std-button" }));
             popupArguments.push(createElement("p", {
                 innerHTML: "Have this sleeve travel to a different city. This affects " +
                            "the gyms and universities at which this sleeve can study. " +
-                           `Traveling to a different city costs ${renderToStaticMarkup(Money(CONSTANTS.TravelCost))}. ` +
+                           `Traveling to a different city costs ${renderToStaticMarkup(<Money money={CONSTANTS.TravelCost} player={playerRef} />)}. ` +
                            "It will also CANCEL the sleeve's current task (setting it to idle)",
             }));
             for (const cityName in Cities) {
@@ -346,7 +349,7 @@ function updateSleeveUi(sleeve: Sleeve, elems: ISleeveUIElems): void {
 
     if (sleeve.currentTask === SleeveTaskType.Crime) {
         const data = [
-            [`Money`, Money(parseFloat(sleeve.currentTaskLocation)), `(on success)`],
+            [`Money`, <Money money={parseFloat(sleeve.currentTaskLocation)} />, `(on success)`],
             [`Hacking Exp`, numeralWrapper.formatExp(sleeve.gainRatesForTask.hack), `(2x on success)`],
             [`Strength Exp`, numeralWrapper.formatExp(sleeve.gainRatesForTask.str), `(2x on success)`],
             [`Defense Exp`, numeralWrapper.formatExp(sleeve.gainRatesForTask.def), `(2x on success)`],

src/PersonObjects/Sleeve/ui/CovenantPurchasesRoot.tsx

@@ -75,7 +75,7 @@ export function CovenantPurchasesRoot(props: IProps): React.ReactElement {
         <PopupCloseButton popup={PopupId} text={"Close"} />
         <p>
             Would you like to purchase an additional Duplicate Sleeve from The Covenant
-            for {Money(purchaseCost())}?
+            for <Money money={purchaseCost()} player={props.p} />?
         </p>
         <br />
         <p>

src/PersonObjects/Sleeve/ui/CovenantSleeveMemoryUpgrade.tsx

@@ -79,7 +79,7 @@ export class CovenantSleeveMemoryUpgrade extends React.Component<IProps, IState>
         } else if (this.state.amt > maxMemory) {
             purchaseBtnContent = <>Memory cannot exceed 100?</>;
         } else {
-            purchaseBtnContent = <>Purchase {this.state.amt} memory - {Money(cost)}?</>;
+            purchaseBtnContent = <>Purchase {this.state.amt} memory - <Money money={cost} player={this.props.p} />?</>;
         }
 
         return (

src/PersonObjects/Sleeve/ui/MoreEarningsContent.tsx

@@ -7,7 +7,7 @@ import { StatsTable } from "../../../ui/React/StatsTable";
 export function MoreEarningsContent(sleeve: Sleeve): React.ReactElement {
     return (<>
         {StatsTable([
-            ['Money ', Money(sleeve.earningsForTask.money)],
+            ['Money ', <Money money={sleeve.earningsForTask.money} />],
             ['Hacking Exp ', numeralWrapper.formatExp(sleeve.earningsForTask.hack)],
             ['Strength Exp ', numeralWrapper.formatExp(sleeve.earningsForTask.str)],
             ['Defense Exp ', numeralWrapper.formatExp(sleeve.earningsForTask.def)],
@@ -17,7 +17,7 @@ export function MoreEarningsContent(sleeve: Sleeve): React.ReactElement {
         ], 'Earnings for Current Task:')}
         <br />
         {StatsTable([
-            ['Money: ', Money(sleeve.earningsForPlayer.money)],
+            ['Money: ', <Money money={sleeve.earningsForPlayer.money} />],
             ['Hacking Exp: ', numeralWrapper.formatExp(sleeve.earningsForPlayer.hack)],
             ['Strength Exp: ', numeralWrapper.formatExp(sleeve.earningsForPlayer.str)],
             ['Defense Exp: ', numeralWrapper.formatExp(sleeve.earningsForPlayer.def)],
@@ -27,7 +27,7 @@ export function MoreEarningsContent(sleeve: Sleeve): React.ReactElement {
         ], 'Total Earnings for Host Consciousness:')}
         <br />
         {StatsTable([
-            ['Money: ', Money(sleeve.earningsForSleeves.money)],
+            ['Money: ', <Money money={sleeve.earningsForSleeves.money} />],
             ['Hacking Exp: ', numeralWrapper.formatExp(sleeve.earningsForSleeves.hack)],
             ['Strength Exp: ', numeralWrapper.formatExp(sleeve.earningsForSleeves.str)],
             ['Defense Exp: ', numeralWrapper.formatExp(sleeve.earningsForSleeves.def)],

src/StockMarket/BuyingAndSelling.tsx

@@ -60,7 +60,7 @@ export function buyStock(stock: Stock, shares: number, workerScript: WorkerScrip
         if (workerScript) {
             workerScript.log("buyStock", `You do not have enough money to purchase this position. You need ${numeralWrapper.formatMoney(totalPrice)}.`);
         } else if (opts.suppressDialog !== true) {
-            dialogBoxCreate(<>You do not have enough money to purchase this. You need {Money(totalPrice)}</>);
+            dialogBoxCreate(<>You do not have enough money to purchase this. You need <Money money={totalPrice} /></>);
         }
 
         return false;
@@ -92,7 +92,7 @@ export function buyStock(stock: Stock, shares: number, workerScript: WorkerScrip
                     `Paid ${numeralWrapper.formatMoney(CONSTANTS.StockMarketCommission)} in commission fees.`
         workerScript.log("buyStock", resultTxt)
     } else if (opts.suppressDialog !== true) {
-        dialogBoxCreate(<>Bought {numeralWrapper.formatShares(shares)} shares of {stock.symbol} for {Money(totalPrice)}. Paid {Money(CONSTANTS.StockMarketCommission)} in commission fees.</>);
+        dialogBoxCreate(<>Bought {numeralWrapper.formatShares(shares)} shares of {stock.symbol} for <Money money={totalPrice} />. Paid <Money money={CONSTANTS.StockMarketCommission} /> in commission fees.</>);
     }
 
     return true;
@@ -150,7 +150,7 @@ export function sellStock(stock: Stock, shares: number, workerScript: WorkerScri
                       `After commissions, you gained a total of ${numeralWrapper.formatMoney(gains)}.`;
         workerScript.log("sellStock", resultTxt)
     } else if (opts.suppressDialog !== true)  {
-        dialogBoxCreate(<>Sold {numeralWrapper.formatShares(shares)} shares of {stock.symbol}. After commissions, you gained a total of {Money(gains)}.</>);
+        dialogBoxCreate(<>Sold {numeralWrapper.formatShares(shares)} shares of {stock.symbol}. After commissions, you gained a total of <Money money={gains} />.</>);
     }
 
     return true;
@@ -188,7 +188,7 @@ export function shortStock(stock: Stock, shares: number, workerScript: WorkerScr
                              "money to purchase this short position. You need " +
                              numeralWrapper.formatMoney(totalPrice));
         } else if (opts.suppressDialog !== true) {
-            dialogBoxCreate(<>You do not have enough money to purchase this short position. You need {Money(totalPrice)}</>);
+            dialogBoxCreate(<>You do not have enough money to purchase this short position. You need <Money money={totalPrice} /></>);
         }
 
         return false;
@@ -222,7 +222,7 @@ export function shortStock(stock: Stock, shares: number, workerScript: WorkerScr
             `in commission fees.`;
         workerScript.log("shortStock", resultTxt);
     } else if (!opts.suppressDialog) {
-        dialogBoxCreate(<>Bought a short position of {numeralWrapper.formatShares(shares)} shares of {stock.symbol} for {Money(totalPrice)}. Paid {Money(CONSTANTS.StockMarketCommission)} in commission fees.</>);
+        dialogBoxCreate(<>Bought a short position of {numeralWrapper.formatShares(shares)} shares of {stock.symbol} for <Money money={totalPrice} />. Paid <Money money={CONSTANTS.StockMarketCommission} /> in commission fees.</>);
     }
 
     return true;
@@ -287,7 +287,7 @@ export function sellShort(stock: Stock, shares: number, workerScript: WorkerScri
                       `After commissions, you gained a total of ${numeralWrapper.formatMoney(totalGain)}`;
         workerScript.log("sellShort", resultTxt);
     } else if (!opts.suppressDialog) {
-        dialogBoxCreate(<>Sold your short position of {numeralWrapper.formatShares(shares)} shares of {stock.symbol}. After commissions, you gained a total of {Money(totalGain)}</>);
+        dialogBoxCreate(<>Sold your short position of {numeralWrapper.formatShares(shares)} shares of {stock.symbol}. After commissions, you gained a total of <Money money={totalGain} /></>);
     }
 
     return true;

src/StockMarket/OrderProcessing.tsx

@@ -150,7 +150,7 @@ function executeOrder(order: Order, refs: IProcessOrderRefs): void {
         for (let i = 0; i < stockOrders.length; ++i) {
             if (order == stockOrders[i]) {
                 stockOrders.splice(i, 1);
-                dialogBoxCreate(<>{order.type} for {stock.symbol} @ {Money(order.price)} ({pos}) was filled ({numeralWrapper.formatShares(Math.round(order.shares))} shares)</>);
+                dialogBoxCreate(<>{order.type} for {stock.symbol} @ <Money money={order.price} /> ({pos}) was filled ({numeralWrapper.formatShares(Math.round(order.shares))} shares)</>);
                 refs.rerenderFn();
                 return;
             }
@@ -160,7 +160,7 @@ function executeOrder(order: Order, refs: IProcessOrderRefs): void {
         console.error(order);
     } else {
         if (isBuy) {
-            dialogBoxCreate(<>Failed to execute {order.type} for {stock.symbol} @ {Money(order.price)} ({pos}). This is most likely because you do not have enough money or the order would exceed the stock's maximum number of shares</>);
+            dialogBoxCreate(<>Failed to execute {order.type} for {stock.symbol} @ <Money money={order.price} /> ({pos}). This is most likely because you do not have enough money or the order would exceed the stock's maximum number of shares</>);
         }
     }
 }

src/StockMarket/ui/InfoAndPurchases.tsx

@@ -107,7 +107,7 @@ export class InfoAndPurchases extends React.Component<IProps, any> {
                 <StdButton
                     disabled={!this.props.p.canAfford(cost)}
                     onClick={this.purchaseWseAccount}
-                    text={<>Buy WSE Account - {Money(cost)}</>}
+                    text={<>Buy WSE Account - <Money money={cost} player={this.props.p} /></>}
                 />
             )
         }
@@ -125,7 +125,7 @@ export class InfoAndPurchases extends React.Component<IProps, any> {
                     disabled={!this.props.p.canAfford(cost) || !this.props.p.hasWseAccount}
                     onClick={this.purchaseTixApiAccess}
                     style={blockStyleMarkup}
-                    text={<>Buy Trade Information eXchange (TIX) API Access - {Money(cost)}</>}
+                    text={<>Buy Trade Information eXchange (TIX) API Access - <Money money={cost} player={this.props.p} /></>}
                 />
             )
         }
@@ -145,7 +145,7 @@ export class InfoAndPurchases extends React.Component<IProps, any> {
                 <StdButton
                     disabled={!this.props.p.canAfford(cost) || !this.props.p.hasWseAccount}
                     onClick={this.purchase4SMarketData}
-                    text={<>Buy 4S Market Data Access - {Money(cost)}</>}
+                    text={<>Buy 4S Market Data Access - <Money money={cost} player={this.props.p} /></>}
                     tooltip={"Lets you view additional pricing and volatility information about stocks"}
                 />
             )
@@ -174,7 +174,7 @@ export class InfoAndPurchases extends React.Component<IProps, any> {
                 <StdButton
                     disabled={!this.props.p.canAfford(cost)}
                     onClick={this.purchase4SMarketDataTixApiAccess}
-                    text={<>Buy 4S Market Data TIX API Access - {Money(cost)}</>}
+                    text={<>Buy 4S Market Data TIX API Access - <Money money={cost} player={this.props.p} /></>}
                     tooltip={"Let you access 4S Market Data through Netscript"}
                 />
             )
@@ -216,7 +216,7 @@ export class InfoAndPurchases extends React.Component<IProps, any> {
                 {this.renderPurchase4SMarketDataTixApiAccessButton()}
                 <p>
                     Commission Fees: Every transaction you make has
-                    a {Money(CONSTANTS.StockMarketCommission)} commission fee.
+                    a <Money money={CONSTANTS.StockMarketCommission} player={this.props.p} /> commission fee.
                 </p><br />
                 <p>
                     WARNING: When you reset after installing Augmentations, the Stock

src/StockMarket/ui/StockTicker.tsx

@@ -115,7 +115,7 @@ export class StockTicker extends React.Component<IProps, IState> {
         const cost = getBuyTransactionCost(stock, qty, this.state.position);
         if (cost == null) { return null; }
 
-        return <>Purchasing {numeralWrapper.formatShares(qty)} shares ({this.state.position === PositionTypes.Long ? "Long" : "Short"}) will cost {Money(cost)}.</>;
+        return <>Purchasing {numeralWrapper.formatShares(qty)} shares ({this.state.position === PositionTypes.Long ? "Long" : "Short"}) will cost <Money money={cost} />.</>;
     }
 
     getQuantity(): number {
@@ -140,7 +140,7 @@ export class StockTicker extends React.Component<IProps, IState> {
         const cost = getSellTransactionGain(stock, qty, this.state.position);
         if (cost == null) { return null; }
 
-        return <>Selling {numeralWrapper.formatShares(qty)} shares ({this.state.position === PositionTypes.Long ? "Long" : "Short"}) will result in a gain of {Money(cost)}.</>;
+        return <>Selling {numeralWrapper.formatShares(qty)} shares ({this.state.position === PositionTypes.Long ? "Long" : "Short"}) will result in a gain of <Money money={cost} />.</>;
     }
 
     handleBuyButtonClick(): void {

src/StockMarket/ui/StockTickerOrder.tsx

@@ -29,7 +29,7 @@ export class StockTickerOrder extends React.Component<IProps, any> {
         const order = this.props.order;
 
         const posTxt = order.pos === PositionTypes.Long ? "Long Position" : "Short Position";
-        const txt = <>{order.type} - {posTxt} - {numeralWrapper.formatShares(order.shares)} @ {Money(order.price)}</>
+        const txt = <>{order.type} - {posTxt} - {numeralWrapper.formatShares(order.shares)} @ <Money money={order.price} /></>
 
         return (
             <li>

src/StockMarket/ui/StockTickerPositionText.tsx

@@ -43,10 +43,10 @@ export class StockTickerPositionText extends React.Component<IProps, any> {
                     Shares: {numeralWrapper.formatShares(stock.playerShares)}
                 </p><br />
                 <p>
-                    Average Price: {Money(stock.playerAvgPx)} (Total Cost: {Money(totalCost)})
+                    Average Price: <Money money={stock.playerAvgPx} /> (Total Cost: <Money money={totalCost} />
                 </p><br />
                 <p>
-                    Profit: {Money(gains)} ({numeralWrapper.formatPercentage(percentageGains)})
+                    Profit: <Money money={gains} /> ({numeralWrapper.formatPercentage(percentageGains)})
                 </p><br />
             </div>
         )
@@ -75,10 +75,10 @@ export class StockTickerPositionText extends React.Component<IProps, any> {
                         Shares: {numeralWrapper.formatShares(stock.playerShortShares)}
                     </p><br />
                     <p>
-                        Average Price: {Money(stock.playerAvgShortPx)} (Total Cost: {Money(totalCost)})
+                        Average Price: <Money money={stock.playerAvgShortPx} /> (Total Cost: <Money money={totalCost} />)
                     </p><br />
                     <p>
-                        Profit: {Money(gains)} ({numeralWrapper.formatPercentage(percentageGains)})
+                        Profit: <Money money={gains} /> ({numeralWrapper.formatPercentage(percentageGains)})
                     </p><br />
                 </div>
             )
@@ -96,13 +96,13 @@ export class StockTickerPositionText extends React.Component<IProps, any> {
                     Max Shares: {numeralWrapper.formatShares(stock.maxShares)}
                 </p>
                 <p className={"tooltip"} >
-                    Ask Price: {Money(stock.getAskPrice())}
+                    Ask Price: <Money money={stock.getAskPrice()} />
                     <span className={"tooltiptext"}>
                         See Investopedia for details on what this is
                     </span>
                 </p><br />
                 <p className={"tooltip"} >
-                    Bid Price: {Money(stock.getBidPrice())}
+                    Bid Price: <Money money={stock.getBidPrice()} />
                     <span className={"tooltiptext"}>
                         See Investopedia for details on what this is
                     </span>

src/ui/ActiveScripts/ScriptProduction.tsx

@@ -26,18 +26,18 @@ export function ScriptProduction(props: IProps): React.ReactElement {
             Total online production of Active scripts: 
             <span className="money-gold">
                 <span id="active-scripts-total-production-active">
-                    {Money(onlineProduction)}
+                    <Money money={onlineProduction} />
                 </span> / sec
             </span><br />
 
             Total online production since last Aug installation:&nbsp;
             <span id="active-scripts-total-prod-aug-total" className="money-gold">
-                {Money(props.p.scriptProdSinceLastAug)}
+                <Money money={props.p.scriptProdSinceLastAug} />
             </span>
 
             &nbsp;(<span className="money-gold">
                 <span id="active-scripts-total-prod-aug-avg" className="money-gold">
-                    {Money(prodRateSinceLastAug)}
+                    <Money money={prodRateSinceLastAug} />
                 </span> / sec
             </span>)
         </p>

src/ui/ActiveScripts/WorkerScriptAccordion.tsx

@@ -53,13 +53,13 @@ export function WorkerScriptAccordion(props: IProps): React.ReactElement {
                 <pre>Args: {arrayToString(props.workerScript.args)}</pre>
                 <pre>Online Time: {convertTimeMsToTimeElapsedString(scriptRef.onlineRunningTime * 1e3)}</pre>
                 <pre>Offline Time: {convertTimeMsToTimeElapsedString(scriptRef.offlineRunningTime * 1e3)}</pre>
-                <pre>Total online production: {Money(scriptRef.onlineMoneyMade)}</pre>
+                <pre>Total online production: <Money money={scriptRef.onlineMoneyMade} /></pre>
                 <pre>{(Array(26).join(" ") + numeralWrapper.formatExp(scriptRef.onlineExpGained) + " hacking exp")}</pre>
-                <pre>Online production rate: {Money(onlineMps)} / second</pre>
+                <pre>Online production rate: <Money money={onlineMps} /> / second</pre>
                 <pre>{(Array(25).join(" ") + numeralWrapper.formatExp(onlineEps) + " hacking exp / second")}</pre>
-                <pre>Total offline production: {Money(scriptRef.offlineMoneyMade)}</pre>
+                <pre>Total offline production: <Money money={scriptRef.offlineMoneyMade} /></pre>
                 <pre>{(Array(27).join(" ") + numeralWrapper.formatExp(scriptRef.offlineExpGained) + " hacking exp")}</pre>
-                <pre>Offline production rate: {Money(offlineMps)} / second</pre>
+                <pre>Offline production rate: <Money money={offlineMps} /> / second</pre>
                 <pre>{(Array(26).join(" ") + numeralWrapper.formatExp(offlineEps) +  " hacking exp / second")}</pre>
 
                 <AccordionButton

src/ui/CharacterInfo.tsx

@@ -47,21 +47,21 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
     }
 
     function convertMoneySourceTrackerToString(src: MoneySourceTracker): React.ReactElement {
-        const parts: any[][] = [[`Total:`, Money(src.total)]];
-        if (src.bladeburner)     { parts.push([`Bladeburner:`, Money(src.bladeburner)]) }
-        if (src.codingcontract)  { parts.push([`Coding Contracts:`, Money(src.codingcontract)]) }
-        if (src.work)            { parts.push([`Company Work:`, Money(src.work)]) }
-        if (src.class)           { parts.push([`Class:`, Money(src.class)]) }
-        if (src.corporation)     { parts.push([`Corporation:`, Money(src.corporation)]) }
-        if (src.crime)           { parts.push([`Crimes:`, Money(src.crime)]) }
-        if (src.gang)            { parts.push([`Gang:`, Money(src.gang)]) }
-        if (src.hacking)         { parts.push([`Hacking:`, Money(src.hacking)]) }
-        if (src.hacknetnode)     { parts.push([`Hacknet Nodes:`, Money(src.hacknetnode)]) }
-        if (src.hospitalization) { parts.push([`Hospitalization:`, Money(src.hospitalization)]) }
-        if (src.infiltration)    { parts.push([`Infiltration:`, Money(src.infiltration)]) }
-        if (src.stock)           { parts.push([`Stock Market:`, Money(src.stock)]) }
-        if (src.casino)          { parts.push([`Casino:`, Money(src.casino)]) }
-        if (src.sleeves)         { parts.push([`Sleeves:`, Money(src.sleeves)]) }
+        const parts: any[][] = [[`Total:`, <Money money={src.total} />]];
+        if (src.bladeburner)     { parts.push([`Bladeburner:`, <Money money={src.bladeburner} />]) }
+        if (src.codingcontract)  { parts.push([`Coding Contracts:`, <Money money={src.codingcontract} />]) }
+        if (src.work)            { parts.push([`Company Work:`, <Money money={src.work} />]) }
+        if (src.class)           { parts.push([`Class:`, <Money money={src.class} />]) }
+        if (src.corporation)     { parts.push([`Corporation:`, <Money money={src.corporation} />]) }
+        if (src.crime)           { parts.push([`Crimes:`, <Money money={src.crime} />]) }
+        if (src.gang)            { parts.push([`Gang:`, <Money money={src.gang} />]) }
+        if (src.hacking)         { parts.push([`Hacking:`, <Money money={src.hacking} />]) }
+        if (src.hacknetnode)     { parts.push([`Hacknet Nodes:`, <Money money={src.hacknetnode} />]) }
+        if (src.hospitalization) { parts.push([`Hospitalization:`, <Money money={src.hospitalization} />]) }
+        if (src.infiltration)    { parts.push([`Infiltration:`, <Money money={src.infiltration} />]) }
+        if (src.stock)           { parts.push([`Stock Market:`, <Money money={src.stock} />]) }
+        if (src.casino)          { parts.push([`Casino:`, <Money money={src.casino} />]) }
+        if (src.sleeves)         { parts.push([`Sleeves:`, <Money money={src.sleeves} />]) }
 
         return StatsTable(parts);
     }

src/ui/React/Money.tsx

@@ -1,6 +1,16 @@
 import * as React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
+import { IPlayer } from "../../PersonObjects/IPlayer";
 
-export function Money(money: number | string): JSX.Element {
-	return <span className={"money-gold samefont"}>{typeof money === 'number' ? numeralWrapper.formatMoney(money) : money}</span>
+interface IProps {
+	money: number | string;
+	player?: IPlayer;
+}
+export function Money(props: IProps): JSX.Element {
+	if(props.player !== undefined) {
+		if(typeof props.money !== 'number') throw new Error('if player if provided, money should be number, contact dev');
+		if(!props.player.canAfford(props.money))
+			return <span className={"unbuyable samefont"}>{numeralWrapper.formatMoney(props.money)}</span>
+	}
+	return <span className={"money-gold samefont"}>{typeof props.money === 'number' ? numeralWrapper.formatMoney(props.money) : props.money}</span>
 }

src/ui/React/MoneyRate.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { Money } from "../../ui/React/Money";
 
 export function MoneyRate(money: number): JSX.Element {
-	return Money(`${numeralWrapper.formatMoney(money)} / sec`);
+	return <Money money={`${numeralWrapper.formatMoney(money)} / sec`} />;
 }