add qr scan to nfts

Author: mr-zwets

src/components/tokenItems/nftChild.vue

@@ -7,6 +7,7 @@
   // @ts-ignore
   import { createIcon } from '@download/blockies';
   import alertDialog from 'src/components/alertDialog.vue'
+  import QrCodeDialog from '../qr/qrCodeScanDialog.vue';
   import type { BcmrTokenMetadata, TokenBurnRequestParams, TokenSendRequestParams } from "src/interfaces/interfaces"
   import { useStore } from 'src/stores/store'
   import { useSettingsStore } from 'src/stores/settingsStore'
@@ -34,6 +35,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;
@@ -75,6 +77,16 @@
     iconDiv?.appendChild(icon);
   })
 
+  const qrDecode = (content: string) => {
+    destinationAddr.value = content;
+  }
+  const qrFilter = (content: string) => {
+    const decoded = decodeCashAddress(content);
+    if (typeof decoded === "string" || decoded.prefix !== store.wallet?.networkPrefix) {
+      return "Not a cashaddress on current network";
+    }
+    return true;
+  }
   async function sendNft(){
     try{
       if(!store.wallet) return;
@@ -310,10 +322,15 @@
         </div>
         <div v-if="displaySendNft" style="margin-top: 10px;">
           Send this NFT to
-          <p class="grouped">
-            <input v-model="destinationAddr" name="tokenAddress" placeholder="token address">
+          <div class="inputGroup">
+            <div class="addressInputNftSend">
+              <input v-model="destinationAddr" name="tokenAddress" placeholder="token address">
+              <button v-if="settingsStore.qrScan" @click="() => showQrCodeDialog = true" style="padding: 12px">
+                <img src="images/qrscan.svg" />
+              </button>
+            </div>
             <input @click="sendNft()" type="button" class="primaryButton" value="Send NFT">
-          </p>
+          </div>
         </div>
         <div v-if="displayMintNfts" style="margin-top: 10px;">
           Mint a number of (unique) NFTs to a specific address
@@ -350,4 +367,7 @@
       <dialogNftIcon :srcNftImage="nftMetadata?.uris?.image ? nftMetadata.uris.image : nftMetadata.uris.icon as string" :nftName="nftMetadata.name" @close-dialog="() => showNftImage = false"/>
     </div>
   </div>
+  <div v-if="showQrCodeDialog">
+    <QrCodeDialog @hide="() => showQrCodeDialog = false" @decode="qrDecode" :filter="qrFilter"/>
+  </div>
 </template>

src/components/tokenItems/tokenItemNFT.vue

@@ -7,6 +7,7 @@
   // @ts-ignore
   import { createIcon } from '@download/blockies';
   import alertDialog from 'src/components/alertDialog.vue'
+  import QrCodeDialog from '../qr/qrCodeScanDialog.vue';
   import type { TokenDataNFT, BcmrTokenMetadata, TokenSendRequestParams, TokenMintRequestParams, TokenBurnRequestParams } from "src/interfaces/interfaces"
   import { querySupplyNFTs, queryActiveMinting } from "src/queryChainGraph"
   import { copyToClipboard } from 'src/utils/utils';
@@ -43,6 +44,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
 
@@ -106,6 +108,16 @@
     displayChildNfts.value = !displayChildNfts.value;
   }
   
+  const qrDecode = (content: string) => {
+    destinationAddr.value = content;
+  }
+  const qrFilter = (content: string) => {
+    const decoded = decodeCashAddress(content);
+    if (typeof decoded === "string" || decoded.prefix !== store.wallet?.networkPrefix) {
+      return "Not a cashaddress on current network";
+    }
+    return true;
+  }
   // NFT Group specific functionality
   async function sendAllNfts(){
     try{
@@ -497,17 +509,27 @@
 
         <div v-if="displaySendNft" style="margin-top: 10px;">
           Send this NFT to
-          <p class="grouped">
-            <input v-model="destinationAddr" name="tokenAddress" placeholder="token address">
+          <div class="inputGroup">
+            <div class="addressInputNftSend">
+              <input v-model="destinationAddr" name="tokenAddress" placeholder="token address">
+              <button v-if="settingsStore.qrScan" @click="() => showQrCodeDialog = true" style="padding: 12px">
+                <img src="images/qrscan.svg" />
+              </button>
+            </div>
             <input @click="sendNft()" type="button" class="primaryButton" 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" name="tokenAddress" placeholder="token address">
+          <div class="inputGroup">
+            <div class="addressInputNftSend">
+              <input v-model="destinationAddr" name="tokenAddress" placeholder="token address">
+              <button v-if="settingsStore.qrScan" @click="() => showQrCodeDialog = true" style="padding: 12px">
+                <img src="images/qrscan.svg" />
+              </button>
+            </div>
             <input @click="sendAllNfts()" type="button" class="primaryButton" value="Transfer NFTs">
-          </p>
+          </div>
         </div>
         <div v-if="displayMintNfts" style="margin-top: 10px;">
           Mint a number of (unique) NFTs to a specific address
@@ -559,4 +581,7 @@
       </div>
     </div>
   </div>
+  <div v-if="showQrCodeDialog">
+    <QrCodeDialog @hide="() => showQrCodeDialog = false" @decode="qrDecode" :filter="qrFilter"/>
+  </div>
 </template>

src/css/app.css

@@ -155,6 +155,12 @@ input[type='number'] {
   width: 50%;
   display: flex;
 }
+.addressInputNftSend {
+  margin-right: 14px;
+  display: flex;
+  width: 100%;
+  gap: 0.5rem;
+}
 .actionBar {
   margin-top: 15px;
   margin-bottom: 5px;
@@ -246,6 +252,9 @@ select, summary {
     width: 100%;
     gap: 0.5rem;
   }
+  .addressInputNftSend {
+    margin-bottom: 10px;
+  }
   .sendTokenAmount {
     margin-top: 4px;
     width: 100%;