wip

Author: gannan08

components/CredentialCompactBundle.vue

@@ -9,6 +9,8 @@
         :credential="credential">
         <credential-switch
           class="q-ma-xs col"
+          dense
+          single-row
           :expandable="true"
           :credential="credential" />
       </slot>
@@ -91,6 +93,7 @@ async function createCompactBundledCredentials({credentials}) {
     }
     credentialsList.push(credential);
   }
+  console.log(credentialsList);
   return credentialsList;
 }
 

components/CredentialDashboard.vue

@@ -16,8 +16,16 @@
           size="sm"
           color="primary"
           class="q-mr-sm"
-          icon="fas fa-barcode"
+          icon="fas fa-camera"
           @click="openBarcodeDialog" />
+        <q-btn
+          round
+          outline
+          size="sm"
+          color="primary"
+          class="q-mr-sm"
+          icon="fas fa-shopping-cart"
+          @click="openInteractionQrDialog" />
         <q-btn
           round
           outline
@@ -39,6 +47,9 @@
         @delete-credential="$event.waitUntil(deleteCredential($event))" />
     </div>
     <ShowScannerModal v-model="showBarcodeDialog" />
+    <ShowInteractionQrModal
+      v-if="showInteractionQrDialog"
+      v-model="showInteractionQrDialog" />
   </q-page>
 </template>
 
@@ -52,13 +63,15 @@ import {config} from '@bedrock/web';
 import {createEmitExtendable} from '@digitalbazaar/vue-extendable-event';
 import CredentialsList from './CredentialsList.vue';
 import SearchBox from './SearchBox.vue';
+import ShowInteractionQrModal from './ShowInteractionQrModal.vue';
 import ShowScannerModal from './ShowScannerModal.vue';
 
 export default {
   name: 'CredentialDashboard',
   components: {
     CredentialsList,
     SearchBox,
+    ShowInteractionQrModal,
     ShowScannerModal
   },
   props: {
@@ -96,6 +109,7 @@ export default {
     const search = ref('');
     const filteredProfiles = ref([]);
     const showBarcodeDialog = ref(false);
+    const showInteractionQrDialog = ref(false);
     const credentials = toRef(props, 'credentials');
 
     // Credentials filtered by search term match
@@ -132,14 +146,18 @@ export default {
       showBarcodeDialog.value = true;
     };
 
+    const openInteractionQrDialog = () => {
+      showInteractionQrDialog.value = true;
+    };
+
     // Pass delete-credential event up component chain
     const deleteCredential = async ({profileId, credentialId}) => {
       return emitExtendable('delete-credential', {profileId, credentialId});
     };
 
     // Watchers
     watch(() => filteredProfiles, () => {
-      return emit('filtered-profiles', filteredProfiles);
+      return emit('filtered-profiles', filteredProfiles.value);
     }, {immediate: true});
 
     // Get each credential title and subtitle overrides
@@ -181,6 +199,8 @@ export default {
       search,
       openBarcodeDialog,
       showBarcodeDialog,
+      openInteractionQrDialog,
+      showInteractionQrDialog,
     };
   }
 };

components/CredentialsList.vue

@@ -13,6 +13,8 @@
           <credential-switch
             class="q-ma-xs col"
             :expandable="true"
+            dense
+            single-row
             :credential="switchProps.credential" />
         </component>
       </template>

components/ShareCredentials.vue

@@ -16,7 +16,9 @@
         style="overflow: auto"
         :style="$q.screen.lt.sm ? 'max-height: calc(100% - 67px)' :
           'max-height: calc(100vh - 102px)'">
-        <div class="full-width">
+        <div
+          v-if="!accountHasOnlyOneProfile"
+          class="full-width">
           <profile-chooser
             :loading="profilesUpdating"
             :profiles="profiles"
@@ -34,7 +36,7 @@
           <template #credentials-display="displayProps">
             <credentials-list
               :compact="true"
-              :selectable="true"
+              :selectable="false"
               :selected-credentials="selectedCredentials"
               :credentials="displayProps.credentials"
               @select-credentials="selectCredentials" />
@@ -124,6 +126,10 @@ export default {
       return [];
     }, [], profilesUpdating);
 
+    const accountHasOnlyOneProfile = computed(() => {
+      return profiles.value.length === 1;
+    });
+
     const verifiablePresentationRequest = toRef(
       props, 'verifiablePresentationRequest');
 
