Bug/bugs

apps/web/package.json

@@ -11,7 +11,7 @@
     "@heroicons/vue": "^1.0.6",
     "@walletconnect/sign-client": "^2.9.2",
     "@walletconnect/types": "^2.9.2",
-    "@walletconnect/universal-provider": "^2.9.2",
+    "@walletconnect/universal-provider": "^2.10.1",
     "@web3modal/standalone": "^2.4.3",
     "borsh": "^0.7.0",
     "buffer": "^6.0.3",

apps/web/src/components/charts/LineChartJS.vue

@@ -112,27 +112,31 @@ onMounted(() => {
 })
 
 watch(props, ()=> {
-    if(line_chart.data !== props.data){
-        line_chart.data = props.data as ChartData
+    try {
+        if (!line_chart) return
+        if(line_chart.data !== props.data){
+            line_chart.data = props.data as ChartData
 
-        if(props.gradient){
-
-            for (let i = 0; i < line_chart.data.datasets.length; i++) {
-                if(line_chart.data.datasets[i].backgroundColor){
-                    let gradient = ctx? ctx.createLinearGradient(0, 0, 0, 400): 'black'
-                    let rgb = hexToRGB(line_chart.data.datasets[i].backgroundColor)
+            if(props.gradient){
+                
+                for (let i = 0; i < line_chart.data.datasets.length; i++) {
+                    if(line_chart.data.datasets[i].backgroundColor){
+                        let gradient = ctx? ctx.createLinearGradient(0, 0, 0, 400): 'black'
+                        let rgb = hexToRGB(line_chart.data.datasets[i].backgroundColor)
 
-                    gradient.addColorStop(0, `rgba(${rgb?.r},${rgb?.g},${rgb?.b}, 0.28)`) 
-                    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.0)') 
+                        gradient.addColorStop(0, `rgba(${rgb?.r},${rgb?.g},${rgb?.b}, 0.28)`) 
+                        gradient.addColorStop(1, 'rgba(0, 0, 0, 0.0)') 
 
-                    line_chart.data.datasets[i].backgroundColor = gradient
+                        line_chart.data.datasets[i].backgroundColor = gradient
+                    }
                 }
             }
-        }
 
-        line_chart.update()
+            line_chart.update()
+        }
+    } catch (error) {
+        console.error('Watcher Error: Props ./LineCharJS', error)
     }
-
 })
 </script>
 

apps/web/src/composables/analytics.ts

@@ -149,12 +149,12 @@ export default function useAnalytics() {
                 }
             }
             // TODO: Re-enable this when athena is ready
-            const response = await fetch(`${usersUrl}/analytics`, requestOptions)
-            const { error, message, data: athenaData } = await response.json()
+            // const response = await fetch(`${usersUrl}/analytics`, requestOptions)
+            // const { error, message, data: athenaData } = await response.json()
             // console.log('data from analytics :>> ', data)
             // userAnalytics.value = athenaData
-            getUserAnalyticsError.value = error
-            if (error) throw new Error(`Error in getUserAnalytics: ${message}`)
+            // getUserAnalyticsError.value = error
+            // if (error) throw new Error(`Error in getUserAnalytics: ${message}`)
 
             // TODO: Get events, actions, and contract data from the API
             // Then format the data to be used in the charts (see computeUserAnalytics) and give to Steve.
@@ -168,7 +168,8 @@ export default function useAnalytics() {
 
             // This compute's the user's wallet balance over time
             computeUserAnalytics()
-            return { error, message, data }
+            // return { error, message, data }
+            return { data }
         } catch (error: any) {
             throw new Error(error.message || 'Error getting user analytics')
         }
@@ -178,10 +179,10 @@ export default function useAnalytics() {
         await getUserAnalytics()
     }
 
-    watchEffect(async () => {
+    async function initializeAnalyticsComposable() {
         resetUserAnalytics()
         await getUserAnalytics()
-    })
+    }
 
     function resetUserAnalytics() {
         getUserAnalyticsError.value = null
@@ -211,5 +212,6 @@ export default function useAnalytics() {
         getUserAnalyticsError: readonly(getUserAnalyticsError),
         updateAnalytics,
         rawUserAnalytics,
+        initializeAnalyticsComposable
     }
 }

apps/web/src/composables/breakdownMetrics.ts

@@ -238,7 +238,6 @@ export default function useBreakdownMetrics() {
 
     async function initializeComposable(user: UserWithAccountsAndOperators){
         userValue.value = toValue(user)
-        console.log('User in initialize breakdown Metrics', userValue)
         provider.removeAllListeners('block')
         provider.on('block', blockListener as ethers.providers.Listener)
         listenForContractEvents()

apps/web/src/composables/operators.ts

@@ -1,13 +1,11 @@
 import { readonly, ref, watchEffect, watch } from 'vue'
 import useEnvironment from '@/composables/environment'
 import useContracts from '@/composables/contracts'
-// import useUser from '@/composables/user'
 import { Operator, Scanner } from '@casimir/ssv'
 import { RegisteredOperator, Pool, Account, UserWithAccountsAndOperators } from '@casimir/types'
 import { ethers } from 'ethers'
 
 export default function useOperators() {
-    // const { user } = useUser()
     const { ethereumUrl, ssvNetworkAddress, ssvNetworkViewsAddress, usersUrl } = useEnvironment()
     const { manager, registry, views } = useContracts()
 
@@ -108,10 +106,9 @@ export default function useOperators() {
         return pools
     }
 
-
-    function listenForContractEvents() {
+    function listenForContractEvents(user: UserWithAccountsAndOperators) {
         try {
-            registry.on('OperatorRegistered', getUserOperators)
+            registry.on('OperatorRegistered', () => getUserOperators(user))
             // registry.on('OperatorDeregistered', getUserOperators)
             // registry.on('DeregistrationRequested', getUserOperators)
         } catch (err) {
@@ -120,12 +117,9 @@ export default function useOperators() {
     }
 
     async function initializeComposable(user: UserWithAccountsAndOperators){
-        listenForContractEvents()
+        listenForContractEvents(user)
         await getUserOperators(user)
     }
-    watchEffect( () => {
-        // 
-    })
 
     return { 
         nonregisteredOperators: readonly(nonregisteredOperators),

apps/web/src/composables/user.ts

@@ -16,7 +16,6 @@ const { loginWithTrezor } = useTrezor()
 const { loginWithWalletConnectV2, initializeWalletConnect, uninitializeWalletConnect } = useWalletConnect()
 
 const initializeComposable = ref(false)
-const initializedUser = ref(false)
 const provider = new ethers.providers.JsonRpcProvider(ethereumUrl)
 const user = ref<UserWithAccountsAndOperators | undefined>(undefined)
 
@@ -106,18 +105,9 @@ export default function useUser() {
     onMounted(async () => {
         if (!initializeComposable.value) {
             initializeComposable.value = true
-            // listenForContractEvents()
-            watch(user, async () => {
-                if (user.value && !initializedUser.value) {
-                    initializedUser.value = true
-                    // await Promise.all([refreshBreakdown()])
-                } else if (!user.value) {
-                    // uninitializeUser()
-                }
-            })
             const session = await Session.doesSessionExist()
             if (session) await getUser()
-            await initializeWalletConnect()
+            // await initializeWalletConnect()
         }
     })
 

apps/web/src/layouts/default-layout.vue

@@ -373,7 +373,6 @@ onUnmounted(() =>{
                 <button @click="authFlowCardNumber = 1, selectedProvider = null">
                   <vue-feather
                     type="chevron-left"
-                    size=""
                     class="icon w-[20px] h-min text-primary hover:text-blue_3 mr-[10px] mt-[5px]"
                   />
                 </button>

apps/web/src/pages/operators/Operator.vue

@@ -215,6 +215,16 @@ const removeItemFromCheckedList = (item:any) => {
   }
 }
 
+const allInputsValid = ref(false)
+
+watch([selectedWallet, selectedOperatorID, selectedPublicNodeURL, selectedCollateral], ()=>{
+  if(selectedWallet.value.address !== '' && selectedOperatorID.value !== undefined && selectedPublicNodeURL.value !== '' && selectedCollateral.value !== undefined) {
+    allInputsValid.value = true
+  } else {
+    allInputsValid.value = false
+  }
+})
+
 async function submitRegisterOperatorForm() {
   try {
     await registerOperatorWithCasimir({
@@ -333,7 +343,6 @@ async function submitRegisterOperatorForm() {
               >
                 <vue-feather
                   type="x"
-                  size=""
                   class="icon w-[12px] h-min"
                 />
               </button>
@@ -444,7 +453,6 @@ async function submitRegisterOperatorForm() {
               <button @click="selectedPublicNodeURL = ''">
                 <vue-feather
                   type="x"
-                  size=""
                   class="icon w-[12px] h-min"
                 />
               </button>
@@ -481,7 +489,6 @@ async function submitRegisterOperatorForm() {
               >
                 <vue-feather
                   type="x"
-                  size=""
                   class="icon w-[12px] h-min"
                 />
               </button>
@@ -494,7 +501,7 @@ async function submitRegisterOperatorForm() {
               <button
                 type="submit"
                 class="export_button"
-                @click="submitRegisterOperatorForm"
+                :disabled="!allInputsValid"
               >
                 <span v-if="loadingRegisteredOperators">Submitting</span>
                 <span v-else>Submit</span>

apps/web/src/pages/overview/components/BreakdownChart.vue

@@ -1,6 +1,6 @@
 b<script lang="ts" setup>
 import LineChartJS from '@/components/charts/LineChartJS.vue'
-import { onMounted, ref, toValue, watch} from 'vue'
+import { onMounted, ref, watch} from 'vue'
 import useAnalytics from '@/composables/analytics'
 import useUser from '@/composables/user'
 import useScreenDimensions from '@/composables/screenDimensions'
@@ -97,11 +97,12 @@ const setChartData = (userAnalytics: UserAnalyticsData) => {
 }
 
 
-const {userAnalytics, updateAnalytics } = useAnalytics()
+const {userAnalytics, updateAnalytics, initializeAnalyticsComposable } = useAnalytics()
 
 onMounted(() => {
   if(user.value){
     initializeComposable(user.value as UserWithAccountsAndOperators)
+    initializeAnalyticsComposable()
   }else{
     uninitializeComposable()
   }