consensusnetworks · DemogorGod · Sep 28, 2023 · Sep 27, 2023 · Sep 27, 2023 · Sep 27, 2023
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -16,7 +16,12 @@
     <title>Casimir</title>
   </head>
   <body>
-    <div id="app"></div>
+<!-- 
+    <div style="position: relative; height: 100vh; width: 100vw; display: flex; justify-content: center; border: aqua solid 2px;">
+      <div style="position: absolute; top: 0px; left: 0px; height: 319px; width: 100vw; background-color: #000;"></div> -->
+      <div id="app"></div>
+    <!-- </div> -->
+
     <script type="module">
       import { Buffer } from "buffer"
       window.Buffer = Buffer

diff --git a/apps/web/src/components/LoaderSpinner.vue b/apps/web/src/components/LoaderSpinner.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="loader_spinner">
+    <div /><div /><div /><div /><div /><div /><div /><div /><div /><div /><div /><div />
+  </div>
+</template>
+
+
+<style scoped>
+.loader_spinner {
+  color: official;
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.loader_spinner div {
+  transform-origin: 40px 20px;
+  animation: loader_spinner 1.2s linear infinite;
+}
+.loader_spinner div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 37px;
+  width: 4px;
+  height: 10px;
+  border-radius: 999px;
+  background: #0D5FFF;
+  opacity: 0.4;
+}
+.loader_spinner div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+.loader_spinner div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -1s;
+}
+.loader_spinner div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.9s;
+}
+.loader_spinner div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.8s;
+}
+.loader_spinner div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.7s;
+}
+.loader_spinner div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.6s;
+}
+.loader_spinner div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.5s;
+}
+.loader_spinner div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.4s;
+}
+.loader_spinner div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.3s;
+}
+.loader_spinner div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.2s;
+}
+.loader_spinner div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.1s;
+}
+.loader_spinner div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+}
+@keyframes loader_spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>
diff --git a/apps/web/src/composables/analytics.ts b/apps/web/src/composables/analytics.ts
@@ -1,14 +1,15 @@
-import { readonly, ref, watchEffect } from 'vue'
+import { readonly, ref } from 'vue'
 import { UserAnalyticsData } from '@casimir/types'
 import useEnvironment from '@/composables/environment'
 import useTxData from '../mockData/mock_transaction_data'
 
 const { usersUrl } = useEnvironment()
 const { mockData, txData } = useTxData()
