add mint info and QR code scan

src/components/MintDetailsDialog.vue

@@ -0,0 +1,128 @@
+<template>
+  <q-dialog
+    v-model="showMintInfoDialog"
+    position="top"
+    backdrop-filter="blur(2px) brightness(60%)"
+  >
+    <q-card v-if="showMintInfoData" class="q-px-lg q-pt-md q-pb-md qcard">
+      <div class="text-center q-mb-md q-mt-none q-pt-none">
+        <q-responsive :ratio="1" class="q-mx-md q-mt-none q-pt-none">
+          <vue-qrcode
+            :value="showMintInfoData.url"
+            :options="{ width: 340 }"
+            class="rounded-borders"
+          >
+          </vue-qrcode>
+        </q-responsive>
+        <div class="row justify-center">
+          <div class="row justify-center">
+            <q-chip outline class="q-pa-md q-mt-md">
+              <q-icon name="account_balance" size="xs" class="q-mr-xs" />
+              {{ showMintInfoData.url }}
+            </q-chip>
+          </div>
+          <q-card-section class="q-pa-sm">
+            <div
+              v-if="showMintInfoData.info.name"
+              class="row justify-center q-pt-sm"
+            >
+              <q-item-label
+                caption
+                v-if="showMintInfoData.info.name"
+                class="text-weight-bold text-white"
+                style="font-size: 16px"
+              >
+                {{ showMintInfoData.info.name }}
+              </q-item-label>
+            </div>
+            <div
+              v-if="showMintInfoData.info.description"
+              class="row justify-center q-pt-sm"
+            >
+              <q-item-label
+                caption
+                v-if="showMintInfoData.info.description"
+                class="text-white"
+                style="font-size: 12px"
+              >
+                {{ showMintInfoData.info.description }}
+              </q-item-label>
+            </div>
+            <div
+              v-if="showMintInfoData.info.description_long"
+              class="row justify-center q-pt-sm"
+            >
+              <q-item-label
+                caption
+                v-if="showMintInfoData.info.description_long"
+                class="text-weight-light text-white"
+                style="font-size: 12px"
+              >
+                {{ showMintInfoData.info.description_long }}
+              </q-item-label>
+            </div>
+            <div
+              v-if="showMintInfoData.info.version"
+              class="row justify-center q-pt-sm"
+            >
+              <q-item-label
+                caption
+                v-if="showMintInfoData.info.version"
+                class="text-weight-light text-white"
+                style="font-size: 12px"
+              >
+                Version: {{ showMintInfoData.info.version }}
+              </q-item-label>
+            </div>
+            <div
+              v-if="showMintInfoData.info.nuts"
+              class="row justify-center q-pt-sm"
+            >
+              <q-item-label
+                caption
+                v-if="showMintInfoData.info.nuts"
+                class="text-weight-light text-white"
+                style="font-size: 12px"
+              >
+                <!-- only the keys of the info.nuts object -->
+                Nuts: {{ Object.keys(showMintInfoData.info.nuts).join(", ") }}
+              </q-item-label>
+            </div>
+          </q-card-section>
+        </div>
+        <div class="row q-mt-lg">
+          <q-btn
+            class="q-mx-xs"
+            size="md"
+            flat
+            @click="copyText(showMintInfoData.url)"
+            >Copy URL</q-btn
+          >
+          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+<script>
+import { defineComponent } from "vue";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import VueQrcode from "@chenfengyuan/vue-qrcode";
+
+import { useMintsStore } from "src/stores/mints";
+export default defineComponent({
+  name: "MintInfoDialog",
+  mixins: [windowMixin],
+  components: {
+    VueQrcode,
+  },
+  data: function () {
+    return {};
+  },
+  computed: {
+    ...mapState(useMintsStore, ["showMintInfoData"]),
+    ...mapWritableState(useMintsStore, ["showMintInfoDialog"]),
+  },
+  methods: {},
+});
+</script>

src/components/MintSettings.vue

@@ -1,4 +1,5 @@
 <template>
+  <MintDetailsDialog />
   <div style="max-width: 800px; margin: 0 auto">
     <!-- ////////////////////// SETTINGS ////////////////// -->
     <div class="q-py-md q-px-xs text-left" on-left>
@@ -30,18 +31,6 @@
                 class="cursor-pointer"
               />
             </q-item-section>
-            <q-item-section
-              class="q-mx-none q-pl-none"
-              style="max-width: 1.05em"
-            >
-              <q-icon
-                name="content_copy"
-                @click="copyText(mint.url)"
-                size="1em"
-                color="grey"
-                class="q-mr-xs cursor-pointer"
-              />
-            </q-item-section>
             <q-item-section>
               <q-item-label
                 lines="1"
@@ -74,6 +63,14 @@
                 />
               </q-item-label>
             </q-item-section>
+            <q-item-section side class="q-mx-none q-pl-none">
+              <q-icon
+                name="qr_code"
+                @click="showMintInfo(mint)"
+                color="grey"
+                class="q-mr-xs cursor-pointer"
+              />
+            </q-item-section>
             <q-item-section side>
               <q-icon
                 name="edit"
@@ -143,6 +140,17 @@
         </div>
         <div class="row-12">
           <q-btn
+            v-if="addMintData.url.length == 0"
+            rounded
+            class="q-px-lg q-mt-xs"
+            color="primary"
+            @click="showCamera"
+          >
+            <q-icon size="xs" name="qr_code" class="q-pr-xs" />
+            Scan QR code
+          </q-btn>
+          <q-btn
+            v-if="addMintData.url.length > 0"
             rounded
             class="q-px-lg q-mt-xs"
             color="primary"
