add advanced page & flag for editing raw claims, and fix recipient assignment in detail screen

2024-06-29 10:18:56 -06:00
parent 9c7b138d06
commit 053ee4a748
6 changed files with 395 additions and 103 deletions
--- a/src/db/tables/settings.ts
+++ b/src/db/tables/settings.ts
@@ -37,6 +37,7 @@ export type Settings = {
  }>;

  showContactGivesInline?: boolean; // Display contact inline or not
+  showGeneralAdvanced?: boolean; // Show advanced features which don't have their own flag
  showShortcutBvc?: boolean; // Show shortcut for Bountiful Voluntaryist Community actions
  vapid?: string; // VAPID (Voluntary Application Server Identification) field for web push
  warnIfProdServer?: boolean; // Warn if using a production server
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -160,7 +160,7 @@ export interface OfferVerifiableCredential {
 // Note that previous VCs may have additional fields.
 // https://endorser.ch/doc/html/transactions.html#id7
 export interface PlanVerifiableCredential {
-  "@context": "https://schema.org";
+  "@context": SCHEMA_ORG_CONTEXT;
  "@type": "PlanAction";
  name: string;
  agent?: { identifier: string };
@@ -518,19 +518,7 @@ export async function setPlanInCache(
  planCache.set(handleId, planSummary);
 }

-/**
- * For result, see https://api.endorser.ch/api-docs/#/claims/post_api_v2_claim
- *
- * @param identity
- * @param fromDid may be null
- * @param toDid
- * @param description may be null; should have this or amount
- * @param amount may be null; should have this or description
- */
-export async function createAndSubmitGive(
-  axios: Axios,
-  apiServer: string,
-  identity: IIdentifier,
+export function constructGive(
  fromDid?: string | null,
  toDid?: string,
  description?: string,
@@ -540,9 +528,9 @@ export async function createAndSubmitGive(
  fulfillsOfferHandleId?: string,
  isTrade: boolean = false,
  imageUrl?: string,
-): Promise<CreateAndSubmitClaimResult> {
+): GiveVerifiableCredential {
  const vcClaim: GiveVerifiableCredential = {
-    "@context": "https://schema.org",
+    "@context": SCHEMA_ORG_CONTEXT,
    "@type": "GiveAction",
    recipient: toDid ? { identifier: toDid } : undefined,
    agent: fromDid ? { identifier: fromDid } : undefined,
@@ -569,6 +557,43 @@ export async function createAndSubmitGive(
  if (imageUrl) {
    vcClaim.image = imageUrl;
  }
+  return vcClaim;
+}
+
+/**
+ * For result, see https://api.endorser.ch/api-docs/#/claims/post_api_v2_claim
+ *
+ * @param identity
+ * @param fromDid may be null
+ * @param toDid
+ * @param description may be null; should have this or amount
+ * @param amount may be null; should have this or description
+ */
+export async function createAndSubmitGive(
+  axios: Axios,
+  apiServer: string,
+  identity: IIdentifier,
+  fromDid?: string | null,
+  toDid?: string,
+  description?: string,
+  amount?: number,
+  unitCode?: string,
+  fulfillsProjectHandleId?: string,
+  fulfillsOfferHandleId?: string,
+  isTrade: boolean = false,
+  imageUrl?: string,
+): Promise<CreateAndSubmitClaimResult> {
+  const vcClaim = constructGive(
+    fromDid,
+    toDid,
+    description,
+    amount,
+    unitCode,
+    fulfillsProjectHandleId,
+    fulfillsOfferHandleId,
+    isTrade,
+    imageUrl,
+  );
  return createAndSubmitClaim(
    vcClaim as GenericCredWrapper,
    identity,
@@ -598,7 +623,7 @@ export async function createAndSubmitOffer(
  fulfillsProjectHandleId?: string,
 ): Promise<CreateAndSubmitClaimResult> {
  const vcClaim: OfferVerifiableCredential = {
-    "@context": "https://schema.org",
+    "@context": SCHEMA_ORG_CONTEXT,
    "@type": "Offer",
    offeredBy: { identifier: identity.did },
    validThrough: expirationDate || undefined,
@@ -645,7 +670,7 @@ export const createAndSubmitConfirmation = async (
    ),
  );
  const confirmationClaim: GenericVerifiableCredential = {
-    "@context": "https://schema.org",
+    "@context": SCHEMA_ORG_CONTEXT,
    "@type": "AgreeAction",
    object: goodClaim,
  };
@@ -928,7 +953,7 @@ export async function register(
  const identity = await getIdentity(activeDid);

  const vcClaim: RegisterVerifiableCredential = {
-    "@context": "https://schema.org",
+    "@context": SCHEMA_ORG_CONTEXT,
    "@type": "RegisterAction",
    agent: { identifier: identity.did },
    object: SERVICE_ID,
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -38,6 +38,11 @@ const routes: Array<RouteRecordRaw> = [
    name: "claim",
    component: () => import("../views/ClaimView.vue"),
  },
+  {
+    path: "/claim-add-raw/:id?",
+    name: "claim-add-raw",
+    component: () => import("../views/ClaimAddRawView.vue"),
+  },
  {
    path: "/confirm-contact",
    name: "confirm-contact",
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -314,7 +314,7 @@
    >
      Advanced
    </h3>
-    <div v-if="showAdvanced">
+    <div v-if="showAdvanced || showGeneralAdvanced">
      <p class="text-rose-600 mb-8">
        Beware: the features here can be confusing and even change data in ways
        you do not expect. But we support your freedom!
@@ -386,6 +386,27 @@
        Switch Identifier
      </router-link>

+      <div class="mt-4">
+        <h2 class="text-slate-500 text-sm font-bold">
+          Contacts & Settings Database
+        </h2>
+
+        <div class="ml-4 mt-2">
+          Import
+          <input type="file" @change="uploadImportFile" class="ml-2" />
+          <div v-if="showContactImport()">
+            <button
+              class="block text-center text-md 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-1.5 py-2 rounded-md mb-6"
+              @click="confirmSubmitImportFile()"
+            >
+              Import Settings & Contacts
+              <br />
+              (excluding Identifier Data)
+            </button>
+          </div>
+        </div>
+      </div>
+
      <label
        for="toggleShowAmounts"
        class="flex items-center justify-between cursor-pointer my-4"
@@ -583,27 +604,6 @@
        </div>
      </label>

-      <div class="mt-4">
-        <h2 class="text-slate-500 text-sm font-bold">
-          Contacts & Settings Database
-        </h2>
-
-        <div class="ml-4 mt-2">
-          Import
-          <input type="file" @change="uploadImportFile" class="ml-2" />
-          <div v-if="showContactImport()">
-            <button
-              class="block text-center text-md 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-1.5 py-2 rounded-md mb-6"
-              @click="confirmSubmitImportFile()"
-            >
-              Import Settings & Contacts
-              <br />
-              (excluding Identifier Data)
-            </button>
-          </div>
-        </div>
-      </div>
-
      <div class="flex mt-4">
        <button>
          <router-link
@@ -614,6 +614,32 @@
          </router-link>
        </button>
      </div>
+
+      <label
+        for="toggleShowGeneralAdvanced"
+        class="flex items-center justify-between cursor-pointer mt-4"
+        @click="toggleShowGeneralAdvanced"
+      >
+        <!-- label -->
+        <span class="text-slate-500 text-sm font-bold">
+          Show All General Advanced Functions
+        </span>
+        <!-- toggle -->
+        <div class="relative ml-2">
+          <!-- input -->
+          <input
+            type="checkbox"
+            v-model="showGeneralAdvanced"
+            class="sr-only"
+          />
+          <!-- line -->
+          <div class="block bg-slate-500 w-14 h-8 rounded-full" />
+          <!-- dot -->
+          <div
+            class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+          />
+        </div>
+      </label>
    </div>
  </section>
 </template>
@@ -677,31 +703,31 @@ export default class AccountViewView extends Vue {
  downloadUrl = ""; // because DuckDuckGo doesn't download on automated call to "click" on the anchor
  endorserLimits: EndorserRateLimits | null = null;
  givenName = "";
+  hideRegisterPromptOnNewContact = false;
  imageLimits: ImageRateLimits | null = null;
  isRegistered = false;
  isSubscribed = false;
+  limitsMessage = "";
+  loadingLimits = false;
  notificationMaybeChanged = false;
  profileImageUrl?: string;
  publicHex = "";
  publicBase64 = "";
-  showLargeIdenticonId?: string;
-  showLargeIdenticonUrl?: string;
-  webPushServer = "";
-  webPushServerInput = "";
-
-  limitsMessage = "";
-  loadingLimits = false;
+  showAdvanced = false;
+  showB64Copy = false;
  showContactGives = false;
  showDidCopy = false;
  showDerCopy = false;
-  showB64Copy = false;
+  showGeneralAdvanced = false;
+  showLargeIdenticonId?: string;
+  showLargeIdenticonUrl?: string;
  showPubCopy = false;
-  showAdvanced = false;
-  hideRegisterPromptOnNewContact = false;
  showShortcutBvc = false;
  subscription: PushSubscription | null = null;
  warnIfProdServer = false;
  warnIfTestServer = false;
+  webPushServer = "";
+  webPushServerInput = "";

  /**
   * Async function executed when the component is mounted.
@@ -756,6 +782,7 @@ export default class AccountViewView extends Vue {
    this.showContactGives = !!settings?.showContactGivesInline;
    this.hideRegisterPromptOnNewContact =
      !!settings?.hideRegisterPromptOnNewContact;
+    this.showGeneralAdvanced = !!settings?.showGeneralAdvanced;
    this.showShortcutBvc = !!settings?.showShortcutBvc;
    this.warnIfProdServer = !!settings?.warnIfProdServer;
    this.warnIfTestServer = !!settings?.warnIfTestServer;
@@ -819,6 +846,11 @@ export default class AccountViewView extends Vue {
    this.updateShowContactAmounts();
  }

+  toggleShowGeneralAdvanced() {
+    this.showGeneralAdvanced = !this.showGeneralAdvanced;
+    this.updateShowGeneralAdvanced();
+  }
+
  toggleProdWarning() {
    this.warnIfProdServer = !this.warnIfProdServer;
    this.updateWarnIfProdServer(this.warnIfProdServer);
@@ -852,10 +884,6 @@ export default class AccountViewView extends Vue {
      this.publicHex = identity.keys[0].publicKeyHex;
      this.publicBase64 = Buffer.from(this.publicHex, "hex").toString("base64");
      this.derivationPath = identity.keys[0].meta?.derivationPath as string;
-
-      db.settings.update(MASTER_SETTINGS_KEY, {
-        activeDid: identity.did,
-      });
      this.checkLimitsFor(identity);
    } else {
      // Handle the case where any of these are null or undefined
@@ -915,7 +943,7 @@ export default class AccountViewView extends Vue {
  public async updateShowContactAmounts() {
    try {
      await db.open();
-      db.settings.update(MASTER_SETTINGS_KEY, {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
        showContactGivesInline: this.showContactGives,
      });
    } catch (err) {
@@ -935,10 +963,33 @@ export default class AccountViewView extends Vue {
    }
  }

+  public async updateShowGeneralAdvanced() {
+    try {
+      await db.open();
+      await db.settings.update(MASTER_SETTINGS_KEY, {
+        showGeneralAdvanced: this.showGeneralAdvanced,
+      });
+    } catch (err) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Updating Advanced Setting",
+          text: "The setting may not have saved. Try again, maybe after restarting the app.",
+        },
+        -1,
+      );
+      console.error(
+        "Telling user to try again after general-advanced setting update because:",
+        err,
+      );
+    }
+  }
+
  public async updateWarnIfProdServer(newSetting: boolean) {
    try {
      await db.open();
-      db.settings.update(MASTER_SETTINGS_KEY, {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
        warnIfProdServer: newSetting,
      });
    } catch (err) {
@@ -961,7 +1012,7 @@ export default class AccountViewView extends Vue {
  public async updateWarnIfTestServer(newSetting: boolean) {
    try {
      await db.open();
-      db.settings.update(MASTER_SETTINGS_KEY, {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
        warnIfTestServer: newSetting,
      });
    } catch (err) {
@@ -985,7 +1036,7 @@ export default class AccountViewView extends Vue {
    const newSetting = !this.hideRegisterPromptOnNewContact;
    try {
      await db.open();
-      db.settings.update(MASTER_SETTINGS_KEY, {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
        hideRegisterPromptOnNewContact: newSetting,
      });
      this.hideRegisterPromptOnNewContact = newSetting;
@@ -1006,7 +1057,7 @@ export default class AccountViewView extends Vue {
  public async updateShowShortcutBvc(newSetting: boolean) {
    try {
      await db.open();
-      db.settings.update(MASTER_SETTINGS_KEY, {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
        showShortcutBvc: newSetting,
      });
    } catch (err) {
--- a/src/views/ClaimAddRawView.vue
+++ b/src/views/ClaimAddRawView.vue
@@ -0,0 +1,133 @@
+<template>
+  <QuickNav />
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-lg text-center font-light relative px-7">
+        <!-- Back -->
+        <button
+          @click="$router.go(-1)"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        >
+          <fa icon="chevron-left" class="fa-fw" />
+        </button>
+        Raw Claim
+      </h1>
+    </div>
+
+    <div class="flex">
+      <textarea rows="20" class="w-full" v-model="claimStr"></textarea>
+    </div>
+    <button
+      class="block w-full text-center text-lg font-bold uppercase 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-3 rounded-md"
+      @click="submitClaim()"
+    >
+      Sign &amp; Send
+    </button>
+  </section>
+</template>
+
+<script lang="ts">
+import { RawAxiosRequestHeaders } from "axios";
+import { IIdentifier } from "@veramo/core";
+import { Component, Vue } from "vue-facing-decorator";
+
+import GiftedDialog from "@/components/GiftedDialog.vue";
+import { NotificationIface } from "@/constants/app";
+import { accountsDB, db } from "@/db/index";
+import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+import { accessToken } from "@/libs/crypto";
+import * as serverUtil from "@/libs/endorserServer";
+import QuickNav from "@/components/QuickNav.vue";
+import { Account } from "@/db/tables/accounts";
+
+@Component({
+  components: { GiftedDialog, QuickNav },
+})
+export default class ClaimAddRawView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  accountIdentityStr: string = "null";
+  activeDid = "";
+  apiServer = "";
+  claimStr = "";
+
+  async mounted() {
+    await db.open();
+    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    this.activeDid = settings?.activeDid || "";
+    this.apiServer = settings?.apiServer || "";
+
+    this.claimStr = this.$route.query.claim;
+    try {
+      this.veriClaim = JSON.parse(this.claimStr);
+      this.claimStr = JSON.stringify(this.veriClaim, null, 2);
+    } catch (e) {
+      // ignore a parse
+    }
+  }
+
+  public async getIdentity(activeDid: string): Promise<IIdentifier> {
+    await accountsDB.open();
+    const account = (await accountsDB.accounts
+      .where("did")
+      .equals(activeDid)
+      .first()) as Account;
+    const identity = JSON.parse(account?.identity || "null");
+
+    if (!identity) {
+      throw new Error("Cannot submit a claim without an identifier.");
+    }
+    return identity;
+  }
+
+  public async getHeaders(identity: IIdentifier) {
+    const headers: RawAxiosRequestHeaders = {
+      "Content-Type": "application/json",
+    };
+    if (identity) {
+      const token = await accessToken(identity);
+      headers["Authorization"] = "Bearer " + token;
+    }
+    return headers;
+  }
+
+  // similar code is found in ProjectViewView
+  async submitClaim() {
+    const fullClaim: serverUtil.GenericVerifiableCredential = {
+      "@context": "https://schema.org",
+      "@type": "AgreeAction",
+      object: JSON.parse(this.claimStr),
+    };
+    const result = await serverUtil.createAndSubmitClaim(
+      fullClaim,
+      await this.getIdentity(this.activeDid),
+      this.apiServer,
+      this.axios,
+    );
+    if (result.type === "success") {
+      this.$notify(
+        {
+          group: "alert",
+          type: "success",
+          title: "Success",
+          text: "Claim submitted.",
+        },
+        5000,
+      );
+    } else {
+      console.error("Got error submitting the claim:", result);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was a problem submitting the claim. See logs for more info.",
+        },
+        -1,
+      );
+    }
+  }
+}
+</script>
--- a/src/views/GiftedDetails.vue
+++ b/src/views/GiftedDetails.vue
@@ -21,8 +21,17 @@
    <h1 class="text-4xl text-center font-light px-4 mb-4">What Was Given</h1>

    <h1 class="text-xl font-bold text-center mb-4">
-      <span>From {{ giverName || "somebody not named" }}</span>
-      <span> to {{ recipientName || "somebody not named" }}</span>
+      <span>From {{ giverName }}</span>
+      <span>
+        to
+        {{
+          givenToProject
+            ? projectName
+            : givenToRecipient
+              ? recipientName
+              : "someone unidentified"
+        }}</span
+      >
    </h1>
    <textarea
      class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
@@ -78,7 +87,7 @@

    <div class="h-7 mt-4 flex">
      <input
-        v-if="projectId && !givenToUser"
+        v-if="projectId && !givenToRecipient"
        type="checkbox"
        class="h-6 w-6 mr-2"
        v-model="givenToProject"
@@ -100,20 +109,24 @@

    <div class="h-7 mt-4 flex">
      <input
-        v-if="!givenToProject"
+        v-if="recipientDid && !givenToProject"
        type="checkbox"
        class="h-6 w-6 mr-2"
-        v-model="givenToUser"
+        v-model="givenToRecipient"
      />
      <fa
        v-else
        icon="square"
        class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
-        @click="
-          notifyUser('You cannot assign this both a project and also to you.')
-        "
+        @click="notifyUserOfRecipient()"
      />
-      <label class="text-sm mt-1">This was given to you</label>
+      <label class="text-sm mt-1">
+        {{
+          recipientDid
+            ? "This was given to " + recipientName
+            : "No recipient was chosen."
+        }}
+      </label>
    </div>

    <div class="mt-4 flex">
@@ -121,6 +134,20 @@
      <label class="text-sm mt-1">This was a trade (not a gift)</label>
    </div>

+    <div class="mt-4 flex">
+      <router-link
+        :to="{
+          name: 'claim-add-raw',
+          query: {
+            claim: constructGiveParam(),
+          },
+        }"
+        class="text-blue-500"
+      >
+        Edit & Submit Raw
+      </router-link>
+    </div>
+
    <p class="text-center mb-2 mt-6 italic">
      Sign & Send to publish to the world
      <fa
@@ -153,11 +180,16 @@ import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
-import { db } from "@/db/index";
+import {accountsDB, db} from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import { createAndSubmitGive, getPlanFromCache } from "@/libs/endorserServer";
+import {
+  constructGive,
+  createAndSubmitGive, didInfo,
+  getPlanFromCache,
+} from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
 import { accessToken } from "@/libs/crypto";
+import {Contact} from "@/db/tables/contacts";

@Component({
  components: {
@@ -176,7 +208,7 @@ export default class GiftedDetails extends Vue {
  description = "";
  destinationNameAfter = "";
  givenToProject = false;
-  givenToUser = false;
+  givenToRecipient = false;
  giverDid: string | undefined;
  giverName = "";
  hideBackButton = false;
@@ -188,7 +220,6 @@ export default class GiftedDetails extends Vue {
  projectName = "a project";
  recipientDid = "";
  recipientName = "";
-  showGivenToUser = false;
  unitCode = "HUR";

  libsUtil = libsUtil;
@@ -234,18 +265,36 @@ export default class GiftedDetails extends Vue {
      this.apiServer = settings?.apiServer || "";
      this.activeDid = settings?.activeDid || "";

+      let allContacts: Contact[] = [];
+      let allMyDids: string[] = [];
+      if (
+        (this.giverDid && !this.giverName) ||
+        (this.recipientDid && !this.recipientName)
+      ) {
+        allContacts = await db.contacts.toArray();
+
+        await accountsDB.open();
+        const allAccounts = await accountsDB.accounts.toArray();
+        allMyDids = allAccounts.map((acc) => acc.did);
        if (this.giverDid && !this.giverName) {
-        this.giverName =
-          this.giverDid === this.activeDid ? "you" : "someone not named";
+          this.giverName = didInfo(
+            this.giverDid,
+            this.activeDid,
+            allMyDids,
+            allContacts,
+          );
        }
-      this.givenToUser = this.recipientDid === this.activeDid;
        if (this.recipientDid && !this.recipientName) {
-        this.recipientName =
-          this.recipientDid === this.activeDid ? "you" : "someone not named";
+          this.recipientName = didInfo(
+            this.recipientDid,
+            this.activeDid,
+            allMyDids,
+            allContacts,
+          );
+        }
      }
      this.givenToProject = !!this.projectId;
-      this.givenToUser =
-        !this.projectId && this.recipientDid === this.activeDid;
+      this.givenToRecipient = !this.givenToProject && !!this.recipientDid;

      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (err: any) {
@@ -442,18 +491,6 @@ export default class GiftedDetails extends Vue {
    await this.recordGive();
  }

-  notifyUser(message: string) {
-    this.$notify(
-      {
-        group: "alert",
-        type: "warning",
-        title: "Error",
-        text: message,
-      },
-      3000,
-    );
-  }
-
  notifyUserOfProject() {
    if (!this.projectId) {
      this.$notify(
@@ -466,13 +503,38 @@ export default class GiftedDetails extends Vue {
        3000,
      );
    } else {
-      // must be because givenToUser is true
+      // must be because givenToRecipient is true
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Error",
-          text: "You cannot assign both to a project and to yourself.",
+          text: "You cannot assign both to a project and to a recipient.",
+        },
+        3000,
+      );
+    }
+  }
+
+  notifyUserOfRecipient() {
+    if (!this.recipientDid) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Error",
+          text: "To assign to a recipient, you must open this dialog from a contact.",
+        },
+        3000,
+      );
+    } else {
+      // must be because givenToProject is true
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Error",
+          text: "You cannot assign both to a recipient and to a project.",
        },
        3000,
      );
@@ -489,12 +551,9 @@ export default class GiftedDetails extends Vue {
  public async recordGive() {
    try {
      const identity = await libsUtil.getIdentity(this.activeDid);
-      const recipientDid =
-        this.recipientDid === this.activeDid
-          ? this.givenToUser
-            ? this.activeDid
-            : undefined
-          : this.recipientDid;
+      const recipientDid = this.givenToRecipient
+        ? this.recipientDid
+        : undefined;
      const projectId = this.givenToProject ? this.projectId : undefined;
      const result = await createAndSubmitGive(
        this.axios,
@@ -562,6 +621,24 @@ export default class GiftedDetails extends Vue {
    }
  }

+  constructGiveParam() {
+    const recipientDid = this.givenToRecipient ? this.recipientDid : undefined;
+    const projectId = this.givenToProject ? this.projectId : undefined;
+    const giveClaim = constructGive(
+      this.giverDid,
+      recipientDid,
+      this.description,
+      parseFloat(this.amountInput),
+      this.unitCode,
+      projectId,
+      this.offerId,
+      this.isTrade,
+      this.imageUrl,
+    );
+    const claimStr = JSON.stringify(giveClaim);
+    return claimStr;
+  }
+
  // Helper functions for readability

  /**