wallet flow; new faucet; placing chart orders works!

2024-03-25 21:04:14 -04:00
parent 6ee442d7ec
commit d11ad7cf40
21 changed files with 444 additions and 201 deletions
--- a/src/components/chart/ChartPlaceOrder.vue
+++ b/src/components/chart/ChartPlaceOrder.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="d-flex flex-column h-100">
+    <toolbar>
+      <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>
+      <v-btn variant="text" prepend-icon="mdi-send" @click="placeOrder" :color="orderColor" v-if="co.orders.length>0">Place Order</v-btn>
+      <v-btn variant="flat" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
+    </toolbar>
+    <v-dialog v-model="showCancel" max-width="300">
+      <v-card title="Cancel Order?" text="Do you want to cancel this order and create a new one?">
+        <v-card-actions>
+          <v-spacer/>
+          <v-btn @click="()=>showCancel=false">Keep Existing</v-btn>
+          <v-btn @click="()=>{co.orders.shift(); showCancel=false}" color="red">Cancel Order</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  <!--    <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
+    <div class="overflow-y-auto">
+        <template v-for="o in co.orders">
+          <chart-order :order="o"/>
+        </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {builderFuncs, useChartOrderStore} from "@/orderbuild.js";
+import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
+import {computed, onBeforeUnmount, ref} from "vue";
+import {useOrderStore, useStore} from "@/store/store.js";
+
+import {routeFinder} from "@/blockchain/route.js";
+import ChartOrder from "@/components/chart/ChartOrder.vue";
+import {useTheme} from "vuetify";
+import Toolbar from "@/components/chart/Toolbar.vue";
+import {Exchange, newOrder} from "@/blockchain/orderlib.js";
+import {pendOrder} from "@/blockchain/wallet.js";
+
+const s = useStore()
+const co = useChartOrderStore()
+const os = useOrderStore()
+
+function changeSymbol(symbol) {
+  console.log('changeSymbol', symbol)
+  os.tokenA = symbol.base
+  os.tokenB = symbol.quote
+  routeFinder.invoke()
+}
+
+
+addSymbolChangedCallback(changeSymbol)
+onBeforeUnmount(() => removeSymbolChangedCallback(changeSymbol) )
+
+
+const showCancel = ref(false)
+
+const theme = useTheme().current
+const orderColor = computed(()=>co.orders.length===0?null : co.orders[0].buy ? theme.value.colors.success:theme.value.colors.error)
+
+function cancelOrder() {
+  showCancel.value = true
+}
+
+async function placeOrder() {
+  const co = useChartOrderStore();
+  const chartOrders = co.orders;
+  const built = []
+  for (const chartOrder of chartOrders) {
+    console.log('chartOrder', chartOrder)
+    let tranches = []
+    for (const builder of chartOrder.builders) {
+      console.log('builder', builder)
+      const ts = builderFuncs[builder.id]()
+      console.log('tranches', ts)
+      tranches = [...tranches, ...ts]
+    }
+    // struct SwapOrder {
+    //     address tokenIn;
+    //     address tokenOut;
+    //     Route route;
+    //     uint256 amount;
+    //     uint256 minFillAmount;  // if a tranche has less than this amount available to fill, it is considered completed
+    //     bool amountIsInput;
+    //     bool outputDirectlyToOwner;
+    //     uint64 chainOrder; // use NO_CHAIN for no chaining. chainOrder index must be < than this order's index for safety (written first) and chainOrder state must be Template
+    //     Tranche[] tranches;
+    // }
+    const symbol = co.selectedSymbol
+    const fee = co.selectedPool[1]
+    const tokenIn = chartOrder.buy ^ symbol.inverted ? symbol.quote : symbol.base
+    const tokenOut = chartOrder.buy ^ symbol.inverted ? symbol.base : symbol.quote
+    const amountDec = chartOrder.amountIsTokenA ? symbol.base.d : symbol.quote.d
+    const amount = BigInt(Math.trunc(chartOrder.amount * 10 ** amountDec))
+    const amountIsInput = !!(chartOrder.amountIsTokenA ^ chartOrder.buy)
+    const order = newOrder(tokenIn.a, tokenOut.a, Exchange.UniswapV3, fee, amount, amountIsInput, tranches)
+    built.push(order)
+  }
+  co.built = built
+  console.log('place orders', built)
+  if (built.length !== 1) {
+    console.error('Multiple orders not supported')
+  }
+  else {
+    await pendOrder(built[0])
+  }
+}
+
+</script>
+
+<style lang="scss">
+body {
+  overflow-y: hidden;
+}
+.arrow {
+  font-size: 22px;
+}
+</style>