denormalized PairEntry, cleaned up console logs

src/blockchain/wallet.js

@@ -5,14 +5,14 @@ export let provider = null
 
 function onChainChanged(chainId) {
   chainId = Number(chainId)
-  console.log('chain changed', chainId)
+  // console.log('chain changed', chainId)
   const store = useStore()
   store.chainId = chainId
   provider = new ethers.BrowserProvider(window.ethereum, chainId)
 }
 
 function onAccountsChanged(accounts) {
-  console.log('accounts changed', accounts)
+  // console.log('accounts changed', accounts)
   const store = useStore()
   if( accounts.length === 0 ) {
     store.account = null
@@ -47,12 +47,12 @@ const errorHandlingProxy = {
           if( x.code === 'NETWORK_ERROR' ) {
             // todo available chain names
             // store.error('Wrong Blockchain', 'Your wallet is connected to a different blockchain. Please select Arbitrum in your wallet.') // todo hardcoded arb
-            console.log('wallet chain error', x)
+            console.error('wallet chain error', x)
             // store.chainId = store.chainInfo[]
             throw x
           }
           else {
-            console.log('wallet error')
+            console.error('wallet error')
             throw x
           }
         }

src/components/Alerts.vue

@@ -5,7 +5,6 @@
 <script setup>
 import {useStore} from "@/store/store";
 const s = useStore()
-console.log('errors', s.errors)
 </script>
 
 <style scoped lang="scss">

src/components/PairEntry.vue

@@ -1,77 +0,0 @@
-<template>
-  <token-choice v-model="tokenA" class="token-choice mb-1">
-    <template v-slot:prepend>
-      <v-btn :text="buy ? 'Buy' : 'Sell'" :color="buy ? 'green' : 'red'"
-             variant="outlined" @click="buy=!buy" class="bs-button"/>
-    </template>
-  </token-choice>
-  <token-choice v-model="tokenB" class="token-choice">
-    <template v-slot:prepend>
-      <v-btn :text="!buy ? 'Buy' : 'Sell'" :color="!buy ? 'green' : 'red'"
-             variant="outlined" @click="buy=!buy" class="bs-button"/>
-    </template>
-  </token-choice>
-</template>
-
-<script setup>
-import {useStore} from "@/store/store";
-import TokenChoice from "@/components/TokenChoice.vue";
-import {computed} from "vue";
-
-const s = useStore()
-
-// { tokenA, tokenB, buy }
-// tokens may be undefined if not selected
-const props = defineProps(['modelValue'])
-const emit = defineEmits(['update:modelValue'])
-
-console.log('PairEntry setup', props.modelValue)
-
-if((!props.modelValue || !props.modelValue.tokenA) && s.tokens && s.tokens.length >= 1)
-  set('tokenA', s.tokens[0])
-if((!props.modelValue || !props.modelValue.tokenB) && s.tokens && s.tokens.length >= 2)
-  set('tokenB', s.tokens[1])
-
-function set(k,v) {
-  const newModel = {}
-  if(props.modelValue)
-    Object.assign(newModel, props.modelValue);
-  newModel[k] = v
-  console.log('set', k, v, props.modelValue, newModel)
-  emit('update:modelValue', newModel)
-}
-
-function tokenComputer(attr, index) {
-  return {
-    get() {
-      return !props.modelValue || !props.modelValue[attr] ? null : props.modelValue[attr]
-    },
-    set(value) {
-      set(attr,value)
-    }
-  }
-}
-
-const tokenA = computed(tokenComputer('tokenA', 0))
-const tokenB = computed(tokenComputer('tokenB', 1))
-const buy = computed({
-  get() {
-    !props.modelValue ? true : props.modelValue.buy
-  },
-  set(value) {
-    set('buy',value)
-  }
-})
-
-</script>
-
-<style scoped lang="scss">
-@use "src/styles/vars" as *;
-.token-choice {
-  width: 16em;
-}
-.bs-button {
-  width: 6em;
-}
-
-</style>

src/components/TimedOrderEntry.vue

@@ -5,7 +5,18 @@
       <v-card-subtitle>Split order across time</v-card-subtitle>
       <v-card-text>
 
-        <pair-entry v-model="pair"/>
+        <token-choice v-model="tokenA" class="token-choice mb-1">
+          <template v-slot:prepend>
+            <v-btn :text="buy ? 'Buy' : 'Sell'" :color="buy ? 'green' : 'red'"
+                   variant="outlined" @click="buy=!buy" class="bs-button"/>
+          </template>
+        </token-choice>
+        <token-choice v-model="tokenB" class="token-choice">
+          <template v-slot:prepend>
+            <v-btn :text="!buy ? 'Buy' : 'Sell'" :color="!buy ? 'green' : 'red'"
+                   variant="outlined" @click="buy=!buy" class="bs-button"/>
+          </template>
+        </token-choice>
 
         <v-chip v-for="r in routes" variant="text">
           {{ s.chain.name }}
@@ -18,28 +29,28 @@
           <v-progress-circular indeterminate/> Searching for {{pairSymbol}} pools...
         </div>
 
-        <v-alert v-if="routes.length===0 && !routeFinder.pending()" text="No pool found!" type=""/>
+        <v-alert v-if="routes.length===0 && !routeFinder.pending()" text="No pool found!"/>
 
         <div v-if="routes.length">
           <v-text-field label='Amount' type="number" step="1" variant="outlined" aria-valuemin="0" min="0"
-                        :model-value="amount" :rules="[validateRequired,validateAmount]">
+                        v-model="amount" :rules="[validateRequired,validateAmount]" v-auto-select>
             <template v-slot:append-inner>
               <v-btn @click="amountIsBase=!amountIsBase" variant="outlined" class="mr-2">
-                {{ amountIsBase ? pair.tokenA.symbol : pair.tokenB.symbol }}
+                {{ amountIsBase ? tokenA.symbol : tokenB.symbol }}
               </v-btn>
               <v-btn :text="amountIsTotal ? 'total' : 'per tranche'" variant="outlined"
                      @click="amountIsTotal=!amountIsTotal" class="total"/>
             </template>
           </v-text-field>
           <v-text-field label="Tranches" type="number" variant="outlined" aria-valuemin="1" min="1" max="255"
-                        :model-value="tranches" :rules="[validateRequired,validateTranches]">
+                        :model-value="tranches" :rules="[validateRequired,validateTranches]" v-auto-select>
             <!--        <template v-slot:prepend-inner>-->
             <!--          <div>{{ amountIsTotal ? 'Split into' : 'Times' }}</div>-->
             <!--        </template>-->
             <template v-slot:append-inner>tranches</template>
           </v-text-field>
           <v-text-field type="number" variant="outlined" :min="1" v-model="interval" class="interval"
-                        :label="intervalIsTotal ? 'Completion time' : 'Time between tranches'">
+                        :label="intervalIsTotal ? 'Completion time' : 'Time between tranches'" v-auto-select>
             <!--        <template v-slot:append>APART</template>-->
             <template v-slot:prepend-inner>
               <v-btn variant="outlined" :text="intervalIsTotal ? 'Within' : 'Spaced apart'" class="within mr-2"
@@ -51,40 +62,20 @@
           </v-text-field>
           <v-text-field v-model="limitPrice" :label="(limitIsMinimum?'Minimum':'Maximum')+' Price'" type="number"
                         variant="outlined" aria-valuemin="0" min="0"
-                        clearable :rules="[validateAmount, validateMin]">
+                        clearable :rules="[validateAmount, validateMin]" v-auto-select>
             <template v-slot:append-inner>
               <v-btn variant="outlined" @click="inverted=!inverted">
-                {{
+                {{pairSymbol}}
-                  inverted ? pair.tokenB.symbol + '/' + pair.tokenA.symbol : pair.tokenA.symbol + '/' + pair.tokenB.symbol
-                }}
               </v-btn>
             </template>
           </v-text-field>
-          <!--
-                <v-text-field v-model="minPrice" label="Minimum Price" type="number" variant="outlined" aria-valuemin="0" min="0"
-                              clearable :rules="[validateAmount, validateMin]">
-                  <template v-slot:append-inner>
-                    <v-btn variant="outlined" @click="inverted=!inverted">
-                      {{ inverted ? pair.tokenB.symbol + '/' + pair.tokenA.symbol : pair.tokenA.symbol + '/' + pair.tokenB.symbol }}
-                    </v-btn>
-                  </template>
-                </v-text-field>
-                <v-text-field v-model="maxPrice" label="Maximum Price" type="number" variant="outlined" aria-valuemin="0" min="0"
-                              clearable :rules="[validateAmount, validateMax]">
-                  <template v-slot:append-inner>
-                    <v-btn variant="outlined" @click="inverted=!inverted">
-                      {{ inverted ? pair.tokenB.symbol + '/' + pair.tokenA.symbol : pair.tokenA.symbol + '/' + pair.tokenB.symbol }}
-                    </v-btn>
-                  </template>
-                </v-text-field>
-          -->
         </div>
 
       </v-card-text>
 
       <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="!routes.length">Place Order</v-btn>
+        <v-btn variant="flat" color="green" :disabled="!validOrder">Place Order</v-btn>
       </v-card-actions>
     </PhoneCard>
   </NeedsQueryHelper>
@@ -93,33 +84,52 @@
 <script setup>
 import {useStore} from "@/store/store";
 import {computed, ref} from "vue";
-import PairEntry from "@/components/PairEntry.vue";
+import TokenChoice from "@/components/TokenChoice.vue"
 import PhoneCard from "@/components/PhoneCard.vue";
 import {queryHelperContract} from "@/blockchain/contract.js";
 import {SingletonCoroutine} from "@/misc.js";
 import NeedsQueryHelper from "@/components/NeedsQueryHelper.vue";
+// noinspection ES6UnusedImports
+import {vAutoSelect} from "@/misc.js";
 
 const s = useStore()
-// pair is computed to allow for dynamic computation of a default value based on current chainId
+const buy = ref(false)
-const _pair = ref({buy:true})
+let _tokenA = ref(s.tokens && s.tokens.length >= 1 ? s.tokens[0] : null)
-const pair = computed({
+let _tokenB = ref(s.tokens && s.tokens.length >= 2 ? s.tokens[1] : null)
+const tokenA = computed({
   get() {
-    console.log('te getpair',_pair.value)
+    return _tokenA.value
-    return _pair.value
   },
   set(value) {
-    console.log('set pair',value)
+    if( !_tokenA.value || _tokenA.value.address !== value.address ) {
-    _pair.value = value
+      _tokenA.value = value
-    routes.value = []
       routeFinder.invoke()
     }
+  }
 })
-const pairSelected = computed(()=>_pair.value.tokenA && _pair.value.tokenB && routes.value)
+const tokenB = computed({
-const base = computed(()=>!pairSelected?{}:_pair.value.tokenA)
+  get() {
-const quote = computed(()=>!pairSelected?{}:_pair.value.tokenB)
+    return _tokenB.value
+  },
+  set(value) {
+    if( !_tokenB.value || _tokenB.value.address !== value.address ) {
+      _tokenB.value = value
+      routeFinder.invoke()
+    }
+  }
+})
+
 const pairSymbol = computed(()=>base.value?.symbol+'/'+quote.value?.symbol)
+const base = computed(()=>{
+  const token = inverted.value ? _tokenB.value : _tokenA.value
+  return !token?{}:token
+})
+const quote = computed(()=>{
+  const token = inverted.value ? _tokenA.value : _tokenB.value
+  return !token?{}:token
+})
 const routes = ref([])
-const amount = ref(1)
+const amount = ref(0)
 const amountIsBase = ref(false)
 const amountIsTotal = ref(true)
 const tranches = ref(3)
@@ -131,21 +141,22 @@ const interval = ref(10)
 const intervalIsTotal = ref(true)
 const timeUnits = ['minutes', 'hours', 'days']
 const timeUnitIndex = ref(1)
-
+const limitIsMinimum = computed(() => !(buy.value ^ inverted.value))
-const limitIsMinimum = computed(() => !(pair.value.buy ^ inverted.value))
+const validOrder = computed(()=>amount.value > 0 && routes.value.length > 0 )
 
 async function findRoute() {
-  if( !pair.value || !pair.value.tokenA || !pair.value.tokenB )
+  if( !_tokenA.value || !_tokenB.value ) {
-    return null
+    routes.value = []
+    return
+  }
   const helper = await queryHelperContract()
-  console.log('helper',helper)
   let rawRoutes
   try {
-    rawRoutes = await helper.getRoutes(pair.value.tokenA.address, pair.value.tokenB.address)
+    rawRoutes = await helper.getRoutes(tokenA.value.address, tokenB.value.address)
   }
   catch (e) {
     routes.value = []
-    console.log('routes exception', e)
+    // console.log('routes exception', e)
     return
   }
   // todo expose all available pools
@@ -166,8 +177,8 @@ async function findRoute() {
   routes.value = [result]
 }
 
-const routeFinder = new SingletonCoroutine(findRoute,50)
+const routeFinder = new SingletonCoroutine(findRoute,10)
-
+routeFinder.invoke()
 
 function toggleTimeUnits() {
   timeUnitIndex.value++
@@ -229,6 +240,12 @@ function validateMin(v) {
 <style scoped lang="scss">
 @use "@/styles/vars" as *;
 
+.token-choice {
+  width: 16em;
+}
+.bs-button {
+  width: 6em;
+}
 .amount {
   width: 23em;
 }

src/components/TokenChoice.vue

@@ -10,6 +10,7 @@
               v-bind="modelValue" @update:modelValue="updateValue"
               variant="outlined"
               autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+              v-auto-select
   >
     <template v-slot:prepend><slot name="prepend"/></template>
     <template v-slot:item="{props,item}">
@@ -22,6 +23,8 @@
 import {useStore as useStore2} from "@/store/store";
 import {ref} from "vue";
 import {ethers} from "ethers";
+// noinspection ES6UnusedImports
+import {vAutoSelect} from "@/misc.js";
 
 const s = useStore2()
 const props = defineProps(['modelValue', 'label'])
@@ -64,7 +67,7 @@ function updateValue(v) {
           emit('update:modelValue', info)
         }
       }).catch((e)=>{
-        console.log(e)
+        // console.log(e)
         error(`${addr} is not a valid ERC20 token`)
       })
     }

src/misc.js

@@ -20,7 +20,6 @@ export class SingletonCoroutine {
 
     async onTimeout(self) {
         self.timeout = null
-        console.log('invoking', self.f, self.args)
         try {
             await self.f(...self.args)
         }
@@ -33,3 +32,10 @@ export class SingletonCoroutine {
     }
 
 }
+
+export const vAutoSelect = {
+    beforeMount: (el) => {
+        const input = el.querySelector('input')
+        input.onfocus = () => setTimeout(() => input.select(), 0)
+    }
+}

src/store/store.js

@@ -18,12 +18,10 @@ export const useStore = defineStore('app', {
   getters: {
     chain: (s)=> !s.chainInfo ? null : (s.chainInfo[s.chainId] || null),
     tokens: (s)=>{
-      console.log('tokensget',s)
       let known = knownTokens[s.chainId]
       known = known ? Object.values(known) : []
       let extras = s.extraTokens[s.chainId]
       extras = extras ? Object.values(extras) : []
-      console.log('tokens for chainId',s.chainId, known, extras)
       return [...known, ...extras]
     },
     factory: (s)=>!s.chain?null:s.chain.factory,
@@ -34,7 +32,6 @@ export const useStore = defineStore('app', {
       this.errors.push({title, text, closeable})
     },
     closeError(title, text) {
-      console.log('closing error', title, text)
       const result = []
       this.errors.forEach((i)=>{if(i.title!==title && i.text!==text) result.push(i)})
       this.errors = result