From b2b65227fcfec3692e8a0f385d4b1e045ba895f8 Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Wed, 8 Nov 2023 11:12:35 -0500
Subject: [PATCH 1/6] Remove unnecessary chain related code in ethers
 composable

---
 apps/web/src/composables/ethers.ts | 85 ------------------------------
 1 file changed, 85 deletions(-)

diff --git a/apps/web/src/composables/ethers.ts b/apps/web/src/composables/ethers.ts
index 6067ad11d..5098aa588 100644
--- a/apps/web/src/composables/ethers.ts
+++ b/apps/web/src/composables/ethers.ts
@@ -166,16 +166,6 @@ export default function useEthers() {
         return parseFloat(ethers.utils.formatEther(balance))
     }
 
-    async function getEthersBrowserProviderSelectedCurrency(providerString: ProviderString) {
-    // IOTEX Smart Contract Address: 0x6fb3e0a217407efff7ca062d46c26e5d60a14d69
-        const browserProvider = getBrowserProvider(providerString)
-        const web3Provider: ethers.providers.Web3Provider = new ethers.providers.Web3Provider(browserProvider as EthersProvider)
-        const network = await web3Provider.getNetwork()
-        // console.log('network.chainId :>> ', network.chainId)
-        const { currency } = currenciesByChainId[network.chainId.toString() as keyof typeof currenciesByChainId]
-        return currency
-    }
-
     function getEthersBrowserSigner(providerString: ProviderString): ethers.Signer | undefined {
         const provider = getBrowserProvider(providerString)
         if (provider) {
@@ -288,79 +278,4 @@ function getTrustWallet() {
     } else {
         window.open("https://trustwallet.com/download", "_blank")
     }
-}
-
-const currenciesByChainId = {
-    "1": {
-        name: "Mainnet ETH",
-        currency: "ETH",
-    },
-    "3": {
-        name: "Ropsten ETH",
-        currency: "ETH",
-    },
-    "4": {
-        name: "Rinkeby ETH",
-        currency: "ETH",
-    },
-    "5": {
-        name: "Goerli ETH",
-        currency: "ETH",
-    },
-    "42": {
-        name: "Kovan ETH",
-        currency: "ETH",
-    },
-    "56": {
-        name: "Binance Smart Chain",
-        currency: "BNB",
-    },
-    "97": {
-        name: "Binance Smart Chain Testnet",
-        currency: "BNB",
-    },
-    "137": {
-        name: "Polygon",
-        currency: "MATIC",
-    },
-    "31337": {
-        name: "Localhost Network",
-        currency: "ETH",
-    },
-    "80001": {
-        name: "Polygon Testnet",
-        currency: "MATIC",
-    },
-    "4690": {
-        name: "IoTeX",
-        currency: "IOTX",
-    },
-    "4691": {
-        name: "IoTeX Testnet",
-        currency: "IOTX",
-    },
-}
-
-const iotexNetwork = {
-    chainId: ethers.utils.hexlify(4690),
-    chainName: "IoTeX",
-    nativeCurrency: {
-        name: "IoTeX",
-        symbol: "IOTX",
-        decimals: 18
-    },
-    rpcUrls: ["https://api.testnet.iotex.one:80", "http://api.testnet.iotex.one:80"],
-    blockExplorerUrls: ["https://iotexscan.io"]
-}
-
-const goerliNetwork = {
-    chainId: "0x5",
-    chainName: "Goerli Testnet",
-    nativeCurrency: {
-        name: "Goerli",
-        symbol: "GÖETH",
-        decimals: 18
-    },
-    rpcUrls: ["https://goerli.infura.io/v3/6b9f3a5d3d5e4c8e9b5d1f0c3e5f1e4a"],
-    blockExplorerUrls: ["https://goerli.etherscan.io"]
 }
\ No newline at end of file

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 2/6] 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

From 3ceb3774e7a6a3e503753990ff2b9a107c036889 Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Wed, 15 Nov 2023 12:46:27 -0500
Subject: [PATCH 3/6] Temp fix the withdrawal staking group selector

---
 apps/web/src/composables/format.ts            |  27 +
 apps/web/src/composables/staking.ts           |  52 +-
 .../src/pages/overview/components/Staking.vue | 611 ++++++++++--------
 common/types/src/index.ts                     |   2 +
 common/types/src/interfaces/StakeDetails.ts   |   6 +
 5 files changed, 440 insertions(+), 258 deletions(-)
 create mode 100644 common/types/src/interfaces/StakeDetails.ts

diff --git a/apps/web/src/composables/format.ts b/apps/web/src/composables/format.ts
index ca5245744..e11626a85 100644
--- a/apps/web/src/composables/format.ts
+++ b/apps/web/src/composables/format.ts
@@ -46,6 +46,32 @@ export default function useFormat() {
         return formattedFloat + siSymbol
     }
 
+    function parseEthersCasimir(inputString: string): number {
+        const siSymbols: { [key: string]: number } = {
+            "K": 1e3,
+            "M": 1e6,
+            "B": 1e9
+        }
+    
+        // Extract the numeric part and the SI symbol
+        const matches = inputString.match(/([0-9.,]+)([KMB])?/)
+        if (!matches) {
+            throw new Error("Invalid input format")
+        }
+    
+        const [ , numericPart, siSymbol] = matches
+    
+        // Replace commas and convert to a float
+        let value = parseFloat(numericPart.replace(/,/g, ""))
+    
+        // Apply the multiplication factor if an SI symbol is present
+        if (siSymbol && siSymbols[siSymbol]) {
+            value *= siSymbols[siSymbol]
+        }
+    
+        return value
+    }
+
     function trimAndLowercaseAddress(address: string) {
         return address.trim().toLowerCase()
     }
@@ -54,6 +80,7 @@ export default function useFormat() {
         convertString, 
         formatDecimalString,
         formatEthersCasimir,
+        parseEthersCasimir,
         trimAndLowercaseAddress,
     }
 }
\ No newline at end of file
diff --git a/apps/web/src/composables/staking.ts b/apps/web/src/composables/staking.ts
index da52f212e..8fe7aa757 100644
--- a/apps/web/src/composables/staking.ts
+++ b/apps/web/src/composables/staking.ts
@@ -5,19 +5,23 @@ import useContracts from "@/composables/contracts"
 import useEthers from "@/composables/ethers"
 import useLedger from "@/composables/ledger"
 import useTrezor from "@/composables/trezor"
+import useUser from "@/composables/user"
 import useWallets from "@/composables/wallets"
 import useWalletConnectV2 from "./walletConnectV2"
 import { CasimirManager } from "@casimir/ethereum/build/@types"
+import { StakeDetails } from "@casimir/types"
 
 const { getBaseManager, getEigenManager, contractsAreInitialized } = useContracts()
 const { browserProvidersList, getEthersBrowserSigner } = useEthers()
 const { getEthersLedgerSigner } = useLedger()
 const { getEthersTrezorSigner } = useTrezor()
+const { user } = useUser()
 const { detectActiveNetwork, switchEthersNetwork } = useWallets()
 const { getWalletConnectSignerV2 } = useWalletConnectV2()
 
 const stakingComposableInitialized = ref(false)
 const awaitingStakeOrWithdrawConfirmation = ref(false)
+const userStakeDetails = ref<Array<StakeDetails>>([])
 
 let baseManager: CasimirManager
 let eigenManager: CasimirManager
@@ -31,11 +35,12 @@ export default function useStaking() {
     })
 
     async function initializeStakingComposable() {
-        baseManager = getBaseManager()
-        eigenManager = getEigenManager()
         if (stakingComposableInitialized.value) return
         try {
             stakingComposableInitialized.value = true
+            baseManager = getBaseManager()
+            eigenManager = getEigenManager()
+            await getUserStakeDetails()
         } catch (error) {
             console.log("Error initializing staking component :>> ", error)
         }
@@ -106,6 +111,48 @@ export default function useStaking() {
         }
     }
 
