orders view fixes

src/components/LinePrice.vue

@@ -0,0 +1,34 @@
+<template>
+  <span v-if="b||m">
+    {{description}}
+    <suspense>
+      <pair-price :base="base" :quote="quote" :value="price" :show-btn="showBtn"/>
+    </suspense>
+  </span>
+</template>
+
+<script setup>
+
+import PairPrice from "@/components/PairPrice.vue";
+import {computed} from "vue";
+import {useStore} from "@/store/store.js";
+
+const props = defineProps(['base', 'quote', 'm', 'b', 'isMin', 'showBtn', 'buy'])
+const s = useStore()
+
+
+const price = computed(()=>props.m === 0 ? props.b : props.b + props.m * s.clock)
+
+const description = computed(()=>{
+  // console.log('tranche line', isMin, b, m)
+  if( props.m !== 0 )
+    return 'diagonal'
+  return props.isMin === props.buy ? 'dont-chase' : 'limit'
+})
+
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/Orders.vue

@@ -40,7 +40,9 @@
       </template>
 -->
       <template v-slot:item.avg="{ item }">
-        <pair-price :base-addr="item.order.tokenIn" :quote-addr="item.order.tokenOut" :value="item.avg" :show-btn="true"/>
+        <suspense>
+          <pair-price :base="item.order.tokenIn" :quote="item.order.tokenOut" :value="item.avg" :show-btn="true"/>
+        </suspense>
       </template>
       <template v-slot:item.state="{ item }">
         <v-chip v-if="item.state===PendingOrderState.Submitted || item.state===PendingOrderState.Signing"
@@ -100,8 +102,12 @@
                 <td class="text-left">
                   <span class="mx-3">{{ describeTrancheTime(item, true, t) }}</span>
                   <span class="mx-3">{{ describeTrancheTime(item, false, t) }}</span>
-                  <span class="mx-3">{{ describeTrancheLine(item, true, t.minIntercept, t.minSlope) }}</span>
+                  <line-price class="mx-3" :base="item.token0" :quote="item.token1"
-                  <span class="mx-3">{{ describeTrancheLine(item, false, t.maxIntercept, t.maxSlope) }}</span>
+                              :b="t.minIntercept" :m="t.minSlope" :is-min="true"
+                              :buy="item.order.tokenIn===item.token1" :show-btn="true"/>
+                  <line-price class="mx-3" :base="item.token0" :quote="item.token1"
+                              :b="t.maxIntercept" :m="t.maxSlope" :is-min="false"
+                              :buy="item.order.tokenIn===item.token1" :show-btn="true"/>
                 </td>
               </tr>
               </tbody>
@@ -115,6 +121,11 @@
 </template>
 
 <script setup>
+import LinePrice from "@/components/LinePrice.vue";
+
+const PairPrice = defineAsyncComponent(()=>import("@/components/PairPrice.vue"))
+const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
+const TokenSymbol = defineAsyncComponent(()=>import('./TokenSymbol.vue'))
 import {FixedNumber} from "ethers";
 import {useStore} from "@/store/store";
 import {computed, defineAsyncComponent, ref} from "vue";
@@ -122,11 +133,6 @@ import Btn from "@/components/Btn.vue"
 import {cancelAll, cancelOrder, PendingOrderState, useWalletStore} from "@/blockchain/wallet.js";
 import {dateString, pairPriceAddr} from "@/misc.js";
 import {isOpen, OrderState} from "@/blockchain/orderlib.js";
-import NewOrder from "@/components/NewOrder.vue";
-import PairPrice from "@/components/PairPrice.vue";
-
-const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
-const TokenSymbol = defineAsyncComponent(()=>import('./TokenSymbol.vue'))
 
 const s = useStore()
 const ws = useWalletStore()
