add "oneClickOrder" feature for Skinport (#36)

* feat: oneClickOrder * feat: oneClickOrder * Extension setting for Skinport's OneClickBuy * Reworked OCO Error popup * Adjust OCO error message design * Skinport OCO CSRF caching * OCO Cart checking + code cleanup * Bugfix: add missing await for csrf caching * Limit OCO on item prices < 2 * Dynamic min order price * fix: merge issue --------- Co-authored-by: GODrums <armin.stanitzok@outlook.de> Co-authored-by: Armin <21990230+GODrums@users.noreply.github.com>
GODrums · Dec 21, 2023 · 9438ae9 · 9438ae9
1 parent 9361724
commit 9438ae9
Show file tree

Hide file tree

Showing 11 changed files with 345 additions and 3 deletions.
diff --git a/css/popup.css b/css/popup.css
@@ -157,6 +157,16 @@ input[type='checkbox'] {
     margin-right: 15px;
 }
 
+input[type='text'] {
+    width: 150px;
+    height: 30px;
+    border-radius: 5px;
+    margin-right: 15px;
+    background: var(--color-background, #303030);
+    border: 0;
+    color: white;
+}
+
 input[type="color"] {
     width: 23px;
     height: 23px;
@@ -395,6 +405,15 @@ input[type="color"]::-webkit-color-swatch-wrapper {
     }
 }
 
+.LabelNew {
+    background: var(--color-accent, #ff5722);
+    border-radius: 5px;
+    padding: 3px 7px;
+    color: white;
+    font-size: 12px;
+    margin-left: 5px;
+}
+
 @keyframes rotating {
     from {
         -ms-transform: rotate(0deg);

diff --git a/css/skinport_styles.css b/css/skinport_styles.css
@@ -178,4 +178,53 @@
 
 .betterfloat-filterpopup-content {
     margin: 10px 20px;
+}
+
+.BetterFloat-OCO-Message {
+    bottom: 8px;
+    left: 8px;
+    position: fixed;
+    z-index: 100;
+}
+
+.BetterFloat-OCO-Message .Message {
+    animation: shakeMessage 1s .2s;
+    background-color: #fff;
+    border-radius: 2.5px;
+    box-shadow: 0 10px 40px #1d2021;
+    color: #1d2021;
+    display: flex;
+    flex-direction: column;
+    max-width: 330px;
+    padding: 16px 20px 23px;
+    position: relative;
+}
+
+.BetterFloat-OCO-Message .Message--error .Message-title {
+    color: #fa490a;
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 7px;
+}
+
+.BetterFloat-OCO-Message .Message-text {
+    font-size: 12px;
+    line-height: 18px;
+    margin-bottom: 14px;
+}
+
+.BetterFloat-OCO-Message .Message-buttons {
+    display: flex;
+}
+
+.BetterFloat-OCO-Message .Message-closeBtn {
+    color: #4db5da;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 1.6px;
+    margin-right: 0;
+    outline: none;
+    position: relative;
+    text-transform: uppercase;
+    transition: color .2s ease;
 }
diff --git a/html/skinport.html b/html/skinport.html
@@ -62,6 +62,20 @@
 </div>
 <div class="Group">
     <div class="GroupHeader">MISC</div>
+    <div class="GroupElement">
+        <div class="GroupElementExtended">
+            <div class="GroupRow">
+                <div style="display: flex; align-items: center; gap: 4px;">
+                    <p class="ElementText">OneClickBuy</p>
+                    <span class="LabelNew">NEW</span>
+                </div>
+                <input type="text" id="InputOneClickBuy" name="ocoAPIKey" />
+            </div>
+            <p class="ElementDescription" style="padding-bottom: 0;">
+                Enter your API-key for the OneClickBuy-feature. Leave empty to disable.<br /> A valid key can be generated on the BetterFloat Discord server.
+            </p>
+        </div>
+    </div>
     <div class="GroupElementExtended">
         <div class="GroupRow">
             <p class="ElementText">Buff Link Position</p>

diff --git a/src/@typings/ExtensionTypes.d.ts b/src/@typings/ExtensionTypes.d.ts
@@ -18,6 +18,7 @@ export namespace Extension {
         spCheckBoxes: boolean;
         spStickerPrices: boolean;
         spBlueGem: boolean;
+        ocoAPIKey: string;
         spPriceReference: 0 | 1;
         spSteamPrice: boolean;
         spBuffDifference: boolean;

diff --git a/src/background.ts b/src/background.ts
@@ -19,6 +19,7 @@ export const defaultSettings: Extension.Settings = {
     spCheckBoxes: true,
     spStickerPrices: true,
     spBlueGem: true,
+    ocoAPIKey: '',
     spPriceReference: 0,
     skinportRates: 'real',
     spSteamPrice: false,

diff --git a/src/csfloat/content_script.ts b/src/csfloat/content_script.ts
@@ -1020,7 +1020,7 @@ async function webDetection(container: Element, item: CSFloat.Item) {
     // add replacement screenshot if csfloat does not offer one and if available
     const detailButtons = container.querySelector('.detail-buttons');
     if (detailButtons && container.querySelectorAll('.detail-buttons > button').length == 0 && cw_data.img) {
-        CSFloatHelpers.addReplacementScreenshotButton(detailButtons, item.item_name.includes('Crimson') ? 'rgb(69 10 10)' : 'rgb(101 163 13)', cw_data.img);
+        CSFloatHelpers.addReplacementScreenshotButton(container, item.item_name.includes('Crimson') ? 'rgb(69 10 10)' : 'rgb(101 163 13)', cw_data.img);
     }
 }
 

diff --git a/src/eventhandler.ts b/src/eventhandler.ts
@@ -13,6 +13,7 @@ import {
     cacheSkinbidUserCurrency,
     cacheSpItems,
     cacheSpPopupItem,
+    cacheSpMinOrderPrice,
     cacheCSFLocation,
     cacheCSFExchangeRates,
 } from './mappinghandler';
@@ -131,6 +132,7 @@ function processSkinportEvent(eventData: EventData<unknown>) {
         // Data from first page load
         const data = eventData.data as Skinport.UserData;
         cacheSkinportCurrencyRates(data.rates, data.currency);
+        cacheSpMinOrderPrice(data.limits.minOrderValue);
     }
 }
 

diff --git a/src/mappinghandler.ts b/src/mappinghandler.ts
@@ -30,6 +30,10 @@ let skinportItems: Skinport.Item[] = [];
 let skinportPopupItem: Skinport.ItemData | null = null;
 // skinport: cached currency rates by Skinport: USD -> X
 let skinportRatesFromUSD: { [currency: string]: number } = {};
+// skinport: csrf token
+let skinportCSRF = '';
+// skinport: minimum order price
+let skinportMinOrderPrice = 0;
 // skinbid: cached currency rates by Skinbid: EUR -> X
 let skinbidRates: Skinbid.ExchangeRates = [];
 // skinport: cached currency rates by exchangerate.host: USD -> X
@@ -89,6 +93,10 @@ export function cacheCSFLocation(data: CSFloat.Location) {
     csfloatLocation = data;
 }
 
+export function cacheSpMinOrderPrice(price: number) {
+    skinportMinOrderPrice = price;
+}
+
 export function cacheCSFPopupItem(data: CSFloat.ListingData) {
     csfloatPopupItem = data;
 }
@@ -106,13 +114,18 @@ export function cacheSpItems(data: Skinport.Item[]) {
 }
 
 export function cacheSkinportCurrencyRates(data: { [currency: string]: number }, user: string) {
+    // maybe cache csrf token here as well
     if (Object.keys(skinportRatesFromUSD).length > 0) {
         console.debug('[BetterFloat] Currency rates already cached, overwriting old ones: ', skinportRatesFromUSD);
     }
     skinportRatesFromUSD = data;
     skinportUserCurrency = user;
 }
 
+export function cacheSkinportCSRF(token: string) {
+    skinportCSRF = token;
+}
+
 export function cacheSkinbidCurrencyRates(rates: Skinbid.ExchangeRates) {
     skinbidRates = rates;
 }
@@ -128,6 +141,11 @@ export function cacheRealCurrencyRates(data: { [currency: string]: number }) {
     realRatesFromUSD = data;
 }
 
+
+export function getSpMinOrderPrice() {
+    return skinportMinOrderPrice;
+}
+
 // USD / rate = target currency
 export async function getCSFCurrencyRate(currency: string) {
     if (Object.keys(csfloatRates).length == 0) {
@@ -138,6 +156,7 @@ export async function getCSFCurrencyRate(currency: string) {
 
 export function getCSFUserCurrency() {
     return csfloatLocation?.inferred_location.currency ?? 'USD';
+
 }
 
 export function getWholeHistory() {
@@ -240,6 +259,13 @@ export async function getSpUserCurrencyRate(rates: 'skinport' | 'real' = 'real')
     return rates == 'real' ? realRatesFromUSD[skinportUserCurrency] : skinportRatesFromUSD[skinportUserCurrency];
 }
 
+export async function getSpCSRF() {
+    if (skinportCSRF == '') {
+        await fetchUserData();
+    }
+    return skinportCSRF;
+}
+
 export async function getSkbUserCurrencyRate() {
     if (skinbidUserCurrency == '') {
         skinbidUserCurrency = document.querySelector('.currency-selector .hide-mobile')?.textContent?.trim() ?? 'USD';
@@ -273,6 +299,7 @@ async function fetchUserData() {
         .then((data: Skinport.UserData) => {
             console.debug('[BetterFloat] Received user data from Skinport manually: ', data);
             cacheSkinportCurrencyRates(data.rates, data.currency);
+            cacheSkinportCSRF(data.csrf);
         });
 }
 

diff --git a/src/popup.ts b/src/popup.ts
@@ -55,6 +55,18 @@ function addListeners() {
         $('.MainContent').css('height', '528px');
         $('.Warning').show(100);
     });
+    $('input[type=text]').on('change', function () {
+        const attrName = $(this).attr('name');
+        if (attrName) {
+            chrome.storage.local.set({
+                [attrName]: $(this).val(),
+            });
+        }
+        $('.SideBar').css('height', '528px');
+        $('.MainContent').css('height', '528px');
+        $('.Warning').show(100);
+    });
+
     // add listeners to all dropdowns
     $('select').on('change', function () {
         const attrName = $(this).attr('name');
@@ -241,6 +253,7 @@ function loadForSkinport() {
     const checkBoxesElement = <HTMLInputElement>document.getElementById('SkinportCheckboxes');
     const stickerPriceElement = <HTMLInputElement>document.getElementById('SkinportStickerPrices');
     const skinportBlueGem = <HTMLInputElement>document.getElementById('InputCSBlueGem');
+    const skinportOneClickBuy = <HTMLInputElement>document.getElementById('InputOneClickBuy');
     const skinportSteamPrice = <HTMLInputElement>document.getElementById('SkinportSteamPrice');
     const skinportInputBuffDifference = <HTMLInputElement>document.getElementById('SkinportInputBuffDifference');
     const skinportAutoClosePopup = <HTMLInputElement>document.getElementById('SkinportInputClosePopup');
@@ -270,6 +283,10 @@ function loadForSkinport() {
         } else {
             skinportBlueGem.checked = false;
         }
+        if (data.ocoAPIKey) {
+            skinportOneClickBuy.value = data.ocoAPIKey;
+        }
+
         if (data.skinportRates) {
             (<HTMLSelectElement>document.getElementById('SkinportCurrencyConversion')).value = data.skinportRates;
         }