Global price

src/components/BalanceView.vue

@@ -2,17 +2,21 @@
   <!-- <q-card class="q-my-md q-py-sm">
     <q-card-section class="q-mt-sm q-py-xs"> -->
   <div class="q-pt-xl q-pb-md">
-    <div class="row justify-center q-pb-lg" style="height:80px">
+    <div class="row justify-center q-pb-lg" style="height: 80px">
       <div v-if="globalMutexLock">
         <transition
           appear
           enter-active-class="animated fadeIn"
           leave-active-class="animated fadeOut"
         >
-        <q-spinner-hourglass  class="q-mt-lg q-mb-none" size="lg" color="primary" />
-      </transition>
+          <q-spinner-hourglass
+            class="q-mt-lg q-mb-none"
+            size="lg"
+            color="primary"
+          />
+        </transition>
       </div>
-      <div v-else >
+      <div v-else>
         <transition
           appear
           enter-active-class="animated fadeIn"
@@ -134,9 +138,11 @@ import { useSettingsStore } from "stores/settings";
 import { useTokensStore } from "stores/tokens";
 import { useUiStore } from "stores/ui";
 import { useWalletStore } from "stores/wallet";
+import { usePriceStore } from "stores/price";
 import ToggleUnit from "components/ToggleUnit.vue";
 
 import axios from "axios";