+const loadingInitializeAnalytics = ref(false)
+const loadingInitializeAnalyticsError = ref(false)
 
 export default function useAnalytics() {
     const finishedComputingUerAnalytics = ref(false)
-    const getUserAnalyticsError = ref(null)
     const rawUserAnalytics = ref<any>(null)
     const userAnalytics = ref<UserAnalyticsData>({
         oneMonth: {
@@ -153,7 +154,6 @@ export default function useAnalytics() {
             // const { error, message, data: athenaData } = await response.json()
             // console.log('data from analytics :>> ', data)
             // userAnalytics.value = athenaData
-            // getUserAnalyticsError.value = error
             // if (error) throw new Error(`Error in getUserAnalytics: ${message}`)
 
             // TODO: Get events, actions, and contract data from the API
@@ -180,12 +180,19 @@ export default function useAnalytics() {
     }
 
     async function initializeAnalyticsComposable() {
-        resetUserAnalytics()
-        await getUserAnalytics()
+        try {
+            loadingInitializeAnalytics.value = true
+            resetUserAnalytics()
+            await getUserAnalytics()
+            loadingInitializeAnalytics.value = false
+        } catch (error) {
+            loadingInitializeAnalyticsError.value = true
+            loadingInitializeAnalytics.value = false
+            throw new Error('Error initializing analytics')
+        }
     }
 
     function resetUserAnalytics() {
-        getUserAnalyticsError.value = null
         userAnalytics.value = {
             oneMonth: {
                 labels: [],
@@ -208,10 +215,11 @@ export default function useAnalytics() {
 
     return { 
         finishedComputingUerAnalytics: readonly(finishedComputingUerAnalytics),
+        loadingInitializeAnalytics: readonly(loadingInitializeAnalytics),
+        loadingInitializeAnalyticsError: readonly(loadingInitializeAnalyticsError),
+        rawUserAnalytics,
         userAnalytics: readonly(userAnalytics),
-        getUserAnalyticsError: readonly(getUserAnalyticsError),
+        initializeAnalyticsComposable,
         updateAnalytics,
-        rawUserAnalytics,
-        initializeAnalyticsComposable
     }
 }
diff --git a/apps/web/src/composables/breakdownMetrics.ts b/apps/web/src/composables/breakdownMetrics.ts
@@ -13,7 +13,11 @@ const { getCurrentPrice } = usePrice()
 
 const provider = new ethers.providers.JsonRpcProvider(ethereumUrl)
 
+const loadingInitializeBreakdownMetrics = ref(false)
+const loadingInitializeBreakdownMetricsError = ref(false)
+
 export default function useBreakdownMetrics() {
+
     const userValue = ref()
 
     const currentStaked = ref<BreakdownAmount>({
@@ -238,10 +242,18 @@ export default function useBreakdownMetrics() {
 
     async function initializeComposable(user: UserWithAccountsAndOperators){
         userValue.value = toValue(user)
-        provider.removeAllListeners('block')
-        provider.on('block', blockListener as ethers.providers.Listener)
-        listenForContractEvents()
-        await refreshBreakdown()
+        try {
+            loadingInitializeBreakdownMetrics.value = true
+            provider.removeAllListeners('block')
+            provider.on('block', blockListener as ethers.providers.Listener)
+            listenForContractEvents()
+            await refreshBreakdown()
+            loadingInitializeBreakdownMetrics.value = false
+        } catch (error) {
+            loadingInitializeBreakdownMetricsError.value = true
+            console.log('Error initializing breakdown metrics :>> ', error)
+            loadingInitializeBreakdownMetrics.value = false
+        }
     }
 
     async function uninitializeComposable(){
@@ -252,6 +264,8 @@ export default function useBreakdownMetrics() {
 
     return {
         currentStaked: readonly(currentStaked),
+        loadingInitializeBreakdownMetrics: readonly(loadingInitializeBreakdownMetrics),
+        loadingInitializeBreakdownMetricsError: readonly(loadingInitializeBreakdownMetricsError),
         stakingRewards: readonly(stakingRewards),
         totalWalletBalance: readonly(totalWalletBalance),
         initializeComposable,

diff --git a/apps/web/src/composables/contracts.ts b/apps/web/src/composables/contracts.ts
@@ -1,5 +1,5 @@
-import { ref } from 'vue'
-import { BigNumberish, ethers } from 'ethers'
+import { ref, readonly } from 'vue'
+import { ethers } from 'ethers'
 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'
@@ -12,31 +12,24 @@ import useWalletConnectV2 from './walletConnectV2'
 import { ProviderString } from '@casimir/types'
 import { Operator } from '@casimir/ssv'
 
-interface RegisterOperatorWithCasimirParams {
-    walletProvider: ProviderString
-    address: string
-    operatorId: BigNumberish
-    collateral: string
-}
-
 const { ethereumUrl, managerAddress, registryAddress, viewsAddress } = useEnvironment()
 const provider = new ethers.providers.JsonRpcProvider(ethereumUrl)
 const manager: CasimirManager & ethers.Contract = new ethers.Contract(managerAddress, ICasimirManagerAbi, provider) as CasimirManager
 const views: CasimirViews & ethers.Contract = new ethers.Contract(viewsAddress, ICasimirViewsAbi, provider) as CasimirViews
 const registry: CasimirRegistry & ethers.Contract = new ethers.Contract(registryAddress, ICasimirRegistryAbi, provider) as CasimirRegistry
 
 const operators = ref<Operator[]>([])
-
-const loadingRegisteredOperators = ref(false)
+const { ethersProviderList, getEthersBrowserSigner } = useEthers()
+const { getEthersLedgerSigner } = useLedger()
+const { getEthersTrezorSigner } = useTrezor()
+const { getWalletConnectSignerV2, nonReactiveWalletConnectWeb3Provider } = useWalletConnectV2()
 
 export default function useContracts() {
-    const { ethersProviderList, getEthersBrowserSigner } = useEthers()
-    const { getEthersLedgerSigner } = useLedger()
-    const { getEthersTrezorSigner } = useTrezor()
-    const { getWalletConnectSignerV2, nonReactiveWalletConnectWeb3Provider } = useWalletConnectV2()
-
+    const loadingOnDeposit = ref(false)
+    const loadingOnDepositError = ref(false)
     async function deposit({ amount, walletProvider }: { amount: string, walletProvider: ProviderString }) {
         try {
+            loadingOnDeposit.value = true
             const signerCreators = {
                 'Browser': getEthersBrowserSigner,
                 'Ledger': getEthersLedgerSigner,
@@ -63,10 +56,13 @@ export default function useContracts() {
             const result = await managerSigner.depositStake({ value, type: 2 })
             console.log('result :>> ', result)
             await result.wait(2)
+            loadingOnDeposit.value = false
             return true
         } catch (err) {
+            loadingOnDepositError.value = true
             console.log('err :>> ', err)
             console.error(`There was an error in deposit function: ${JSON.stringify(err)}`)
+            loadingOnDeposit.value = false
             return false
         }
     }
@@ -135,32 +131,6 @@ export default function useContracts() {
         }
     }
 
-    async function registerOperatorWithCasimir({ walletProvider, address, operatorId, collateral }: RegisterOperatorWithCasimirParams) {
-        loadingRegisteredOperators.value = true
-        try {
-            const signerCreators = {
-                'Browser': getEthersBrowserSigner,
-                'Ledger': getEthersLedgerSigner,
-                'Trezor': getEthersTrezorSigner
-            }
-            const signerType = ethersProviderList.includes(walletProvider) ? 'Browser' : walletProvider
-            const signerCreator = signerCreators[signerType as keyof typeof signerCreators]
-            let signer
-            if (walletProvider === 'WalletConnect') {
-                signer = nonReactiveWalletConnectWeb3Provider
-            } else {
-                signer = signerCreator(walletProvider)
-            }
-            const result = await registry.connect(signer as ethers.Signer).registerOperator(operatorId, { from: address, value: ethers.utils.parseEther(collateral)})
-            loadingRegisteredOperators.value = false
-            // TODO: @shanejearley - How many confirmations do we want to wait?
-            await result?.wait(1)
-        } catch (err) {
-            console.error(`There was an error in registerOperatorWithCasimir function: ${JSON.stringify(err)}`)
-            loadingRegisteredOperators.value = false
-        }
-    }
-
     async function withdraw({ amount, walletProvider }: { amount: string, walletProvider: ProviderString }) {
         const signerCreators = {
             'Browser': getEthersBrowserSigner,
@@ -183,15 +153,15 @@ export default function useContracts() {
     }
 
     return { 
-        loadingRegisteredOperators,
+        loadingOnDeposit: readonly(loadingOnDeposit),
+        loadingOnDepositError: readonly(loadingOnDepositError),
         manager,
         operators,
         registry,
         views,
         deposit, 
         getDepositFees,
         getUserStake,
-        registerOperatorWithCasimir,
         withdraw 
     }
 }