From c5234ea605c5223e6503b3e0f877737dfbb3b761 Mon Sep 17 00:00:00 2001 From: mainnet-pat Date: Mon, 12 Aug 2024 09:00:16 +0000 Subject: [PATCH] Add qr-scan buttons to fungible, nft groups, single nfts and nft children 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 | 6 +-- src/components/qr/qrCodeScanDialog.vue | 10 +++-- src/components/qr/qrScannerUi.vue | 7 +++ src/components/tokenItems/nftChild.vue | 34 +++++++++++++-- src/components/tokenItems/tokenItemFT.vue | 25 ++++++++++- src/components/tokenItems/tokenItemNFT.vue | 51 ++++++++++++++++++---- src/components/walletConnect.vue | 7 ++- 7 files changed, 117 insertions(+), 23 deletions(-) diff --git a/src/components/bchWallet.vue b/src/components/bchWallet.vue index 5cf9a18..413eaf1 100644 --- a/src/components/bchWallet.vue +++ b/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; } diff --git a/src/components/qr/qrCodeScanDialog.vue b/src/components/qr/qrCodeScanDialog.vue index d101b23..0b533d5 100644 --- a/src/components/qr/qrCodeScanDialog.vue +++ b/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" />
- +
diff --git a/src/components/qr/qrScannerUi.vue b/src/components/qr/qrScannerUi.vue index 226b187..f6407c1 100644 --- a/src/components/qr/qrScannerUi.vue +++ b/src/components/qr/qrScannerUi.vue @@ -1,3 +1,9 @@ + + diff --git a/src/components/tokenItems/nftChild.vue b/src/components/tokenItems/nftChild.vue index f2d27de..507364f 100644 --- a/src/components/tokenItems/nftChild.vue +++ b/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; + } \ No newline at end of file diff --git a/src/components/tokenItems/tokenItemFT.vue b/src/components/tokenItems/tokenItemFT.vue index d277e36..e72fce1 100644 --- a/src/components/tokenItems/tokenItemFT.vue +++ b/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; + } \ No newline at end of file diff --git a/src/components/tokenItems/tokenItemNFT.vue b/src/components/tokenItems/tokenItemNFT.vue index c755904..654be9b 100644 --- a/src/components/tokenItems/tokenItemNFT.vue +++ b/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; + } \ No newline at end of file diff --git a/src/components/walletConnect.vue b/src/components/walletConnect.vue index a3dfee7..1e0445c 100644 --- a/src/components/walletConnect.vue +++ b/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; }