+import { map } from "underscore";
 
 export default defineComponent({
   name: "BalanceView",
@@ -158,8 +164,8 @@ export default defineComponent({
       "activeMint",
     ]),
     ...mapState(useTokensStore, ["historyTokens"]),
-    ...mapState(useSettingsStore, ["getBitcoinPrice"]),
     ...mapState(useUiStore, ["globalMutexLock"]),
+    ...mapState(usePriceStore, ["bitcoinPrice"]),
     ...mapWritableState(useMintsStore, ["activeUnit"]),
     ...mapWritableState(useUiStore, ["hideBalance"]),
     pendingBalance: function () {
@@ -205,30 +211,18 @@ export default defineComponent({
   },
   data() {
     return {
-      bitcoinPrice: null,
       priceLabel: null,
     };
   },
   mounted() {
-    const settingsStore = useSettingsStore();
-    if (this.getBitcoinPrice) {
-      this.fetchPrice();
-    }
+    this.fetchBitcoinPriceUSD();
   },
   methods: {
     ...mapActions(useWalletStore, [
       "checkPendingInvoices",
       "checkPendingTokens",
-      "fetchBitcoinPriceUSD",
     ]),
-    async fetchPrice() {
-      try {
-        this.bitcoinPrice = await this.fetchBitcoinPriceUSD();
-        console.log(`bitcoinPrice: ${this.bitcoinPrice}`);
-      } catch (e) {
-        console.warn(`Could not get Bitcoin price. ${e}`);
-      }
-    },
+    ...mapActions(usePriceStore, ["fetchBitcoinPriceUSD"]),
     toggleUnit: function () {
       const units = this.activeMint().units;
       this.activeUnit =

src/components/PayInvoiceDialog.vue

@@ -11,22 +11,36 @@
       <div v-if="payInvoiceData.invoice">
         <div class="row items-center no-wrap q-mb-sm">
           <div class="col-10">
-            <h6
+            <div
               v-if="
                 payInvoiceData.meltQuote.response &&
                 payInvoiceData.meltQuote.response.amount > 0
               "
-              class="q-my-none"
             >
-              Pay
-              {{
-                formatCurrency(
-                  payInvoiceData.meltQuote.response.amount,
-                  activeUnit,
-                  true
-                )
-              }}
-            </h6>
+              <h6 class="q-my-none inline-block">
+                Pay
+                {{
+                  formatCurrency(
+                    payInvoiceData.meltQuote.response.amount,
+                    activeUnit,
+                    true
+                  )
+                }}
+              </h6>
+              <span
+                v-if="bitcoinPrice && activeUnit == 'sat'"
+                class="q-ml-xs text-subtitle2 text-grey-6"
+              >
+                ({{
+                  formatCurrency(
+                    (bitcoinPrice / 100000000) *
+                      payInvoiceData.meltQuote.response.amount,
+                    "USD",
+                    true
+                  )
+                }})
+              </span>
+            </div>
             <h6
               v-else-if="payInvoiceData.meltQuote.error != ''"
               class="q-my-none"
@@ -225,6 +239,8 @@ import { useWalletStore } from "src/stores/wallet";
 import { useUiStore } from "src/stores/ui";
 import { useCameraStore } from "src/stores/camera";
 import { useMintsStore } from "src/stores/mints";
+import { useSettingsStore } from "src/stores/settings";
+import { usePriceStore } from "src/stores/price";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import ChooseMint from "components/ChooseMint.vue";
 import ToggleUnit from "components/ToggleUnit.vue";
@@ -257,6 +273,7 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useUiStore, ["tickerShort", "globalMutexLock"]),
+    ...mapState(useSettingsStore, ["getBitcoinPrice"]),
     ...mapWritableState(useCameraStore, ["camera", "hasCamera"]),
     ...mapState(useWalletStore, ["payInvoiceData"]),
     ...mapState(useMintsStore, [
@@ -268,6 +285,7 @@ export default defineComponent({
       "activeBalance",
       "activeMintBalance",
     ]),
+    ...mapState(usePriceStore, ["bitcoinPrice"]),
     canPasteFromClipboard: function () {
       return (
         window.isSecureContext &&

src/components/SettingsView.vue

@@ -1209,9 +1209,6 @@ export default defineComponent({
       }
       this.notifySuccess("No reserved proofs left");
     },
-    toggleGetBitcoinPrice: function () {
-      this.getBitcoinPrice = !this.getBitcoinPrice;
-    },
     checkActiveProofsSpendable: async function () {
       // iterate over this.activeProofs in batches of 50 and check if they are spendable
       let proofs = this.activeProofs.flat();

src/stores/price.ts

@@ -0,0 +1,42 @@
+import { defineStore } from "pinia";
+import { useSettingsStore } from "./settings";
+import { useLocalStorage } from "@vueuse/core";
+import { notifyApiError, notifyError, notifySuccess, notifyWarning, notify } from "../js/notify";
+import axios from "axios";
+
+const unitTickerShortMap = {
+  sat: "sats",
+  usd: "USD",
+  eur: "EUR",
+  msat: "msats"
+};
+
+export const usePriceStore = defineStore("price", {
+  state: () => ({
+    bitcoinPrice: useLocalStorage("cashu.price.bitcoinPrice", 0 as number),
+    bitcoinPriceLastUpdated: useLocalStorage("cashu.price.bitcoinPriceLastUpdated", 0 as number),
+    bitcoinPriceMinRefreshInterval: 60_000,
+  }),
+  actions: {
+    fetchBitcoinPriceUSD: async function () {
+      if (!useSettingsStore().getBitcoinPrice) {
+        this.bitcoinPrice = 0;
+        this.bitcoinPriceLastUpdated = 0;
+        console.log("Not fetching bitcoin price, disabled in settings");
+        return;
+      }
+      if (Date.now() - this.bitcoinPriceLastUpdated < this.bitcoinPriceMinRefreshInterval) {
+        console.log(`Not fetching bitcoin price, last updated ${Date.now() - this.bitcoinPriceLastUpdated}ms ago: ${this.bitcoinPrice}`);
+        return;
+      }
+      var { data } = await axios.get(
+        "https://api.coinbase.com/v2/exchange-rates?currency=BTC"
+      );
+      this.bitcoinPrice = data.data.rates.USD;
+      this.bitcoinPriceLastUpdated = Date.now();
+    },
+  },
+  getters: {
+
+  },
+});