vault fixes; order total fill reactivity fix; provider fix

src/blockchain/orderlib.js

@@ -117,7 +117,7 @@ export function isOpen(state) {
     return state >= 1 && state < 3
 }
 
-export function parseOrderStatus(status) {
+export function parseOrderStatus(chainId, status) {
     let [
         order,
         fillFeeBP,
@@ -135,7 +135,7 @@ export function parseOrderStatus(status) {
     trancheFilledIn = trancheFilledIn.map((f)=>BigInt(f))
     trancheFilledOut = trancheFilledOut.map((f)=>BigInt(f))
     return {
-        order, fillFeeBP, state, start, ocoGroup, filledIn, filledOut, trancheFilledIn, trancheFilledOut,
+        chainId, order, fillFeeBP, state, start, ocoGroup, filledIn, filledOut, trancheFilledIn, trancheFilledOut,
     }
 }
 

src/blockchain/wallet.js

@@ -6,8 +6,7 @@ import {vaultAbi} from "@/blockchain/abi.js";
 import {SingletonCoroutine, uuid} from "@/misc.js";
 import {defineStore} from "pinia";
 import {ref} from "vue";
-import {metadata, metadataMap} from "@/version.js";
+import {metadataMap} from "@/version.js";
-import {OrderState} from "@/blockchain/orderlib.js";
 
 
 export const useWalletStore = defineStore('wallet', ()=>{
@@ -36,13 +35,16 @@ export function onChainChanged(chainId) {
   const store = useStore()
   const ws = useWalletStore()
   if( chainId !== ws.chainId ) {
-    console.log('chain changed', chainId)
+    console.log('wallet chain changed', chainId)
     ws.chainId = chainId
     if (chainId.toString() in metadataMap) {
       console.log('app chain changed', chainId)
       store.chainId = chainId
       store.account = null
     }
+    else {
+      console.log('app chain NOT changed')
+    }
   }
 }
 
@@ -124,7 +126,7 @@ const errorHandlingProxy = {
 
 
 export async function connectProvider(chainId) {
-  console.log('connecting provider to chainId', chainId)
+  console.log('connectProvider', chainId)
   try {
     return new ethers.BrowserProvider(window.ethereum, chainId)
   }
@@ -143,6 +145,7 @@ export async function connectWallet(chainId) {
   const p = await connectProvider(chainId)
   if (p!==null) {
     try {
+      console.log('getSigner')
       return await p.getSigner();
     }
     catch (e) {
@@ -195,7 +198,12 @@ async function _discoverVaults(owner) {
     s.vaults = []
     return
   }
-  const vault = new ethers.Contract(addr, vaultAbi, s.provider)
+  const provider = s.provider;
+  if (!provider) {
+    console.log('No provider')
+    return  // do not change whatever was already found
+  }
+  const vault = new ethers.Contract(addr, vaultAbi, provider)
   let version = -1
   try {
     version = await vault.version();
@@ -211,6 +219,7 @@ async function _discoverVaults(owner) {
       console.log(`no vault ${num} at ${addr}`)
     else
       console.error(`discoverVaults failed`, e)
+    return  // do not change what was already found todo is this correct?
   }
   if( s.account === owner ) { // double-check the account since it could have changed during our await
     s.vaults = result

src/components/Faucet.vue

@@ -28,6 +28,8 @@ import Btn from "@/components/Btn.vue";
 import {socket} from "@/socket.js";
 import {metadata} from "@/version.js";
 
+const DISABLED_DURATION = 60_000;
+
 const props = defineProps({
   text: {default:'GIB!'},
 })
@@ -78,7 +80,7 @@ function gib() {
     if (Object.keys(tokenAmounts).length>0) {
       disabled.value = true
       socket.emit('gib', s.chainId, s.account, s.vault, tokenAmounts )
-      setTimeout(()=>disabled.value=false, 60_000)
+      setTimeout(()=>disabled.value=false, DISABLED_DURATION)
     }
   }
 }

src/components/Pulse.vue

@@ -14,20 +14,15 @@ let lastValue = props.touch
 
 function pulse() {
   if (props.touch === lastValue) return
-  console.log(`value changed from ${lastValue} to ${props.touch}`)
   lastValue = props.touch
   const e = element.value;
-  console.log('element', e)
   if (!e.classList.contains('pulse')) {
     // add class for the first time
-    console.log('first pulse')
     e.classList.add('pulse')
   }
   else {
     // restart
-    console.log('reset pulse')
     e.getAnimations().forEach((a) => {
-      console.log('animation', a)
       a.cancel();
       a.play();
     })

src/components/Status.vue

@@ -4,29 +4,37 @@
                   item-selectable="selectable" :show-select="false" :show-expand="true">
       <template v-slot:item.start="{ value }">{{ dateString(value) }}</template>
       <template v-slot:item.input="{ item }">
-        <suspense>
+        <span v-if="item.order.amountIsInput">
-          <span v-if="item.order.amountIsInput">
+          <span v-if="item.state > OrderState.Signing">
-            <pulse :touch="item.filledIn">
+            <suspense>
-              <token-amount :addr="item.order.tokenIn" :amount="item.filledIn" :raw="true"/>
+              <pulse :touch="item.filledIn">
-            </pulse>
+                <token-amount :chain-id="item.chainId" :addr="item.order.tokenIn" :amount="item.filledIn" :raw="true"/>
+              </pulse>
+            </suspense>
             /
-            <token-amount :addr="item.order.tokenIn" :amount="item.order.amount"/>
           </span>
-        </suspense>
+          <suspense>
+            <token-amount :chain-id="item.chainId" :addr="item.order.tokenIn" :amount="item.order.amount"/>
+          </suspense>
+        </span>
         <suspense>
           <token-symbol :addr="item.order.tokenIn" v-if="!item.order.amountIsInput"/>
         </suspense>
       </template>
       <template v-slot:item.output="{ item }">
-        <suspense>
+        <span v-if="!item.order.amountIsInput">
-          <span v-if="!item.order.amountIsInput">
+          <span v-if="item.state > OrderState.Signing">
-            <pulse :touch="item.filledOut">
+            <suspense>
-              <token-amount :addr="item.order.tokenOut" :amount="item.filledOut" :raw="true"/>
+              <pulse :touch="item.filledOut">
-            </pulse>
+                <token-amount :chain-id="item.chainId" :addr="item.order.tokenOut" :amount="item.filledOut" :raw="true"/>
+              </pulse>
+            </suspense>
             /
-            <token-amount :addr="item.order.tokenOut" :amount="item.order.amount"/>
           </span>
-        </suspense>
+          <suspense>
+            <token-amount :chain-id="item.chainId" :addr="item.order.tokenOut" :amount="item.order.amount"/>
+          </suspense>
+        </span>
         <suspense>
           <token-symbol :addr="item.order.tokenOut" v-if="item.order.amountIsInput"/>
         </suspense>
@@ -94,14 +102,14 @@
                   <suspense>
                     <span v-if="item.state > OrderState.Signing">
                       <pulse :touch="item.trancheFilled[i]">
-                        <token-amount :addr="item.amountToken" :amount="item.trancheFilled[i]" :raw="true"/>
+                        <token-amount :chain-id="item.chainId" :addr="item.amountToken" :amount="item.trancheFilled[i]" :raw="true"/>
                       </pulse>
                       /
                     </span>
                   </suspense>
                   <suspense>
                     <span>
-                      <token-amount :addr="item.amountToken" :amount="item.order.amount*BigInt(t.fraction)/65535n"/>
+                      <token-amount :chain-id="item.chainId" :addr="item.amountToken" :amount="item.order.amount*BigInt(t.fraction)/65535n"/>
                     </span>
                   </suspense>
                 </td>
@@ -209,6 +217,7 @@ const orders = computed(()=>{
   for (const pend of ws.pendingOrders) {
     console.log('pended order', pend)
     result.push({
+      chainId: pend.chainId,
       id: pend.id,
       start: pend.placementTime,
       order: pend.order,
@@ -222,19 +231,23 @@ const orders = computed(()=>{
   const vault = vaultAddr.value;
   if( vault in s.orders ) {
     for (const [index, status] of Object.entries(s.orders[vault]).reverse()) {
-      const st = {...status}
+      // const st = {...status}
-      const o = {...st.order}
+      // const o = {...st.order}
+      const st = status
+      const o = st.order
       st.order = o
       console.log('order status', st)
       result.push(st)
       st.id = `${vault}|${index}`
       st.index = parseInt(index)
+/*
       o.tranches = o.tranches.map((tranche)=>{
         const t = {...tranche}
         // t.startTime = t.startTimeIsRelative ? intervalString(t.startTime) : dateString(t.startTime)
         // t.endTime = t.endTimeIsRelative ? intervalString(t.endTime) : dateString(t.endTime)
         return t
       })
+*/
       const fmtX18 = {decimals: 18, width: 256, signed: false};
       st.filled = o.amountIsInput ? st.filledIn : st.filledOut
       if(BigInt(st.filled) === 0n)

src/components/TokenAmount.vue

@@ -3,14 +3,12 @@
 </template>
 
 <script setup>
-import {useStore} from "@/store/store";
 import {getToken} from "@/blockchain/token.js";
 import {FixedNumber} from "ethers";
 import {computed} from "vue";
 
-const s = useStore()
+const props = defineProps(['chainId', 'addr', 'amount', 'raw'])
-const props = defineProps(['addr', 'amount', 'raw'])
+const token = await getToken(props.chainId, props.addr)
-const token = await getToken(s.chainId, props.addr)
 const fmtAmount = computed(() => {
   if( props.amount === null || props.amount === undefined )
     return ''

src/socket.js

@@ -38,7 +38,7 @@ socket.on('vb', async (chainId, vault, balances) => {
 
 socket.on('vaults', (chainId, owner, vaults)=>{
     const s = useStore()
-    console.log('vaults', vaults)
+    console.log('vaults', chainId, owner, vaults)
     if( s.chainId !== chainId || s.account !== owner )
         return
     if( vaults.length > s.vaults.length ) {
@@ -56,7 +56,7 @@ function handleOrderStatus(chainId, vault, orderIndex, status) {
     if( s.chainId !== chainId )
         return
     // message 'o' is a single order status
-    const parsed = parseOrderStatus(status);
+    const parsed = parseOrderStatus(chainId, status);
     console.log('o', chainId, vault, orderIndex, status, parsed)
     if( !(vault in s.orders) )
         s.orders[vault] = {}
@@ -95,6 +95,6 @@ socket.on( 'of', (chainId, vault, orderIndex, filled)=>{
         status.trancheFilledIn[i] = BigInt(filledIn)
         status.trancheFilledOut[i] = BigInt(filledOut)
     }
-    s.orders[vault][orderIndex] = status
+    // s.orders[vault][orderIndex] = status
     console.log('applied fills', status)
 })

src/store/store.js

@@ -63,14 +63,15 @@ export const useStore = defineStore('app', ()=> {
   const chainId = computed({
     get() {return _chainId.value},
     set(v) {
-      console.log('setting chainid',_chainId.value, v)
+      console.log('setting app chainid',_chainId.value, v)
-      if (_chainId.value!==v) {
+      const changed = _chainId.value!==v;
+      if (changed) {
         console.log('do set')
         _chainId.value = v
         account.value = null
       }
-      if (_chainId.value!==v || _provider.value === null) {
+      if (changed || _provider.value === null) {
-        console.log('update provider')
+        console.log('invalidating provider')
         _provider.value = UNKNOWN_PROVIDER
       }
     }