signet-frontend/src/views/AddFundView.vue

<template>
  <div>
    <section>
      <div class="title is-4 has-text-white-ter has-text-centered">Add Fund</div>
      <section class="section px-0 py-4">
        <div class="title is-5 has-text-white-ter">Post</div>
        <div class="control my-2">
          <input type="text"
                 placeholder="Title" aria-label="Title" v-model="title">
        </div>
        <div class="control my-2">
        <textarea
          placeholder="Description" aria-label="Description" v-model="description">
        </textarea>
        </div>
      </section>
      <section class="section px-0 py-4">
        <div class="title is-5 has-text-white-ter">Wallet</div>
        <div class="control my-2">
          <input type="text"
                 placeholder="Fund Wallet" aria-label="Fund Wallet" v-model="fundWallet">
        </div>
        <div class="control my-2">
          <input type="text"
                 placeholder="Selling Wallet" aria-label="Selling Wallet" v-model="sellWallet">
        </div>
        <div class="control my-2">
          <input type="text"
                 placeholder="Issuer Wallet" aria-label="Issuer Wallet" v-model="issuerWallet">
        </div>
      </section>
      <section class="section px-0 py-4">
        <div class="title is-5 has-text-white-ter">Fund</div>
        <div class="control my-2 is-flex is-justify-content-space-between">
          <input class="input is-normal mr-1 has-background-white has-text-black" type="text"
                 placeholder="Asset Code" aria-label="Asset" v-model="asset">
          <input class="input is-normal mx-1 has-background-white has-text-black" type="text"
                 placeholder="Memo" aria-label="Memo" v-model="memo">
          <input class="input is-normal ml-1 has-background-white has-text-black" type="number"
                 placeholder="Min Contribution" aria-label="Min Contribution"
                 v-model="minContribution">
        </div>
      </section>
      <section class="section px-0 py-4">
        <div class="title is-5 has-text-white-ter">Bonus Structure</div>
        <FundTierInput @save="saveBonuses"/>
      </section>
      <section class="section px-0 py-4">
        <div class="title is-5 has-text-white-ter">Queue</div>
        <EditQueue
          :new-member="constructFund()"
          @created="setQueueName"
          @selected="setQueueSelection"
        />
      </section>
    </section>
    <div class="buttons is-flex is-justify-content-end mt-5">
      <button

        :class="requesting ? 'is-loading' : ''"
        @click="submit"
      >Submit
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">

import SignetRequestController from '@/api/requests';
import {
  Bonus,
  CreateQueueResponse,
} from '@/api/types';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import FundTierInput from '@/components/FundTierInput.vue';
import EditQueue from '@/components/EditQueue.vue';
import {
  createQueue,
  createRewardFund,
} from '@/api/composed';
import { sanitize } from '@/lib/helpers';

const router = useRouter();

document.title = 'Beignet - Add Fund';

const controller = new SignetRequestController();

const title = ref('');
const description = ref('');
const fundWallet = ref('');
const sellWallet = ref('');
// const fundSecret = ref('');
const issuerWallet = ref('');
const asset = ref('');
const memo = ref('');
const minContribution = ref(undefined as number | undefined);

const queueName = ref(undefined as string | undefined);
const queueSelection = ref(undefined as number | undefined);
// TODO: figure out why the above vars are not reactive

const setQueueName = (name: string) => {
  queueName.value = name;
};

const setQueueSelection = (val: number) => {
  queueSelection.value = val;
};

const bonuses = ref([] as Bonus[]);
const saveBonuses = (evt: Bonus[]) => {
  bonuses.value = evt;
};

const doCreateQueue = async () => {
  if (!queueName.value) return null;
  const resp = ref(undefined as CreateQueueResponse | undefined);
  resp.value = await createQueue(queueName.value) ?? undefined;
  if (resp.value?.id) {
    return resp.value?.id;
  }
  return null;
};

const constructFund = () => ({
  asset: asset.value,
  fundWallet: sanitize(fundWallet.value),
  sellingWallet: sanitize(sellWallet.value),
  issuerWallet: sanitize(issuerWallet.value),
  memo: sanitize(memo.value),
  minContribution: minContribution.value,
  title: sanitize(title.value),
  description: sanitize(description.value),
  bonuses: bonuses.value,
  queueID: null,
});

const requesting = ref(false);
const submit = async () => {
  if (!minContribution.value) return;
  if (!/^[0-9]+$/.test(minContribution.value.toString())) return;
  if (!requesting.value) {
    requesting.value = true;
    const forQueue = ref(undefined as null | number | undefined);
    if (queueSelection.value === -1) {
      forQueue.value = await doCreateQueue();
    } else {
      forQueue.value = queueSelection.value;
    }
    const resp = await createRewardFund(
      asset.value,
      sanitize(fundWallet.value),
      sanitize(sellWallet.value),
      sanitize(issuerWallet.value),
      sanitize(memo.value),
      minContribution.value,
      sanitize(title.value),
      sanitize(description.value),
      bonuses.value,
      forQueue.value,
    );
    requesting.value = false;

    if (!resp) throw new Error('Could not get response for fund creation');
    if (resp.success) {
      await router.push('/');
    }
  }
};

</script>

<style scoped lang="stylus">
input::placeholder, textarea::placeholder
  color #7d7d7d
</style>