Adds swapping of currency

renderer/src/web/Config.ts

@@ -23,6 +23,7 @@ export function AppConfig(type?: string) {
 
 export function updateConfig(updates: Config) {
   _config.value = deepReactive(JSON.parse(JSON.stringify(updates)));
+  console.log("SET CONFIG");
   document.documentElement.style.fontSize = `${_config.value!.fontSize}px`;
 }
 

renderer/src/web/background/Prices.ts

@@ -2,6 +2,9 @@ import { shallowRef, watch, readonly } from "vue";
 import { createGlobalState } from "@vueuse/core";
 import { Host } from "@/web/background/IPC";
 import { useLeagues } from "./Leagues";
+import { AppConfig } from "../Config";
+import { PriceCheckWidget } from "../overlay/widgets";
+import { usePrimaryCurrency } from "./PrimaryCurrency";
 
 interface NinjaDenseInfo {
   exalted: number;
@@ -27,8 +30,12 @@ export interface CurrencyValue {
 
 export const usePoeninja = createGlobalState(() => {
   const leagues = useLeagues();
+  const primaryCurrency = usePrimaryCurrency();
 
   const xchgRate = shallowRef<number | undefined>(undefined);
+  const xchgRateCurrency = shallowRef<"chaos" | "exalted" | undefined>(
+    undefined,
+  );
 
   const isLoading = shallowRef(false);
   let PRICES_DB: PriceDatabase = [];
@@ -76,12 +83,32 @@ export const usePoeninja = createGlobalState(() => {
         return;
       }
       PRICES_DB = splitJsonBlob(jsonBlob);
+
+      // TODO: update to search for requested currency instead of divine
       const divine = findPriceByQuery({
         ns: "ITEM",
         name: "Divine Orb",
       });
+      const preferred =
+        AppConfig<PriceCheckWidget>("price-check")!.primaryCurrency;
+
       if (divine && divine.exalted >= 30) {
-        xchgRate.value = divine.exalted;
+        if (preferred === "exalted") {
+          xchgRate.value = divine.exalted;
+          xchgRateCurrency.value = "exalted";
+        } else {
+          const ex = divine.exalted;
+          if (preferred === "chaos") {
+            const chaos = findPriceByQuery({
+              ns: "ITEM",
+              name: "Chaos Orb",
+            });
+            if (chaos && ex / chaos.exalted >= 5) {
+              xchgRate.value = ex / chaos.exalted;
+              xchgRateCurrency.value = "chaos";
+            }
+          }
+        }
       }
 
       // Clear cache
@@ -191,6 +218,17 @@ export const usePoeninja = createGlobalState(() => {
   }, RETRY_INTERVAL_MS);
 
   watch(leagues.selectedId, () => {
+    console.log(`WATCH LEAGUE RUN ${leagues.selectedId.value}`);
+    xchgRate.value = undefined;
+    PRICES_DB = [];
+    load(true);
+  });
+
+  console.log("SETTING UP PRICES");
+  watch(primaryCurrency.selectedId, (curr, prev) => {
+    console.log(`WATCH PRIMARY RUN ${curr} ${prev}`);
+    if (curr === prev) return;
+    xchgRateCurrency.value = curr ?? "exalted";
     xchgRate.value = undefined;
     PRICES_DB = [];
     load(true);
@@ -198,6 +236,7 @@ export const usePoeninja = createGlobalState(() => {
 
   return {
     xchgRate: readonly(xchgRate),
+    xchgRateCurrency: readonly(xchgRateCurrency),
     findPriceByQuery,
     autoCurrency,
     queuePricesFetch,

renderer/src/web/background/PrimaryCurrency.ts

@@ -0,0 +1,75 @@
+import { ITEM_BY_REF } from "@/assets/data";
+import { createGlobalState } from "@vueuse/core";
+import { computed, shallowRef, readonly } from "vue";
+import { AppConfig } from "../Config";
+import { PriceCheckWidget } from "../overlay/widgets";
+
+interface PrimaryCurrency {
+  id: string;
+  abbrev: string;
+  ref: string;
+  text: string;
+  icon: string;
+}
+
+function getAvailableCurrencies(): PrimaryCurrency[] {
+  return [
+    {
+      id: "exalted",
+      abbrev: "ex",
+      ref: "Exalted Orb",
+      text: "Exalted Orb",
+      icon: "/images/exa.png",
+    },
+    {
+      id: "chaos",
+      abbrev: "c",
+      ref: "Chaos Orb",
+      text: "Chaos Orb",
+      icon: "/images/chaos.png",
+    },
+  ];
+}
+
+export const usePrimaryCurrency = createGlobalState(() => {
+  const availableCurrencies = shallowRef<PrimaryCurrency[]>([]);
+  const selectedId = computed<"exalted" | "chaos">({
+    get() {
+      return availableCurrencies.value.length
+        ? AppConfig<PriceCheckWidget>("price-check")!.primaryCurrency
+        : "exalted";
+    },
+    set(id) {
+      AppConfig<PriceCheckWidget>("price-check")!.primaryCurrency = id;
+    },
+  });
+
+  const selected = computed(() => {
+    const { primaryCurrency } = AppConfig<PriceCheckWidget>("price-check")!;
+    if (!availableCurrencies.value || !primaryCurrency) return undefined;
+    const listed = availableCurrencies.value.find(
+      (currency) => currency.id === primaryCurrency,
+    );
+    return listed;
+  });
+
+  function load() {
+    availableCurrencies.value = getAvailableCurrencies().map((currency) => ({
+      ...currency,
+      text: ITEM_BY_REF("ITEM", currency.ref)![0].name,
+    }));
+    const haveCurrency = availableCurrencies.value.some(
+      (currency) => currency.id === selectedId.value,
+    );
+    if (!haveCurrency) {
+      selectedId.value = "exalted";
+    }
+  }
+
+  return {
+    selectedId,
+    selected,
+    list: readonly(availableCurrencies),
+    load,
+  };
+});

renderer/src/web/overlay/OverlayWindow.vue

@@ -74,6 +74,7 @@ import LoadingAnimation from "./LoadingAnimation.vue";
 import { usePoeninja } from "@/web/background/Prices";
 import { useLeagues } from "@/web/background/Leagues";
 import { handleLine } from "@/web/client-log/client-log";
+import { usePrimaryCurrency } from "../background/PrimaryCurrency";
 
 type WMID = Widget["wmId"];
 
@@ -84,6 +85,7 @@ export default defineComponent({
   setup() {
     usePoeninja();
     useLeagues().load();
+    usePrimaryCurrency().load();
 
     const active = shallowRef(!Host.isElectron);
     const gameFocused = shallowRef(false);

renderer/src/web/price-check/settings-price-check.vue

@@ -89,8 +89,13 @@
     <div class="mb-4">
       <div class="flex-1 mb-1">{{ t(":primary_currency") }}</div>
       <select v-model="primaryCurrency" class="p-1 rounded bg-gray-700 w-24">
-        <option value="exalted">Exalted</option>
-        <option value="chaos">Chaos</option>
+        <option
+          v-for="currency of primaryCurrencies.list.value"
+          :key="currency.id"
+          :value="currency.id"
+        >
+          {{ currency.text }}
+        </option>
       </select>
     </div>
     <ui-checkbox class="mb-4" v-model="activateStockFilter">{{
@@ -204,6 +209,7 @@ import { configModelValue, configProp, findWidget } from "../settings/utils.js";
 import type { PriceCheckWidget } from "@/web/overlay/interfaces";
 import { useLeagues } from "../background/Leagues";
 import { getRuneNameByRef } from "./filters/fill-runes.js";
+import { usePrimaryCurrency } from "../background/PrimaryCurrency.js";
 
 export default defineComponent({
   name: "price_check.name",
@@ -215,6 +221,7 @@ export default defineComponent({
     );
 
     const leagues = useLeagues();
+    const primaryCurrencies = usePrimaryCurrency();
     const { t } = useI18nNs("price_check");
 
     return {
@@ -302,6 +309,7 @@ export default defineComponent({
         "defaultAllSelected",
       ),
       leagues,
+      primaryCurrencies,
       tooltipHover: configModelValue(
         () => configWidget.value,
         "itemHoverTooltip",