From 42249ef2ec701a33d92b166a10c9d825ff8c51db Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Tue, 14 Nov 2023 10:08:03 -0500
Subject: [PATCH] Reduce number of node requests via provider options +
 composable refactors

---
 .vscode/settings.json                         |  10 +-
 apps/web/.eslintrc                            |  12 +-
 apps/web/src/App.vue                          |  21 ++
 .../web/src/components/ConnectWalletsFlow.vue |  12 +-
 apps/web/src/composables/auth.ts              |  21 +-
 apps/web/src/composables/breakdownMetrics.ts  | 250 +++++++--------
 apps/web/src/composables/contracts.ts         |  68 ++--
 apps/web/src/composables/environment.ts       |   7 +-
 apps/web/src/composables/ethers.ts            | 132 +-------
 apps/web/src/composables/format.ts            |  55 ++--
 apps/web/src/composables/operators.ts         |  59 ++--
 apps/web/src/composables/staking.ts           |  91 +++---
 apps/web/src/composables/user.ts              |  65 ++--
 apps/web/src/composables/walletConnectV2.ts   |   2 +-
 apps/web/src/main.ts                          |  13 +-
 apps/web/src/pages/operators/Operator.vue     |  55 ++--
 .../overview/components/BreakdownChart.vue    |  28 +-
 .../src/pages/overview/components/Staking.vue | 292 +++++++++---------
 common/env/src/index.ts                       |   5 +
 package-lock.json                             |  33 +-
 scripts/cdk/deploy.ts                         |   4 +-
 scripts/root/dev.ts                           |   4 +-
 22 files changed, 618 insertions(+), 621 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 960b64ffb..025d86f9c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,12 @@
 {
+    "css.lint.unknownAtRules": "ignore",
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": true
     },
+    "eslint.validate": [
+        "vue",
+        "typescript"
+    ],
     "[html]": {
         "editor.defaultFormatter": "Vue.volar"
     },
@@ -14,10 +19,5 @@
     "[json]": {
         "editor.defaultFormatter": "vscode.json-language-features"
     },
-    "eslint.validate": [
-        "vue",
-        "typescript"
-    ],
-    "css.lint.unknownAtRules": "ignore",
     "volar.inlayHints.eventArgumentInInlineHandlers": false
 }
