Refactor contracts composable to be a staking composable and port ove…

…r contract env to useEnvironment
consensusnetworks · Sep 29, 2023 · 6d8f850 · 6d8f850
1 parent 055a0ea
commit 6d8f850
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 92 deletions.
diff --git a/apps/web/src/composables/breakdownMetrics.ts b/apps/web/src/composables/breakdownMetrics.ts
@@ -1,13 +1,11 @@
 import { readonly, ref, toValue } 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'
 
-const { manager } = useContracts()
-const { ethereumUrl } = useEnvironment()
+const { ethereumUrl, manager } = useEnvironment()
 const { formatNumber } = useFormat()
 const { getCurrentPrice } = usePrice()
 

diff --git a/apps/web/src/composables/environment.ts b/apps/web/src/composables/environment.ts
@@ -1,33 +1,49 @@
+import { ethers } from 'ethers'
+import { CasimirManager, CasimirRegistry, CasimirViews } from '@casimir/ethereum/build/@types'
+import CasimirManagerAbi from '@casimir/ethereum/build/abi/CasimirManager.json'
+import CasimirRegistryAbi from '@casimir/ethereum/build/abi/CasimirRegistry.json'
+import CasimirViewsAbi from '@casimir/ethereum/build/abi/CasimirViews.json'
+
+const domain = window.location.host
+const origin = window.location.origin
+const usersUrl = import.meta.env.PUBLIC_USERS_URL || 'http://localhost:4000'
+const ethereumUrl = import.meta.env.PUBLIC_ETHEREUM_RPC_URL || 'http://127.0.0.1:8545'
+const ledgerType = import.meta.env.PUBLIC_SPECULOS_URL ? 'speculos' : 'usb'
+const speculosUrl = import.meta.env.PUBLIC_SPECULOS_URL ? 'http://localhost:5001' : ''
+const cryptoCompareApiKey = import.meta.env.PUBLIC_CRYPTO_COMPARE_API_KEY || ''
+const ssvNetworkAddress = import.meta.env.PUBLIC_SSV_NETWORK_ADDRESS
+const ssvViewsAddress = import.meta.env.PUBLIC_SSV_VIEWS_ADDRESS
+const walletConnectProjectId = import.meta.env.PUBLIC_WALLET_CONNECT_PROJECT_ID
+
+/* Contracts */
+const managerAddress = import.meta.env.PUBLIC_MANAGER_ADDRESS
+if (!managerAddress) throw new Error('No manager address provided')
+const viewsAddress = import.meta.env.PUBLIC_VIEWS_ADDRESS
+if (!viewsAddress) throw new Error('No views address provided')
+const registryAddress = import.meta.env.PUBLIC_REGISTRY_ADDRESS
+if (!registryAddress) throw new Error('No registry address provided')
+const provider = new ethers.providers.JsonRpcProvider(ethereumUrl)
+const manager: CasimirManager & ethers.Contract = new ethers.Contract(managerAddress, CasimirManagerAbi, provider) as CasimirManager
+const views: CasimirViews & ethers.Contract = new ethers.Contract(viewsAddress, CasimirViewsAbi, provider) as CasimirViews
+const registry: CasimirRegistry & ethers.Contract = new ethers.Contract(registryAddress, CasimirRegistryAbi, provider) as CasimirRegistry
+
 export default function useEnvironment() {
-    const domain = window.location.host
-    const origin = window.location.origin
-    const managerAddress = import.meta.env.PUBLIC_MANAGER_ADDRESS
-    if (!managerAddress) throw new Error('No manager address provided')
-    const viewsAddress = import.meta.env.PUBLIC_VIEWS_ADDRESS
-    if (!viewsAddress) throw new Error('No views address provided')
-    const registryAddress = import.meta.env.PUBLIC_REGISTRY_ADDRESS
-    if (!registryAddress) throw new Error('No registry address provided')
-    const usersUrl = import.meta.env.PUBLIC_USERS_URL || 'http://localhost:4000'
-    const ethereumUrl = import.meta.env.PUBLIC_ETHEREUM_RPC_URL || 'http://127.0.0.1:8545'
-    const ledgerType = import.meta.env.PUBLIC_SPECULOS_URL ? 'speculos' : 'usb'
-    const speculosUrl = import.meta.env.PUBLIC_SPECULOS_URL ? 'http://localhost:5001' : ''
-    const cryptoCompareApiKey = import.meta.env.PUBLIC_CRYPTO_COMPARE_API_KEY || ''
-    const ssvNetworkAddress = import.meta.env.PUBLIC_SSV_NETWORK_ADDRESS
-    const ssvViewsAddress = import.meta.env.PUBLIC_SSV_VIEWS_ADDRESS
-    const walletConnectProjectId = import.meta.env.PUBLIC_WALLET_CONNECT_PROJECT_ID
-
     return {
         domain,
         cryptoCompareApiKey,
         ethereumUrl,
+        manager,
+        provider,
         origin,
         ledgerType,
         managerAddress,
         registryAddress,
+        registry,
         speculosUrl,
         ssvNetworkAddress,
         ssvViewsAddress,
         usersUrl,
+        views,
         viewsAddress,
         walletConnectProjectId
     }

diff --git a/apps/web/src/composables/operators.ts b/apps/web/src/composables/operators.ts
@@ -1,15 +1,13 @@
 import { readonly, ref } from 'vue'
 import useEnvironment from '@/composables/environment'
-import useContracts from '@/composables/contracts'
 import { Operator, Scanner } from '@casimir/ssv'
 import { Account, Pool, RegisteredOperator, RegisterOperatorWithCasimirParams, UserWithAccountsAndOperators } from '@casimir/types'
 import { ethers } from 'ethers'
 import useEthers from '@/composables/ethers'
 import useLedger from '@/composables/ledger'
 import useTrezor from '@/composables/trezor'
 
-const { manager, registry, views } = useContracts()
-const { ethereumUrl, ssvNetworkAddress, ssvViewsAddress, usersUrl } = useEnvironment()
+const { ethereumUrl, manager, registry, ssvNetworkAddress, ssvViewsAddress, usersUrl, views } = useEnvironment()
 const { ethersProviderList, getEthersBrowserSigner } = useEthers()
 const { getEthersLedgerSigner } = useLedger()
 const { getEthersTrezorSigner } = useTrezor()
@@ -183,4 +181,46 @@ export default function useOperators() {
         initializeComposable,
         registerOperatorWithCasimir,
     }
-}
+}
+
+// async function _getSSVOperators(): Promise<SSVOperator[]> {
+//     const ownerAddresses = (user?.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
+//     // const ownerAddressesTest = ['0x9725Dc287005CB8F11CA628Bb769E4A4Fc8f0309']
+//     try {
+//         // const promises = ownerAddressesTest.map((address) => _querySSVOperators(address))
+//         const promises = ownerAddresses.map((address) => _querySSVOperators(address))
+//         const settledPromises = await Promise.allSettled(promises) as Array<PromiseFulfilledResult<any>>
+//         const operators = settledPromises
+//             .filter((result) => result.status === 'fulfilled')
+//             .map((result) => result.value)
+
+//         const ssvOperators = (operators[0] as Array<any>).map((operator) => {
+//             const { id, fee, name, owner_address, performance } = operator
+//             return {
+//                 id: id.toString(),
+//                 fee: ethers.utils.formatEther(fee),
+//                 name,
+//                 ownerAddress: owner_address,
+//                 performance
+//             } as SSVOperator
+//         })
+
+//         return ssvOperators
+//     } catch (err) {
+//         console.error(`There was an error in _getSSVOperators function: ${JSON.stringify(err)}`)
+//         return []
+//     }
+// }
+
+// async function _querySSVOperators(address: string) {
+//     try {
+//         const network = 'prater'
+//         const url = `https://api.ssv.network/api/v4/${network}/operators/owned_by/${address}`
+//         const response = await fetch(url)
+//         const { operators } = await response.json()
+//         return operators
+//     } catch (err) {
+//         console.error(`There was an error in _querySSVOperators function: ${JSON.stringify(err)}`)
+//         return []
+//     }
+// }
diff --git a/apps/web/src/composables/contracts.ts → apps/web/src/composables/staking.ts b/apps/web/src/composables/contracts.ts → apps/web/src/composables/staking.ts
@@ -1,30 +1,18 @@
-import { ref, readonly } from 'vue'
 import { ethers } from 'ethers'
