Skinbaron popup page

src/contents/csmoney_script.ts

@@ -366,6 +366,6 @@ async function addBuffPrice(item: CSMoney.Item, container: Element, isPopout = f
 
 // mutation observer active?
 let isObserverActive = false;
-export let extensionSettings: IStorage;
+let extensionSettings: IStorage;
 
 init();

src/lib/handlers/networkhandler.ts

@@ -39,7 +39,8 @@ let isCurrencyFetchDone = false;
 export async function fetchCurrencyRates() {
 	if (isCurrencyFetched) {
 		// wait until the rates are fetched from parallel requests
-		while (!isCurrencyFetchDone) {
+		let tries = 20;
+		while (!isCurrencyFetchDone && tries-- > 0) {
 			await new Promise((resolve) => setTimeout(resolve, 100));
 		}
 		return;

src/lib/pages/Skinbaron.tsx

@@ -0,0 +1,73 @@
+import { useStorage } from '@plasmohq/storage/hook';
+import { IcOutlineDiscount, IcRoundAccessTime, PhSticker, StreamlineDiscountPercentCoupon } from '~lib/components/Icons';
+import { SettingsCard } from '~lib/components/SettingsCard';
+import { SettingsCheckbox } from '~lib/components/SettingsCheckbox';
+import { SettingsColorPicker } from '~lib/components/SettingsColorPicker';
+import { SettingsEnable } from '~lib/components/SettingsEnable';
+import { SettingsSource } from '~lib/components/SettingsSource';
+import { cn } from '~lib/utils';
+import { ScrollArea, TabsContent } from '../components/Shadcn';
+
+export const SkinbaronSettings = () => {
+	const [checked] = useStorage('baron-enable');
+
+	return (
+		<TabsContent value="skinbaron" className={cn('h-[530px] w-[330px]', checked ? '' : 'border-destructive/80')}>
+			<ScrollArea className="h-full w-full py-2 px-2">
+				<SettingsEnable id="baron-enable" />
+				<div className="">
+					<div className="pt-4 pb-2">
+						<p className="text-base font-bold leading-none tracking-tight uppercase">Features</p>
+					</div>
+					<div className="flex flex-col gap-1">
+						<SettingsCard>
+							<SettingsCheckbox id="baron-stickerprices" text="Sticker Prices" icon={<PhSticker className="h-6 w-6" />} />
+						</SettingsCard>
+					</div>
+				</div>
+				<div className="">
+					<div className="pt-4 pb-2">
+						<p className="text-base font-bold leading-none tracking-tight uppercase">Prices</p>
+					</div>
+					<div className="flex flex-col gap-1">
+						<SettingsSource prefix="bm" />
+						<SettingsCard>
+							<SettingsCheckbox
+								id="baron-buffdifference"
+								text="Show Buff Price Difference"
+								tooltipText="Recalculates and replaces the original discount tag according to the item's Buff price in absolute units."
+								icon={<IcOutlineDiscount className="h-6 w-6" />}
+							/>
+						</SettingsCard>
+						<SettingsCard>
+							<SettingsCheckbox
+								id="baron-buffdifferencepercent"
+								text="Show Buff Price Percentage Difference"
+								tooltipText="Requires 'Show Buff Price Difference' to be activated. Display the ratio of an item's price to the Buff price in percentage. Price equality equates to 100%."
+								icon={<StreamlineDiscountPercentCoupon className="h-6 w-6" />}
+							/>
+						</SettingsCard>
+					</div>
+				</div>
+				<div className="mb-2">
+					<div className="pt-4 pb-2">
+						<p className="text-base font-bold leading-none tracking-tight uppercase">Listings</p>
+					</div>
+					<div className="flex flex-col gap-1">
+						<SettingsCard>
+							<SettingsCheckbox id="baron-listingage" text="Show Listing Age" icon={<IcRoundAccessTime className="h-6 w-6" />} />
+						</SettingsCard>
+					</div>
+				</div>
+				<div className="mb-2">
+					<div className="pt-4 pb-2">
+						<p className="text-base font-bold leading-none tracking-tight uppercase">MISC</p>
+					</div>
+					<div className="flex flex-col gap-1">
+						<SettingsColorPicker prefix="bm" />
+					</div>
+				</div>
+			</ScrollArea>
+		</TabsContent>
+	);
+};

src/popup.tsx

@@ -5,6 +5,7 @@ import csmoneyLogo from 'data-base64:~/../assets/csmoney.ico';
 import betterfloatLogo from 'data-base64:~/../assets/icon.png';
 import lisskinsLogo from 'data-base64:~/../assets/lisskins.svg';
 import skinportLogo from 'data-base64:~/../assets/skinport.ico';
+import skinbaronLogo from 'data-base64:~/../assets/skinbaron.svg';
 import { useEffect } from 'react';
 import { IcRoundWarning, MdiGithub, SkillIconsDiscord, SkinBidIcon, SolarDocumentTextLinear, SolarInfoSquareLinear } from '~lib/components/Icons';
 import { Badge, Button, Tabs, TabsList, TabsTrigger } from '~lib/components/Shadcn';
@@ -20,6 +21,7 @@ import { SkinbidSettings } from '~lib/pages/Skinbid';
 import { SkinportSettings } from '~lib/pages/Skinport';
 import { DISCORD_URL, GITHUB_URL, WEBSITE_URL } from '~lib/util/globals';
 import { DEFAULT_SETTINGS } from '~lib/util/storage';
+import { SkinbaronSettings } from '~lib/pages/Skinbaron';
 
 export default function IndexPopup() {
 	const hostpermissions = chrome.runtime.getManifest().host_permissions as string[];
@@ -103,14 +105,17 @@ export default function IndexPopup() {
 							<TabsTrigger value="skinbid">
 								<SkinBidIcon height={40} width={40} />
 							</TabsTrigger>
+							<TabsTrigger value="csmoney">
+								<img className="h-10 w-10 rounded-lg" src={csmoneyLogo} />
+							</TabsTrigger>
 							<TabsTrigger value="buffmarket">
 								<img className="h-10 w-10 rounded-lg" src={buffmarketLogo} />
 							</TabsTrigger>
 							<TabsTrigger value="lisskins">
 								<img className="h-10 w-10 rounded-lg" src={lisskinsLogo} />
 							</TabsTrigger>
-							<TabsTrigger value="csmoney">
-								<img className="h-10 w-10 rounded-lg" src={csmoneyLogo} />
+							<TabsTrigger value="skinbaron">
+								<img className="h-10 w-10 rounded-lg" src={skinbaronLogo} />
 							</TabsTrigger>
 						</div>
 						<div className="flex flex-col items-center">
@@ -128,6 +133,7 @@ export default function IndexPopup() {
 					<CSMoneySettings />
 					<BuffMarketSettings />
 					<LisSkinsSettings />
+					<SkinbaronSettings />
 					<Changelogs />
 					<About />
 				</Tabs>