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