@@ -226,8 +232,6 @@ const orders = computed(()=>{
       else {
         st.avg = FixedNumber.fromValue(status.filledOut, 0, fmtX18)
             .div(FixedNumber.fromValue(status.filledIn, 0, fmtX18)).toUnsafeFloat();
-        if( o.tokenIn > o.tokenOut )
-          st.avg = 1/st.avg
       }
       st.trancheFilled = o.amountIsInput ? st.trancheFilledIn : st.trancheFilledOut
       st.amountToken = o.amountIsInput ? o.tokenIn : o.tokenOut
@@ -235,6 +239,8 @@ const orders = computed(()=>{
       st.output = !o.amountIsInput ? o.amount : 0
       st.remaining = o.amount - st.filled
       st.selectable = st.state===OrderState.Open
+      st.token0 = o.tokenIn < o.tokenOut ? o.tokenIn : o.tokenOut
+      st.token1 = o.tokenIn < o.tokenOut ? o.tokenOut : o.tokenIn
     }
   }
   console.log('orders', result)
@@ -258,22 +264,6 @@ function describeTrancheTime(st, isStart, t) {
   return result
 }
 
-function describeTrancheLine(st, isMin, b, m) {
-  // todo make this a PairPrice
-  if( b===0 && m===0 ) return ''
-  const chainId = useStore().chainId
-  // console.log('tranche line', isMin, b, m)
-  const inverted = st.order.tokenIn > st.order.tokenOut
-  const t0 = inverted ? st.order.tokenIn : st.order.tokenOut
-  const t1 = !inverted ? st.order.tokenIn : st.order.tokenOut
-  if( m !== 0 ) {
-    const limit = b + m * s.clock
-    const price = pairPriceAddr(chainId, t0, t1, limit);
-    return 'diagonal ' + (price === null ? null : price.toPrecision(5))
-  }
-  const price = pairPriceAddr(chainId, t0, t1, b)
-  return (isMin === st.order.amountIsInput ? 'dont-chase ' : 'limit ') + (price === null ? null : price.toPrecision(5))
-}
 
 </script>
 

src/components/PairPrice.vue

@@ -1,7 +1,10 @@
 <template>
   <span>
-    {{adjValue}}
+    {{adjValue === null ? '' : adjValue.toPrecision(5)}}
-    <btn v-if="showBtn && adjValue!==null" size="small" variant="plain" @click="invert()">{{pair.value?pair.value.toPrecision(5):''}}</btn>
+    <v-btn v-if="showBtn && adjValue!==null" size="small" variant="text" class="ml-0 px-0"
+         @click="flipInversionPreference(s.chainId, base, quote)">
+      {{pair}}
+    </v-btn>
   </span>
   <!--  todo optional pair label and inversion button -->
 </template>
@@ -9,30 +12,25 @@
 <script setup>
 import {usePrefStore, useStore} from "@/store/store";
 import {computed} from "vue";
-import {token} from "@/blockchain/token.js";
+import {getToken} from "@/blockchain/token.js";
-import {pairKey, pairPrice} from "@/misc.js";
+import {flipInversionPreference, inversionPreference, pairPrice} from "@/misc.js";
-import Btn from "@/components/Btn.vue";
 
-const props = defineProps(['value', 'baseToken', 'quoteToken', 'baseAddr', 'quoteAddr', 'showBtn', 'decimals'])
+const props = defineProps(['value', 'base', 'quote', 'showBtn'])
 
 const s = useStore()
 const prefs = usePrefStore()
 
-const base = computed(() => props.baseToken ? props.baseToken : token(s.chainId, props.baseAddr))
+async function token(obj) {
-const quote = computed(() => props.quoteToken ? props.quoteToken : token(s.chainId, props.quoteAddr))
+  return obj.a ? obj : await getToken(s.chainId, obj)
-
-function invert() {
-  const k = pairKey(base.value,quote.value)
-  prefs.inverted[k] = !prefs.inverted[k]
 }
 
-const adjValue = computed(() => props.value === null || props.value === undefined || !base.value || !quote.value ? null : pairPrice(s.chainId, base.value, quote.value, props.value, props.decimals))
+const base = await token(props.base)
+const quote = await token(props.quote)
+
+const adjValue = computed(() => props.value === null || props.value === undefined ? null : pairPrice(s.chainId, base, quote, props.value))
 
 const pair = computed(() => {
-  const inToken = props.baseToken ? props.baseToken : token(s.chainId, props.baseAddr)
+  return inversionPreference(s.chainId, base, quote) ? quote.s + '/' + base.s : base.s + '/' + quote.s
-  const outToken = props.quoteToken ? props.quoteToken : token(s.chainId, props.quoteAddr)
-  return !inToken || !outToken ? '___\\___' : prefs.inverted[pairKey(s.chainId, inToken, outToken)] ?
-      outToken.symbol + '\\' + inToken.symbol : inToken.symbol + '\\' + outToken.symbol
 })
 
 

src/misc.js

@@ -3,6 +3,19 @@ import {usePrefStore, useStore} from "@/store/store.js";
 import {token} from "@/blockchain/token.js";
 import Color from "color";
 
+const QUOTE_SYMBOLS = [
+    // in order of preference
+    // todo put this in metadata.json using addrs
+    'USDT',
+    'USDC',
+    'USDC.e',
+    'BTC',
+    'WBTC',
+    'ETH',
+    'WETH',
+    'ARB',
+]
+
 export class SingletonCoroutine {
     constructor(f, delay = 10) {
         this.f = f
@@ -106,24 +119,44 @@ export function pairPriceAddr(chainId, baseTokenAddr, quoteTokenAddr, price) {
 }
 
 
-export function pairPrice(chainId, baseToken, quoteToken, price, decimals = null) {
+export function flipInversionPreference(chainId, base, quote) {
+    const k = pairKey(chainId, base, quote)
+    const prefs = usePrefStore()
+    prefs.inverted[k] = !prefs.inverted[k]
+}
+
+
+export function inversionPreference(chainId, base, quote) {
+    // returns the user preference for whether to invert this pair or not
+    const invertedKey = pairKey(chainId, base, quote);
+    const prefs = usePrefStore()
+    if (!(invertedKey in prefs.inverted)) {
+        // todo prefer stablecoins as the quote asset
+        let inverted = false;
+        for (const q of QUOTE_SYMBOLS) {
+            if (quote.s === q)
+                break // definitely not inverted
+            if (base.s === q) {
+                inverted = true
+                break // definitely inverted
+            }
+        }
+        prefs.inverted[invertedKey] = inverted
+    }
+    return prefs.inverted[invertedKey]
+}
+
+
+export function pairPrice(chainId, baseToken, quoteToken, price) {
     // console.warn('pairPrice', chainId, baseToken, quoteToken, price, decimals)
-    if (!price) return null
     if (price === null || price === undefined)
-        return price
+        return null
-    if (decimals === null)
+    const decimals = quoteToken.d - baseToken.d
-        decimals = baseToken.d - quoteToken.d
     if (decimals >= 0)
         price /= 10 ** decimals
     else
         price *= 10 ** -decimals
-    const invertedKey = pairKey(chainId, baseToken, quoteToken);
+    if (inversionPreference(chainId, baseToken, quoteToken))
-    const prefs = usePrefStore()
-    if (!(invertedKey in prefs.inverted)) {
-        // todo prefer stablecoins as the quote asset
-        prefs.inverted[invertedKey] = false
-    }
-    if (prefs.inverted[invertedKey])
         price = 1 / price
     return price
 }