Add qr-scan buttons to fungible, nft groups, single nfts and nft chil…

…dren components

Add a filter hint to the qr-scan dialog which will appear if decoded text does not match the required format

src/components/bchWallet.vue

@@ -145,11 +145,11 @@
   }
   const qrFilter = (content: string) => {
     const decoded = decodeCashAddress(content);
-    if (typeof decoded === "string") {
-      return false;
+    if (typeof decoded === "string" || decoded.prefix !== store.wallet?.networkPrefix) {
+      return "Not a cashaddress on current network";
     }
 
-    return decoded.prefix === store.wallet?.networkPrefix;
+    return true;
   }
 </script>
 

src/components/qr/qrCodeScanDialog.vue

@@ -8,11 +8,12 @@
   const isMobile = computed(() => width.value < 480)
 
   const props = defineProps<{
-    filter?: (decoded: string) => boolean
+    filter?: (decoded: string) => string | true
   }>();
 
   const error = ref("");
   const frontCamera = ref(false);
+  const filterHint = ref("");
 
   const showDialog = ref(true);
 
@@ -56,9 +57,12 @@
       emit('decode', content[0].rawValue);
       showDialog.value = false;
     } else {
-      if (props.filter(content[0].rawValue)) {
+      const filterResult = props.filter(content[0].rawValue);
+      if (filterResult === true) {
         emit('decode', content[0].rawValue);
         showDialog.value = false;
+      } else {
+        filterHint.value = filterResult;
       }
     }
   }
@@ -92,7 +96,7 @@
           @error="onScannerError"
         />
         <div style="display: flex; height: 100%;">
-          <ScannerUI />
+          <ScannerUI :filter-hint="filterHint" />
         </div>
     </q-card>
   </q-dialog>

src/components/qr/qrScannerUi.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+  defineProps<{
+    filterHint: string;
+  }>();
+</script>
+
 <template>
   <div class="scanner-box" ref="box">
     <div class="scan-layout-design">
@@ -15,6 +21,7 @@
       </div>
     </div>
     <span class="scanner-text text-center full-width">Scan QR Code</span>
+		<span class="scanner-text text-center full-width" style="top: 315px; color: tomato;">{{ filterHint }}</span>
   </div>
 </template>
 

src/components/tokenItems/nftChild.vue

@@ -11,6 +11,8 @@
   import { useStore } from 'src/stores/store'
   import { useSettingsStore } from 'src/stores/settingsStore'
   import { useQuasar } from 'quasar'
+  import QrCodeScanDialog from '../qr/qrCodeScanDialog.vue';
+
   const $q = useQuasar()
   const store = useStore()
   const settingsStore = useSettingsStore()
@@ -32,6 +34,7 @@
   const mintCommitment = ref("");
   const mintAmountNfts = ref(undefined as string | undefined);
   const startingNumberNFTs = ref(undefined as string | undefined);
+  const showQrCodeDialog = ref(false);
 
   const nftMetadata = computed(() => {
     const commitment = nftData.value?.token?.commitment;
@@ -235,6 +238,18 @@
       color: "red"
     }) 
   }
+
+  const qrDecode = (content: string) => {
+    destinationAddr.value = content;
+  }
+  const qrFilter = (content: string) => {
+    const decoded = decodeCashAddress(content);
+    if (typeof decoded === "string" || decoded.prefix !== store.wallet?.networkPrefix || !['p2pkhWithTokens', 'p2shWithTokens'].includes(decoded.type)) {
+      return "Not a tokenaddress on current network";
+    }
+
+    return true;
+  }
 </script>
 
 <template id="nft-template">
@@ -296,10 +311,15 @@
         </div>
         <div v-if="displaySendNft" id="nftSend" style="margin-top: 10px;">
           Send this NFT to
-          <p class="grouped">
-            <input v-model="destinationAddr" id="tokenAddress" placeholder="token address">
+          <div class="grouped">
+            <div style="display: flex;">
+              <input v-model="destinationAddr" id="tokenAddress" placeholder="token address" style="margin-right: 0px;">
+              <button @click="() => showQrCodeDialog = true" style="padding: 12px;">
+                <img src="images/qrscan.svg" />
+              </button>
+            </div>
             <input @click="sendNft()" type="button" class="primaryButton" id="sendNFT" value="Send NFT">
