transaction placement dialog

src/components/LinePrice.vue

@@ -9,9 +9,9 @@
 
 <script setup>
 
-import PairPrice from "@/components/PairPrice.vue";
-import {computed} from "vue";
+import {computed, defineAsyncComponent} from "vue";
 import {useStore} from "@/store/store.js";
+const PairPrice = defineAsyncComponent(()=>import("@/components/PairPrice.vue"))
 
 const props = defineProps(['base', 'quote', 'm', 'b', 'isBreakout', 'showBtn', 'buy'])
 const s = useStore()

src/components/NativeWrap.vue

@@ -26,9 +26,8 @@
 <script setup>
 import {useStore} from "@/store/store";
 import {computed, ref} from "vue";
-import {vaultContract} from "@/blockchain/contract.js"
-import {pendTransaction} from "@/blockchain/wallet.js";
 import {FixedNumber} from "ethers";
+import {WrapTransaction} from "@/blockchain/transaction.js";
 
 const s = useStore()
 const props = defineProps(['modelValue', 'vault', 'maxAmount'])
@@ -45,10 +44,7 @@ function wrapNative() {
   if( amount === 0n )
     return
   console.log('pending wrap', valueStr, amount)
-  pendTransaction(async (signer)=>{
-    const vault = await vaultContract(vaultAddr, signer)
-    return await vault.wrap(amount)
-  })
+  new WrapTransaction(s.chainId, vaultAddr, amount).submit()
   floatAmount.value = 0
   emit('update:modelValue', false)
 }

src/components/Order.vue

@@ -26,7 +26,6 @@ import Amount from "@/components/Amount.vue"
 import {nav, SingletonCoroutine, vAutoSelect} from "@/misc.js";
 import {newOrder} from "@/blockchain/orderlib.js";
 import {FixedNumber} from "ethers";
-import {pendOrder} from "@/blockchain/wallet.js";
 import PairChoice from "@/components/PairChoice.vue";
 import NeedsSigner from "@/components/NeedsSigner.vue";
 import {useChartOrderStore} from "@/orderbuild.js";

src/components/PairPrice.vue

@@ -18,7 +18,6 @@ import {flipInversionPreference, inversionPreference} from "@/misc.js";
 const props = defineProps(['value', 'base', 'quote', 'showBtn'])
 
 const s = useStore()
