CSF currency and agent support

GODrums · Dec 7, 2023 · b23d04e · b23d04e
1 parent 2ff04f9
commit b23d04e
Show file tree

Hide file tree

Showing 12 changed files with 583 additions and 227 deletions.
diff --git a/html/changelog.html b/html/changelog.html
@@ -1,3 +1,26 @@
+<div class="Group">
+    <div class="VersionHeader">1.13.4</div>
+    <div class="VersionBox">
+        <p class="VersionSubHeader">
+            What's new?
+        </p>
+        <ul class="VersionText">
+            <li><b>FEATURE:</b> CSFloat - Support for all newly introduced currencies on CSFloat. The extension uses the same exchange rates as CSFloat. Remember that your account balance will always be USD and CSFloat's exchange rates may not represent real world rates.</li>
+        </ul>
+    </div>
+</div>
+<div class="Group">
+    <div class="VersionHeader">1.13.3</div>
+    <div class="VersionBox">
+        <p class="VersionSubHeader">
+            What's new?
+        </p>
+        <ul class="VersionText">
+            <li><b>FEATURE:</b> CSFloat - Items without a screenshot now have a button that allows you to generate screenshots via Swap.gg.</li>
+            <li><b>FEATURE:</b> CSFloat - Support for CSFloat's newly introduced agents.</li>
+        </ul>
+    </div>
+</div>
 <div class="Group">
     <div class="VersionHeader">1.13.0</div>
     <div class="VersionBox">

diff --git a/manifest.json b/manifest.json
@@ -1,8 +1,8 @@
 {
     "name": "BetterFloat",
     "author": "Rums",
-    "version": "1.13.2",
-    "version_name": "1.13.2",
+    "version": "1.13.4",
+    "version_name": "1.13.4",
     "description": "Enhance your experience on CSFloat.com, Skinport.com & Skinbid.com!",
     "manifest_version": 3,
     "host_permissions": ["*://prices.csgotrader.app/*", "*://*.csfloat.com/*", "*://*.skinport.com/*", "*://*.skinbid.com/*"],

diff --git a/manifest_firefox.json b/manifest_firefox.json
@@ -4,7 +4,7 @@
         "name": "Rums",
         "url": "https://github.com/GODrums"
     },
-    "version": "1.13.2",
+    "version": "1.13.4",
     "description": "Enhance your experience on CSFloat.com, Skinport.com & Skinbid.com!",
     "manifest_version": 3,
     "host_permissions": ["*://prices.csgotrader.app/*", "*://*.csfloat.com/*", "*://*.skinport.com/*", "*://*.skinbid.com/*"],

diff --git a/public/camera-add-solid.svg b/public/camera-add-solid.svg
diff --git a/src/@typings/ExtensionTypes.d.ts b/src/@typings/ExtensionTypes.d.ts
@@ -57,6 +57,20 @@ export namespace Extension {
         skinbid: boolean;
     };
 
+    export type CustomPriceMapping = {
+        [name: string]: {
+            bid: number; // 105
+            ask: number; // 167
+            avg30: number; // 175
+            liquidity: number; // 78.14
+        };
+    }
+    export type ApiBuffResponse = {
+        data: CustomPriceMapping,
+        time: number;
+        cached: boolean;
+    };
+
     /**
      * Mapping corresponding to the response from https://prices.csgotrader.app/latest/buff163.json
      */

