"Add loading spinners"

src/components/InvoiceDetailDialog.vue

@@ -49,7 +49,7 @@
                 ? 'Creating invoice...'
                 : 'Create Invoice'
             "
-            ><q-spinner-tail
+            ><q-spinner-hourglass
               v-if="createInvoiceButtonBlocked"
               color="white"
               size="1em"

src/components/MintSettings.vue

@@ -140,14 +140,14 @@
             class="q-px-lg q-mt-xs"
             color="primary"
             :disabled="addMintData.url.length == 0"
-            :loading="addingMint"
+            :loading="addMintBlocking"
             @click="showAddMintDialog = true"
           >
             <q-icon size="xs" name="add" class="q-pr-xs" />
             Add mint
             <template v-slot:loading>
-              <q-spinner-hourglass class="on-left" />
-              Loading...
+              <q-spinner-hourglass />
+              Adding mint...
             </template>
           </q-btn>
         </div>
@@ -386,9 +386,13 @@
               v-close-popup
               color="primary"
               icon="check"
-              :loading="addingMint"
+              :loading="addMintBlocking"
               @click="addMintInternal(addMintData, (verbose = true))"
               >Add mint
+              <template v-slot:loading>
+                <q-spinner-hourglass />
+                Adding mint...
+              </template>
             </q-btn>
           </div>
           <div class="col">
@@ -520,7 +524,12 @@ export default defineComponent({
       "checkSentTokens",
     ]),
     ...mapState(useP2PKStore, ["p2pkKeys"]),
