Refactor Operator.vue and operators.ts

consensusnetworks · Sep 20, 2023 · 6af875a · 6af875a
1 parent 840fbc5
commit 6af875a
Show file tree

Hide file tree

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