Add context menu to match orders

vue/src/components/MarketOrders.vue

@@ -5,10 +5,11 @@
         <th>description</th>
         <th class="hidden-sm">created at</th>
         <th>status</th>
+        <th></th>
       </thead>
       <tbody>
         <OrderRow :order="o" v-for="o in orders" :key="o.Id" @mouseover="() => mouseover(o.Id)"
-          :selected="selected" />
+          :selected="selected" :click="click" />
       </tbody>
     </table>
   </div>
@@ -16,9 +17,10 @@
 
 <script setup>
 import { ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import OrderRow from './OrderRow.vue'
 
+const router = useRouter()
 const route = useRoute()
 const marketId = route.params.id
 
@@ -34,6 +36,15 @@ function mouseover (oid) {
   }
 }
 
+const click = (order) => {
+  // redirect to form with prefilled inputs to match order
+  const stake = order.quantity * (100 - order.price)
+  const certainty = (100 - order.price) / 100
+  const share = order.ShareDescription === 'YES' ? 'NO' : 'YES'
+  const side = 'BUY'
+  router.push(`/market/${marketId}/form?stake=${stake}&certainty=${certainty}&side=${side}&share=${share}`)
+}
+
 const orders = ref([])
 const url = `/api/market/${marketId}/orders`
 await fetch(url)

vue/src/components/OrderForm.vue

@@ -27,16 +27,16 @@ import { useRoute, useRouter } from 'vue-router'
 const router = useRouter()
 const route = useRoute()
 const marketId = route.params.id
-const selected = ref(null)
+const selected = ref(route.query.share || null)
 const showForm = computed(() => selected.value !== null)
 const yesClass = computed(() => selected.value === 'YES' ? ['active'] : [])
 const noClass = computed(() => selected.value === 'NO' ? ['active'] : [])
 const err = ref(null)
 
 // how much wants the user bet?
-const stake = ref(100)
+const stake = ref(route.query.stake || 100)
 // how sure is the user he will win?
-const certainty = ref(0.5)
+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?

vue/src/components/OrderRow.vue

@@ -1,20 +1,29 @@
 <template>
-  <tr>
+  <tr @mouseover="mouseover" @mouseleave="mouseleave">
     <td v-if="order.MarketId"><router-link :to="/market/ + order.MarketId">{{ order.MarketId }}</router-link></td>
     <td>{{ order.side }} {{ order.quantity }} {{ order.ShareDescription }} @ {{ order.price }} sats
     </td>
     <td :title="order.CreatedAt" class="hidden-sm">{{ ago(new Date(order.CreatedAt)) }}</td>
     <td :class="'font-mono ' + statusClassName + ' ' + selectedClassName">{{ order.Status }}</td>
+    <td v-if="showContextMenu && !!session.pubkey">
+      <button @click="() => click(order)" :disabled="mine">match</button>
+    </td>
   </tr>
 </template>
 
 <script setup>
 import { ref, defineProps, computed } from 'vue'
 import ago from 's-ago'
+import { useSession } from '@/stores/session'
 
-const props = defineProps(['order', 'selected'])
+const session = useSession()
+const props = defineProps(['order', 'selected', 'click'])
 
 const order = ref(props.order)
+const showContextMenu = ref(false)
+const click = ref(props.click)
+
+const mine = order.value.Pubkey === session?.pubkey
 
 const statusClassName = computed(() => {
   const status = order.value.Status
@@ -33,6 +42,16 @@ const selectedClassName = computed(() => {
   return ''
 })
 
+const mouseover = () => {
+  if (!!props.click && order.value.Status === 'PENDING') {
+    showContextMenu.value = true
+  }
+}
+
+const mouseleave = () => {
+  showContextMenu.value = false
+}
+
 </script>
 
 <style scoped>

vue/src/index.css

@@ -13,6 +13,11 @@ button:hover {
   background: #8787A4;
 }
 
+button:disabled {
+  opacity: 0.67;
+  font-style: italic;
+}
+
 input {
   color: #000;
 }