\ No newline at end of file
diff --git a/apps/web/.eslintrc b/apps/web/.eslintrc
index 9009c65f6..2b7a8f6c2 100644
--- a/apps/web/.eslintrc
+++ b/apps/web/.eslintrc
@@ -21,8 +21,16 @@
         "@typescript-eslint"
     ],
     "rules": {
-        "max-len": ["error", { "code": 200, "ignoreStrings": true, "comments":300, "ignoreTemplateLiterals": true }],
-        "vue/multi-word-component-names": "off",
+        "max-len": [
+            "error",
+            {
+                "code": 200,
+                "ignoreStrings": true,
+                "comments": 300,
+                "ignoreTemplateLiterals": true
+            }
+        ],
+        "vue/multi-word-component-names": "off"
     },
     "ignorePatterns": [
         "**/node_modules/**",
diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
index 5ea62b95d..b318984b7 100644
--- a/apps/web/src/App.vue
+++ b/apps/web/src/App.vue
@@ -1,6 +1,27 @@
 <script lang="ts" setup>
+import { watch } from "vue"
 import { RouterView } from "vue-router"
 import DefaultLayout from "@/layouts/default-layout.vue"
+import useBreakdownMetrics from "@/composables/breakdownMetrics"
+import useContracts from "@/composables/contracts"
+import useUser from "@/composables/user"
+
+const { initializeContractsComposable } = useContracts()
+const { initializeBreakdownMetricsComposable } = useBreakdownMetrics()
+const { initializeUserComposable, user } = useUser()
+
+watch(user, async (newUser, oldUser) => { 
+    // On Sign in
+    if (newUser && !oldUser) {
+        await initializeContractsComposable()
+        await initializeBreakdownMetricsComposable()
+    } else if (newUser && oldUser) {
+        // On page refresh when signed in}
+        await initializeContractsComposable()
+        await initializeBreakdownMetricsComposable()
+    }
+})
+
 </script>
   
 <template>
diff --git a/apps/web/src/components/ConnectWalletsFlow.vue b/apps/web/src/components/ConnectWalletsFlow.vue
index a16775328..59f616200 100644
--- a/apps/web/src/components/ConnectWalletsFlow.vue
+++ b/apps/web/src/components/ConnectWalletsFlow.vue
@@ -28,7 +28,7 @@ const supportedWalletProviders = [
 const { login, loginWithSecondaryAddress } = useAuth()
 const { requiredNetwork } = useEnvironment()
 const { browserProvidersList, getEthersAddressesWithBalances } = useEthers()
-const { convertString, trimAndLowercaseAddress } = useFormat()
+const { convertString, formatEthersCasimir, trimAndLowercaseAddress } = useFormat()
 const { getLedgerAddress } = useLedger()
 const { getTrezorAddress } = useTrezor()
 const { user } = useUser()
@@ -112,7 +112,7 @@ async function selectAddress(address: string, pathIndex: number): Promise<void>
         errorMassageText.value = "Address selected is already connected to your account."
     } else if (
         response === "Address already exists as a primary address on another account" ||
-    response === "Address already exists as a secondary address on another account"
+        response === "Address already exists as a secondary address on another account"
     ) {
         flowState.value = "confirm_signage_with_existing_secondary"
     } else if (response === "Selected address is not active address in wallet") {
@@ -342,7 +342,7 @@ onUnmounted(() => {
               {{ convertString(act.address) }}
             </div>
             <div>
-              {{ parseFloat(parseFloat(act.balance).toFixed(2)) }} ETH
+              {{ formatEthersCasimir(act.balance) }} ETH
             </div>
           </button>
         </div>
@@ -420,9 +420,11 @@ onUnmounted(() => {
         <h1 class="mb-[15px]">
           Confirm Signage
         </h1>
-        <p class="">
+        <p>
           The current wallet you are trying to connect exists under another primary wallet or is a primary account.
         </p>
+        <br>
+        <p>Would you like to create a new account with this address as the primary wallet address?</p>
       </div>
 
       <div class="mt-15 h-[220px] w-full flex items-center justify-center gap-5">
@@ -440,7 +442,7 @@ onUnmounted(() => {
           class="action_button w-full"
           @click="handleConfirmCreateAccountWithExistingSecondary"
         >
-          Confirm
+          Create Account
         </button>
       </div>
       <div class="h-15 w-full text-[11px] font-[500] mb-5 text-decline">
diff --git a/apps/web/src/composables/auth.ts b/apps/web/src/composables/auth.ts
index 59ec08f2d..343c21595 100644
--- a/apps/web/src/composables/auth.ts
+++ b/apps/web/src/composables/auth.ts
@@ -15,16 +15,11 @@ import {
 } from "@casimir/types"
 
 const { usersUrl } = useEnvironment()
-const { browserProvidersList, detectActiveEthersWalletAddress, loginWithEthers } =
-  useEthers()
+const { browserProvidersList, detectActiveEthersWalletAddress, loginWithEthers } = useEthers()
 const { loginWithLedger } = useLedger()
 const { loginWithTrezor } = useTrezor()
 const { setUser, user } = useUser()
-const {
-    loginWithWalletConnectV2,
-    initializeWalletConnect,
-    uninitializeWalletConnect,
-} = useWalletConnect()
+const { loginWithWalletConnectV2, initializeWalletConnect, uninitializeWalletConnect } = useWalletConnect()
 
 const initializedAuthComposable = ref(false)
 const loadingSessionLogin = ref(false)
@@ -101,7 +96,7 @@ export default function useAuth() {
             const response = await fetch(`${usersUrl}/user`, requestOptions)
             const { user: retrievedUser, error } = await response.json()
             if (error) throw new Error(error)
-            await setUser(retrievedUser)
+            setUser(retrievedUser)
         } catch (error: any) {
             throw new Error("Error getting user from API route")
         }
@@ -173,12 +168,9 @@ export default function useAuth() {
                 }
 
                 // Then check if address is being used as a secondary account by another user
-                const { data: accountsIfSecondaryAddress } =
-          await checkIfSecondaryAddress(address)
+                const { data: accountsIfSecondaryAddress } = await checkIfSecondaryAddress(address)
                 console.log("accountsIfSecondaryAddress :>> ", accountsIfSecondaryAddress)
-                if (accountsIfSecondaryAddress.length) {
-                    return "Address already exists as a secondary address on another account"
-                }
+                if (accountsIfSecondaryAddress.length) return "Address already exists as a secondary address on another account"
 
                 // Handle user interaction (do they want to sign in with another account?)
                 // If yes, log out (and/or log them in with the other account)
@@ -288,11 +280,10 @@ export default function useAuth() {
     }
 
     async function logout() {
-    // Loader
         try {
             loadingSessionLogout.value = true
             await Session.signOut()
-            await setUser(undefined)
+            setUser(undefined)
             loadingSessionLogout.value = false
         } catch (error) {
             loadingSessionLogoutError.value = true
diff --git a/apps/web/src/composables/breakdownMetrics.ts b/apps/web/src/composables/breakdownMetrics.ts
index e689016d7..96e7b8dd3 100644
--- a/apps/web/src/composables/breakdownMetrics.ts
+++ b/apps/web/src/composables/breakdownMetrics.ts
@@ -1,56 +1,102 @@
-import { readonly, ref, onMounted, watch } from "vue"
+import { readonly, ref, watch } 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"
+import useStaking from "@/composables/staking"
 import useUser from "@/composables/user"
 import { CasimirManager } from "@casimir/ethereum/build/@types"
 
-const { getContracts } = useContracts()
-const { provider } = useEnvironment()
-const { formatNumber } = useFormat()
+const { getBaseManager, getEigenManager, contractsAreInitialized } = useContracts()
+const { batchProvider, provider, webSocketProvider } = useEnvironment()
+const { formatEthersCasimir } = useFormat()
 const { getCurrentPrice } = usePrice()
+const { awaitingStakeOrWithdrawConfirmation } = useStaking()
 const { user } = useUser()
 
-const isInitialized = ref(false)
+const breakdownMetricsComposableInitialized = ref(false)
 const loadingInitializeBreakdownMetrics = ref(false)
 const loadingInitializeBreakdownMetricsError = ref(false)
+const listeningForContractEvents = ref(false)
 
 let baseManager: CasimirManager
 let eigenManager: CasimirManager
 
+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" })
+
 export default function useBreakdownMetrics() {
-    onMounted(() => {
-        if (user.value) initializeBreakdownMetricsComposable()
-        else uninitializeBreakdownMetricsComposable()
-    })
-      
-    watch(user, async () => {
-        if (user.value) {
-            initializeBreakdownMetricsComposable()
+    async function blockListener(blockNumber: number) {
+        if (!user.value) return
+        if (import.meta.env.MODE === "development") console.log("blockNumber :>> ", blockNumber)
+        
+        const addresses = (user.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
+        const availableProvider = webSocketProvider || provider
+        const block = await availableProvider.getBlockWithTransactions(blockNumber)
+        
+        const txs = block.transactions.map(async (tx: any) => {
+            if (addresses.includes(tx.from.toLowerCase())) {
+                try {
+                    // const response = (manager as CasimirManager).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 initializeBreakdownMetricsComposable() {
+        watch([user, contractsAreInitialized], async () => {
+            if (user.value && contractsAreInitialized.value && !breakdownMetricsComposableInitialized.value) {
+                await initializeBreakdownMetricsComposable()
+            } else {
+                uninitializeBreakdownMetricsComposable()
+            }
+        })
+
+        watch(awaitingStakeOrWithdrawConfirmation, () => {
+            if (awaitingStakeOrWithdrawConfirmation.value && !listeningForContractEvents.value) {
+                listenForStakeWithdrawEvents()
+            } else {
+                stopListeningForContractEvents()
+            }
+        })
+
+        if (breakdownMetricsComposableInitialized.value) return
+        breakdownMetricsComposableInitialized.value = true
+
+        baseManager = getBaseManager()
+        eigenManager = getEigenManager()
+
+        try {
+            loadingInitializeBreakdownMetrics.value = true
+            const availableProvider = webSocketProvider || provider
+            availableProvider.removeAllListeners("block")
+            availableProvider.on("block", blockListener as ethers.providers.Listener)
+            listenForRebalancedEvents()
             await refreshBreakdown()
-        } else {
-            uninitializeBreakdownMetricsComposable()
+            loadingInitializeBreakdownMetrics.value = false
+            breakdownMetricsComposableInitialized.value = true
+        } catch (error) {
+            loadingInitializeBreakdownMetricsError.value = true
+            console.log("Error initializing breakdown metrics :>> ", error)
+            loadingInitializeBreakdownMetrics.value = false
         }
+    }
 
-    })
-
-    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 uninitializeBreakdownMetricsComposable() {
+        const availableProvider = webSocketProvider || provider
+        availableProvider.removeAllListeners("block")
+        stopListeningForContractEvents()
+        breakdownMetricsComposableInitialized.value = false
+    }
 
     async function getAllTimeStakingRewards() : Promise<BreakdownAmount> {
         try {
@@ -93,11 +139,10 @@ export default function useBreakdownMetrics() {
 
             /* Get User's All Time Rewards */
             const currentUserStakeMinusEvents = 
-        currentUserStakeETH - stakedDepositedETH + ((withdrawalInitiatedETH) + (withdrawalRequestedETH) + (withdrawalFulfilledETH))
-
+                currentUserStakeETH - stakedDepositedETH + ((withdrawalInitiatedETH) + (withdrawalRequestedETH) + (withdrawalFulfilledETH))
             return {
-                eth: `${formatNumber(currentUserStakeMinusEvents)} ETH`,
-                usd: `$${formatNumber(currentUserStakeMinusEvents * (await getCurrentPrice({ coin: "ETH", currency: "USD" })))}`
+                eth: `${formatEthersCasimir(currentUserStakeMinusEvents)} ETH`,
+                usd: `$${formatEthersCasimir(currentUserStakeMinusEvents * (await getCurrentPrice({ coin: "ETH", currency: "USD" })))}`
             }
         } catch (err) {
             console.error(`There was an error in getAllTimeStakingRewards: ${err}`)
@@ -155,19 +200,21 @@ export default function useBreakdownMetrics() {
     async function getCurrentStaked(): Promise<BreakdownAmount> {
         const addresses = (user.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
         try {
-            const baseManagerPromises = addresses.map((address) => (baseManager as CasimirManager).getUserStake(address))
+            const baseManagerPromises = addresses.map((address) => {
+                // console.log("running getUserStake in getCurrentStaked")
+                return (baseManager as CasimirManager).getUserStake(address)
+            })
             const eigenManagerPromises = addresses.map((address) => (eigenManager as CasimirManager).getUserStake(address))
             const promises = [...baseManagerPromises, ...eigenManagerPromises]
             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)
+            const formattedTotalStakedUSD = formatEthersCasimir(totalStakedUSD)
+            const formattedTotalStakedETH = formatEthersCasimir(totalStakedETH)
             return {
                 eth: formattedTotalStakedETH + " ETH",
                 usd: "$ " + formattedTotalStakedUSD
@@ -181,25 +228,29 @@ export default function useBreakdownMetrics() {
         }
     }
 
-    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 getTotalWalletBalance(): Promise<BreakdownAmount> {
+        try {
+            const addresses = (user.value as UserWithAccountsAndOperators).accounts.map(account => account.address)
+            const balancePromises = addresses.map((address: string) => batchProvider.getBalance(address))
+            const balances = await Promise.all(balancePromises)
+            const totalWalletBalance = balances.reduce((acc, curr) => acc.add(curr), ethers.BigNumber.from(0))
+            const totalWalletBalanceUSD = (await getCurrentPrice({ coin: "ETH", currency: "USD" })) * parseFloat(ethers.utils.formatEther(totalWalletBalance))
+            const formattedTotalWalletBalance = ethers.utils.formatEther(totalWalletBalance)
+            const roundedFormattedTotalWalletBalance = formatEthersCasimir(parseFloat(formattedTotalWalletBalance))
+            const formattedTotalWalletBalanceUSD = formatEthersCasimir(totalWalletBalanceUSD, 2)
+            return {
+                eth: roundedFormattedTotalWalletBalance + " ETH",
+                usd: "$ " + formattedTotalWalletBalanceUSD
+            }
+        } catch (error) {
+            console.log("Error occurred in getTotalWalletBalance:", error)
+            return {
+                eth: "0ETH",
+                usd: "$0.00"
+            }
         }
     }
-
+    
     async function refreshBreakdown() {
         try {
             setBreakdownValue({ name: "currentStaked", ...await getCurrentStaked() })
@@ -213,41 +264,45 @@ export default function useBreakdownMetrics() {
     function setBreakdownValue({ name, eth, usd }: { name: BreakdownString, eth: string, usd: string}) {
         switch (name) {
         case "currentStaked":
-            currentStaked.value = {
-                eth,
-                usd
-            }
+            currentStaked.value = { eth, usd }
             break
         case "totalWalletBalance":
-            totalWalletBalance.value = {
-                eth,
-                usd
-            }
+            totalWalletBalance.value = { eth, usd }
             break
         case "stakingRewardsEarned":
-            stakingRewards.value = {
-                eth,
-                usd
-            }
+            stakingRewards.value = { eth, usd }
             break
         }
     }
 
-    function listenForContractEvents() {
+    function listenForStakeWithdrawEvents() {
+        if (!breakdownMetricsComposableInitialized.value) return
         stopListeningForContractEvents() // Clear old listeners
+        listeningForContractEvents.value = true
         try {
             (baseManager as CasimirManager).on("StakeDeposited", stakeDepositedListener);
-            (baseManager as CasimirManager).on("StakeRebalanced", stakeRebalancedListener);
             (baseManager as CasimirManager).on("WithdrawalInitiated", withdrawalInitiatedListener);
             (eigenManager as CasimirManager).on("StakeDeposited", stakeDepositedListener);
-            (eigenManager as CasimirManager).on("StakeRebalanced", stakeRebalancedListener);
             (eigenManager as CasimirManager).on("WithdrawalInitiated", withdrawalInitiatedListener)
         } catch (err) {
-            console.log(`There was an error in listenForContractEvents: ${err}`)
+            console.log(`There was an error in listenForStakeWithdrawEvents: ${err}`)
+        }
+    }
+
+    function listenForRebalancedEvents() {
+        if (!breakdownMetricsComposableInitialized.value) return
+        stopListeningForContractEvents() // Clear old listeners
+        try {
+            (baseManager as CasimirManager).on("StakeRebalanced", stakeRebalancedListener)
+            // (eigenManager as CasimirManager).on("StakeRebalanced", stakeRebalancedListener)
+        } catch (err) {
+            console.log(`There was an error in listenForRebalancedEvents: ${err}`)
         }
     }
 
     function stopListeningForContractEvents() {
+        listeningForContractEvents.value = false
+        if (!breakdownMetricsComposableInitialized.value) return
         (baseManager as CasimirManager).removeListener("StakeDeposited", stakeDepositedListener);
         (baseManager as CasimirManager).removeListener("StakeRebalanced", stakeRebalancedListener);
         (baseManager as CasimirManager).removeListener("WithdrawalInitiated", withdrawalInitiatedListener);
@@ -259,57 +314,6 @@ export default function useBreakdownMetrics() {
     const stakeDepositedListener = async () => await refreshBreakdown()
     const stakeRebalancedListener = async () => await refreshBreakdown()
     const withdrawalInitiatedListener = async () => await refreshBreakdown()
-
-    async function blockListener(blockNumber: number) {
-        if (!user.value) return
-        if (import.meta.env.MODE === "development") 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())) {
-                try {
-                    // const response = (manager as CasimirManager).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 initializeBreakdownMetricsComposable() {
-        if (isInitialized.value) return
-        const { baseManager: baseManagerFromContracts, eigenManager: eigenManagerFromContracts } = await getContracts()
-        baseManager = baseManagerFromContracts
-        eigenManager = eigenManagerFromContracts
-
-        try {
-            loadingInitializeBreakdownMetrics.value = true
-            provider.removeAllListeners("block")
-            provider.on("block", blockListener as ethers.providers.Listener)
-            listenForContractEvents()
-            await refreshBreakdown()
-            loadingInitializeBreakdownMetrics.value = false
-            isInitialized.value = true
-        } catch (error) {
-            loadingInitializeBreakdownMetricsError.value = true
-            console.log("Error initializing breakdown metrics :>> ", error)
-            loadingInitializeBreakdownMetrics.value = false
-        }
-    }
-
-    async function uninitializeBreakdownMetricsComposable() {
-        const { baseManager: baseManagerFromContracts, eigenManager: eigenManagerFromContracts } = await getContracts()
-        baseManager = baseManagerFromContracts
-        eigenManager = eigenManagerFromContracts
-        provider.removeAllListeners("block")
-        stopListeningForContractEvents()
-        isInitialized.value = false
-    }
     
     return {
         currentStaked: readonly(currentStaked),
diff --git a/apps/web/src/composables/contracts.ts b/apps/web/src/composables/contracts.ts
index a0f27d1ce..826dc68c2 100644
--- a/apps/web/src/composables/contracts.ts
+++ b/apps/web/src/composables/contracts.ts
@@ -1,44 +1,72 @@
+import { ref } from "vue"
 import { ethers } from "ethers"
 import useEnvironment from "@/composables/environment"
-import { ManagerConfig } from "@casimir/types"
 import { CasimirManager, CasimirRegistry, CasimirViews } from "@casimir/ethereum/build/@types"
 import ICasimirManagerAbi from "@casimir/ethereum/build/abi/ICasimirManager.json"
 import ICasimirRegistryAbi from "@casimir/ethereum/build/abi/ICasimirRegistry.json"
 import ICasimirViewsAbi from "@casimir/ethereum/build/abi/ICasimirViews.json"
 
-const { provider, factory } = useEnvironment()
+const { webSocketProvider, provider, factory } = useEnvironment()
+const contractsAreInitialized = ref(false)
+
+let baseManager: CasimirManager
+let baseRegistry: CasimirRegistry
+let baseViews: CasimirViews
+let eigenManager: CasimirManager
+let eigenRegistry: CasimirRegistry
+let eigenViews: CasimirViews
 
 export default function useContracts() {
+
+    async function initializeContractsComposable() {
+        if (contractsAreInitialized.value) return
+        await getContracts()
+    }
+
     async function getContracts() {
         const [baseManagerConfig, eigenManagerConfig] = await Promise.all((await factory.getManagerIds()).map(async (id: number) => {
             return await factory.getManagerConfig(id)
         }))
 
-        const baseManager = new ethers.Contract(baseManagerConfig.managerAddress, ICasimirManagerAbi, provider) as CasimirManager
-        const baseRegistry = new ethers.Contract(baseManagerConfig.registryAddress, ICasimirRegistryAbi, provider) as CasimirRegistry
-        const baseViews = new ethers.Contract(baseManagerConfig.viewsAddress, ICasimirViewsAbi, provider) as CasimirViews
+        const availableProvider = webSocketProvider || provider
+
+        baseManager = new ethers.Contract(baseManagerConfig.managerAddress, ICasimirManagerAbi, availableProvider) as CasimirManager
+        baseRegistry = new ethers.Contract(baseManagerConfig.registryAddress, ICasimirRegistryAbi, availableProvider) as CasimirRegistry
+        baseViews = new ethers.Contract(baseManagerConfig.viewsAddress, ICasimirViewsAbi, availableProvider) as CasimirViews
 
-        const eigenManager = new ethers.Contract(
-            eigenManagerConfig?.managerAddress || ethers.constants.AddressZero, ICasimirManagerAbi, provider
+        eigenManager = new ethers.Contract(
+            eigenManagerConfig?.managerAddress || ethers.constants.AddressZero, ICasimirManagerAbi, availableProvider
         ) as CasimirManager
-        const eigenRegistry = new ethers.Contract(
-            eigenManagerConfig?.registryAddress || ethers.constants.AddressZero, ICasimirRegistryAbi, provider
+        eigenRegistry = new ethers.Contract(
+            eigenManagerConfig?.registryAddress || ethers.constants.AddressZero, ICasimirRegistryAbi, availableProvider
         ) as CasimirRegistry
-        const eigenViews = new ethers.Contract(
-            eigenManagerConfig?.viewsAddress || ethers.constants.AddressZero, ICasimirViewsAbi, provider
+        eigenViews = new ethers.Contract(
+            eigenManagerConfig?.viewsAddress || ethers.constants.AddressZero, ICasimirViewsAbi, availableProvider
         ) as CasimirViews
 
-        return {
-            baseManager,
-            baseRegistry,
-            baseViews,
-            eigenManager,
-            eigenRegistry,
-            eigenViews
-        }
+        contractsAreInitialized.value = true
     }
 
+    function getBaseManager() { return baseManager }
+
+    function getEigenManager() { return eigenManager }
+
+    function getBaseRegistry() { return baseRegistry }
+
+    function getEigenRegistry() { return eigenRegistry }
+
+    function getBaseViews() { return baseViews }
+
+    function getEigenViews() { return eigenViews }
+
     return {
-        getContracts
+        contractsAreInitialized,
+        initializeContractsComposable,
+        getBaseManager,
+        getEigenManager,
+        getBaseRegistry,
+        getEigenRegistry,
+        getBaseViews,
+        getEigenViews,
     }
 }
\ No newline at end of file
diff --git a/apps/web/src/composables/environment.ts b/apps/web/src/composables/environment.ts
index d9f32a8ec..32c02e403 100644
--- a/apps/web/src/composables/environment.ts
+++ b/apps/web/src/composables/environment.ts
@@ -8,7 +8,10 @@ const origin = window.location.origin
 
 /* Ethereum environment */
 const ethereumUrl = import.meta.env.PUBLIC_ETHEREUM_RPC_URL || "http://127.0.0.1:8545"
+const ethereumWebSocketUrl = import.meta.env.PUBLIC_ETHEREUM_WEBSOCKET_URL
 const provider = new ethers.providers.JsonRpcProvider(ethereumUrl)
+const batchProvider: ethers.providers.JsonRpcBatchProvider = new ethers.providers.JsonRpcBatchProvider(ethereumUrl)
+const webSocketProvider: ethers.providers.WebSocketProvider | null = ethereumWebSocketUrl !== "undefined" ? new ethers.providers.WebSocketProvider(ethereumWebSocketUrl) : null
 
 /* Casimir environment */
 const docsUrl = import.meta.env.PUBLIC_DOCS_URL || "https://docs.dev.casimir.co"
@@ -34,6 +37,7 @@ const speculosUrl = import.meta.env.PUBLIC_SPECULOS_URL ? "http://localhost:5001
 export default function useEnvironment() {
 
     return {
+        batchProvider,
         domain,
         cryptoCompareApiKey,
         ethereumUrl,
@@ -47,6 +51,7 @@ export default function useEnvironment() {
         ssvViewsAddress,
         docsUrl,
         usersUrl,
-        walletConnectProjectId
+        walletConnectProjectId,
+        webSocketProvider,
     }
 }
\ No newline at end of file
diff --git a/apps/web/src/composables/ethers.ts b/apps/web/src/composables/ethers.ts
index 5098aa588..a18440695 100644
--- a/apps/web/src/composables/ethers.ts
+++ b/apps/web/src/composables/ethers.ts
@@ -1,7 +1,6 @@
 import { ethers } from "ethers"
 import { CryptoAddress, EthersProvider } from "@casimir/types"
-import { TransactionRequest } from "@casimir/types"
-import { GasEstimate, LoginCredentials, MessageRequest, ProviderString } from "@casimir/types"
+import { LoginCredentials, ProviderString } from "@casimir/types"
 import useEnvironment from "@/composables/environment"
 import useSiwe from "@/composables/siwe"
 import useWallets from "@/composables/wallets"
@@ -11,7 +10,7 @@ interface ethereumWindow extends Window {
 }
 declare const window: ethereumWindow
 
-const { ethereumUrl, provider } = useEnvironment()
+const { provider, batchProvider } = useEnvironment()
 const { createSiweMessage, signInWithEthereum } = useSiwe()
 const { installedWallets } = useWallets()
 
@@ -72,95 +71,23 @@ export default function useEthers() {
         }
     }
 
-    /**
-   * Estimate gas fee using EIP 1559 methodology
-   * @returns string in ETH
-   */
-    async function estimateEIP1559GasFee(
-        rpcUrl: string, unsignedTransaction: ethers.utils.Deferrable<ethers.providers.TransactionRequest>
-    ) : Promise<GasEstimate> {
-        try {
-            const provider = new ethers.providers.JsonRpcProvider(rpcUrl)
-            const gasPrice = await provider.getFeeData() as ethers.providers.FeeData
-            const { maxFeePerGas, maxPriorityFeePerGas } = gasPrice
-            const maxFeePerGasInWei = maxFeePerGas ? ethers.utils.parseEther(maxFeePerGas.toString()) : "0"
-            const maxPriorityFeePerGasInWei = maxPriorityFeePerGas ? ethers.utils.parseEther(maxPriorityFeePerGas.toString()) : "0"
-            if (maxFeePerGasInWei === "0") throw new Error("maxFeePerGasInWei is zero")
-            if (maxPriorityFeePerGasInWei === "0") throw new Error("maxPriorityFeePerGasInWei is zero")
-
-            const { to, from, value } = unsignedTransaction
-            const tx = {
-                from,
-                to,
-                value,
-                type: 2, // TODO: 2 is for EIP 1559, 0 is for legacy; make this dynamic
-                maxFeePerGas: maxFeePerGasInWei,
-                maxPriorityFeePerGas: maxPriorityFeePerGasInWei
-            }
-            const gasEstimate = await provider.estimateGas(tx)
-            // TODO: What is the way to get gas estimate in human readable format?
-            // const gasEstimateInEth = ethers.utils.formatEther(gasEstimate)
-            const fee = maxPriorityFeePerGasInWei?.mul(gasEstimate).add(maxFeePerGasInWei)
-            const feeInWei = ethers.utils.formatEther(fee)
-            const feeInEth = (parseFloat(feeInWei) / 10**18).toFixed(8).toString()
-            return {
-                gasLimit: gasEstimate.toString(),
-                fee: feeInEth
-            }
-        } catch (err) {
-            console.error("There was an error in estimateGasFee :>> ", err)
-            return {
-                gasLimit: "0",
-                fee: "0"
-            }
-        }
-    }
-
-    /**
-   * Estimate gas fee using legacy methodology
-   * @returns string in ETH
-   * @deprecated
-   * @see estimateEIP1559GasFee
-  */
-    async function estimateLegacyGasFee(
-        rpcUrl: string, unsignedTransaction: ethers.utils.Deferrable<ethers.providers.TransactionRequest>
-    ) : Promise<GasEstimate> {
-        try {
-            const provider = new ethers.providers.JsonRpcProvider(rpcUrl)
-            const gasPrice = await provider.getGasPrice()
-            const gasEstimate = await provider.estimateGas(unsignedTransaction as ethers.utils.Deferrable<ethers.providers.TransactionRequest>)
-            const fee = gasPrice.mul(gasEstimate)
-            const feeInWei = ethers.utils.formatEther(fee)
-            const feeInEth = (parseFloat(feeInWei) / 10**18).toFixed(8).toString()
-            return {
-                gasLimit: gasEstimate.toString(),
-                fee: feeInEth
-            }
-        } catch (err) {
-            console.error("There was an error in estimateGasFee :>> ", err)
-            return {
-                gasLimit: "0",
-                fee: "0"
-            }
-        }
-    }
-
-    async function getEthersAddressesWithBalances (providerString: ProviderString): Promise<CryptoAddress[]> {
+    async function getEthersAddressesWithBalances(providerString: ProviderString): Promise<CryptoAddress[]> {
         const provider = getBrowserProvider(providerString)
         if (provider) {
             const addresses = await provider.request({ method: "eth_requestAccounts" })
-            const addressesWithBalance: CryptoAddress[] = []
-            for (const address of addresses) {
-                const balance = (await getEthersBalance(address)).toString()
-                const addressWithBalance = { address, balance }
-                addressesWithBalance.push(addressWithBalance)
-            }
+            const balancePromises = addresses.map((address: string) => batchProvider.getBalance(address))
+            const balances = await Promise.all(balancePromises)
+            const addressesWithBalance = addresses.map((address: string, index: number) => ({
+                address: address,
+                balance: ethers.utils.formatEther(balances[index])
+            }))
+    
             return addressesWithBalance
         } else {
             throw new Error("Provider not yet connected to this dapp. Please connect and try again.")
         }
     }
-
+    
     async function getEthersBalance(address: string) : Promise<GLfloat> {
         const balance = await provider.getBalance(address)
         return parseFloat(ethers.utils.formatEther(balance))
@@ -183,13 +110,6 @@ export default function useEthers() {
         return { gasPrice, gasLimit }
     }
 
-    async function getMaxETHAfterFees(rpcUrl: string, unsignedTx: ethers.utils.Deferrable<ethers.providers.TransactionRequest>, totalAmount: string) {
-        const { fee } = await estimateEIP1559GasFee(rpcUrl, unsignedTx)
-        const total = parseFloat(totalAmount) - parseFloat(fee)
-        const maxAfterFees = ethers.utils.formatEther(total).toString()
-        return maxAfterFees
-    }
-
     async function loginWithEthers(loginCredentials: LoginCredentials): Promise<void> {
         const { provider, address, currency } = loginCredentials
         const browserProvider = getBrowserProvider(provider)
@@ -210,36 +130,6 @@ export default function useEthers() {
         }
     }
 
-    async function sendEthersTransaction(
-        { from, to, value, providerString }: TransactionRequest
-    ) {
-        const signer = getEthersBrowserSigner(providerString) as ethers.Signer
-        const weiAmount = ethers.utils.parseEther(value)
-        const tx = {
-            from,
-            to,
-            value: weiAmount
-        }
-        const ethFees = await estimateEIP1559GasFee(ethereumUrl, tx)
-        const { fee, gasLimit } = ethFees
-        const requiredBalance = parseFloat(value) + parseFloat(fee)
-        const balance = await getEthersBalance(from)
-        if (balance < requiredBalance) {
-            throw new Error("Insufficient balance")
-        }
-        console.log(`Sending ${value} ETH to ${to} with estimated ${fee} ETH in fees using ~${gasLimit.toString()} in gas.`)
-        return await signer.sendTransaction(tx)
-    }
-
-    async function signEthersMessage(messageRequest: MessageRequest): Promise<string> {
-        const { providerString, message } = messageRequest
-        const browserProvider = getBrowserProvider(providerString)
-        const web3Provider: ethers.providers.Web3Provider = new ethers.providers.Web3Provider(browserProvider as EthersProvider)
-        const signer = web3Provider.getSigner()
-        const signature = await signer.signMessage(message)
-        return signature
-    }
-
     return { 
         browserProvidersList,
         detectActiveEthersWalletAddress,
diff --git a/apps/web/src/composables/format.ts b/apps/web/src/composables/format.ts
index b0d8aa824..ca5245744 100644
--- a/apps/web/src/composables/format.ts
+++ b/apps/web/src/composables/format.ts
@@ -15,35 +15,36 @@ export default function useFormat() {
         return parseFloat(decimalString).toFixed(2)
     }
 
-    function formatNumber(number: number) {
-        const SI_SYMBOL = ["",
-            "K",
-            "M",
-            "B",
-            "T",
-            "P",
-            "E"]
-        const tier = Math.floor(Math.log10(Math.abs(number)) / 3)
-        let scale, scaled, suffix
-        
-        if (number === 0) {
-            return "0.00"
-        } else if (Math.abs(number) < 1) {
-            // Find the position of the first non-zero digit after the decimal point
-            const decimalPlaces = Math.ceil(-Math.log10(Math.abs(number)))
-            // Limit to 6 decimal places
-            const fixedDecimals = Math.min(decimalPlaces, 6)
-            return number.toFixed(fixedDecimals)
-        } else if (tier === 0) {
-            return number.toFixed(2)
+    function formatEthersCasimir(inputFloat: number, customDecimals?: number): string {
+        const siSymbols: { [key: string]: number } = {
+            "K": 1e3,
+            "M": 1e6,
+            "B": 1e9
+        }
+    
+        const [siSymbol, magnitude] = Object.entries(siSymbols)
+            .reduce(([selectedSymbol, selectedMagnitude], [symbol, mag]) =>
+                Math.abs(inputFloat) >= mag ? [symbol, mag] : [selectedSymbol, selectedMagnitude], ["", 1])
+    
+        let numDecimals: number
+        if (customDecimals !== undefined) {
+            numDecimals = customDecimals
+        } else if (Math.abs(inputFloat) < 1) {
+            numDecimals = 9
+        } else if (Math.abs(inputFloat) < 5) {
+            numDecimals = 6
         } else {
-            suffix = SI_SYMBOL[tier]
-            scale = Math.pow(10, tier * 3)
-            scaled = number / scale
-            return scaled.toFixed(2) + suffix
+            numDecimals = 2
         }
-    }
     
+        let formattedFloat = (inputFloat / magnitude).toFixed(numDecimals)
+        
+        if (numDecimals > 0) {
+            formattedFloat = formattedFloat.replace(/\.?0+$/, "")
+        }
+        
+        return formattedFloat + siSymbol
+    }
 
     function trimAndLowercaseAddress(address: string) {
         return address.trim().toLowerCase()
@@ -52,7 +53,7 @@ export default function useFormat() {
     return { 
         convertString, 
         formatDecimalString,
-        formatNumber,
+        formatEthersCasimir,
         trimAndLowercaseAddress,
     }
 }
\ No newline at end of file
diff --git a/apps/web/src/composables/operators.ts b/apps/web/src/composables/operators.ts
index 3c7d250c3..ceb9430a6 100644
--- a/apps/web/src/composables/operators.ts
+++ b/apps/web/src/composables/operators.ts
@@ -1,4 +1,4 @@
-import { readonly, ref } from "vue"
+import { readonly, ref, watch } from "vue"
 import { Operator, Scanner } from "@casimir/ssv"
 import { Account, PoolConfig, RegisteredOperator, RegisterOperatorWithCasimirParams } from "@casimir/types"
 import { ethers } from "ethers"
@@ -20,8 +20,16 @@ let eigenManager: CasimirManager
 let eigenRegistry: CasimirRegistry
 let eigenViews: CasimirViews
 
-const { getContracts } = useContracts()
-const { ethereumUrl, ssvNetworkAddress, ssvViewsAddress, usersUrl } = useEnvironment()
+const { 
+    contractsAreInitialized,
+    getBaseManager,
+    getBaseRegistry,
+    getBaseViews,
+    getEigenManager,
+    getEigenRegistry,
+    getEigenViews
+} = useContracts()
+const { ethereumUrl, ssvNetworkAddress, ssvViewsAddress, usersUrl, batchProvider, provider, webSocketProvider } = useEnvironment()
 const { browserProvidersList, getEthersBrowserSigner } = useEthers()
 const { getEthersLedgerSigner } = useLedger()
 const { getEthersTrezorSigner } = useTrezor()
@@ -31,16 +39,23 @@ const { getWalletConnectSignerV2 } = useWalletConnectV2()
 const loadingInitializeOperators = ref(false)
 const loadingInitializeOperatorsError = ref(false)
 
+const loadingAddOperator = ref(false)
+const loadingAddOperatorError = ref(false)
+const loadingRegisteredOperators = ref(false)
+const loadingRegisteredOperatorsError = ref(false)
+
+const nonregisteredBaseOperators = ref<Operator[]>([])
+const nonregisteredEigenOperators = ref<Operator[]>([])
+const registeredBaseOperators = ref<Operator[]>([])
+const registeredEigenOperators = ref<Operator[]>([])
+
 export default function useOperators() {
-    const loadingAddOperator = ref(false)
-    const loadingAddOperatorError = ref(false)
-    const loadingRegisteredOperators = ref(false)
-    const loadingRegisteredOperatorsError = ref(false)
 
-    const nonregisteredBaseOperators = ref<Operator[]>([])
-    const nonregisteredEigenOperators = ref<Operator[]>([])
-    const registeredBaseOperators = ref<Operator[]>([])
-    const registeredEigenOperators = ref<Operator[]>([])
+    watch(contractsAreInitialized, async () => {
+        if (contractsAreInitialized.value) {
+            await initializeOperatorComposable()
+        }
+    })
 
     async function addOperator({ address, nodeUrl }: { address: string, nodeUrl: string }) {
         try {
@@ -65,10 +80,13 @@ export default function useOperators() {
     async function getUserOperators(): Promise<void> {
         const userAddresses = user.value?.accounts.map((account: Account) => account.address) as string[]
 
+        const availableProvider = webSocketProvider || batchProvider || provider 
+
         const scanner = new Scanner({ 
             ethereumUrl,
             ssvNetworkAddress,
-            ssvViewsAddress
+            ssvViewsAddress,
+            provider: availableProvider
         })
 
         const ssvOperators: Operator[] = []
@@ -149,15 +167,12 @@ export default function useOperators() {
 
     async function initializeOperatorComposable() {
         try {
-            /* Get Manager, Views, and Registry */
-            const { baseManager: managerContract, baseRegistry: registryContract, baseViews: viewsContract } = await getContracts()
-            const { eigenManager: eigenManagerContract, eigenRegistry: eigenRegistryContract, eigenViews: eigenViewsContract } = await getContracts()
-            baseManager = managerContract
-            baseRegistry = registryContract
-            baseViews = viewsContract
-            eigenManager = eigenManagerContract
-            eigenRegistry = eigenRegistryContract
-            eigenViews = eigenViewsContract
+            baseManager = getBaseManager()
+            baseRegistry = getBaseRegistry()
+            baseViews = getBaseViews()
+            eigenManager = getEigenManager()
+            eigenRegistry = getEigenRegistry()
+            eigenViews = getEigenViews()
 
             loadingInitializeOperators.value = true
             listenForContractEvents()
@@ -226,7 +241,7 @@ export default function useOperators() {
         loadingAddOperatorError: readonly(loadingAddOperatorError),
         loadingInitializeOperators: readonly(loadingInitializeOperators),
         loadingInitializeOperatorsError: readonly(loadingInitializeOperatorsError),
-        initializeOperatorComposable,
+        // initializeOperatorComposable,
         registerOperatorWithCasimir,
     }
 }
diff --git a/apps/web/src/composables/staking.ts b/apps/web/src/composables/staking.ts
index 41f317021..da52f212e 100644
--- a/apps/web/src/composables/staking.ts
+++ b/apps/web/src/composables/staking.ts
@@ -1,8 +1,7 @@
-import { ref } from "vue"
+import { readonly, ref, watch } from "vue"
 import { ethers } from "ethers"
 import { ProviderString } from "@casimir/types"
 import useContracts from "@/composables/contracts"
-import useEnvironment from "@/composables/environment"
 import useEthers from "@/composables/ethers"
 import useLedger from "@/composables/ledger"
 import useTrezor from "@/composables/trezor"
@@ -10,8 +9,7 @@ import useWallets from "@/composables/wallets"
 import useWalletConnectV2 from "./walletConnectV2"
 import { CasimirManager } from "@casimir/ethereum/build/@types"
 
-const { getContracts } = useContracts()
-const { provider } = useEnvironment()
+const { getBaseManager, getEigenManager, contractsAreInitialized } = useContracts()
 const { browserProvidersList, getEthersBrowserSigner } = useEthers()
 const { getEthersLedgerSigner } = useLedger()
 const { getEthersTrezorSigner } = useTrezor()
@@ -19,25 +17,30 @@ const { detectActiveNetwork, switchEthersNetwork } = useWallets()
 const { getWalletConnectSignerV2 } = useWalletConnectV2()
 
 const stakingComposableInitialized = ref(false)
+const awaitingStakeOrWithdrawConfirmation = ref(false)
 
 let baseManager: CasimirManager
 let eigenManager: CasimirManager
 
 export default function useStaking() {
 
+    watch(contractsAreInitialized, async () => {
+        if (contractsAreInitialized.value) {
+            await initializeStakingComposable()
+        }
+    })
+
     async function initializeStakingComposable() {
+        baseManager = getBaseManager()
+        eigenManager = getEigenManager()
         if (stakingComposableInitialized.value) return
         try {
-            /* Get Managers */
-            const { baseManager: baseManagerFromContracts, eigenManager: eigenManagerFromContracts } = await getContracts()
-            baseManager = baseManagerFromContracts
-            eigenManager = eigenManagerFromContracts
             stakingComposableInitialized.value = true
         } catch (error) {
             console.log("Error initializing staking component :>> ", error)
         }
     }
-    
+
     async function deposit({ amount, walletProvider, type }: { amount: string, walletProvider: ProviderString, type: "default" | "eigen" }) {
         try {
             const activeNetwork = await detectActiveNetwork(walletProvider)
@@ -63,9 +66,14 @@ export default function useStaking() {
             const fees = await getDepositFees()
             const depositAmount = parseFloat(amount) * ((100 + fees) / 100)
             const value = ethers.utils.parseEther(depositAmount.toString())
-            return await managerSigner.depositStake({ value, type: 2 })
+            awaitingStakeOrWithdrawConfirmation.value = true
+            const result = await managerSigner.depositStake({ value, type: 2 })
+            const confirmation = await result.wait(1)
+            if (confirmation) awaitingStakeOrWithdrawConfirmation.value = false
+            return confirmation
         } catch (err) {
             console.error(`There was an error in deposit function: ${JSON.stringify(err)}`)
+            awaitingStakeOrWithdrawConfirmation.value = false
             return false
         }
     }
@@ -81,7 +89,7 @@ export default function useStaking() {
             console.error(`There was an error in getDepositFees function: ${JSON.stringify(err)}`)
             throw new Error(err)
         }
-    }    
+    }
 
     async function getUserStake(address: string): Promise<number> {
         if (!stakingComposableInitialized.value) return 0
@@ -98,7 +106,7 @@ export default function useStaking() {
         }
     }
 
-    async function getWithdrawableBalance({ walletProvider, type }: {walletProvider: ProviderString, type: "default" | "eigen"}) {
+    async function getWithdrawableBalance({ walletProvider, type }: { walletProvider: ProviderString, type: "default" | "eigen" }) {
         let signer
         if (browserProvidersList.includes(walletProvider)) {
             signer = getEthersBrowserSigner(walletProvider)
@@ -119,37 +127,48 @@ export default function useStaking() {
     }
 
     async function withdraw({ amount, walletProvider, type }: { amount: string, walletProvider: ProviderString, type: "default" | "eigen" }) {
-        const activeNetwork = await detectActiveNetwork(walletProvider)
-        if (activeNetwork !== 5) {
-            await switchEthersNetwork(walletProvider, "0x5")
-            return window.location.reload()
-        }
-
-        let signer
-        if (browserProvidersList.includes(walletProvider)) {
-            signer = getEthersBrowserSigner(walletProvider)
-        } else if (walletProvider === "WalletConnect") {
-            await getWalletConnectSignerV2()
-        } else if (walletProvider === "Ledger") {
-            getEthersLedgerSigner()
-        } else if (walletProvider === "Trezor") {
-            getEthersTrezorSigner()
-        } else {
-            throw new Error(`Invalid wallet provider: ${walletProvider}`)
+        try {
+            const activeNetwork = await detectActiveNetwork(walletProvider)
+            if (activeNetwork !== 5) {
+                await switchEthersNetwork(walletProvider, "0x5")
+                return window.location.reload()
+            }
+    
+            let signer
+            if (browserProvidersList.includes(walletProvider)) {
+                signer = getEthersBrowserSigner(walletProvider)
+            } else if (walletProvider === "WalletConnect") {
+                await getWalletConnectSignerV2()
+            } else if (walletProvider === "Ledger") {
+                getEthersLedgerSigner()
+            } else if (walletProvider === "Trezor") {
+                getEthersTrezorSigner()
+            } else {
+                throw new Error(`Invalid wallet provider: ${walletProvider}`)
+            }
+            const manager = type === "default" ? baseManager : eigenManager
+            const managerSigner = (manager as CasimirManager).connect(signer as ethers.Signer)
+            const value = ethers.utils.parseEther(amount)
+            awaitingStakeOrWithdrawConfirmation.value = true
+            const result = await managerSigner.requestWithdrawal(value)
+            const confirmation = await result.wait(1)
+            if (confirmation) awaitingStakeOrWithdrawConfirmation.value = false
+            return confirmation
+        } catch (err) {
+            console.error(`There was an error in withdraw function: ${JSON.stringify(err)}`)
+            awaitingStakeOrWithdrawConfirmation.value = false
+            return false
         }
-        const manager = type === "default" ? baseManager : eigenManager
-        const managerSigner = (manager as CasimirManager).connect(signer as ethers.Signer)
-        const value = ethers.utils.parseEther(amount)
-        return await managerSigner.requestWithdrawal(value)
     }
 
-    return { 
+    return {
+        awaitingStakeOrWithdrawConfirmation: readonly(awaitingStakeOrWithdrawConfirmation),
         stakingComposableInitialized,
         initializeStakingComposable,
-        deposit, 
+        deposit,
         getDepositFees,
         getUserStake,
         getWithdrawableBalance,
-        withdraw 
+        withdraw
     }
 }
\ No newline at end of file
diff --git a/apps/web/src/composables/user.ts b/apps/web/src/composables/user.ts
index 248474011..41bb039db 100644
--- a/apps/web/src/composables/user.ts
+++ b/apps/web/src/composables/user.ts
@@ -1,34 +1,22 @@
-import { onMounted, onUnmounted, readonly, ref, watch } from "vue"
-import { Account, UserWithAccountsAndOperators } from "@casimir/types"
+import { readonly, ref, watch } from "vue"
+import { UserWithAccountsAndOperators } from "@casimir/types"
 import useEnvironment from "@/composables/environment"
 import { ethers } from "ethers"
 
-// Test address: 0xd557a5745d4560B24D36A68b52351ffF9c86A212
-const { provider, usersUrl } = useEnvironment()
-
-const initializeComposable = ref(false)
+const { usersUrl, batchProvider } = useEnvironment()
 const user = ref<UserWithAccountsAndOperators | undefined>(undefined)
+const userComposableInitialized = ref(false)
 
 export default function useUser() {
-    // TODO: Move back to ethers composable
-    async function getEthersBalance(address: string): Promise<GLfloat> {
-        const balance = await provider.getBalance(address)
-        return parseFloat(ethers.utils.formatEther(balance))
+    async function initializeUserComposable() {
+        if (userComposableInitialized.value) return
+        userComposableInitialized.value = true
+        watch(user, async () => {
+            await setUserAccountBalances()
+        })
     }
 
-    // onMounted(async () => {
-    //     if (!initializeComposable.value) {
-    //         initializeComposable.value = true
-    //     }
-    // })
-
-    // onUnmounted(() => {
-    //     initializeComposable.value = false
-    // })
-
-    async function setUser(
-        newUserValue: UserWithAccountsAndOperators | undefined
-    ) {
+    function setUser(newUserValue: UserWithAccountsAndOperators | undefined) {
         user.value = newUserValue
     }
 
@@ -36,23 +24,22 @@ export default function useUser() {
         try {
             if (user?.value?.accounts) {
                 const { accounts } = user.value
-                const accountsWithBalances = await Promise.all(
-                    accounts.map(async (account: Account) => {
-                        const { address } = account
-                        const balance = await getEthersBalance(address)
-                        return {
-                            ...account,
-                            balance,
-                        }
-                    })
-                )
+                const balancePromises = accounts.map(account => {
+                    return batchProvider.getBalance(account.address)
+                })
+                const balances = await Promise.all(balancePromises)
+                const accountsWithBalances = accounts.map((account, index) => ({
+                    ...account,
+                    balance: parseFloat(ethers.utils.formatEther(balances[index])),
+                }))
+    
                 user.value.accounts = accountsWithBalances
             }
         } catch (error) {
             throw new Error("Error setting user account balances")
         }
     }
-
+    
     async function updateUserAgreement(agreed: boolean) {
         const requestOptions = {
             method: "PUT",
@@ -66,15 +53,11 @@ export default function useUser() {
             requestOptions
         )
     }
-
-    watch(user, async () => {
-        if (!user.value) return
-        await setUserAccountBalances()
-    })
-
+      
     return {
         user: readonly(user),
+        initializeUserComposable,
         setUser,
         updateUserAgreement,
     }
-}
+}
\ No newline at end of file
diff --git a/apps/web/src/composables/walletConnectV2.ts b/apps/web/src/composables/walletConnectV2.ts
index 190c9fd83..724700a91 100644
--- a/apps/web/src/composables/walletConnectV2.ts
+++ b/apps/web/src/composables/walletConnectV2.ts
@@ -106,7 +106,7 @@ export default function useWalletConnectV2() {
 
     async function initializeWalletConnect() {
         if (componentIsMounted.value) return
-        if (import.meta.env.MODE === "development") console.log("initializing wallet connect")
+        // if (import.meta.env.MODE === "development") console.log("initializing wallet connect")
         componentIsMounted.value = true
 
         // Check for persisted sessions & Subscribe to provider events
diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
index 6cc0d1205..de2ff292b 100644
--- a/apps/web/src/main.ts
+++ b/apps/web/src/main.ts
@@ -8,6 +8,17 @@ import { SuperTokensWebJSConfig } from "./sessions.config"
 
 SuperTokens.init(SuperTokensWebJSConfig)
 
+// const originalFetch = window.fetch
+// let fetchCallCount = 0
+// window.fetch = async (...args) => {
+//     const url = args[0]
+//     if (url === "https://goerli.infura.io/v3/46a379ac6895489f812f33beb726b03b" || url === "http://127.0.0.1:8545")  {
+//         fetchCallCount++
+//         console.log(`Fetch call count: ${fetchCallCount}`)
+//     }
+//     return originalFetch(...args)
+// }
+
 const app = createApp(App)
 app.use(router)
-app.mount("#app")
+app.mount("#app")
\ 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 208f6c52d..eef0d7428 100644
--- a/apps/web/src/pages/operators/Operator.vue
+++ b/apps/web/src/pages/operators/Operator.vue
@@ -3,9 +3,9 @@ import { onMounted, ref, watch } from "vue"
 import VueFeather from "vue-feather"
 import { ProviderString } from "@casimir/types"
 import useAuth from "@/composables/auth"
+import useContracts from "@/composables/contracts"
 import useEnvironment from "@/composables/environment"
 // import useEthers from '@/composables/ethers'
-import useFiles from "@/composables/files"
 import useFormat from "@/composables/format"
 import useOperators from "@/composables/operators"
 import useUser from "@/composables/user"
@@ -13,10 +13,9 @@ import useUser from "@/composables/user"
 const { loadingSessionLogin } = useAuth()
 const { docsUrl } = useEnvironment()
 // const { detectActiveWalletAddress } = useEthers()
-const { exportFile } = useFiles()
+const { contractsAreInitialized } = useContracts()
 const { convertString } = useFormat()
 const {
-    initializeOperatorComposable,
     registerOperatorWithCasimir,
     nonregisteredBaseOperators,
     nonregisteredEigenOperators,
@@ -117,7 +116,6 @@ const submitButtonTxt = ref("Submit")
 onMounted(async () => {
     if (user.value) {
         loading.value = true
-        await initializeOperatorComposable()
 
         // Autofill disable
         const disableAutofill = () => {
@@ -129,15 +127,23 @@ onMounted(async () => {
 
         document.addEventListener("DOMContentLoaded", disableAutofill)
 
-        filterData()
     }
+
+    tableData.value = [...registeredBaseOperators.value, ...registeredEigenOperators.value].map((operator: any) => {
+        return {
+            id: operator.id,
+            walletAddress: operator.ownerAddress,
+            collateral: operator.collateral + " ETH",
+            poolCount: operator.poolCount,
+            nodeURL: operator.url
+        }
+    })
+    filterData()
 })
 
 watch(user, async () => {
     if (user.value) {
         loading.value = true
-        await initializeOperatorComposable()
-
         filterData()
     }
 })
@@ -192,6 +198,12 @@ watch([searchInput,
     filterData()
 })
 
+watch(contractsAreInitialized, () => {
+    if (!contractsAreInitialized.value) {
+        loading.value = true
+    }
+})
+
 const openWalletsModal = () => {
     const el = document.getElementById("connect_wallet_button")
     if (el) {
@@ -215,20 +227,20 @@ const handleInputChangeCollateral = (event: any) => {
 
 const filterData = () => {
     loading.value = true
-    let filteredDataArray
-
-    if (searchInput.value === "") {
-        filteredDataArray = tableData.value
-    } else {
-        const searchTerm = searchInput.value
-        filteredDataArray = tableData.value.filter((item: any) => {
-            return (
-            // Might need to modify to match types each variable
-            // item.walletProvider?.toLowerCase().includes(searchTerm) 
-                true
-            )
-        })
-    }
+    let filteredDataArray = [...tableData.value]
+
+    // if (searchInput.value === "") {
+    //     filteredDataArray = tableData.value
+    // } else {
+    //     const searchTerm = searchInput.value
+    //     filteredDataArray = tableData.value.filter((item: any) => {
+    //         return (
+    //         // Might need to modify to match types each variable
+    //         // item.walletProvider?.toLowerCase().includes(searchTerm) 
+    //             true
+    //         )
+    //     })
+    // }
 
     if (selectedHeader.value !== "" && selectedOrientation.value !== "") {
         filteredDataArray = filteredDataArray.sort((a: any, b: any) => {
@@ -246,6 +258,7 @@ const filterData = () => {
 
     const start = (currentPage.value - 1) * itemsPerPage.value
     const end = start + itemsPerPage.value
+
     filteredData.value = filteredDataArray.slice(start, end) as any
     loading.value = false
 }
diff --git a/apps/web/src/pages/overview/components/BreakdownChart.vue b/apps/web/src/pages/overview/components/BreakdownChart.vue
index ada2fc782..c03c54926 100644
--- a/apps/web/src/pages/overview/components/BreakdownChart.vue
+++ b/apps/web/src/pages/overview/components/BreakdownChart.vue
@@ -1,20 +1,14 @@
 <script lang="ts" setup>
-import LineChartJS from "@/components/charts/LineChartJS.vue"
 import { onMounted, ref, watch } from "vue"
 import useAnalytics from "@/composables/analytics"
-import useUser from "@/composables/user"
-import useScreenDimensions from "@/composables/screenDimensions"
-import { AnalyticsData, ProviderString, UserAnalyticsData, UserWithAccountsAndOperators } from "@casimir/types"
 import useBreakdownMetrics from "@/composables/breakdownMetrics"
+import useScreenDimensions from "@/composables/screenDimensions"
+import useUser from "@/composables/user"
+import LineChartJS from "@/components/charts/LineChartJS.vue"
+import { AnalyticsData, ProviderString, UserAnalyticsData } from "@casimir/types"
 
 const {  user } = useUser()
-const { 
-    currentStaked,
-    stakingRewards,
-    totalWalletBalance,
-    initializeBreakdownMetricsComposable,
-    uninitializeBreakdownMetricsComposable
-} = useBreakdownMetrics()
+const { currentStaked, stakingRewards, totalWalletBalance } = useBreakdownMetrics()
 const { screenWidth } = useScreenDimensions()
 
 const chardId = ref("cross_provider_chart")
@@ -106,17 +100,9 @@ const setChartData = (userAnalytics: UserAnalyticsData) => {
 
 const { userAnalytics, updateAnalytics, initializeAnalyticsComposable } = useAnalytics()
 
-watch(userAnalytics, () => {
-    setChartData(userAnalytics.value as UserAnalyticsData)
-})
-
-onMounted(() => {
-    setChartData(userAnalytics.value as UserAnalyticsData)
-})
+onMounted(() => { setChartData(userAnalytics.value as UserAnalyticsData) })
 
-watch(selectedTimeframe, () => {
-    setChartData(userAnalytics.value as UserAnalyticsData)
-})
+watch([userAnalytics, selectedTimeframe], () => { setChartData(userAnalytics.value as UserAnalyticsData) })
 
 watch(user, async () => {
     await updateAnalytics()
diff --git a/apps/web/src/pages/overview/components/Staking.vue b/apps/web/src/pages/overview/components/Staking.vue
index 4200640d2..e1236d5e1 100644
--- a/apps/web/src/pages/overview/components/Staking.vue
+++ b/apps/web/src/pages/overview/components/Staking.vue
@@ -1,18 +1,19 @@
 <script lang="ts" setup>
-import { computed, ref, onMounted, watch } from "vue"
+import { ref, onMounted, watch } from "vue"
 import { FormattedWalletOption, ProviderString } from "@casimir/types"
 import VueFeather from "vue-feather"
+import useEnvironment from "@/composables/environment"
 import useStaking from "@/composables/staking"
-import useEthers from "@/composables/ethers"
 import useFormat from "@/composables/format"
 import usePrice from "@/composables/price"
 import useUser from "@/composables/user"
+import { ethers } from "ethers"
 
 import TermsOfService from "@/components/TermsOfService.vue"
 
+const { batchProvider } = useEnvironment()
 const { stakingComposableInitialized, deposit, initializeStakingComposable, withdraw, getWithdrawableBalance } = useStaking()
-const { getEthersBalance } = useEthers()
-const { convertString, formatNumber } = useFormat()
+const { convertString, formatEthersCasimir } = useFormat()
 const { getCurrentPrice } = usePrice()
 const { user, updateUserAgreement } = useUser()
 
@@ -51,31 +52,22 @@ const toggleBackgroundColor = ref("#eee")  // Initial color
 
 const balances = ref<{ [key: string]: string | null }>({})
 
-const fetchBalances = async () => {
-    const balancePromises = formattedWalletOptions.value.map(async (walletOption) => {
-        for (const address of walletOption.addresses) {
-            balances.value[address] = formatNumber(await getEthersBalance(address))
-        }
-    })
-
-    await Promise.all(balancePromises)
+async function fetchBalances() {
+    const addresses = formattedWalletOptions.value.map((walletOption) => walletOption.addresses).flat()
+    const balancePromises = addresses.map((address: string) => batchProvider.getBalance(address))
+    const resolvedBalancePromises = await Promise.all(balancePromises)
+    balances.value = resolvedBalancePromises.reduce((acc, balance, index) => {
+        const formattedBalance = formatEthersCasimir(parseFloat(ethers.utils.formatEther(balance)), 2)
+        acc[addresses[index]] = formattedBalance
+        return acc
+    }, {} as { [key: string]: string | null })
 }
 
 watch(formattedWalletOptions, async () => {
     await fetchBalances()
 })
 
-// const walletOptionsWithBalances = computed(() => {
-//   return formattedWalletOptions.value.map(walletOption => ({
-//     ...walletOption,
-//     addresses: walletOption.addresses.map(address => ({
-//       address,
-//       balance: balances.value[address]
-//     }))
-//   }))
-// })
-
-const toggleShineEffect = () => {
+function toggleShineEffect() {
     eigenIsToggled.value = !eigenIsToggled.value
     isShining.value = eigenIsToggled.value
     // toggleEstimatedAPY()
@@ -111,18 +103,18 @@ const handleInputOnAmountToStakeOrWithdraw = (event: any) => {
 
 const selectAmountInput = () => {
     const inputElement = document.getElementById("amount_input") as HTMLInputElement
-  
+
     if (inputElement) {
 
         inputElement.setSelectionRange(0, inputElement.value.length)
-  
+
         // For mobile devices
         inputElement.select()
     }
-  
+
 }
 
-const aggregateAddressesByProvider = () => {
+function aggregateAddressesByProvider() {
     formattedWalletOptions.value = []
     // Iterate over user.value.accounts and aggregate addresses by provider
     if (user.value) {
@@ -137,7 +129,7 @@ const aggregateAddressesByProvider = () => {
             })
         })
     } else {
-    // empty out staking comp
+        // empty out staking comp
         selectedStakingProvider.value = ""
         selectedWalletAddress.value = null
         formattedAmountToStakeOrWithdraw.value = ""
@@ -151,7 +143,7 @@ watch(formattedAmountToStakeOrWithdraw, async () => {
         const floatAmount = parseFloat(formattedAmountToStakeOrWithdraw.value?.replace(/,/g, ""))
         let maxAmount
         if (selectedWalletAddress.value) {
-            maxAmount = await getEthersBalance(selectedWalletAddress.value)
+            // maxAmount = await getEthersBalance(selectedWalletAddress.value)
         } else {
             maxAmount = 0
         }
@@ -169,7 +161,7 @@ watch(formattedAmountToStakeOrWithdraw, async () => {
 watch(selectedWalletAddress, async () => {
     if (!stakingComposableInitialized.value) return
     if (selectedWalletAddress.value) {
-        addressBalance.value = (Math.round(await getEthersBalance(selectedWalletAddress.value) * 100) / 100) + " ETH"
+    // addressBalance.value = (Math.round(await getEthersBalance(selectedWalletAddress.value) * 100) / 100) + " ETH"
         isShining.value = true
     // currentUserStake.value = await getUserStake(selectedWalletAddress.value)
     } else {
@@ -179,39 +171,29 @@ watch(selectedWalletAddress, async () => {
 })
 
 watch(user, async () => {
-    if (!stakingComposableInitialized.value) return
     if (user.value?.id) {
         aggregateAddressesByProvider()
         termsOfServiceCheckbox.value = user.value?.agreedToTermsOfService as boolean
-        addressBalance.value = (Math.round(await getEthersBalance(user.value?.address as string) * 100) / 100) + " ETH"
         selectedWalletAddress.value = user.value?.address as string
         selectedStakingProvider.value = user.value?.walletProvider as ProviderString
-    // currentUserStake.value = await getUserStake(selectedWalletAddress.value as string)
-    // estimatedFees.value = await getDepositFees()
     } else {
         selectedStakingProvider.value = ""
         selectedWalletAddress.value = null
         formattedAmountToStakeOrWithdraw.value = ""
         addressBalance.value = null
-    // currentUserStake.value = 0
     }
 })
 
 onMounted(async () => {
-    // TODO: @ccali11 - Want to make sure this is non-blocking
-    await initializeStakingComposable()
     aggregateAddressesByProvider()
     currentEthPrice.value = Math.round((await getCurrentPrice({ coin: "ETH", currency: "USD" })) * 100) / 100
     if (user.value?.id) {
-    // estimatedFees.value = await getDepositFees()
-        addressBalance.value = (Math.round(await getEthersBalance(user.value?.address as string) * 100) / 100) + " ETH"
+        // estimatedFees.value = await getDepositFees()
         selectedStakingProvider.value = user.value?.walletProvider as ProviderString
         selectedWalletAddress.value = user.value?.address as string
         if (!stakingComposableInitialized.value) return
-        // currentUserStake.value = await getUserStake(selectedWalletAddress.value as string)
         isShining.value = true
     }
-    await fetchBalances()
 })
 
 const handleOutsideClickForWalletInput = (event: any) => {
@@ -242,7 +224,7 @@ const handleOutsideClickForTermsOfService = (event: any) => {
     }
 }
 
-watch(openSelectWalletInput, ()=>{
+watch(openSelectWalletInput, () => {
     if (openSelectWalletInput.value) {
         window.addEventListener("click", handleOutsideClickForWalletInput)
     } else {
@@ -250,7 +232,7 @@ watch(openSelectWalletInput, ()=>{
     }
 })
 
-watch(openSelectOperatorGroupInput, ()=>{
+watch(openSelectOperatorGroupInput, () => {
     if (openSelectWalletInput.value) {
         window.addEventListener("click", handleOutsideClickForOperatorGroupInput)
     } else {
@@ -258,7 +240,7 @@ watch(openSelectOperatorGroupInput, ()=>{
     }
 })
 
-watch(openTermsOfService, ()=>{
+watch(openTermsOfService, () => {
     if (openTermsOfService.value) {
         window.addEventListener("click", handleOutsideClickForTermsOfService)
     } else {
@@ -274,33 +256,23 @@ const handleStake = async () => {
     //   formattedAmountToStakeOrWithdraw.value = ''
     //   return alert(`The account you selected is not the same as the one that is active in your ${selectedStakingProvider.value} wallet. Please open your browser extension and select the account that you want to log in with.`)
     // }
-    const result = await deposit({ 
+    eigenIsToggled.value = false
+    const result = await deposit({
         amount: formattedAmountToStakeOrWithdraw.value,
         walletProvider: selectedStakingProvider.value,
-        type: stakeType.value 
+        type: stakeType.value
     })
 
     if (result === false) stakeButtonText.value = "User Rejected Signature"
     else stakeButtonText.value = "Staked!"
 
-    setTimeout(() =>{
+    setTimeout(() => {
         stakeButtonText.value = "Stake"
         formattedAmountToStakeOrWithdraw.value = ""
     }, 1000)
 
-    if (result) {
-        const waitResponse = await result.wait(1)
-        eigenIsToggled.value = false
-        addressBalance.value = (Math.round(await getEthersBalance(user.value?.address as string) * 100) / 100) + " ETH"
-        if (waitResponse) {
-            alert("Your Stake Has Been Deposited!")
-        } else {
-            alert("Your Stake Action Has Failed, Please Try Again Later!")
-        }
-        console.log("waitResponse :>> ", waitResponse)
-    }
-
-    // currentUserStake.value = await getUserStake(selectedWalletAddress.value as string)
+    if (result) alert("Your Stake Has Been Deposited!")
+    else alert("Your Stake Action Has Failed, Please Try Again Later!")
 }
 
 const handleWithdraw = async () => {
@@ -316,39 +288,30 @@ const handleWithdraw = async () => {
         walletProvider: selectedStakingProvider.value,
         type: stakeType.value
     })
-  
+
     if (parseFloat(withdrawableBalance) < parseFloat(formattedAmountToStakeOrWithdraw.value)) {
         stakeButtonText.value = "Withdraw"
         formattedAmountToStakeOrWithdraw.value = ""
         return alert(`You can currently withdraw up to ${withdrawableBalance} ETH. Please try again with a smaller amount.`)
     }
 
-    const result = await withdraw({ 
+    eigenIsToggled.value = false
+    const confirmation = await withdraw({
         amount: formattedAmountToStakeOrWithdraw.value,
         walletProvider: selectedStakingProvider.value,
-        type: stakeType.value 
+        type: stakeType.value
     })
 
-    if (!result) stakeButtonText.value = "Failed!"
+    if (!confirmation) stakeButtonText.value = "Failed!"
     else stakeButtonText.value = "Withdrawn!"
 
-    setTimeout(() =>{
+    setTimeout(() => {
         stakeButtonText.value = "Withdraw"
         formattedAmountToStakeOrWithdraw.value = ""
     }, 1000)
 
-    if (result) {
-        const waitResponse = await result.wait(1)
-        eigenIsToggled.value = false
-        addressBalance.value = (Math.round(await getEthersBalance(user.value?.address as string) * 100) / 100) + " ETH"
-        if (waitResponse) {
-            alert("Your Stake Has Been Withdrawn!")
-        } else {
-            alert("Your Stake Action Has Failed, Please Try Again Later!")
-        }
-    }
-
-    // currentUserStake.value = await getUserStake(selectedWalletAddress.value as string)
+    if (confirmation) alert("Your Stake Has Been Withdrawn!")
+    else alert("Your Stake Action Has Failed, Please Try Again Later!")
 }
 
 function setStakeOrWithdraw(option: "stake" | "withdraw") {
@@ -364,14 +327,14 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
     <div class="stake-withdraw-selector mt-[12px] mb-[12px]">
       <div
         class="action-button stake"
-        :class="{active: stakeOrWithdraw === 'stake'}"
+        :class="{ active: stakeOrWithdraw === 'stake' }"
         @click="setStakeOrWithdraw('stake')"
       >
         Stake
       </div>
       <div
         class="action-button withdraw"
-        :class="{active: stakeOrWithdraw === 'withdraw'}"
+        :class="{ active: stakeOrWithdraw === 'withdraw' }"
         @click="setStakeOrWithdraw('withdraw')"
       >
         Withdraw
@@ -396,7 +359,7 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
         @click="openSelectWalletInput = !openSelectWalletInput"
       >
         <div class="flex justify-between w-full">
-          <div>{{ selectedWalletAddress ? convertString(selectedWalletAddress) : 'Select wallet' }}</div> 
+          <div>{{ selectedWalletAddress ? convertString(selectedWalletAddress) : 'Select wallet' }}</div>
           <div class="flex gap-10 font-[400]">
             {{ addressBalance ? addressBalance : '' }}
             <vue-feather
@@ -536,7 +499,7 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
           @click="openSelectOperatorGroupInput = !openSelectOperatorGroupInput"
         >
           <div class="flex justify-between w-full">
-            <div>{{ selectedOperatorGroup ? selectedOperatorGroup : 'Select Operator Group' }}</div> 
+            <div>{{ selectedOperatorGroup ? selectedOperatorGroup : 'Select Operator Group' }}</div>
             <div class="flex gap-10 font-[400]">
               <!-- {{ addressBalance ? addressBalance : '' }} -->
               <!-- TODO: This needs to be the amount available to withdraw -->
@@ -567,7 +530,7 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
             <button
               class="w-full text-left rounded-[8px] py-[10px] px-[14px]
             hover:bg-grey_1 flex justify-between items-center text-grey_4 hover:text-grey_6"
-              @click="selectedOperatorGroup = 'Default', openSelectOperatorGroupInput = false, stakeType='default'"
+              @click="selectedOperatorGroup = 'Default', openSelectOperatorGroupInput = false, stakeType = 'default'"
             >
               Default
               <vue-feather
@@ -579,7 +542,7 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
             <button
               class="w-full text-left rounded-[8px] py-[10px] px-[14px]
             hover:bg-grey_1 flex justify-between items-center text-grey_4 hover:text-grey_6"
-              @click="selectedOperatorGroup = 'Eigen', openSelectOperatorGroupInput = false, stakeType='eigen'"
+              @click="selectedOperatorGroup = 'Eigen', openSelectOperatorGroupInput = false, stakeType = 'eigen'"
             >
               Eigen
               <vue-feather
@@ -648,17 +611,14 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
     <button
       class="submit-button  h-[37px] w-full"
       :class="success ? 'bg-approve' : failure ? 'bg-decline' : 'bg-primary'"
-      :disabled="
-        !(selectedWalletAddress && formattedAmountToStakeOrWithdraw && !errorMessage) 
-          || (stakeButtonText !== 'Stake' && stakeButtonText !== 'Withdraw') 
-          || parseFloat(formattedAmountToStakeOrWithdraw) <= 0 
-          || (stakeOrWithdraw === 'stake' && !termsOfServiceCheckbox)
+      :disabled="!(selectedWalletAddress && formattedAmountToStakeOrWithdraw && !errorMessage)
+        || (stakeButtonText !== 'Stake' && stakeButtonText !== 'Withdraw')
+        || parseFloat(formattedAmountToStakeOrWithdraw) <= 0
+        || (stakeOrWithdraw === 'stake' && !termsOfServiceCheckbox)
       "
       @click="stakeOrWithdraw === 'stake' ? handleStake() : handleWithdraw()"
     >
-      <div
-        class="flex items-center justify-center gap-[5px]"
-      >
+      <div class="flex items-center justify-center gap-[5px]">
         {{ stakeButtonText }}
         <vue-feather
           v-if="success"
@@ -726,7 +686,8 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
 
 .addressBalance_amount {
   font-style: normal;
-  font-size: 22px; /* Temporary */
+  font-size: 22px;
+  /* Temporary */
   line-height: 20px;
   letter-spacing: -0.01em;
   color: #344054;
@@ -853,53 +814,60 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding-left: 10px; /* space from the left edge */
+  padding-left: 10px;
+  /* space from the left edge */
   position: relative;
-  width: 100%; /* takes full width of parent container */
-  height: 44px; /* adjust as needed if required */
+  width: 100%;
+  /* takes full width of parent container */
+  height: 44px;
+  /* adjust as needed if required */
   background-color: rgb(26 12 109);
   /* overflow: hidden; */
   text-align: center;
-  color: #fff; /* or any suitable color for better visibility */
+  color: #fff;
+  /* or any suitable color for better visibility */
   font-size: 14px;
   border-radius: 8px;
-  transition: background-color 0.3s; /* This will animate the color change */
+  transition: background-color 0.3s;
+  /* This will animate the color change */
 }
 
 .eigen-toggle-container:disabled {
-    background-color: rgba(26, 12, 109, 0.5); /* This makes the purple color lighter (grayed out) */
-    /* cursor: not-allowed; This changes the cursor to indicate the button is not clickable */
+  background-color: rgba(26, 12, 109, 0.5);
+  /* This makes the purple color lighter (grayed out) */
+  /* cursor: not-allowed; This changes the cursor to indicate the button is not clickable */
 }
 
 /* .shine_effect {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -150%;
-  width: 200%;
-  height: 200%;
-  background: rgba(255, 255, 255, 0.5);
-  transform: rotate(30deg);
-  pointer-events: none;
-  animation: shine 2.5s infinite;
-}
-
-@keyframes shine {
-  0% {
+    content: '';
+    position: absolute;
+    top: -50%;
     left: -150%;
+    width: 200%;
+    height: 200%;
+    background: rgba(255, 255, 255, 0.5);
+    transform: rotate(30deg);
+    pointer-events: none;
+    animation: shine 2.5s infinite;
   }
-  50% {
-    left: 150%;
-  }
-  100% {
-    left: 150%;
-  }
-} */
+
+  @keyframes shine {
+    0% {
+      left: -150%;
+    }
+    50% {
+      left: 150%;
+    }
+    100% {
+      left: 150%;
+    }
+  } */
 
 .toggle_button {
   position: absolute;
   top: 50%;
-  right: 10px; /* space from the right edge */
+  right: 10px;
+  /* space from the right edge */
   transform: translateY(-50%);
   width: 50px;
   height: 25px;
@@ -910,7 +878,7 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
 }
 
 .card_container .eigen-toggle-container.toggle-on .toggle_button {
-    background-color: green !important;
+  background-color: green !important;
 }
 
 .toggle_circle {
@@ -936,42 +904,59 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
 
 .tooltip_container {
   position: absolute;
-  bottom: 100%; /* position it above the button */
-  left: 50%; /* center it horizontally */
-  transform: translateX(-50%); /* shift it back by half its width to truly center it */
-  padding: 8px 12px; /* space around the text */
-  background-color: #000; /* or any desired tooltip color */
-  color: #fff; /* text color */
-  border-radius: 4px; /* round the corners */
-  opacity: 0; /* starts hidden */
-  transition: opacity 0.3s; /* smooth fade in */
-  white-space: nowrap; /* prevents the text from wrapping */
+  bottom: 100%;
+  /* position it above the button */
+  left: 50%;
+  /* center it horizontally */
+  transform: translateX(-50%);
+  /* shift it back by half its width to truly center it */
+  padding: 8px 12px;
+  /* space around the text */
+  background-color: #000;
+  /* or any desired tooltip color */
+  color: #fff;
+  /* text color */
+  border-radius: 4px;
+  /* round the corners */
+  opacity: 0;
+  /* starts hidden */
+  transition: opacity 0.3s;
+  /* smooth fade in */
+  white-space: nowrap;
+  /* prevents the text from wrapping */
   font-size: 12px;
-  pointer-events: none; /* ensures it doesn't block any interactions */
-  z-index: 10; /* positions it above other elements */
+  pointer-events: none;
+  /* ensures it doesn't block any interactions */
+  z-index: 10;
+  /* positions it above other elements */
 }
 
 .eigen-toggle-container:hover .tooltip_container {
-  opacity: 1; /* show on hover */
+  opacity: 1;
+  /* show on hover */
 }
 
 .tooltip_triangle {
   position: absolute;
-  bottom: -5px; /* position at the bottom of the tooltip */
-  left: 50%; /* center it horizontally */
-  transform: translateX(-50%); /* shift it back by half its width to truly center it */
+  bottom: -5px;
+  /* position at the bottom of the tooltip */
+  left: 50%;
+  /* center it horizontally */
+  transform: translateX(-50%);
+  /* shift it back by half its width to truly center it */
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 5px solid #000; /* same color as the tooltip background */
+  border-top: 5px solid #000;
+  /* same color as the tooltip background */
 }
 
 .stake-withdraw-selector {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
 }
 
 .action-button {
@@ -984,24 +969,25 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
 }
 
 .action-button.stake {
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-    border-right: none;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-right: none;
 }
 
 .action-button.withdraw {
-    border-top-right-radius: 8px;
-    border-bottom-right-radius: 8px;
-    border-left: none;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-left: none;
 }
 
 .action-button:hover {
-    background-color: #ddd;
+  background-color: #ddd;
 }
 
 .action-button.active {
-    background-color: rgb(13, 95, 255); /* Assuming this is the blue from the screenshot */
-    color: white; /* Set text color to white for better contrast */
+  background-color: rgb(13, 95, 255);
+  /* Assuming this is the blue from the screenshot */
+  color: white;
+  /* Set text color to white for better contrast */
 }
-
 </style>@/composables/user@/composables/staking
\ No newline at end of file
diff --git a/common/env/src/index.ts b/common/env/src/index.ts
index 75a3c1076..2b464796b 100644
--- a/common/env/src/index.ts
+++ b/common/env/src/index.ts
@@ -43,6 +43,10 @@ enum ETHEREUM_RPC_URL {
     TESTNET = "https://goerli.infura.io/v3/46a379ac6895489f812f33beb726b03b" // 'https://nodes.casimir.co/eth/goerli/limited'
 }
 
+enum ETHEREUM_WEBSOCKET_URL {
+    TESTNET = "wss://goerli.infura.io/ws/v3/46a379ac6895489f812f33beb726b03b"
+}
+
 const ETHEREUM_SIGNERS = {
     TESTNET: {
         DAO_ORACLE_ADDRESS: "0x728474D29c2F81eb17a669a7582A2C17f1042b57",
@@ -61,6 +65,7 @@ export {
     ETHEREUM_CONTRACTS,
     ETHEREUM_NETWORK_NAME,
     ETHEREUM_RPC_URL,
+    ETHEREUM_WEBSOCKET_URL,
     ETHEREUM_SIGNERS,
     HARDHAT_NETWORK_KEY,
     MOCK_OPERATORS,
diff --git a/package-lock.json b/package-lock.json
index e7980f031..2d6a6798a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8736,6 +8736,8 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -9337,7 +9339,8 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "node_modules/base-x": {
       "version": "3.0.9",
@@ -9814,6 +9817,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -10229,6 +10233,7 @@
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/case/-/case-1.6.3.tgz",
       "integrity": "sha512-mzDSXIPaFwVDvZAHqZ9VlbyF4yyXRuX6IvB06WvPYkqJVO24kX1PPhv9bfpKNFZyxYFmmgo03HUiD8iklmJYRQ==",
+      "dev": true,
       "engines": {
         "node": ">= 0.8.0"
       }
@@ -10986,7 +10991,8 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
     },
     "node_modules/concat-stream": {
       "version": "1.6.2",
@@ -14661,6 +14667,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
       "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "dev": true,
       "dependencies": {
         "graceful-fs": "^4.1.2",
         "jsonfile": "^4.0.0",
@@ -16033,6 +16040,7 @@
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
       "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
+      "dev": true,
       "engines": {
         "node": ">= 4"
       }
@@ -17780,6 +17788,8 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.4.1.tgz",
       "integrity": "sha512-S6cATIPVv1z0IlxdN+zUk5EPjkGCdnhN4wVSBlvoUO1tOLJootbo9CquNJmbIh4yikWHiUedhRYrNPn1arpEmQ==",
+      "dev": true,
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -18513,7 +18523,9 @@
     "node_modules/lodash.truncate": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
-      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw=="
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
+      "dev": true,
+      "peer": true
     },
     "node_modules/lodash.uniqby": {
       "version": "4.7.0",
@@ -19515,6 +19527,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -22463,6 +22476,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -24746,6 +24760,8 @@
       "version": "6.8.1",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz",
       "integrity": "sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==",
+      "dev": true,
+      "peer": true,
       "dependencies": {
         "ajv": "^8.0.1",
         "lodash.truncate": "^4.4.2",
@@ -24794,6 +24810,8 @@
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
       "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -24809,6 +24827,8 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -24816,12 +24836,16 @@
     "node_modules/table/node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "peer": true
     },
     "node_modules/table/node_modules/slice-ansi": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
       "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "astral-regex": "^2.0.0",
@@ -27764,6 +27788,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
       "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+      "dev": true,
       "engines": {
         "node": ">= 14"
       }
diff --git a/scripts/cdk/deploy.ts b/scripts/cdk/deploy.ts
index 0e3668b46..5e8179582 100755
--- a/scripts/cdk/deploy.ts
+++ b/scripts/cdk/deploy.ts
@@ -1,5 +1,5 @@
 import { getSecret, loadCredentials } from "@casimir/aws"
-import { ETHEREUM_CONTRACTS, ETHEREUM_RPC_URL } from "@casimir/env"
+import { ETHEREUM_CONTRACTS, ETHEREUM_RPC_URL, ETHEREUM_WEBSOCKET_URL } from "@casimir/env"
 import { run } from "@casimir/shell"
 
 /**
@@ -23,6 +23,7 @@ void async function () {
 
     const networkKey = process.env.NETWORK?.toUpperCase() || process.env.FORK?.toUpperCase() || "TESTNET"
     process.env.ETHEREUM_RPC_URL = ETHEREUM_RPC_URL[networkKey]
+    process.env.ETHEREUM_WEBSOCKET_URL = ETHEREUM_WEBSOCKET_URL[networkKey]
     process.env.FACTORY_ADDRESS = ETHEREUM_CONTRACTS[networkKey]?.FACTORY_ADDRESS
     process.env.SSV_NETWORK_ADDRESS = ETHEREUM_CONTRACTS[networkKey]?.SSV_NETWORK_ADDRESS
     process.env.SSV_VIEWS_ADDRESS = ETHEREUM_CONTRACTS[networkKey]?.SSV_VIEWS_ADDRESS
@@ -34,6 +35,7 @@ void async function () {
     process.env.PUBLIC_WEBSITE_URL = process.env.WEBSITE_URL
     process.env.PUBLIC_CRYPTO_COMPARE_API_KEY = process.env.CRYPTO_COMPARE_API_KEY
     process.env.PUBLIC_ETHEREUM_RPC_URL = process.env.ETHEREUM_RPC_URL
+    process.env.PUBLIC_ETHEREUM_WEBSOCKET_URL = process.env.ETHEREUM_WEBSOCKET_URL
     process.env.PUBLIC_FACTORY_ADDRESS = process.env.FACTORY_ADDRESS
     process.env.PUBLIC_SSV_NETWORK_ADDRESS = process.env.SSV_NETWORK_ADDRESS
     process.env.PUBLIC_SSV_VIEWS_ADDRESS = process.env.SSV_VIEWS_ADDRESS
diff --git a/scripts/root/dev.ts b/scripts/root/dev.ts
index 2c56462dd..908653698 100644
--- a/scripts/root/dev.ts
+++ b/scripts/root/dev.ts
@@ -1,6 +1,6 @@
 import { ethers } from "ethers"
 import { loadCredentials, getSecret } from "@casimir/aws"
-import { ETHEREUM_CONTRACTS, ETHEREUM_NETWORK_NAME, ETHEREUM_RPC_URL } from "@casimir/env"
+import { ETHEREUM_CONTRACTS, ETHEREUM_NETWORK_NAME, ETHEREUM_RPC_URL, ETHEREUM_WEBSOCKET_URL } from "@casimir/env"
 import { run, runSync } from "@casimir/shell"
 
 /**
@@ -97,6 +97,7 @@ async function root() {
         if (process.env.NETWORK) {
             const networkName = ETHEREUM_NETWORK_NAME[networkKey]
             process.env.ETHEREUM_RPC_URL = ETHEREUM_RPC_URL[networkKey]
+            process.env.ETHEREUM_WEBSOCKET_URL = ETHEREUM_WEBSOCKET_URL[networkKey]
             console.log(`Connecting to ${networkName} network at ${process.env.ETHEREUM_RPC_URL}`)
         } else {
             const networkName = ETHEREUM_NETWORK_NAME[networkKey]
@@ -121,6 +122,7 @@ async function root() {
     process.env.PUBLIC_BLOG_URL = process.env.BLOG_URL
     process.env.PUBLIC_USERS_URL = process.env.USERS_URL
     process.env.PUBLIC_ETHEREUM_RPC_URL = process.env.ETHEREUM_RPC_URL
+    process.env.PUBLIC_ETHEREUM_WEBSOCKET_URL = process.env.ETHEREUM_WEBSOCKET_URL
     process.env.PUBLIC_FACTORY_ADDRESS = process.env.FACTORY_ADDRESS
     process.env.PUBLIC_SSV_NETWORK_ADDRESS = process.env.SSV_NETWORK_ADDRESS
     process.env.PUBLIC_SSV_VIEWS_ADDRESS = process.env.SSV_VIEWS_ADDRESS