Shorten mint URL (#228)

* shorter mint url * adjust button * paste button * nice
cashubtc · Sep 1, 2024 · 8466c4c · 8466c4c
1 parent 5a91229
commit 8466c4c
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 34 deletions.
diff --git a/src/components/PayInvoiceDialog.vue b/src/components/PayInvoiceDialog.vue
@@ -55,11 +55,17 @@
               payInvoiceData.blocking || payInvoiceData.meltQuote.error != ''
             "
             @click="melt"
-            :label="payInvoiceData.meltQuote.error != '' ? 'Error' : !payInvoiceData.blocking ? 'Pay' : 'Processing...'"
+            :label="
+              payInvoiceData.meltQuote.error != ''
+                ? 'Error'
+                : !payInvoiceData.blocking
+                ? 'Pay'
+                : 'Processing...'
+            "
             :loading="globalMutexLock && !payInvoiceData.blocking"
             class="q-px-lg"
-            >
-          <template v-slot:loading >
+          >
+            <template v-slot:loading>
               <q-spinner-hourglass />
             </template>
           </q-btn>
@@ -172,22 +178,22 @@
               rounded
               color="primary"
               class="q-mr-sm"
-              :disable="payInvoiceData.input.request == ''"
+              v-if="payInvoiceData.input.request != ''"
               type="submit"
               >Enter</q-btn
             >
             <q-btn
               unelevated
-              v-if="canPasteFromClipboard"
-              icon="content_paste"
+              dense
+              v-if="canPasteFromClipboard && payInvoiceData.input.request == ''"
               @click="pasteToParseDialog"
-              ><q-tooltip>Paste</q-tooltip></q-btn
+              ><q-icon name="content_paste" class="q-pr-sm" />Paste</q-btn
             >
             <q-btn
               unelevated
               icon="qr_code_scanner"
               class="q-mx-0"
-              v-if="hasCamera"
+              v-if="hasCamera && payInvoiceData.input.request == ''"
               @click="showCamera"
             >
             </q-btn>

diff --git a/src/components/ReceiveTokenDialog.vue b/src/components/ReceiveTokenDialog.vue
@@ -11,17 +11,8 @@
           <div class="col-10">
             <span class="text-h6">Receive Ecash</span>
           </div>
-          <q-btn
-            unelevated
-            class="q-mx-none"
-            v-if="!receiveData.tokensBase64.length"
-            @click="handleLockBtn"
-          >
-            <q-icon name="lock_outline" class="q-pr-sm" />
-          </q-btn>
         </div>
         <div>
-          <!-- P2PK DIALOG -->
           <P2PKDialog v-model="showP2PKDialog" />
         </div>
         <q-input
@@ -32,7 +23,7 @@
           type="textarea"
           autofocus
           class="q-mb-lg"
-          @keyup.enter="receveIfDecodes"
+          @keyup.enter="receiveIfDecodes"
         >
           <template v-if="receiveData.tokensBase64" v-slot:append>
             <q-icon
@@ -45,10 +36,7 @@
       </div>
       <div
         class="row"
-        v-if="
-          receiveData.tokensBase64.length &&
-          decodeToken(receiveData.tokensBase64)
-        "
+        v-if="receiveData.tokensBase64.length && tokenDecodesCorrectly"
       >
         <div class="col-12">
           <TokenInformation
@@ -59,20 +47,32 @@
           />
         </div>
       </div>
-      <div class="row q-mt-lg q-pl-xs">
+      <div class="row q-mt-lg">
+        <!-- if !tokenDecodesCorrectly, display error -->
         <q-btn
-          @click="receveIfDecodes"
+          v-if="receiveData.tokensBase64.length && !tokenDecodesCorrectly"
+          disabled
+          color="yellow"
+          text-color="black"
+          rounded
+          unelevated
+          class="q-mr-sm"
+          label="Invalid token"
+        ></q-btn>
+
+        <q-btn
+          @click="receiveIfDecodes"
           color="primary"
           rounded
           class="q-mr-sm"
-          v-if="decodeToken(receiveData.tokensBase64)"
+          v-if="tokenDecodesCorrectly"
           :disabled="addMintBlocking"
           :label="
             knowThisMint
               ? addMintBlocking
                 ? 'Adding mint ...'
                 : 'Receive'
-              : 'Add mint and receive'
+              : 'Receive'
           "
         >
         </q-btn>
@@ -82,15 +82,15 @@
           rounded
           flat
           class="q-mr-sm"
-          v-if="decodeToken(receiveData.tokensBase64)"
+          v-if="tokenDecodesCorrectly"
           >Later
           <q-tooltip>Add to history to receive later</q-tooltip>
         </q-btn>
         <q-btn
           unelevated
+          dense
           v-if="canPasteFromClipboard && !receiveData.tokensBase64.length"
           @click="pasteToParseDialog"
-          class="q-ml-none q-pl-none"
         >
           <q-icon name="content_paste" class="q-pr-sm" />Paste</q-btn
         >
@@ -100,9 +100,16 @@
           v-if="hasCamera && !receiveData.tokensBase64.length"
           @click="showCamera"
         >
-          <q-icon name="qr_code_scanner" class="q-pr-sm" />
-          Scan</q-btn
+          <q-icon name="qr_code_scanner" />
+        </q-btn>
+        <q-btn
+          unelevated
+          class="q-mx-none"
+          v-if="!receiveData.tokensBase64.length"
+          @click="handleLockBtn"
         >
+          <q-icon name="lock_outline" />
+        </q-btn>
 
         <q-btn v-close-popup rounded flat color="grey" class="q-ml-auto"
           >Close</q-btn
@@ -162,6 +169,9 @@ export default defineComponent({
         navigator.clipboard.readText
       );
     },
+    tokenDecodesCorrectly: function () {
+      return this.decodeToken(this.receiveData.tokensBase64) !== undefined;
+    },
     knowThisMint: function () {
       const tokenJson = this.decodeToken(this.receiveData.tokensBase64);
       if (tokenJson == undefined) {
@@ -231,7 +241,7 @@ export default defineComponent({
         // return;
 
         // add the mint
-        await this.addMint( { url: token.getMint(tokenJson) });
+        await this.addMint({ url: token.getMint(tokenJson) });
       }
       // redeem the token
       await this.redeem(receiveStore.receiveData.tokensBase64);
@@ -257,7 +267,7 @@ export default defineComponent({
       }
       this.showLastKey();
     },
-    receveIfDecodes: function () {
+    receiveIfDecodes: function () {
       try {
         const decodedToken = this.decodeToken(this.receiveData.tokensBase64);
         if (decodedToken) {

diff --git a/src/components/TokenInformation.vue b/src/components/TokenInformation.vue
@@ -1,7 +1,12 @@
 <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 class="q-pa-md" style="border-width: 2px;">
+      <q-chip
+        v-if="showAmount"
+        outline
+        class="q-pa-md"
+        style="border-width: 2px"
+      >
         <q-icon name="toll" size="xs" class="q-mr-sm" />
         <strong>{{ displayUnit }} </strong>
       </q-chip>

diff --git a/src/js/wallet-helpers.js b/src/js/wallet-helpers.js
@@ -1,13 +1,21 @@
 function getShortUrl(url) {
   url = url.replace("https://", "");
   url = url.replace("http://", "");
-  const cut_param = 46;
+  const cut_param = 26;
   if (url.length > cut_param && url.indexOf("/") != -1) {
     url =
       url.substring(0, url.indexOf("/") + 1) +
       "..." +
       url.substring(url.length - cut_param / 2, url.length);
   }
+  // cut the url if it is too long, keep the first cut_param/2 characters and the last cut_param/2 characters
+  if (url.length > cut_param) {
+    url =
+      url.substring(0, cut_param / 2) +
+      "..." +
+      url.substring(url.length - cut_param / 2, url.length);
+  }
+
   return url;
 }