diff --git a/src/@typings/FloatTypes.d.ts b/src/@typings/FloatTypes.d.ts
@@ -26,6 +26,7 @@ export namespace CSFloat {
         float: number;
         price: number;
         bargain: false | number;
+        currency: string;
     };
 
     export type ListingData = {
@@ -101,6 +102,22 @@ export namespace CSFloat {
         wear: number;
     };
 
+    // https://csfloat.com/api/v1/meta/location
+    export type Location = {
+        inferred_location: {
+            currency: string;
+            long: string; // country
+            short: string; // country code
+        }
+    }
+
+    // https://csfloat.com/api/v1/meta/exchange-rates
+    export type ExchangeRates = {
+        data: {
+            [key: string]: number;
+        }
+    };
+
     export type HistoryGraphData = {
         avg_price: number;
         count: number;

diff --git a/src/csfloat/content_script.ts b/src/csfloat/content_script.ts
@@ -5,6 +5,7 @@ import { BlueGem, Extension, FadePercentage } from '../@typings/ExtensionTypes';
 import { activateHandler } from '../eventhandler';
 import {
     getBuffMapping,
+    getCSFCurrencyRate,
     getCSFPopupItem,
     getCrimsonWebMapping,
     getFirstCSFItem,
@@ -566,6 +567,8 @@ function applyMutation() {
                     } else if (location.pathname == '/profile/offers' && addedNode.className.toString().includes('mat-list-item')) {
                         // offer list in offers page
                         offerItemClickListener(addedNode);
+                    } else if (addedNode.tagName.toLowerCase() == 'app-markdown-dialog') {
+                        adjustCurrencyChangeNotice(addedNode);
                     }
                 }
             }
@@ -581,6 +584,33 @@ function applyMutation() {
     observer.observe(document, { childList: true, subtree: true });
 }
 
+function adjustCurrencyChangeNotice(container: Element) {
+    const warningDiv = document.createElement('div');
+    warningDiv.setAttribute('style', 'display: flex; align-items: center; background-color: hsl(0deg 100% 27.25% / 50%); border-radius: 18px;');
+    const warningSymbol = document.createElement('img');
+    warningSymbol.setAttribute('src', extensionSettings.runtimePublicURL + '/triangle-exclamation-solid.svg');
+    warningSymbol.style.height = '30px';
+    warningSymbol.style.margin = '0 10px';
+    warningSymbol.style.filter = 'brightness(0) saturate(100%) invert(87%) sepia(66%) saturate(5511%) hue-rotate(102deg) brightness(103%) contrast(104%)';
+    const warningText = document.createElement('p');
+    warningText.textContent = 'Please note that BetterFloat requires a page refresh after changing the currency.';
+    warningDiv.appendChild(warningSymbol);
+    warningDiv.appendChild(warningText);
+
+    const refreshContainer = document.createElement('div');
+    refreshContainer.setAttribute('style', 'display: flex; align-items: center; justify-content: center;     margin-top: 15px;');
+    const refreshButton = document.createElement('button');
+    refreshButton.className = 'mat-raised-button mat-warn';
+    refreshButton.textContent = 'Refresh';
+    refreshButton.onclick = () => {
+        location.reload();
+    };
+    refreshContainer.appendChild(refreshButton);
+
+    container.children[0].appendChild(warningDiv);
+    container.children[0].appendChild(refreshContainer);
+}
+
 async function adjustItemBubble(container: Element) {
     const buffData: { buff_name: string; priceFromReference: number } = JSON.parse(document.querySelector('.betterfloat-buffprice')?.getAttribute('data-betterfloat') ?? '{}');
     const bargainPrice = Number(container.querySelector('b')?.textContent?.replace('$', ''));
@@ -656,6 +686,7 @@ async function adjustSalesTableRow(container: Element) {
 
 async function adjustItem(container: Element, isPopout = false) {
     const item = getFloatItem(container);
+    // console.log('[BetterFloat] Adjusting item:', item);
     if (Number.isNaN(item.price)) return;
     const priceResult = await addBuffPrice(item, container, isPopout);
     const cachedItem = getFirstCSFItem();
@@ -681,6 +712,7 @@ async function adjustItem(container: Element, isPopout = false) {
             removeImageElements(container);
         }
         await patternDetections(container, cachedItem, false);
+        addScreenshotReplacement(container, cachedItem);
     } else if (isPopout) {
         // need timeout as request is only sent after popout is loaded
         setTimeout(async () => {
@@ -698,6 +730,7 @@ async function adjustItem(container: Element, isPopout = false) {
                 await patternDetections(container, apiItem, true);
                 await addFloatColoring(container, apiItem);
                 addQuickLinks(container, apiItem);
+                addScreenshotReplacement(container, apiItem);
             }
 
             // last as it has to wait for history api data
@@ -706,6 +739,13 @@ async function adjustItem(container: Element, isPopout = false) {
     }
 }
 
+function addScreenshotReplacement(container: Element, listing: CSFloat.ListingData) {
+    const detailButtons = container.querySelector('.detail-buttons');
+    if (detailButtons && container.querySelectorAll('.detail-buttons > button').length == 0 && !detailButtons.querySelector('.bf-tooltip') && listing.item.inspect_link && listing.item.type == 'skin') {
+        CSFloatHelpers.addReplacementScreenshotButton(detailButtons, '#06dedf', `https://swap.gg/screenshot?inspectLink=${listing.item.inspect_link}`, extensionSettings.runtimePublicURL);
+    }
+}
+
 function addQuickLinks(container: Element, listing: CSFloat.ListingData) {
     const actionsContainer = document.querySelector('.item-actions');
     if (!actionsContainer) return;
@@ -815,7 +855,7 @@ async function patternDetections(container: Element, listing: CSFloat.ListingDat
         await badgeCKimono(container, item);
     } else if (item.item_name.includes('Phoenix Blacklight')) {
         await badgePhoenix(container, item);
-    } else if (item.item_name.includes('Gamma Doppler') && item.phase == 'Phase 3') {
+    } else if (item.item_name.includes('Karambit | Gamma Doppler') && item.phase == 'Phase 3') {
         await badgeCyanbit(container, item);
     } else if (item.item_name.includes('Overprint')) {
         await badgeOverprint(container, item);
@@ -1394,12 +1434,25 @@ function getFloatItem(container: Element): CSFloat.FloatItem {
     const header_details = <Element>nameContainer?.childNodes[1];
 
     const name = nameContainer?.querySelector('.item-name')?.textContent?.replace('\n', '').trim();
-    const priceText = priceContainer?.textContent?.trim().split(' ') ?? [];
+    let priceText = priceContainer?.textContent?.trim().split(/\s/) ?? [];
     let price: string;
+    let currency = '$';
     if (location.pathname === '/sell') {
         price = priceText[1].split('Price')[1];
+    } else if (priceText.includes('Bids')) {
+        price = '0';
     } else {
-        price = priceText.includes('Bids') ? '0' : priceText[0];
+        let pricingText = priceText[0];
+        if (pricingText.split(/\s/).length > 1) {
+            let parts = pricingText.replace(',', '').replace('.', '').split(/\s/);
+            price = String(Number(parts.filter((x) => !isNaN(+x)).join('')) / 100);
+            currency = parts.filter((x) => isNaN(+x))[0];
+        } else {
+            const firstDigit = Array.from(pricingText).findIndex((x) => !isNaN(Number(x)));
+            currency = pricingText.substring(0, firstDigit);
+            price = String(Number(pricingText.substring(firstDigit).replace(',', '').replace('.', '')) / 100);
+        }
+        console.log(currency, price);
     }
     let condition: ItemCondition = '';
     let quality = '';
@@ -1410,7 +1463,7 @@ function getFloatItem(container: Element): CSFloat.FloatItem {
             switch (node.nodeType) {
                 case Node.ELEMENT_NODE:
                     const text = node.textContent?.trim();
-                    if (text && (text.includes('StatTrak') || text.includes('Souvenir') || text.includes('Container') || text.includes('Sticker'))) {
+                    if (text && (text.includes('StatTrak') || text.includes('Souvenir') || text.includes('Container') || text.includes('Sticker') || text.includes('Agent'))) {
                         // TODO: integrate the ItemQuality type
                         // https://stackoverflow.com/questions/51528780/typescript-check-typeof-against-custom-type
                         quality = text;
@@ -1436,8 +1489,9 @@ function getFloatItem(container: Element): CSFloat.FloatItem {
         style: style,
         condition: condition,
         float: Number(floatContainer?.querySelector('.ng-star-inserted')?.textContent ?? 0),
-        price: price?.includes('Bids') ? 0 : Number(price?.split(' ver')[0].split('  ')[0].trim().replace('$', '').replace(',', '')),
+        price: price?.includes('Bids') ? 0 : parseInt(price),
         bargain: false,
+        currency: currency,
     };
 }
 
@@ -1447,14 +1501,21 @@ async function getBuffItem(item: CSFloat.FloatItem) {
 
     const { priceListing, priceOrder } = await getBuffPrice(buff_name, item.style);
 
+    const userCurrency = document.querySelector('mat-select-trigger')?.textContent?.trim() ?? 'USD';
+    let currencyRate = await getCSFCurrencyRate(userCurrency);
+    if (!currencyRate) {
+        console.log('[BetterFloat] Could not get currency rate for ' + userCurrency);
+        currencyRate = 1;
+    }
+
     const priceFromReference = extensionSettings.priceReference == 1 ? priceListing : priceOrder;
     return {
         buff_name: buff_name,
         buff_id: buff_id,
-        priceListing: priceListing,
-        priceOrder: priceOrder,
-        priceFromReference: priceFromReference,
-        difference: item.price - priceFromReference,
+        priceListing: priceListing * currencyRate,
+        priceOrder: priceOrder * currencyRate,
+        priceFromReference: priceFromReference * currencyRate,
+        difference: item.price - (priceFromReference * currencyRate),
     };
 }
 
@@ -1469,6 +1530,8 @@ async function addBuffPrice(
 
     let suggestedContainer = container.querySelector('.reference-container');
     const showBoth = extensionSettings.showSteamPrice || isPopout;
+    const userCurrency = document.querySelector('mat-select-trigger')?.textContent?.trim() ?? 'USD';
+    const CurrencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: userCurrency, minimumFractionDigits: 0, maximumFractionDigits: 2 });
 
     if (!suggestedContainer && location.pathname === '/sell') {
         suggestedContainer = document.createElement('div');
@@ -1503,15 +1566,15 @@ async function addBuffPrice(
         buffPrice.appendChild(tooltipSpan);
         const buffPriceBid = document.createElement('span');
         buffPriceBid.setAttribute('style', 'color: orange;');
-        buffPriceBid.textContent = `Bid ${USDollar.format(priceOrder)}`;
+        buffPriceBid.textContent = `Bid ${CurrencyFormatter.format(priceOrder)}`;
         buffPrice.appendChild(buffPriceBid);
         const buffPriceDivider = document.createElement('span');
         buffPriceDivider.setAttribute('style', 'color: gray;margin: 0 3px 0 3px;');
         buffPriceDivider.textContent = '|';
         buffPrice.appendChild(buffPriceDivider);
         const buffPriceAsk = document.createElement('span');
         buffPriceAsk.setAttribute('style', 'color: greenyellow;');
-        buffPriceAsk.textContent = `Ask ${USDollar.format(priceListing)}`;
+        buffPriceAsk.textContent = `Ask ${CurrencyFormatter.format(priceListing)}`;
         buffPrice.appendChild(buffPriceAsk);
         buffContainer.appendChild(buffPrice);
 
@@ -1557,18 +1620,18 @@ async function addBuffPrice(
         let differenceSymbol;
         if (difference < 0) {
             backgroundColor = extensionSettings.colors.csfloat.profit;
-            differenceSymbol = '-$';
+            differenceSymbol = '-';
         } else if (difference > 0) {
             backgroundColor = extensionSettings.colors.csfloat.loss;
-            differenceSymbol = '+$';
+            differenceSymbol = '+';
         } else {
             backgroundColor = extensionSettings.colors.csfloat.neutral;
-            differenceSymbol = '-$';
+            differenceSymbol = '-';
         }
 
-        const buffPriceHTML = `<span class="sale-tag betterfloat-sale-tag" style="background-color: ${backgroundColor};" data-betterfloat="${difference}">${differenceSymbol}${Math.abs(
+        const buffPriceHTML = `<span class="sale-tag betterfloat-sale-tag" style="background-color: ${backgroundColor};" data-betterfloat="${difference}">${differenceSymbol}${CurrencyFormatter.format(Math.abs(
             difference
-        ).toFixed(2)} ${extensionSettings.showBuffPercentageDifference ? ' (' + ((item.price / priceFromReference) * 100).toFixed(2) + '%)' : ''}</span>`;
+        ))} ${extensionSettings.showBuffPercentageDifference ? ' (' + ((item.price / priceFromReference) * 100).toFixed(2) + '%)' : ''}</span>`;
         if (item.price > 1999 && extensionSettings.showBuffPercentageDifference) parseHTMLString('<br>', priceContainer);
 
         parseHTMLString(buffPriceHTML, priceContainer);
@@ -1583,7 +1646,7 @@ function createBuffName(item: CSFloat.FloatItem): string {
     let full_name = `${item.name}`;
     if (item.quality.includes('Sticker')) {
         full_name = 'Sticker | ' + full_name;
-    } else if (!item.quality.includes('Container')) {
+    } else if (!item.quality.includes('Container') && !item.quality.includes('Agent')) {
         if (item.quality.includes('StatTrak') || item.quality.includes('Souvenir')) {
             full_name = full_name.includes('★') ? `★ StatTrak™ ${full_name.split('★ ')[1]}` : `${item.quality} ${full_name}`;
         }

diff --git a/src/csfloat/csfloat_helpers.ts b/src/csfloat/csfloat_helpers.ts
@@ -59,7 +59,7 @@ export namespace CSFloatHelpers {
         badgeContainer.appendChild(badge);
     }
 
-    export function addReplacementScreenshotButton(detailButtons: Element, color: string, href: string) {
+    export function addReplacementScreenshotButton(detailButtons: Element, color: string, href: string, runtimePublicURL?: string) {
         detailButtons.setAttribute('style', 'display: flex;');
         const outerContainer = document.createElement('div');
         outerContainer.className = 'bf-tooltip';
@@ -73,16 +73,27 @@ export namespace CSFloatHelpers {
         iconButton.setAttribute('style', `color: ${buttonColor};`);
         const iconSpan = document.createElement('span');
         iconSpan.className = 'mat-button-wrapper';
-        const icon = document.createElement('i');
-        icon.className = 'material-icons';
-        icon.textContent = 'camera_alt';
-        iconSpan.appendChild(icon);
+        if (runtimePublicURL) {
+            const icon = document.createElement('img');
+            icon.setAttribute('style', 'width: 24px; height: 24px;');
+            icon.setAttribute('src', runtimePublicURL + '/camera-add-solid.svg');
+            iconSpan.appendChild(icon);
+        } else {
+            const icon = document.createElement('i');
+            icon.className = 'material-icons';
+            icon.textContent = 'camera_alt';
+            iconSpan.appendChild(icon);
+        }
         iconButton.appendChild(iconSpan);
         screenshotButton.appendChild(iconButton);
         let tooltip = document.createElement('div');
         tooltip.className = 'bf-tooltip-inner';
         let tooltipSpan = document.createElement('span');
-        tooltipSpan.textContent = 'Show pattern screenshot';
+        if (runtimePublicURL) {
+            tooltipSpan.textContent = 'Generate Swap.gg screenshot';
+        } else {
+            tooltipSpan.textContent = 'Show pattern screenshot';
+        }
         tooltip.appendChild(tooltipSpan);
         outerContainer.appendChild(screenshotButton);
         outerContainer.appendChild(tooltip);

diff --git a/src/eventhandler.ts b/src/eventhandler.ts
@@ -13,6 +13,8 @@ import {
     cacheSkinbidUserCurrency,
     cacheSpItems,
     cacheSpPopupItem,
+    cacheCSFLocation,
+    cacheCSFExchangeRates,
 } from './mappinghandler';
 import { handleListed, handleSold } from './skinport/websockethandler';
 
@@ -162,6 +164,10 @@ function processCSFloatEvent(eventData: EventData<unknown>) {
             // item table - last sales
             cacheCSFHistorySales(eventData.data as CSFloat.HistorySalesData[]);
         }
+    } else if (eventData.url.includes('v1/meta/location')) {
+        cacheCSFLocation(eventData.data as CSFloat.Location);
+    } else if (eventData.url.includes('v1/meta/exchange-rates')) {
+        cacheCSFExchangeRates(eventData.data as CSFloat.ExchangeRates);
     } else if (eventData.url.includes('v1/me')) {
         // user data, repeats often
     } else if (eventData.url.includes('v1/listings/') && eventData.url.split('/').length == 7) {