@@ -493,17 +501,20 @@ import { getShortUrl } from "src/js/wallet-helpers";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import { useMintsStore, MintClass } from "src/stores/mints";
 import { useWalletStore } from "src/stores/wallet";
+import { useCameraStore } from "src/stores/camera";
 import { map } from "underscore";
 import { currentDateStr } from "src/js/utils";
 import { useSettingsStore } from "src/stores/settings";
 import { useNostrStore } from "src/stores/nostr";
 import { useP2PKStore } from "src/stores/p2pk";
 import { useWorkersStore } from "src/stores/workers";
 import { notifyError, notifyWarning } from "src/js/notify";
+import MintDetailsDialog from "src/components/MintDetailsDialog.vue";
 
 export default defineComponent({
   name: "MintSettings",
   mixins: [windowMixin],
+  components: { MintDetailsDialog },
   props: {
     tickerShort: String,
   },
@@ -557,6 +568,8 @@ export default defineComponent({
       "addMintData",
       "showAddMintDialog",
       "showRemoveMintDialog",
+      "showMintInfoDialog",
+      "showMintInfoData",
     ]),
     hiddenMnemonic() {
       if (this.hideMnemonic) {
@@ -604,6 +617,7 @@ export default defineComponent({
       "invoiceCheckWorker",
       "checkTokenSpendableWorker",
     ]),
+    ...mapActions(useCameraStore, ["closeCamera", "showCamera"]),
     editMint: function (mint) {
       // copy object to avoid changing the original
       this.mintToEdit = Object.assign({}, mint);
@@ -777,9 +791,9 @@ export default defineComponent({
       console.log(mintUrls);
       this.discoveringMints = false;
     },
-    showP2PKKeyEntry: async function (pubKey) {
-      this.showKeyDetails(pubKey);
-      this.showP2PKDialog = true;
+    showMintInfo: async function (mint) {
+      this.showMintInfoData = mint;
+      this.showMintInfoDialog = true;
     },
   },
   created: function () {},

src/components/SendTokenDialog.vue

@@ -104,14 +104,6 @@
                   @click="pasteToP2PKField"
                   ><q-tooltip>Paste</q-tooltip></q-btn
                 >
-                <!-- <q-btn
-                  rounded
-                  color="primary"
-                  icon="add"
-                  v-if="isValidPubkey(sendData.p2pkPubkey)"
-                  @click="addPubkey(sendData.p2pkPubkey)"
-                  >Add</q-btn
-                > -->
                 <q-btn
                   align="center"
                   v-if="!sendData.p2pkPubkey"
@@ -585,9 +577,6 @@ export default defineComponent({
       this.showDeleteDialog = false;
       this.clearAllWorkers();
     },
-    addPubkey: function (pubkey) {
-      this.sendData.p2pkPubkey = pubkey;
-    },
     lockTokens: async function () {
       let sendAmount = this.sendData.amount;
       // if unit is USD, multiply by 100

src/stores/camera.ts

@@ -2,8 +2,6 @@ import { defineStore } from "pinia";
 
 export const useCameraStore = defineStore("camera", {
   state: () => ({
-    tickerShort: "sats",
-    tickerLong: "Satoshis",
     camera: {
       data: null,
       show: false,

src/stores/mints.ts

@@ -9,6 +9,7 @@ export type Mint = {
   keys: MintKeys[];
   keysets: MintKeyset[];
   nickname?: string;
+  info?: any;
   // initialize api: new CashuMint(url) on activation
 };
 
@@ -94,6 +95,8 @@ export const useMintsStore = defineStore("mints", {
       showAddMintDialog: false,
       addMintBlocking: false,
       showRemoveMintDialog: false,
+      showMintInfoDialog: false,
+      showMintInfoData: {} as Mint,
     };
   },
   getters: {
@@ -280,6 +283,8 @@ export const useMintsStore = defineStore("mints", {
       try {
         this.activeMintUrl = mint.url;
         console.log("### this.activeMintUrl", this.activeMintUrl);
+        mint.info = await this.fetchMintInfo(mint);
+        console.log("### activateMint: Mint info: ", mint.info);
         mint = await this.fetchMintKeys(mint);
         this.toggleActiveUnitForMint(mint);
         if (verbose) {
@@ -300,6 +305,19 @@ export const useMintsStore = defineStore("mints", {
         throw error;
       }
     },
+    fetchMintInfo: async function (mint: Mint) {
+      try {
+        const mintClass = new MintClass(mint);
+        const data = await mintClass.api.getInfo();
+        return data;
+      } catch (error: any) {
+        console.error(error);
+        try {
+          notifyApiError(error, "Could not get mint info");
+        } catch { }
+        throw error;
+      }
+    },
     fetchMintKeys: async function (mint: Mint) {
       try {
         const mintClass = new MintClass(mint);

src/stores/wallet.ts

@@ -1019,6 +1019,11 @@ export const useWalletStore = defineStore("wallet", {
       } else if (p2pkStore.isValidPubkey(req)) {
         const sendTokenStore = useSendTokensStore()
         sendTokenStore.sendData.p2pkPubkey = req
+      } else if (
+        req.startsWith("http")
+      ) {
+        const mintStore = useMintsStore();
+        mintStore.addMintData = { url: req, nickname: "" }
       }
     },
     lnurlPayFirst: async function (address: string) {