-          </p>
+          </div>
         </div>
         <div id="nftMint" v-if="displayMintNfts" style="margin-top: 10px;">
           Mint a number of (unique) NFTs to a specific address
@@ -313,7 +333,10 @@
             <input v-if="mintUniqueNfts == 'no'" v-model="mintCommitment" placeholder="commitment">
           </p>
           <span class="grouped">
-            <input v-model="destinationAddr" placeholder="destinationAddress"> 
+            <input v-model="destinationAddr" placeholder="destinationAddress" style="margin-right: 0px;">
+            <button @click="() => showQrCodeDialog = true" style="padding: 12px;">
+              <img src="images/qrscan.svg" />
+            </button>
             <input @click="mintNfts()" type="button" id="mintNFTs" value="Mint NFTs">
           </span>
         </div>
@@ -339,4 +362,7 @@
       <dialogNftIcon :srcNftImage="nftMetadata?.uris?.image ? nftMetadata?.uris?.image : nftMetadata?.uris?.icon" :nftName="nftMetadata.name" @close-dialog="() => showNftImage = false"/>
     </div>
   </div>
+  <div v-if="showQrCodeDialog">
+    <QrCodeScanDialog @hide="() => showQrCodeDialog = false" @decode="qrDecode" :filter="qrFilter"/>
+  </div>
 </template>

src/components/tokenItems/tokenItemFT.vue

@@ -10,6 +10,8 @@
   import { useStore } from 'src/stores/store'
   import { useSettingsStore } from 'src/stores/settingsStore'
   import { useQuasar } from 'quasar'
+  import QrCodeScanDialog from '../qr/qrCodeScanDialog.vue';
+
   const $q = useQuasar()
   const store = useStore()
   const settingsStore = useSettingsStore()
@@ -33,6 +35,7 @@
   const tokenMetaData = ref(undefined as (bcmrTokenMetadata | undefined));
   const totalSupplyFT = ref(undefined as bigint | undefined);
   const reservedSupply = ref(undefined as bigint | undefined);
+  const showQrCodeDialog = ref(false);
 
   tokenMetaData.value = store.bcmrRegistries?.[tokenData.value.tokenId];
 
@@ -284,6 +287,18 @@
       color: "red"
     })
   }
+
+  const qrDecode = (content: string) => {
+    destinationAddr.value = content;
+  }
+  const qrFilter = (content: string) => {
+    const decoded = decodeCashAddress(content);
+    if (typeof decoded === "string" || decoded.prefix !== store.wallet?.networkPrefix || !['p2pkhWithTokens', 'p2shWithTokens'].includes(decoded.type)) {
+      return "Not a tokenaddress on current network";
+    }
+
+    return true;
+  }
 </script>
 
 <template id="token-template">
@@ -376,7 +391,12 @@
           Send these tokens to
           <div class="inputGroup">
             <div class="addressInputFtSend">
-              <input v-model="destinationAddr" id="tokenAddress" placeholder="token address">
+              <div style="display: flex;">
+                <input v-model="destinationAddr" id="tokenAddress" placeholder="token address">
+                <button @click="() => showQrCodeDialog = true" style="padding: 12px">
+                  <img src="images/qrscan.svg" />
+                </button>
+              </div>
             </div>
             <div class="sendTokenAmount">
               <span style="width: 100%; position: relative; ">
@@ -421,4 +441,7 @@
       </div>
     </fieldset>
   </div>
+  <div v-if="showQrCodeDialog">
+    <QrCodeScanDialog @hide="() => showQrCodeDialog = false" @decode="qrDecode" :filter="qrFilter"/>
+  </div>
 </template>

src/components/tokenItems/tokenItemNFT.vue

@@ -12,6 +12,8 @@
   import { useStore } from 'src/stores/store'
   import { useSettingsStore } from 'src/stores/settingsStore'
   import { useQuasar } from 'quasar'
+  import QrCodeScanDialog from '../qr/qrCodeScanDialog.vue';
+
   const $q = useQuasar()
   const store = useStore()
   const settingsStore = useSettingsStore()
@@ -40,6 +42,7 @@
   const startingNumberNFTs = ref(undefined as string | undefined);
   const totalNumberNFTs = ref(undefined as number | undefined);
   const hasMintingNFT = ref(undefined as boolean | undefined);
+  const showQrCodeDialog = ref(false);
 
   let fetchedMetadataChildren = false
 
