add image onto give claim, then display on feel (full round-trip, baby!)

project.task.yaml

@@ -14,16 +14,10 @@ tasks :
 - .2 list the "show more" contacts alphabetically
 
 - 32 image on give :
-    - Show a camera to take a picture
-    - Scale the image to a reasonable size
-    - Upload to a public readable place
-    - check the rate limits
-    - use CID (hash?)
-    - put the image URL in the claim
-    - Rates - images erased?
-    - image not associated with JWT ULID since that's assigned later
-    - remove previous image
     - send image type (eg. portrait, give, project)
+    - upload to a public readable place at correct hosting location
+    - remove previous image when editing
+    - on gift details, if project then show, otherwise mark "gift for you"
 
 - ask to detect location & record it in settings
 - if personal location is set, show potential local affiliations

src/libs/endorserServer.ts

@@ -67,6 +67,7 @@ export const BLANK_GENERIC_SERVER_RECORD: GenericServerRecord = {
   issuer: "",
 };
 
+// a summary record; the VC is found the fullClaim field
 export interface GiveServerRecord {
   agentDid: string;
   amount: number;
@@ -81,6 +82,7 @@ export interface GiveServerRecord {
   unit: string;
 }
 
+// a summary record; the VC is found the fullClaim field
 export interface OfferServerRecord {
   amount: number;
   amountGiven: number;
@@ -98,13 +100,14 @@ export interface OfferServerRecord {
   validThrough: string;
 }
 
+// a summary record; the VC is not currently part of this record
 export interface PlanServerRecord {
   agentDid?: string; // optional, if the issuer wants someone else to manage as well
   description: string;
   endTime?: string;
   fulfillsPlanHandleId: string;
-  issuerDid: string;
   handleId: string;
+  issuerDid: string;
   locLat?: number;
   locLon?: number;
   startTime?: string;
@@ -120,6 +123,7 @@ export interface GiveVerifiableCredential {
   description?: string;
   fulfills?: { "@type": string; identifier?: string; lastClaimId?: string }[];
   identifier?: string;
+  image?: string;
   object?: { amountOfThisGood: number; unitCode: string };
   recipient?: { identifier: string };
 }
@@ -434,6 +438,7 @@ export async function createAndSubmitGive(
   fulfillsProjectHandleId?: string,
   fulfillsOfferHandleId?: string,
   isTrade: boolean = false,
+  imageUrl?: string,
 ): Promise<CreateAndSubmitClaimResult> {
   const vcClaim: GiveVerifiableCredential = {
     "@context": "https://schema.org",
@@ -460,6 +465,9 @@ export async function createAndSubmitGive(
       identifier: fulfillsOfferHandleId,
     });
   }
+  if (imageUrl) {
+    vcClaim.image = imageUrl;
+  }
   return createAndSubmitClaim(
     vcClaim as GenericServerRecord,
     identity,

src/views/GiftedDetails.vue

@@ -302,6 +302,7 @@ export default class GiftedDetails extends Vue {
         this.projectId,
         this.offerId,
         this.isTrade,
+        this.imageUrl,
       );
 
       if (

src/views/GiftedPhoto.vue

@@ -25,8 +25,7 @@
       <fa icon="spinner" class="fa-spin fa-3x text-center block" />
     </div>
     <div v-else-if="blob">
-      <img :src="URL.createObjectURL(blob)" class="w-full" />
+      <div class="flex justify-around">
-      <div class="flex justify-around mt-2">
         <button
           @click="uploadImage"
           class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
@@ -40,6 +39,7 @@
           <span>Retry</span>
         </button>
       </div>
+      <img :src="URL.createObjectURL(blob)" class="mt-2 w-full" />
     </div>
     <div v-else>
       <!--

src/views/HomeView.vue

@@ -225,6 +225,11 @@
                 </router-link>
               </span>
             </div>
+            <div v-if="record.image" class="flex justify-center">
+              <a :href="record.image" target="_blank">
+                <img :src="record.image" class="h-24 mt-2 rounded-xl" />
+              </a>
+            </div>
           </li>
         </ul>
       </InfiniteScroll>
@@ -267,6 +272,7 @@ interface GiveRecordWithContactInfo extends GiveServerRecord {
     displayName: string;
     known: boolean;
   };
+  image: string;
   receiver: {
     displayName: string;
     known: boolean;
@@ -427,6 +433,7 @@ export default class HomeView extends Vue {
                   contactForDid(giverDid, this.allContacts),
                   this.allMyDids,
                 ),
+                image: claim.image,
                 receiver: didInfoForContact(
                   recipientDid,
                   this.activeDid,