improved order statuses

src/blockchain/contract.js

@@ -36,9 +36,7 @@ export async function poolContract(addr) {
     return contractOrNull(addr, uniswapV3PoolAbi, s.provider)
 }
 
-export async function vaultContract(num, signer) {
+export async function vaultContract(owner, num, provider) {
-    const s = useStore()
+    const addr = vaultAddress(owner, num)
-    if( num >= s.vaults.length )
+    return new ethers.Contract(addr, vaultAbi, provider)
-        return null
-    return contractOrNull(s.vaults[num], vaultAbi, signer)
 }

src/blockchain/wallet.js

@@ -1,7 +1,7 @@
 import {ethers} from "ethers";
 import {setProvider, useStore} from "@/store/store";
 import {socket} from "@/socket.js";
-import {contractOrNull} from "@/blockchain/contract.js";
+import {contractOrNull, vaultAddress} from "@/blockchain/contract.js";
 import {vaultAbi} from "@/blockchain/abi.js";
 
 
@@ -29,6 +29,14 @@ function changeAccounts(accounts) {
   else {
     const store = useStore()
     store.account = accounts[0].address
+    if( pendingOrders.length ) {
+      if( store.vault )
+        flushOrders()
+      else
+        ensureVault()
+    }
+    else
+      discoverVaults()
     flushTransactions()
     socket.emit('address', store.chainId, accounts[0].address)
   }
@@ -86,7 +94,39 @@ export async function connectWallet() {
   await s.provider.getSigner()
 }
 
-const pendingOrders = []
+let pendingOrders = []
+
+
+function discoverVaults() {
+  const s = useStore()
+  const owner = s.account
+  _discoverVaults(owner).then((result)=>{
+    if( s.account === owner ) { // double-check the account since it could have changed during our await
+      s.vaults = result
+      if( result.length && pendingOrders.length )
+        flushOrders(result[0])
+    }
+  })
+}
+
+async function _discoverVaults(owner) {
+  const result = []
+  // todo multi-vault scan
+  const addr = vaultAddress(owner, 0)
+  const s = useStore()
+  const vault = new ethers.Contract(addr, vaultAbi, s.provider)
+  let version = -1
+  try {
+    version = await vault.version();
+    if( version === 1 )
+      result.push(addr)
+    else
+      console.error(`bad vault version ${version}`)
+  }
+  catch (e) {
+  }
+  return result
+}
 
 
 export function ensureVault() {
@@ -120,6 +160,8 @@ export async function pendOrder(order) {
 export function flushOrders(vault) {
   for( const order of pendingOrders )
     pendOrderAsTransaction(vault, order)
+  pendingOrders = []
+  flushTransactions()
 }
 
 

src/components/Faucet.vue

@@ -1,7 +1,7 @@
 <template>
   <phone-card v-if="s.mockenv && s.vault">
     <v-card-title><v-icon icon="mdi-faucet"/>&nbsp;Mock Coin Faucet</v-card-title>
-    <v-card-text>Mockchain provides infinite amounts of MOCK (Mockcoin) and USD (Universally Stable Denomination) for your vault. Click the button below to get a million of each: </v-card-text>
+    <v-card-text>The Dexorder testnet provides infinite amounts of MEH (Mock Ethernet Hardfork) and USXD (Joke Currency XD) for your vault. Click the button below to get a million of each: </v-card-text>
     <v-card-item>
       <v-table plain>
         <tbody>

src/components/NeedsSigner.vue

@@ -22,7 +22,7 @@ import {connectWallet} from "@/blockchain/wallet.js";
 
 const s = useStore()
 
-const ok = computed(()=>s.address!==null)
+const ok = computed(()=>s.account!==null)
 
 </script>
 

src/components/Orders.vue

@@ -9,11 +9,12 @@
         <th>Filled</th>
         <th>Remaining</th>
         <th>Average Price</th>
+        <th>Status</th>
         <th>&nbsp;</th> <!-- actions -->
       </tr>
     </thead>
     <tbody>
-      <tr v-for="[index, inTokenAddr, outTokenAddr, amount, amountTokenAddr, filled, avgPrice] in orders">
+      <tr v-for="[index, inTokenAddr, outTokenAddr, amount, amountTokenAddr, filled, avgPrice, state] in orders">
         <td>{{parseInt(index)+1}}</td>
         <td>{{tokenSymbol(inTokenAddr)}}</td>
         <td>{{tokenSymbol(outTokenAddr)}}</td>
@@ -27,6 +28,13 @@
             {{pair(inTokenAddr, outTokenAddr, vaultAddr,index)}}
           </btn>
         </td>
+        <td>
+          <v-chip v-if="state===-1" prepend-icon="mdi-signature" color="yellow">Signing</v-chip>
+          <v-chip v-if="state===0" prepend-icon="mdi-dots-horizontal" color="green">Open</v-chip>
+          <v-chip v-if="state===1" prepend-icon="mdi-close" color="red">Canceled</v-chip>
+          <v-chip v-if="state===2" prepend-icon="mdi-check-circle-outline" color="green">Completed</v-chip>
+          <v-chip v-if="state===3" prepend-icon="mdi-progress-check" color="grey-darken-1">Expired</v-chip>
+        </td>
       </tr>
     </tbody>
   </v-table>
@@ -87,32 +95,46 @@ function pair(inTokenAddr, outTokenAddr, vaultAddr, index) {
   const inToken = token(inTokenAddr)
   const outToken = token(outTokenAddr)
   return !inToken || !outToken ? null : inverted[[vaultAddr,index]] ?
-      outToken.symbol+'/'+inToken.symbol : inToken.symbol+'/'+outToken.symbol
+      outToken.symbol+'\\'+inToken.symbol : inToken.symbol+'\\'+outToken.symbol
 }
 
 const orders = computed(()=>{
-  if( !(vaultAddr.value in s.orders) )
-    return {}
   const result = []
-  for( const [index,status] of Object.entries(s.orders[vaultAddr.value]) ) {
+  console.log('computing orders')
-    console.log('order status', status)
+  // for( const [status] of pendingOrders.reverse() ) {
-    // [index, symbolA, symbolB, amount, amountSymbol, filled]
+  //   console.log('adding pended order')
-    const inTokenAddr = status[0][0]
+  //   const inTokenAddr = status[0]
-    const outTokenAddr = status[0][1]
+  //   const outTokenAddr = status[1]
-    const amountIsInput = !!(status[0][4])
+  //   const amountIsInput = !!(status[4])
-    const amountTokenAddr = amountIsInput ? inTokenAddr : outTokenAddr
+  //   const amountTokenAddr = amountIsInput ? inTokenAddr : outTokenAddr
-    console.log('getamount', status[0][3])
+  //   const amount = 0
-    const amount = status[0][3]
+  //   const filled = 0
-    console.log('amount', amount)
+  //   const avg = ''
-    console.log('getfilled', amountIsInput ? status[4] : status[5])
+  //   const state = -1 // pending
-    const filled = amountIsInput ? status[4] : status[5]
+  //   result.push(['...', inTokenAddr, outTokenAddr, amount, amountTokenAddr, filled, avg, state])
-    console.log('filled', filled)
+  // }
-    const amountIn = BigInt(status[4])
+  if( vaultAddr.value in s.orders ) {
-    const amountOut = BigInt(status[5])
+    for (const [index, status] of Object.entries(s.orders[vaultAddr.value]).reverse()) {
-    const fmtX18 = {decimals:18, width: 256, signed:false};
+      console.log('order status', status)
-    const avg = !amountIn || !amountOut ? null :
+      // [index, symbolA, symbolB, amount, amountSymbol, filled]
-        FixedNumber.fromValue(status[5],0, fmtX18).div(FixedNumber.fromValue(status[4], 0, fmtX18))
+      const inTokenAddr = status[0][0]
-    result.push([index, inTokenAddr, outTokenAddr, amount, amountTokenAddr, filled, avg])
+      const outTokenAddr = status[0][1]
+      const amountIsInput = !!(status[0][4])
+      const amountTokenAddr = amountIsInput ? inTokenAddr : outTokenAddr
+      console.log('getamount', status[0][3])
+      const amount = status[0][3]
+      console.log('amount', amount)
+      console.log('getfilled', amountIsInput ? status[4] : status[5])
+      const filled = amountIsInput ? status[4] : status[5]
+      console.log('filled', filled)
+      const amountIn = BigInt(status[4])
+      const amountOut = BigInt(status[5])
+      const fmtX18 = {decimals: 18, width: 256, signed: false};
+      const avg = !amountIn || !amountOut ? null :
+          FixedNumber.fromValue(status[5], 0, fmtX18).div(FixedNumber.fromValue(status[4], 0, fmtX18))
+      const state = status[1]
+      result.push([index, inTokenAddr, outTokenAddr, amount, amountTokenAddr, filled, avg, state])
+    }
   }
   console.log('result', result)
   return result

src/components/TimedOrderEntry.vue

@@ -80,7 +80,7 @@
 
       <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="!validOrder" @click="placeOrder">Place Order</v-btn>
+        <v-btn variant="flat" color="green" :disabled="!validOrder" @click="placeOrder">Place Dexorder</v-btn>
       </v-card-actions>
     </phone-card>
   </needs-provider>
@@ -99,6 +99,7 @@ import {pendOrder} from "@/blockchain/wallet.js";
 import NeedsProvider from "@/components/NeedsProvider.vue";
 import {findRoute} from "@/blockchain/route.js";
 import RoutePrice from "@/components/RoutePrice.vue";
+import router from "@/router/index.js";
 
 const s = useStore()
 const buy = ref(false)
@@ -127,7 +128,7 @@ const tokenB = computed({
   }
 })
 
-const pairSymbol = computed(()=>base.value?.symbol+'/'+quote.value?.symbol)
+const pairSymbol = computed(()=>base.value?.symbol+'\\'+quote.value?.symbol)
 const base = computed(()=>{
   const token = inverted.value ? _tokenB.value : _tokenA.value
   return !token?{}:token
@@ -159,10 +160,10 @@ function routeInverted(route) {
 const minPrice = ref(null)
 const maxPrice = ref(null)
 const limitPrice = ref(null)
-const interval = ref(10)
+const interval = ref(1)
 const intervalIsTotal = ref(true)
 const timeUnits = ['minutes', 'hours', 'days']
-const timeUnitIndex = ref(1)
+const timeUnitIndex = ref(0)
 const limitIsMinimum = computed(() => !(buy.value ^ inverted.value))
 const validOrder = computed(()=>amount.value > 0 && routes.value.length > 0 )
 
@@ -292,6 +293,7 @@ function placeOrder() {
   }
   const order = newOrder(tokenIn, tokenOut, route.exchange, route.fee, amt, amountIsInput, ts)
   pendOrder(order)
+  router.push('/orders')
 }
 
 </script>

src/components/Vault.vue

@@ -1,5 +1,4 @@
 <template>
-  <needs-provider>
   <!-- todo we can use something like this for ethereum where the vault creation is too expensive to subsidize
     <PhoneCard v-if="s.vault===null || s.vault.length === 0">
       <v-card-title><v-icon color="warning" icon="mdi-safe-square-outline"/>&nbsp;Setup&nbsp;Vault</v-card-title>
@@ -76,7 +75,6 @@
       exists {{ exists }}<br/>
     </div>
 -->
-  </needs-provider>
 </template>
 
 <script setup>

src/views/OrdersView.vue

@@ -2,6 +2,7 @@
   <needs-provider>
     <needs-signer>
       <orders/>
+      <btn icon="mdi-plus" color="green" class="mt-6" @click="$router.push('/twap')">New Order</btn>
     </needs-signer>
   </needs-provider>
 </template>
@@ -10,6 +11,7 @@
 import Orders from "@/components/Orders.vue";
 import NeedsSigner from "@/components/NeedsSigner.vue";
 import NeedsProvider from "@/components/NeedsProvider.vue";
+import Btn from "@/components/Btn.vue";
 </script>
 
 <style scoped lang="scss">

src/views/VaultView.vue

@@ -11,6 +11,7 @@ import {useStore} from "@/store/store";
 import Vault from "@/components/Vault.vue";
 import NeedsSigner from "@/components/NeedsSigner.vue";
 import Faucet from "@/components/Faucet.vue";
+import NeedsProvider from "@/components/NeedsProvider.vue";
 
 const s = useStore()