-    ...mapState(useMintsStore, ["activeMintUrl", "mints", "activeProofs"]),
+    ...mapState(useMintsStore, [
+      "activeMintUrl",
+      "mints",
+      "activeProofs",
+      "addMintBlocking",
+    ]),
     ...mapState(useNostrStore, ["pubkey", "mintRecommendations"]),
     ...mapState(useWalletStore, ["mnemonic"]),
     ...mapWritableState(useMintsStore, [

src/components/PayInvoiceDialog.vue

@@ -54,7 +54,7 @@
             "
             @click="melt"
             :label="!payInvoiceData.blocking ? 'Pay' : 'Processing...'"
-            ><q-spinner-tail
+            ><q-spinner-hourglass
               v-if="payInvoiceData.blocking"
               color="white"
               size="1em"

src/components/ReceiveTokenDialog.vue

@@ -44,9 +44,21 @@
           color="primary"
           rounded
           class="q-mr-sm"
-          :disabled="!decodeToken(receiveData.tokensBase64)"
-          :label="knowThisMint ? 'Receive' : 'Add mint'"
-        />
+          :disabled="!decodeToken(receiveData.tokensBase64) || addMintBlocking"
+          :label="
+            knowThisMint
+              ? addMintBlocking
+                ? 'Adding mint ...'
+                : 'Receive'
+              : 'Add mint'
+          "
+        >
+          <!-- <q-spinner-hourglass
+            v-if="addMintBlocking"
+            size="1em"
+            class="q-ml-md"
+        /> -->
+        </q-btn>
         <q-btn
           @click="addPendingTokenToHistory(receiveData.tokensBase64)"
           color="primary"
@@ -113,7 +125,11 @@ export default defineComponent({
       "receiveData",
     ]),
     ...mapState(useUiStore, ["tickerShort"]),
-    ...mapState(useMintsStore, ["activeProofs", "activeUnit"]),
+    ...mapState(useMintsStore, [
+      "activeProofs",
+      "activeUnit",
+      "addMintBlocking",
+    ]),
     ...mapWritableState(useMintsStore, ["addMintData", "showAddMintDialog"]),
     ...mapState(useCameraStore, ["hasCamera"]),
     canPasteFromClipboard: function () {

src/components/SettingsView.vue

@@ -551,154 +551,6 @@
         </q-expansion-item>
       </q-list>
     </div>
-
-    <q-dialog
-      v-model="showEditMintDialog"
-      backdrop-filter="blur(2px) brightness(60%)"
-    >
-      <q-card class="q-pa-lg" style="max-width: 500px; width: 100%">
-        <h6 class="q-my-md">Edit mint</h6>
-        <q-input
-          outlined
-          v-model="editMintData.url"
-          label="Mint URL"
-          type="textarea"
-          autogrow
-          class="q-mb-xs"
-        ></q-input>
-        <q-input
-          outlined
-          v-model="editMintData.nickname"
-          label="Nickname"
-          type="textarea"
-          autogrow
-          class="q-mb-xs"
-        ></q-input>
-        <div class="row q-mt-lg">
-          <q-btn
-            class="float-left"
-            v-close-popup
-            color="primary"
-            @click="updateMint(mintToEdit, editMintData)"
-            >Update</q-btn
-          >
-          <q-btn
-            icon="delete"
-            flat
-            class="float-left item-left text-left"
-            @click="showRemoveMintDialogWrapper(mintToEdit.url)"
-          />
-          <q-btn v-close-popup flat class="q-ml-auto" color="grey"
-            >Cancel</q-btn
-          >
-        </div>
-      </q-card>
-    </q-dialog>
-
-    <q-dialog
-      v-model="showAddMintDialog"
-      @keydown.enter.prevent="addMintInternal(addMintData, (verbose = true))"
-      backdrop-filter="blur(2px) brightness(60%)"
-    >
-      <q-card class="q-pa-lg">
-        <h6 class="q-my-md">Do you trust this mint?</h6>
-        <p>
-          A Cashu mint controls the funds you send to it. Make sure that you
-          trust the operator of this mint.
-        </p>
-        <q-input
-          outlined
-          readonly
-          v-model="addMintData.url"
-          label="Mint URL"
-          type="textarea"
-          autogrow
-          class="q-mb-xs"
-        ></q-input>
-        <div class="row q-mt-lg">
-          <div class="col">
-            <q-btn
-              class="float-left"
-              v-close-popup
-              color="primary"
-              icon="check"
-              :loading="addingMint"
-              @click="addMintInternal(addMintData, (verbose = true))"
-              >Add mint
-            </q-btn>
-          </div>
-          <div class="col">
-            <q-btn v-close-popup flat class="float-right" color="grey"
-              >Cancel</q-btn
-            >
-          </div>
-        </div>
-      </q-card>
-    </q-dialog>
-    <q-dialog
-      v-model="showRemoveMintDialog"
-      backdrop-filter="blur(2px) brightness(60%)"
-    >
-      <q-card class="q-pa-lg">
-        <h6 class="q-my-md">Are you sure you want to delete this mint?</h6>
-        <div v-if="mintToRemove.nickname">
-          <span class="text-weight-bold"> Nickname: </span>
-          <span class="text-weight-light"> {{ mintToRemove.nickname }}</span>
-        </div>
-        <div class="row q-my-md">
-          <div class="col">
-            <span class="text-weight-bold">Balances:</span>
-            <q-badge
-              v-for="unit in mintClass(mintToRemove).units"
-              :key="unit"
-              color="primary"
-              :label="
-                formatCurrency(mintClass(mintToRemove).unitBalance(unit), unit)
-              "
-              class="q-mx-xs"
-            />
-          </div>
-        </div>
-        <q-input
-          outlined
-          readonly
-          v-model="mintToRemove.url"
-          label="Mint URL"
-          type="textarea"
-          autogrow
-          class="q-mb-xs"
-        ></q-input>
-        <div class="row q-my-md">
-          <div class="col">
-            <span class="text-caption"
-              >Note: Because this wallet is paranoid, your ecash from this mint
-              will not be actually deleted but will remain stored on your
-              device. You will see it reappear if you re-add this mint later
-              again.</span
-            >
-          </div>
-        </div>
-        <div class="row q-mt-lg">
-          <div class="col">
-            <q-btn
-              v-close-popup
-              class="float-left"
-              color="primary"
-              @click="
-                showEditMintDialog = false;
-                removeMint(mintToRemove.url, (verbose = true));
-              "
-              >Remove mint</q-btn
-            >
-          </div>
-          <div class="col">
-            <q-btn v-close-popup flat color="grey" class="float-right"
-              >Cancel</q-btn
-            >
-          </div>
-        </div>
-      </q-card>
-    </q-dialog>
   </div>
 
   <!-- P2PK DIALOG -->

src/components/TokenInformation.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="row text-left q-py-none q-my-none">
     <div class="col-12 q-px-none">
-      <q-chip v-if="showAmount" outline icon="toll" class="q-mr-md q-pa-md">
+      <q-chip v-if="showAmount" outline class="q-mr-md q-pa-md">
+        <q-icon name="toll" size="xs" class="q-mr-sm" />
         <strong>{{ displayUnit }} </strong>
       </q-chip>
-      <q-chip outline icon="account_balance" class="q-pa-md">
+      <q-chip outline class="q-pa-md">
+        <q-icon name="account_balance" size="xs" class="q-mr-xs" />
         {{ tokenMintUrl }}
+        <q-spinner-hourglass v-if="addMintBlocking" size="sm" class="q-ml-sm" />
         <q-icon
-          v-if="showMintCheck && mintKnownToUs(proofsToShow)"
+          v-if="
+            showMintCheck && mintKnownToUs(proofsToShow) && !addMintBlocking
+          "
           name="check"
           size="sm"
           color="green"
@@ -62,6 +67,7 @@ export default defineComponent({
       "mints",
       "proofs",
       "activeUnit",
+      "addMintBlocking",
     ]),
     proofsToShow: function () {
       return token.getProofs(token.decode(this.encodedToken));

src/stores/mints.ts

@@ -92,6 +92,7 @@ export const useMintsStore = defineStore("mints", {
       blindSignatures: useLocalStorage("cashu.blindSignatures", [] as BlindSignatureAudit[]),
       // balances: useLocalStorage("cashu.balances", {} as Balances),
       showAddMintDialog: false,
+      addMintBlocking: false,
       showRemoveMintDialog: false,
     };
   },
@@ -195,6 +196,7 @@ export const useMintsStore = defineStore("mints", {
     },
     addMint: async function (addMintData: { url: string, nickname: string }, verbose = false) {
       let url = addMintData.url;
+      this.addMintBlocking = true;
       try {
         // sanitize url
         const sanitizeUrl = (url: string): string => {
@@ -232,6 +234,7 @@ export const useMintsStore = defineStore("mints", {
         throw error;
       } finally {
         this.showAddMintDialog = false;
+        this.addMintBlocking = false;
       }
     },
     activateMintUrl: async function (url: string, verbose = false, force = false) {