major refactor of web store into vue setup style declaration; reactivity debugging; order view has known refresh issues

src/store/store.js

@@ -4,11 +4,33 @@ import {knownTokens} from "@/knownTokens.js";
 import {computed, ref} from "vue";
 
 
+// USING THE STORE:
+//
+//
+// When defining the store, use Vue script setup syntax, which requires assignment to .value:
+//
+// defineStore('foostore', ()=>{
+//   const foo = ref(true)
+//   const obj = reactive({})
+//   function reset() {
+//     obj.value = {}
+//     foo.value = false
+//   }
+// })
+//
+//
+// Then use the store in components:
+//
+// const s = useStore()
+// if( s.foo )      // store variables may be read simply
+//   s.reset()      // store actions (functions) may be called directly
+// const stuff = [ {}, [], true ]
+// if( s.obj.value in stuff || s.obj.value === {} ) ...  // use .value to access the raw object instead of its reference
+
+
 export const useStore = defineStore('app', ()=> {
   const _chainId = ref(null)
   const _chainInfo = ref({})
-  const tokenA = ref(null)
-  const tokenB = ref(null)
 
   function getTokenList() {
     const chains = _chainId.value in _chainInfo.value && _chainInfo.value[_chainId.value].tokens !== undefined ?
@@ -26,20 +48,16 @@ export const useStore = defineStore('app', ()=> {
       result[token.address] = token
     return result
   }
-  function setDefaultTokens() {
-    const tokens = getTokenList()
-    if( tokens.length > 0 )
-      tokenA.value = tokens[0]
-    if( tokens.length > 1 )
-      tokenB.value = tokens[1]
+  function refreshChain() {
+    useOrderStore().setDefaultTokens(getTokenList())
   }
   const chainId = computed({
     get() {return _chainId},
-    set(v) {_chainId.value=v; setDefaultTokens()}
+    set(v) {_chainId.value=v; refreshChain()}
   })
   const chainInfo = computed({
     get() {return _chainInfo},
-    set(v) {_chainInfo.value=v; setDefaultTokens()}
+    set(v) {_chainInfo.value=v; refreshChain()}
   })
   const chain = computed(() => !_chainId.value ? null : (_chainInfo.value[_chainId.value] || null))
   // making the provider directly reactive causes exceptions (calling private method...) when calling provider
@@ -56,42 +74,16 @@ export const useStore = defineStore('app', ()=> {
   const transactionSenders = ref([]) // a list of function(signer) that send transactions
   const errors = ref([])
   const extraTokens = ref({})
-  const poolPrices = ref({})
+  const poolPrices = ref({})  // keyed by [chainId,addr]
   const vaultBalances = ref({}) // indexed by vault addr then by token addr. value is an int
   const orders = ref({}) // indexed by vault value is another dictionary with orderIndex as key and order status values
 
-  // Order Input Forms
-  // const tokenA = ref(null) // defined at top
-  // const tokenB = ref(null)
-  const buy = ref(false)
-  const inverted = ref(false)
-  const amount = ref(100) // todo
-  const amountIsTokenA = ref(false) // todo
-  const amountIsTotal = ref(true)
-  const limitPrice = ref(null)
-  const routes = ref([])
-  const routesPending = ref(false)
-
-  const validOrder = computed(() => amount.value > 0 && routes.value.length > 0)
   const vault = computed(() => vaults.value.length === 0 ? null : vaults.value[0])
   const tokens = computed(getTokens)
   const factory = computed(() => !chain.value ? null : chain.value.factory)
   const helper = computed(() => !chain.value ? null : chain.value.helper)
   const mockenv = computed(() => !chain.value ? null : chain.value.mockenv)
   const mockCoins = computed(() => !chain.value ? [] : !chain.value.mockCoins ? [] : chain.value.mockCoins)
-  const route = computed(() => routes.value.length === 0 ? null : routes.value[0])
-  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 pairSymbol = computed(() => base.value?.symbol + '\\' + quote.value?.symbol)
-  const limitIsMinimum = computed(() => !(buy.value ^ inverted.value))
-  const amountToken = computed(() => amountIsTokenA.value ? tokenA.value : tokenB.value)
-  const amountIsInput = computed(() => amountIsTokenA.value !== buy.value)
 
   function removeTransactionSender(sender) {
     this.transactionSenders = this.transactionSenders.filter((v) => v !== sender)
@@ -117,9 +109,58 @@ export const useStore = defineStore('app', ()=> {
 
   return {
     chainId, chainInfo, chain, provider, vaultInitCodeHash, account, vaults, transactionSenders, errors, extraTokens,
-    poolPrices, vaultBalances, orders, tokenA, tokenB, routes, routesPending, inverted, amount, amountIsTokenA,
-    amountIsTotal, limitPrice, validOrder, vault, tokens, factory, helper, mockenv, mockCoins, route,
-    pairSymbol, base, quote, limitIsMinimum, amountToken, amountIsInput, removeTransactionSender, error, closeError,
-    addToken,
+    poolPrices, vaultBalances, orders, vault, tokens, factory, helper, mockenv, mockCoins, removeTransactionSender,
+    error, closeError, addToken,
   }
 })
+
+
+export const useOrderStore = defineStore('order', ()=> {
+  const tokenA = ref(null)
+  const tokenB = ref(null)
+
+  // Order Input Forms
+  // const tokenA = ref(null) // defined at top
+  // const tokenB = ref(null)
+  const buy = ref(false)
+  const inverted = ref(false)
+  const amount = ref(100) // todo adjust default
+  const amountIsTokenA = ref(false) // todo adjust default
+  const amountIsTotal = ref(true)
+  const limitPrice = ref(null)
+  const limitPrice2 = ref(null)
+  const tranches = ref(3)
+  const interval = ref(1)
+  const intervalIsTotal = ref(true)
+  const timeUnitIndex = ref(0)
+  const routes = ref([])
+  const routesPending = ref(false)
+
+  const validOrder = computed(() => amount.value > 0 && routes.value.length > 0)
+  const route = computed(() => routes.value.length === 0 ? null : routes.value[0])
+  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 pairSymbol = computed(() => base.value?.symbol + '\\' + quote.value?.symbol)
+  const limitIsMinimum = computed(() => !(buy.value ^ inverted.value))
+  const amountToken = computed(() => amountIsTokenA.value ? tokenA.value : tokenB.value)
+  const amountIsInput = computed(() => amountIsTokenA.value !== buy.value)
+
+  function setDefaultTokens(tokens) {
+    if( tokens.length > 0 )
+      tokenA.value = tokens[0]
+    if( tokens.length > 1 )
+      tokenB.value = tokens[1]
+  }
+
+  return {
+    tokenA, tokenB, buy, inverted, amount, amountIsTokenA, amountIsTotal, limitPrice, limitPrice2, tranches,
+    interval, intervalIsTotal, timeUnitIndex, routes, routesPending, validOrder, route, base, quote, pairSymbol,
+    limitIsMinimum, amountToken, amountIsInput, setDefaultTokens,
+  }
+})