improved order statuses

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('order status', status)
-    // [index, symbolA, symbolB, amount, amountSymbol, filled]
-    const inTokenAddr = status[0][0]
-    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))
-    result.push([index, inTokenAddr, outTokenAddr, amount, amountTokenAddr, filled, avg])
+  console.log('computing orders')
+  // for( const [status] of pendingOrders.reverse() ) {
+  //   console.log('adding pended order')
+  //   const inTokenAddr = status[0]
+  //   const outTokenAddr = status[1]
+  //   const amountIsInput = !!(status[4])
+  //   const amountTokenAddr = amountIsInput ? inTokenAddr : outTokenAddr
+  //   const amount = 0
+  //   const filled = 0
+  //   const avg = ''
+  //   const state = -1 // pending
+  //   result.push(['...', inTokenAddr, outTokenAddr, amount, amountTokenAddr, filled, avg, state])
+  // }
+  if( vaultAddr.value in s.orders ) {
+    for (const [index, status] of Object.entries(s.orders[vaultAddr.value]).reverse()) {
+      console.log('order status', status)
+      // [index, symbolA, symbolB, amount, amountSymbol, filled]
+      const inTokenAddr = status[0][0]
+      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>