+    async function getUserStakeDetails() {
+        const result: Array<StakeDetails> = []
+        const addresses = user.value?.accounts.map((account) => account.address) as Array<string>
+    
+        async function getUserStakeAndWithdrawable(manager: CasimirManager, address: string) {
+            const userStake = await (manager as CasimirManager).getUserStake(address)
+            const userStakeNumber = parseFloat(ethers.utils.formatEther(userStake))
+            const availableToWithdraw = await (manager as CasimirManager).getWithdrawableBalance()
+            const availableToWithdrawNumber = parseFloat(ethers.utils.formatEther(availableToWithdraw))
+    
+            return { userStakeNumber, availableToWithdrawNumber }
+        }
+    
+        const promises = addresses.map(async (address) => {
+            const [baseManagerData, /* eigenManagerData */] = await Promise.all([
+                getUserStakeAndWithdrawable(baseManager, address),
+                // getUserStakeAndWithdrawable(eigenManager, address),
+            ])
+    
+            if (baseManagerData.userStakeNumber > 0) {
+                result.push({
+                    operatorType: "Default",
+                    address,
+                    amountStaked: baseManagerData.userStakeNumber,
+                    availableToWithdraw: baseManagerData.availableToWithdrawNumber,
+                })
+            }
+    
+            // if (eigenManagerData.userStakeNumber > 0) {
+            //     result.push({
+            //         operatorType: "Eigen",
+            //         address,
+            //         amountStaked: eigenManagerData.userStakeNumber,
+            //         availableToWithdraw: eigenManagerData.availableToWithdrawNumber,
+            //     })
+            // }
+        })
+    
+        await Promise.all(promises)
+        userStakeDetails.value = result
+    }
+    
     async function getWithdrawableBalance({ walletProvider, type }: { walletProvider: ProviderString, type: "default" | "eigen" }) {
         let signer
         if (browserProvidersList.includes(walletProvider)) {
@@ -164,6 +211,7 @@ export default function useStaking() {
     return {
         awaitingStakeOrWithdrawConfirmation: readonly(awaitingStakeOrWithdrawConfirmation),
         stakingComposableInitialized,
+        userStakeDetails,
         initializeStakingComposable,
         deposit,
         getDepositFees,
diff --git a/apps/web/src/pages/overview/components/Staking.vue b/apps/web/src/pages/overview/components/Staking.vue
index e1236d5e1..903ce8619 100644
--- a/apps/web/src/pages/overview/components/Staking.vue
+++ b/apps/web/src/pages/overview/components/Staking.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, onMounted, watch } from "vue"
-import { FormattedWalletOption, ProviderString } from "@casimir/types"
+import { computed, ref, onMounted, watch } from "vue"
+import { FormattedWalletOption, ProviderString, StakeDetails } from "@casimir/types"
 import VueFeather from "vue-feather"
 import useEnvironment from "@/composables/environment"
 import useStaking from "@/composables/staking"
@@ -8,12 +8,11 @@ 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 { convertString, formatEthersCasimir } = useFormat()
+const { stakingComposableInitialized, userStakeDetails, deposit, withdraw, getWithdrawableBalance } = useStaking()
+const { convertString, formatEthersCasimir, parseEthersCasimir } = useFormat()
 const { getCurrentPrice } = usePrice()
 const { user, updateUserAgreement } = useUser()
 
@@ -24,11 +23,30 @@ const stakeType = ref<"default" | "eigen">("default")
 const currentUserStake = ref(0)
 const estimatedFees = ref<number | string>("-")
 const estimatedAPY = ref<string>("4.00")
-const formattedAmountToStakeOrWithdraw = ref("")
+const formattedAmountToStakeOrWithdraw = ref(0)
 const formattedWalletOptions = ref<Array<FormattedWalletOption>>([])
 const selectedStakingProvider = ref<ProviderString>("")
 const selectedWalletAddress = ref(null as null | string)
-const selectedOperatorGroup = ref(null as null | "Default" | "Eigen")
+const selectedUserAddressOperatorGroup = ref("")
+const defaultUserStakeDetails = computed(() => userStakeDetails.value.filter((stakeDetail) => stakeDetail.operatorType === "Default"))
+// TODO: Re-enable this
+const eigenUserStakeDetails = computed(() => userStakeDetails.value.filter((stakeDetail) => stakeDetail.operatorType === "Eigen"))
+// Comment above and uncomment below to show Eigen Stake Withdrawal UI
+// const eigenUserStakeDetails = ref<Array<StakeDetails>>([
+//     {
+//         address: "0xd557a5745d4560B24D36A68b52351ffF9c86A212".toLocaleLowerCase(),
+//         amountStaked: 10,
+//         operatorType: "Eigen",
+//         availableToWithdraw: 4
+//     },
+//     {
+//         address: "0x728474D29c2F81eb17a669a7582A2C17f1042b57".toLocaleLowerCase(),
+//         amountStaked: 10,
+//         operatorType: "Eigen",
+//         availableToWithdraw: 4
+//     }
+// ])
+const selectedOperatorGroupStakeDetails = ref<StakeDetails>()
 
 // Wallet Select Refs
 const errorMessage = ref(null as null | string)
@@ -49,24 +67,31 @@ const eigenDisabled = ref(true) // Keeps eigen disabled until Casimir is ready t
 const isShining = ref(true) // Determines if the shine effect is active
 const eigenIsToggled = ref(false) // Determines the toggle state
 const toggleBackgroundColor = ref("#eee")  // Initial color
+const availableToWithdraw = computed(() => {
+    if (!selectedOperatorGroupStakeDetails.value) return 0
+    let result
+    if (selectedOperatorGroupStakeDetails.value.amountStaked < selectedOperatorGroupStakeDetails.value.availableToWithdraw) {
+        result = selectedOperatorGroupStakeDetails.value.amountStaked
+    } else {
+        result = selectedOperatorGroupStakeDetails.value.availableToWithdraw
+    }
+    return result
+})
+const withdrawalLimitExceeded = ref(false)
 
-const balances = ref<{ [key: string]: string | null }>({})
+const casimirFormattedBalances = ref<{ [key: string]: string | null }>({})
 
 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) => {
+    casimirFormattedBalances.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()
-})
-
 function toggleShineEffect() {
     eigenIsToggled.value = !eigenIsToggled.value
     isShining.value = eigenIsToggled.value
@@ -87,21 +112,7 @@ function toggleEstimatedAPY() {
     }
 }
 
-const handleInputOnAmountToStakeOrWithdraw = (event: any) => {
-    const value = event.target.value.replace(/[^\d.]/g, "")
-    const parts = value.split(".")
-    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-
-    // Limit to 18 decimal places
-    if (parts[1] && parts[1].length > 18) {
-        parts[1] = parts[1].slice(0, 18)
-    }
-
-    // Update the model value
-    formattedAmountToStakeOrWithdraw.value = parts.join(".")
-}
-
-const selectAmountInput = () => {
+function selectAmountInput() {
     const inputElement = document.getElementById("amount_input") as HTMLInputElement
 
     if (inputElement) {
@@ -132,71 +143,13 @@ function aggregateAddressesByProvider() {
         // empty out staking comp
         selectedStakingProvider.value = ""
         selectedWalletAddress.value = null
-        formattedAmountToStakeOrWithdraw.value = ""
+        formattedAmountToStakeOrWithdraw.value = 0
         addressBalance.value = null
         currentUserStake.value = 0
     }
 }
 
-watch(formattedAmountToStakeOrWithdraw, async () => {
-    if (formattedAmountToStakeOrWithdraw.value) {
-        const floatAmount = parseFloat(formattedAmountToStakeOrWithdraw.value?.replace(/,/g, ""))
-        let maxAmount
-        if (selectedWalletAddress.value) {
-            // maxAmount = await getEthersBalance(selectedWalletAddress.value)
-        } else {
-            maxAmount = 0
-        }
-
-        if (floatAmount > maxAmount) {
-            errorMessage.value = "Insufficient Funds"
-        } else {
-            errorMessage.value = null
-        }
-    } else {
-        errorMessage.value = null
-    }
-})
-
-watch(selectedWalletAddress, async () => {
-    if (!stakingComposableInitialized.value) return
-    if (selectedWalletAddress.value) {
-    // addressBalance.value = (Math.round(await getEthersBalance(selectedWalletAddress.value) * 100) / 100) + " ETH"
-        isShining.value = true
-    // currentUserStake.value = await getUserStake(selectedWalletAddress.value)
-    } else {
-        addressBalance.value = null
-    // currentUserStake.value = 0
-    }
-})
-
-watch(user, async () => {
-    if (user.value?.id) {
-        aggregateAddressesByProvider()
-        termsOfServiceCheckbox.value = user.value?.agreedToTermsOfService as boolean
-        selectedWalletAddress.value = user.value?.address as string
-        selectedStakingProvider.value = user.value?.walletProvider as ProviderString
-    } else {
-        selectedStakingProvider.value = ""
-        selectedWalletAddress.value = null
-        formattedAmountToStakeOrWithdraw.value = ""
-        addressBalance.value = null
-    }
-})
-
-onMounted(async () => {
-    aggregateAddressesByProvider()
-    currentEthPrice.value = Math.round((await getCurrentPrice({ coin: "ETH", currency: "USD" })) * 100) / 100
-    if (user.value?.id) {
-        // estimatedFees.value = await getDepositFees()
-        selectedStakingProvider.value = user.value?.walletProvider as ProviderString
-        selectedWalletAddress.value = user.value?.address as string
-        if (!stakingComposableInitialized.value) return
-        isShining.value = true
-    }
-})
-
-const handleOutsideClickForWalletInput = (event: any) => {
+function handleOutsideClickForWalletInput(event: any) {
     const selectWalletInputContainer = document.getElementById("selectWalletInputContainer")
     const selectWalletInputButton = document.getElementById("selectWalletInputButton")
 
@@ -205,7 +158,7 @@ const handleOutsideClickForWalletInput = (event: any) => {
     }
 }
 
-const handleOutsideClickForOperatorGroupInput = (event: any) => {
+function handleOutsideClickForOperatorGroupInput(event: any) {
     const selectOperatorGroupInputContainer = document.getElementById("selectOperatorGroupInputContainer")
     const selectOperatorGroupInputButton = document.getElementById("selectOperatorGroupInputButton")
 
@@ -214,7 +167,7 @@ const handleOutsideClickForOperatorGroupInput = (event: any) => {
     }
 }
 
-const handleOutsideClickForTermsOfService = (event: any) => {
+function handleOutsideClickForTermsOfService(event: any) {
     const termsOfServiceContainer = document.getElementById("termsOfServiceContainer")
     const termsOfServiceButton = document.getElementById("termsOfServiceButton")
 
@@ -224,31 +177,48 @@ const handleOutsideClickForTermsOfService = (event: any) => {
     }
 }
 
-watch(openSelectWalletInput, () => {
-    if (openSelectWalletInput.value) {
-        window.addEventListener("click", handleOutsideClickForWalletInput)
-    } else {
-        window.removeEventListener("click", handleOutsideClickForWalletInput)
+function handleToggleStakeOrWithdraw(option: "stake" | "withdraw") {
+    stakeOrWithdraw.value = option
+    formattedAmountToStakeOrWithdraw.value = 0
+    stakeButtonText.value = option === "stake" ? "Stake" : "Withdraw"
+}
+
+function handleSelectOperatorGroup(stakeDetail: StakeDetails) {
+    selectedOperatorGroupStakeDetails.value = stakeDetail
+    selectedUserAddressOperatorGroup.value = stakeDetail.address
+}
+
+function handleInputOnAmountToStakeOrWithdraw(event: any) {
+    let value = event.target.value.replace(/[^\d.]/g, "")
+
+    // Handling multiple decimal points by keeping only the first one
+    const firstDecimalIndex = value.indexOf(".")
+    if (firstDecimalIndex !== -1) {
+        value = value.slice(0, firstDecimalIndex + 1) + value.slice(firstDecimalIndex).replace(/\./g, "")
     }
-})
 
-watch(openSelectOperatorGroupInput, () => {
-    if (openSelectWalletInput.value) {
-        window.addEventListener("click", handleOutsideClickForOperatorGroupInput)
-    } else {
-        window.removeEventListener("click", handleOutsideClickForOperatorGroupInput)
+    const parts = value.split(".")
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+
+    // Limit to 18 decimal places
+    if (parts[1] && parts[1].length > 18) {
+        parts[1] = parts[1].slice(0, 18)
     }
-})
 
-watch(openTermsOfService, () => {
-    if (openTermsOfService.value) {
-        window.addEventListener("click", handleOutsideClickForTermsOfService)
+    const formattedValue = parts.join(".")
+    const numericValue = parseFloat(formattedValue.replace(/,/g, "")) // Convert back to float for comparison
+
+    if (stakeOrWithdraw.value === "withdraw" && numericValue > availableToWithdraw.value) {
+        withdrawalLimitExceeded.value = true
     } else {
-        window.removeEventListener("click", handleOutsideClickForTermsOfService)
+        withdrawalLimitExceeded.value = false
     }
-})
 
-const handleStake = async () => {
+    // Update the model value for display
+    formattedAmountToStakeOrWithdraw.value = formattedValue
+}
+
+async function handleStake() {
     stakeButtonText.value = "Staking..."
 
     // const activeAddress = await detectActiveWalletAddress(selectedStakingProvider.value)
@@ -258,7 +228,7 @@ const handleStake = async () => {
     // }
     eigenIsToggled.value = false
     const result = await deposit({
-        amount: formattedAmountToStakeOrWithdraw.value,
+        amount: formattedAmountToStakeOrWithdraw.value.toString(),
         walletProvider: selectedStakingProvider.value,
         type: stakeType.value
     })
@@ -268,16 +238,16 @@ const handleStake = async () => {
 
     setTimeout(() => {
         stakeButtonText.value = "Stake"
-        formattedAmountToStakeOrWithdraw.value = ""
+        formattedAmountToStakeOrWithdraw.value = 0
     }, 1000)
 
     if (result) alert("Your Stake Has Been Deposited!")
     else alert("Your Stake Action Has Failed, Please Try Again Later!")
 }
 
-const handleWithdraw = async () => {
+async function handleWithdraw() {
     stakeButtonText.value = "Withdrawing..."
-    selectedOperatorGroup.value = null
+    selectedOperatorGroupStakeDetails.value = undefined
     // const activeAddress = await detectActiveWalletAddress(selectedStakingProvider.value)
     // if (activeAddress !== selectedWalletAddress.value) {
     //   formattedAmountToStakeOrWithdraw.value = ''
@@ -289,15 +259,15 @@ const handleWithdraw = async () => {
         type: stakeType.value
     })
 
-    if (parseFloat(withdrawableBalance) < parseFloat(formattedAmountToStakeOrWithdraw.value)) {
+    if (parseFloat(withdrawableBalance) < formattedAmountToStakeOrWithdraw.value) {
         stakeButtonText.value = "Withdraw"
-        formattedAmountToStakeOrWithdraw.value = ""
+        formattedAmountToStakeOrWithdraw.value = 0
         return alert(`You can currently withdraw up to ${withdrawableBalance} ETH. Please try again with a smaller amount.`)
     }
 
     eigenIsToggled.value = false
     const confirmation = await withdraw({
-        amount: formattedAmountToStakeOrWithdraw.value,
+        amount: formattedAmountToStakeOrWithdraw.value.toString(),
         walletProvider: selectedStakingProvider.value,
         type: stakeType.value
     })
@@ -307,18 +277,92 @@ const handleWithdraw = async () => {
 
     setTimeout(() => {
         stakeButtonText.value = "Withdraw"
-        formattedAmountToStakeOrWithdraw.value = ""
+        formattedAmountToStakeOrWithdraw.value = 0
     }, 1000)
 
     if (confirmation) alert("Your Stake Has Been Withdrawn!")
     else alert("Your Stake Action Has Failed, Please Try Again Later!")
 }
 
-function setStakeOrWithdraw(option: "stake" | "withdraw") {
-    stakeOrWithdraw.value = option
-    formattedAmountToStakeOrWithdraw.value = ""
-    stakeButtonText.value = option === "stake" ? "Stake" : "Withdraw"
-}
+watch(formattedWalletOptions, async () => {
+    await fetchBalances()
+})
+
+watch(openSelectWalletInput, () => {
+    if (openSelectWalletInput.value) {
+        window.addEventListener("click", handleOutsideClickForWalletInput)
+    } else {
+        window.removeEventListener("click", handleOutsideClickForWalletInput)
+    }
+})
+
+watch(openSelectOperatorGroupInput, () => {
+    if (openSelectWalletInput.value) {
+        window.addEventListener("click", handleOutsideClickForOperatorGroupInput)
+    } else {
+        window.removeEventListener("click", handleOutsideClickForOperatorGroupInput)
+    }
+})
+
+watch(openTermsOfService, () => {
+    if (openTermsOfService.value) {
+        window.addEventListener("click", handleOutsideClickForTermsOfService)
+    } else {
+        window.removeEventListener("click", handleOutsideClickForTermsOfService)
+    }
+})
+
+watch(formattedAmountToStakeOrWithdraw, async () => {
+    if (formattedAmountToStakeOrWithdraw.value === 0) errorMessage.value = null
+    const floatAmount = parseFloat(formattedAmountToStakeOrWithdraw.value.toString().replace(/,/g, ""))
+
+    const selectedAddressBalance = parseEthersCasimir(casimirFormattedBalances.value[selectedWalletAddress.value as string] as string)
+    const maxAmount = selectedWalletAddress.value ? selectedAddressBalance : 0
+
+    if (floatAmount > maxAmount) {
+        errorMessage.value = "Insufficient Funds"
+    } else {
+        errorMessage.value = null
+    }
+})
+
+watch(selectedWalletAddress, async () => {
+    if (!stakingComposableInitialized.value) return
+    if (selectedWalletAddress.value) {
+    // addressBalance.value = (Math.round(await getEthersBalance(selectedWalletAddress.value) * 100) / 100) + " ETH"
+        isShining.value = true
+    // currentUserStake.value = await getUserStake(selectedWalletAddress.value)
+    } else {
+        addressBalance.value = null
+    // currentUserStake.value = 0
+    }
+})
+
+watch(user, async () => {
+    if (user.value?.id) {
+        aggregateAddressesByProvider()
+        termsOfServiceCheckbox.value = user.value?.agreedToTermsOfService as boolean
+        selectedWalletAddress.value = user.value?.address as string
+        selectedStakingProvider.value = user.value?.walletProvider as ProviderString
+    } else {
+        selectedStakingProvider.value = ""
+        selectedWalletAddress.value = null
+        formattedAmountToStakeOrWithdraw.value = 0
+        addressBalance.value = null
+    }
+})
+
+onMounted(async () => {
+    aggregateAddressesByProvider()
+    currentEthPrice.value = Math.round((await getCurrentPrice({ coin: "ETH", currency: "USD" })) * 100) / 100
+    if (user.value?.id) {
+        // estimatedFees.value = await getDepositFees()
+        selectedStakingProvider.value = user.value?.walletProvider as ProviderString
+        selectedWalletAddress.value = user.value?.address as string
+        if (!stakingComposableInitialized.value) return
+        isShining.value = true
+    }
+})
 </script>
 
 <template>
@@ -328,14 +372,14 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
       <div
         class="action-button stake"
         :class="{ active: stakeOrWithdraw === 'stake' }"
-        @click="setStakeOrWithdraw('stake')"
+        @click="handleToggleStakeOrWithdraw('stake')"
       >
         Stake
       </div>
       <div
         class="action-button withdraw"
         :class="{ active: stakeOrWithdraw === 'withdraw' }"
-        @click="setStakeOrWithdraw('withdraw')"
+        @click="handleToggleStakeOrWithdraw('withdraw')"
       >
         Withdraw
       </div>
@@ -348,72 +392,124 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
     <div class="text-[12px] mb-[13px] text-blue-400" />
 
     <!-- Select Wallet Address -->
-    <h6 class="card_title my-[11px]">
-      Wallet
-    </h6>
-    <div class="card_input text-black mb-[22px] relative">
-      <button
-        id="selectWalletInputButton"
-        class="flex items-center justify-between gap-[8px] w-full h-full px-[10px] py-[14px]"
-        :class="selectedWalletAddress ? 'text-black' : 'text-grey_4'"
-        @click="openSelectWalletInput = !openSelectWalletInput"
-      >
-        <div class="flex justify-between w-full">
-          <div>{{ selectedWalletAddress ? convertString(selectedWalletAddress) : 'Select wallet' }}</div>
-          <div class="flex gap-10 font-[400]">
-            {{ addressBalance ? addressBalance : '' }}
-            <vue-feather
-              :type="openSelectWalletInput ? 'chevron-up' : 'chevron-down'"
-              size="36"
-              class="icon w-[20px]"
-            />
-          </div>
-        </div>
-      </button>
-      <div
-        v-show="openSelectWalletInput"
-        id="selectWalletInputContainer"
-        class="absolute top-[110%] w-full bg-white rounded-[8px] border border-[#D0D5DD] px-[10px] py-[14px] max-h-[250px] overflow-auto"
-      >
-        <div
-          v-if="formattedWalletOptions.length === 0"
-          class="flex justify-center items-center text-grey_4 py-[10px]"
+    <span v-if="stakeOrWithdraw === 'stake'">
+      <h6 class="card_title my-[11px]">
+        Wallet
+      </h6>
+      <div class="card_input text-black mb-[22px] relative">
+        <button
+          id="selectWalletInputButton"
+          class="flex items-center justify-between gap-[8px] w-full h-full px-[10px] py-[14px]"
+          :class="selectedWalletAddress ? 'text-black' : 'text-grey_4'"
+          @click="openSelectWalletInput = !openSelectWalletInput"
         >
-          No wallets connected
-        </div>
+          <div class="flex justify-between w-full">
+            <div>{{ selectedWalletAddress ? convertString(selectedWalletAddress) : 'Select wallet' }}</div>
+            <div class="flex gap-10 font-[400]">
+              {{ addressBalance ? addressBalance : '' }}
+              <vue-feather
+                :type="openSelectWalletInput ? 'chevron-up' : 'chevron-down'"
+                size="36"
+                class="icon w-[20px]"
+              />
+            </div>
+          </div>
+        </button>
         <div
-          v-for="item in formattedWalletOptions"
-          id="selectWalletOptionsCard"
-          :key="item.provider"
-          class="mt-[5px] mb-[10px]"
+          v-show="openSelectWalletInput"
+          id="selectWalletInputContainer"
+          class="absolute top-[110%] w-full bg-white rounded-[8px] border border-[#D0D5DD] px-[10px] py-[14px] max-h-[250px] overflow-auto"
         >
-          <div class="w-full text-[12px] text-grey_6 flex items-center gap-[8px] mb-[10px]">
-            <img
-              :src="`${item.provider.toLocaleLowerCase()}.svg`"
-              :alt="`${item.provider.toLocaleLowerCase()} Icon`"
-              class="w-[16px] h-[16px]"
-            >
-            {{ item.provider }}
+          <div
+            v-if="formattedWalletOptions.length === 0"
+            class="flex justify-center items-center text-grey_4 py-[10px]"
+          >
+            No wallets connected
           </div>
+          <div
+            v-for="item in formattedWalletOptions"
+            id="selectWalletOptionsCard"
+            :key="item.provider"
+            class="mt-[5px] mb-[10px]"
+          >
+            <div class="w-full text-[12px] text-grey_6 flex items-center gap-[8px] mb-[10px]">
+              <img
+                :src="`${item.provider.toLocaleLowerCase()}.svg`"
+                :alt="`${item.provider.toLocaleLowerCase()} Icon`"
+                class="w-[16px] h-[16px]"
+              >
+              {{ item.provider }}
+            </div>
 
-          <button
-            v-for="address in item.addresses"
-            :key="address"
-            class="w-full text-left rounded-[8px] py-[10px] px-[14px]
+            <button
+              v-for="address in item.addresses"
+              :key="address"
+              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="selectedWalletAddress = address, openSelectWalletInput = false, selectedStakingProvider = item.provider"
-          >
-            <span>{{ convertString(address) }}</span>
-            <span>{{ balances[address] !== null ? `~${balances[address]} ETH` : 'Loading...' }}</span>
+              @click="selectedWalletAddress = address, openSelectWalletInput = false, selectedStakingProvider = item.provider"
+            >
+              <span>{{ convertString(address) }}</span>
+              <span>{{ casimirFormattedBalances[address] !== null ? `~${casimirFormattedBalances[address]} ETH` : 'Loading...' }}</span>
             <!-- <vue-feather
               type="chevron-right"
               size="36"
               class="icon w-[20px]"
             /> -->
-          </button>
+            </button>
+          </div>
         </div>
       </div>
-    </div>
+    </span>
+
+    <!-- Select Staked Operator Group -->
+    <span v-else>
+      <ul class="max-h-[260px] overflow-scroll">
+        <span v-if="defaultUserStakeDetails.length">
+          <h6 class="card_title">Default Stakes</h6>
+          <li 
+            v-for="(stakeDetail, index) in defaultUserStakeDetails"
+            :key="index"
+            :class="[
+              'operator_group_li', 
+              { 'selected_operator_group_li': 
+                selectedOperatorGroupStakeDetails ? selectedOperatorGroupStakeDetails.operatorType === stakeDetail.operatorType && selectedUserAddressOperatorGroup === stakeDetail.address : false
+              }
+            ]"
+            @click="handleSelectOperatorGroup(stakeDetail)"
+          >
+            <div class="p-2 flex">
+              <img
+                :src="`${user?.accounts.filter(account => account.address === stakeDetail.address)[0].walletProvider.toLocaleLowerCase()}.svg`"
+                class="w-[16px] h-[16px] inline-block mr-[8px]"
+              > {{ convertString(stakeDetail.address) }}</div>
+            <div class="p-2">Staked: {{ formatEthersCasimir(stakeDetail.amountStaked, 6) }} ETH</div>
+          </li>
+        </span>
+
+        <span v-if="eigenUserStakeDetails.length">
+          <h6 class="card_title py-8">Eigen Stakes</h6>
+          <li 
+            v-for="(stakeDetail, index) in eigenUserStakeDetails"
+            :key="index"
+            :class="[
+              'operator_group_li', 
+              { 'selected_operator_group_li': 
+                selectedOperatorGroupStakeDetails ? selectedOperatorGroupStakeDetails.operatorType === stakeDetail.operatorType && selectedUserAddressOperatorGroup === stakeDetail.address : false
+              }
+            ]"
+            @click="handleSelectOperatorGroup(stakeDetail)"
+          >
+            <div class="p-2">
+              <img
+                :src="`${user?.accounts.filter(account => account.address === stakeDetail.address)[0].walletProvider.toLocaleLowerCase()}.svg`"
+                class="w-[16px] h-[16px] inline-block mr-[8px]"
+              > 
+              {{ convertString(stakeDetail.address) }}</div>
+            <div class="p-2">Amount Staked: {{ formatEthersCasimir(stakeDetail.amountStaked, 6) }} ETH</div>
+          </li>
+        </span>
+      </ul>
+    </span>
 
     <!-- Amount to Stake/Withdraw -->
     <div class="flex justify-between items-center gap-[8px] mb-[11px] mt-[22px]">
@@ -426,7 +522,9 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
       </span>
     </div>
 
+    <!-- Stake Amount -->
     <button
+      v-if="stakeOrWithdraw === 'stake'"
       class="card_input text-black px-[10px] py-[14px] cursor-text"
       @click="selectAmountInput"
     >
@@ -447,6 +545,37 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
         </h6>
       </div>
     </button>
+    
+    <!-- Withdraw Amount -->
+    <button
+      v-if="stakeOrWithdraw === 'withdraw'"
+      class="card_input text-black px-[10px] py-[14px] cursor-text"
+      @click="selectAmountInput"
+    >
+      <div class="flex items-center gap-[8px]">
+        <input
+          id="amount_input"
+          v-model="formattedAmountToStakeOrWithdraw"
+          type="text"
+          pattern="^\d{1,3}(,\d{3})*(\.\d{1,18})?$"
+          placeholder="0.00"
+          class="outline-none"
+          :disabled="!selectedOperatorGroupStakeDetails"
+          @input="handleInputOnAmountToStakeOrWithdraw"
+        >
+      </div>
+      <div class="flex items-center gap-[4px]">
+        <h6 style="font-weight: 400;">
+          ETH
+          <button
+            class="text-[12px] text-blue-500 ml-6 underline"
+            @click="formattedAmountToStakeOrWithdraw = availableToWithdraw"
+          >
+            max
+          </button>
+        </h6>
+      </div>
+    </button>
 
     <!-- Fees, Exchange Rate, Estimated APY (for stake only)-->
     <div v-if="stakeOrWithdraw === 'stake'">
@@ -483,79 +612,6 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
       </div>
     </div>
 
-    <!-- Operator Group Selector (for withdraw only) -->
-    <div
-      v-else
-      class="my-[22px]"
-    >
-      <h6 class="card_title my-[11px]">
-        Operator Group
-      </h6>
-      <div class="card_input text-black mb-[22px] relative">
-        <button
-          id="selectOperatorGroupInputButton"
-          class="flex items-center justify-between gap-[8px] w-full h-full px-[10px] py-[14px]"
-          :class="selectedOperatorGroup ? 'text-black' : 'text-grey_4'"
-          @click="openSelectOperatorGroupInput = !openSelectOperatorGroupInput"
-        >
-          <div class="flex justify-between w-full">
-            <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 -->
-              <vue-feather
-                :type="openSelectOperatorGroupInput ? 'chevron-up' : 'chevron-down'"
-                size="36"
-                class="icon w-[20px]"
-              />
-            </div>
-          </div>
-        </button>
-        <div
-          v-show="openSelectOperatorGroupInput"
-          id="selectOperatorGroupInputContainer"
-          class="absolute top-[110%] w-full bg-white rounded-[8px] border border-[#D0D5DD] px-[10px] py-[8px] max-h-[250px] overflow-auto"
-        >
-          <!-- TODO: Update this to only show if user has staked -->
-          <!-- <div
-            class="flex justify-center items-center text-grey_4 py-[10px]"
-          >
-            Nothing to withdraw
-          </div> -->
-          <!-- TODO: Update this to iterate over the contracts user has staked to -->
-          <div
-            id="selectOperatorGroupOptionsCard"
-            class="mt-[5px] mb-[10px]"
-          >
-            <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'"
-            >
-              Default
-              <vue-feather
-                type="chevron-right"
-                size="36"
-                class="icon w-[20px]"
-              />
-            </button>
-            <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'"
-            >
-              Eigen
-              <vue-feather
-                type="chevron-right"
-                size="36"
-                class="icon w-[20px]"
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
     <!-- Terms of Service -->
     <div
       v-if="stakeOrWithdraw === 'stake'"
@@ -607,14 +663,33 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
       </div>
     </button>
 
+    <!-- Available to Withdraw Note -->
+    <div v-if="stakeOrWithdraw === 'withdraw' && selectedOperatorGroupStakeDetails">
+      <div
+        :class="[
+          'card_message p-2 text-blue-500',
+          { 'card_message_error': withdrawalLimitExceeded }
+        ]"
+      >
+        Available to Withdraw: {{ formatEthersCasimir(availableToWithdraw, 6) }} ETH
+      </div>
+      <!-- <div
+        v-if="withdrawalLimitExceeded"
+        class="card_message card_message_error"
+      >
+        Note: We are currently working on full withdrawals. Please try again with an amount.
+      </div> -->
+    </div>
+
     <!-- Submit Button -->
     <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
+        || formattedAmountToStakeOrWithdraw <= 0
         || (stakeOrWithdraw === 'stake' && !termsOfServiceCheckbox)
+        || (stakeOrWithdraw === 'withdraw' && withdrawalLimitExceeded)
       "
       @click="stakeOrWithdraw === 'stake' ? handleStake() : handleWithdraw()"
     >
@@ -749,7 +824,11 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
   font-size: 12px;
   line-height: 20px;
   letter-spacing: -0.01em;
-  color: #667085;
+  /* color: #667085; */
+}
+
+.card_message_error {
+  color: #FF0000;
 }
 
 .submit-button {
@@ -768,7 +847,7 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
   height: 44px;
 }
 
-:disabled {
+button:disabled {
   background: rgba(15, 106, 242, 0.31);
 }
 
@@ -982,12 +1061,32 @@ function setStakeOrWithdraw(option: "stake" | "withdraw") {
 
 .action-button:hover {
   background-color: #ddd;
+  color: rgb(13, 95, 255);
 }
 
 .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 */
+  color: rgb(13, 95, 255);
+  border: solid 1px rgb(13, 95, 255);
+  background-color: #e8e7e7;
+}
+
+.operator_group_li {
+  border: 1px solid #E5E5E5;
+  border-radius: 8px;
+  color: #6B7280;
+  font-size: 12px;
+  padding: 6px;
+  margin: 6px 0;
+  cursor: pointer;
+}
+
+.operator_group_li:hover {
+  background-color: #e8e7e7;
+}
+
+.selected_operator_group_li {
+  /* Border should become blue */
+  border: 1px solid rgb(13, 95, 255);
+  background-color: #e8e7e7;
 }
 </style>@/composables/user@/composables/staking
\ No newline at end of file
diff --git a/common/types/src/index.ts b/common/types/src/index.ts
index 87e4568fd..cca491fd9 100644
--- a/common/types/src/index.ts
+++ b/common/types/src/index.ts
@@ -30,6 +30,7 @@ import { PoolStatus } from "./interfaces/PoolStatus"
 import { ProviderString } from "./interfaces/ProviderString"
 import { SignInWithEthereumCredentials } from "./interfaces/SignInWithEthereumCredentials"
 import { SSVOperator } from "./interfaces/SSVOperator"
+import { StakeDetails } from "./interfaces/StakeDetails"
 import { TransactionRequest } from "./interfaces/TransactionRequest"
 import { RegisteredOperator } from "./interfaces/RegisteredOperator"
 import { RegisterOperatorWithCasimirParams } from "./interfaces/RegisterOperatorWithCasimirParams"
@@ -74,6 +75,7 @@ export type {
     ProviderString,
     SignInWithEthereumCredentials,
     SSVOperator,
+    StakeDetails,
     TransactionRequest,
     RegisteredOperator,
     RegisterOperatorWithCasimirParams,
diff --git a/common/types/src/interfaces/StakeDetails.ts b/common/types/src/interfaces/StakeDetails.ts
new file mode 100644
index 000000000..9140bfb35
--- /dev/null
+++ b/common/types/src/interfaces/StakeDetails.ts
@@ -0,0 +1,6 @@
+export interface StakeDetails {
+    operatorType: "Default" | "Eigen",
+    address: string,
+    amountStaked: number,
+    availableToWithdraw: number
+}
\ No newline at end of file

From aa12d4e2dbdf309fac3d45dfbee8dc7931f29141 Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Thu, 16 Nov 2023 07:22:03 -0500
Subject: [PATCH 4/6] Add formatEthersCasimirStaking

---
 apps/web/src/composables/format.ts            |  16 ++-
 .../src/pages/overview/components/Staking.vue | 103 ++++++++----------
 2 files changed, 59 insertions(+), 60 deletions(-)

diff --git a/apps/web/src/composables/format.ts b/apps/web/src/composables/format.ts
index e11626a85..8eaa116f3 100644
--- a/apps/web/src/composables/format.ts
+++ b/apps/web/src/composables/format.ts
@@ -27,6 +27,7 @@ export default function useFormat() {
                 Math.abs(inputFloat) >= mag ? [symbol, mag] : [selectedSymbol, selectedMagnitude], ["", 1])
     
         let numDecimals: number
+
         if (customDecimals !== undefined) {
             numDecimals = customDecimals
         } else if (Math.abs(inputFloat) < 1) {
@@ -42,8 +43,18 @@ export default function useFormat() {
         if (numDecimals > 0) {
             formattedFloat = formattedFloat.replace(/\.?0+$/, "")
         }
-        
-        return formattedFloat + siSymbol
+        return siSymbol.length > 0 ? formattedFloat + siSymbol : formattedFloat
+    }
+
+    function formatEthersCasimirStaking(inputFloat: number) {
+        // Ensure the number has 18 decimal places
+        const formattedNumber = inputFloat.toFixed(18)
+        // Split the number into integer and decimal parts
+        const parts = formattedNumber.split(".")
+        // Add commas to the integer part
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+        // Rejoin the integer and decimal parts
+        return parts.join(".")
     }
 
     function parseEthersCasimir(inputString: string): number {
@@ -80,6 +91,7 @@ export default function useFormat() {
         convertString, 
         formatDecimalString,
         formatEthersCasimir,
+        formatEthersCasimirStaking,
         parseEthersCasimir,
         trimAndLowercaseAddress,
     }
diff --git a/apps/web/src/pages/overview/components/Staking.vue b/apps/web/src/pages/overview/components/Staking.vue
index 903ce8619..6e44e18bb 100644
--- a/apps/web/src/pages/overview/components/Staking.vue
+++ b/apps/web/src/pages/overview/components/Staking.vue
@@ -12,7 +12,7 @@ import TermsOfService from "@/components/TermsOfService.vue"
 
 const { batchProvider } = useEnvironment()
 const { stakingComposableInitialized, userStakeDetails, deposit, withdraw, getWithdrawableBalance } = useStaking()
-const { convertString, formatEthersCasimir, parseEthersCasimir } = useFormat()
+const { convertString, formatEthersCasimir, formatEthersCasimirStaking, parseEthersCasimir } = useFormat()
 const { getCurrentPrice } = usePrice()
 const { user, updateUserAgreement } = useUser()
 
@@ -28,20 +28,20 @@ const formattedWalletOptions = ref<Array<FormattedWalletOption>>([])
 const selectedStakingProvider = ref<ProviderString>("")
 const selectedWalletAddress = ref(null as null | string)
 const selectedUserAddressOperatorGroup = ref("")
-const defaultUserStakeDetails = computed(() => userStakeDetails.value.filter((stakeDetail) => stakeDetail.operatorType === "Default"))
+const defaultUserStakeDetails = computed(() => userStakeDetails.value.filter((stakeDetail: StakeDetails) => stakeDetail.operatorType === "Default"))
 // TODO: Re-enable this
 const eigenUserStakeDetails = computed(() => userStakeDetails.value.filter((stakeDetail) => stakeDetail.operatorType === "Eigen"))
 // Comment above and uncomment below to show Eigen Stake Withdrawal UI
 // const eigenUserStakeDetails = ref<Array<StakeDetails>>([
 //     {
 //         address: "0xd557a5745d4560B24D36A68b52351ffF9c86A212".toLocaleLowerCase(),
-//         amountStaked: 10,
+//         amountStaked: 10.00,
 //         operatorType: "Eigen",
 //         availableToWithdraw: 4
 //     },
 //     {
 //         address: "0x728474D29c2F81eb17a669a7582A2C17f1042b57".toLocaleLowerCase(),
-//         amountStaked: 10,
+//         amountStaked: 10.00,
 //         operatorType: "Eigen",
 //         availableToWithdraw: 4
 //     }
@@ -319,7 +319,7 @@ watch(formattedAmountToStakeOrWithdraw, async () => {
     const selectedAddressBalance = parseEthersCasimir(casimirFormattedBalances.value[selectedWalletAddress.value as string] as string)
     const maxAmount = selectedWalletAddress.value ? selectedAddressBalance : 0
 
-    if (floatAmount > maxAmount) {
+    if (stakeOrWithdraw.value === "stake" && floatAmount > maxAmount) {
         errorMessage.value = "Insufficient Funds"
     } else {
         errorMessage.value = null
@@ -482,7 +482,7 @@ onMounted(async () => {
                 :src="`${user?.accounts.filter(account => account.address === stakeDetail.address)[0].walletProvider.toLocaleLowerCase()}.svg`"
                 class="w-[16px] h-[16px] inline-block mr-[8px]"
               > {{ convertString(stakeDetail.address) }}</div>
-            <div class="p-2">Staked: {{ formatEthersCasimir(stakeDetail.amountStaked, 6) }} ETH</div>
+            <div class="p-2">{{ formatEthersCasimirStaking(stakeDetail.amountStaked) }} ETH</div>
           </li>
         </span>
 
@@ -505,14 +505,14 @@ onMounted(async () => {
                 class="w-[16px] h-[16px] inline-block mr-[8px]"
               > 
               {{ convertString(stakeDetail.address) }}</div>
-            <div class="p-2">Amount Staked: {{ formatEthersCasimir(stakeDetail.amountStaked, 6) }} ETH</div>
+            <div class="p-2">{{ formatEthersCasimirStaking(stakeDetail.amountStaked) }} ETH</div>
           </li>
         </span>
       </ul>
     </span>
 
     <!-- Amount to Stake/Withdraw -->
-    <div class="flex justify-between items-center gap-[8px] mb-[11px] mt-[22px]">
+    <div class="flex justify-between items-center gap-[8px] mb-[11px] mt-[8px]">
       <h6 class="card_title">
         Amount
       </h6>
@@ -568,10 +568,10 @@ onMounted(async () => {
         <h6 style="font-weight: 400;">
           ETH
           <button
-            class="text-[12px] text-blue-500 ml-6 underline"
+            class="text-[12px] text-blue-500 ml-6"
             @click="formattedAmountToStakeOrWithdraw = availableToWithdraw"
           >
-            max
+            Max
           </button>
         </h6>
       </div>
@@ -664,21 +664,25 @@ onMounted(async () => {
     </button>
 
     <!-- Available to Withdraw Note -->
-    <div v-if="stakeOrWithdraw === 'withdraw' && selectedOperatorGroupStakeDetails">
-      <div
-        :class="[
-          'card_message p-2 text-blue-500',
-          { 'card_message_error': withdrawalLimitExceeded }
-        ]"
-      >
-        Available to Withdraw: {{ formatEthersCasimir(availableToWithdraw, 6) }} ETH
+    <div
+      v-if="stakeOrWithdraw === 'withdraw' && selectedOperatorGroupStakeDetails"
+    >
+      <div class="max_withdraw_note_container">
+        <div class="tooltip_container">
+          Withdrawals are currently limited to available balance that is not actively staked on Beacon Chain.
+          <br>
+          We will adding capability to make full withdrawals soon.
+          <div class="tooltip_triangle" />
+        </div>
+        <div
+          :class="[
+            'card_message p-2 text-blue-500 cursor-default',
+            { 'card_message_error': withdrawalLimitExceeded }
+          ]"
+        >
+          Your current withdrawable amount is: {{ formatEthersCasimirStaking(availableToWithdraw) }} ETH
+        </div>
       </div>
-      <!-- <div
-        v-if="withdrawalLimitExceeded"
-        class="card_message card_message_error"
-      >
-        Note: We are currently working on full withdrawals. Please try again with an amount.
-      </div> -->
     </div>
 
     <!-- Submit Button -->
@@ -917,31 +921,6 @@ button:disabled {
   /* 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% {
-      left: -150%;
-    }
-    50% {
-      left: 150%;
-    }
-    100% {
-      left: 150%;
-    }
-  } */
-
 .toggle_button {
   position: absolute;
   top: 50%;
@@ -1003,18 +982,13 @@ button:disabled {
   /* smooth fade in */
   white-space: nowrap;
   /* prevents the text from wrapping */
-  font-size: 12px;
+  font-size: 14px;
   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 */
-}
-
 .tooltip_triangle {
   position: absolute;
   bottom: -5px;
@@ -1031,6 +1005,19 @@ button:disabled {
   /* same color as the tooltip background */
 }
 
+.eigen-toggle-container:hover .tooltip_container {
+  opacity: 1;
+  /* show on hover */
+}
+
+.max_withdraw_note_container {
+  position: relative;
+}
+.max_withdraw_note_container:hover .tooltip_container {
+  opacity: 1;
+  /* show on hover */
+}
+
 .stake-withdraw-selector {
   display: flex;
   justify-content: center;
@@ -1067,7 +1054,7 @@ button:disabled {
 .action-button.active {
   color: rgb(13, 95, 255);
   border: solid 1px rgb(13, 95, 255);
-  background-color: #e8e7e7;
+  background-color: #F3F3F3;
 }
 
 .operator_group_li {
@@ -1081,12 +1068,12 @@ button:disabled {
 }
 
 .operator_group_li:hover {
-  background-color: #e8e7e7;
+  background-color: #F3F3F3;
 }
 
 .selected_operator_group_li {
   /* Border should become blue */
   border: 1px solid rgb(13, 95, 255);
-  background-color: #e8e7e7;
+  background-color: #F3F3F3;
 }
 </style>@/composables/user@/composables/staking
\ No newline at end of file

From 2aa914bb5d6117a1543b5e5b972496116d9ffc8d Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Thu, 16 Nov 2023 07:25:08 -0500
Subject: [PATCH 5/6] Find and replace web socket names

---
 apps/web/src/composables/breakdownMetrics.ts | 8 ++++----
 apps/web/src/composables/contracts.ts        | 4 ++--
 apps/web/src/composables/environment.ts      | 6 +++---
 apps/web/src/composables/format.ts           | 3 +++
 apps/web/src/composables/operators.ts        | 4 ++--
 common/env/src/index.ts                      | 4 ++--
 scripts/cdk/deploy.ts                        | 6 +++---
 scripts/root/dev.ts                          | 6 +++---
 8 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/composables/breakdownMetrics.ts b/apps/web/src/composables/breakdownMetrics.ts
index 96e7b8dd3..93b91ccdb 100644
--- a/apps/web/src/composables/breakdownMetrics.ts
+++ b/apps/web/src/composables/breakdownMetrics.ts
@@ -10,7 +10,7 @@ import useUser from "@/composables/user"
 import { CasimirManager } from "@casimir/ethereum/build/@types"
 
 const { getBaseManager, getEigenManager, contractsAreInitialized } = useContracts()
-const { batchProvider, provider, webSocketProvider } = useEnvironment()
+const { batchProvider, provider, wsProvider } = useEnvironment()
 const { formatEthersCasimir } = useFormat()
 const { getCurrentPrice } = usePrice()
 const { awaitingStakeOrWithdrawConfirmation } = useStaking()
@@ -34,7 +34,7 @@ export default function useBreakdownMetrics() {
         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 availableProvider = wsProvider || provider
         const block = await availableProvider.getBlockWithTransactions(blockNumber)
         
         const txs = block.transactions.map(async (tx: any) => {
@@ -77,7 +77,7 @@ export default function useBreakdownMetrics() {
 
         try {
             loadingInitializeBreakdownMetrics.value = true
-            const availableProvider = webSocketProvider || provider
+            const availableProvider = wsProvider || provider
             availableProvider.removeAllListeners("block")
             availableProvider.on("block", blockListener as ethers.providers.Listener)
             listenForRebalancedEvents()
@@ -92,7 +92,7 @@ export default function useBreakdownMetrics() {
     }
 
     async function uninitializeBreakdownMetricsComposable() {
-        const availableProvider = webSocketProvider || provider
+        const availableProvider = wsProvider || provider
         availableProvider.removeAllListeners("block")
         stopListeningForContractEvents()
         breakdownMetricsComposableInitialized.value = false
diff --git a/apps/web/src/composables/contracts.ts b/apps/web/src/composables/contracts.ts
index 826dc68c2..2d94bc854 100644
--- a/apps/web/src/composables/contracts.ts
+++ b/apps/web/src/composables/contracts.ts
@@ -6,7 +6,7 @@ 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 { webSocketProvider, provider, factory } = useEnvironment()
+const { wsProvider, provider, factory } = useEnvironment()
 const contractsAreInitialized = ref(false)
 
 let baseManager: CasimirManager
@@ -28,7 +28,7 @@ export default function useContracts() {
             return await factory.getManagerConfig(id)
         }))
 
-        const availableProvider = webSocketProvider || provider
+        const availableProvider = wsProvider || provider
 
         baseManager = new ethers.Contract(baseManagerConfig.managerAddress, ICasimirManagerAbi, availableProvider) as CasimirManager
         baseRegistry = new ethers.Contract(baseManagerConfig.registryAddress, ICasimirRegistryAbi, availableProvider) as CasimirRegistry
diff --git a/apps/web/src/composables/environment.ts b/apps/web/src/composables/environment.ts
index 32c02e403..854abc701 100644
--- a/apps/web/src/composables/environment.ts
+++ b/apps/web/src/composables/environment.ts
@@ -8,10 +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 ethereumWsUrl = import.meta.env.PUBLIC_ETHEREUM_WS_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
+const wsProvider: ethers.providers.wsProvider | null = ethereumWsUrl !== "undefined" ? new ethers.providers.wsProvider(ethereumWsUrl) : null
 
 /* Casimir environment */
 const docsUrl = import.meta.env.PUBLIC_DOCS_URL || "https://docs.dev.casimir.co"
@@ -52,6 +52,6 @@ export default function useEnvironment() {
         docsUrl,
         usersUrl,
         walletConnectProjectId,
-        webSocketProvider,
+        wsProvider,
     }
 }
\ No newline at end of file
diff --git a/apps/web/src/composables/format.ts b/apps/web/src/composables/format.ts
index 8eaa116f3..ad04d68f1 100644
--- a/apps/web/src/composables/format.ts
+++ b/apps/web/src/composables/format.ts
@@ -49,10 +49,13 @@ export default function useFormat() {
     function formatEthersCasimirStaking(inputFloat: number) {
         // Ensure the number has 18 decimal places
         const formattedNumber = inputFloat.toFixed(18)
+
         // Split the number into integer and decimal parts
         const parts = formattedNumber.split(".")
+
         // Add commas to the integer part
         parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    
         // Rejoin the integer and decimal parts
         return parts.join(".")
     }
diff --git a/apps/web/src/composables/operators.ts b/apps/web/src/composables/operators.ts
index 0de2eea44..3d8aba168 100644
--- a/apps/web/src/composables/operators.ts
+++ b/apps/web/src/composables/operators.ts
@@ -29,7 +29,7 @@ const {
     getEigenRegistry,
     getEigenViews
 } = useContracts()
-const { ethereumUrl, ssvNetworkAddress, ssvViewsAddress, usersUrl, batchProvider, provider, webSocketProvider } = useEnvironment()
+const { ethereumUrl, ssvNetworkAddress, ssvViewsAddress, usersUrl, batchProvider, provider, wsProvider } = useEnvironment()
 const { browserProvidersList, getEthersBrowserSigner } = useEthers()
 const { getEthersLedgerSigner } = useLedger()
 const { getEthersTrezorSigner } = useTrezor()
@@ -80,7 +80,7 @@ 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 availableProvider = wsProvider || batchProvider || provider 
 
         const scanner = new Scanner({ 
             ethereumUrl,
diff --git a/common/env/src/index.ts b/common/env/src/index.ts
index 28f546aaa..d2dcbca3a 100644
--- a/common/env/src/index.ts
+++ b/common/env/src/index.ts
@@ -39,7 +39,7 @@ enum ETHEREUM_RPC_URL {
     TESTNET = "https://goerli.infura.io/v3/46a379ac6895489f812f33beb726b03b" // 'https://nodes.casimir.co/eth/goerli/limited'
 }
 
-enum ETHEREUM_WEBSOCKET_URL {
+enum ETHEREUM_WS_URL {
     TESTNET = "wss://goerli.infura.io/ws/v3/46a379ac6895489f812f33beb726b03b"
 }
 
@@ -61,7 +61,7 @@ export {
     ETHEREUM_CONTRACTS,
     ETHEREUM_NETWORK_NAME,
     ETHEREUM_RPC_URL,
-    ETHEREUM_WEBSOCKET_URL,
+    ETHEREUM_WS_URL,
     ETHEREUM_SIGNERS,
     HARDHAT_NETWORK_KEY
 }
diff --git a/scripts/cdk/deploy.ts b/scripts/cdk/deploy.ts
index 5e8179582..47ab60f70 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, ETHEREUM_WEBSOCKET_URL } from "@casimir/env"
+import { ETHEREUM_CONTRACTS, ETHEREUM_RPC_URL, ETHEREUM_WS_URL } from "@casimir/env"
 import { run } from "@casimir/shell"
 
 /**
@@ -23,7 +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.ETHEREUM_WS_URL = ETHEREUM_WS_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
@@ -35,7 +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_ETHEREUM_WS_URL = process.env.ETHEREUM_WS_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 908653698..9819b2232 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, ETHEREUM_WEBSOCKET_URL } from "@casimir/env"
+import { ETHEREUM_CONTRACTS, ETHEREUM_NETWORK_NAME, ETHEREUM_RPC_URL, ETHEREUM_WS_URL } from "@casimir/env"
 import { run, runSync } from "@casimir/shell"
 
 /**
@@ -97,7 +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]
+            process.env.ETHEREUM_WS_URL = ETHEREUM_WS_URL[networkKey]
             console.log(`Connecting to ${networkName} network at ${process.env.ETHEREUM_RPC_URL}`)
         } else {
             const networkName = ETHEREUM_NETWORK_NAME[networkKey]
@@ -122,7 +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_ETHEREUM_WS_URL = process.env.ETHEREUM_WS_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

From a7804ac5b541b95749b837feff32e50c145caf82 Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Thu, 16 Nov 2023 07:31:11 -0500
Subject: [PATCH 6/6] Small fix in environment.ts

---
 apps/web/src/composables/environment.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/composables/environment.ts b/apps/web/src/composables/environment.ts
index 854abc701..ba59d83c7 100644
--- a/apps/web/src/composables/environment.ts
+++ b/apps/web/src/composables/environment.ts
@@ -11,7 +11,7 @@ const ethereumUrl = import.meta.env.PUBLIC_ETHEREUM_RPC_URL || "http://127.0.0.1
 const ethereumWsUrl = import.meta.env.PUBLIC_ETHEREUM_WS_URL
 const provider = new ethers.providers.JsonRpcProvider(ethereumUrl)
 const batchProvider: ethers.providers.JsonRpcBatchProvider = new ethers.providers.JsonRpcBatchProvider(ethereumUrl)
-const wsProvider: ethers.providers.wsProvider | null = ethereumWsUrl !== "undefined" ? new ethers.providers.wsProvider(ethereumWsUrl) : null
+const wsProvider: ethers.providers.WebSocketProvider | null = ethereumWsUrl !== "undefined" ? new ethers.providers.WebSocketProvider(ethereumWsUrl) : null
 
 /* Casimir environment */
 const docsUrl = import.meta.env.PUBLIC_DOCS_URL || "https://docs.dev.casimir.co"