Fix activeUnitLabel computation and add support for EUR and mSAT units

src/boot/base.js

@@ -41,10 +41,12 @@ window.windowMixin = {
         currency = "sat";
       }
       if (useUiStore().hideBalance && !showBalance) {
-        return "****"
+        return "****";
       }
       if (currency == "sat") return this.formatSat(value);
+      if (currency == "msat") return this.fromMsat(value);
       if (currency == "usd") value = value / 100;
+      if (currency == "eur") value = value / 100;
       return new Intl.NumberFormat(window.LOCALE, {
         style: "currency",
         currency: currency,
@@ -57,6 +59,10 @@ window.windowMixin = {
       value = parseInt(value);
       return new Intl.NumberFormat(window.LOCALE).format(value) + " sat";
     },
+    fromMsat: function (value) {
+      value = parseInt(value);
+      return new Intl.NumberFormat(window.LOCALE).format(value) + " msat";
+    },
     notifyApiError: function (error) {
       var types = {
         400: "warning",

src/components/InvoiceDetailDialog.vue

@@ -37,7 +37,7 @@
             flat
             color="primary"
             @click="toggleUnit()"
-            :label="activeUnit == 'sat' ? 'BTC' : 'USD'"
+            :label="activeUnitLabel"
           />
         </q-input>
         <div class="row items-center no-wrap q-my-sm q-py-none">
@@ -171,7 +171,7 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useWalletStore, ["invoiceData"]),
-    ...mapState(useMintsStore, ["activeUnit"]),
+    ...mapState(useMintsStore, ["activeUnit", "activeUnitLabel"]),
     ...mapState(useWorkersStore, ["invoiceWorkerRunning"]),
     ...mapWritableState(useUiStore, ["showInvoiceDetails", "tickerShort"]),
     displayUnit: function () {

src/components/SendTokenDialog.vue

@@ -64,7 +64,7 @@
               flat
               color="primary"
               @click="toggleUnit()"
-              :label="activeUnit == 'sat' ? 'BTC' : 'USD'"
+              :label="activeUnitLabel"
             />
           </q-input>
           <!-- <q-input
@@ -391,6 +391,7 @@ export default defineComponent({
     ...mapState(useMintsStore, [
       "activeProofs",
       "activeUnit",
+      "activeUnitLabel",
       "activeMintUrl",
       "activeMintBalance",
     ]),
@@ -581,7 +582,7 @@ export default defineComponent({
     lockTokens: async function () {
       let sendAmount = this.sendData.amount;
       // if unit is USD, multiply by 100
-      if (this.activeUnit === "usd") {
+      if (this.activeUnit === "usd" || this.activeUnit == "eur") {
         sendAmount = sendAmount * 100;
       }
       try {
@@ -625,7 +626,7 @@ export default defineComponent({
       try {
         let sendAmount = this.sendData.amount;
         // if unit is USD, multiply by 100
-        if (this.activeUnit === "usd") {
+        if (this.activeUnit === "usd" || this.activeUnit == "eur") {
           sendAmount = sendAmount * 100;
         }
         // keep firstProofs, send scndProofs and delete them (invalidate=true)

src/components/ToggleUnit.vue

@@ -4,7 +4,7 @@
     outline
     color="primary"
     @click="toggleUnit()"
-    :label="activeUnit == 'sat' ? 'BTC' : 'USD'"
+    :label="activeUnitLabel"
   />
 </template>
 <script>
@@ -26,7 +26,7 @@ export default defineComponent({
   mounted() {},
   watch: {},
   computed: {
-    ...mapState(useMintsStore, ["activeUnit"]),
+    ...mapState(useMintsStore, ["activeUnit", "activeUnitLabel"]),
   },
   methods: {
     ...mapActions(useMintsStore, ["toggleUnit"]),

src/stores/mints.ts

@@ -116,6 +116,19 @@ export const useMintsStore = defineStore("mints", {
       ).reduce((sum, p) => sum + p.amount, 0);
       return balance
     },
+    activeUnitLabel({ activeUnit }): string {
+      if (activeUnit == "sat") {
+        return "SAT";
+      } else if (activeUnit == "usd") {
+        return "USD";
+      } else if (activeUnit == "eur") {
+        return "EUR";
+      } else if (activeUnit == "msat") {
+        return "mSAT";
+      } else {
+        return activeUnit;
+      }
+    }
   },
   actions: {
     activeMint() {

src/stores/ui.ts

@@ -5,6 +5,8 @@ import { useLocalStorage } from "@vueuse/core";
 const unitTickerShortMap = {
   sat: "sats",
   usd: "USD",
+  eur: "EUR",
+  msat: "msats"
 };
 
 export const useUiStore = defineStore("ui", {
@@ -22,19 +24,6 @@ export const useUiStore = defineStore("ui", {
     setTab(tab: string) {
       this.tab = tab;
     },
-    formatCurrency: function (value: number, currency: string) {
-      if (currency == undefined) {
-        currency = "sat";
-      }
-      if (currency == "sat") return this.formatSat(value);
-      if (currency == "usd") value = value / 100;
-      return new Intl.NumberFormat(navigator.language, {
-        style: "currency",
-        currency: currency,
-      }).format(value);
-      // + " " +
-      // currency.toUpperCase()
-    },
     formatSat: function (value: number) {
       return new Intl.NumberFormat(navigator.language).format(value) + " sat";
     },