-import { CasimirManager, CasimirRegistry, CasimirViews } from '@casimir/ethereum/build/@types'
-import CasimirManagerAbi from '@casimir/ethereum/build/abi/CasimirManager.json'
-import CasimirRegistryAbi from '@casimir/ethereum/build/abi/CasimirRegistry.json'
-import CasimirViewsAbi from '@casimir/ethereum/build/abi/CasimirViews.json'
+import { ProviderString } from '@casimir/types'
 import useEnvironment from './environment'
 import useEthers from '@/composables/ethers'
 import useLedger from '@/composables/ledger'
 import useTrezor from '@/composables/trezor'
 import useWalletConnectV2 from './walletConnectV2'
-import { ProviderString } from '@casimir/types'
-import { Operator } from '@casimir/ssv'
-
-const { ethereumUrl, managerAddress, registryAddress, viewsAddress } = useEnvironment()
-const provider = new ethers.providers.JsonRpcProvider(ethereumUrl)
-const manager: CasimirManager & ethers.Contract = new ethers.Contract(managerAddress, CasimirManagerAbi, provider) as CasimirManager
-const views: CasimirViews & ethers.Contract = new ethers.Contract(viewsAddress, CasimirViewsAbi, provider) as CasimirViews
-const registry: CasimirRegistry & ethers.Contract = new ethers.Contract(registryAddress, CasimirRegistryAbi, provider) as CasimirRegistry
 