@@ -385,6 +388,18 @@
       color: "red"
     }) 
   }
+
+  const qrDecode = (content: string) => {
+    destinationAddr.value = content;
+  }
+  const qrFilter = (content: string) => {
+    const decoded = decodeCashAddress(content);
+    if (typeof decoded === "string" || decoded.prefix !== store.wallet?.networkPrefix || !['p2pkhWithTokens', 'p2shWithTokens'].includes(decoded.type)) {
+      return "Not a tokenaddress on current network";
+    }
+
+    return true;
+  }
 </script>
 
 <template id="token-template">
@@ -481,17 +496,27 @@
 
         <div v-if="displaySendNft" style="margin-top: 10px;">
           Send this NFT to
-          <p class="grouped">
-            <input v-model="destinationAddr" id="tokenAddress" placeholder="token address">
+          <div class="grouped">
+            <div style="display: flex;">
+              <input v-model="destinationAddr" id="tokenAddress" placeholder="token address" style="margin-right: 0px;">
+              <button @click="() => showQrCodeDialog = true" style="padding: 12px;">
+                <img src="images/qrscan.svg" />
+              </button>
+            </div>
             <input @click="sendNft()" type="button" class="primaryButton" id="sendNFT" value="Send NFT">
-          </p>
+          </div>
         </div>
         <div v-if="displaySendAllNfts" style="margin-top: 10px;">
           Send all {{ tokenData.nfts?.length }} NFTs of this category to
-          <p class="grouped">
-            <input v-model="destinationAddr" id="tokenAddress" placeholder="token address">
+          <div class="grouped">
+            <div style="display: flex;">
+              <input v-model="destinationAddr" id="tokenAddress" placeholder="token address" style="margin-right: 0px;">
+              <button @click="() => showQrCodeDialog = true" style="padding: 12px;">
+                <img src="images/qrscan.svg" />
+              </button>
+            </div>
             <input @click="sendAllNfts()" type="button" class="primaryButton" id="sendNFT" value="Transfer NFTs">
-          </p>
+          </div>
         </div>
         <div id="nftMint" v-if="displayMintNfts" style="margin-top: 10px;">
           Mint a number of (unique) NFTs to a specific address
@@ -505,7 +530,10 @@
             <input v-if="mintUniqueNfts == 'no'" v-model="mintCommitment" placeholder="commitment">
           </p>
           <span class="grouped">
-            <input v-model="destinationAddr" placeholder="destinationAddress"> 
+            <input v-model="destinationAddr" placeholder="destinationAddress" style="margin-right: 0px;">
+            <button @click="() => showQrCodeDialog = true" style="padding: 12px;">
+              <img src="images/qrscan.svg" />
+            </button>
             <input @click="mintNfts()" type="button" id="mintNFTs" value="Mint NFTs" class="primaryButton">
           </span>
         </div>
@@ -519,7 +547,10 @@
           Transfer the authority to change the token's metadata to another wallet <br>
           You can either transfer the Auth to a dedicated wallet or to the <a href="https://cashtokens.studio/" target="_blank">CashTokens Studio</a>.<br>
           <span class="grouped" style="margin-top: 10px;">
-            <input id="destinationAddr" placeholder="destinationAddress"> 
+            <input id="destinationAddr" placeholder="Destination Address" style="margin-right: 0px;">
+            <button @click="() => showQrCodeDialog = true" style="padding: 12px;">
+              <img src="images/qrscan.svg" />
+            </button>
             <input @click="transferAuth()" type="button" value="Transfer Auth" class="primaryButton">
           </span>
         </div>
@@ -536,4 +567,8 @@
       </div>
     </div>
   </div>
+
+  <div v-if="showQrCodeDialog">
+    <QrCodeScanDialog @hide="() => showQrCodeDialog = false" @decode="qrDecode" :filter="qrFilter"/>
+  </div>
 </template>

src/components/walletConnect.vue

@@ -102,12 +102,11 @@
   }
   const qrFilter = (content: string) => {
     const matchV2 = String(content).match(/^wc:([0-9a-fA-F]{64})@(\d+)\?([a-zA-Z0-9\-._~%!$&'()*+,;=:@/?=&]*)$/i);
-    console.log(matchV2);
-    if (matchV2) {
-      return true;
+    if (!matchV2) {
+      return "Not a valid WalletConnect2 URI";
     }
 
-    return false;
+    return true;
 }
 </script>