From b7df2303162ad5eb22c9a12e5e34497523f37854 Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Tue, 19 Sep 2023 10:00:43 -0400
Subject: [PATCH 1/6] Begin moving user analytics functionality to separate
 composable

---
 apps/web/src/composables/analytics.ts         | 217 ++++++++++++++++++
 apps/web/src/composables/user.ts              | 179 +--------------
 apps/web/src/pages/overview/Overview.vue      |   4 +-
 .../overview/components/BreakdownChart.vue    |  45 ++--
 4 files changed, 248 insertions(+), 197 deletions(-)
 create mode 100644 apps/web/src/composables/analytics.ts

diff --git a/apps/web/src/composables/analytics.ts b/apps/web/src/composables/analytics.ts
new file mode 100644
index 000000000..175393ac5
--- /dev/null
+++ b/apps/web/src/composables/analytics.ts
@@ -0,0 +1,217 @@
+import { readonly, ref, watchEffect } from 'vue'
+import { UserAnalyticsData } from '@casimir/types'
+import useEnvironment from '@/composables/environment'
+import useTxData from '../mockData/mock_transaction_data'
+
+const { usersUrl } = useEnvironment()
+const { mockData, txData } = useTxData()
+
+export default function useAnalytics() {
+    const finishedComputingUerAnalytics = ref(false)
+    const getUserAnalyticsError = ref(null)
+    const rawUserAnalytics = ref<any>(null)
+    const userAnalytics = ref<UserAnalyticsData>({
+        oneMonth: {
+            labels: [],
+            data: []
+        },
+        sixMonth: {
+            labels: [],
+            data: []
+        },
+        oneYear: {
+            labels: [],
+            data: []
+        },
+        historical: {
+            labels: [],
+            data: []
+        }
+    })
+
+    function computeUserAnalytics() {
+        finishedComputingUerAnalytics.value = false
+        // const result = userAnalytics.value
+        console.log('rawUserAnalytics in computeAnalytics :>> ', rawUserAnalytics)
+        const sortedTransactions = rawUserAnalytics.value.sort((a: any, b: any) => {
+            new Date(a.receivedAt).getTime() - new Date(b.receivedAt).getTime()
+        })
+
+        let earliest: any = null
+        const latest: any = new Date().getTime()
+        const oneYear = new Date().getTime() - 31536000000
+        const sixMonths = new Date().getTime() - 15768000000
+        const oneMonth = new Date().getTime() - 2628000000
+        sortedTransactions.forEach((tx: any) => {
+            const receivedAt = new Date(tx.receivedAt)
+            if (!earliest) earliest = receivedAt.getTime()
+            if (receivedAt.getTime() < earliest) earliest = receivedAt.getTime()
+        })
+        const historicalInterval = (latest - earliest) / 11
+
+        sortedTransactions.forEach((tx: any) => {
+            const { receivedAt, walletAddress, walletBalance } = tx
+            /* Historical */
+            let historicalDataIndex = userAnalytics.value.historical.data.findIndex((obj: any) => obj.walletAddress === walletAddress)
+            if (historicalDataIndex === -1) {
+                const dataLength = userAnalytics.value.historical.data.push({ walletAddress, walletBalance: Array(12).fill(0) })
+                historicalDataIndex = dataLength - 1
+            }
+            // Determine which interval the receivedAt falls into
+            const intervalIndex = Math.floor((new Date(receivedAt).getTime() - earliest) / historicalInterval)
+            // Set the value of the intervalIndex to the walletBalance
+            userAnalytics.value.historical.data[historicalDataIndex].walletBalance[intervalIndex] = walletBalance
+
+            /* One Year */
+            if (new Date(receivedAt).getTime() > oneYear) {
+                let oneYearDataIndex = userAnalytics.value.oneYear.data.findIndex((obj: any) => obj.walletAddress === walletAddress)
+                if (oneYearDataIndex === -1) {
+                    const dataLength = userAnalytics.value.oneYear.data.push({ walletAddress, walletBalance: Array(12).fill(0) })
+                    oneYearDataIndex = dataLength - 1
+                }
+                const monthsAgo = (new Date().getFullYear() - new Date(receivedAt).getFullYear()) * 12 + (new Date().getMonth() - new Date(receivedAt).getMonth())
+                const intervalIndex = 11 - monthsAgo
+                userAnalytics.value.oneYear.data[oneYearDataIndex].walletBalance[intervalIndex] = walletBalance
+            }
+
+            /* Six Months */
+            if (new Date(receivedAt).getTime() > sixMonths) {
+                let sixMonthDataIndex = userAnalytics.value.sixMonth.data.findIndex((obj: any) => obj.walletAddress === walletAddress)
+                if (sixMonthDataIndex === -1) {
+                    const dataLength = userAnalytics.value.sixMonth.data.push({ walletAddress, walletBalance: Array(6).fill(0) })
+                    sixMonthDataIndex = dataLength - 1
+                }
+                const monthsAgo = (new Date().getFullYear() - new Date(receivedAt).getFullYear()) * 12 + (new Date().getMonth() - new Date(receivedAt).getMonth())
+                const intervalIndex = 5 - monthsAgo
+                userAnalytics.value.sixMonth.data[sixMonthDataIndex].walletBalance[intervalIndex] = walletBalance
+            }
+
+            /* One Month */
+            if (new Date(receivedAt).getTime() > oneMonth) {
+                let oneMonthDataIndex = userAnalytics.value.oneMonth.data.findIndex((obj: any) => obj.walletAddress === walletAddress)
+                if (oneMonthDataIndex === -1) {
+                    const dataLength = userAnalytics.value.oneMonth.data.push({ walletAddress, walletBalance: Array(30).fill(0) })
+                    oneMonthDataIndex = dataLength - 1
+                }
+                const daysAgo = Math.floor((new Date().getTime() - new Date(receivedAt).getTime()) / 86400000)
+                const intervalIndex = 29 - daysAgo
+                userAnalytics.value.oneMonth.data[oneMonthDataIndex].walletBalance[intervalIndex] = walletBalance
+            }
+        })
+
+        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+        // Set the historical labels array to the interval labels
+        let previousMonth: any = null
+        userAnalytics.value.historical.labels = Array(12).fill(0).map((_, i) => {
+            const date = new Date(earliest + (historicalInterval * i))
+            const currentMonth = date.getMonth()
+            if (!previousMonth) {
+                previousMonth = currentMonth
+                return date.getMonth() === 0 ? `${date.getFullYear()} ${months[date.getMonth()]} ${date.getDate()}` : `${months[date.getMonth()]} ${date.getDate()}`
+            } else if (currentMonth < previousMonth) {
+                previousMonth = currentMonth
+                return `${date.getFullYear()} ${months[date.getMonth()]} ${date.getDate()}`
+            } else {
+                previousMonth = currentMonth
+                return `${months[date.getMonth()]} ${date.getDate()}`
+            }
+        })
+
+        // Set the oneYear labels array to the interval labels
+        userAnalytics.value.oneYear.labels = Array(12).fill(0).map((_, i) => {
+            const date = new Date (new Date().setDate(1))
+            const monthIndex = new Date(date.setMonth(date.getMonth() - (11 - i)))
+            return `${months[monthIndex.getMonth()]} ${monthIndex.getFullYear()}`
+        })
+
+        // Set the sixMonth labels array to the interval labels
+        userAnalytics.value.sixMonth.labels = Array(6).fill(0).map((_, i) => {
+            const date = new Date (new Date().setDate(1))
+            const monthIndex = new Date(date.setMonth(date.getMonth() - (5 - i)))
+            return `${months[monthIndex.getMonth()]} ${monthIndex.getFullYear()}`
+        })
+
+        // Set the oneMonth labels array to the interval labels
+        userAnalytics.value.oneMonth.labels = []
+        for (let i = 30; i > 0; i--) {
+            const date = new Date().getTime() - ((i - 1) * 86400000)
+            userAnalytics.value.oneMonth.labels.push(`${new Date(date).getMonth() + 1}/${new Date(date).getDate()}`)
+        }
+        // userAnalytics.value = result
+        finishedComputingUerAnalytics.value = true
+    }
+
+    async function getUserAnalytics() {
+        try {
+            const requestOptions = {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }
+            // TODO: Re-enable this when athena is ready
+            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}`)
+
+            // 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.
+
+            // We get the user's analytics (wallet balance) data here.
+            mockData()
+            console.log('txData.value :>> ', txData.value)
+            const data = txData.value
+
+            // TODO: Pass data from above when the API / data is ready
+            rawUserAnalytics.value = data
+
+            // This compute's the user's wallet balance over time
+            computeUserAnalytics()
+            return { error, message, data }
+        } catch (error: any) {
+            throw new Error(error.message || 'Error getting user analytics')
+        }
+    }
+
+    async function updateAnalytics() {
+        await getUserAnalytics()
+    }
+
+    watchEffect(async () => {
+        resetUserAnalytics()
+        await getUserAnalytics()
+    })
+
+    function resetUserAnalytics() {
+        getUserAnalyticsError.value = null
+        userAnalytics.value = {
+            oneMonth: {
+                labels: [],
+                data: []
+            },
+            sixMonth: {
+                labels: [],
+                data: []
+            },
+            oneYear: {
+                labels: [],
+                data: []
+            },
+            historical: {
+                labels: [],
+                data: []
+            }
+        }
+    }
+
+    return { 
+        finishedComputingUerAnalytics: readonly(finishedComputingUerAnalytics),
+        userAnalytics: readonly(userAnalytics),
+        getUserAnalyticsError: readonly(getUserAnalyticsError),
+        updateAnalytics,
+    }
+}
\ No newline at end of file
diff --git a/apps/web/src/composables/user.ts b/apps/web/src/composables/user.ts
index f576f2e10..1ad2474fe 100644
--- a/apps/web/src/composables/user.ts
+++ b/apps/web/src/composables/user.ts
@@ -1,7 +1,7 @@
 import { onMounted, onUnmounted, readonly, ref, watch } from 'vue'
 import * as Session from 'supertokens-web-js/recipe/session'
 import { ethers } from 'ethers'
-import { Account, BreakdownAmount, BreakdownString, ContractEventsByAddress, Currency, LoginCredentials, Pool, ProviderString, RegisteredOperator, User, UserAnalyticsData, UserWithAccountsAndOperators } from '@casimir/types'
+import { Account, BreakdownAmount, BreakdownString, ContractEventsByAddress, Currency, LoginCredentials, Pool, ProviderString, RegisteredOperator, User, UserWithAccountsAndOperators } from '@casimir/types'
 import useContracts from '@/composables/contracts'
 import useEnvironment from '@/composables/environment'
 import useEthers from '@/composables/ethers'
@@ -11,9 +11,6 @@ import usePrice from '@/composables/price'
 import useTrezor from '@/composables/trezor'
 import useWalletConnect from '@/composables/walletConnectV2'
 import { Operator, Scanner } from '@casimir/ssv'
-import useTxData from '../mockData/mock_transaction_data'
-
-const { mockData, txData } = useTxData()
 
 // Test address: 0xd557a5745d4560B24D36A68b52351ffF9c86A212
 const { manager, registry, views } = useContracts()
@@ -27,30 +24,10 @@ const { loginWithWalletConnectV2, initializeWalletConnect, uninitializeWalletCon
 
 const initializeComposable = ref(false)
 const initializedUser = ref(false)
-const finishedComputingUerAnalytics = ref(false)
 const nonregisteredOperators = ref<Operator[]>([])
 const provider = new ethers.providers.JsonRpcProvider(ethereumUrl)
-const rawUserAnalytics = ref<any>(null)
 const registeredOperators = ref<Operator[]>([])
 const user = ref<UserWithAccountsAndOperators | undefined>(undefined)
-const userAnalytics = ref<UserAnalyticsData>({
-    oneMonth: {
-        labels: [],
-        data: []
-    },
-    sixMonth: {
-        labels: [],
-        data: []
-    },
-    oneYear: {
-        labels: [],
-        data: []
-    },
-    historical: {
-        labels: [],
-        data: []
-    }
-})
 
 const currentStaked = ref<BreakdownAmount>({
     usd: '$0.00',
@@ -138,119 +115,6 @@ export default function useUser() {
         await Promise.all(txs)
     }
 
-    function computeUserAnalytics() {
-        finishedComputingUerAnalytics.value = false
-        // const result = userAnalytics.value
-        console.log('rawUserAnalytics in computeAnalytics :>> ', rawUserAnalytics)
-        const sortedTransactions = rawUserAnalytics.value.sort((a: any, b: any) => {
-            new Date(a.receivedAt).getTime() - new Date(b.receivedAt).getTime()
-        })
-
-        let earliest: any = null
-        const latest: any = new Date().getTime()
-        const oneYear = new Date().getTime() - 31536000000
-        const sixMonths = new Date().getTime() - 15768000000
-        const oneMonth = new Date().getTime() - 2628000000
-        sortedTransactions.forEach((tx: any) => {
-            const receivedAt = new Date(tx.receivedAt)
-            if (!earliest) earliest = receivedAt.getTime()
-            if (receivedAt.getTime() < earliest) earliest = receivedAt.getTime()
-        })
-        const historicalInterval = (latest - earliest) / 11
-
-        sortedTransactions.forEach((tx: any) => {
-            const { receivedAt, walletAddress, walletBalance } = tx
-            /* Historical */
-            let historicalDataIndex = userAnalytics.value.historical.data.findIndex((obj: any) => obj.walletAddress === walletAddress)
-            if (historicalDataIndex === -1) {
-                const dataLength = userAnalytics.value.historical.data.push({ walletAddress, walletBalance: Array(12).fill(0) })
-                historicalDataIndex = dataLength - 1
-            }
-            // Determine which interval the receivedAt falls into
-            const intervalIndex = Math.floor((new Date(receivedAt).getTime() - earliest) / historicalInterval)
-            // Set the value of the intervalIndex to the walletBalance
-            userAnalytics.value.historical.data[historicalDataIndex].walletBalance[intervalIndex] = walletBalance
-
-            /* One Year */
-            if (new Date(receivedAt).getTime() > oneYear) {
-                let oneYearDataIndex = userAnalytics.value.oneYear.data.findIndex((obj: any) => obj.walletAddress === walletAddress)
-                if (oneYearDataIndex === -1) {
-                    const dataLength = userAnalytics.value.oneYear.data.push({ walletAddress, walletBalance: Array(12).fill(0) })
-                    oneYearDataIndex = dataLength - 1
-                }
-                const monthsAgo = (new Date().getFullYear() - new Date(receivedAt).getFullYear()) * 12 + (new Date().getMonth() - new Date(receivedAt).getMonth())
-                const intervalIndex = 11 - monthsAgo
-                userAnalytics.value.oneYear.data[oneYearDataIndex].walletBalance[intervalIndex] = walletBalance
-            }
-
-            /* Six Months */
-            if (new Date(receivedAt).getTime() > sixMonths) {
-                let sixMonthDataIndex = userAnalytics.value.sixMonth.data.findIndex((obj: any) => obj.walletAddress === walletAddress)
-                if (sixMonthDataIndex === -1) {
-                    const dataLength = userAnalytics.value.sixMonth.data.push({ walletAddress, walletBalance: Array(6).fill(0) })
-                    sixMonthDataIndex = dataLength - 1
-                }
-                const monthsAgo = (new Date().getFullYear() - new Date(receivedAt).getFullYear()) * 12 + (new Date().getMonth() - new Date(receivedAt).getMonth())
-                const intervalIndex = 5 - monthsAgo
-                userAnalytics.value.sixMonth.data[sixMonthDataIndex].walletBalance[intervalIndex] = walletBalance
-            }
-
-            /* One Month */
-            if (new Date(receivedAt).getTime() > oneMonth) {
-                let oneMonthDataIndex = userAnalytics.value.oneMonth.data.findIndex((obj: any) => obj.walletAddress === walletAddress)
-                if (oneMonthDataIndex === -1) {
-                    const dataLength = userAnalytics.value.oneMonth.data.push({ walletAddress, walletBalance: Array(30).fill(0) })
-                    oneMonthDataIndex = dataLength - 1
-                }
-                const daysAgo = Math.floor((new Date().getTime() - new Date(receivedAt).getTime()) / 86400000)
-                const intervalIndex = 29 - daysAgo
-                userAnalytics.value.oneMonth.data[oneMonthDataIndex].walletBalance[intervalIndex] = walletBalance
-            }
-        })
-
-        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-        // Set the historical labels array to the interval labels
-        let previousMonth: any = null
-        userAnalytics.value.historical.labels = Array(12).fill(0).map((_, i) => {
-            const date = new Date(earliest + (historicalInterval * i))
-            const currentMonth = date.getMonth()
-            if (!previousMonth) {
-                previousMonth = currentMonth
-                return date.getMonth() === 0 ? `${date.getFullYear()} ${months[date.getMonth()]} ${date.getDate()}` : `${months[date.getMonth()]} ${date.getDate()}`
-            } else if (currentMonth < previousMonth) {
-                previousMonth = currentMonth
-                return `${date.getFullYear()} ${months[date.getMonth()]} ${date.getDate()}`
-            } else {
-                previousMonth = currentMonth
-                return `${months[date.getMonth()]} ${date.getDate()}`
-            }
-        })
-
-        // Set the oneYear labels array to the interval labels
-        userAnalytics.value.oneYear.labels = Array(12).fill(0).map((_, i) => {
-            const date = new Date (new Date().setDate(1))
-            const monthIndex = new Date(date.setMonth(date.getMonth() - (11 - i)))
-            return `${months[monthIndex.getMonth()]} ${monthIndex.getFullYear()}`
-        })
-
-        // Set the sixMonth labels array to the interval labels
-        userAnalytics.value.sixMonth.labels = Array(6).fill(0).map((_, i) => {
-            const date = new Date (new Date().setDate(1))
-            const monthIndex = new Date(date.setMonth(date.getMonth() - (5 - i)))
-            return `${months[monthIndex.getMonth()]} ${monthIndex.getFullYear()}`
-        })
-
-        // Set the oneMonth labels array to the interval labels
-        userAnalytics.value.oneMonth.labels = []
-        for (let i = 30; i > 0; i--) {
-            const date = new Date().getTime() - ((i - 1) * 86400000)
-            userAnalytics.value.oneMonth.labels.push(`${new Date(date).getMonth() + 1}/${new Date(date).getDate()}`)
-        }
-        // userAnalytics.value = result
-        finishedComputingUerAnalytics.value = true
-    }
-
     async function getAllTimeStakingRewards() : Promise<BreakdownAmount> {
         try {
             /* Get User's Current Stake */
@@ -397,39 +261,6 @@ export default function useUser() {
         }
     }
 
-    async function getUserAnalytics() {
-        try {
-            const requestOptions = {
-                method: 'GET',
-                headers: {
-                    'Content-Type': 'application/json'
-                }
-            }
-            // TODO: Re-enable this when athena is ready
-            const response = await fetch(`${usersUrl}/analytics`, requestOptions)
-            const { error, message, data: athenaData } = await response.json()
-            // console.log('data from analytics :>> ', data)
-            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.
-
-            // We get the user's analytics (wallet balance) data here.
-            mockData()
-            console.log('txData.value :>> ', txData.value)
-            const data = txData.value
-
-            // TODO: Pass data from above when the API / data is ready
-            rawUserAnalytics.value = data
-
-            // This compute's the user's wallet balance over time
-            computeUserAnalytics()
-            return { error, message, data }
-        } catch (error: any) {
-            throw new Error(error.message || 'Error getting user analytics')
-        }
-    }
-
     async function getUserOperators(): Promise<void> {
         const userAddresses = (user.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
 
@@ -545,7 +376,7 @@ export default function useUser() {
             watch(user, async () => {
                 if (user.value && !initializedUser.value) {
                     initializedUser.value = true
-                    await Promise.all([refreshBreakdown(), getUserOperators(), getUserAnalytics()])
+                    await Promise.all([refreshBreakdown(), getUserOperators()])
                 } else if (!user.value) {
                     uninitializeUser()
                 }
@@ -653,7 +484,7 @@ export default function useUser() {
     }
 
     function uninitializeUser() {
-        // Update user accounts, operators, analytics
+        // Update user accounts, operators
         user.value = undefined
         // Reset currentStaked, totalWalletBalance, and stakingRewards
         currentStaked.value = {
@@ -701,15 +532,11 @@ export default function useUser() {
 
     return {
         currentStaked: readonly(currentStaked),
-        finishedComputingUerAnalytics: readonly(finishedComputingUerAnalytics),
         nonregisteredOperators: readonly(nonregisteredOperators),
-        // rawUserAnalytics: readonly(rawUserAnalytics), // Causes there to be crazy warnings in browser console
-        rawUserAnalytics,
         registeredOperators: readonly(registeredOperators),
         stakingRewards: readonly(stakingRewards),
         totalWalletBalance: readonly(totalWalletBalance),
         user: readonly(user),
-        userAnalytics: readonly(userAnalytics),
         addAccountToUser,
         addOperator,
         login,
diff --git a/apps/web/src/pages/overview/Overview.vue b/apps/web/src/pages/overview/Overview.vue
index 023097633..dda5cee79 100644
--- a/apps/web/src/pages/overview/Overview.vue
+++ b/apps/web/src/pages/overview/Overview.vue
@@ -32,9 +32,9 @@ import BreakdownTable from './components/BreakdownTable.vue'
     </div>
 
     <div class="w-full flex justify-between items-start gap-[63px]">
-      <div class="h-full w-full overflow-auto">
+      <!-- <div class="h-full w-full overflow-auto">
         <BreakdownTable />
-      </div>
+      </div> -->
       <div class="1000s:sr-only not-sr-only">
         <div class="w-[300px]">
           <div class="w-full mb-[37px]">
diff --git a/apps/web/src/pages/overview/components/BreakdownChart.vue b/apps/web/src/pages/overview/components/BreakdownChart.vue
index 7e9696534..4830ba925 100644
--- a/apps/web/src/pages/overview/components/BreakdownChart.vue
+++ b/apps/web/src/pages/overview/components/BreakdownChart.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import LineChartJS from '@/components/charts/LineChartJS.vue'
-import { onMounted, ref, watch} from 'vue'
+import { onMounted, ref, toValue, watch} from 'vue'
+import useAnalytics from '@/composables/analytics'
 import useUser from '@/composables/user'
 import useScreenDimensions from '@/composables/screenDimensions'
-import { AnalyticsData, ProviderString } from '@casimir/types'
+import { AnalyticsData, ProviderString, UserAnalyticsData } from '@casimir/types'
 
-const { currentStaked, finishedComputingUerAnalytics, stakingRewards, totalWalletBalance, user, userAnalytics } = useUser()
+const { currentStaked, stakingRewards, totalWalletBalance, user } = useUser()
 const { screenWidth } = useScreenDimensions()
 
 const chardId = ref('cross_provider_chart')
@@ -51,25 +52,26 @@ const formatLegendLabel = (address: string) => {
   return (account? account.walletProvider : 'Unknown') + ' (' + start + middle + end + ')'
 }
 
-const setChartData = () => {
+const setChartData = (userAnalytics: UserAnalyticsData) => {
+  console.log('user analytics in BreakdownChart', userAnalytics)
   let labels
   let data: Array<AnalyticsData> = []
   switch (selectedTimeframe.value) {
     case '1 month':
-      labels = userAnalytics.value.oneMonth.labels
-      data = userAnalytics.value.oneMonth.data as any
+      labels = userAnalytics.oneMonth.labels
+      data = userAnalytics.oneMonth.data as any
       break
     case '6 months':
-      labels = userAnalytics.value.sixMonth.labels
-      data = userAnalytics.value.sixMonth.data as any
+      labels = userAnalytics.sixMonth.labels
+      data = userAnalytics.sixMonth.data as any
       break
     case '12 months':
-      labels = userAnalytics.value.oneYear.labels
-      data = userAnalytics.value.oneYear.data as any
+      labels = userAnalytics.oneYear.labels
+      data = userAnalytics.oneYear.data as any
       break
     case 'historical':
-      labels = userAnalytics.value.historical.labels
-      data = userAnalytics.value.historical.data as any
+      labels = userAnalytics.historical.labels
+      data = userAnalytics.historical.data as any
       break
     
     default:
@@ -93,21 +95,26 @@ const setChartData = () => {
   }
 }
 
-onMounted(async () => {
-    setChartData()
+
+const {userAnalytics, updateAnalytics } = useAnalytics()
+
+onMounted(() => {
+  setChartData(userAnalytics.value as UserAnalyticsData)
 })
 
 watch(selectedTimeframe, () => {
-  setChartData()
+  setChartData(userAnalytics.value as UserAnalyticsData)
 })
 
-watch(user, async () => {
-    setChartData()
+watch(userAnalytics, () => {
+  setChartData(userAnalytics.value as UserAnalyticsData)
 })
 
-watch(finishedComputingUerAnalytics, async () => {
-    setChartData()
+watch(user, async () => {
+  await updateAnalytics()
+  setChartData(userAnalytics.value as UserAnalyticsData)
 })
+
 </script>
 
 <template>

From ede62dd85dc2203e089f04571bc8e5b23000bc6c Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Tue, 19 Sep 2023 10:04:47 -0400
Subject: [PATCH 2/6] Re-enable the table

---
 apps/web/src/composables/analytics.ts                     | 1 +
 apps/web/src/pages/overview/Overview.vue                  | 4 ++--
 apps/web/src/pages/overview/components/BreakdownTable.vue | 6 +++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/composables/analytics.ts b/apps/web/src/composables/analytics.ts
index 175393ac5..5d8c9f042 100644
--- a/apps/web/src/composables/analytics.ts
+++ b/apps/web/src/composables/analytics.ts
@@ -213,5 +213,6 @@ export default function useAnalytics() {
         userAnalytics: readonly(userAnalytics),
         getUserAnalyticsError: readonly(getUserAnalyticsError),
         updateAnalytics,
+        rawUserAnalytics,
     }
 }
\ No newline at end of file
diff --git a/apps/web/src/pages/overview/Overview.vue b/apps/web/src/pages/overview/Overview.vue
index dda5cee79..023097633 100644
--- a/apps/web/src/pages/overview/Overview.vue
+++ b/apps/web/src/pages/overview/Overview.vue
@@ -32,9 +32,9 @@ import BreakdownTable from './components/BreakdownTable.vue'
     </div>
 
     <div class="w-full flex justify-between items-start gap-[63px]">
-      <!-- <div class="h-full w-full overflow-auto">
+      <div class="h-full w-full overflow-auto">
         <BreakdownTable />
-      </div> -->
+      </div>
       <div class="1000s:sr-only not-sr-only">
         <div class="w-[300px]">
           <div class="w-full mb-[37px]">
diff --git a/apps/web/src/pages/overview/components/BreakdownTable.vue b/apps/web/src/pages/overview/components/BreakdownTable.vue
index c5891811e..e1a18d1df 100644
--- a/apps/web/src/pages/overview/components/BreakdownTable.vue
+++ b/apps/web/src/pages/overview/components/BreakdownTable.vue
@@ -4,6 +4,7 @@ import * as XLSX from 'xlsx'
 import VueFeather from 'vue-feather'
 import useUser from '@/composables/user'
 import useFormat from '@/composables/format'
+import useAnalytics from '@/composables/analytics'
 
 const { convertString } = useFormat()
 
@@ -116,7 +117,7 @@ const tableHeaderOptions = ref(
   }
 )
 
-const { rawUserAnalytics, user } = useUser()
+const {  user } = useUser()
 
 const tableData = ref({
   Wallets: [] as {tx_hash: string, wallet_provider: string,  status: string, staking_fees: string, type: string, amount: string, bal: string,  act: string, date: string, blank_column: any, stk_amt: string, tx_type: string, stk_rwd: string }[],
@@ -248,6 +249,9 @@ const removeItemFromCheckedList = (item:any) => {
   }
 }
 
+const {rawUserAnalytics } = useAnalytics()
+
+
 const setTableData = () =>{
 
   if(!rawUserAnalytics.value) return 

From 840fbc5d654c838e859fec7d663a5d35416de204 Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Tue, 19 Sep 2023 11:13:46 -0400
Subject: [PATCH 3/6] Commit working changes to operator composable and
 component

---
 apps/web/src/composables/operators.ts     | 137 ++++++++++++++++++++++
 apps/web/src/composables/user.ts          | 112 +-----------------
 apps/web/src/pages/operators/Operator.vue |  20 +++-
 common/types/src/interfaces/Account.ts    |   2 +-
 4 files changed, 161 insertions(+), 110 deletions(-)
 create mode 100644 apps/web/src/composables/operators.ts

diff --git a/apps/web/src/composables/operators.ts b/apps/web/src/composables/operators.ts
new file mode 100644
index 000000000..ff73fd4a0
--- /dev/null
+++ b/apps/web/src/composables/operators.ts
@@ -0,0 +1,137 @@
+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(user: UserWithAccountsAndOperators) {
+    // const { user } = useUser()
+    const { ethereumUrl, ssvNetworkAddress, ssvNetworkViewsAddress, usersUrl } = useEnvironment()
+    const { manager, registry, views } = useContracts()
+
+
+    const nonregisteredOperatorsRaw = ref<Operator[]>([])
+    const registeredOperatorsRaw = ref<Operator[]>([])
+
+    async function addOperator({ address, nodeUrl }: { address: string, nodeUrl: string }) {
+        try {
+            const requestOptions = {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ address, nodeUrl })
+            }
+            const response = await fetch(`${usersUrl}/user/add-operator`, requestOptions)
+            const { error, message } = await response.json()
+            return { error, message }
+        } catch (error: any) {
+            throw new Error(error.message || 'Error adding operator')
+        }
+    }
+
+    async function getUserOperators(): Promise<void> {
+        console.log('user :>> ', user)
+        const userAddresses = user?.accounts.map((account: Account) => account.address) as string[]
+
+        const scanner = new Scanner({ 
+            ethereumUrl,
+            ssvNetworkAddress,
+            ssvNetworkViewsAddress
+        })
+
+        const ssvOperators: Operator[] = []
+        for (const address of userAddresses) {
+            const userOperators = await scanner.getOperators(address)
+            ssvOperators.push(...userOperators)
+        }
+
+        const casimirOperators: RegisteredOperator[] = []
+        for (const operator of ssvOperators) {
+            const { active, collateral, poolCount, resharing } = await registry.getOperator(operator.id)
+            const registered = active || collateral.gt(0) || poolCount.gt(0) || resharing
+            if (registered) {
+                const pools = await _getPools(operator.id)
+                // TODO: Replace these Public Nodes URLs once we have this working again
+                const operatorStore = {
+                    '654': 'https://nodes.casimir.co/eth/goerli/dkg/1',
+                    '655': 'https://nodes.casimir.co/eth/goerli/dkg/2',
+                    '656': 'https://nodes.casimir.co/eth/goerli/dkg/3',
+                    '657': 'https://nodes.casimir.co/eth/goerli/dkg/4',
+                    '658': 'https://nodes.casimir.co/eth/goerli/dkg/5',
+                    '659': 'https://nodes.casimir.co/eth/goerli/dkg/6',
+                    '660': 'https://nodes.casimir.co/eth/goerli/dkg/7',
+                    '661': 'https://nodes.casimir.co/eth/goerli/dkg/8'
+                }
+                const url = operatorStore[operator.id.toString() as keyof typeof operatorStore]
+                casimirOperators.push({
+                    ...operator,
+                    active,
+                    collateral: ethers.utils.formatEther(collateral),
+                    poolCount: poolCount.toNumber(),
+                    url,
+                    resharing,
+                    pools
+                })
+            }
+        }
+        
+        const nonregOperators = ssvOperators.filter((operator: any) => {
+            const idRegistered = casimirOperators.find((registeredOperator: any) => registeredOperator.id === operator.id)
+            return !idRegistered
+        })
+
+        nonregisteredOperatorsRaw.value = nonregOperators as Array<Operator>
+        registeredOperatorsRaw.value = casimirOperators as Array<RegisteredOperator>
+        console.log('Ran Operators.ts', nonregisteredOperatorsRaw.value, registeredOperatorsRaw.value)
+    }
+
+    async function _getPools(operatorId: number): Promise<Pool[]> {
+        const pools: Pool[] = []
+    
+        const poolIds = [
+            ...await manager.getPendingPoolIds(),
+            ...await manager.getStakedPoolIds()
+        ]
+    
+        for (const poolId of poolIds) {
+            const poolDetails = await views.getPoolDetails(poolId)
+            const pool = {
+                ...poolDetails,
+                operatorIds: poolDetails.operatorIds.map(id => id.toNumber()),
+                reshares: poolDetails.reshares.toNumber()
+            }
+            if (pool.operatorIds.includes(operatorId)) {
+                pools.push(pool)
+            }
+        }
+        return pools
+    }
+
+
+    function listenForContractEvents() {
+        try {
+            registry.on('OperatorRegistered', getUserOperators)
+            // registry.on('OperatorDeregistered', getUserOperators)
+            // registry.on('DeregistrationRequested', getUserOperators)
+        } catch (err) {
+            console.log(`There was an error in listenForContractEvents: ${err}`)
+        }
+    }
+
+    watchEffect(async () => {
+        if(user){
+            console.log('reached watchEffect in Operators.ts', user)
+            listenForContractEvents()
+            await getUserOperators()
+        }
+    })
+
+    return { 
+        nonregisteredOperatorsRaw: readonly(nonregisteredOperatorsRaw),
+        registeredOperatorsRaw: readonly(registeredOperatorsRaw),
+        addOperator,
+    }
+}
\ No newline at end of file
diff --git a/apps/web/src/composables/user.ts b/apps/web/src/composables/user.ts
index 1ad2474fe..c0499f556 100644
--- a/apps/web/src/composables/user.ts
+++ b/apps/web/src/composables/user.ts
@@ -1,7 +1,7 @@
 import { onMounted, onUnmounted, readonly, ref, watch } from 'vue'
 import * as Session from 'supertokens-web-js/recipe/session'
 import { ethers } from 'ethers'
-import { Account, BreakdownAmount, BreakdownString, ContractEventsByAddress, Currency, LoginCredentials, Pool, ProviderString, RegisteredOperator, User, UserWithAccountsAndOperators } from '@casimir/types'
+import { Account, BreakdownAmount, BreakdownString, ContractEventsByAddress, LoginCredentials, UserWithAccountsAndOperators } from '@casimir/types'
 import useContracts from '@/composables/contracts'
 import useEnvironment from '@/composables/environment'
 import useEthers from '@/composables/ethers'
@@ -10,11 +10,10 @@ import useLedger from '@/composables/ledger'
 import usePrice from '@/composables/price'
 import useTrezor from '@/composables/trezor'
 import useWalletConnect from '@/composables/walletConnectV2'
-import { Operator, Scanner } from '@casimir/ssv'
 
 // Test address: 0xd557a5745d4560B24D36A68b52351ffF9c86A212
-const { manager, registry, views } = useContracts()
-const { ethereumUrl, ssvNetworkAddress, ssvNetworkViewsAddress, usersUrl } = useEnvironment()
+const { manager} = useContracts()
+const { ethereumUrl, usersUrl } = useEnvironment()
 const { ethersProviderList, loginWithEthers } = useEthers()
 const { formatNumber } = useFormat()
 const { loginWithLedger } = useLedger()
@@ -24,9 +23,7 @@ const { loginWithWalletConnectV2, initializeWalletConnect, uninitializeWalletCon
 
 const initializeComposable = ref(false)
 const initializedUser = ref(false)
-const nonregisteredOperators = ref<Operator[]>([])
 const provider = new ethers.providers.JsonRpcProvider(ethereumUrl)
-const registeredOperators = ref<Operator[]>([])
 const user = ref<UserWithAccountsAndOperators | undefined>(undefined)
 
 const currentStaked = ref<BreakdownAmount>({
@@ -76,23 +73,6 @@ export default function useUser() {
         }
     }
 
-    async function addOperator({ address, nodeUrl }: { address: string, nodeUrl: string }) {
-        try {
-            const requestOptions = {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ address, nodeUrl })
-            }
-            const response = await fetch(`${usersUrl}/user/add-operator`, requestOptions)
-            const { error, message } = await response.json()
-            return { error, message }
-        } catch (error: any) {
-            throw new Error(error.message || 'Error adding operator')
-        }
-    }
-
     async function blockListener(blockNumber: number) {
         if (!user.value) return
         console.log('blockNumber :>> ', blockNumber)
@@ -261,69 +241,12 @@ export default function useUser() {
         }
     }
 
-    async function getUserOperators(): Promise<void> {
-        const userAddresses = (user.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
-
-        const scanner = new Scanner({ 
-            ethereumUrl,
-            ssvNetworkAddress,
-            ssvNetworkViewsAddress
-        })
-
-        const ssvOperators: Operator[] = []
-        for (const address of userAddresses) {
-            const userOperators = await scanner.getOperators(address)
-            ssvOperators.push(...userOperators)
-        }
-
-        const casimirOperators: RegisteredOperator[] = []
-        for (const operator of ssvOperators) {
-            const { active, collateral, poolCount, resharing } = await registry.getOperator(operator.id)
-            const registered = active || collateral.gt(0) || poolCount.gt(0) || resharing
-            if (registered) {
-                const pools = await _getPools(operator.id)
-                // TODO: Replace these Public Nodes URLs once we have this working again
-                const operatorStore = {
-                    '654': 'https://nodes.casimir.co/eth/goerli/dkg/1',
-                    '655': 'https://nodes.casimir.co/eth/goerli/dkg/2',
-                    '656': 'https://nodes.casimir.co/eth/goerli/dkg/3',
-                    '657': 'https://nodes.casimir.co/eth/goerli/dkg/4',
-                    '658': 'https://nodes.casimir.co/eth/goerli/dkg/5',
-                    '659': 'https://nodes.casimir.co/eth/goerli/dkg/6',
-                    '660': 'https://nodes.casimir.co/eth/goerli/dkg/7',
-                    '661': 'https://nodes.casimir.co/eth/goerli/dkg/8'
-                }
-                const url = operatorStore[operator.id.toString() as keyof typeof operatorStore]
-                casimirOperators.push({
-                    ...operator,
-                    active,
-                    collateral: ethers.utils.formatEther(collateral),
-                    poolCount: poolCount.toNumber(),
-                    url,
-                    resharing,
-                    pools
-                })
-            }
-        }
-        
-        const nonregOperators = ssvOperators.filter((operator: any) => {
-            const idRegistered = casimirOperators.find((registeredOperator: any) => registeredOperator.id === operator.id)
-            return !idRegistered
-        })
-
-        nonregisteredOperators.value = nonregOperators as Array<Operator>
-        registeredOperators.value = casimirOperators as Array<RegisteredOperator>
-    }
-
     function listenForContractEvents() {
         stopListeningForContractEvents() // Clear old listeners
         try {
             manager.on('StakeDeposited', stakeDepositedListener)
             manager.on('StakeRebalanced', stakeRebalancedListener)
             manager.on('WithdrawalInitiated', withdrawalInitiatedListener)
-            registry.on('OperatorRegistered', getUserOperators)
-            // registry.on('OperatorDeregistered', getUserOperators)
-            // registry.on('DeregistrationRequested', getUserOperators)
         } catch (err) {
             console.log(`There was an error in listenForContractEvents: ${err}`)
         }
@@ -376,7 +299,7 @@ export default function useUser() {
             watch(user, async () => {
                 if (user.value && !initializedUser.value) {
                     initializedUser.value = true
-                    await Promise.all([refreshBreakdown(), getUserOperators()])
+                    await Promise.all([refreshBreakdown()])
                 } else if (!user.value) {
                     uninitializeUser()
                 }
@@ -484,7 +407,7 @@ export default function useUser() {
     }
 
     function uninitializeUser() {
-        // Update user accounts, operators
+        // Update user accounts
         user.value = undefined
         // Reset currentStaked, totalWalletBalance, and stakingRewards
         currentStaked.value = {
@@ -532,37 +455,12 @@ export default function useUser() {
 
     return {
         currentStaked: readonly(currentStaked),
-        nonregisteredOperators: readonly(nonregisteredOperators),
-        registeredOperators: readonly(registeredOperators),
         stakingRewards: readonly(stakingRewards),
         totalWalletBalance: readonly(totalWalletBalance),
         user: readonly(user),
         addAccountToUser,
-        addOperator,
         login,
         logout,
         updateUserAgreement
     }
-}
-
-async function _getPools(operatorId: number): Promise<Pool[]> {
-    const pools: Pool[] = []
-
-    const poolIds = [
-        ...await manager.getPendingPoolIds(),
-        ...await manager.getStakedPoolIds()
-    ]
-
-    for (const poolId of poolIds) {
-        const poolDetails = await views.getPoolDetails(poolId)
-        const pool = {
-            ...poolDetails,
-            operatorIds: poolDetails.operatorIds.map(id => id.toNumber()),
-            reshares: poolDetails.reshares.toNumber()
-        }
-        if (pool.operatorIds.includes(operatorId)) {
-            pools.push(pool)
-        }
-    }
-    return pools
 }
\ No newline at end of file
diff --git a/apps/web/src/pages/operators/Operator.vue b/apps/web/src/pages/operators/Operator.vue
index 7451c6b59..ff3eb755f 100644
--- a/apps/web/src/pages/operators/Operator.vue
+++ b/apps/web/src/pages/operators/Operator.vue
@@ -6,11 +6,15 @@ import useContracts from '@/composables/contracts'
 import useFiles from '@/composables/files'
 import useFormat from '@/composables/format'
 import useUser from '@/composables/user'
+import useOperators from '@/composables/operators'
+import { UserWithAccountsAndOperators} from '@casimir/types'
 
-const {  registerOperatorWithCasimir, loadingRegisteredOperators } = useContracts()
+
+const { registerOperatorWithCasimir, loadingRegisteredOperators } = useContracts()
 const { exportFile } = useFiles()
 const { convertString } = useFormat()
-const { user, nonregisteredOperators, registeredOperators, addOperator } = useUser()
+const { user,  } = useUser()
+const { addOperator } = useOperators(user.value as UserWithAccountsAndOperators)
 
 // Form inputs
 const selectedWallet = ref({address: '', wallet_provider: ''})
@@ -85,6 +89,7 @@ const submitButtonTxt = ref('Submit')
 
 onMounted(async () => {
   if (user.value) {
+    
     // await getUserOperators()
     const primaryAccount = user.value.accounts.find(item => { return item.address === user.value?.address})
     selectedWallet.value = {address: primaryAccount?.address as string, wallet_provider: primaryAccount?.walletProvider as string}
@@ -104,8 +109,17 @@ onMounted(async () => {
   }
 })
 
+const nonregisteredOperators = ref()
+const registeredOperators = ref()
+
 watch(user, async () => {
   if (user.value) {
+    const { nonregisteredOperatorsRaw, registeredOperatorsRaw } = useOperators(user.value as UserWithAccountsAndOperators)
+
+    console.log(nonregisteredOperatorsRaw, registeredOperatorsRaw)
+    nonregisteredOperators.value = nonregisteredOperatorsRaw.value
+    registeredOperators.value = registeredOperatorsRaw.value
+
     // await getUserOperators()
     if (selectedWallet.value.address === ''){
       const primaryAccount = user.value.accounts.find(item => { item.address === user.value?.address})
@@ -125,6 +139,7 @@ watch(selectedWallet, async () =>{
   if (selectedWallet.value.address === '') {
     availableOperatorIDs.value = []
   } else {
+    console.log('nonregisteredOperators on select wallet', nonregisteredOperators)
     availableOperatorIDs.value = [...nonregisteredOperators.value].filter((operator: any) => operator.ownerAddress === selectedWallet.value.address).map((operator: any) => operator.id)}
 })
 
@@ -146,6 +161,7 @@ watch([searchInput, selectedHeader, selectedOrientation, currentPage], ()=>{
   filterData()
 })
 
+
 const openWalletsModal = () => {
   const el = document.getElementById('connect_wallet_button')
   if (el) {
diff --git a/common/types/src/interfaces/Account.ts b/common/types/src/interfaces/Account.ts
index 9929b146c..f2360b43c 100644
--- a/common/types/src/interfaces/Account.ts
+++ b/common/types/src/interfaces/Account.ts
@@ -15,7 +15,7 @@ export interface Account {
     /** The unique account id */
     id: number
     /** The account snapshots */
-    snapshots?: BalanceSnapshot[]
+    // snapshots?: BalanceSnapshot[]
     /** The account transactions */
     // transactions?: Transaction[]
     /** The user id associated with the account */

From 6af875afae229375b321b32061dbb93bf17663a6 Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Wed, 20 Sep 2023 15:11:09 -0400
Subject: [PATCH 4/6] Refactor Operator.vue and operators.ts

---
 apps/web/src/composables/operators.ts     | 36 +++++++++++++----------
 apps/web/src/pages/operators/Operator.vue | 27 +++++++----------
 2 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/apps/web/src/composables/operators.ts b/apps/web/src/composables/operators.ts
index ff73fd4a0..fc7d71267 100644
--- a/apps/web/src/composables/operators.ts
+++ b/apps/web/src/composables/operators.ts
@@ -6,14 +6,14 @@ import { Operator, Scanner } from '@casimir/ssv'
 import { RegisteredOperator, Pool, Account, UserWithAccountsAndOperators } from '@casimir/types'
 import { ethers } from 'ethers'
 
-export default function useOperators(user: UserWithAccountsAndOperators) {
+export default function useOperators() {
     // const { user } = useUser()
     const { ethereumUrl, ssvNetworkAddress, ssvNetworkViewsAddress, usersUrl } = useEnvironment()
     const { manager, registry, views } = useContracts()
 
 
-    const nonregisteredOperatorsRaw = ref<Operator[]>([])
-    const registeredOperatorsRaw = ref<Operator[]>([])
+    const nonregisteredOperators = ref<Operator[]>([])
+    const registeredOperators = ref<Operator[]>([])
 
     async function addOperator({ address, nodeUrl }: { address: string, nodeUrl: string }) {
         try {
@@ -32,7 +32,7 @@ export default function useOperators(user: UserWithAccountsAndOperators) {
         }
     }
 
-    async function getUserOperators(): Promise<void> {
+    async function getUserOperators(user: UserWithAccountsAndOperators): Promise<void> {
         console.log('user :>> ', user)
         const userAddresses = user?.accounts.map((account: Account) => account.address) as string[]
 
@@ -83,9 +83,9 @@ export default function useOperators(user: UserWithAccountsAndOperators) {
             return !idRegistered
         })
 
-        nonregisteredOperatorsRaw.value = nonregOperators as Array<Operator>
-        registeredOperatorsRaw.value = casimirOperators as Array<RegisteredOperator>
-        console.log('Ran Operators.ts', nonregisteredOperatorsRaw.value, registeredOperatorsRaw.value)
+        nonregisteredOperators.value = nonregOperators as Array<Operator>
+        registeredOperators.value = casimirOperators as Array<RegisteredOperator>
+        console.log('Ran Operators.ts', nonregisteredOperators.value, registeredOperators.value)
     }
 
     async function _getPools(operatorId: number): Promise<Pool[]> {
@@ -121,17 +121,23 @@ export default function useOperators(user: UserWithAccountsAndOperators) {
         }
     }
 
-    watchEffect(async () => {
-        if(user){
-            console.log('reached watchEffect in Operators.ts', user)
-            listenForContractEvents()
-            await getUserOperators()
-        }
+    async function initializeComposable(user: UserWithAccountsAndOperators){
+        console.log('reached watchEffect in Operators.ts', user)
+        listenForContractEvents()
+        await getUserOperators(user)
+    }
+    watchEffect( () => {
+        // if(user){
+            // console.log('reached watchEffect in Operators.ts', user)
+            // listenForContractEvents()
+            // await getUserOperators()
+        // }
     })
 
     return { 
-        nonregisteredOperatorsRaw: readonly(nonregisteredOperatorsRaw),
-        registeredOperatorsRaw: readonly(registeredOperatorsRaw),
+        nonregisteredOperators: readonly(nonregisteredOperators),
+        registeredOperators: readonly(registeredOperators),
         addOperator,
+        initializeComposable
     }
 }
\ No newline at end of file
diff --git a/apps/web/src/pages/operators/Operator.vue b/apps/web/src/pages/operators/Operator.vue
index ff3eb755f..08d84f97b 100644
--- a/apps/web/src/pages/operators/Operator.vue
+++ b/apps/web/src/pages/operators/Operator.vue
@@ -14,7 +14,6 @@ const { registerOperatorWithCasimir, loadingRegisteredOperators } = useContracts
 const { exportFile } = useFiles()
 const { convertString } = useFormat()
 const { user,  } = useUser()
-const { addOperator } = useOperators(user.value as UserWithAccountsAndOperators)
 
 // Form inputs
 const selectedWallet = ref({address: '', wallet_provider: ''})
@@ -89,12 +88,14 @@ const submitButtonTxt = ref('Submit')
 
 onMounted(async () => {
   if (user.value) {
-    
-    // await getUserOperators()
     const primaryAccount = user.value.accounts.find(item => { return item.address === user.value?.address})
+    console.log('primaryAccount in onMounted :>> ', primaryAccount)
     selectedWallet.value = {address: primaryAccount?.address as string, wallet_provider: primaryAccount?.walletProvider as string}
 
 
+    await initializeComposable(user.value as UserWithAccountsAndOperators)
+
+
     // Autofill disable
     const disableAutofill = () => {
       let inputs = document.getElementsByTagName('input')
@@ -109,22 +110,19 @@ onMounted(async () => {
   }
 })
 
-const nonregisteredOperators = ref()
-const registeredOperators = ref()
+const { addOperator, initializeComposable, nonregisteredOperators, registeredOperators } = useOperators()
 
 watch(user, async () => {
   if (user.value) {
-    const { nonregisteredOperatorsRaw, registeredOperatorsRaw } = useOperators(user.value as UserWithAccountsAndOperators)
 
-    console.log(nonregisteredOperatorsRaw, registeredOperatorsRaw)
-    nonregisteredOperators.value = nonregisteredOperatorsRaw.value
-    registeredOperators.value = registeredOperatorsRaw.value
 
-    // await getUserOperators()
     if (selectedWallet.value.address === ''){
-      const primaryAccount = user.value.accounts.find(item => { item.address === user.value?.address})
-      selectedWallet.value = {address: primaryAccount?.address as string, wallet_provider: primaryAccount?.walletProvider as string}
+      selectedWallet.value = {address: user.value.address as string, wallet_provider: user.value.walletProvider as string}
     }
+
+
+    await initializeComposable(user.value as UserWithAccountsAndOperators)
+
     filterData()
   }
 })
@@ -134,12 +132,9 @@ watch(selectedWallet, async () =>{
   selectedPublicNodeURL.value = ''
   selectedCollateral.value = ''
 
-  // await getUserOperators()
-
   if (selectedWallet.value.address === '') {
     availableOperatorIDs.value = []
-  } else {
-    console.log('nonregisteredOperators on select wallet', nonregisteredOperators)
+  } else if(nonregisteredOperators.value && nonregisteredOperators.value.length > 0) {
     availableOperatorIDs.value = [...nonregisteredOperators.value].filter((operator: any) => operator.ownerAddress === selectedWallet.value.address).map((operator: any) => operator.id)}
 })
 

From d3384287a15cc32729096a30db62935e46053bd7 Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Wed, 20 Sep 2023 15:24:33 -0400
Subject: [PATCH 5/6] Finalize operators composable in Operator.vue

---
 apps/web/src/composables/analytics.ts     |  3 ---
 apps/web/src/composables/operators.ts     |  9 +--------
 apps/web/src/pages/operators/Operator.vue | 21 ++++++++-------------
 3 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/composables/analytics.ts b/apps/web/src/composables/analytics.ts
index 5d8c9f042..f983d5020 100644
--- a/apps/web/src/composables/analytics.ts
+++ b/apps/web/src/composables/analytics.ts
@@ -31,8 +31,6 @@ export default function useAnalytics() {
 
     function computeUserAnalytics() {
         finishedComputingUerAnalytics.value = false
-        // const result = userAnalytics.value
-        console.log('rawUserAnalytics in computeAnalytics :>> ', rawUserAnalytics)
         const sortedTransactions = rawUserAnalytics.value.sort((a: any, b: any) => {
             new Date(a.receivedAt).getTime() - new Date(b.receivedAt).getTime()
         })
@@ -163,7 +161,6 @@ export default function useAnalytics() {
 
             // We get the user's analytics (wallet balance) data here.
             mockData()
-            console.log('txData.value :>> ', txData.value)
             const data = txData.value
 
             // TODO: Pass data from above when the API / data is ready
diff --git a/apps/web/src/composables/operators.ts b/apps/web/src/composables/operators.ts
index fc7d71267..79e869447 100644
--- a/apps/web/src/composables/operators.ts
+++ b/apps/web/src/composables/operators.ts
@@ -33,7 +33,6 @@ export default function useOperators() {
     }
 
     async function getUserOperators(user: UserWithAccountsAndOperators): Promise<void> {
-        console.log('user :>> ', user)
         const userAddresses = user?.accounts.map((account: Account) => account.address) as string[]
 
         const scanner = new Scanner({ 
@@ -85,7 +84,6 @@ export default function useOperators() {
 
         nonregisteredOperators.value = nonregOperators as Array<Operator>
         registeredOperators.value = casimirOperators as Array<RegisteredOperator>
-        console.log('Ran Operators.ts', nonregisteredOperators.value, registeredOperators.value)
     }
 
     async function _getPools(operatorId: number): Promise<Pool[]> {
@@ -122,16 +120,11 @@ export default function useOperators() {
     }
 
     async function initializeComposable(user: UserWithAccountsAndOperators){
-        console.log('reached watchEffect in Operators.ts', user)
         listenForContractEvents()
         await getUserOperators(user)
     }
     watchEffect( () => {
-        // if(user){
-            // console.log('reached watchEffect in Operators.ts', user)
-            // listenForContractEvents()
-            // await getUserOperators()
-        // }
+        // 
     })
 
     return { 
diff --git a/apps/web/src/pages/operators/Operator.vue b/apps/web/src/pages/operators/Operator.vue
index 08d84f97b..4c30e6d9e 100644
--- a/apps/web/src/pages/operators/Operator.vue
+++ b/apps/web/src/pages/operators/Operator.vue
@@ -30,7 +30,7 @@ const onSelectOperatorIDBlur = () => {
         openSelectOperatorID.value = false
     }, 200)
 }
-// @chris need a way to find out possible operators on selecting a wallet address
+
 const availableOperatorIDs = ref([] as string[])
 const selectedPublicNodeURL = ref('')
 const selectedCollateral = ref()
@@ -88,14 +88,9 @@ const submitButtonTxt = ref('Submit')
 
 onMounted(async () => {
   if (user.value) {
-    const primaryAccount = user.value.accounts.find(item => { return item.address === user.value?.address})
-    console.log('primaryAccount in onMounted :>> ', primaryAccount)
-    selectedWallet.value = {address: primaryAccount?.address as string, wallet_provider: primaryAccount?.walletProvider as string}
-
 
     await initializeComposable(user.value as UserWithAccountsAndOperators)
 
-
     // Autofill disable
     const disableAutofill = () => {
       let inputs = document.getElementsByTagName('input')
@@ -114,13 +109,6 @@ const { addOperator, initializeComposable, nonregisteredOperators, registeredOpe
 
 watch(user, async () => {
   if (user.value) {
-
-
-    if (selectedWallet.value.address === ''){
-      selectedWallet.value = {address: user.value.address as string, wallet_provider: user.value.walletProvider as string}
-    }
-
-
     await initializeComposable(user.value as UserWithAccountsAndOperators)
 
     filterData()
@@ -152,11 +140,18 @@ watch(registeredOperators, () => {
   filterData()
 })
 
+watch(openAddOperatorModal, () =>{
+  if(openAddOperatorModal.value){
+    selectedWallet.value = {address: user.value?.address as string, wallet_provider: user.value?.walletProvider as string}
+  }
+})
+
 watch([searchInput, selectedHeader, selectedOrientation, currentPage], ()=>{
   filterData()
 })
 
 
+
 const openWalletsModal = () => {
   const el = document.getElementById('connect_wallet_button')
   if (el) {

From 012ef2f1e3b07db268ef533b59e87706f517c05c Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Thu, 21 Sep 2023 15:44:22 -0400
Subject: [PATCH 6/6] Break out breakdown metrics into its own composable

---
 apps/web/src/composables/breakdownMetrics.ts  | 261 +++++++++++++++++
 apps/web/src/composables/user.ts              | 273 +-----------------
 .../overview/components/BreakdownChart.vue    |  19 +-
 3 files changed, 284 insertions(+), 269 deletions(-)
 create mode 100644 apps/web/src/composables/breakdownMetrics.ts

diff --git a/apps/web/src/composables/breakdownMetrics.ts b/apps/web/src/composables/breakdownMetrics.ts
new file mode 100644
index 000000000..655aac04a
--- /dev/null
+++ b/apps/web/src/composables/breakdownMetrics.ts
@@ -0,0 +1,261 @@
+import { readonly, ref, toValue } from 'vue'
+import { ethers } from 'ethers'
+import { Account, BreakdownAmount, BreakdownString, ContractEventsByAddress, UserWithAccountsAndOperators } from '@casimir/types'
+import useContracts from '@/composables/contracts'
+import useEnvironment from '@/composables/environment'
+import useFormat from '@/composables/format'
+import usePrice from '@/composables/price'
+
+const { manager } = useContracts()
+const { ethereumUrl } = useEnvironment()
+const { formatNumber } = useFormat()
+const { getCurrentPrice } = usePrice()
+
+const provider = new ethers.providers.JsonRpcProvider(ethereumUrl)
+
+export default function useBreakdownMetrics() {
+    const userValue = ref()
+
+    const currentStaked = ref<BreakdownAmount>({
+        eth: '0 ETH',
+        usd: '$0.00'
+    })
+    
+    const stakingRewards = ref<BreakdownAmount>({
+        eth: '0 ETH',
+        usd: '$0.00'
+    })
+    
+    const totalWalletBalance = ref<BreakdownAmount>({
+        eth: '0 ETH',
+        usd: '$0.00'
+    })
+
+    async function getAllTimeStakingRewards() : Promise<BreakdownAmount> {
+        try {
+            /* Get User's Current Stake */
+            const addresses = (userValue.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
+            const currentUserStakePromises = [] as Array<Promise<ethers.BigNumber>>
+            addresses.forEach(address => currentUserStakePromises.push(manager.getUserStake(address)))
+            const settledCurrentUserStakePromises = await Promise.allSettled(currentUserStakePromises) as Array<PromiseFulfilledResult<ethers.BigNumber>>
+            const currentUserStake = settledCurrentUserStakePromises.filter(result => result.status === 'fulfilled').map(result => result.value)
+            const currentUserStakeSum = currentUserStake.reduce((acc, curr) => acc.add(curr), ethers.BigNumber.from(0))
+            const currentUserStakeETH = parseFloat(ethers.utils.formatEther(currentUserStakeSum))
+
+            /* Get User's All Time Deposits and Withdrawals */
+            const userEventTotalsPromises = [] as Array<Promise<ContractEventsByAddress>>
+            addresses.forEach(address => {userEventTotalsPromises.push(getContractEventsTotalsByAddress(address))})
+            const userEventTotals = await Promise.all(userEventTotalsPromises) as Array<ContractEventsByAddress>
+            const userEventTotalsSum = userEventTotals.reduce((acc, curr) => {
+                const { StakeDeposited, WithdrawalInitiated } = curr
+                return {
+                  StakeDeposited: acc.StakeDeposited + (StakeDeposited || 0),
+                  WithdrawalInitiated: acc.WithdrawalInitiated + (WithdrawalInitiated || 0),
+                }
+              }, { StakeDeposited: 0, WithdrawalInitiated: 0 } as { StakeDeposited: number; WithdrawalInitiated: number })
+              
+              
+            const stakedDepositedETH = userEventTotalsSum.StakeDeposited
+            const withdrawalInitiatedETH = userEventTotalsSum.WithdrawalInitiated
+
+            /* Get User's All Time Rewards by Subtracting (StakeDeposited + WithdrawalInitiated) from CurrentStake */
+            const currentUserStakeMinusEvents = currentUserStakeETH - (stakedDepositedETH as number) - (withdrawalInitiatedETH as number)
+            return {
+                eth: `${formatNumber(currentUserStakeMinusEvents)} ETH`,
+                usd: `$${formatNumber(currentUserStakeMinusEvents * (await getCurrentPrice({ coin: 'ETH', currency: 'USD' })))}`
+            }
+        } catch (err) {
+            console.error(`There was an error in getAllTimeStakingRewards: ${err}`)
+            return {
+                eth: '0 ETH',
+                usd: '$ 0.00'
+            }
+        }
+    }
+    
+    async function getContractEventsTotalsByAddress(address: string) : Promise<ContractEventsByAddress> {
+        try {
+            const eventList = [
+                'StakeDeposited',
+                'StakeRebalanced',
+                'WithdrawalInitiated'
+            ]
+            const eventFilters = eventList.map(event => {
+                if (event === 'StakeRebalanced') return manager.filters[event]()
+                return manager.filters[event](address)
+            })
+
+            // const items = (await Promise.all(eventFilters.map(async eventFilter => await manager.queryFilter(eventFilter, 0, 'latest'))))
+            // Use Promise.allSettled to avoid errors when a filter returns no results
+            const items = (await Promise.allSettled(eventFilters.map(async eventFilter => await manager.queryFilter(eventFilter, 0, 'latest')))).map(result => result.status === 'fulfilled' ? result.value : [])
+    
+            const userEventTotals = eventList.reduce((acc, event) => {
+                acc[event] = 0
+                return acc
+            }, {} as { [key: string]: number })
+    
+            for (const item of items) {
+                for (const action of item) {
+                    const { args, event } = action
+                    const { amount } = args
+                    const amountInEth = parseFloat(ethers.utils.formatEther(amount))
+                    userEventTotals[event as string] += amountInEth
+                }
+            }
+    
+            return userEventTotals
+        } catch (err) {
+            console.error(`There was an error in getContractEventsTotalsByAddress: ${err}`)
+            return {
+                StakeDeposited: 0,
+                StakeRebalanced: 0,
+                WithdrawalInitiated: 0
+            }
+        }
+    }
+
+    async function getCurrentStaked(): Promise<BreakdownAmount> {
+        const addresses = (userValue.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
+        try {
+            const promises = addresses.map((address) => manager.getUserStake(address))
+            const settledPromises = await Promise.allSettled(promises) as Array<PromiseFulfilledResult<ethers.BigNumber>>
+            const currentStaked = settledPromises
+                .filter((result) => result.status === 'fulfilled')
+                .map((result) => result.value)
+    
+            const totalStaked = currentStaked.reduce((accumulator, currentValue) => accumulator.add(currentValue), ethers.BigNumber.from(0))
+            const totalStakedUSD = parseFloat(ethers.utils.formatEther(totalStaked)) * (await getCurrentPrice({ coin: 'ETH', currency: 'USD' }))
+            const totalStakedETH = parseFloat(ethers.utils.formatEther(totalStaked))
+            const formattedTotalStakedUSD = formatNumber(totalStakedUSD)
+            const formattedTotalStakedETH = formatNumber(totalStakedETH)
+            return {
+                eth: formattedTotalStakedETH + ' ETH',
+                usd: '$ ' + formattedTotalStakedUSD
+            }
+        } catch (error) {
+            console.log('Error occurred while fetching stake:', error)
+            return {
+                eth: '0ETH',
+                usd: '$0.00'
+            }
+        }
+    }
+
+    async function getEthersBalance(address: string) : Promise<GLfloat> {
+        const balance = await provider.getBalance(address)
+        return parseFloat(ethers.utils.formatEther(balance))
+    }
+
+    async function getTotalWalletBalance() : Promise<BreakdownAmount> {
+        const promises = [] as Array<Promise<any>>
+        const addresses = (userValue.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
+        addresses.forEach((address) => { promises.push(getEthersBalance(address)) })
+        const totalWalletBalance = (await Promise.all(promises)).reduce((acc, curr) => acc + curr, 0)
+        const totalWalletBalanceUSD = totalWalletBalance * (await getCurrentPrice({ coin: 'ETH', currency: 'USD' }))
+        const formattedTotalWalletBalance = formatNumber(totalWalletBalance)
+        const formattedTotalWalletBalanceUSD = formatNumber(totalWalletBalanceUSD)
+        return {
+            eth: formattedTotalWalletBalance + ' ETH',
+            usd: '$ ' + formattedTotalWalletBalanceUSD
+        }
+    }
+
+    async function refreshBreakdown() {
+        try {
+            setBreakdownValue({ name: 'currentStaked', ...await getCurrentStaked() })
+            setBreakdownValue({ name: 'totalWalletBalance', ...await getTotalWalletBalance() })
+            setBreakdownValue({ name: 'stakingRewardsEarned', ...await getAllTimeStakingRewards() })
+        } catch (err) {
+            console.log(`There was an error in refreshBreakdown: ${err}`)
+        }
+    }
+
+    function setBreakdownValue({ name, eth, usd }: { name: BreakdownString, eth: string, usd: string}) {
+        switch (name) {
+            case 'currentStaked':
+                currentStaked.value = {
+                    eth,
+                    usd
+                }
+            break
+            case 'totalWalletBalance':
+                totalWalletBalance.value = {
+                    eth,
+                    usd
+                }
+            break
+            case 'stakingRewardsEarned':
+                stakingRewards.value = {
+                    eth,
+                    usd
+                }
+            break
+        }
+    }
+
+    function listenForContractEvents() {
+        stopListeningForContractEvents() // Clear old listeners
+        try {
+            manager.on('StakeDeposited', stakeDepositedListener)
+            manager.on('StakeRebalanced', stakeRebalancedListener)
+            manager.on('WithdrawalInitiated', withdrawalInitiatedListener)
+        } catch (err) {
+            console.log(`There was an error in listenForContractEvents: ${err}`)
+        }
+    }
+
+    function stopListeningForContractEvents() {
+        manager.removeListener('StakeDeposited', stakeDepositedListener)
+        manager.removeListener('StakeRebalanced', stakeRebalancedListener)
+        manager.removeListener('WithdrawalInitiated', withdrawalInitiatedListener)
+    }
+
+    const stakeDepositedListener = async () => await refreshBreakdown()
+    const stakeRebalancedListener = async () => await refreshBreakdown()
+    const withdrawalInitiatedListener = async () => await refreshBreakdown()
+
+    async function blockListener(blockNumber: number) {
+        if (!userValue.value) return
+        console.log('blockNumber :>> ', blockNumber)
+        const addresses = (userValue.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
+        const block = await provider.getBlockWithTransactions(blockNumber)
+        
+        const txs = block.transactions.map(async (tx: any) => {
+            if (addresses.includes(tx.from.toLowerCase())) {
+                console.log('tx :>> ', tx)
+                try {
+                    // const response = manager.interface.parseTransaction({ data: tx.data })
+                    // console.log('response :>> ', response)
+                    await refreshBreakdown()
+                } catch (error) {
+                    console.error('Error parsing transaction:', error)
+                }
+            }
+        })
+    
+        await Promise.all(txs)
+    }
+    
+    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()
+        await refreshBreakdown()
+    }
+
+    async function uninitializeComposable(){
+        userValue.value = undefined
+        provider.removeAllListeners('block')
+        stopListeningForContractEvents()
+    }
+    
+    return {
+        currentStaked: readonly(currentStaked),
+        stakingRewards: readonly(stakingRewards),
+        totalWalletBalance: readonly(totalWalletBalance),
+        initializeComposable,
+        uninitializeComposable
+    }
+}
\ No newline at end of file
diff --git a/apps/web/src/composables/user.ts b/apps/web/src/composables/user.ts
index c0499f556..9c15bbb47 100644
--- a/apps/web/src/composables/user.ts
+++ b/apps/web/src/composables/user.ts
@@ -1,24 +1,18 @@
 import { onMounted, onUnmounted, readonly, ref, watch } from 'vue'
 import * as Session from 'supertokens-web-js/recipe/session'
 import { ethers } from 'ethers'
-import { Account, BreakdownAmount, BreakdownString, ContractEventsByAddress, LoginCredentials, UserWithAccountsAndOperators } from '@casimir/types'
-import useContracts from '@/composables/contracts'
+import { Account, LoginCredentials, UserWithAccountsAndOperators } from '@casimir/types'
 import useEnvironment from '@/composables/environment'
 import useEthers from '@/composables/ethers'
-import useFormat from '@/composables/format'
 import useLedger from '@/composables/ledger'
-import usePrice from '@/composables/price'
 import useTrezor from '@/composables/trezor'
 import useWalletConnect from '@/composables/walletConnectV2'
 
 // Test address: 0xd557a5745d4560B24D36A68b52351ffF9c86A212
-const { manager} = useContracts()
 const { ethereumUrl, usersUrl } = useEnvironment()
 const { ethersProviderList, loginWithEthers } = useEthers()
-const { formatNumber } = useFormat()
 const { loginWithLedger } = useLedger()
 const { loginWithTrezor } = useTrezor()
-const { getCurrentPrice } = usePrice()
 const { loginWithWalletConnectV2, initializeWalletConnect, uninitializeWalletConnect } = useWalletConnect()
 
 const initializeComposable = ref(false)
@@ -26,21 +20,6 @@ const initializedUser = ref(false)
 const provider = new ethers.providers.JsonRpcProvider(ethereumUrl)
 const user = ref<UserWithAccountsAndOperators | undefined>(undefined)
 
-const currentStaked = ref<BreakdownAmount>({
-    usd: '$0.00',
-    eth: '0 ETH'
-})
-
-const stakingRewards = ref<BreakdownAmount>({
-    usd: '$0.00',
-    eth: '0 ETH'
-})
-
-const totalWalletBalance = ref<BreakdownAmount>({
-    usd: '$0.00',
-    eth: '0 ETH'
-})
-
 export default function useUser() {
     async function addAccountToUser({ provider, address, currency }: { provider: string, address: string, currency: string}) {
         const userAccountExists = user.value?.accounts?.some((account: Account | any) => account?.address === address && account?.walletProvider === provider && account?.currency === currency)
@@ -73,157 +52,6 @@ export default function useUser() {
         }
     }
 
-    async function blockListener(blockNumber: number) {
-        if (!user.value) return
-        console.log('blockNumber :>> ', blockNumber)
-        const addresses = (user.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
-        const block = await provider.getBlockWithTransactions(blockNumber)
-        
-        const txs = block.transactions.map(async (tx: any) => {
-            if (addresses.includes(tx.from.toLowerCase())) {
-                console.log('tx :>> ', tx)
-                try {
-                    // const response = manager.interface.parseTransaction({ data: tx.data })
-                    // console.log('response :>> ', response)
-                    await refreshBreakdown()
-                } catch (error) {
-                    console.error('Error parsing transaction:', error)
-                }
-            }
-        })
-    
-        await Promise.all(txs)
-    }
-
-    async function getAllTimeStakingRewards() : Promise<BreakdownAmount> {
-        try {
-            /* Get User's Current Stake */
-            const addresses = (user.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
-            const currentUserStakePromises = [] as Array<Promise<ethers.BigNumber>>
-            addresses.forEach(address => currentUserStakePromises.push(manager.getUserStake(address)))
-            const settledCurrentUserStakePromises = await Promise.allSettled(currentUserStakePromises) as Array<PromiseFulfilledResult<ethers.BigNumber>>
-            const currentUserStake = settledCurrentUserStakePromises.filter(result => result.status === 'fulfilled').map(result => result.value)
-            const currentUserStakeSum = currentUserStake.reduce((acc, curr) => acc.add(curr), ethers.BigNumber.from(0))
-            const currentUserStakeETH = parseFloat(ethers.utils.formatEther(currentUserStakeSum))
-
-            /* Get User's All Time Deposits and Withdrawals */
-            const userEventTotalsPromises = [] as Array<Promise<ContractEventsByAddress>>
-            addresses.forEach(address => {userEventTotalsPromises.push(getContractEventsTotalsByAddress(address))})
-            const userEventTotals = await Promise.all(userEventTotalsPromises) as Array<ContractEventsByAddress>
-            const userEventTotalsSum = userEventTotals.reduce((acc, curr) => {
-                const { StakeDeposited, WithdrawalInitiated } = curr
-                return {
-                  StakeDeposited: acc.StakeDeposited + (StakeDeposited || 0),
-                  WithdrawalInitiated: acc.WithdrawalInitiated + (WithdrawalInitiated || 0),
-                }
-              }, { StakeDeposited: 0, WithdrawalInitiated: 0 } as { StakeDeposited: number; WithdrawalInitiated: number })
-              
-              
-            const stakedDepositedETH = userEventTotalsSum.StakeDeposited
-            const withdrawalInitiatedETH = userEventTotalsSum.WithdrawalInitiated
-
-            /* Get User's All Time Rewards by Subtracting (StakeDeposited + WithdrawalInitiated) from CurrentStake */
-            const currentUserStakeMinusEvents = currentUserStakeETH - (stakedDepositedETH as number) - (withdrawalInitiatedETH as number)
-            return {
-                eth: `${formatNumber(currentUserStakeMinusEvents)} ETH`,
-                usd: `$${formatNumber(currentUserStakeMinusEvents * (await getCurrentPrice({ coin: 'ETH', currency: 'USD' })))}`
-            }
-        } catch (err) {
-            console.error(`There was an error in getAllTimeStakingRewards: ${err}`)
-            return {
-                eth: '0 ETH',
-                usd: '$ 0.00'
-            }
-        }
-    }
-
-    async function getCurrentStaked(): Promise<BreakdownAmount> {
-        const addresses = (user.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
-        try {
-            const promises = addresses.map((address) => manager.getUserStake(address))
-            const settledPromises = await Promise.allSettled(promises) as Array<PromiseFulfilledResult<ethers.BigNumber>>
-            const currentStaked = settledPromises
-                .filter((result) => result.status === 'fulfilled')
-                .map((result) => result.value)
-    
-            const totalStaked = currentStaked.reduce((accumulator, currentValue) => accumulator.add(currentValue), ethers.BigNumber.from(0))
-            const totalStakedUSD = parseFloat(ethers.utils.formatEther(totalStaked)) * (await getCurrentPrice({ coin: 'ETH', currency: 'USD' }))
-            const totalStakedETH = parseFloat(ethers.utils.formatEther(totalStaked))
-            const formattedTotalStakedUSD = formatNumber(totalStakedUSD)
-            const formattedTotalStakedETH = formatNumber(totalStakedETH)
-            return {
-                eth: formattedTotalStakedETH + ' ETH',
-                usd: '$ ' + formattedTotalStakedUSD
-            }
-        } catch (error) {
-            console.log('Error occurred while fetching stake:', error)
-            return {
-                eth: '0ETH',
-                usd: '$0.00'
-            }
-        }
-    }
-
-    async function getContractEventsTotalsByAddress(address: string) : Promise<ContractEventsByAddress> {
-        try {
-            const eventList = [
-                'StakeDeposited',
-                'StakeRebalanced',
-                'WithdrawalInitiated'
-            ]
-            const eventFilters = eventList.map(event => {
-                if (event === 'StakeRebalanced') return manager.filters[event]()
-                return manager.filters[event](address)
-            })
-
-            // const items = (await Promise.all(eventFilters.map(async eventFilter => await manager.queryFilter(eventFilter, 0, 'latest'))))
-            // Use Promise.allSettled to avoid errors when a filter returns no results
-            const items = (await Promise.allSettled(eventFilters.map(async eventFilter => await manager.queryFilter(eventFilter, 0, 'latest')))).map(result => result.status === 'fulfilled' ? result.value : [])
-    
-            const userEventTotals = eventList.reduce((acc, event) => {
-                acc[event] = 0
-                return acc
-            }, {} as { [key: string]: number })
-    
-            for (const item of items) {
-                for (const action of item) {
-                    const { args, event } = action
-                    const { amount } = args
-                    const amountInEth = parseFloat(ethers.utils.formatEther(amount))
-                    userEventTotals[event as string] += amountInEth
-                }
-            }
-    
-            return userEventTotals
-        } catch (err) {
-            console.error(`There was an error in getContractEventsTotalsByAddress: ${err}`)
-            return {
-                StakeDeposited: 0,
-                StakeRebalanced: 0,
-                WithdrawalInitiated: 0
-            }
-        }
-    }
-
-    async function getEthersBalance(address: string) : Promise<GLfloat> {
-        const balance = await provider.getBalance(address)
-        return parseFloat(ethers.utils.formatEther(balance))
-    }
-
-    async function getTotalWalletBalance() : Promise<BreakdownAmount> {
-        const promises = [] as Array<Promise<any>>
-        const addresses = (user.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
-        addresses.forEach((address) => { promises.push(getEthersBalance(address)) })
-        const totalWalletBalance = (await Promise.all(promises)).reduce((acc, curr) => acc + curr, 0)
-        const totalWalletBalanceUSD = totalWalletBalance * (await getCurrentPrice({ coin: 'ETH', currency: 'USD' }))
-        const formattedTotalWalletBalance = formatNumber(totalWalletBalance)
-        const formattedTotalWalletBalanceUSD = formatNumber(totalWalletBalanceUSD)
-        return {
-            eth: formattedTotalWalletBalance + ' ETH',
-            usd: '$ ' + formattedTotalWalletBalanceUSD
-        }
-    }
-
     async function getUser() {
         try {
             const requestOptions = {
@@ -241,22 +69,6 @@ export default function useUser() {
         }
     }
 
-    function listenForContractEvents() {
-        stopListeningForContractEvents() // Clear old listeners
-        try {
-            manager.on('StakeDeposited', stakeDepositedListener)
-            manager.on('StakeRebalanced', stakeRebalancedListener)
-            manager.on('WithdrawalInitiated', withdrawalInitiatedListener)
-        } catch (err) {
-            console.log(`There was an error in listenForContractEvents: ${err}`)
-        }
-    }
-
-    async function listenForTransactions() {
-        stopListeningForTransactions()
-        provider.on('block', blockListener as ethers.providers.Listener)
-    }
-
     /**
      * Uses appropriate provider composable to login or sign up
      * @param provider 
@@ -286,7 +98,7 @@ export default function useUser() {
 
     async function logout() {
         await Session.signOut()
-        uninitializeUser()
+        user.value = undefined
         // TODO: Fix bug that doesn't allow you to log in without refreshing page after a user logs out
         window.location.reload()
     }
@@ -294,14 +106,13 @@ export default function useUser() {
     onMounted(async () => {
         if (!initializeComposable.value) {
             initializeComposable.value = true
-            listenForContractEvents()
-            listenForTransactions()
+            // listenForContractEvents()
             watch(user, async () => {
                 if (user.value && !initializedUser.value) {
                     initializedUser.value = true
-                    await Promise.all([refreshBreakdown()])
+                    // await Promise.all([refreshBreakdown()])
                 } else if (!user.value) {
-                    uninitializeUser()
+                    // uninitializeUser()
                 }
             })
             const session = await Session.doesSessionExist()
@@ -311,28 +122,9 @@ export default function useUser() {
     })
     
     onUnmounted(() => {
-        uninitializeWalletConnect()
-        stopListeningForContractEvents()
-        stopListeningForTransactions()
         initializeComposable.value = false
     })
 
-    function stopListeningForContractEvents() {
-        manager.removeListener('StakeDeposited', stakeDepositedListener)
-        manager.removeListener('StakeRebalanced', stakeRebalancedListener)
-        manager.removeListener('WithdrawalInitiated', withdrawalInitiatedListener)
-    }
-
-    async function refreshBreakdown() {
-        try {
-            setBreakdownValue({ name: 'currentStaked', ...await getCurrentStaked() })
-            setBreakdownValue({ name: 'totalWalletBalance', ...await getTotalWalletBalance() })
-            setBreakdownValue({ name: 'stakingRewardsEarned', ...await getAllTimeStakingRewards() })
-        } catch (err) {
-            console.log(`There was an error in refreshBreakdown: ${err}`)
-        }
-    }
-
     // TODO: Re-enable once we have a way to remove accounts in UI
     // async function removeConnectedAccount() {
     //     if (!user?.value?.address) {
@@ -360,27 +152,9 @@ export default function useUser() {
     //     }
     //   }
 
-    function setBreakdownValue({ name, eth, usd }: { name: BreakdownString, eth: string, usd: string}) {
-        switch (name) {
-            case 'currentStaked':
-                currentStaked.value = {
-                    eth,
-                    usd
-                }
-            break
-            case 'totalWalletBalance':
-                totalWalletBalance.value = {
-                    eth,
-                    usd
-                }
-            break
-            case 'stakingRewardsEarned':
-                stakingRewards.value = {
-                    eth,
-                    usd
-                }
-            break
-        }
+    async function getEthersBalance(address: string) : Promise<GLfloat> {
+        const balance = await provider.getBalance(address)
+        return parseFloat(ethers.utils.formatEther(balance))
     }
 
     async function setUserAccountBalances() {
@@ -402,30 +176,6 @@ export default function useUser() {
         }
     }
 
-    function stopListeningForTransactions() {
-        provider.removeAllListeners('block')
-    }
-
-    function uninitializeUser() {
-        // Update user accounts
-        user.value = undefined
-        // Reset currentStaked, totalWalletBalance, and stakingRewards
-        currentStaked.value = {
-            eth: '0 ETH',
-            usd: '$ 0.00'
-        }
-        totalWalletBalance.value = {
-            eth: '0 ETH',
-            usd: '$ 0.00'
-        }
-        stakingRewards.value = {
-            eth: '0 ETH',
-            usd: '$ 0.00'
-        }
-        stopListeningForContractEvents()
-        stopListeningForTransactions()
-    }
-
     async function updatePrimaryAddress(updatedAddress: string) {
         const userId = user?.value?.id
         const requestOptions = {
@@ -449,14 +199,7 @@ export default function useUser() {
         return await fetch(`${usersUrl}/user/update-user-agreement/${user.value?.id}`, requestOptions)
     }
 
-    const stakeDepositedListener = async () => await refreshBreakdown()
-    const stakeRebalancedListener = async () => await refreshBreakdown()
-    const withdrawalInitiatedListener = async () => await refreshBreakdown()
-
     return {
-        currentStaked: readonly(currentStaked),
-        stakingRewards: readonly(stakingRewards),
-        totalWalletBalance: readonly(totalWalletBalance),
         user: readonly(user),
         addAccountToUser,
         login,
diff --git a/apps/web/src/pages/overview/components/BreakdownChart.vue b/apps/web/src/pages/overview/components/BreakdownChart.vue
index 4830ba925..a32f50b87 100644
--- a/apps/web/src/pages/overview/components/BreakdownChart.vue
+++ b/apps/web/src/pages/overview/components/BreakdownChart.vue
@@ -1,12 +1,14 @@
-<script lang="ts" setup>
+b<script lang="ts" setup>
 import LineChartJS from '@/components/charts/LineChartJS.vue'
 import { onMounted, ref, toValue, watch} from 'vue'
 import useAnalytics from '@/composables/analytics'
 import useUser from '@/composables/user'
 import useScreenDimensions from '@/composables/screenDimensions'
-import { AnalyticsData, ProviderString, UserAnalyticsData } from '@casimir/types'
+import { AnalyticsData, ProviderString, UserAnalyticsData, UserWithAccountsAndOperators } from '@casimir/types'
+import useBreakdownMetrics from '@/composables/breakdownMetrics'
 
-const { currentStaked, stakingRewards, totalWalletBalance, user } = useUser()
+const {  user } = useUser()
+const { currentStaked, stakingRewards, totalWalletBalance, initializeComposable, uninitializeComposable } = useBreakdownMetrics()
 const { screenWidth } = useScreenDimensions()
 
 const chardId = ref('cross_provider_chart')
@@ -53,7 +55,6 @@ const formatLegendLabel = (address: string) => {
 }
 
 const setChartData = (userAnalytics: UserAnalyticsData) => {
-  console.log('user analytics in BreakdownChart', userAnalytics)
   let labels
   let data: Array<AnalyticsData> = []
   switch (selectedTimeframe.value) {
@@ -99,6 +100,11 @@ const setChartData = (userAnalytics: UserAnalyticsData) => {
 const {userAnalytics, updateAnalytics } = useAnalytics()
 
 onMounted(() => {
+  if(user.value){
+    initializeComposable(user.value as UserWithAccountsAndOperators)
+  }else{
+    uninitializeComposable()
+  }
   setChartData(userAnalytics.value as UserAnalyticsData)
 })
 
@@ -111,6 +117,11 @@ watch(userAnalytics, () => {
 })
 
 watch(user, async () => {
+  if (user.value) {
+    initializeComposable(user.value as UserWithAccountsAndOperators)
+  } else {
+    uninitializeComposable()
+  }
   await updateAnalytics()
   setChartData(userAnalytics.value as UserAnalyticsData)
 })