add 'offer' on contact screen

src/components/OfferDialog.vue

@@ -81,8 +81,7 @@ import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 export default class OfferDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  @Prop message = "";
-  @Prop projectId = "";
+  @Prop projectId? = "";
 
   activeDid = "";
   apiServer = "";
@@ -91,16 +90,20 @@ export default class OfferDialog extends Vue {
   amountUnitCode = "HUR";
   description = "";
   expirationDateInput = "";
+  recipientDid? = "";
   visible = false;
 
   libsUtil = libsUtil;
 
-  async open() {
+  async open(recipientDid?: string) {
     try {
+      this.recipientDid = recipientDid;
+
       await db.open();
       const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
       this.apiServer = settings?.apiServer || "";
       this.activeDid = settings?.activeDid || "";
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       console.error("Error retrieving settings from database:", err);
@@ -222,6 +225,7 @@ export default class OfferDialog extends Vue {
         amount,
         unitCode,
         expirationDateInput,
+        this.recipientDid,
         this.projectId,
       );
 

src/libs/endorserServer.ts

@@ -143,6 +143,7 @@ export interface OfferVerifiableCredential {
     isPartOf?: { identifier?: string; lastClaimId?: string; "@type"?: string };
   };
   offeredBy?: { identifier: string };
+  recipient?: { identifier: string };
   validThrough?: string;
 }
 
@@ -582,6 +583,7 @@ export async function createAndSubmitOffer(
   amount?: number,
   unitCode?: string,
   expirationDate?: string,
+  recipientDid?: string,
   fulfillsProjectHandleId?: string,
 ): Promise<CreateAndSubmitClaimResult> {
   const vcClaim: OfferVerifiableCredential = {
@@ -599,6 +601,9 @@ export async function createAndSubmitOffer(
   if (description) {
     vcClaim.itemOffered = { description };
   }
+  if (recipientDid) {
+    vcClaim.recipient = { identifier: recipientDid };
+  }
   if (fulfillsProjectHandleId) {
     vcClaim.itemOffered = vcClaim.itemOffered || {};
     vcClaim.itemOffered.isPartOf = {

src/views/ClaimView.vue

@@ -406,7 +406,6 @@ import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
-import OfferDialog from "@/components/OfferDialog.vue";
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
@@ -419,7 +418,7 @@ import { Account } from "@/db/tables/accounts";
 import { GiverInputInfo } from "@/libs/endorserServer";
 
 @Component({
-  components: { GiftedDialog, OfferDialog, QuickNav },
+  components: { GiftedDialog, QuickNav },
 })
 export default class ClaimView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;

src/views/ContactsView.vue

@@ -177,7 +177,7 @@
 
             <button
               @click="deleteContact(contact)"
-              class="text-sm uppercase bg-gradient-to-b from-rose-500 to-rose-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-24 px-2 py-1.5 rounded-md"
+              class="text-sm uppercase bg-gradient-to-b from-rose-500 to-rose-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-6 px-2 py-1.5 rounded-md"
               title="Delete"
             >
               <fa icon="trash-can" class="fa-fw" />
@@ -207,7 +207,7 @@
               </button>
 
               <button
-                class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded-r-md -ml-1.5 border-l border-blue-400"
+                class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
                 @click="onClickAddGive(contact.did, activeDid)"
                 :title="givenToMeDescriptions[contact.did] || ''"
               >
@@ -225,12 +225,19 @@
                 <fa icon="plus" />
               </button>
 
+              <button
+                class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-blue-400"
+                @click="openOfferDialog(contact.did)"
+              >
+                Offer
+              </button>
+
               <router-link
                 :to="{
                   name: 'contact-amounts',
                   query: { contactDid: contact.did },
                 }"
-                class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md"
+                class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md"
                 title="See more given activity"
               >
                 <fa icon="file-lines" class="fa-fw" />
@@ -241,6 +248,9 @@
       </li>
     </ul>
     <p v-else>There are no contacts.</p>
+
+    <OfferDialog ref="customOfferDialog" />
+
     <div v-if="showLargeIdenticon" class="fixed z-[100] top-0 inset-x-0 w-full">
       <div
         class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
@@ -312,12 +322,13 @@ import {
 import * as libsUtil from "@/libs/util";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
+import OfferDialog from "@/components/OfferDialog.vue";
 import { Account } from "@/db/tables/accounts";
 
 import { Buffer } from "buffer/";
 
 @Component({
-  components: { QuickNav, EntityIcon },
+  components: { EntityIcon, OfferDialog, QuickNav },
 })
 export default class ContactsView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
@@ -1131,6 +1142,10 @@ export default class ContactsView extends Vue {
     }
   }
 
+  openOfferDialog(recipientDid: string) {
+    (this.$refs.customOfferDialog as OfferDialog).open(recipientDid);
+  }
+
   // similar function is in endorserServer.ts
   private async createAndSubmitContactGive(
     identity: IIdentifier,