-const prefs = usePrefStore()
 
 async function token(obj) {
   if (!obj) return null

src/components/Status.vue

@@ -71,10 +71,12 @@
         </suspense>
       </template>
       <template v-slot:item.state="{ item }">
+<!--
         <v-chip v-if="item.state===PendingOrderState.Submitted || item.state===PendingOrderState.Signing"
                 prepend-icon="mdi-signature">Wallet Signing</v-chip>
         <v-chip v-if="item.state===PendingOrderState.Rejected" prepend-icon="mdi-cancel">Rejected</v-chip>
         <v-chip v-if="item.state===PendingOrderState.Sent" prepend-icon="mdi-send">Sent</v-chip>
+-->
         <v-chip v-if="item.state===OrderState.Open" class="d-none d-lg-inline-flex" prepend-icon="mdi-dots-horizontal"
                 color="green">Open
         </v-chip>
@@ -176,7 +178,7 @@ import LinePrice from "@/components/LinePrice.vue";
 import {useStore} from "@/store/store";
 import {computed, defineAsyncComponent, onUnmounted, ref, watch} from "vue";
 import Btn from "@/components/Btn.vue"
-import {cancelOrder, PendingOrderState, useWalletStore} from "@/blockchain/wallet.js";
+import {cancelOrder, useWalletStore} from "@/blockchain/wallet.js";
 import {DISTANT_FUTURE, isOpen, OrderState} from "@/blockchain/orderlib.js";
 import Pulse from "@/components/Pulse.vue";
 import {OrderShapes} from "@/charts/ordershapes.js";

src/components/TokenRow.vue

@@ -15,7 +15,7 @@
         <v-list v-if="token">
           <v-list-subheader :title="token.s"/>
           <v-list-item title="Withdraw" key="withdraw" value="withdraw" prepend-icon="mdi-arrow-down-bold"
-          @click="()=>onWithdraw(token.a)"/>
+          @click="()=>onWithdraw(token)"/>
         </v-list>
       </v-menu>
     </td>

src/components/Vault.vue

@@ -34,10 +34,8 @@
       <v-card-item v-if="!empty">
         <v-table>
           <tbody>
-          <suspense>
-            <native-row v-if="nativeBalance" :chain-id="s.chainId" :addr="s.vault" :amount="nativeBalance"
-                        :on-withdraw="onWithdrawNative" :on-wrap="()=>wrapShow=true"/>
-          </suspense>
+          <native-row v-if="nativeBalance" :chain-id="s.chainId" :addr="s.vault" :amount="nativeBalance"
+                      :on-withdraw="onWithdrawNative" :on-wrap="()=>wrapShow=true"/>
           <suspense v-for="(amount,addr) of balances">
             <token-row v-if="BigInt(amount)!==0n" :chain-id="s.chainId" :addr="addr" :amount="amount" :onWithdraw="onWithdraw"/>
           </suspense>
@@ -65,7 +63,6 @@ import {vaultAddress} from "@/blockchain/contract.js";
 import {ensureVault, provider} from "@/blockchain/wallet.js";
 import CopyButton from "@/components/CopyButton.vue";
 import Withdraw from "@/components/Withdraw.vue";
-import {getToken} from "@/blockchain/token.js";
 import NativeRow from "@/components/NativeRow.vue";
 import NativeWrap from "@/components/NativeWrap.vue";
 import WithdrawNative from "@/components/WithdrawNative.vue";
@@ -91,8 +88,7 @@ const hasVault = computed(()=>s.vault!==null)
 
 const withdrawToken = ref(null)
 const withdrawShow = ref(false)
-async function onWithdraw(addr) {
-  const token = await getToken(s.chainId, addr)
+async function onWithdraw(token) {
   console.log('withdraw', addr, token)
   withdrawToken.value = token
   withdrawShow.value = true

src/components/Withdraw.vue

@@ -30,6 +30,7 @@ import {tokenFloat} from "@/misc.js";
 import {vaultContract} from "@/blockchain/contract.js"
 import {pendTransaction} from "@/blockchain/wallet.js";
 import {FixedNumber} from "ethers";
+import {WithdrawTransaction} from "@/blockchain/transaction.js";
 
 const s = useStore()
 const props = defineProps(['modelValue', 'vault', 'token'])
@@ -50,10 +51,7 @@ function withdraw() {
   if( amount === 0n )
     return
   console.log('pending withdrawal', valueStr, amount, props.token.s)
-  pendTransaction(async (signer)=>{
-    const vault = await vaultContract(vaultAddr, signer)
-    return await vault['withdraw(address,uint256)'](props.token.a, amount)
-  })
+  new WithdrawTransaction(s.chainId, vaultAddr, props.token, amount).submit()
   floatAmount.value = 0
   emit('update:modelValue', false)
 }

src/components/WithdrawNative.vue

@@ -26,9 +26,8 @@
 <script setup>
 import {useStore} from "@/store/store";
 import {computed, ref} from "vue";
-import {vaultContract} from "@/blockchain/contract.js"
-import {pendTransaction} from "@/blockchain/wallet.js";
 import {FixedNumber} from "ethers";
+import {WithdrawNativeTransaction} from "@/blockchain/transaction.js";
 
 const s = useStore()
 const props = defineProps(['modelValue', 'vault', 'balance'])
@@ -44,11 +43,7 @@ function withdraw() {
   console.log('pending native withdrawal', valueStr, amount)
   if( amount === 0n )
     return
-  pendTransaction(async (signer)=>{
-    const vault = await vaultContract(vaultAddr, signer)
-    console.log('invoking withdraw', vaultAddr, amount)
-    return await vault['withdraw(uint256)'](amount)
-  })
+  new WithdrawNativeTransaction(s.chainId, vaultAddr, amount).submit()
   floatAmount.value = 0
   emit('update:modelValue', false)
 }

src/components/chart/ChartPlaceOrder.vue

@@ -29,20 +29,21 @@
 <script setup>
 import {orderFuncs, useChartOrderStore} from "@/orderbuild.js";
 import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
-import {computed, onBeforeUnmount, ref} from "vue";
+import {computed, onBeforeUnmount, ref, toRaw, watchEffect} 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 {pendOrder} from "@/blockchain/wallet.js";
+import {useWalletStore} from "@/blockchain/wallet.js";
 import ToolbarPane from "@/components/chart/ToolbarPane.vue";
 import NeedsChart from "@/components/NeedsChart.vue";
-import {nav} from "@/misc.js";
+import {PlaceOrderTransaction} from "@/blockchain/transaction.js";
 
 const s = useStore()
 const co = useChartOrderStore()
 const os = useOrderStore()
+const ws = useWalletStore()
 
 function changeSymbol(symbol) {
   console.log('changeSymbol', symbol)
@@ -79,6 +80,32 @@ function cancelOrder() {
   showResetDialog.value = true
 }
 
+watchEffect(()=>{
+  const removable = []
+  for (const order of ws.pendingOrders) {
+    console.log('pend state', order.state)
+    switch (order.state) {
+      case PendingOrderState.Sent:
+        break
+      case PendingOrderState.Rejected:
+        removable.push(order)
+        break
+      case PendingOrderState.Signing:
+        break
+      case PendingOrderState.Submitted:
+        removable.push(order)
+        break
+      default:
+        console.error('unknown pend state', order.state)
+    }
+  }
+  if (removable.length>0) {
+    if (ws.pendingOrders.length!==removable.length)
+      console.error('Not all orders were rejected') // todo multiple orders / order group
+    ws.pendingOrders = []
+  }
+})
+
 
 async function placeOrder() {
   const chartOrders = co.orders;
@@ -90,13 +117,11 @@ async function placeOrder() {
     built.push(order)
   }
   console.log('place orders', built)
-  if (built.length !== 1) {
-    console.error('Multiple orders not supported')
+  if (ws.transaction!==null) {
+    console.error('Transaction already in progress')
   }
   else {
-    await pendOrder(built[0])
-    co.resetOrders()
-    nav('Status')
+    new PlaceOrderTransaction(s.chainId, toRaw(built[0])).submit()
   }
 }
 

src/components/chart/Toolbar.vue

@@ -9,27 +9,18 @@
       <toolbar-button tooltip="Assets" icon="mdi-currency-btc" route="Assets"/>
       <!-- mdi-format-list-checks mdi-format-list-bulleted-square -->
       <toolbar-button tooltip="Status" icon="mdi-format-list-checks" route="Status"/>
-      <v-btn variant="text" icon="mdi-help-circle-outline" text="Info" @click="showCorp"></v-btn>
+      <v-btn variant="text" icon="mdi-information-outline" text="Info" @click="showCorp"></v-btn>
     </div>
   </div>
 </template>
 
 <script setup>
-import {useStore} from "@/store/store.js";
-import {useChartOrderStore} from "@/orderbuild.js";
-import {useTheme} from "vuetify";
 import ToolbarButton from "@/components/chart/ToolbarButton.vue";
-import beta from "@/components/Beta.vue";
 import Logo from "@/components/Logo.vue";
 import {nav} from "@/misc.js";
 
 const props = defineProps(['title', 'icon'])
 
-const s = useStore()
-const co = useChartOrderStore()
-
-const theme = useTheme().current
-
 function showCorp() {
   window.open('https://dexorder.trade/', 'dexorder')
 }