@@ -197,6 +203,7 @@ export default {
       sharing.value);
 
     return {
+      accountHasOnlyOneProfile,
       displayableCredentials,
       selectedCredentials,
       loading,

components/ShowInteractionQrModal.vue

@@ -0,0 +1,104 @@
+<template>
+  <q-dialog v-model="show">
+    <q-card
+      flat
+      class="q-pa-md"
+      style="border-radius: 12px; width: 340px">
+      <q-card-section class="row items-center">
+        <div class="text-body1 q-my-md text-center">
+          Show QR code
+        </div>
+      </q-card-section>
+      <q-card-section style="max-height: 375px">
+        <q-img
+          fit="contain"
+          :src="qrCodeImageUrl" />
+      </q-card-section>
+      <q-card-actions align="between">
+        <q-btn
+          v-close-popup
+          flat
+          no-caps
+          rounded
+          size="16px"
+          color="dark"
+          label="Close"
+          padding="sm md" />
+        <q-btn
+          no-caps
+          rounded
+          size="16px"
+          color="primary"
+          label="Copy Code"
+          padding="sm md"
+          @click="handleCopyCodeClick" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+/*!
+ * Copyright (c) 2019-2024 Digital Bazaar, Inc. All rights reserved.
+ */
+import * as walletInteraction from './wallet-interaction.js';
+import {computed, onMounted, ref} from 'vue';
+import {useQuasar} from 'quasar';
+
+export default {
+  name: 'ShowInteractionQrModal',
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['update', 'update:modelValue'],
+  setup(props, {emit}) {
+    const $q = useQuasar();
+    const qrCodeImageUrl = ref('');
+    const qrCodeText = ref('');
+    // on mounted
+    onMounted(async () => {
+      const interactionIdUrl = await walletInteraction.create();
+      console.log('Interaction ID URL:\n', interactionIdUrl);
+      const text = walletInteraction.toQrText({url: interactionIdUrl});
+      qrCodeText.value = text;
+      console.log('Encoded URL:\n', text);
+      qrCodeImageUrl.value = await walletInteraction.toQrCode({text});
+
+      // FIXME: abort poll if dialog is closed
+      const website = await walletInteraction.poll({url: interactionIdUrl});
+      const {hostname} = new URL(website);
+
+      $q.dialog({
+        title: 'Are you sure you want to leave Veres Wallet?',
+        message: `This site would like you to complete checkout (${hostname}).`,
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        location.assign(website);
+      });
+    });
+
+    // computed
+    const show = computed({
+      get: () => props.modelValue,
+      set: value => emit('update:modelValue', value)
+    });
+
+    async function handleCopyCodeClick() {
+      await navigator.clipboard.writeText(qrCodeText.value);
+    }
+
+    return {
+      handleCopyCodeClick,
+      show,
+      qrCodeImageUrl
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

components/StoreCredentials.vue

@@ -17,11 +17,13 @@
           'max-height: calc(100vh - 102px)'">
         <div class="column">
           <h6 class="text-center q-my-sm">
-            Would you like to store these credentials?
+            Would you like to store these credential(s)?
           </h6>
         </div>
         <q-separator class="s-separator" />
-        <div class="full-width">
+        <div
+          v-if="!accountHasOnlyOneProfile"
+          class="full-width">
           <profile-chooser
             :loading="profilesUpdating"
             :profiles="profiles"
@@ -103,13 +105,17 @@ export default {
     const profiles = computedAsync(
       async () => profileManager.getProfiles({useCache: true}),
       [], profilesUpdating);
-
+    const accountHasOnlyOneProfile = computed(() => {
+      return profiles.value.length === 1;
+    });
     const storing = ref(false);
 
     const loading = computed(
       () => profilesUpdating.value || storing.value);
 
-    return {loading, profiles, profilesUpdating, storing};
+    return {
+      accountHasOnlyOneProfile, loading, profiles, profilesUpdating, storing
+    };
   },
   data() {
     return {

components/wallet-interaction.js

@@ -0,0 +1,49 @@
+/*!
+ * Copyright (c) 2025 Digital Bazaar, Inc. All rights reserved.
+ */
+
+import {httpClient} from '@digitalbazaar/http-client';
+import QRCode from 'qrcode';
+
+export async function create() {
+  const {data: {id}} = await httpClient.post('/mock-interactions');
+  return `${window.location.origin}/mock-interactions/${id}`;
+}
+
+export function poll({url, interval = 1000, timeout = 60000}) {
+  const start = Date.now();
+  return new Promise((resolve, reject) => {
+    (async function tick() {
+      if(Date.now() - start >= timeout) {
+        return reject(new Error('timeout'));
+      }
+      try {
+        const {data} = await httpClient.get(url);
+        if(data?.protocols?.website) {
+          const {website} = data.protocols;
+          return resolve(website);
+        }
+
+        setTimeout(tick, interval);
+      } catch(e) {
+        console.error(e);
+        setTimeout(tick, interval);
+      }
+    })();
+  });
+}
+
+export function toQrCode({text}) {
+  if(!text || text.length === 0) {
+    return;
+  }
+
+  return QRCode.toDataURL(text, {
+    type: 'image/png',
+    width: 800,
+  });
+}
+
+export function toQrText(obj) {
+  return window.btoa(JSON.stringify(obj));
+}

lib/index.js

@@ -2,7 +2,7 @@
  * Copyright (c) 2022-2023 Digital Bazaar, Inc. All rights reserved.
  */
 import * as brQuasar from '@bedrock/quasar';
-import {Loading, Notify, Quasar} from 'quasar';
+import {Dialog, Loading, Notify, Quasar} from 'quasar';
 import {session, sessionDataRef} from './session.js';
 import {config} from '@bedrock/web';
 import {configureRouter} from './router.js';
@@ -55,7 +55,8 @@ export async function initialize({app, router, features, quasarOptions} = {}) {
     plugins: {
       // known plugins in use
       Loading,
-      Notify
+      Notify,
+      Dialog,
     },
     config: {}
   };

package.json

@@ -22,7 +22,7 @@
     "@digitalbazaar/web-app-manifest-utils": "^2.0.0",
     "html5-qrcode": "^2.3.8",
     "mustache": "^4.2.0",
-    "qrcode": "^1.5.3",
+    "qrcode": "^1.5.4",
     "randomcolor": "^0.6.2",
     "web-credential-handler": "^3.0.0"
   },