major refactor of web store into vue setup style declaration; reactivity debugging; order view has known refresh issues

src/components/Order.vue

@@ -0,0 +1,63 @@
+<template>
+  <needs-provider>
+    <phone-card class="tordercard">
+      <v-card-title class="big">{{title}}</v-card-title>
+      <v-card-subtitle>{{subtitle}}</v-card-subtitle>
+      <v-card-item>
+        <pair-choice/>
+        <div v-if="os.route && !os.routesPending">
+          <amount/>
+          <slot/>
+        </div>
+      </v-card-item>
+      <v-card-actions class="d-flex justify-space-evenly mb-4">
+        <v-btn variant="outlined" color="red">Cancel</v-btn>
+        <v-btn variant="flat" color="green" :disabled="!valid" @click="placeOrder">Place Dexorder</v-btn>
+      </v-card-actions>
+    </phone-card>
+  </needs-provider>
+</template>
+
+<script setup>
+import {useOrderStore, useStore} from "@/store/store";
+import {computed, ref} from "vue";
+import PhoneCard from "@/components/PhoneCard.vue";
+import Amount from "@/components/Amount.vue"
+// noinspection ES6UnusedImports
+import {routeInverted, SingletonCoroutine, vAutoSelect} from "@/misc.js";
+import {newLimitConstraint, newOrder, newTimeConstraint, TimeMode} from "@/blockchain/orderlib.js";
+import {FixedNumber} from "ethers";
+import {pendOrder} from "@/blockchain/wallet.js";
+import NeedsProvider from "@/components/NeedsProvider.vue";
+import RoutePrice from "@/components/RoutePrice.vue";
+import router from "@/router/index.js";
+import PairChoice from "@/components/PairChoice.vue";
+import {isEmpty, validateAmount, validateRequired} from "@/validate.js";
+
+const s = useStore()
+const os = useOrderStore()
+const props = defineProps(['title','subtitle','valid','tranches'])
+
+function placeOrder() {
+  const ta = os.tokenA;
+  const tb = os.tokenB;
+  const tokenIn = os.buy ? tb.address : ta.address
+  const tokenOut = os.buy ? ta.address : tb.address
+  const route = os.route
+  const amt = FixedNumber.fromString(os.amount.toString(), {decimals: os.amountToken.decimals}).value
+  const ts = props.tranches()
+  const order = newOrder(tokenIn, tokenOut, route.exchange, route.fee, amt, os.amountIsInput, ts)
+  pendOrder(order)
+  router.push('/orders')
+}
+
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/vars" as *;
+
+.tordercard {
+  max-width: $card-maxw;
+}
+
+</style>