Add image fallback for NFC based VCs.

CHANGELOG.md

@@ -2,8 +2,12 @@
 
 ## 29.5.1 - 2024-10-xx
 
+### Added
+- Add help text for platforms that don't support NFC.
+
 ### Fixed
 - Handle arrays of objects in developer details view.
+- Add credential image fallback for NFC renderable VCs.
 
 ## 29.5.0 - 2024-10-18
 

components/CredentialCardBundle.vue

@@ -22,7 +22,7 @@
           <div class="row justify-between">
             <dynamic-image
               class="q-mr-auto"
-              :src="credentialOverrides.image"
+              :src="credentialOverrides.image || credentialImage"
               size="md" />
             <!-- eslint-disable vue/no-v-html
               this is ok to disable only because `contactlessSvg` has been
@@ -96,7 +96,9 @@ import {
   ageCredentialHelpers, getCredentialStore, helpers
 } from '@bedrock/web-wallet';
 import {computed, onBeforeMount, reactive, ref} from 'vue';
-import {CredentialSwitch, DynamicImage} from '@bedrock/vue-vc';
+import {
+  CredentialSwitch, DynamicImage, useCredentialCommon
+} from '@bedrock/vue-vc';
 import {formatString, getValueFromPointer} from '../lib/helpers.js';
 import {config} from '@bedrock/web';
 import {svg as contactlessSvg} from './contactless.js';
@@ -364,6 +366,10 @@ export default {
       return newCredentialSubject;
     }
 
+    const {credentialImage} = useCredentialCommon({
+      credential: props.credentialRecord.credential
+    });
+
     return {
       card,
       hover,
@@ -380,6 +386,7 @@ export default {
       toggleDetailsWindow,
       credentialHighlights,
       credentialHolderName,
+      credentialImage,
       contactlessSvg,
       hasNFCPayload
     };

components/CredentialDetails.vue

@@ -34,7 +34,7 @@
                   <div class="row justify-between">
                     <dynamic-image
                       class="q-mr-auto"
-                      :src="credentialOverrides.image"
+                      :src="credentialOverrides.image || credentialImage"
                       size="md" />
                     <!-- eslint-disable vue/no-v-html
                       this is ok to disable only because `contactlessSvg` has
@@ -128,7 +128,9 @@
  * Copyright (c) 2015-2024 Digital Bazaar, Inc. All rights reserved.
  */
 import {computed, ref} from 'vue';
-import {CredentialSwitch, DynamicImage} from '@bedrock/vue-vc';
+import {
+  CredentialSwitch, DynamicImage, useCredentialCommon
+} from '@bedrock/vue-vc';
 import {svg as contactlessSvg} from './contactless.js';
 import CredentialDetailsViews from './CredentialDetailsViews.vue';
 import {helpers} from '@bedrock/web-wallet';
@@ -208,9 +210,14 @@ export default {
       nfcShareComponent.value.cancelWrite();
     }
 
+    const {credentialImage} = useCredentialCommon({
+      credential: props.credential
+    });
+
     return {
       cancelWrite,
       contactlessSvg,
+      credentialImage,
       showDelete,
       description,
       hasNFCPayload,

components/NfcShare.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="row items-center justify-center">
     <q-btn
       v-show="!isSharing"
       no-caps
@@ -11,8 +11,8 @@
       <template #default>
         <div class="row justify-between items-center">
           <!-- eslint-disable vue/no-v-html
-            this is ok to disable only because `contactlessSvg` has been
-            specifically sanitized -->
+          this is ok to disable only because `contactlessSvg` has been
+          specifically sanitized -->
           <div
             style="height: 24px; margin-right: 8px;"
             v-html="contactlessSvg" />
@@ -23,6 +23,12 @@
         </div>
       </template>
     </q-btn>
+    <div
+      v-if="!supportsNfc"
+      class="text-caption text-weight-thin text-center disabled q-pt-xs"
+      style="font-size: 10px;">
+      Tap to Share is only available on Android devices.
+    </div>
   </div>
 </template>