Handle register operator and hide modal

apps/web/src/composables/contracts.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { BigNumberish, ethers } from 'ethers'
 import { CasimirManager, CasimirRegistry, CasimirViews } from '@casimir/ethereum/build/@types'
 import ICasimirManagerAbi from '@casimir/ethereum/build/abi/ICasimirManager.json'
@@ -40,6 +40,9 @@ const operators = ref<Operator[]>([])
 const registeredOperators = ref<Operator[]>([])
 const nonregisteredOperators = ref<Operator[]>([])
 
+const isMounted = ref(false)
+const loadingRegisteredOperators = ref(false)
+
 export default function useContracts() {
     const { ethersProviderList, getEthersBalance, getEthersBrowserSigner } = useEthers()
     const { formatNumber } = useFormat()
@@ -331,14 +334,29 @@ export default function useContracts() {
 
     async function listenForContractEvents() {
         try {
+            console.log('listening for contract events')
             manager.on('StakeDeposited', stakeDepositedListener)
             manager.on('StakeRebalanced', stakeRebalancedListener)
             manager.on('WithdrawalInitiated', withdrawalInitiatedListener)
+            registry.on('OperatorRegistered', getUserOperators)
+            registry.on('OperatorDeregistered', getUserOperators)
+            registry.on('DeregistrationRequested', getUserOperators)
         } catch (err) {
             console.log(`There was an error in listenForContractEvents: ${err}`)
         }
     }
 
+    onMounted(() => {
+        if (isMounted.value) return
+        isMounted.value = true
+        listenForContractEvents()
+    })
+
+    onUnmounted(() => {
+        stopListeningForContractEvents()
+        isMounted.value = false
+    })
+
     async function _querySSVOperators(address: string) {
         try {
             const network = 'prater'
@@ -378,6 +396,7 @@ export default function useContracts() {
     }
 
     async function registerOperatorWithCasimir(walletProvider: ProviderString, address: string, operatorId: BigNumberish, value: string) {
+        loadingRegisteredOperators.value = true
         try {
             const signerCreators = {
                 'Browser': getEthersBrowserSigner,
@@ -393,11 +412,12 @@ export default function useContracts() {
                 signer = signerCreator(walletProvider)
             }
             const result = await registry.connect(signer as ethers.Signer).registerOperator(operatorId, { from: address, value: ethers.utils.parseEther(value)})
-            await result.wait()
-            return true
+            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)}`)
-            return false
+            loadingRegisteredOperators.value = false
         }
     }
 
@@ -463,8 +483,9 @@ export default function useContracts() {
     }
 
     return { 
-        currentStaked, 
-        manager, 
+        currentStaked,
+        loadingRegisteredOperators,
+        manager,
         operators,
         registeredOperators,
         stakingRewards,

apps/web/src/composables/wallet.ts

@@ -37,7 +37,7 @@ const selectedCurrency = ref<Currency>('')
 const toAddress = ref<string>('0x728474D29c2F81eb17a669a7582A2C17f1042b57')
 
 export default function useWallet() {
-  const { listenForContractEvents, refreshBreakdown, stopListeningForContractEvents } = useContracts()
+  const { refreshBreakdown, stopListeningForContractEvents } = useContracts()
   const { estimateEIP1559GasFee, ethersProviderList, getEthersAddressWithBalance, getEthersBalance, sendEthersTransaction, signEthersMessage, listenForTransactions, loginWithEthers, getEthersBrowserProviderSelectedCurrency, stopListeningForTransactions, switchEthersNetwork } = useEthers()
   const { getLedgerAddress, loginWithLedger, sendLedgerTransaction, signLedgerMessage } = useLedger()
   // const { solanaProviderList, sendSolanaTransaction, signSolanaMessage } = useSolana()
@@ -76,7 +76,6 @@ export default function useWallet() {
         if (error) throw new Error(message || 'There was an error getting the user')
         setUser(retrievedUser)
         setPrimaryAddress(user?.value?.address as string)
-        listenForContractEvents()
         listenForTransactions()
         loadingUserWallets.value = false
       } else { // Add account if it doesn't already exist

apps/web/src/pages/operators/Operator.vue

@@ -8,7 +8,7 @@ import useFormat from '@/composables/format'
 import useUsers from '@/composables/users'
 import useWallets from '@/composables/wallet'
 
-const { getUserOperators, registerOperatorWithCasimir, nonregisteredOperators, registeredOperators } = useContracts()
+const { getUserOperators, registerOperatorWithCasimir, loadingRegisteredOperators, nonregisteredOperators, registeredOperators } = useContracts()
 const { exportFile } = useFiles()
 const { convertString } = useFormat()
 const { openWalletsModal } = useWallets()
@@ -110,7 +110,7 @@ onMounted(async () => {
 watch(user, async () => {
   if (user.value) {
     await getUserOperators()
-    if(selectedWallet.value.address === ''){
+    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}
     }
@@ -132,6 +132,7 @@ watch(selectedWallet, async () =>{
 })
 
 watch(registeredOperators, () => {
+  openAddOperatorModal.value = false
   tableData.value = [...registeredOperators.value].map((operator: any) => {
     return {
       id: operator.id,
@@ -141,6 +142,7 @@ watch(registeredOperators, () => {
       nodeURL: operator.url
     }
   })
+  filterData()
 })
 
 watch([searchInput, selectedHeader, selectedOrientation, currentPage], ()=>{
@@ -204,35 +206,23 @@ const removeItemFromCheckedList = (item:any) => {
 }
 
 async function submitRegisterOperatorForm() {
-  loading.value = true
-  submitButtonTxt.value = 'Submitting...'
-  const registeredSuccess = await registerOperatorWithCasimir(
-    selectedWallet.value.wallet_provider as ProviderString, 
-    selectedWallet.value.address, 
-    parseInt(selectedOperatorID.value), 
-    selectedCollateral.value 
-  )
-  console.log('registeredSuccess :>> ', registeredSuccess)
-  loading.value = false
-
-  if (registeredSuccess) {
+  try {
+    await registerOperatorWithCasimir(
+      selectedWallet.value.wallet_provider as ProviderString, 
+      selectedWallet.value.address, 
+      parseInt(selectedOperatorID.value), 
+      selectedCollateral.value 
+    )
+    openAddOperatorModal.value = false
+  } catch (error) {
+    console.log('Error in submitRegisterOperatorForm :>> ', error)
     openAddOperatorModal.value = false
-    submitButtonTxt.value = 'Submit'
-    
-    const newOperator = {
-      id: selectedOperatorID.value,
-      collateral: selectedCollateral.value + ' ETH',
-      nodeURL: selectedPublicNodeURL.value,
-      poolCount: 0,
-      walletAddress: selectedWallet.value.address,
-    }
-
-    // TODO: @DemogorGod - this isn't causing the expected behavior...note the proxy objects as you add validatprs
-    tableData.value.push(newOperator)
-    console.log('tableData.value in submitRegisterOperatorForm :>> ', tableData.value)
   }
 
-  // selectedWallet.value = { address: '', wallet_provider: ''}
+  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}
+  }
   selectedOperatorID.value = ''
   selectedPublicNodeURL.value = ''
   selectedCollateral.value = ''
@@ -495,7 +485,8 @@ async function submitRegisterOperatorForm() {
                 type="submit"
                 class="export_button"
               >
-                {{ submitButtonTxt }}
+                <span v-if="loadingRegisteredOperators">Submitting</span>
+                <span v-else>Submit</span>
               </button>
             </div>
           </form>

apps/web/src/pages/overview/components/BreakdownChart.vue

@@ -7,7 +7,7 @@ import useEthers from '@/composables/ethers'
 import useScreenDimensions from '@/composables/screenDimensions'
 import { AnalyticsData, ProviderString } from '@casimir/types'
 
-const { currentStaked, listenForContractEvents, refreshBreakdown, stakingRewards, totalWalletBalance } = useContracts()
+const { currentStaked, refreshBreakdown, stakingRewards, totalWalletBalance } = useContracts()
 const { listenForTransactions } = useEthers()
 const { screenWidth } = useScreenDimensions()
 const { user, getUserAnalytics, userAnalytics } = useUsers()
@@ -107,7 +107,6 @@ onMounted(async () => {
     // TODO: Potentially find a better place to initialize these listeners
     // Doing this here because currently we're currently initializing listeners on connectWallet
     // which isn't used if user is already signed in
-    listenForContractEvents()
     listenForTransactions()
   } else {
     setChartData()