Update order form

vue/src/components/OrderForm.vue

@@ -5,37 +5,42 @@
         @click.prevent="toggleYes">YES</button>
       <button type="button" :class="noClass" class="label error font-mono mx-1 my-3" @click.prevent="toggleNo">NO</button>
     </div>
-    <div v-if="userShares > 0 && showForm" class="flex justify-center items-center">
-      <label for="side" class="m-1"><i>sell?</i></label>
-      <input v-model="side" true-value="SELL" false-value="BUY" type="checkbox" name="side" class="m-1" />
-    </div>
     <form v-if="side === 'BUY'" v-show="showForm" @submit.prevent="submitBuyForm">
-      <label v-if="session.isAuthenticated" for="msats">you have:</label>
-      <label v-if="session.isAuthenticated" name="msats">{{ session.msats / 1000 }} sats</label>
+      <label v-if="session.isAuthenticated">you have:</label>
+      <label v-if="session.isAuthenticated">
+        {{ session.msats / 1000 }} sats and {{ userShares }} shares
+        (<label class="m-1"><i>sell?</i></label>
+        <input v-model="side" true-value="SELL" false-value="BUY" type="checkbox" class="m-1"
+          :disabled="userShares === 0" />)
+      </label>
       <label for="stake">how much?</label>
       <input name="stake" v-model="stake" type="number" min="0" placeholder="sats" required />
       <label for="certainty">how sure?</label>
       <input name="certainty" v-model="certainty" type="number" min="0.01" max="0.99" step="0.01" required />
       <label>you receive:</label>
-      <label>{{ format(shares) }} {{ selected }} shares @ {{ format(price) }} sats</label>
+      <label>{{ format(buyShares) }} {{ selected }} shares @ {{ format(buyPrice) }} sats</label>
       <label>you pay:</label>
-      <label>{{ format(cost) }} sats</label>
+      <label>{{ format(buyCost) }} sats</label>
       <label>if you win:</label>
-      <label>+{{ format(profit) }} sats</label>
+      <label>+{{ format(buyProfit) }} sats</label>
       <button class="col-span-2" type="submit">submit buy order</button>
     </form>
     <form v-else v-show="showForm" @submit.prevent="submitSellForm">
-      <label for="inv">you have:</label>
-      <label name="inv">{{ userShares }} shares</label>
+      <label v-if="session.isAuthenticated">you have:</label>
+      <label v-if="session.isAuthenticated">
+        {{ session.msats / 1000 }} sats and {{ userShares }} shares
+        (<label class="m-1"><i>sell?</i></label>
+        <input v-model="side" true-value="SELL" false-value="BUY" type="checkbox" class="m-1" />)
+      </label>
       <label for="shares">how many?</label>
-      <input name="shares" v-model="shares" type="number" min="1" :max="userShares" placeholder="shares" required />
+      <input name="shares" v-model="sellShares" type="number" min="1" :max="userShares" placeholder="shares" required />
       <label for="price">price?</label>
-      <input name="price" v-model="price" type="number" min="1" max="99" step="1" required />
+      <input name="price" v-model="sellPrice" type="number" min="1" max="99" step="1" required />
       <label>you sell:</label>
-      <label>{{ shares }} {{ selected }} shares @ {{ price }} sats</label>
+      <label>{{ sellShares }} {{ selected }} shares @ {{ format(sellPrice) }} sats</label>
       <label>you make:</label>
-      <label>{{ format(profit) }} sats</label>
-      <button class="col-span-2" type="submit" :disabled="disabled">submit sell order</button>
+      <label>+{{ format(sellProfit) }} sats</label>
+      <button class="col-span-2" type="submit" :disabled="userShares === 0">submit sell order</button>
     </form>
     <div v-if="err" class="red text-center">{{ err }}</div>
     <div v-if="success" class="green text-center">{{ success }}</div>
@@ -77,33 +82,33 @@ const side = ref(route.query.side || 'BUY')
 const stake = ref(route.query.stake || 100)
 // how sure is the user he will win?
 const certainty = ref(route.query.certainty || 0.5)
-// price per share: more risk, lower price, higher reward
-const price = computed(() => certainty.value * 100)
-// how many (full) shares can be bought?
-const shares = computed(() => {
-  const val = price.value > 0 ? stake.value / price.value : null
+const buyPrice = computed(() => Math.round(certainty.value * 100))
+const buyShares = computed(() => {
+  const val = buyPrice.value > 0 ? stake.value / buyPrice.value : null
   // only full shares can be bought
   return Math.round(val)
 })
 // how much does this order cost?
-const cost = computed(() => {
-  return shares.value * price.value
+const buyCost = computed(() => {
+  return buyShares.value * buyPrice.value
 })
 // how high is the potential reward?
-const profit = computed(() => {
+const buyProfit = computed(() => {
   // shares expire at 10 or 0 sats
-  const val = (100 * shares.value) - cost.value
+  const val = (100 * buyShares.value) - buyCost.value
   return isNaN(val) ? 0 : val
 })
-
 // -- SELL params
 // how many shares does the user own?
 const userShares = computed(() => (((selected.value === 'YES' ? market.value.user?.YES : market.value.user?.NO) || 0) - sold.value))
+// how many shares does the user want to sell?
+const sellShares = ref(2)
+// at which price wants the user to sell each share?
+const sellPrice = ref(50)
+const sellProfit = computed(() => sellShares.value * sellPrice.value)
 // how many share did the user sell since we refreshed our data?
 const sold = ref(0)
 
-const disabled = computed(() => userShares.value === 0)
-
 const format = (x, i = 3) => x === null ? null : x >= 1 ? Math.round(x) : x === 0 ? x : x.toFixed(i)
 
 // Fetch market data
@@ -134,8 +139,8 @@ const submitBuyForm = async () => {
   const url = window.origin + '/api/order'
   const body = JSON.stringify({
     sid: shareId.value,
-    quantity: shares.value,
-    price: price.value,
+    quantity: buyShares.value,
+    price: buyPrice.value,
     side: 'BUY'
   })
   const res = await fetch(url, { method: 'POST', headers: { 'Content-type': 'application/json' }, body })
@@ -154,8 +159,8 @@ const submitSellForm = async () => {
   const url = window.origin + '/api/order'
   const body = JSON.stringify({
     sid: shareId.value,
-    quantity: shares.value,
-    price: price.value,
+    quantity: sellShares.value,
+    price: sellPrice.value,
     side: 'SELL'
   })
   const res = await fetch(url, { method: 'POST', headers: { 'Content-type': 'application/json' }, body })