-const operators = ref<Operator[]>([])
+const { manager } = useEnvironment()
 const { ethersProviderList, getEthersBrowserSigner } = useEthers()
 const { getEthersLedgerSigner } = useLedger()
 const { getEthersTrezorSigner } = useTrezor()
 const { getWalletConnectSignerV2 } = useWalletConnectV2()
 
-export default function useContracts() {
+export default function useStaking() {
 
     async function deposit({ amount, walletProvider }: { amount: string, walletProvider: ProviderString }) {
         try {
@@ -64,35 +52,6 @@ export default function useContracts() {
         }
     }
 
-    // async function _getSSVOperators(): Promise<SSVOperator[]> {
-    //     const ownerAddresses = (user?.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
-    //     // const ownerAddressesTest = ['0x9725Dc287005CB8F11CA628Bb769E4A4Fc8f0309']
-    //     try {
-    //         // const promises = ownerAddressesTest.map((address) => _querySSVOperators(address))
-    //         const promises = ownerAddresses.map((address) => _querySSVOperators(address))
-    //         const settledPromises = await Promise.allSettled(promises) as Array<PromiseFulfilledResult<any>>
-    //         const operators = settledPromises
-    //             .filter((result) => result.status === 'fulfilled')
-    //             .map((result) => result.value)
-
-    //         const ssvOperators = (operators[0] as Array<any>).map((operator) => {
-    //             const { id, fee, name, owner_address, performance } = operator
-    //             return {
-    //                 id: id.toString(),
-    //                 fee: ethers.utils.formatEther(fee),
-    //                 name,
-    //                 ownerAddress: owner_address,
-    //                 performance
-    //             } as SSVOperator
-    //         })
-
-    //         return ssvOperators
-    //     } catch (err) {
-    //         console.error(`There was an error in _getSSVOperators function: ${JSON.stringify(err)}`)
-    //         return []
-    //     }
-    // }
-
     async function getUserStake(address: string): Promise<number> {
         try {
             const bigNumber = await manager.getUserStake(address)
@@ -104,19 +63,6 @@ export default function useContracts() {
         }
     }
 
-    async function _querySSVOperators(address: string) {
-        try {
-            const network = 'prater'
-            const url = `https://api.ssv.network/api/v4/${network}/operators/owned_by/${address}`
-            const response = await fetch(url)
-            const { operators } = await response.json()
-            return operators
-        } catch (err) {
-            console.error(`There was an error in _querySSVOperators function: ${JSON.stringify(err)}`)
-            return []
-        }
-    }
-
     async function withdraw({ amount, walletProvider }: { amount: string, walletProvider: ProviderString }) {
         const signerCreators = {
             'Browser': getEthersBrowserSigner,
@@ -140,10 +86,6 @@ export default function useContracts() {
     }
 
     return { 
-        manager,
-        operators,
-        registry,
-        views,
         deposit, 
         getDepositFees,
         getUserStake,

diff --git a/apps/web/src/composables/walletConnectV2.ts b/apps/web/src/composables/walletConnectV2.ts
@@ -147,10 +147,7 @@ export default function useWalletConnectV2() {
   }
 
   function uninitializeWalletConnect() {
-    cleanupFunctions.forEach((cleanup) => {
-      console.log('cleaning up')
-      cleanup()
-    })
+    cleanupFunctions.forEach((cleanup) => cleanup())
     cleanupFunctions = [] // Reset the array
     componentIsMounted.value = false
   }

diff --git a/apps/web/src/pages/overview/components/Staking.vue b/apps/web/src/pages/overview/components/Staking.vue
@@ -2,15 +2,15 @@
 import { ref, onMounted, watch } from 'vue'
 import { FormattedWalletOption, ProviderString } from '@casimir/types'
 import VueFeather from 'vue-feather'
-import useContracts from '@/composables/contracts'
+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 TermsOfService from '@/components/TermsOfService.vue'
 
-const { deposit, getDepositFees, getUserStake } = useContracts()
+const { deposit, getDepositFees, getUserStake } = useStaking()
 const { getEthersBalance } = useEthers()
 const { convertString } = useFormat()
 const { getCurrentPrice } = usePrice()
@@ -576,4 +576,4 @@ const handleDeposit = async () => {
   box-shadow: 0px 0px 0px 4px rgba(237, 235, 255, 0.26);
   border-radius: 4px;
 }
-</style>@/composables/user
+</style>@/composables/user@/composables/staking